@patternfly/react-core 6.2.0-prerelease.4 → 6.2.0-prerelease.6

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.5","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.5","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.5","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.4",
+  "version": "6.2.0-prerelease.6",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "e970ecb6bb172b1f8cbbc5ce26887212c5830892"
+  "gitHead": "640b9eb146a8ecdaae6cfcbfbbefe4c27289c877"
 }

package/src/components/Toolbar/examples/Toolbar.md

@@ -62,6 +62,14 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
+### Background color variants
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+```ts file="./ToolbarColorVariant.tsx"
+
+```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.
@@ -112,11 +120,3 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
-
-## Background color variants
-
-To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
-
-```ts file="./ToolbarColorVariant.tsx"
-
-```

package/src/components/TreeView/examples/TreeView.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
 
 ## Examples
 
@@ -51,6 +51,12 @@ A search input can be used to filter tree view items. It is recommended that a t
 
 ```
 
+### With unique icon per item
+
+```ts file='./TreeViewWithIconPerItem.tsx'
+
+```
+
 ### With badges
 
 ```ts file='./TreeViewWithBadges.tsx'

package/src/components/TreeView/examples/TreeViewWithIconPerItem.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TreeView, TreeViewDataItem } from '@patternfly/react-core';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+
+export const TreeViewWithIconPerItem: React.FunctionComponent = () => {
+  const [activeItems, setActiveItems] = React.useState<TreeViewDataItem[]>();
+
+  const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => {
+    // Ignore folders for selection
+    if (treeViewItem && !treeViewItem.children) {
+      setActiveItems([treeViewItem]);
+    }
+  };
+  const options: TreeViewDataItem[] = [
+    {
+      name: 'Github accounts',
+      id: 'iconPerItem-Github',
+      icon: <GithubIcon />,
+      children: [
+        {
+          name: 'Account 1',
+          id: 'iconPerItem-Acc1'
+        },
+        {
+          name: 'Account 2',
+          id: 'iconPerItem-Acc2'
+        }
+      ],
+      defaultExpanded: true
+    },
+    {
+      name: 'Gitlab accounts',
+      id: 'iconPerItem-Gitlab',
+      icon: <GitlabIcon />,
+      children: [
+        {
+          name: 'Account 3',
+          id: 'iconPerItem-Acc3'
+        }
+      ]
+    },
+    {
+      name: 'Google accounts',
+      id: 'iconPerItem-Google',
+      icon: <GoogleIcon />,
+      children: [
+        {
+          name: 'Account 4',
+          id: 'iconPerItem-Acc4'
+        }
+      ]
+    }
+  ];
+  return (
+    <TreeView
+      aria-label="Tree View with unique icon per item example"
+      data={options}
+      activeItems={activeItems}
+      onSelect={onSelect}
+    />
+  );
+};

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import {
-  DataList,
-  DataListItem,
-  DataListCell,
-  DataListItemRow,
-  DataListCheck,
-  DataListControl,
-  DataListDragButton,
-  DataListItemCells,
-  getUniqueId
-} from '@patternfly/react-core';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
-
-interface ItemType {
-  id: string;
-  content: string;
-}
-
-const getItems = (count: number) =>
-  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({
-    id: `draggable-item-${idx}`,
-    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)
-  }));
-
-const reorder = (list: ItemType[], startIndex: number, endIndex: number) => {
-  const result = list;
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
-  return result;
-};
-
-export const DataListDraggable: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState(getItems(10));
-  const [liveText, setLiveText] = React.useState('');
-
-  function onDrag(source) {
-    setLiveText(`Started dragging ${items[source.index].content}`);
-    // Return true to allow drag
-    return true;
-  }
-
-  function onDragMove(source, dest) {
-    const newText = dest ? `Move ${items[source.index].content} to ${items[dest.index].content}` : 'Invalid drop zone';
-    if (newText !== liveText) {
-      setLiveText(newText);
-    }
-  }
-
-  function onDrop(source, dest) {
-    if (dest) {
-      const newItems = reorder(items, source.index, dest.index);
-      setItems(newItems);
-
-      setLiveText('Dragging finished.');
-      return true; // Signal that this is a valid drop and not to animate the item returning home.
-    } else {
-      setLiveText('Dragging cancelled. List unchanged.');
-    }
-  }
-
-  const uniqueId = getUniqueId();
-
-  return (
-    <DragDrop onDrag={onDrag} onDragMove={onDragMove} onDrop={onDrop}>
-      <Droppable hasNoWrapper>
-        <DataList aria-label="draggable data list example" isCompact>
-          {items.map(({ id, content }) => (
-            <Draggable key={id} hasNoWrapper>
-              <DataListItem aria-labelledby={`draggable-${id}`} ref={React.createRef()}>
-                <DataListItemRow>
-                  <DataListControl>
-                    <DataListDragButton
-                      aria-label="Reorder"
-                      aria-labelledby={`draggable-${id}`}
-                      aria-describedby={`description-${uniqueId}`}
-                      aria-pressed="false"
-                    />
-                    <DataListCheck
-                      id={`check-draggable-${id}`}
-                      aria-labelledby={`draggable-${id}`}
-                      name={id}
-                      otherControls
-                    />
-                  </DataListControl>
-                  <DataListItemCells
-                    dataListCells={[
-                      <DataListCell key={id}>
-                        <span id={`draggable-${id}`}>{content}</span>
-                      </DataListCell>
-                    ]}
-                  />
-                </DataListItemRow>
-              </DataListItem>
-            </Draggable>
-          ))}
-        </DataList>
-      </Droppable>
-      <div className="pf-v6-screen-reader" aria-live="assertive">
-        {liveText}
-      </div>
-      <div className="pf-v6-screen-reader" id={`description-${uniqueId}`}>
-        Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
-        the drag, or any other key to cancel the drag operation.
-      </div>
-    </DragDrop>
-  );
-};

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

