@patternfly/react-core 5.3.0-prerelease.3 → 5.3.0-prerelease.5

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.3.0-prerelease.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.0-prerelease.3",
+  "version": "5.3.0-prerelease.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "30a6d2d779a838ab2766be7e89b78202efd0c456"
+  "gitHead": "59cae77313f2e11417f0ef599ccc4581a834be27"
 }

package/src/components/SearchInput/SearchInput.tsx

@@ -75,6 +75,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Id for the search input */
+  searchInputId?: string;
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -126,6 +128,7 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   className,
+  searchInputId,
   value = '',
   attributes = [] as string[],
   formAdditionalItems,
@@ -298,6 +301,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
         name={name}
+        inputId={searchInputId}
       />
       {(renderUtilities || areUtilitiesDisplayed) && (
         <TextInputGroupUtilities>

package/src/components/Select/Select.tsx

@@ -70,6 +70,12 @@ export interface SelectProps extends MenuProps, OUIAProps {
   role?: string;
   /** Additional properties to pass to the popper */
   popperProps?: SelectPopperProps;
+  /** Height of the select menu */
+  menuHeight?: string;
+  /** Maximum height of select menu */
+  maxMenuHeight?: string;
+  /** Indicates if the select menu should be scrollable */
+  isScrollable?: boolean;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -87,6 +93,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   zIndex = 9999,
   role = 'listbox',
   popperProps,
+  menuHeight,
+  maxMenuHeight,
+  isScrollable,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -151,6 +160,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       }}
       isPlain={isPlain}
       selected={selected}
+      isScrollable={isScrollable}
       {...getOUIAProps(
         Select.displayName,
         props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName),
@@ -158,7 +168,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       )}
       {...props}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -53,6 +53,8 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   isExpanded?: boolean;
   /** @beta The id of the element(s) controlled by the input. Required if role has a value of "combobox". */
   'aria-controls'?: string;
+  /** The id of the input element */
+  inputId?: string;
 }
 
 const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
@@ -73,6 +75,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   role,
   isExpanded,
   'aria-controls': ariaControls,
