feat(Popper): add width props, remove popperMatchesTriggerWidth

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -31,6 +31,8 @@ export interface DropdownProps extends React.HTMLProps<HTMLDivElement>, OUIAProp
   };
   /** Display menu above or below dropdown toggle */
   direction?: DropdownDirection | 'up' | 'down';
+  /** Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
   /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.
    * Some examples:
@@ -72,14 +74,15 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe,
   alignments,
   contextProps,
+  minWidth,
   menuAppendTo = 'inline',
   isFlipEnabled = true,
   zIndex = 9999,
   ...props
 }: DropdownProps) => (
   <DropdownContext.Provider
     value={{
-      onSelect: event => onSelect && onSelect(event),
+      onSelect: (event) => onSelect && onSelect(event),
       toggleTextClass: styles.dropdownToggleText,
       toggleIconClass: styles.dropdownToggleImage,
       toggleIndicatorClass: styles.dropdownToggleIcon,
@@ -104,6 +107,7 @@ export const Dropdown: React.FunctionComponent<DropdownProps> = ({
       menuAppendTo={menuAppendTo}
       isFlipEnabled={isFlipEnabled}
       zIndex={zIndex}
+      minWidth={minWidth}
       {...props}
     />
   </DropdownContext.Provider>

packages/react-core/src/components/Dropdown/DropdownWithContext.tsx

@@ -75,6 +75,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       position,
       toggle,
       autoFocus,
+      minWidth,
       menuAppendTo,
       isFlipEnabled,
       zIndex,
@@ -180,7 +181,7 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
               zIndex={zIndex}
-              popperMatchesTriggerWidth={false}
+              minWidth={minWidth !== undefined ? minWidth : 'revert'}
             />
           );
         }}

packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx

@@ -115,14 +115,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
         numLabels={5}
         isEditable
         addLabelControl={
-          <Popper
-            trigger={toggle}
-            triggerRef={toggleRef}
-            popper={menu}
-            popperRef={menuRef}
-            isVisible={isOpen}
-            popperMatchesTriggerWidth={false}
-          />
+          <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
         }
       >
         {labels.map((label, index) => (

packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -289,7 +289,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popperRef={colorMenuRef}
                 appendTo={colorContainerRef.current as HTMLElement}
                 isVisible={isColorOpen}
-                popperMatchesTriggerWidth={false}
               />
             </div>
           </FormGroup>
@@ -302,7 +301,6 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
                 popperRef={iconMenuRef}
                 appendTo={iconContainerRef.current as HTMLElement}
                 isVisible={isIconOpen}
-                popperMatchesTriggerWidth={false}
               />
             </div>
           </FormGroup>

packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -1096,7 +1096,7 @@ exports[`Nav Nav List with flyout 1`] = `
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px; transform: translate(0px, 0px);"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);"
     >
       <div>
         Flyout test

packages/react-core/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -16,6 +16,8 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   isDisabled?: boolean;
   /** Menu will open up or open down from the options menu toggle. */
   dropDirection?: 'up' | 'down';
+  /** Minimum width of the pagination options menu. If set to "trigger", the minimum width will be set to the toggle width. */
+  minWidth?: string | 'trigger';
   /** Array of titles and values which will be the options on the options menu dropdown. */
   perPageOptions?: PerPageOptions[];
   /** The title of the pagination options menu. */
@@ -58,6 +60,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   page: pageProp,
   itemCount,
   isDisabled = false,
+  minWidth,
   dropDirection = 'down',
   perPageOptions = [] as PerPageOptions[],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -206,7 +209,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
+        minWidth={minWidth !== undefined ? minWidth : 'revert'}
       />
     </div>
   );

packages/react-core/src/components/Popover/Popover.tsx

@@ -464,7 +464,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         triggerRef={triggerRef}
         popper={content}
         popperRef={popoverRef}
-        popperMatchesTriggerWidth={false}
+        minWidth="revert"
         appendTo={appendTo}
         isVisible={visible}
         positionModifiers={positionModifiers}

packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -246,7 +246,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); width: 0px; z-index: 9999;"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999;"
     >
       <div
         class="pf-c-panel pf-m-raised"

packages/react-core/src/components/Tabs/OverflowTab.tsx

