@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.31

package/src/components/DataList/DataList.tsx

@@ -31,6 +31,8 @@ export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   selectedDataListItemId?: string;
   /** Flag indicating if DataList should have compact styling */
   isCompact?: boolean;
+  /** @beta Flag indicating if DataList should have plain styling with a transparent background */
+  isPlain?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakpoint?: 'none' | 'always' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Determines which wrapping modifier to apply to the DataList */
@@ -59,6 +61,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
   onSelectDataListItem,
   selectedDataListItemId = '',
   isCompact = false,
+  isPlain = false,
   gridBreakpoint = 'md',
   wrapModifier = null,
   onSelectableRowChange,
@@ -84,6 +87,7 @@ export const DataListBase: React.FunctionComponent<DataListProps> = ({
         className={css(
           styles.dataList,
           isCompact && styles.modifiers.compact,
+          isPlain && styles.modifiers.plain,
           gridBreakpointClasses[gridBreakpoint],
           wrapModifier && styles.modifiers[wrapModifier],
           className

package/src/components/DataList/__tests__/DataList.test.tsx

@@ -71,6 +71,12 @@ test('Renders custom class when passed', () => {
   expect(screen.getByLabelText('list')).toHaveClass('data-list-custom');
 });
 
+test(`Renders with class ${styles.modifiers.plain} when isPlain is true`, () => {
+  render(<DataList key="list-id-1" isPlain aria-label="list" />);
+
+  expect(screen.getByLabelText('list')).toHaveClass(styles.modifiers.plain);
+});
+
 test('Renders with a hidden input to improve a11y when onSelectableRowChange is passed', () => {
   render(
     <DataList aria-label="this is a simple list" onSelectableRowChange={() => {}}>

package/src/components/DataList/examples/DataList.md

@@ -40,6 +40,12 @@ import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@pat
 
 ```
 
+### Plain
+
+```ts file="./DataListPlain.tsx"
+
+```
+
 ### Checkboxes, actions and additional cells
 
 ```ts file="./DataListCheckboxes.tsx"

package/src/components/DataList/examples/DataListPlain.tsx

@@ -0,0 +1,32 @@
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListPlain: React.FunctionComponent = () => (
+  <DataList aria-label="Plain data list example" isPlain>
+    <DataListItem aria-labelledby="plain-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="plain-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="plain-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="plain-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DatePicker/DatePicker.tsx

@@ -24,7 +24,8 @@ export interface DatePickerRequiredObject {
 /** The main date picker component. */
 
 export interface DatePickerProps
-  extends CalendarFormat,
+  extends
+    CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** 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.

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -35,6 +35,8 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   hasNoBorder?: boolean;
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
+  /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
+  hasNoGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -68,6 +70,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   children,
   hasNoBorder = false,
   isResizable = false,
+  hasNoGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -87,6 +90,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
+  const [shouldCollapseSpace, setShouldCollapseSpace] = useState(hidden);
   const previouslyFocusedElement = useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
@@ -105,6 +109,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
+      setShouldCollapseSpace(false);
     }
   }, [isStatic, isExpanded]);
 
@@ -364,6 +369,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
             className={css(
               styles.drawerPanel,
               isResizable && styles.modifiers.resizable,
+              hasNoGlass && styles.modifiers.noGlass,
               hasNoBorder && styles.modifiers.noBorder,
               formatBreakpointMods(widths, styles),
               colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
@@ -376,6 +382,10 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
                   onExpand(ev);
                 }
                 setIsExpandedInternal(!hidden);
+                // We also need to collapse the space when the panel is hidden to prevent automation from scrolling to it
+                if (hidden && ev.nativeEvent.propertyName === 'transform') {
+                  setShouldCollapseSpace(true);
+                }
                 if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
                   setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
                 }
@@ -386,6 +396,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               ...((defaultSize || minSize || maxSize) && boundaryCssVars),
               ...style
             }}
+            {...(shouldCollapseSpace && { inert: '' })}
             {...props}
             ref={panel}
           >

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -122,6 +122,26 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
 
+test('Does not render with inert when drawer is expanded', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).not.toHaveAttribute('inert');
+});
+
+test('Renders with inert when drawer is collapsed', () => {
+  render(
+    <Drawer>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).toHaveAttribute('inert');
+});
+
 test('Applies style prop as expected', () => {
   render(
     <Drawer isExpanded>
@@ -158,3 +178,13 @@ test('Style prop overrides boundaryCssVars', () => {
     '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
   });
 });
+
+test(`Renders with class ${styles.modifiers.noGlass} when hasNoGlass is true`, () => {
+  render(
+    <Drawer isExpanded isPill>
+      <DrawerPanelContent hasNoGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass(styles.modifiers.noGlass);
+});

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
     class="pf-v6-c-drawer__panel ''"
     hidden=""
     id="generated-id"
+    inert=""
   />
 </DocumentFragment>
 `;

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -281,6 +281,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        inert=""
       />
     </div>
   </div>
@@ -308,6 +309,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        inert=""
       />
     </div>
   </div>

package/src/components/Drawer/examples/Drawer.md

@@ -135,7 +135,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 ### With focus trap
 
-When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
+When a [focus trap](/accessibility/develop#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
 
 To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
 

package/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx

@@ -13,7 +13,7 @@ import {
 
 export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasic.tsx

@@ -14,7 +14,7 @@ import {
 
 export const DrawerBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicPill.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBreakpoint.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBreakpoint: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPillInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Dropdown/Dropdown.tsx

@@ -48,6 +48,12 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** When applied, wraps dropdown in a container with a data-ouia-component-id.*/
+  containerOuiaId?: number | string;
+  /** Set the value of data-ouia-safe for the container when containerOuiaId is applied. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  containerOuiaSafe?: boolean;
+  /** Sets the base component to render for the container. Defaults to <span> */
+  containerComponent?: React.ReactNode;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -86,11 +92,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   shouldFocusFirstItemOnOpen = false,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  containerOuiaId,
+  containerOuiaSafe = true,
+  containerComponent = 'span',
   ...props
 }: DropdownProps) => {
   const localMenuRef = useRef<HTMLDivElement>(undefined);
   const localToggleRef = useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+  const ContainerComponent = containerComponent as any;
+  const containerOuiaProps = useOUIAProps('Dropdown container', containerOuiaId, containerOuiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
@@ -185,7 +196,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       </MenuContent>
     </Menu>
   );
-  return (
+
+  const popper = (
     <Popper
       trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
@@ -196,6 +208,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       {...popperProps}
     />
   );
+
+  return containerOuiaId ? <ContainerComponent {...containerOuiaProps}>{popper}</ContainerComponent> : popper;
 };
 
 export const Dropdown = forwardRef((props: DropdownProps, ref: React.Ref<any>) => (

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

@@ -201,6 +201,32 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
   expect(onOpenChange).toBeCalledTimes(1);
 });
 
+test('applies containerOuiaId to parent element', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-id', 'test-dropdown');
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-type', 'PF6/Dropdown container');
+  expect(dropdownParent?.tagName).toBe('SPAN');
+});
+
+test('Renders with custom container element when containerComponent is passed', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" containerComponent="div" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent?.tagName).toBe('DIV');
+});
+
 test('match snapshot', () => {
   const { asFragment } = render(
     <Dropdown

package/src/components/Dropdown/examples/Dropdown.md

@@ -16,7 +16,7 @@ propComponents:
   ]
 ---
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
@@ -63,3 +63,15 @@ To provide users with more context about a `<DropdownItem>`, pass a short messag
 ```ts file="./DropdownWithDescriptions.tsx"
 
 ```
+
+### Split toggle with checkbox
+
+To combine a checkbox or other control with a dropdown menu, use a split button.
+
+A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.
+
+If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu. 
+
+```ts file="./DropdownWithSplit.tsx"
+
+```

package/src/components/Dropdown/examples/DropdownWithSplit.tsx

@@ -0,0 +1,97 @@
+import {
+  Dropdown,
+  MenuToggle,
+  MenuToggleCheckbox,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import { useRef, useState } from 'react';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleRef = useRef<MenuToggleElement>(null);
+
+  const onFocus = () => {
+    if (!toggleRef.current) {
+      return;
+    }
+
+    const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');
+    toggleButton?.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRefCallback: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={(node) => {
+            // Handle both callback ref and useRef
+            if (typeof toggleRefCallback === 'function') {
+              toggleRefCallback(node);
+            } else if (toggleRefCallback) {
+              (toggleRefCallback as React.MutableRefObject<MenuToggleElement | null>).current = node;
+            }
+            (toggleRef as React.MutableRefObject<MenuToggleElement | null>).current = node;
+          }}
+          splitButtonItems={[
+            <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+          ]}
+          aria-label="Dropdown with checkbox split button"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        />
+      )}
+      isOpen={isOpen}
+    >
+      <DropdownList>
+        <DropdownItem value={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          value={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem value={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <DropdownItem
+          value={4}
+          isAriaDisabled
+          key="aria-disabled link"
+          to="#default-link5"
+          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+        >
+          Aria-disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem value={5} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};