From 2e77815cd4bff3311c9fbabc6f6803559eef5aa5 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 20 Feb 2023 16:22:04 -0500 Subject: [PATCH 01/13] feat(Popper): add width props, remove popperMatchesTriggerWidth --- .../__snapshots__/DatePicker.test.tsx.snap | 6 +++ .../Dropdown/DropdownWithContext.tsx | 2 +- .../LabelGroupEditableAddDropdown.tsx | 2 +- .../examples/LabelGroupEditableAddModal.tsx | 4 +- .../__tests__/__snapshots__/Nav.test.tsx.snap | 12 ++++- .../Pagination/PaginationOptionsMenu.tsx | 2 +- .../src/components/Popover/Popover.tsx | 2 +- .../__snapshots__/SearchInput.test.tsx.snap | 6 ++- .../src/components/Tabs/OverflowTab.tsx | 2 +- .../Tabs/__tests__/OverflowTab.test.tsx | 32 +++++------- .../__snapshots__/OverflowTab.test.tsx.snap | 6 --- .../src/components/Tooltip/Tooltip.tsx | 2 +- .../examples/ComposableActionsMenu.tsx | 2 +- .../ComposableApplicationLauncher.tsx | 2 +- .../examples/ComposableContextSelector.tsx | 2 +- .../examples/ComposableDateSelect.tsx | 2 +- .../examples/ComposableDrilldownMenu.tsx | 2 +- .../examples/ComposableDropdwnVariants.tsx | 2 +- .../examples/ComposableFlyout.tsx | 2 +- .../examples/ComposableTreeViewMenu.tsx | 2 +- .../examples/FilterAttributeSearch.tsx | 2 +- .../Filters/examples/FilterCheckboxSelect.tsx | 2 +- .../demos/Filters/examples/FilterFaceted.tsx | 2 +- .../examples/FilterMixedSelectGroup.tsx | 2 +- .../examples/FilterSameSelectGroup.tsx | 2 +- .../Filters/examples/FilterSearchInput.tsx | 2 +- .../Filters/examples/FilterSingleSelect.tsx | 2 +- .../react-core/src/helpers/Popper/Popper.tsx | 50 +++++++++++++++---- .../src/next/components/Select/Select.tsx | 6 ++- .../src/components/Table/ActionsColumn.tsx | 14 +++--- 30 files changed, 108 insertions(+), 70 deletions(-) diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index ae783f510e7..0992bb52311 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -57,6 +57,12 @@ exports[`With popover opened 1`] = ` /> diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap index c7be5b9533d..43dc65df932 100644 --- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap @@ -1098,8 +1098,16 @@ exports[`Nav Nav List with flyout 1`] = ` data-popper-reference-hidden="true" style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);" > -
- Flyout test +
+
+ Flyout test +
diff --git a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx index 3b86bbedd0b..c9c3c761f2c 100644 --- a/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx +++ b/packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx @@ -206,7 +206,7 @@ export const PaginationOptionsMenu: React.FunctionComponent ); diff --git a/packages/react-core/src/components/Popover/Popover.tsx b/packages/react-core/src/components/Popover/Popover.tsx index b29c218273d..1fd056548ba 100644 --- a/packages/react-core/src/components/Popover/Popover.tsx +++ b/packages/react-core/src/components/Popover/Popover.tsx @@ -464,7 +464,7 @@ export const Popover: React.FunctionComponent = ({ triggerRef={triggerRef} popper={content} popperRef={popoverRef} - popperMatchesTriggerWidth={false} + minWidth="auto" appendTo={appendTo} isVisible={visible} positionModifiers={positionModifiers} diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index e6dbf02bc21..a483b9d0f30 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -249,7 +249,11 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;" >
= ({ popper={overflowMenu} popperRef={menuRef} isVisible={isExpanded} - popperMatchesTriggerWidth={false} + minWidth="auto" appendTo={overflowLIRef.current} zIndex={zIndex} /> diff --git a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx index 5b3f748cb68..da4c39bcf47 100644 --- a/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx +++ b/packages/react-core/src/components/Tabs/__tests__/OverflowTab.test.tsx @@ -6,11 +6,10 @@ import { OverflowTab } from '../OverflowTab'; import { TabsContext } from '../TabsContext'; jest.mock('../../../helpers', () => ({ - Popper: ({ trigger, popper, isVisible, popperMatchesTriggerWidth, appendTo }) => ( + Popper: ({ trigger, popper, isVisible, appendTo }) => (
{trigger}
{isVisible && popper}
-

Popper matches trigger width: {`${popperMatchesTriggerWidth}`}

Append to class name: {appendTo && `${appendTo.className}`}

) @@ -206,8 +205,8 @@ test('Closes the overflowing tabs menu when a tab is selected', async () => { }, - { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject }, + { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -228,8 +227,8 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu' }, - { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject }, + { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -250,7 +249,7 @@ test('Calls the onTabClick callback provided via context when a tab is clicked', } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -303,7 +302,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -323,7 +322,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} defaultTitleText="Test" /> @@ -369,13 +368,6 @@ test('Renders the tab with aria-expanded set to true when the menu is opened', a expect(overflowTab).toHaveAttribute('aria-expanded', 'true'); }); -test('Passes Popper popperMatchesTriggerWidth set to false', () => { - render(); - - // This assertion relies on the structure of the Popper mock to verify the correct props are being sent to Popper - expect(screen.getByText('Popper matches trigger width: false')).toBeVisible(); -}); - test('Passes Popper an appendTo value of the presentation element', async () => { const user = userEvent.setup(); @@ -394,7 +386,7 @@ test('Does not render an overflowing tab as a selected menu item by default', as } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -413,7 +405,7 @@ test('Renders an overflowing tab as a selected menu item when its key matches th } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> @@ -432,8 +424,8 @@ test('Matches snapshot when expanded', async () => { }, - { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject } + { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject }, + { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject } ]} /> diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap index c5c13b9e85e..33f4d7e26cb 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap @@ -78,9 +78,6 @@ exports[`Matches snapshot when expanded 1`] = `
-

- Popper matches trigger width: false -

Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current

@@ -166,9 +163,6 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1` -

- Popper matches trigger width: false -

Append to class name: pf-c-tabs__item pf-m-overflow

diff --git a/packages/react-core/src/components/Tooltip/Tooltip.tsx b/packages/react-core/src/components/Tooltip/Tooltip.tsx index 2761f3f9aaf..0339e1a1cc5 100644 --- a/packages/react-core/src/components/Tooltip/Tooltip.tsx +++ b/packages/react-core/src/components/Tooltip/Tooltip.tsx @@ -321,7 +321,7 @@ export const Tooltip: React.FunctionComponent = ({ triggerRef={triggerRef} popper={content} popperRef={popperRef} - popperMatchesTriggerWidth={false} + minWidth="auto" appendTo={appendTo} isVisible={visible} positionModifiers={positionModifiers} diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx index 2a1baa45aa8..111e6842f0d 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx @@ -129,7 +129,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx index a02e18c6d9c..1845ed3b013 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx @@ -272,7 +272,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx index b7cd8809d8d..cabf54dc949 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx @@ -205,7 +205,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx index 8aca5f971d5..98044a3c706 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx @@ -116,7 +116,7 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx index 95c85398881..629078fee3a 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx @@ -254,7 +254,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx index 5e5e02e519d..01d9005d994 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx @@ -232,7 +232,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)} + {...(['image', 'checkbox'].includes(toggleSelected) && { minWidth: 'auto' })} /> ); diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx index 81ef42a0d58..f75d396f687 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx @@ -107,7 +107,7 @@ export const ComposableFlyout: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx index f5338300e18..e767fa64be2 100644 --- a/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx +++ b/packages/react-core/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx @@ -274,7 +274,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => { popper={menu} popperRef={menuRef} isVisible={isOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); }; diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx index f3ccdb16026..80773125b9e 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx @@ -256,7 +256,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx index 16558d5a564..eb438302df7 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx @@ -231,7 +231,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx index 5c58b9a83cd..5006936fb40 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx @@ -239,7 +239,7 @@ export const FilterFaceted: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx index ecfc1098b5b..2d4580ebeee 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx @@ -236,7 +236,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx index 9fe3fc11035..37f3ebc8a44 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx @@ -237,7 +237,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx index 56ec8d6ed2b..326e11ed452 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx @@ -240,7 +240,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx index 41427758fea..988b248bfe8 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx @@ -226,7 +226,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => { popperRef={bulkSelectMenuRef} appendTo={bulkSelectContainerRef.current || undefined} isVisible={isBulkSelectOpen} - popperMatchesTriggerWidth={false} + minWidth="auto" /> ); diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index e1b5677bf80..9d8e6bd2219 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -62,14 +62,18 @@ export interface PopperProps { * Passing this prop will remove the wrapper div element from the popper. */ popperRef?: HTMLElement | (() => HTMLElement) | React.RefObject; - /** True to set the width of the popper element to the trigger element's width */ - popperMatchesTriggerWidth?: boolean; /** popper direction */ direction?: 'up' | 'down'; /** popper position */ position?: 'right' | 'left' | 'center'; /** Instead of direction and position can set the placement of the popper */ placement?: Placement; + /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */ + width?: string | 'trigger'; + /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */ + minWidth?: string | 'trigger'; + /** Maximum width of the popper. If the value is "trigger", it will set the max width to the trigger element's width */ + maxWidth?: string | 'trigger'; /** The container to append the popper to. Defaults to 'inline'. */ appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; /** z-index of the popper element */ @@ -147,10 +151,12 @@ export interface PopperProps { export const Popper: React.FunctionComponent = ({ trigger, popper, - popperMatchesTriggerWidth = true, direction = 'down', position = 'left', placement, + width, + minWidth = 'trigger', + maxWidth, appendTo = 'inline', zIndex = 9999, isVisible = true, @@ -279,21 +285,45 @@ export const Popper: React.FunctionComponent = ({ () => getOppositePlacement(getPlacement()), [direction, position, placement] ); - const sameWidthMod: Modifier<'sameWidth', {}> = React.useMemo( + + const widthMods: Modifier<'widthMods', {}> = React.useMemo( () => ({ - name: 'sameWidth', - enabled: popperMatchesTriggerWidth, + name: 'widthMods', + enabled: width !== undefined || minWidth !== undefined || maxWidth !== undefined, phase: 'beforeWrite', requires: ['computeStyles'], fn: ({ state }) => { - state.styles.popper.width = `${state.rects.reference.width}px`; + if (width) { + state.styles.popper.width = width === 'trigger' ? `${state.rects.reference.width}px` : width; + } + + if (minWidth) { + state.styles.popper.minWidth = minWidth === 'trigger' ? `${state.rects.reference.width}px` : minWidth; + } + + if (maxWidth) { + state.styles.popper.maxWidth = maxWidth === 'trigger' ? `${state.rects.reference.width}px` : maxWidth; + } }, effect: ({ state }) => { - state.elements.popper.style.width = `${(state.elements.reference as HTMLElement).offsetWidth}px`; + if (width) { + state.elements.popper.style.width = + width === 'trigger' ? `${(state.elements.reference as HTMLElement).offsetWidth}px` : width; + } + + if (minWidth) { + state.elements.popper.style.minWidth = + minWidth === 'trigger' ? `${(state.elements.reference as HTMLElement).offsetWidth}px` : minWidth; + } + + if (maxWidth) { + state.elements.popper.style.maxWidth = + maxWidth === 'trigger' ? `${(state.elements.reference as HTMLElement).offsetWidth}px` : maxWidth; + } return () => {}; } }), - [popperMatchesTriggerWidth] + [width, minWidth, maxWidth] ); const { @@ -326,7 +356,7 @@ export const Popper: React.FunctionComponent = ({ fallbackPlacements: flipBehavior === 'flip' ? [getOppositePlacementMemo] : flipBehavior } }, - sameWidthMod + widthMods ] }); diff --git a/packages/react-core/src/next/components/Select/Select.tsx b/packages/react-core/src/next/components/Select/Select.tsx index 516d4919e66..19fed27c8bd 100644 --- a/packages/react-core/src/next/components/Select/Select.tsx +++ b/packages/react-core/src/next/components/Select/Select.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { css } from '@patternfly/react-styles'; import { Menu, MenuContent, MenuProps } from '../../../components/Menu'; -import { Popper } from '../../../helpers/Popper/Popper'; +import { Popper, PopperProps } from '../../../helpers/Popper/Popper'; import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../../helpers'; export interface SelectProps extends MenuProps, OUIAProps { @@ -30,6 +30,8 @@ export interface SelectProps extends MenuProps, OUIAProps { zIndex?: number; /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */ role?: string; + /** Additional properties to pass to the Popper */ + popperProps?: PopperProps; } const SelectBase: React.FunctionComponent = ({ @@ -45,6 +47,7 @@ const SelectBase: React.FunctionComponent = ({ innerRef, zIndex = 9999, role = 'listbox', + popperProps, ...props }: SelectProps & OUIAProps) => { const localMenuRef = React.useRef(); @@ -125,6 +128,7 @@ const SelectBase: React.FunctionComponent = ({ appendTo={containerRef.current || undefined} isVisible={isOpen} zIndex={zIndex} + {...popperProps} /> ); diff --git a/packages/react-table/src/components/Table/ActionsColumn.tsx b/packages/react-table/src/components/Table/ActionsColumn.tsx index b8a2bdfab04..23418662fe1 100644 --- a/packages/react-table/src/components/Table/ActionsColumn.tsx +++ b/packages/react-table/src/components/Table/ActionsColumn.tsx @@ -38,7 +38,7 @@ const ActionsColumnBase: React.FunctionComponent = ({ popperProps = { position: 'right', direction: 'down', - popperMatchesTriggerWidth: false + minWidth: 'auto' }, ...props }: ActionsColumnProps) => { @@ -65,12 +65,12 @@ const ActionsColumnBase: React.FunctionComponent = ({ return ( {items - .filter(item => item.isOutsideDropdown) + .filter((item) => item.isOutsideDropdown) // eslint-disable-next-line @typescript-eslint/no-unused-vars .map(({ title, itemKey, onClick, isOutsideDropdown, ...props }, key) => typeof title === 'string' ? (