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

package/src/{next → deprecated}/components/DualListSelector/examples/DualListSelector.md

@@ -13,9 +13,22 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData'
   ]
-beta: true
+deprecated: true
 ---
 
+import {
+DragDrop,
+Draggable,
+Droppable,
+DualListSelector as DLSDeprecated,
+DualListSelectorPane as DLSPaneDeprecated,
+DualListSelectorList as DLSListDeprecated,
+DualListSelectorListItem as DLSListItemDeprecated,
+DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+DualListSelectorControl as DLSControlDeprecated,
+DualListSelectorTree as DLSTreeDeprecated,
+DualListSelectorTreeItemData as DLSTreeItemDataDeprecated,
+} from '@patternfly/react-core/deprecated';
 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';
@@ -23,32 +36,9 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 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';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
 
 ## Examples
 
-The dual list selector is built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
-
-```noLive
-<DualListSelector>
-  <DualListSelectorPane>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-
-  <DualListSelectorControlsWrapper>
-    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
-  </DualListSelectorControlsWrapper>
-
-  <DualListSelectorPane isChosen>
-    <DualListSelectorList>
-      <DualListSelectorListItem />
-    </DualListSelectorList>
-  </DualListSelectorPane>
-</DualListSelector>
-```
-
 ### Basic
 
 ```ts file="./DualListSelectorBasic.tsx"
@@ -75,11 +65,43 @@ The dual list selector is built in a composable manner to make customization eas
 
 ### With tree
 
-```ts file="DualListSelectorTree.tsx"
+```ts file="./DualListSelectorTreeExample.tsx"
+
+```
+
+## Composable structure
+
+The dual list selector can also be built in a composable manner to make customization easier. The standard sub-component relationships are arranged as follows:
+
+```noLive
+<DualListSelector>
+  <DualListSelectorPane>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+
+  <DualListSelectorControlsWrapper>
+    <DualListSelectorControl /> /* A standard Dual list selector has 4 controls */
+  </DualListSelectorControlsWrapper>
+
+  <DualListSelectorPane isChosen>
+    <DualListSelectorList>
+      <DualListSelectorListItem />
+    </DualListSelectorList>
+  </DualListSelectorPane>
+</DualListSelector>
+```
+
+### Composable dual list selector
+
+```ts file="./DualListSelectorComposable.tsx"
 
 ```
 
-### Drag and drop
+### Composable with drag and drop
+
+Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
 
 This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
 
@@ -93,8 +115,14 @@ This example only allows reordering the contents of the "chosen" pane with drag
   - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
     event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
+
+```ts isDeprecated file="DualListSelectorComposableDragDrop.tsx"
+
+```
+
+### Composable with tree
 