+  inputId,
   ...props
 }: TextInputGroupMainProps) => {
   const { isDisabled } = React.useContext(TextInputGroupContext);
@@ -94,6 +97,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             disabled
             aria-hidden="true"
             value={hint}
+            id={inputId}
           />
         )}
         {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
@@ -110,6 +114,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           placeholder={inputPlaceHolder}
           name={name}
           aria-activedescendant={ariaActivedescendant}
+          id={inputId}
           {...(role && { role })}
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -109,6 +109,14 @@ describe('TextInputGroupMain', () => {
     expect(inputValue).toBeVisible();
   });
 
+  it('passes the inputId prop to the input', () => {
+    render(<TextInputGroupMain inputId="input-id">Test</TextInputGroupMain>);
+
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAttribute('id', 'input-id');
+  });
+
   it('passes the placeholder prop to the input', () => {
     render(<TextInputGroupMain placeholder="placeholder text">Test</TextInputGroupMain>);
 

package/src/helpers/Popper/Popper.tsx

@@ -449,7 +449,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   React.useEffect(() => {
     // currentPopperContent = {tooltip children} || {dropdown children}
     const currentPopperContent =
-      popper?.props?.children[1]?.props?.children || popper?.props?.children?.props?.children;
+      popper?.props?.children?.[1]?.props?.children || popper?.props?.children?.props?.children;
     setPopperContent(currentPopperContent);
 
     if (currentPopperContent && popperContent && currentPopperContent !== popperContent) {

package/src/next/components/DualListSelector/DualListSelector.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { GenerateId, PickOptional } from '../../../helpers';
+import { DualListSelectorContext } from './DualListSelectorContext';
+
+/** Acts as a container for all other DualListSelector sub-components when using a
+ * composable dual list selector.
+ */
+
+export interface DualListSelectorProps {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** ID of the dual list selector. */
+  id?: string;
+  /** Flag indicating if the dual list selector uses trees instead of simple lists. */
+  isTree?: boolean;
+  /** Content to be rendered in the dual list selector. */
+  children?: React.ReactNode;
+}
+
+class DualListSelector extends React.Component<DualListSelectorProps> {
+  static displayName = 'DualListSelector';
+  static defaultProps: PickOptional<DualListSelectorProps> = {
+    children: '',
+    isTree: false
+  };
+
+  constructor(props: DualListSelectorProps) {
+    super(props);
+  }
+
+  render() {
+    const { className, children, id, isTree, ...props } = this.props;
+
+    return (
+      <DualListSelectorContext.Provider value={{ isTree }}>
+        <GenerateId>
+          {(randomId) => (
+            <div className={css(styles.dualListSelector, className)} id={id || randomId} {...props}>
+              {children}
+            </div>
+          )}
+        </GenerateId>
+      </DualListSelectorContext.Provider>
+    );
+  }
+}
+
+export { DualListSelector };

package/src/next/components/DualListSelector/DualListSelectorContext.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export const DualListSelectorContext = React.createContext<{
+  isTree?: boolean;
+}>({ isTree: false });
+
+export const DualListSelectorListContext = React.createContext<{
+  setFocusedOption?: (id: string) => void;
+  isTree?: boolean;
+  ariaLabelledBy?: string;
+  focusedOption?: string;
+  displayOption?: (option: React.ReactNode) => boolean;
+  selectedOptions?: string[] | number[];
+  id?: string;
+  options?: React.ReactNode[];
+  isDisabled?: boolean;
+}>({});
+
+export const DualListSelectorPaneContext = React.createContext<{
+  isChosen: boolean;
+}>({ isChosen: false });

package/src/next/components/DualListSelector/DualListSelectorControl.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { Tooltip } from '../../../components/Tooltip';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+
+/** Renders an individual control button for moving selected options between each
+ * dual list selector pane.
+ */
+
+export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  /** Content to be rendered in the dual list selector control. */
+  children?: React.ReactNode;
+  /** @hide forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Flag indicating the control is disabled. */
+  isDisabled?: boolean;
+  /** Additional classes applied to the dual list selector control. */
+  className?: string;
+  /** Callback fired when dual list selector control is selected. */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /** Accessible label for the dual list selector control. */
+  'aria-label'?: string;
+  /** Content to be displayed in a tooltip on hover of control. */
+  tooltipContent?: React.ReactNode;
+  /** Additional tooltip properties passed to the tooltip. */
+  tooltipProps?: any;
+}
+
+export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
+  innerRef,
+  children,
+  className,
+  'aria-label': ariaLabel,
+  isDisabled = true,
+  onClick = () => {},
+  tooltipContent,
+  tooltipProps = {} as any,
+  ...props
+}: DualListSelectorControlProps) => {
+  const privateRef = React.useRef(null);
+  const ref = innerRef || privateRef;
+  return (
+    <div className={css(styles.dualListSelectorControlsItem, className)} {...props}>
+      <Button
+        isDisabled={isDisabled}
+        aria-disabled={isDisabled}
+        variant={ButtonVariant.plain}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        tabIndex={-1}
+        ref={ref}
+      >
+        {children}
+      </Button>
+      {tooltipContent && <Tooltip content={tooltipContent} position="left" triggerRef={ref} {...tooltipProps} />}
+    </div>
+  );
+};
+DualListSelectorControlBase.displayName = 'DualListSelectorControlBase';
+
+export const DualListSelectorControl = React.forwardRef((props: DualListSelectorControlProps, ref: React.Ref<any>) => (
+  <DualListSelectorControlBase innerRef={ref} {...props} />
+));
+
+DualListSelectorControl.displayName = 'DualListSelectorControl';

package/src/next/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { handleArrows } from '../../../helpers';
+
+/** Acts as the container for the DualListSelectorControl sub-components. */
+
+export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content to be rendered inside of the controls wrapper. */
+  children?: React.ReactNode;
+  /** Additional classes added to the wrapper. */
+  className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.RefObject<HTMLDivElement>;
+  /** Accessible label for the dual list selector controls wrapper. */
+  'aria-label'?: string;
+}
+
+export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualListSelectorControlsWrapperProps> = ({
+  innerRef,
+  children = null,
+  className,
+  'aria-label': ariaLabel = 'Controls for moving options between lists',
+  ...props
+}: DualListSelectorControlsWrapperProps) => {
+  const ref = React.useRef(null);
+  const wrapperRef = innerRef || ref;
+  // Adds keyboard navigation to the dynamically built dual list selector controls. Works when controls are dynamically built
+  // as well as when they are passed in via children.
+  const handleKeys = (event: KeyboardEvent) => {
+    if (
+      !wrapperRef.current ||
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
+        ))
+    ) {
+      return;
+    }
+    event.stopImmediatePropagation();
+
+    const controls = (Array.from(wrapperRef.current.getElementsByTagName('BUTTON')) as Element[]).filter(
+      (el) => !el.classList.contains('pf-m-disabled')
+    );
+    const activeElement = document.activeElement;
+    handleArrows(
+      event,
+      controls,
+      (element: Element) => activeElement.contains(element),
+      (element: Element) => element,
+      undefined,
+      undefined,
+      true,
+      false
+    );
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeys);
+    return () => {
+      window.removeEventListener('keydown', handleKeys);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef.current]);
+
+  return (
+    <div
+      className={css(styles.dualListSelectorControls, className)}
+      tabIndex={0}
+      ref={wrapperRef}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapperBase';
+
+export const DualListSelectorControlsWrapper = React.forwardRef(
+  (props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+    <DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} role="group" {...props} />
+  )
+);
+
+DualListSelectorControlsWrapper.displayName = 'DualListSelectorControlsWrapper';

