@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/drag-and-drop/react-deprecated.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+const pageData = {
+  "id": "Drag and drop",
+  "section": "components",
+  "subsection": "",
+  "deprecated": true,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-deprecated",
+  "tabName": null,
+  "slug": "/components/drag-and-drop/react-deprecated",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md",
+  "relPath": "packages/react-core/src/deprecated/components/DragDrop/examples/DragDrop.md",
+  "title": "Drag and drop",
+  "propComponents": [
+    {
+      "name": "DragDrop",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Potentially Droppable and Draggable children"
+        },
+        {
+          "name": "onDrag",
+          "type": "(source: DraggableItemPosition) => boolean",
+          "description": "Callback for drag event. Return true to allow drag, false to disallow.",
+          "defaultValue": "() => true"
+        },
+        {
+          "name": "onDragMove",
+          "type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => void",
+          "description": "Callback on mouse move while dragging.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onDrop",
+          "type": "(source: DraggableItemPosition, dest?: DraggableItemPosition) => boolean",
+          "description": "Callback for drop event. Return true to allow drop, false to disallow.",
+          "defaultValue": "() => false"
+        }
+      ]
+    },
+    {
+      "name": "Draggable",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside DragDrop"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        },
+        {
+          "name": "hasNoWrapper",
+          "type": "boolean",
+          "description": "Don't wrap the component in a div. Requires passing a single child.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "style",
+          "type": "No type info",
+          "defaultValue": "{}"
+        }
+      ]
+    },
+    {
+      "name": "Droppable",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside DragDrop"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to outer div"
+        },
+        {
+          "name": "droppableId",
+          "type": "string",
+          "description": "Id to be passed back on drop events",
+          "defaultValue": "'defaultId'"
+        },
+        {
+          "name": "hasNoWrapper",
+          "type": "boolean",
+          "description": "Don't wrap the component in a div. Requires passing a single child.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "zone",
+          "type": "string",
+          "description": "Name of zone that items can be dragged between. Should specify if there is more than one Droppable on the page.",
+          "defaultValue": "'defaultZone'"
+        }
+      ]
+    },
+    {
+      "name": "DraggableItemPosition",
+      "description": "",
+      "props": [
+        {
+          "name": "droppableId",
+          "type": "string",
+          "description": "Parent droppableId",
+          "required": true
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "description": "Index of item in parent Droppable",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "examples": [
+    "Basic",
+    "Multiple lists"
+  ]
+};
+pageData.liveContext = {
+  useState
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';\n\ninterface ItemType {\n  id: string;\n  content: string;\n}\n\ninterface SourceType {\n  droppableId: string;\n  index: number;\n}\n\ninterface DestinationType extends SourceType {}\n\nconst getItems = (count: number) =>\n  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({\n    id: `item-${idx}`,\n    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)\n  }));\n\nconst reorder = (list: ItemType[], startIndex: number, endIndex: number) => {\n  const result = [...list];\n  const [removed] = result.splice(startIndex, 1);\n  result.splice(endIndex, 0, removed);\n  return result;\n};\n\nexport const DragDropBasic: React.FunctionComponent = () => {\n  const [items, setItems] = useState<ItemType[]>(getItems(10));\n\n  function onDrop(source: SourceType, dest: DestinationType) {\n    if (dest) {\n      const newItems = reorder(items, source.index, dest.index);\n      setItems(newItems);\n\n      return true;\n    }\n    return false;\n  }\n\n  return (\n    <DragDrop onDrop={onDrop}>\n      <Droppable>\n        {items.map(({ id, content }) => (\n          <Draggable key={id} style={{ padding: '8px' }}>\n            {content}\n          </Draggable>\n        ))}\n      </Droppable>\n    </DragDrop>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multiple lists': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Flex } from '@patternfly/react-core';\nimport { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';\n\ninterface ItemType {\n  id: string;\n  content: string;\n}\n\ninterface SourceType {\n  droppableId: string;\n  index: number;\n}\n\ninterface MultipleListState {\n  items1: ItemType[];\n  items2: ItemType[];\n}\n\ninterface DestinationType extends SourceType {}\n\nconst getItems = (count: number, startIndex: number) =>\n  Array.from({ length: count }, (_, idx) => idx + startIndex).map((idx) => ({\n    id: `item-${idx}`,\n    content: `item ${idx} `.repeat(idx === 4 ? 20 : 1)\n  }));\n\nconst reorder = (list: ItemType[], startIndex: number, endIndex: number) => {\n  const result = list;\n  const [removed] = result.splice(startIndex, 1);\n  result.splice(endIndex, 0, removed);\n  return result;\n};\n\nconst move = (source: ItemType[], destination: ItemType[], sourceIndex: number, destIndex: number) => {\n  const sourceClone = source;\n  const destClone = destination;\n  const [removed] = sourceClone.splice(sourceIndex, 1);\n  destClone.splice(destIndex, 0, removed);\n  return [sourceClone, destClone];\n};\n\nexport const DragDropMultipleLists: React.FunctionComponent = () => {\n  const [items, setItems] = useState<MultipleListState>({\n    items1: getItems(10, 0),\n    items2: getItems(5, 10)\n  });\n\n  function onDrop(source: SourceType, dest: DestinationType) {\n    // eslint-disable-next-line no-console\n    console.log(source, dest);\n    if (dest) {\n      if (source.droppableId === dest.droppableId) {\n        const newItems = reorder(\n          source.droppableId === 'items1' ? items.items1 : items.items2,\n          source.index,\n          dest.index\n        );\n        if (source.droppableId === 'items1') {\n          setItems({\n            items1: newItems,\n            items2: items.items2\n          });\n        } else {\n          setItems({\n            items1: items.items1,\n            items2: newItems\n          });\n        }\n      } else {\n        const [newItems1, newItems2] = move(\n          source.droppableId === 'items1' ? items.items1 : items.items2,\n          dest.droppableId === 'items1' ? items.items1 : items.items2,\n          source.index,\n          dest.index\n        );\n        setItems({\n          items1: source.droppableId === 'items1' ? newItems1 : newItems2,\n          items2: dest.droppableId === 'items1' ? newItems1 : newItems2\n        });\n      }\n      return true;\n    }\n    return false;\n  }\n\n  return (\n    <DragDrop onDrop={onDrop}>\n      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>\n        {Object.entries(items).map(([key, subitems]) => (\n          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>\n            <Droppable zone=\"multizone\" droppableId={key} style={{ flexGrow: 1 }}>\n              {(subitems as ItemType[]).map(({ id, content }) => (\n                <Draggable key={id} style={{ padding: '8px' }}>\n                  {content}\n                </Draggable>\n              ))}\n            </Droppable>\n          </Flex>\n        ))}\n      </Flex>\n    </DragDrop>\n  );\n};\n","title":"Multiple lists","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`You can use the `}
+      <code {...{"className":"ws-code "}}>
+        {`<DragDrop>`}
+      </code>
+      {` component to move items in or between lists. The `}
+      <code {...{"className":"ws-code "}}>
+        {`<DragDrop>`}
+      </code>
+      {` component should contain `}
+      <code {...{"className":"ws-code "}}>
+        {`<Droppable>`}
+      </code>
+      {` components which contain `}
+      <code {...{"className":"ws-code "}}>
+        {`<Draggable>`}
+      </code>
+      {` components.`}
+    </p>
+    <Example {...{"code":"import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';\n\nconst DragDropCodeSample: React.FunctionComponent = () => (\n  <DragDrop>\n    {' '}\n    {/* DragDrop houses the context for dragging and dropping */}\n    <Droppable>\n      <Draggable>You can put anything here! It will be wrapped in a styled div.</Draggable>\n      <Draggable>You can have as many Draggables as you like.</Draggable>\n    </Droppable>\n    <Droppable>\n      {' '}\n      {/* You can also have many droppables! */}\n      <Draggable />\n    </Droppable>\n  </DragDrop>\n);","lang":"ts","noLive":true,"className":""}}>
+    </Example>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Note: Keyboard accessibility and screen reader accessibility are still in development.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Multiple lists"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDragAndDropReactDeprecatedDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/drag-and-drop/react.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-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 { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
+const pageData = {
+  "id": "Drag and drop",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/drag-and-drop/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md",
+  "relPath": "packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md",
+  "propComponents": [
+    {
+      "name": "DragDropSort",
+      "description": "DragDropSortProps extends dnd-kit's props which may be viewed at https://docs.dndkit.com/api-documentation/context-provider#props.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactElement<any>",
+          "description": "Custom defined content wrapper for draggable items. By default, draggable items are wrapped in a styled div.\nIntended to be a 'DataList' or 'DualListSelectorList' without children."
+        },
+        {
+          "name": "items",
+          "type": "DraggableObject[]",
+          "description": "Sorted array of draggable objects",
+          "required": true
+        },
+        {
+          "name": "onDrag",
+          "type": "(event: DragDropSortDragStartEvent, oldIndex: number) => void",
+          "description": "Callback when use begins dragging a draggable object",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onDrop",
+          "type": "(event: DragDropSortDragEndEvent, items: DraggableObject[], oldIndex?: number, newIndex?: number) => void",
+          "description": "Callback when user drops a draggable object",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "overlayProps",
+          "type": "any",
+          "description": "Additional classes to apply to the drag overlay"
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'DataList' | 'DualListSelectorList'",
+          "description": "The variant determines which component wraps the draggable object.\nDefault variant wraps the draggable object in a div.\nDataList variant wraps the draggable object in a DataListItem\nDualListSelectorList variant wraps the draggable objects in a DualListSelectorListItem and a div.pf-c-dual-list-selector__item-text element",
+          "defaultValue": "'default'"
+        }
+      ]
+    },
+    {
+      "name": "DraggableObject",
+      "description": "",
+      "props": [
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "description": "Content rendered in the draggable object",
+          "required": true
+        },
+        {
+          "name": "id",
+          "type": "string | number",
+          "description": "Unique id of the draggable object",
+          "required": true
+        },
+        {
+          "name": "props",
+          "type": "any",
+          "description": "Props spread to the rendered wrapper of the draggable object"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-drag-drop"
+  ],
+  "hideNavItem": true,
+  "examples": [
+    "Basic drag and drop sorting",
+    "Multiple drop zones"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  RhMicronsDoubleCaretLeftIcon,
+  AngleLeftIcon,
+  AngleDoubleRightIcon,
+  AngleRightIcon,
+  DragDropSort,
+  DragDropContainer,
+  NewDroppable
+};
+pageData.examples = {
+  'Basic drag and drop sorting': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';\n\nexport const BasicSorting: React.FunctionComponent = () => {\n  const [items, setItems] = useState<DraggableObject[]>([\n    { id: 'basic-1', content: 'one' },\n    { id: 'basic-2', content: 'two' },\n    { id: 'basic-3', content: 'three' }\n  ]);\n\n  return (\n    <DragDropSort\n      items={items}\n      onDrop={(_, newItems) => {\n        setItems(newItems);\n      }}\n    />\n  );\n};\n","title":"Basic drag and drop sorting","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Multiple drop zones': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Droppable as NewDroppable,\n  DraggableObject,\n  DragDropContainer,\n  DragDropContainerDragOverEvent,\n  DragDropContainerDragEndEvent,\n  DragDropContainerDragCancelEvent\n} from '@patternfly/react-drag-drop';\n\nexport const DragDropContainerBasic: React.FunctionComponent = () => {\n  const [allItems, setAllItems] = useState<Record<string, DraggableObject[]>>({\n    container1: [\n      { id: 'button-1', content: 'one' },\n      { id: 'button-2', content: 'two' },\n      { id: 'button-3', content: 'three' }\n    ],\n    container2: [\n      { id: 'button-4', content: 'four' },\n      { id: 'button-5', content: 'five' },\n      { id: 'button-6', content: 'six' }\n    ]\n  });\n\n  return (\n    <DragDropContainer\n      items={allItems}\n      onDrop={(_event: DragDropContainerDragEndEvent, newItems: Record<string, DraggableObject[]>) => {\n        setAllItems(newItems);\n      }}\n      onContainerMove={(_event: DragDropContainerDragOverEvent, newItems: Record<string, DraggableObject[]>) => {\n        setAllItems(newItems);\n      }}\n      onCancel={(_event: DragDropContainerDragCancelEvent, prevItems: Record<string, DraggableObject[]>) => {\n        setAllItems(prevItems);\n      }}\n    >\n      <h1>group 1</h1>\n      <NewDroppable items={allItems.container1} id=\"container1\" />\n      <br />\n      <h1>group 2</h1>\n      <NewDroppable items={allItems.container2} id=\"container2\" />\n    </DragDropContainer>\n  );\n};\n","title":"Multiple drop zones","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Note: This drag and drop implementation lives in its own package at `}
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-drag-drop","className":""}}>
+        {`@patternfly/react-drag-drop`}
+      </PatternflyThemeLink>
+      {`!`}
+    </p>
+    <AutoLinkHeader {...{"id":"sorting-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Sorting examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic drag and drop sorting"])}
+    {React.createElement(pageData.examples["Multiple drop zones"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsDragAndDropReactDocs';
+Component.pageData = pageData;
+
+export default Component;