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

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

@@ -1,184 +0,0 @@
-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

@@ -1,137 +0,0 @@
-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;