@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.5

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.2","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.4","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.2","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.4","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.2","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.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.3",
+  "version": "6.2.0-prerelease.5",
   "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": "1ccc691a770cdf0fda24a569a14684199cdeef35"
+  "gitHead": "f53d2dd019b4f2aa57980fcd87b5b2e5fdde902a"
 }

package/src/demos/Skeleton.md

@@ -0,0 +1,13 @@
+---
+id: Skeleton
+section: components
+---
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+## Demos
+
+### Skeleton card
+
+```ts file='./examples/Skeleton/SkeletonCard.tsx' isFullscreen
+
+```

package/src/demos/examples/Skeleton/SkeletonCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Gallery, Flex, PageSection, Content, Card, CardBody, Skeleton } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const SkeletonCard: React.FunctionComponent = () => {
+  const card = (index: number) => (
+    <Card key={index} isCompact>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton screenreaderText="Loading content" />
+          <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+      <CardBody>
+        <Skeleton shape="square" width="75%" screenreaderText="Loading medium square contents" />
+      </CardBody>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton screenreaderText="Loading content" />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+  return (
+    <DashboardWrapper isBreadcrumbWidthLimited>
+      <PageSection isWidthLimited>
+        <Content component="h1">Main title</Content>
+        <Content component="p">This is a full page demo.</Content>
+      </PageSection>
+      <PageSection>
+        <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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>
-  );
-};