-```ts file="DualListSelectorDragDrop.tsx"
+```ts file="DualListSelectorComposableTree.tsx"
 
 ```

package/src/deprecated/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasic: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic"
+    />
+  );
+};

package/src/deprecated/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasicSearch: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      isSearchable
+      availableOptions={availableOptions}
+      chosenOptions={chosenOptions}
+      onListChange={onListChange}
+      id="dual-list-selector-basic-search"
+    />
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+
+export const DualListSelectorBasicTooltips: React.FunctionComponent = () => {
+  const [availableOptions, setAvailableOptions] = React.useState<React.ReactNode[]>([
+    'Option 1',
+    'Option 2',
+    'Option 3',
+    'Option 4'
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+
+  const onListChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newAvailableOptions: React.ReactNode[],
+    newChosenOptions: React.ReactNode[]
+  ) => {
+    setAvailableOptions(newAvailableOptions.sort());
+    setChosenOptions(newChosenOptions.sort());
+  };
+
+  return (
+    <DLSDeprecated
+      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"
+    />
+  );
+};

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button, ButtonVariant, Checkbox } from '@patternfly/react-core';
+import { DualListSelector as DLSDeprecated } from '@patternfly/react-core/deprecated';
+import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-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>
+  ]);
+  const [chosenOptions, setChosenOptions] = React.useState<React.ReactNode[]>([]);
+  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;
+      }
+      if (a.props.children < b.props.children) {
+        return -1;
+      }
+      return 0;
+    });
+
+    if (pane === 'available') {
+      setAvailableOptions(toSort);
+    } else {
+      setChosenOptions(toSort);
+    }
+  };
+
+  const filterOption = (option: React.ReactNode, input: string) =>
+    (option as React.ReactElement).props.children.includes(input);
+
+  const availableOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('available')}
+      aria-label="Sort available options"
+      key="availableSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>
+  ];
+
+  const chosenOptionsActions = [
+    <Button
+      variant={ButtonVariant.plain}
+      onClick={() => onSort('chosen')}
+      aria-label="Sort chosen options"
+      key="chosenSortButton"
+      isDisabled={isDisabled}
+    >
+      <PficonSortCommonAscIcon />
+    </Button>
+  ];
+
+  return (
+    <React.Fragment>
+      <DLSDeprecated
+        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"
+      />
+      <Checkbox
+        key="isDisabled"
+        id="isDisabled"
+        label="isDisabled"
+        aria-label="isDisabled"
+        isChecked={isDisabled}
+        onChange={() => setIsDisabled(!isDisabled)}
+      />
+    </React.Fragment>
+  );
+};

package/src/{components → deprecated/components}/DualListSelector/examples/DualListSelectorComposable.tsx

@@ -2,12 +2,6 @@ import React from 'react';
 import {
   Button,
   ButtonVariant,
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl,
   SearchInput,
   EmptyState,
   EmptyStateVariant,
@@ -15,6 +9,14 @@ import {
   EmptyStateBody,
   EmptyStateActions
 } from '@patternfly/react-core';
+import {
+  DualListSelector as DLSDeprecated,
+  DualListSelectorPane as DLSPaneDeprecated,
+  DualListSelectorList as DLSListDeprecated,
+  DualListSelectorListItem as DLSListItemDeprecated,
+  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+  DualListSelectorControl as DLSControlDeprecated
+} from '@patternfly/react-core/deprecated';
 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';
@@ -150,8 +152,8 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
   );
 
   return (
-    <DualListSelector>
-      <DualListSelectorPane
+    <DLSDeprecated>
+      <DLSPaneDeprecated
         title="Available"
         status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
           availableOptions.filter((option) => option.isVisible).length
@@ -164,57 +166,57 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           availableOptions.filter((option) => option.isVisible).length === 0 &&
           buildEmptyState(true)}
         {availableOptions.filter((option) => option.isVisible).length > 0 && (
-          <DualListSelectorList>
+          <DLSListDeprecated>
             {availableOptions.map((option, index) =>
               option.isVisible ? (
-                <DualListSelectorListItem
+                <DLSListItemDeprecated
                   key={index}
                   isSelected={option.selected}
                   id={`composable-available-option-${index}`}
                   onOptionSelect={(e) => onOptionSelect(e, index, false)}
                 >
                   {option.text}
-                </DualListSelectorListItem>
+                </DLSListItemDeprecated>
               ) : null
             )}
-          </DualListSelectorList>
+          </DLSListDeprecated>
         )}
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
+      </DLSPaneDeprecated>
+      <DLSControlsWrapperDeprecated>
+        <DLSControlDeprecated
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
           tooltipContent="Add selected"
         >
           <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
           tooltipContent="Add all"
         >
           <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
           tooltipContent="Remove all"
         >
           <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
           tooltipContent="Remove selected"
         >
           <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
-      <DualListSelectorPane
+        </DLSControlDeprecated>
+      </DLSControlsWrapperDeprecated>
+      <DLSPaneDeprecated
         title="Chosen"
         status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
           chosenOptions.filter((option) => option.isVisible).length
@@ -228,22 +230,22 @@ export const DualListSelectorComposable: React.FunctionComponent = () => {
           chosenOptions.filter((option) => option.isVisible).length === 0 &&
           buildEmptyState(false)}
         {chosenOptions.filter((option) => option.isVisible).length > 0 && (
-          <DualListSelectorList>
+          <DLSListDeprecated>
             {chosenOptions.map((option, index) =>
               option.isVisible ? (
-                <DualListSelectorListItem
+                <DLSListItemDeprecated
                   key={index}
                   isSelected={option.selected}
                   id={`composable-chosen-option-${index}`}
                   onOptionSelect={(e) => onOptionSelect(e, index, true)}
                 >
                   {option.text}
-                </DualListSelectorListItem>
+                </DLSListItemDeprecated>
               ) : null
             )}
-          </DualListSelectorList>
+          </DLSListDeprecated>
         )}
-      </DualListSelectorPane>
-    </DualListSelector>
+      </DLSPaneDeprecated>
+    </DLSDeprecated>
   );
 };

package/src/{components → deprecated/components}/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import {
-  DualListSelector,
-  DualListSelectorPane,
-  DualListSelectorList,
-  DualListSelectorListItem,
-  DualListSelectorControlsWrapper,
-  DualListSelectorControl
-} from '@patternfly/react-core';
-import { DragDrop, Draggable, Droppable, DraggableItemPosition } from '@patternfly/react-core/deprecated';
+  DragDrop,
+  Draggable,
+  Droppable,
+  DraggableItemPosition,
+  DualListSelector as DLSDeprecated,
+  DualListSelectorPane as DLSPaneDeprecated,
+  DualListSelectorList as DLSListDeprecated,
+  DualListSelectorListItem as DLSListItemDeprecated,
+  DualListSelectorControlsWrapper as DLSControlsWrapperDeprecated,
+  DualListSelectorControl as DLSControlDeprecated
+} from '@patternfly/react-core/deprecated';
 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';
@@ -90,58 +93,58 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
   };
 
   return (
-    <DualListSelector>
-      <DualListSelectorPane
+    <DLSDeprecated>
+      <DLSPaneDeprecated
         title="Available"
         status={`${availableOptions.filter((option) => option.selected && option.isVisible).length} of ${
           availableOptions.filter((option) => option.isVisible).length
         } options selected`}
       >
-        <DualListSelectorList>
+        <DLSListDeprecated>
           {availableOptions.map((option, index) =>
             option.isVisible ? (
-              <DualListSelectorListItem
+              <DLSListItemDeprecated
                 key={index}
                 isSelected={option.selected}
                 id={`composable-drag-drop-available-option-${index}`}
                 onOptionSelect={(e) => onOptionSelect(e, index, false)}
               >
                 {option.text}
-              </DualListSelectorListItem>
+              </DLSListItemDeprecated>
             ) : null
           )}
-        </DualListSelectorList>
-      </DualListSelectorPane>
-      <DualListSelectorControlsWrapper>
-        <DualListSelectorControl
+        </DLSListDeprecated>
+      </DLSPaneDeprecated>
+      <DLSControlsWrapperDeprecated>
+        <DLSControlDeprecated
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
         >
           <AngleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
         >
           <AngleDoubleRightIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
         >
           <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
-        <DualListSelectorControl
+        </DLSControlDeprecated>
+        <DLSControlDeprecated
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
         >
           <AngleLeftIcon />
-        </DualListSelectorControl>
-      </DualListSelectorControlsWrapper>
+        </DLSControlDeprecated>
+      </DLSControlsWrapperDeprecated>
       <DragDrop
         onDrag={() => {
           setIgnoreNextOptionSelect(true);
@@ -149,7 +152,7 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
         }}
         onDrop={onDrop}
       >
-        <DualListSelectorPane
+        <DLSPaneDeprecated
           title="Chosen"
           status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
             chosenOptions.filter((option) => option.isVisible).length
@@ -157,25 +160,25 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           isChosen
         >
           <Droppable hasNoWrapper>
-            <DualListSelectorList>
+            <DLSListDeprecated>
               {chosenOptions.map((option, index) =>
                 option.isVisible ? (
                   <Draggable key={index} hasNoWrapper>
-                    <DualListSelectorListItem
+                    <DLSListItemDeprecated
                       isSelected={option.selected}
                       id={`composable-drag-drop-chosen-option-${index}`}
                       onOptionSelect={(e) => onOptionSelect(e, index, true)}
                       isDraggable
                     >
                       {option.text}
-                    </DualListSelectorListItem>
+                    </DLSListItemDeprecated>
                   </Draggable>
                 ) : null
               )}
-            </DualListSelectorList>
+            </DLSListDeprecated>
           </Droppable>
-        </DualListSelectorPane>
+        </DLSPaneDeprecated>
       </DragDrop>
-    </DualListSelector>
+    </DLSDeprecated>
   );
 };