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

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -1,38 +1,165 @@
 import React from 'react';
-import { DualListSelector } from '@patternfly/react-core';
+import {
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl
+} from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
-export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    'Option 1',
-    'Option 2',
-    'Option 3',
-    'Option 4'
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
+
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
+      }
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
+
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
+    } else {
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
+    }
+  };
 
-  const onListChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newAvailableOptions: React.ReactNode[],
-    newChosenOptions: React.ReactNode[]
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
   ) => {
-    setAvailableOptions(newAvailableOptions.sort());
-    setChosenOptions(newChosenOptions.sort());
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
+    } else {
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
+    }
   };
 
   return (
-    <DualListSelector
-      availableOptions={availableOptions}
-      chosenOptions={chosenOptions}
-      onListChange={onListChange}
-      addAllTooltip="Add all options"
-      addAllTooltipProps={{ position: 'top' }}
-      addSelectedTooltip="Add selected options"
-      addSelectedTooltipProps={{ position: 'right' }}
-      removeSelectedTooltip="Remove selected options"
-      removeSelectedTooltipProps={{ position: 'left' }}
-      removeAllTooltip="Remove all options"
-      removeAllTooltipProps={{ position: 'bottom' }}
-      id="dual-list-selector-basic-tooltips"
-    />
+    <DualListSelector>
+      <DualListSelectorPane
+        title="Available options"
+        status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          availableOptions.filter((option) => option.isVisible).length
+        } options selected`}
+      >
+        <DualListSelectorList>
+          {availableOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`tooltips-available-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, false)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+      <DualListSelectorControlsWrapper>
+        <DualListSelectorControl
+          isDisabled={!availableOptions.some((option) => option.selected)}
+          onClick={() => moveSelected(true)}
+          aria-label="Add selected"
+          tooltipContent="Add selected"
+          tooltipProps={{ position: 'top', 'aria-live': 'off' }}
+        >
+          <AngleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={availableOptions.length === 0}
+          onClick={() => moveAll(true)}
+          aria-label="Add all"
+          tooltipContent="Add all"
+          tooltipProps={{ position: 'right', 'aria-live': 'off' }}
+        >
+          <AngleDoubleRightIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          isDisabled={chosenOptions.length === 0}
+          onClick={() => moveAll(false)}
+          aria-label="Remove all"
+          tooltipContent="Remove all"
+          tooltipProps={{ position: 'left', 'aria-live': 'off' }}
+        >
+          <AngleDoubleLeftIcon />
+        </DualListSelectorControl>
+        <DualListSelectorControl
+          onClick={() => moveSelected(false)}
+          isDisabled={!chosenOptions.some((option) => option.selected)}
+          aria-label="Remove selected"
+          tooltipContent="Remove selected"
+          tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
+        >
+          <AngleLeftIcon />
+        </DualListSelectorControl>
+      </DualListSelectorControlsWrapper>
+      <DualListSelectorPane
+        title="Chosen options"
+        status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+          chosenOptions.filter((option) => option.isVisible).length
+        } options selected`}
+        isChosen
+      >
+        <DualListSelectorList>
+          {chosenOptions.map((option, index) =>
+            option.isVisible ? (
+              <DualListSelectorListItem
+                key={index}
+                isSelected={option.selected}
+                id={`composable-tooltips-chosen-option-${index}`}
+                onOptionSelect={(e) => onOptionSelect(e, index, true)}
+              >
+                {option.text}
+              </DualListSelectorListItem>
+            ) : null
+          )}
+        </DualListSelectorList>
+      </DualListSelectorPane>
+    </DualListSelector>
   );
 };

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -3,157 +3,334 @@ import {
   Button,
   ButtonVariant,
   Checkbox,
-  DualListSelector,
   Dropdown,
   DropdownList,
   DropdownItem,
+  DualListSelector,
+  DualListSelectorPane,
+  DualListSelectorList,
+  DualListSelectorListItem,
+  DualListSelectorControlsWrapper,
+  DualListSelectorControl,
+  SearchInput,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateFooter,
+  EmptyStateBody,
+  EmptyStateActions,
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
+import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
-  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
-    <span key="option1">Option 1</span>,
-    <span key="option3">Option 3</span>,
-    <span key="option4">Option 4</span>,
-    <span key="option2">Option 2</span>
+interface Option {
+  text: string;
+  selected: boolean;
+  isVisible: boolean;
+}
+
+export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<Option[]>([
+    { text: 'Option 1', selected: false, isVisible: true },
+    { text: 'Option 2', selected: false, isVisible: true },
+    { text: 'Option 3', selected: false, isVisible: true },
+    { text: 'Option 4', selected: false, isVisible: true }
   ]);
-  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const [chosenOptions, setChosenOptions] = React.useState<Option[]>([]);
   const [isAvailableKebabOpen, setIsAvailableKebabOpen] = React.useState(false);
   const [isChosenKebabOpen, setIsChosenKebabOpen] = React.useState(false);
+  const [availableFilter, setAvailableFilter] = React.useState('');
+  const [chosenFilter, setChosenFilter] = React.useState('');
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const onListChange = (newAvailableOptions: React.ReactNode[], newChosenOptions: React.ReactNode[]) => {
-    setAvailableOptions(newAvailableOptions);
-    setChosenOptions(newChosenOptions);
-  };
-
-  const onSort = (pane: string) => {
-    const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
-    (toSort as React.ReactElement[]).sort((a, b) => {
-      if (a.props.children > b.props.children) {
-        return 1;
+  // callback for moving selected options between lists
+  const moveSelected = (fromAvailable: boolean) => {
+    const sourceOptions = fromAvailable ? availableOptions : chosenOptions;
+    const destinationOptions = fromAvailable ? chosenOptions : availableOptions;
+    for (let i = 0; i < sourceOptions.length; i++) {
+      const option = sourceOptions[i];
+      if (option.selected && option.isVisible) {
+        sourceOptions.splice(i, 1);
+        destinationOptions.push(option);
+        option.selected = false;
+        i--;
       }
-      if (a.props.children < b.props.children) {
-        return -1;
-      }
-      return 0;
-    });
+    }
+    if (fromAvailable) {
+      setAvailableOptions([...sourceOptions]);
+      setChosenOptions([...destinationOptions]);
+    } else {
+      setChosenOptions([...sourceOptions]);
+      setAvailableOptions([...destinationOptions]);
+    }
+  };
 
-    if (pane === 'available') {
-      setAvailableOptions(toSort);
+  // callback for moving all options between lists
+  const moveAll = (fromAvailable: boolean) => {
+    if (fromAvailable) {
+      setChosenOptions([...availableOptions.filter((option) => option.isVisible), ...chosenOptions]);
+      setAvailableOptions([...availableOptions.filter((option) => !option.isVisible)]);
     } else {
-      setChosenOptions(toSort);
+      setAvailableOptions([...chosenOptions.filter((option) => option.isVisible), ...availableOptions]);
+      setChosenOptions([...chosenOptions.filter((option) => !option.isVisible)]);
     }
   };
 
-  const onToggle = (pane: string) => {
-    if (pane === 'available') {
-      setIsAvailableKebabOpen(!isAvailableKebabOpen);
+  // callback when option is selected
+  const onOptionSelect = (
+    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
+    index: number,
+    isChosen: boolean
+  ) => {
+    if (isChosen) {
+      const newChosen = [...chosenOptions];
+      newChosen[index].selected = !chosenOptions[index].selected;
+      setChosenOptions(newChosen);
     } else {
-      setIsChosenKebabOpen(!isChosenKebabOpen);
+      const newAvailable = [...availableOptions];
+      newAvailable[index].selected = !availableOptions[index].selected;
+      setAvailableOptions(newAvailable);
     }
   };
 
-  const filterOption = (option: React.ReactNode, input: string) =>
-    (option as React.ReactElement).props.children.includes(input);
+  const onFilterChange = (value: string, isAvailable: boolean) => {
+    isAvailable ? setAvailableFilter(value) : setChosenFilter(value);
+    const toFilter = isAvailable ? [...availableOptions] : [...chosenOptions];
+    toFilter.forEach((option) => {
+      option.isVisible = value === '' || option.text.toLowerCase().includes(value.toLowerCase());
+    });
+  };
 
-  const availableOptionsActions = [
-    <Button
-      variant={ButtonVariant.plain}
-      onClick={() => onSort('available')}
-      aria-label="Sort available options"
-      key="availableSortButton"
+  // builds a search input - used in each dual list selector pane
+  const buildSearchInput = (isAvailable: boolean) => (
+    <SearchInput
+      value={isAvailable ? availableFilter : chosenFilter}
+      onChange={(_event, value) => onFilterChange(value, isAvailable)}
+      onClear={() => onFilterChange('', isAvailable)}
       isDisabled={isDisabled}
-    >
-      <PficonSortCommonAscIcon />
-    </Button>,
-    <Dropdown
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          isDisabled={isDisabled}
-          isExpanded={isAvailableKebabOpen}
-          onClick={() => onToggle('available')}
-          variant="plain"
-          id="complex-available-toggle"
-          aria-label="Complex actions example available kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
-      )}
-      isOpen={isAvailableKebabOpen}
-      onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
-      onSelect={() => setIsAvailableKebabOpen(false)}
-      key="availableDropdown"
-    >
-      <DropdownList>
-        <DropdownItem key="available action">Action</DropdownItem>
-        {/* Prevent default onClick functionality for example purposes */}
-        <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
-          Link
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  ];
+    />
+  );
 
-  const chosenOptionsActions = [
-    <Button
-      variant={ButtonVariant.plain}
-      onClick={() => onSort('chosen')}
-      aria-label="Sort chosen options"
-      key="chosenSortButton"
-      isDisabled={isDisabled}
-    >
-      <PficonSortCommonAscIcon />
-    </Button>,
-    <Dropdown
-      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle
-          ref={toggleRef}
-          isDisabled={isDisabled}
-          isExpanded={isChosenKebabOpen}
-          variant="plain"
-          onClick={() => onToggle('chosen')}
-          id="complex-chosen-toggle"
-          aria-label="Complex actions example chosen kebab toggle"
-        >
-          <EllipsisVIcon aria-hidden="true" />
-        </MenuToggle>
-      )}
-      isOpen={isChosenKebabOpen}
-      onOpenChange={(isOpen) => setIsChosenKebabOpen(isOpen)}
-      onSelect={() => setIsChosenKebabOpen(false)}
-      key="chosenDropdown"
-    >
-      <DropdownList>
-        <DropdownItem key="chosen action">Action</DropdownItem>
-        {/* Prevent default onClick functionality for example purposes */}
-        <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
-          Link
-        </DropdownItem>
-      </DropdownList>
-    </Dropdown>
-  ];
+  // builds a sort control - passed to both dual list selector panes
+  const buildSort = (isAvailable: boolean) => {
+    const onSort = () => {
+      const toSort = isAvailable ? [...availableOptions] : [...chosenOptions];
+      toSort.sort((a, b) => {
+        if (a.text > b.text) {
+          return 1;
+        }
+        if (a.text < b.text) {
+          return -1;
+        }
+        return 0;
+      });
+      if (isAvailable) {
+        setAvailableOptions(toSort);
+      } else {
+        setChosenOptions(toSort);
+      }
+    };
+
+    const onToggle = (pane: string) => {
+      if (pane === 'available') {
+        setIsAvailableKebabOpen(!isAvailableKebabOpen);
+      } else {
+        setIsChosenKebabOpen(!isChosenKebabOpen);
+      }
+    };
+
+    return isAvailable
+      ? [
+          <Button
+            variant={ButtonVariant.plain}
+            onClick={onSort}
+            aria-label="Sort Available"
+            key="availableSortButton"
+            isDisabled={isDisabled}
+          >
+            <PficonSortCommonAscIcon />
+          </Button>,
+          <Dropdown
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isDisabled={isDisabled}
+                isExpanded={isAvailableKebabOpen}
+                onClick={() => onToggle('available')}
+                variant="plain"
+                id="complex-available-toggle"
+                aria-label="Complex actions example available kebab toggle"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+            isOpen={isAvailableKebabOpen}
+            onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
+            onSelect={() => setIsAvailableKebabOpen(false)}
+            key="availableDropdown"
+          >
+            <DropdownList>
+              <DropdownItem key="available action">Available Action</DropdownItem>
+              <DropdownItem key="available link" to="#" onClick={(event: any) => event.preventDefault()}>
+                Available Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        ]
+      : [
+          <Button
+            variant={ButtonVariant.plain}
+            onClick={onSort}
+            aria-label="Sort Chosen"
+            key="chosenSortButton"
+            isDisabled={isDisabled}
+          >
+            <PficonSortCommonAscIcon />
+          </Button>,
+          <Dropdown
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isDisabled={isDisabled}
+                isExpanded={isChosenKebabOpen}
+                onClick={() => onToggle('chosen')}
+                variant="plain"
+                id="complex-chosen-toggle"
+                aria-label="Complex actions example chosen kebab toggle"
+              >
+                <EllipsisVIcon aria-hidden="true" />
+              </MenuToggle>
+            )}
+            isOpen={isChosenKebabOpen}
+            onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}
+            onSelect={() => setIsChosenKebabOpen(false)}
+            key="chosenDropdown"
+          >
+            <DropdownList>
+              <DropdownItem key="chosen action">Chosen Action</DropdownItem>
+              <DropdownItem key="chosen link" to="#" onClick={(event: any) => event.preventDefault()}>
+                Chosen Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
+        ];
+  };
+
+  const buildEmptyState = (isAvailable: boolean) => (
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
+      <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button variant="link" onClick={() => onFilterChange('', isAvailable)}>
+            Clear all filters
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    </EmptyState>
+  );
 
   return (
     <React.Fragment>
-      <DualListSelector
-        isSearchable
-        availableOptions={availableOptions}
-        availableOptionsActions={availableOptionsActions}
-        chosenOptions={chosenOptions}
-        chosenOptionsActions={chosenOptionsActions}
-        addAll={onListChange}
-        removeAll={onListChange}
-        addSelected={onListChange}
-        removeSelected={onListChange}
-        filterOption={filterOption}
-        isDisabled={isDisabled}
-        id="dual-list-selector-complex"
-      />
+      <DualListSelector>
+        <DualListSelectorPane
+          title="Available options"
+          status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            availableOptions.filter((option) => option.isVisible).length
+          } options selected`}
+          searchInput={buildSearchInput(true)}
+          actions={[buildSort(true)]}
+          listMinHeight="300px"
+          isDisabled={isDisabled}
+        >
+          {availableFilter !== '' &&
+            availableOptions.filter((option) => option.isVisible).length === 0 &&
+            buildEmptyState(true)}
+
+          <DualListSelectorList>
+            {availableOptions.map((option, index) =>
+              option.isVisible ? (
+                <DualListSelectorListItem
+                  key={index}
+                  isSelected={option.selected}
+                  id={`complex-available-option-${index}`}
+                  onOptionSelect={(e) => onOptionSelect(e, index, false)}
+                  isDisabled={isDisabled}
+                >
+                  {option.text}
+                </DualListSelectorListItem>
+              ) : null
+            )}
+          </DualListSelectorList>
+        </DualListSelectorPane>
+        <DualListSelectorControlsWrapper>
+          <DualListSelectorControl
+            isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
+            onClick={() => moveSelected(true)}
+            aria-label="Add selected"
+          >
+            <AngleRightIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            isDisabled={availableOptions.length === 0 || isDisabled}
+            onClick={() => moveAll(true)}
+            aria-label="Add all"
+          >
+            <AngleDoubleRightIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            isDisabled={chosenOptions.length === 0 || isDisabled}
+            onClick={() => moveAll(false)}
+            aria-label="Remove all"
+          >
+            <AngleDoubleLeftIcon />
+          </DualListSelectorControl>
+          <DualListSelectorControl
+            onClick={() => moveSelected(false)}
+            isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
+            aria-label="Remove selected"
+          >
+            <AngleLeftIcon />
+          </DualListSelectorControl>
+        </DualListSelectorControlsWrapper>
+        <DualListSelectorPane
+          title="Chosen options"
+          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
+            chosenOptions.filter((option) => option.isVisible).length
+          } options selected`}
+          searchInput={buildSearchInput(false)}
+          actions={[buildSort(false)]}
+          listMinHeight="300px"
+          isChosen
+        >
+          {chosenFilter !== '' &&
+            chosenOptions.filter((option) => option.isVisible).length === 0 &&
+            buildEmptyState(false)}
+          {chosenOptions.filter((option) => option.isVisible).length > 0 && (
+            <DualListSelectorList>
+              {chosenOptions.map((option, index) =>
+                option.isVisible ? (
+                  <DualListSelectorListItem
+                    key={index}
+                    isSelected={option.selected}
+                    id={`composable-complex-chosen-option-${index}`}
+                    onOptionSelect={(e) => onOptionSelect(e, index, true)}
+                    isDisabled={isDisabled}
+                  >
+                    {option.text}
+                  </DualListSelectorListItem>
+                ) : null
+              )}
+            </DualListSelectorList>
+          )}
+        </DualListSelectorPane>
+      </DualListSelector>
       <Checkbox
         key="isDisabled"
         id="isDisabled"

package/src/components/DualListSelector/index.ts

@@ -1,9 +1,7 @@
 export * from './DualListSelector';
-export * from './DualListSelectorContext';
 export * from './DualListSelectorControl';
 export * from './DualListSelectorControlsWrapper';
 export * from './DualListSelectorPane';
 export * from './DualListSelectorList';
 export * from './DualListSelectorListItem';
 export * from './DualListSelectorTree';
-export * from './DualListSelectorContext';