@patternfly/react-core 6.0.0-alpha.69 → 6.0.0-alpha.70

package/src/components/DualListSelector/DualListSelectorContext.ts

@@ -12,7 +12,6 @@ export const DualListSelectorListContext = React.createContext<{
   displayOption?: (option: React.ReactNode) => boolean;
   selectedOptions?: string[] | number[];
   id?: string;
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
   options?: React.ReactNode[];
   isDisabled?: boolean;
 }>({});

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -29,7 +29,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
 
 export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
   innerRef,
-  children = null,
+  children,
   className,
   'aria-label': ariaLabel,
   isDisabled = true,

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -6,7 +6,7 @@ import { handleArrows } from '../../helpers';
 /** Acts as the container for the DualListSelectorControl sub-components. */
 
 export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HTMLDivElement> {
-  /** Anything that can be rendered inside of the wrapper. */
+  /** Content to be rendered inside of the controls wrapper. */
   children?: React.ReactNode;
   /** Additional classes added to the wrapper. */
   className?: string;
@@ -60,6 +60,7 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wrapperRef.current]);
 
   return (

package/src/components/DualListSelector/DualListSelectorList.tsx

@@ -7,7 +7,7 @@ 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 */
+  /** Content rendered inside the dual list selector list. */
   children?: React.ReactNode;
 }
 
@@ -15,24 +15,8 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
   children,
   ...props
 }: DualListSelectorListProps) => {
-  const {
-    setFocusedOption,
-    isTree,
-    ariaLabelledBy,
-    focusedOption,
-    displayOption,
-    selectedOptions,
-    id,
-    onOptionSelect,
-    options,
-    isDisabled
-  } = React.useContext(DualListSelectorListContext);
-
-  // only called when options are passed via options prop
-  const onOptionClick = (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => {
-    setFocusedOption(id);
-    onOptionSelect(e, index, id);
-  };
+  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);
@@ -58,7 +42,6 @@ export const DualListSelectorList: React.FunctionComponent<DualListSelectorListP
                   key={index}
                   isSelected={(selectedOptions as number[]).indexOf(index) !== -1}
                   id={`${id}-option-${index}`}
-                  onOptionSelect={(e, id) => onOptionClick(e, index, id)}
                   orderIndex={index}
                   isDisabled={isDisabled}
                 >

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -17,7 +17,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating the list item is currently selected. */
   isSelected?: boolean;
-  /** Callback fired when an option is selected.  */
+  /** Callback fired when an option is selected. */
   onOptionSelect?: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, id?: string) => void;
   /** ID of the option. */
   id?: string;
@@ -25,11 +25,11 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   orderIndex?: number;
   /** @hide Forwarded ref */
   innerRef?: React.RefObject<HTMLLIElement>;
-  /** Flag indicating this item is draggable for reordring */
+  /** Flag indicating this item is draggable for reordering. */
   isDraggable?: boolean;
-  /** Accessible label for the draggable button on draggable list items */
+  /** Accessible label for the draggable button on draggable list items. */
   draggableButtonAriaLabel?: string;
-  /** Flag indicating if the dual list selector is in a disabled state */
+  /** Flag indicating if the dual list selector is in a disabled state. */
   isDisabled?: boolean;
 }
 

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -8,11 +8,11 @@ import { DualListSelectorContext, DualListSelectorListContext } from './DualList
 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 */
+  /** Anything that can be rendered inside of the list. */
   children?: React.ReactNode;
-  /** Id of the dual list selector list */
+  /** ID of the dual list selector list. */
   id?: string;
-  /** Accessibly label for the list */
+  /** Accessibly label for the list. */
   'aria-labelledby': string;
   /** @hide forwarded ref */
   innerRef?: React.RefObject<HTMLDivElement>;
@@ -20,9 +20,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */
   selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, index: number, id: string) => void;