@@ -1,177 +0,0 @@
-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';
-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 DualListSelectorComposableDragDrop: React.FunctionComponent = () => {
-  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
-  const [availableOptions, setAvailableOptions] = React.useState([
-    { text: 'Apple', selected: false, isVisible: true },
-    { text: 'Banana', selected: false, isVisible: true },
-    { text: 'Pineapple', selected: false, isVisible: true }
-  ]);
-  const [chosenOptions, setChosenOptions] = React.useState([
-    { text: 'Orange', selected: false, isVisible: true },
-    { text: 'Grape', selected: false, isVisible: true },
-    { text: 'Peach', selected: false, isVisible: true },
-    { text: 'Strawberry', selected: false, isVisible: true }
-  ]);
-
-  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]);
-    }
-  };
-
-  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 onOptionSelect = (
-    event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
-    index: number,
-    isChosen: boolean
-  ) => {
-    if (ignoreNextOptionSelect) {
-      setIgnoreNextOptionSelect(false);
-      return;
-    }
-    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);
-    }
-  };
-
-  const onDrop = (source: DraggableItemPosition, dest: DraggableItemPosition | undefined) => {
-    if (dest) {
-      const newList = [...chosenOptions];
-      const [removed] = newList.splice(source.index, 1);
-      newList.splice(dest.index, 0, removed);
-      setChosenOptions(newList);
-      return true;
-    }
-    return false;
-  };
-
-  return (
-    <DualListSelector>
-      <DualListSelectorPane
-        title="Available"
-        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={`composable-drag-drop-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"
-          icon={<AngleRightIcon />}
-        />
-        <DualListSelectorControl
-          isDisabled={availableOptions.length === 0}
-          onClick={() => moveAll(true)}
-          aria-label="Add all"
-          icon={<AngleDoubleRightIcon />}
-        />
-        <DualListSelectorControl
-          isDisabled={chosenOptions.length === 0}
-          onClick={() => moveAll(false)}
-          aria-label="Remove all"
-          icon={<AngleDoubleLeftIcon />}
-        />
-        <DualListSelectorControl
-          onClick={() => moveSelected(false)}
-          isDisabled={!chosenOptions.some((option) => option.selected)}
-          aria-label="Remove selected"
-          icon={<AngleLeftIcon />}
-        />
-      </DualListSelectorControlsWrapper>
-      <DragDrop
-        onDrag={() => {
-          setIgnoreNextOptionSelect(true);
-          return true;
-        }}
-        onDrop={onDrop}
-      >
-        <DualListSelectorPane
-          title="Chosen"
-          status={`${chosenOptions.filter((option) => option.selected && option.isVisible).length} of ${
-            chosenOptions.filter((option) => option.isVisible).length
-          } options selected`}
-          isChosen
-        >
-          <Droppable hasNoWrapper>
-            <DualListSelectorList>
-              {chosenOptions.map((option, index) =>
-                option.isVisible ? (
-                  <Draggable key={index} hasNoWrapper>
-                    <DualListSelectorListItem
-                      isSelected={option.selected}
-                      id={`composable-drag-drop-chosen-option-${index}`}
-                      onOptionSelect={(e) => onOptionSelect(e, index, true)}
-                      isDraggable
-                    >
-                      {option.text}
-                    </DualListSelectorListItem>
-                  </Draggable>
-                ) : null
-              )}
-            </DualListSelectorList>
-          </Droppable>
-        </DualListSelectorPane>
-      </DragDrop>
-    </DualListSelector>
-  );
-};