@patternfly/react-core 5.0.0-alpha.33 → 5.0.0-alpha.35

package/src/demos/Card/Card.md

@@ -560,36 +560,6 @@ class CardViewBasic extends React.Component {
       swaggerIcon
     };
 
-    const headerActions = (
-      <>
-        <Dropdown
-          isPlain
-          position="right"
-          onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
-          toggle={
-            <KebabToggle
-              onToggle={(_event, isCardKebabDropdownOpen) =>
-                this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
-              }
-            />
-          }
-          isOpen={this.state[key]}
-          dropdownItems={[
-            <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
-              <TrashIcon />
-              Delete
-            </DropdownItem>
-          ]}
-        />
-        <Checkbox
-          checked={isChecked}
-          value={product.id}
-          isChecked={selectedItems.includes(product.id)}
-          aria-label="card checkbox example"
-          id={`check-${product.id}`}
-        />
-      </>
-    );
     return (
       <React.Fragment>
         <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
@@ -631,7 +601,40 @@ class CardViewBasic extends React.Component {
                   onSelectableInputChange={() => this.onClick(product.id)}
                   isSelected={selectedItems.includes(product.id)}
                 >
-                  <CardHeader actions={{ actions: headerActions }}>
+                  <CardHeader
+                    actions={{
+                      actions: (
+                        <>
+                          <Dropdown
+                            isPlain
+                            position="right"
+                            onSelect={(e) => this.onCardKebabDropdownSelect(key, e)}
+                            toggle={
+                              <KebabToggle
+                                onToggle={(_event, isCardKebabDropdownOpen) =>
+                                  this.onCardKebabDropdownToggle(key, isCardKebabDropdownOpen)
+                                }
+                              />
+                            }
+                            isOpen={this.state[key]}
+                            dropdownItems={[
+                              <DropdownItem key="trash" onClick={this.deleteItem(product)} position="right">
+                                <TrashIcon />
+                                Delete
+                              </DropdownItem>
+                            ]}
+                          />
+                          <Checkbox
+                            checked={isChecked}
+                            value={product.id}
+                            isChecked={selectedItems.includes(product.id)}
+                            aria-label="card checkbox example"
+                            id={`check-${product.id}`}
+                          />
+                        </>
+                      )
+                    }}
+                  >
                     <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ maxWidth: '60px' }} />
                   </CardHeader>
                   <CardTitle>{product.name}</CardTitle>

package/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} />;
 };

package/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} />;
 };

package/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} />;
 };

package/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} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -107,11 +107,6 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       onDrillOut={drillOut}
       onGetMenuHeight={setHeight}
       ref={menuRef}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
     >
       <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
         <MenuList>
@@ -247,14 +242,5 @@ export const ComposableDrilldownMenu: 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} />;
 };

package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

@@ -226,14 +226,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <Popper
-        trigger={buildToggle()}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
-      />
+      <Popper trigger={buildToggle()} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
     </React.Fragment>
   );
 };

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -100,14 +100,5 @@ export const ComposableFlyout: 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} />;
 };

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -267,14 +267,5 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  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} />;
 };

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -256,7 +256,6 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -231,7 +231,6 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -239,7 +239,6 @@ export const FilterFaceted: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterMixedSelectGroup.tsx

@@ -236,7 +236,6 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterSameSelectGroup.tsx

@@ -237,7 +237,6 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterSearchInput.tsx

@@ -240,7 +240,6 @@ export const FilterSearchInput: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -226,7 +226,6 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
         popperRef={bulkSelectMenuRef}
         appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
-        popperMatchesTriggerWidth={false}
       />
     </div>
   );

package/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<any>;
-  /** 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<PopperProps> = ({
   trigger,
   popper,
-  popperMatchesTriggerWidth = true,
   direction = 'down',
   position = 'left',
   placement,
+  width,
+  minWidth = 'trigger',
+  maxWidth,
   appendTo = 'inline',
   zIndex = 9999,
   isVisible = true,
@@ -279,21 +285,44 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     () => 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`;
+        const triggerWidth = state.rects.reference.width;
+        if (width) {
+          state.styles.popper.width = width === 'trigger' ? `${triggerWidth}px` : width;
+        }
+
+        if (minWidth) {
+          state.styles.popper.minWidth = minWidth === 'trigger' ? `${triggerWidth}px` : minWidth;
+        }
+
+        if (maxWidth) {
+          state.styles.popper.maxWidth = maxWidth === 'trigger' ? `${triggerWidth}px` : maxWidth;
+        }
       },
       effect: ({ state }) => {
-        state.elements.popper.style.width = `${(state.elements.reference as HTMLElement).offsetWidth}px`;
+        const triggerWidth = (state.elements.reference as HTMLElement).offsetWidth;
+        if (width) {
+          state.elements.popper.style.width = width === 'trigger' ? `${triggerWidth}px` : width;
+        }
+
+        if (minWidth) {
+          state.elements.popper.style.minWidth = minWidth === 'trigger' ? `${triggerWidth}px` : minWidth;
+        }
+
+        if (maxWidth) {
+          state.elements.popper.style.maxWidth = maxWidth === 'trigger' ? `${triggerWidth}px` : maxWidth;
+        }
         return () => {};
       }
     }),
-    [popperMatchesTriggerWidth]
+    [width, minWidth, maxWidth]
   );
 
   const {
@@ -326,7 +355,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
           fallbackPlacements: flipBehavior === 'flip' ? [getOppositePlacementMemo] : flipBehavior
         }
       },
-      sameWidthMod
+      widthMods
     ]
   });
 

package/src/next/components/Dropdown/Dropdown.tsx

@@ -22,8 +22,6 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
   isScrollable?: boolean;
-  /** Min width of the menu. */
-  minWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -33,7 +31,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: PopperProps;
+  popperProps?: Partial<PopperProps>;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -45,7 +43,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChange,
   isPlain,
   isScrollable,