package/src/next/components/DualListSelector/DualListSelectorList.tsx

@@ -0,0 +1,57 @@
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorListItem } from './DualListSelectorListItem';
+import * as React from 'react';
+import { DualListSelectorListContext } from './DualListSelectorContext';
+
+/** Acts as the container for DualListSelectorListItem sub-components. */
+
+export interface DualListSelectorListProps extends React.HTMLProps<HTMLUListElement> {
+  /** Content rendered inside the dual list selector list. */
+  children?: React.ReactNode;
+}
+
+export const DualListSelectorList: React.FunctionComponent<DualListSelectorListProps> = ({
+  children,
+  ...props
+}: DualListSelectorListProps) => {
+  const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } =
+    React.useContext(DualListSelectorListContext);
+
+  const hasOptions = () =>
+    options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0);
+
+  return (
+    <ul
+      className={css(styles.dualListSelectorList)}
+      {...(hasOptions() && {
+        role: isTree ? 'tree' : 'listbox',
+        'aria-multiselectable': true,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-activedescendant': focusedOption
+      })}
+      aria-disabled={isDisabled ? 'true' : undefined}
+      {...props}
+    >
+      {options.length === 0
+        ? children
+        : options.map((option, index) => {
+            if (displayOption(option)) {
+              return (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
+                  id={`${id}-option-${index}`}
+                  orderIndex={index}
+                  isDisabled={isDisabled}
+                >
+                  {option}
+                </DualListSelectorListItem>
+              );
+            }
+            return;
+          })}
+    </ul>
+  );
+};
+DualListSelectorList.displayName = 'DualListSelectorList';