-  /** @hide Function to determine if an option should be displayed depending on a dynamically built filter value */
+  /** @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;
@@ -35,7 +33,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   innerRef,
   options = [],
   selectedOptions = [],
-  onOptionSelect,
   displayOption,
   id = getUniqueId('dual-list-selector-list'),
   isDisabled = false,
@@ -46,8 +43,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const menuRef = innerRef || ref;
   const { isTree } = React.useContext(DualListSelectorContext);
 
-  // sets up keyboard focus handling for the dual list selector menu child of the pane. This keyboard
-  // handling is applied whether the pane is dynamically built or passed via the children prop.
+  // Sets up keyboard focus handling for the dual list selector menu child of the pane.
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
@@ -94,6 +90,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     return () => {
       window.removeEventListener('keydown', handleKeys);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [menuRef.current]);
 
   return (
@@ -108,7 +105,6 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
           selectedOptions,
           id,
           options,
-          onOptionSelect,
           isDisabled
         }}
       >

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { getUniqueId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
-import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
-import { DualListSelectorList } from './DualListSelectorList';
+import { DualListSelectorPaneContext } from './DualListSelectorContext';
 import { SearchInput } from '../SearchInput';
 import cssMenuMinHeight from '@patternfly/react-tokens/dist/esm/c_dual_list_selector__menu_MinHeight';
 
@@ -29,43 +27,12 @@ export interface DualListSelectorPaneProps extends Omit<React.HTMLProps<HTMLDivE
   searchInput?: React.ReactNode;
   /** Actions to place above the pane. */
   actions?: React.ReactNode[];
-  /** Id of the pane. */
+  /** ID of the pane. */
   id?: string;
-  /** @hide Options to list in the pane. */
-  options?: React.ReactNode[];
-  /** @hide Options currently selected in the pane. */
-  selectedOptions?: string[] | number[];
-  /** @hide Callback for when an option is selected. Optionally used only when options prop is provided. */
-  onOptionSelect?: (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean,
-    id?: string,
-    itemData?: any,
-    parentData?: any
-  ) => void;
-  /** @hide Callback for when a tree option is checked. Optionally used only when options prop is provided. */
-  onOptionCheck?: (
-    event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
-    isChecked: boolean,
-    itemData: DualListSelectorTreeItemData
-  ) => void;
-  /** @hide Flag indicating a dynamically built search bar should be included above the pane. */
-  isSearchable?: boolean;
   /** 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;
-  /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
-  onSearchInputChanged?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
-  /** @hide Callback for search input clear button */
-  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
-  /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
-  filterOption?: (option: React.ReactNode, input: string) => boolean;
-  /** @hide Accessible label for the search input. To be used when isSearchable is true. */
-  searchInputAriaLabel?: string;
-  /** @hide Callback for updating the filtered options in DualListSelector. To be used when isSearchable is true. */
-  onFilterUpdate?: (newFilteredOptions: React.ReactNode[], paneType: string, isSearchReset: boolean) => void;
   /** Minimum height of the list of options rendered in the pane. **/
   listMinHeight?: string;
 }
@@ -77,169 +44,51 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   actions,
   searchInput,
   children,
-  onOptionSelect,
-  onOptionCheck,
   title = '',
-  options = [],
-  selectedOptions = [],
-  isSearchable = false,
-  searchInputAriaLabel = '',
-  onFilterUpdate,
-  onSearchInputChanged,
-  onSearchInputClear,
-  filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
   listMinHeight,
   ...props