-  minWidth,
   innerRef,
   ouiaId,
   ouiaSafe = true,
@@ -106,11 +103,6 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
       isPlain={isPlain}
       isScrollable={isScrollable}
-      {...(minWidth && {
-        style: {
-          '--pf-c-menu--MinWidth': minWidth
-        } as React.CSSProperties
-      })}
       {...props}
     >
       <MenuContent>{children}</MenuContent>

package/src/next/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -14,7 +14,7 @@ const dropdownChildren = <div>Dropdown children</div>;
 test('renders dropdown', () => {
   render(
     <div data-testid="dropdown">
-      <Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
+      <Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>
     </div>
   );
 
@@ -22,20 +22,20 @@ test('renders dropdown', () => {
 });
 
 test('passes children', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('Dropdown children')).toBeVisible();
 });
 
 test('renders passed toggle element', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByRole('button', { name: 'Dropdown' })).toBeVisible();
 });
 
 test('passes no class name by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -45,7 +45,7 @@ test('passes no class name by default', () => {
 
 test('passes custom class name', () => {
   render(
-    <Dropdown className="custom-class" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown className="custom-class" isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -55,7 +55,7 @@ test('passes custom class name', () => {
 
 test('does not pass isPlain to Menu by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -65,7 +65,7 @@ test('does not pass isPlain to Menu by default', () => {
 
 test('passes isPlain to Menu', () => {
   render(
-    <Dropdown isPlain isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isPlain isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -75,7 +75,7 @@ test('passes isPlain to Menu', () => {
 
 test('does not pass isScrollable to Menu by default', () => {
   render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -85,7 +85,7 @@ test('does not pass isScrollable to Menu by default', () => {
 
 test('passes isScrollable to Menu', () => {
   render(
-    <Dropdown isScrollable isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isScrollable isOpen={true} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -93,35 +93,15 @@ test('passes isScrollable to Menu', () => {
   expect(screen.getByText('isScrollable: true')).toBeVisible();
 });
 
-test('does not pass minWidth to Menu by default', () => {
-  render(
-    <Dropdown isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('minWidth: undefined')).toBeVisible();
-});
-
-test('passes minWidth to Menu', () => {
-  render(
-    <Dropdown minWidth="100px" isOpen={true} toggle={toggleRef => toggle(toggleRef)}>
-      {dropdownChildren}
-    </Dropdown>
-  );
-
-  expect(screen.getByText('minWidth: 100px')).toBeVisible();
-});
-
 test('passes default zIndex to popper', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('zIndex: 9999')).toBeVisible();
 });
 
 test('passes zIndex to popper', () => {
   render(
-    <Dropdown zIndex={100} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown zIndex={100} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -130,14 +110,14 @@ test('passes zIndex to popper', () => {
 });
 
 test('does not pass isOpen to popper by default', () => {
-  render(<Dropdown toggle={toggleRef => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
+  render(<Dropdown toggle={(toggleRef) => toggle(toggleRef)}>{dropdownChildren}</Dropdown>);
 
   expect(screen.getByText('isOpen: undefined')).toBeVisible();
 });
 
 test('passes isOpen to popper', () => {
   render(
-    <Dropdown isOpen toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -154,7 +134,7 @@ test('passes onSelect callback', async () => {
 
   const onSelect = jest.fn();
   render(
-    <Dropdown onSelect={onSelect} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown onSelect={onSelect} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -170,7 +150,7 @@ test('onOpenChange is called when passed and user clicks outside of dropdown', a
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -187,7 +167,7 @@ test('onOpenChange is called when passed and user presses tab key', async () =>
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -205,7 +185,7 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
   const onOpenChange = jest.fn();
 
   render(
-    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={toggleRef => toggle(toggleRef)}>
+    <Dropdown isOpen={true} onOpenChange={onOpenChange} toggle={(toggleRef) => toggle(toggleRef)}>
       {dropdownChildren}
     </Dropdown>
   );
@@ -226,7 +206,7 @@ test('match snapshot', () => {
       isScrollable
       isPlain
       className={'customClass'}
-      toggle={toggleRef => toggle(toggleRef)}
+      toggle={(toggleRef) => toggle(toggleRef)}
     >
       {dropdownChildren}
     </Dropdown>

package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -19,9 +19,8 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      minWidth="150px"
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -36,7 +35,7 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
           key="action"
           description="This is a very long description that describes the menu item"
           to="#default-link2"
-          onClick={ev => ev.preventDefault()}
+          onClick={(ev) => ev.preventDefault()}
         >
           Action
         </DropdownItem>

package/src/next/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -20,9 +20,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      minWidth="150px"
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle
           ref={toggleRef}
           aria-label="kebab dropdown toggle"
@@ -38,7 +37,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
         <DropdownItem itemId={0} key="link">
           Link
         </DropdownItem>
-        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
           Action
         </DropdownItem>
         <DropdownItem itemId={2} isDisabled key="disabled link">