drag and drop changes

mfrances17 · mfrances17 · commit ec2125d48869 · 2025-03-05T19:46:03.000-05:00
diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md b/packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
@@ -15,7 +15,7 @@ propComponents:
   ]
 ---
 
-import { Fragment, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 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';
diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line
 import React from 'react';
 import { Content } from '@patternfly/react-core/dist/esm/components/Content';
 import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';
diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js
@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line
 import React from 'react';
 import { PageSection } from '@patternfly/react-core/dist/esm/components/Page/PageSection';
 import { Title } from '@patternfly/react-core/dist/esm/components/Title';
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx b/packages/react-drag-drop/src/components/DragDrop/DragButton.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import dragButtonStyles from '@patternfly/react-styles/css/components/DataList/data-list';
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import * as ReactDOM from 'react-dom';
 import { css } from '@patternfly/react-styles';
 import {
@@ -79,17 +79,17 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
   overlayProps,
   ...props
 }: DragDropContainerProps) => {
-  const itemsCopy = React.useRef<Record<string, DraggableObject[]> | null>(null);
-  const hasRecentlyMovedContainer = React.useRef(false);
-  const [activeId, setActiveId] = React.useState<UniqueIdentifier>(null);
-  const lastOverId = React.useRef<UniqueIdentifier | null>(null);
+  const itemsCopy = useRef<Record<string, DraggableObject[]> | null>(null);
+  const hasRecentlyMovedContainer = useRef(false);
+  const [activeId, setActiveId] = useState<UniqueIdentifier>(null);
+  const lastOverId = useRef<UniqueIdentifier | null>(null);
 
-  const findItem = React.useCallback(
+  const findItem = useCallback(
     (id: UniqueIdentifier, containerId: UniqueIdentifier) => items[containerId].find((item) => item.id === id),
     [items]
   );
 
-  const findContainer = React.useCallback(
+  const findContainer = useCallback(
     (id: UniqueIdentifier) => {
       if (id in items) {
         return id;
@@ -106,7 +106,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
     })
   );
 
-  const collisionDetectionStrategy: CollisionDetection = React.useCallback(
+  const collisionDetectionStrategy: CollisionDetection = useCallback(
     (args) => {
       if (activeId && activeId in items) {
         return closestCenter({
@@ -146,7 +146,7 @@ export const DragDropContainer: React.FunctionComponent<DragDropContainerProps>
     [activeId, items]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     requestAnimationFrame(() => {
       hasRecentlyMovedContainer.current = false;
     });
diff --git a/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx b/packages/react-drag-drop/src/components/DragDrop/DragDropSort.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { DndContextProps, DragEndEvent, DragStartEvent } from '@dnd-kit/core';
 import { Droppable } from './Droppable';
 import { DragDropContainer, DraggableObject } from './DragDropContainer';
@@ -38,7 +38,7 @@ export const DragDropSort: React.FunctionComponent<DragDropSortProps> = ({
   overlayProps,
   ...props
 }: DragDropSortProps) => {
-  const itemIds = React.useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
+  const itemIds = useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
 
   const handleDragStart = (event: DragStartEvent) => {
     onDrag(event, itemIds.indexOf(event.active.id as string));
diff --git a/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx b/packages/react-drag-drop/src/components/DragDrop/Draggable.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { css } from '@patternfly/react-styles';
diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDataListItem.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { css } from '@patternfly/react-styles';
diff --git a/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx b/packages/react-drag-drop/src/components/DragDrop/DraggableDualListSelectorListItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { css } from '@patternfly/react-styles';
@@ -42,7 +42,7 @@ export const DraggableDualListSelectorListItem: React.FunctionComponent<Draggabl
     animateLayoutChanges: () => false
   });
 
-  const { setFocusedOption } = React.useContext(DualListSelectorListContext);
+  const { setFocusedOption } = useContext(DualListSelectorListContext);
 
   const style = {
     transform: CSS.Transform.toString(transform),
diff --git a/packages/react-drag-drop/src/components/DragDrop/Droppable.tsx b/packages/react-drag-drop/src/components/DragDrop/Droppable.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { cloneElement, useMemo } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { DraggableObject } from './DragDropContainer';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -17,7 +17,7 @@ interface DroppableProps extends React.HTMLProps<HTMLDivElement> {
   wrapper?: React.ReactElement<any>;
   /** The variant determines which component wraps the draggable object.
    * Default variant wraps the draggable object in a div.
-   * DataList vairant wraps the draggable object in a DataListItem
+   * DataList variant wraps the draggable object in a DataListItem
    * DualListSelectorList variant wraps the draggable objects in a DualListSelectorListItem and a div.pf-c-dual-list-selector__item-text element
    * TableComposable variant wraps the draggable objects in TODO
    * */
@@ -31,7 +31,7 @@ export const Droppable: React.FunctionComponent<DroppableProps> = ({
   wrapper,
   ...props
 }: DroppableProps) => {
-  const itemIds = React.useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
+  const itemIds = useMemo(() => (items ? Array.from(items, (item) => item.id as string) : []), [items]);
   const { setNodeRef } = useDroppable({ id: id ? id : 'droppable' });
 
   const content = items.map((item: DraggableObject) => {
@@ -60,7 +60,7 @@ export const Droppable: React.FunctionComponent<DroppableProps> = ({
   return (
     <SortableContext items={itemIds} strategy={verticalListSortingStrategy} id={id}>
       {wrapper &&
-        React.cloneElement(wrapper, {
+        cloneElement(wrapper, {
           children: content,
           ref: setNodeRef,
           ...props
diff --git a/packages/react-drag-drop/src/components/DragDrop/__tests__/DragDrop.test.tsx b/packages/react-drag-drop/src/components/DragDrop/__tests__/DragDrop.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { DragDropSort } from '../';
 
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/BasicSorting.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';
 
 export const BasicSorting: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<DraggableObject[]>([
+  const [items, setItems] = useState<DraggableObject[]>([
     { id: 'basic-1', content: 'one' },
     { id: 'basic-2', content: 'two' },
     { id: 'basic-3', content: 'three' }
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { DataList, DataListCell, DataListCheck, DataListControl, DataListItemCells } from '@patternfly/react-core';
 import { DragDropSort, DraggableObject } from '@patternfly/react-drag-drop';
 
@@ -22,7 +22,7 @@ const getItems = (count: number): DraggableObject[] =>
   }));
 
 export const DataListDraggable: React.FunctionComponent = (props) => {
-  const [items, setItems] = React.useState<DraggableObject[]>(getItems(10));
+  const [items, setItems] = useState<DraggableObject[]>(getItems(10));
 
   return (
     <DragDropSort
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md b/packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
@@ -8,6 +8,7 @@ hideNavItem: true
 
 Note: This drag and drop implementation lives in its own package at [@patternfly/react-drag-drop](https://www.npmjs.com/package/@patternfly/react-drag-drop)!
 
+import { useState } from 'react';
 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';
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerBasic.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerBasic.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   Droppable as NewDroppable,
   DraggableObject,
@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-drag-drop';
 
 export const DragDropContainerBasic: React.FunctionComponent = () => {
-  const [allItems, setAllItems] = React.useState<Record<string, DraggableObject[]>>({
+  const [allItems, setAllItems] = useState<Record<string, DraggableObject[]>>({
     container1: [
       { id: 'button-1', content: 'one' },
       { id: 'button-2', content: 'two' },
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   DataList,
   DataListCell,
@@ -35,7 +35,7 @@ const getItems = (from: number, count: number): DraggableObject[] =>
   }));
 
 export const DataListDraggable: React.FunctionComponent = (props) => {
-  const [items, setItems] = React.useState<Record<string, DraggableObject[]>>({
+  const [items, setItems] = useState<Record<string, DraggableObject[]>>({
     group1: getItems(0, 5),
     group2: getItems(5, 5)
   });
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import {
   DualListSelector,
   DualListSelectorPane,
@@ -14,21 +14,21 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 export const DragDropContainerDualListSelector: React.FunctionComponent = () => {
-  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
-  const [availableOptions, setAvailableOptions] = React.useState<DraggableObject[]>([
+  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);
+  const [availableOptions, setAvailableOptions] = useState<DraggableObject[]>([
     { id: 'Apple', content: 'Apple', props: { key: 'Apple', isSelected: false } },
     { id: 'Banana', content: 'Banana', props: { key: 'Banana', isSelected: false } },
     { id: 'Pineapple', content: 'Pineapple', props: { key: 'Pineapple', isSelected: false } }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<DraggableObject[]>([
+  const [chosenOptions, setChosenOptions] = useState<DraggableObject[]>([
     { id: 'Orange', content: 'Orange', props: { key: 'Orange', isSelected: false } },
     { id: 'Grape', content: 'Grape', props: { key: 'Grape', isSelected: false } },
     { id: 'Peach', content: 'Peach', props: { key: 'Peach', isSelected: false } },
     { id: 'Strawberry', content: 'Strawberry', props: { key: 'Strawberry', isSelected: false } }
   ]);
 
-  const [allDraggableItems, setAllItems] = React.useState<Record<string, DraggableObject[]>>({
+  const [allDraggableItems, setAllItems] = useState<Record<string, DraggableObject[]>>({
     available: availableOptions.map((option, index) => ({
       ...option,
       props: {
@@ -53,7 +53,7 @@ export const DragDropContainerDualListSelector: React.FunctionComponent = () =>
     setAllItems(items);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     setAllItems({
       available: availableOptions.map((option, index) => ({
         ...option,
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md b/packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md
@@ -7,6 +7,7 @@ propComponents: ['DragDropSort', 'DraggableObject']
 
 Note: This drag and drop implementation lives in its own package at [@patternfly/react-drag-drop](https://www.npmjs.com/package/@patternfly/react-drag-drop)!
 
+import { useEffect, useState } from 'react';
 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';
diff --git a/packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx b/packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import {
   DualListSelector,
   DualListSelectorPane,
@@ -15,14 +15,14 @@ import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-d
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 export const ComposableDualListSelector: React.FunctionComponent = () => {
-  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = React.useState(false);
-  const [availableOptions, setAvailableOptions] = React.useState<DraggableObject[]>([
+  const [ignoreNextOptionSelect, setIgnoreNextOptionSelect] = useState(false);
+  const [availableOptions, setAvailableOptions] = useState<DraggableObject[]>([
     { id: 'Apple', content: 'Apple', props: { key: 'Apple', isSelected: false } },
     { id: 'Banana', content: 'Banana', props: { key: 'Banana', isSelected: false } },
     { id: 'Pineapple', content: 'Pineapple', props: { key: 'Pineapple', isSelected: false } }
   ]);
 
-  const [chosenOptions, setChosenOptions] = React.useState<DraggableObject[]>([
+  const [chosenOptions, setChosenOptions] = useState<DraggableObject[]>([
     { id: 'Orange', content: 'Orange', props: { key: 'Orange', isSelected: false } },
     { id: 'Grape', content: 'Grape', props: { key: 'Grape', isSelected: false } },
     { id: 'Peach', content: 'Peach', props: { key: 'Peach', isSelected: false } },

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ propComponents:`
`15`	`15`	`]`
`16`	`16`	`---`
`17`	`17`
`18`		`-import { Fragment, useMemo, useState } from 'react';`
	`18`	`+import { Fragment, useEffect, useMemo, useState } from 'react';`
`19`	`19`	`import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';`
`20`	`20`	`import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';`
`21`	`21`	`import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// eslint-disable-next-line @typescript-eslint/no-unused-vars`
	`1`	`+// eslint-disable-next-line`
`2`	`2`	`import React from 'react';`
`3`	`3`	`import { Content } from '@patternfly/react-core/dist/esm/components/Content';`
`4`	`4`	`import { Grid, GridItem } from '@patternfly/react-core/dist/esm/layouts/Grid';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as React from 'react';`
`2`	`1`	`import { css } from '@patternfly/react-styles';`
`3`	`2`	`import { Button } from '@patternfly/react-core/dist/esm/components/Button';`
`4`	`3`	`import dragButtonStyles from '@patternfly/react-styles/css/components/DataList/data-list';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import * as React from 'react';`
`2`	`1`	`import { useSortable } from '@dnd-kit/sortable';`
`3`	`2`	`import { CSS } from '@dnd-kit/utilities';`
`4`	`3`	`import { css } from '@patternfly/react-styles';`