package/src/next/components/DualListSelector/DualListSelectorListItem.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { getUniqueId } from '../../../helpers';
+import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
+import { Button, ButtonVariant } from '../../../components/Button';
+import { DualListSelectorListContext } from './DualListSelectorContext';
+
+/** Creates an individual option that can be selected and moved between the
+ * dual list selector panes. This is contained within the DualListSelectorList sub-component.
+ */
+
+export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIElement> {
+  /** Content rendered inside the dual list selector. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Flag indicating the list item is currently selected. */
+  isSelected?: boolean;
+  /** Callback fired when an option is selected. */
+  onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
+  /** ID of the option. */
+  id?: string;
+  /** @hide Internal field used to keep track of order of unfiltered options. */
+  orderIndex?: number;
+  /** @hide Forwarded ref */
+  innerRef?: React.RefObject<HTMLLIElement>;
+  /** Flag indicating this item is draggable for reordering. */
+  isDraggable?: boolean;
+  /** Accessible label for the draggable button on draggable list items. */
+  draggableButtonAriaLabel?: string;
+  /** Flag indicating if the dual list selector is in a disabled state. */
+  isDisabled?: boolean;
+}
+
+export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelectorListItemProps> = ({
+  onOptionSelect,
+  orderIndex,
+  children,
+  className,
+  id = getUniqueId('dual-list-selector-list-item'),
+  isSelected,
+  innerRef,
+  isDraggable = false,
+  isDisabled,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  draggableButtonAriaLabel = 'Reorder option',
+  ...props
+}: DualListSelectorListItemProps) => {
+  const privateRef = React.useRef<HTMLLIElement>(null);
+  const ref = innerRef || privateRef;
+  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+
+  return (
+    <li
+      className={css(styles.dualListSelectorListItem, className, isDisabled && styles.modifiers.disabled)}
+      key={orderIndex}
+      onClick={
+        isDisabled
+          ? undefined
+          : (e: React.MouseEvent) => {
+              setFocusedOption(id);
+              onOptionSelect(e, id);
+            }
+      }
+      onKeyDown={(e: React.KeyboardEvent) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          (document.activeElement as HTMLElement).click();
+          e.preventDefault();
+        }
+      }}
+      aria-selected={isSelected}
+      id={id}
+      ref={ref}
+      role="option"
+      tabIndex={-1}
+      {...props}
+    >
+      <div className={css(styles.dualListSelectorListItemRow, isSelected && styles.modifiers.selected)}>
+        {isDraggable && !isDisabled && (
+          <div className={css(styles.dualListSelectorDraggable)}>
+            {/** TODO once keyboard accessibility is enabled, remove `component=span`
+             and add `aria-label={draggableButtonAriaLabel}` */}
+            <Button variant={ButtonVariant.plain} component="span">
+              <GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />
+            </Button>
+          </div>
+        )}
+        <span className={css(styles.dualListSelectorItem)}>
+          <span className={css(styles.dualListSelectorItemMain)}>
+            <span className={css(styles.dualListSelectorItemText)}>{children}</span>
+          </span>
+        </span>
+      </div>
+    </li>
+  );
+};
+DualListSelectorListItemBase.displayName = 'DualListSelectorListItemBase';
+
+export const DualListSelectorListItem = React.forwardRef(
+  (props: DualListSelectorListItemProps, ref: React.Ref<HTMLLIElement>) => (
+    <DualListSelectorListItemBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+DualListSelectorListItem.displayName = 'DualListSelectorListItem';

package/src/next/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { getUniqueId, handleArrows } from '../../../helpers';
+import { DualListSelectorList } from './DualListSelectorList';
+import { DualListSelectorContext, DualListSelectorListContext } from './DualListSelectorContext';
+
+export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDivElement> {
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Anything that can be rendered inside of the list. */
+  children?: React.ReactNode;
+  /** ID of the dual list selector list. */
+  id?: string;
+  /** Accessibly label for the list. */
+  'aria-labelledby': string;
+  /** @hide forwarded ref */
+  innerRef?: React.RefObject<HTMLDivElement>;
+  /** @hide Options to list in the pane. */
+  options?: React.ReactNode[];
+  /** @hide Options currently selected in the pane. */
+  selectedOptions?: string[] | number[];
+  /** @hide Function to determine if an option should be displayed depending on a custom filter value. */
+  displayOption?: (option: React.ReactNode) => boolean;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+}
+
+export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSelectorListWrapperProps> = ({
+  className,
+  children,
+  'aria-labelledby': ariaLabelledBy,
+  innerRef,
+  options = [],
+  selectedOptions = [],
+  displayOption,
+  id = getUniqueId('dual-list-selector-list'),
+  isDisabled = false,
+  ...props
+}: DualListSelectorListWrapperProps) => {
+  const [focusedOption, setFocusedOption] = React.useState('');
+  const ref = React.useRef(null);
+  const menuRef = innerRef || ref;
+  const { isTree } = React.useContext(DualListSelectorContext);
+
+  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
+  const handleKeys = (event: KeyboardEvent) => {
+    if (
+      !menuRef.current ||
+      (menuRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`) &&
+        !Array.from(menuRef.current.getElementsByClassName(styles.dualListSelectorMenu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`)
+        ))
+    ) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    const validOptions = isTree
+      ? (Array.from(
+          menuRef.current.querySelectorAll(
+            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
+          )
+        ) as Element[])
+      : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
+          (el) => !el.classList.contains('pf-m-disabled')
+        );
+    const activeElement = document.activeElement;
+    handleArrows(
+      event,
+      validOptions,
+      (element: Element) => activeElement.contains(element),
+      (element: Element) => {
+        if (element.classList.contains(`.${styles.dualListSelectorListItem}`)) {
+          setFocusedOption(element.id);
+        } else {
+          setFocusedOption(element.closest(`.${styles.dualListSelectorListItem}`).id);
+        }
+        return element;
+      },
+      [`.${styles.dualListSelectorItemToggle}`, `.${styles.dualListSelectorItemCheck} > input`],
+      undefined,
+      false,
+      false,
+      false
+    );
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleKeys);
+    return () => {
+      window.removeEventListener('keydown', handleKeys);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuRef.current]);
+
+  return (
+    <div className={css(styles.dualListSelectorMenu, className)} ref={menuRef} tabIndex={0} {...props}>
+      <DualListSelectorListContext.Provider
+        value={{
+          setFocusedOption,
+          isTree,
+          focusedOption,
+          ariaLabelledBy,
+          displayOption,
+          selectedOptions,
+          id,
+          options,
+          isDisabled
+        }}
+      >
+        {children ? children : <DualListSelectorList />}
+      </DualListSelectorListContext.Provider>
+    </div>
+  );
+};
+DualListSelectorListWrapperBase.displayName = 'DualListSelectorListWrapperBase';
+
+export const DualListSelectorListWrapper = React.forwardRef(
+  (props: DualListSelectorListWrapperProps, ref: React.Ref<HTMLDivElement>) => (
+    <DualListSelectorListWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+
+DualListSelectorListWrapper.displayName = 'DualListSelectorListWrapper';