@patternfly/react-core 6.0.0-alpha.4 → 6.0.0-alpha.41

package/src/layouts/Stack/__tests__/__snapshots__/Stack.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`gutter 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-l-stack pf-m-gutter"
+    class="pf-v6-l-stack pf-m-gutter"
   >
     <div
-      class="pf-v5-l-stack__item"
+      class="pf-v6-l-stack__item"
     >
       Basic content
     </div>
@@ -17,10 +17,10 @@ exports[`gutter 1`] = `
 exports[`isMain defaults to false 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-l-stack"
+    class="pf-v6-l-stack"
   >
     <div
-      class="pf-v5-l-stack__item"
+      class="pf-v6-l-stack__item"
     >
       Basic content
     </div>
@@ -31,10 +31,10 @@ exports[`isMain defaults to false 1`] = `
 exports[`isMain set to true 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-l-stack"
+    class="pf-v6-l-stack"
   >
     <div
-      class="pf-v5-l-stack__item pf-m-fill"
+      class="pf-v6-l-stack__item pf-m-fill"
     >
       Filled content
     </div>

package/src/layouts/Stack/examples/stack.css

@@ -4,12 +4,12 @@
   flex-direction: column;
 }
 
-.ws-react-l-stack > .pf-v5-l-stack {
+.ws-react-l-stack > .pf-v6-l-stack {
   flex-grow: 1;
 }
 
-.ws-react-l-stack .pf-v5-l-stack,
-.ws-react-l-stack .pf-v5-l-stack > .pf-v5-l-stack__item {
+.ws-react-l-stack .pf-v6-l-stack,
+.ws-react-l-stack .pf-v6-l-stack > .pf-v6-l-stack__item {
   padding: 1rem;
   border-width: 2px;
   border-style: dashed;

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';

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

@@ -0,0 +1,94 @@
+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 { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
+import { DualListSelectorPaneContext } from './DualListSelectorContext';
+import { SearchInput } from '../../../components/SearchInput';
+import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
+
+/** Acts as the container for a list of options that are either available or chosen,
+ * depending on the pane type (available or chosen). A search input and other actions,
+ * such as sorting, can also be passed into this sub-component.
+ */
+
+export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
+  /** Additional classes applied to the dual list selector pane. */
+  className?: string;
+  /** A dual list selector list or dual list selector tree to be rendered in the pane. */
+  children?: React.ReactNode;
+  /** Flag indicating if this pane is the chosen pane. */
+  isChosen?: boolean;
+  /** Status to display above the pane. */
+  status?: string;
+  /** Title of the pane. */
+  title?: React.ReactNode;
+  /** A search input placed above the list at the top of the pane, before actions. */
+  searchInput?: React.ReactNode;
+  /** Actions to place above the pane. */
+  actions?: React.ReactNode[];
+  /** ID of the pane. */
+  id?: string;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+  /** Callback for search input. To be used when isSearchable is true. */
+  onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Minimum height of the list of options rendered in the pane. **/
+  listMinHeight?: string;
+}
+
+export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneProps> = ({
+  isChosen = false,
+  className = '',
+  status = '',
+  actions,
+  searchInput,
+  children,
+  title = '',
+  id = getUniqueId('dual-list-selector-pane'),
+  isDisabled = false,
+  listMinHeight,
+  ...props
+}: DualListSelectorPaneProps) => (
+  <div
+    className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+    {...props}
+  >
+    {title && (
+      <div className={css(styles.dualListSelectorHeader)}>
+        <div className={`${styles.dualListSelector}__title`}>
+          <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+        </div>
+      </div>
+    )}
+    {(actions || searchInput) && (
+      <div className={css(styles.dualListSelectorTools)}>
+        {searchInput && (
+          <div className={css(styles.dualListSelectorToolsFilter)}>
+            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+          </div>
+        )}
+        {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+      </div>
+    )}
+    {status && (
+      <div className={css(styles.dualListSelectorStatus)}>
+        <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+          {status}
+        </div>
+      </div>
+    )}
+    <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+      <DualListSelectorListWrapper
+        aria-labelledby={`${id}-status`}
+        id={`${id}-list`}
+        {...(listMinHeight && {
+          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+        })}
+      >
+        {children}
+      </DualListSelectorListWrapper>
+    </DualListSelectorPaneContext.Provider>
+  </div>
+);
+DualListSelectorPane.displayName = 'DualListSelectorPane';