-}: DualListSelectorPaneProps) => {
-  const [input, setInput] = React.useState('');
-  const { isTree } = React.useContext(DualListSelectorContext);
-
-  // only called when search input is dynamically built
-  const onChange = (e: React.FormEvent<HTMLInputElement>, newValue: string) => {
-    let filtered: React.ReactNode[];
-    if (isTree) {
-      filtered = options
-        .map((opt) => Object.assign({}, opt))
-        .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue));
-    } else {
-      filtered = options.filter((option) => {
-        if (displayOption(option)) {
-          return option;
-        }
-      });
-    }
-    onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === '');
-
-    if (onSearchInputChanged) {
-      onSearchInputChanged(e, newValue);
-    }
-    setInput(newValue);
-  };
-
-  // only called when options are passed via options prop and isTree === true
-  const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
-    if (filterOption) {
-      return filterOption(item as unknown as React.ReactNode, input);
-    } else {
-      if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
-        return true;
-      }
-    }
-    if (item.children) {
-      return (
-        (item.children = item.children
-          .map((opt) => Object.assign({}, opt))
-          .filter((child) => filterInput(child, input))).length > 0
-      );
-    }
-  };
-
-  // only called when options are passed via options prop and isTree === false
-  const displayOption = (option: React.ReactNode) => {
-    if (filterOption) {
-      return filterOption(option, input);
-    } else {
-      return option.toString().toLowerCase().includes(input.toLowerCase());
-    }
-  };
-
-  return (
-    <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 || isSearchable) && (
-        <div className={css(styles.dualListSelectorTools)}>
-          {(isSearchable || searchInput) && (
-            <div className={css(styles.dualListSelectorToolsFilter)}>
-              {searchInput ? (
-                searchInput
-              ) : (
-                <SearchInput
-                  onChange={isDisabled ? undefined : onChange}
-                  onClear={
-                    onSearchInputClear
-                      ? onSearchInputClear
-                      : (e) => onChange(e as React.FormEvent<HTMLInputElement>, '')
-                  }
-                  isDisabled={isDisabled}
-                  aria-label={searchInputAriaLabel}
-                />
-              )}
-            </div>
-          )}
-          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
+}: 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>
-      )}
-      {status && (
-        <div className={css(styles.dualListSelectorStatus)}>
-          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
-            {status}
+      </div>
+    )}
+    {(actions || searchInput) && (
+      <div className={css(styles.dualListSelectorTools)}>
+        {searchInput && (
+          <div className={css(styles.dualListSelectorToolsFilter)}>
+            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
           </div>
-        </div>
-      )}
-      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
-        {!isTree && (
-          <DualListSelectorListWrapper
-            aria-labelledby={`${id}-status`}
-            options={options}
-            selectedOptions={selectedOptions}
-            onOptionSelect={(
-              e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-              index: number,
-              id: string
-            ) => onOptionSelect(e, index, isChosen, id)}
-            displayOption={displayOption}
-            id={`${id}-list`}
-            isDisabled={isDisabled}
-            {...(listMinHeight && {
-              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-            })}
-          >
-            {children}
-          </DualListSelectorListWrapper>
         )}
-        {isTree && (
-          <DualListSelectorListWrapper
-            aria-labelledby={`${id}-status`}
-            id={`${id}-list`}
-            {...(listMinHeight && {
-              style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-            })}
-          >
-            {options.length > 0 ? (
-              <DualListSelectorList>
-                <DualListSelectorTree
-                  data={
-                    isSearchable
-                      ? (options
-                          .map((opt) => Object.assign({}, opt))
-                          .filter((item) =>
-                            filterInput(item as unknown as DualListSelectorTreeItemData, input)
-                          ) as unknown as DualListSelectorTreeItemData[])
-                      : (options as unknown as DualListSelectorTreeItemData[])
-                  }
-                  onOptionCheck={onOptionCheck}
-                  id={`${id}-tree`}
-                  isDisabled={isDisabled}
-                />
-              </DualListSelectorList>
-            ) : (
-              children
-            )}
-          </DualListSelectorListWrapper>
-        )}
-      </DualListSelectorPaneContext.Provider>
-    </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/components/DualListSelector/DualListSelectorTree.tsx

@@ -10,26 +10,26 @@ export interface DualListSelectorTreeItemData {
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge */
+  /** Flag indicating this option has a badge. */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked */
+  /** 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 of the option. */
   id: string;
-  /** Text of the option */
+  /** Text of the option. */
   text: string;
-  /** Parent id of an option */
+  /** Parent ID of an option. */
   parentId?: string;
-  /** Checked state of the option */
+  /** Checked state of the option. */
   isChecked: boolean;
-  /** Additional properties to pass to the option checkbox */
+  /** Additional properties to pass to the option checkbox. */
   checkProps?: any;
-  /** Additional properties to pass to the option badge */
+  /** Additional properties to pass to the option badge. */
   badgeProps?: any;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;
@@ -40,19 +40,19 @@ export interface DualListSelectorTreeItemData {
  */
 
 export interface DualListSelectorTreeProps extends Omit<React.HTMLProps<HTMLUListElement>, 'data'> {
-  /** Data of the tree view */
+  /** Data of the tree view. */
   data: DualListSelectorTreeItemData[] | (() => DualListSelectorTreeItemData[]);
-  /** ID of the tree view */
+  /** ID of the tree view. */
   id?: string;
-  /** @hide Flag indicating if the list is nested */
+  /** @hide Flag indicating if the list is nested. */
   isNested?: boolean;
-  /** Flag indicating if all options should have badges */
+  /** Flag indicating if all options should have badges. */
   hasBadges?: boolean;
-  /** Sets the default expanded behavior */
+  /** Sets the default expanded behavior. */
   defaultAllExpanded?: boolean;
-  /** Flag indicating if the dual list selector tree is in the disabled state */
+  /** Flag indicating if the dual list selector tree is in the disabled state. */
   isDisabled?: boolean;
-  /** Callback fired when an option is checked */
+  /** Callback fired when an option is checked. */
   onOptionCheck?: (
     event: React.MouseEvent | React.ChangeEvent<HTMLInputElement> | React.KeyboardEvent,
     isChecked: boolean,

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -14,25 +14,25 @@ export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIEle
   className?: string;
   /** Flag indicating this option is expanded by default. */
   defaultExpanded?: boolean;
-  /** Flag indicating this option has a badge */
+  /** Flag indicating this option has a badge. */
   hasBadge?: boolean;
-  /** Callback fired when an option is checked */
+  /** 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 of the option. */
   id: string;
-  /** Text of the option */
+  /** Text of the option. */
   text: string;
   /** Flag indicating if this open is checked. */
   isChecked?: boolean;
-  /** Additional properties to pass to the option checkbox */
+  /** Additional properties to pass to the option checkbox. */
   checkProps?: any;
-  /** Additional properties to pass to the option badge */
+  /** Additional properties to pass to the option badge. */
   badgeProps?: any;
-  /** Raw data of the option */
+  /** Raw data of the option. */
   itemData?: DualListSelectorTreeItemData;
   /** Flag indicating whether the component is disabled. */
   isDisabled?: boolean;

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

@@ -1,65 +1,26 @@
 import { render } from '@testing-library/react';
-import { DualListSelector } from '../../DualListSelector';
+import { DualListSelectorPane } from '../DualListSelectorPane';
+import { SearchInput } from '../../SearchInput';
 import React from 'react';
 
 describe('DualListSelector', () => {
   test('basic', () => {
-    const { asFragment } = render(<DualListSelector availableOptions={['Option 1', 'Option 2']} id="firstTest" />);
+    const { asFragment } = render(<DualListSelectorPane id="basicTest" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with search inputs', () => {
-    const { asFragment } = render(
-      <DualListSelector availableOptions={['Option 1', 'Option 2']} id="secondTest" isSearchable />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="searchTest" searchInput={<SearchInput />} />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('with custom status', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={['Option 1', 'Option 2']}
-        availableOptionsStatus="Test status1"
-        chosenOptionsStatus="Test status2"
-        id="thirdTest"
-      />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="statusTest" status="Test status1" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('basic with disabled controls', () => {
-    const { asFragment } = render(
-      <DualListSelector isDisabled availableOptions={['Option 1', 'Option 2']} id="disabledTest" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with tree', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={[
-          { id: 'O1', text: 'Opt1', defaultExpanded: true, children: [{ id: 'O3', text: 'Opt3' }] },
-          { id: 'O2', text: 'Opt2' }
-        ]}
-        availableOptionsStatus="Test status1"
-        chosenOptionsStatus="Test status2"
-        id="tree-test"
-        isTree
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('with actions', () => {
-    const { asFragment } = render(
-      <DualListSelector
-        availableOptions={['Option 1', 'Option 2']}
-        chosenOptions={['Option 3', 'Option 4']}
-        availableOptionsActions={[<span key={1}>TestNode1</span>]}
-        chosenOptionsActions={[<span key={2}>TestNode2</span>]}
-        id="fourthTest"
-      />
-    );
+    const { asFragment } = render(<DualListSelectorPane id="disabledTest" isDisabled />);
     expect(asFragment()).toMatchSnapshot();
   });
 });