@@ -139,7 +139,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         popper={overflowMenu}
         popperRef={menuRef}
         isVisible={isExpanded}
-        popperMatchesTriggerWidth={false}
+        minWidth="revert"
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
       />

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 }) => (
     <div data-testid="popper-mock">
       <div data-testid="trigger">{trigger}</div>
       <div data-testid="popper">{isVisible && popper}</div>
-      <p>Popper matches trigger width: {`${popperMatchesTriggerWidth}`}</p>
       <p>Append to class name: {appendTo && `${appendTo.className}`}</p>
     </div>
   )
@@ -206,8 +205,8 @@ test('Closes the overflowing tabs menu when a tab is selected', async () => {
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -228,8 +227,8 @@ test('Closes the overflowing tabs menu when the user clicks outside of the menu'
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -250,7 +249,7 @@ test('Calls the onTabClick callback provided via context when a tab is clicked',
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, handleTabClick: mockHandleTabClick }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -303,7 +302,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -323,7 +322,7 @@ test('Uses the selected tab title as the overflow tab title rather than the defa
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
         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(<OverflowTab />);
-
-  // 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
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 0 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -413,7 +405,7 @@ test('Renders an overflowing tab as a selected menu item when its key matches th
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>
@@ -432,8 +424,8 @@ test('Matches snapshot when expanded', async () => {
     <TabsContext.Provider value={{ ...tabsContextDefaultProps, localActiveKey: 1 }}>
       <OverflowTab
         overflowingTabs={[
-          { title: 'Tab one', eventKey: 1, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> },
-          { title: 'Tab two', eventKey: 2, tabContentRef: ('fakeRef' as unknown) as React.RefObject<any> }
+          { title: 'Tab one', eventKey: 1, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> },
+          { title: 'Tab two', eventKey: 2, tabContentRef: 'fakeRef' as unknown as React.RefObject<any> }
         ]}
       />
     </TabsContext.Provider>

packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap

@@ -78,9 +78,6 @@ exports[`Matches snapshot when expanded 1`] = `
         </button>
       </div>
     </div>
-    <p>
-      Popper matches trigger width: false
-    </p>
     <p>
       Append to class name: pf-c-tabs__item pf-m-overflow pf-m-current
     </p>
@@ -166,9 +163,6 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1`
         </button>
       </div>
     </div>
-    <p>
-      Popper matches trigger width: false
-    </p>
     <p>
       Append to class name: pf-c-tabs__item pf-m-overflow
     </p>

packages/react-core/src/components/Tooltip/Tooltip.tsx

@@ -93,6 +93,8 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
         | 'right-start'
         | 'right-end'
       )[];
+  /** Minimum width of the tooltip. If set to "trigger", the minimum width will be set to the reference element width. */
+  minWidth?: string | 'trigger';
   /** Maximum width of the tooltip (default 18.75rem) */
   maxWidth?: string;
   /** Callback when tooltip's hide transition has finished executing */
@@ -151,6 +153,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   exitDelay = 300,
   appendTo = () => document.body,
   zIndex = 9999,
+  minWidth,
   maxWidth = tooltipMaxWidth.value,
   distance = 15,
   aria = 'describedby',
@@ -321,7 +324,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
       triggerRef={triggerRef}
       popper={content}
       popperRef={popperRef}
-      popperMatchesTriggerWidth={false}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
       appendTo={appendTo}
       isVisible={visible}
       positionModifiers={positionModifiers}

packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -69,11 +69,6 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
       // eslint-disable-next-line no-console
       onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
       onSelect={onSelect}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
     >
       <MenuGroup label="Actions">
         <MenuList>
@@ -122,14 +117,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -265,14 +265,5 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -146,17 +146,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   };
 
   const menu = (
-    <Menu
-      ref={menuRef}
-      id="context-selector"
-      onSelect={onSelect}
-      isScrollable
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
-    >
+    <Menu ref={menuRef} id="context-selector" onSelect={onSelect} isScrollable>
       <MenuInput>
         <InputGroup>
           <SearchInput
@@ -198,14 +188,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx

@@ -109,14 +109,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      triggerRef={toggleRef}
-      popper={menu}
-      popperRef={menuRef}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };