@patternfly/react-core 5.3.0-prerelease.2 → 5.3.0-prerelease.20

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

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { DualListSelectorTreeItem } from './DualListSelectorTreeItem';
+
+export interface DualListSelectorTreeItemData {
+  /** Content rendered inside the dual list selector. */
+  children?: DualListSelectorTreeItemData[];
+  /** Additional classes applied to the dual list selector. */
+  className?: string;
+  /** Flag indicating this option is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Flag indicating this option has a badge. */
+  hasBadge?: boolean;
+  /** Callback fired when an option is checked. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    isChosen: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+  /** ID of the option. */
+  id: string;
+  /** Text of the option. */
+  text: string;
+  /** Parent ID of an option. */
+  parentId?: string;
+  /** Checked state of the option. */
+  isChecked: boolean;
+  /** Additional properties to pass to the option checkbox. */
+  checkProps?: any;
+  /** Additional properties to pass to the option badge. */
+  badgeProps?: any;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+}
+
+/** Used in place of the DualListSelectorListItem sub-component when building a
+ * composable dual list selector with a tree.
+ */
+
+export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
+  /** Data of the tree view. */
+  data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
+  /** ID of the tree view. */
+  id?: string;
+  /** @hide Flag indicating if the list is nested. */
+  isNested?: boolean;
+  /** Flag indicating if all options should have badges. */
+  hasBadges?: boolean;
+  /** Sets the default expanded behavior. */
+  defaultAllExpanded?: boolean;
+  /** Flag indicating if the dual list selector tree is in the disabled state. */
+  isDisabled?: boolean;
+  /** Callback fired when an option is checked. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+}
+
+export const DualListSelectorTree: React.FunctionComponent<DualListSelectorTreeProps> = ({
+  data,
+  hasBadges = false,
+  isNested = false,
+  defaultAllExpanded = false,
+  onOptionCheck,
+  isDisabled = false,
+  ...props
+}: DualListSelectorTreeProps) => {
+  const dataToRender = typeof data === 'function' ? data() : data;
+  const tree = dataToRender.map((item) => (
+    <DualListSelectorTreeItem
+      key={item.id}
+      text={item.text}
+      id={item.id}
+      defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
+      onOptionCheck={onOptionCheck}
+      isChecked={item.isChecked}
+      checkProps={item.checkProps}
+      hasBadge={item.hasBadge !== undefined ? item.hasBadge : hasBadges}
+      badgeProps={item.badgeProps}
+      itemData={item}
+      isDisabled={isDisabled}
+      useMemo={true}
+      {...(item.children && {
+        children: (
+          <DualListSelectorTree
+            isNested
+            data={item.children}
+            hasBadges={hasBadges}
+            defaultAllExpanded={defaultAllExpanded}
+            onOptionCheck={onOptionCheck}
+            isDisabled={isDisabled}
+          />
+        )
+      })}
+    />
+  ));
+  return isNested ? (
+    <ul className={css(styles.dualListSelectorList)} role="group" {...props}>
+      {tree}
+    </ul>
+  ) : (
+    <>{tree}</>
+  );
+};
+
+DualListSelectorTree.displayName = 'DualListSelectorTree';

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

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
+import { css } from '@patternfly/react-styles';
+import { DualListSelectorTreeItemData } from './DualListSelectorTree';
+import { Badge } from '../../../components/Badge';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { flattenTree } from './treeUtils';
+import { DualListSelectorListContext } from './DualListSelectorContext';
+
+export interface DualListSelectorTreeItemProps 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 this option is expanded by default. */
+  defaultExpanded?: boolean;
+  /** Flag indicating this option has a badge. */
+  hasBadge?: boolean;
+  /** Callback fired when an option is checked. */
+  onOptionCheck?: (
+    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
+    isChecked: boolean,
+    itemData: DualListSelectorTreeItemData
+  ) => void;
+  /** ID of the option. */
+  id: string;
+  /** Text of the option. */
+  text: string;
+  /** Flag indicating if this open is checked. */
+  isChecked?: boolean;
+  /** Additional properties to pass to the option checkbox. */
+  checkProps?: any;
+  /** Additional properties to pass to the option badge. */
+  badgeProps?: any;
+  /** Raw data of the option. */
+  itemData?: DualListSelectorTreeItemData;
+  /** Flag indicating whether the component is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */
+  useMemo?: boolean;
+}
+
+const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTreeItemProps> = ({
+  onOptionCheck,
+  children,
+  className,
+  id,
+  text,
+  defaultExpanded,
+  hasBadge,
+  isChecked,
+  checkProps,
+  badgeProps,
+  itemData,
+  isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  useMemo,
+  ...props
+}: DualListSelectorTreeItemProps) => {
+  const ref = React.useRef(null);
+  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false);
+  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+
+  React.useEffect(() => {
+    setIsExpanded(defaultExpanded);
+  }, [defaultExpanded]);
+
+  return (
+    <li
+      className={css(
+        styles.dualListSelectorListItem,
+        className,
+        children && styles.modifiers.expandable,
+        isExpanded && styles.modifiers.expanded,
+        isDisabled && styles.modifiers.disabled
+      )}
+      id={id}
+      {...props}
+      aria-selected={isChecked}
+      role="treeitem"
+      {...(isExpanded && { 'aria-expanded': 'true' })}
+    >
+      <div
+        className={css(
+          styles.dualListSelectorListItemRow,
+          isChecked && styles.modifiers.selected,
+          styles.modifiers.check
+        )}
+      >
+        <div
+          className={css(styles.dualListSelectorItem)}
+          ref={ref}
+          tabIndex={-1}
+          onClick={
+            isDisabled
+              ? undefined
+              : (evt) => {
+                  onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                  setFocusedOption(id);
+                }
+          }
+        >
+          <span className={css(styles.dualListSelectorItemMain)}>
+            {children && (
+              <div
+                className={css(styles.dualListSelectorItemToggle)}
+                onClick={(e) => {
+                  if (children) {
+                    setIsExpanded(!isExpanded);
+                  }
+                  e.stopPropagation();
+                }}
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  if (e.key === ' ' || e.key === 'Enter') {
+                    (document.activeElement as HTMLElement).click();
+                    e.preventDefault();
+                  }
+                }}
+                tabIndex={-1}
+              >
+                <span className={css(styles.dualListSelectorItemToggleIcon)}>
+                  <AngleRightIcon aria-hidden />
+                </span>
+              </div>
+            )}
+            <span className={css(styles.dualListSelectorItemCheck)}>
+              <input
+                type="checkbox"
+                onChange={(evt: React.ChangeEvent<HTMLInputElement>) => {
+                  onOptionCheck && onOptionCheck(evt, !isChecked, itemData);
+                  setFocusedOption(id);
+                }}
+                onClick={(evt: React.MouseEvent) => evt.stopPropagation()}
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  if (e.key === ' ' || e.key === 'Enter') {
+                    onOptionCheck && onOptionCheck(e, !isChecked, itemData);
+                    setFocusedOption(id);
+                    e.preventDefault();
+                  }
+                }}
+                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                checked={isChecked || false}
+                tabIndex={-1}
+                {...checkProps}
+              />
+            </span>
+
+            <span className={css(styles.dualListSelectorItemText)}>{text}</span>
+            {hasBadge && children && (
+              <span className={css(styles.dualListSelectorItemCount)}>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+      {isExpanded && children}
+    </li>
+  );
+};
+
+export const DualListSelectorTreeItem = React.memo(DualListSelectorTreeItemBase, (prevProps, nextProps) => {
+  if (!nextProps.useMemo) {
+    return false;
+  }
+
+  if (
+    prevProps.className !== nextProps.className ||
+    prevProps.text !== nextProps.text ||
+    prevProps.id !== nextProps.id ||
+    prevProps.defaultExpanded !== nextProps.defaultExpanded ||
+    prevProps.checkProps !== nextProps.checkProps ||
+    prevProps.hasBadge !== nextProps.hasBadge ||
+    prevProps.badgeProps !== nextProps.badgeProps ||
+    prevProps.isChecked !== nextProps.isChecked ||
+    prevProps.itemData !== nextProps.itemData
+  ) {
+    return false;
+  }
+
+  return true;
+});
+
+DualListSelectorTreeItem.displayName = 'DualListSelectorTreeItem';

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

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { DualListSelectorPane } from '../../DualListSelector';
+import { SearchInput } from '../../../../components/SearchInput';
+import React from 'react';
+
+describe('DualListSelector', () => {
+  test('basic', () => {
+    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with search inputs', () => {
+    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('with custom status', () => {
+    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('basic with disabled controls', () => {
+    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});