@elliemae/ds-drag-and-drop 3.70.0-next.6 → 3.70.0-next.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js +10 -3
- package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js.map +2 -2
- package/dist/cjs/parts/DSSortableContainer/DSSortableContainer.js +9 -2
- package/dist/cjs/parts/DSSortableContainer/DSSortableContainer.js.map +2 -2
- package/dist/cjs/parts/DSSortableContainer/config/SortableContainerContext.js.map +2 -2
- package/dist/cjs/tree/types.js.map +1 -1
- package/dist/cjs/tree/useMultiTreeDndkitConfig.js +31 -6
- package/dist/cjs/tree/useMultiTreeDndkitConfig.js.map +2 -2
- package/dist/cjs/tree/useTreeActionHandlers.js +9 -13
- package/dist/cjs/tree/useTreeActionHandlers.js.map +2 -2
- package/dist/cjs/tree/useTreeAnnouncements.js +113 -33
- package/dist/cjs/tree/useTreeAnnouncements.js.map +2 -2
- package/dist/cjs/tree/utilities.js +39 -1
- package/dist/cjs/tree/utilities.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js +10 -3
- package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js.map +2 -2
- package/dist/esm/parts/DSSortableContainer/DSSortableContainer.js +10 -3
- package/dist/esm/parts/DSSortableContainer/DSSortableContainer.js.map +2 -2
- package/dist/esm/parts/DSSortableContainer/config/SortableContainerContext.js.map +2 -2
- package/dist/esm/tree/useMultiTreeDndkitConfig.js +32 -7
- package/dist/esm/tree/useMultiTreeDndkitConfig.js.map +2 -2
- package/dist/esm/tree/useTreeActionHandlers.js +9 -13
- package/dist/esm/tree/useTreeActionHandlers.js.map +2 -2
- package/dist/esm/tree/useTreeAnnouncements.js +114 -34
- package/dist/esm/tree/useTreeAnnouncements.js.map +2 -2
- package/dist/esm/tree/utilities.js +39 -1
- package/dist/esm/tree/utilities.js.map +2 -2
- package/dist/types/parts/DSDragAndDrop/DSDragAndDrop.d.ts +2 -1
- package/dist/types/parts/DSDropIndicator/DropIndicator.d.ts +1 -1
- package/dist/types/parts/DSSortableContainer/DSSortableContainer.d.ts +2 -1
- package/dist/types/parts/DSSortableContainer/config/SortableContainerContext.d.ts +2 -0
- package/dist/types/parts/DSSortableItem/DSSortableItem.d.ts +2 -1
- package/dist/types/tree/types.d.ts +1 -0
- package/dist/types/tree/useMultiTreeDndkitConfig.d.ts +2 -0
- package/dist/types/tree/useTreeAnnouncements.d.ts +40 -1
- package/dist/types/tree/utilities.d.ts +23 -0
- package/package.json +10 -10
package/dist/cjs/package.json
CHANGED
|
@@ -79,7 +79,7 @@ const DSDragAndDrop = ({
|
|
|
79
79
|
),
|
|
80
80
|
[items]
|
|
81
81
|
);
|
|
82
|
-
const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = (0, import_tree.useMultiTreeDndkitConfig)({
|
|
82
|
+
const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, containerNodesRef } = (0, import_tree.useMultiTreeDndkitConfig)({
|
|
83
83
|
flattenedItems: itemsFlattened,
|
|
84
84
|
isHorizontalDnD: false,
|
|
85
85
|
isExpandable: true,
|
|
@@ -89,8 +89,15 @@ const DSDragAndDrop = ({
|
|
|
89
89
|
...rest
|
|
90
90
|
});
|
|
91
91
|
const ctx = (0, import_react.useMemo)(
|
|
92
|
-
() => ({
|
|
93
|
-
|
|
92
|
+
() => ({
|
|
93
|
+
sortableContextProps,
|
|
94
|
+
dropIndicatorPosition,
|
|
95
|
+
isDropValid,
|
|
96
|
+
items: itemsFlattened,
|
|
97
|
+
onCollapse,
|
|
98
|
+
containerNodes: containerNodesRef
|
|
99
|
+
}),
|
|
100
|
+
[dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps, containerNodesRef]
|
|
94
101
|
);
|
|
95
102
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.DndContext, { ...dndContextProps, children: [
|
|
96
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableContainerContext.ContainersContext.Provider, { value: ctx, children }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSDragAndDrop/DSDragAndDrop.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-plusplus */\n/* eslint-disable max-params */\nimport React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { type UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DragOverlay, DndContext } from '@dnd-kit/core';\nimport { useMultiTreeDndkitConfig } from '../../tree/index.js';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSDragAndDropT, Item } from './react-desc-prop-types.js';\nimport { DSDragAndDropPropTypes } from './react-desc-prop-types.js';\n\nconst flatten = <T,>(\n items: Item<T>[],\n parentId: UniqueIdentifier | null = null,\n depth = 0,\n container = 'root',\n iteration = { count: 0 },\n) =>\n items.reduce((acc, item, index) => {\n acc.push({\n ...item,\n uid: item.dsId,\n childrenCount: item?.subitems?.length || 0,\n original: item,\n realIndex: iteration.count,\n parentId,\n depth,\n index,\n container,\n });\n if (item.subitems?.length > 0 && item.collapsed === false) {\n acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));\n }\n iteration.count++;\n\n return acc;\n }, [] as Item<T>[]);\n\nexport const DSDragAndDrop = <T,>({\n items,\n children,\n onReorder,\n onCollapse,\n DragOverlayRenderer,\n maxDragAndDropLevel = 0,\n ...rest\n}: DSDragAndDropT.Props<T>) => {\n const itemsFlattened = useMemo(\n () =>\n Object.keys(items).reduce(\n (acc, container) => {\n acc[container] = flatten(items[container] as Item<T>[], null, 0, container);\n return acc;\n },\n {} as Record<string, Item<T>[]>,\n ),\n [items],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } =\n useMultiTreeDndkitConfig({\n flattenedItems: itemsFlattened,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: () => true,\n ...rest,\n });\n\n const ctx = useMemo(\n () => ({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-plusplus */\n/* eslint-disable max-params */\nimport React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { type UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DragOverlay, DndContext } from '@dnd-kit/core';\nimport { useMultiTreeDndkitConfig } from '../../tree/index.js';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSDragAndDropT, Item } from './react-desc-prop-types.js';\nimport { DSDragAndDropPropTypes } from './react-desc-prop-types.js';\n\nconst flatten = <T,>(\n items: Item<T>[],\n parentId: UniqueIdentifier | null = null,\n depth = 0,\n container = 'root',\n iteration = { count: 0 },\n) =>\n items.reduce((acc, item, index) => {\n acc.push({\n ...item,\n uid: item.dsId,\n childrenCount: item?.subitems?.length || 0,\n original: item,\n realIndex: iteration.count,\n parentId,\n depth,\n index,\n container,\n });\n if (item.subitems?.length > 0 && item.collapsed === false) {\n acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));\n }\n iteration.count++;\n\n return acc;\n }, [] as Item<T>[]);\n\nexport const DSDragAndDrop = <T,>({\n items,\n children,\n onReorder,\n onCollapse,\n DragOverlayRenderer,\n maxDragAndDropLevel = 0,\n ...rest\n}: DSDragAndDropT.Props<T>) => {\n const itemsFlattened = useMemo(\n () =>\n Object.keys(items).reduce(\n (acc, container) => {\n acc[container] = flatten(items[container] as Item<T>[], null, 0, container);\n return acc;\n },\n {} as Record<string, Item<T>[]>,\n ),\n [items],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, containerNodesRef } =\n useMultiTreeDndkitConfig({\n flattenedItems: itemsFlattened,\n isHorizontalDnD: false,\n isExpandable: true,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: () => true,\n ...rest,\n });\n\n const ctx = useMemo(\n () => ({\n sortableContextProps,\n dropIndicatorPosition,\n isDropValid,\n items: itemsFlattened,\n onCollapse,\n containerNodes: containerNodesRef,\n }),\n [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps, containerNodesRef],\n );\n\n return (\n <DndContext {...dndContextProps}>\n <ContainersContext.Provider value={ctx}>{children}</ContainersContext.Provider>\n {createPortal(\n <DragOverlay style={{ width: 'auto', zIndex: 1001 }} modifiers={[restrictToWindowEdges]}>\n {active ? <DragOverlayRenderer activeItem={active} /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n};\n\nconst DSDragAndDropWithSchema = describe(DSDragAndDrop);\n\nDSDragAndDropWithSchema.propTypes = DSDragAndDropPropTypes;\n\nexport { DSDragAndDropWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqFnB;AAnFJ,mBAA+B;AAC/B,uBAA6B;AAE7B,uBAAsC;AACtC,8BAAyB;AACzB,kBAAwC;AACxC,kBAAyC;AACzC,sCAAkC;AAElC,mCAAuC;AAEvC,MAAM,UAAU,CACd,OACA,WAAoC,MACpC,QAAQ,GACR,YAAY,QACZ,YAAY,EAAE,OAAO,EAAE,MAEvB,MAAM,OAAO,CAAC,KAAK,MAAM,UAAU;AACjC,MAAI,KAAK;AAAA,IACP,GAAG;AAAA,IACH,KAAK,KAAK;AAAA,IACV,eAAe,MAAM,UAAU,UAAU;AAAA,IACzC,UAAU;AAAA,IACV,WAAW,UAAU;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,KAAK,UAAU,SAAS,KAAK,KAAK,cAAc,OAAO;AACzD,QAAI,KAAK,GAAG,QAAQ,KAAK,UAAU,KAAK,MAAM,QAAQ,GAAG,WAAW,SAAS,CAAC;AAAA,EAChF;AACA,YAAU;AAEV,SAAO;AACT,GAAG,CAAC,CAAc;AAEb,MAAM,gBAAgB,CAAK;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,GAAG;AACL,MAA+B;AAC7B,QAAM,qBAAiB;AAAA,IACrB,MACE,OAAO,KAAK,KAAK,EAAE;AAAA,MACjB,CAAC,KAAK,cAAc;AAClB,YAAI,SAAS,IAAI,QAAQ,MAAM,SAAS,GAAgB,MAAM,GAAG,SAAS;AAC1E,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,aAAa,kBAAkB,QAC3G,sCAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM;AAAA,IACtB,GAAG;AAAA,EACL,CAAC;AAEH,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,gBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,sBAAsB,iBAAiB;AAAA,EAC1G;AAEA,SACE,6CAAC,0BAAY,GAAG,iBACd;AAAA,gDAAC,kDAAkB,UAAlB,EAA2B,OAAO,KAAM,UAAS;AAAA,QACjD;AAAA,MACC,4CAAC,2BAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,sCAAqB,GACnF,mBAAS,4CAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,8BAA0B,kCAAS,aAAa;AAEtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -66,8 +66,15 @@ const DSSortableContainer = (props) => {
|
|
|
66
66
|
id: containerId
|
|
67
67
|
});
|
|
68
68
|
const ctx = (0, import_react.useContext)(import_SortableContainerContext.ContainersContext);
|
|
69
|
-
const { sortableContextProps, items } = ctx;
|
|
69
|
+
const { sortableContextProps, items, containerNodes } = ctx;
|
|
70
70
|
const containerSortableContextProps = sortableContextProps[containerId];
|
|
71
|
+
const registerNodeRef = (0, import_react.useCallback)(
|
|
72
|
+
(node) => {
|
|
73
|
+
setNodeRef(node);
|
|
74
|
+
if (containerNodes) containerNodes.current[containerId] = node;
|
|
75
|
+
},
|
|
76
|
+
[setNodeRef, containerNodes, containerId]
|
|
77
|
+
);
|
|
71
78
|
const render = (0, import_react.useMemo)(() => {
|
|
72
79
|
if (children) {
|
|
73
80
|
return children;
|
|
@@ -89,7 +96,7 @@ const DSSortableContainer = (props) => {
|
|
|
89
96
|
}
|
|
90
97
|
return null;
|
|
91
98
|
}, [ItemRenderer, children, containerId, extraItemProps, items]);
|
|
92
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { ...containerSortableContextProps, id: "container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef:
|
|
99
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { ...containerSortableContextProps, id: "container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: registerNodeRef, isOver, children: render }) });
|
|
93
100
|
};
|
|
94
101
|
const DSSortableContainerSchema = (0, import_ds_props_helpers.describe)(DSSortableContainer);
|
|
95
102
|
DSSortableContainerSchema.propTypes = import_react_desc_prop_types.DSSortalContainerPropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSSortableContainer/DSSortableContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { DSSortableItem } from '../DSSortableItem/index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nimport { ContainersContext } from './config/SortableContainerContext.js';\nimport type { Item } from '../DSDragAndDrop/index.js';\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n const { index, extraItemProps } = props;\n if (!extraItemProps) {\n return null;\n }\n const { items, ItemRenderer, ...rest } = extraItemProps;\n const item = items[index];\n return (\n <DSSortableItem\n item={item}\n ItemRenderer={\n ItemRenderer as React.ComponentType<\n ItemRendererPropsT<\n T,\n { items: Item<T>[]; extraItemProps: K; ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>> }\n >\n >\n }\n {...rest}\n extraItemProps={extraItemProps}\n />\n );\n};\n\nconst ContainerItemRendererMemoized = React.memo(ContainerItemRenderer);\n\nexport const DSSortableContainer = <T, K>(props: DSSortableContainerT.Props<T, K>) => {\n const { containerId, ItemRenderer, Component, extraItemProps, children } = props;\n const { setNodeRef, isOver } = useDroppable({\n id: containerId,\n });\n const ctx = useContext(ContainersContext);\n const { sortableContextProps, items } = ctx;\n const containerSortableContextProps = sortableContextProps[containerId];\n\n const render = useMemo(() => {\n if (children) {\n return children;\n }\n if (ItemRenderer) {\n return (\n <DSFastList\n count={items[containerId].length}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n ItemRenderer={ContainerItemRendererMemoized as any}\n extraItemProps={{\n items: items[containerId],\n ItemRenderer: ItemRenderer as React.ComponentType<ItemRendererPropsT<unknown, unknown>>,\n extraItemProps,\n }}\n getId={(index: number | string) => items[containerId][index as number].dsId}\n />\n );\n }\n return null;\n }, [ItemRenderer, children, containerId, extraItemProps, items]);\n\n return (\n <SortableContext {...containerSortableContextProps} id=\"container\">\n <Component innerRef={
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAnBJ,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { DSSortableItem } from '../DSSortableItem/index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nimport { ContainersContext } from './config/SortableContainerContext.js';\nimport type { Item } from '../DSDragAndDrop/index.js';\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n const { index, extraItemProps } = props;\n if (!extraItemProps) {\n return null;\n }\n const { items, ItemRenderer, ...rest } = extraItemProps;\n const item = items[index];\n return (\n <DSSortableItem\n item={item}\n ItemRenderer={\n ItemRenderer as React.ComponentType<\n ItemRendererPropsT<\n T,\n { items: Item<T>[]; extraItemProps: K; ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>> }\n >\n >\n }\n {...rest}\n extraItemProps={extraItemProps}\n />\n );\n};\n\nconst ContainerItemRendererMemoized = React.memo(ContainerItemRenderer);\n\nexport const DSSortableContainer = <T, K>(props: DSSortableContainerT.Props<T, K>) => {\n const { containerId, ItemRenderer, Component, extraItemProps, children } = props;\n const { setNodeRef, isOver } = useDroppable({\n id: containerId,\n });\n const ctx = useContext(ContainersContext);\n const { sortableContextProps, items, containerNodes } = ctx;\n const containerSortableContextProps = sortableContextProps[containerId];\n\n // Register the container's DOM node so screen-reader announcements can resolve its accessible\n // name (aria-label / aria-labelledby) when the item is moved into this container.\n const registerNodeRef = useCallback(\n (node: HTMLElement | null) => {\n setNodeRef(node);\n if (containerNodes) containerNodes.current[containerId] = node;\n },\n [setNodeRef, containerNodes, containerId],\n );\n\n const render = useMemo(() => {\n if (children) {\n return children;\n }\n if (ItemRenderer) {\n return (\n <DSFastList\n count={items[containerId].length}\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n ItemRenderer={ContainerItemRendererMemoized as any}\n extraItemProps={{\n items: items[containerId],\n ItemRenderer: ItemRenderer as React.ComponentType<ItemRendererPropsT<unknown, unknown>>,\n extraItemProps,\n }}\n getId={(index: number | string) => items[containerId][index as number].dsId}\n />\n );\n }\n return null;\n }, [ItemRenderer, children, containerId, extraItemProps, items]);\n\n return (\n <SortableContext {...containerSortableContextProps} id=\"container\">\n <Component innerRef={registerNodeRef} isOver={isOver}>\n {render}\n </Component>\n </SortableContext>\n );\n};\n\nconst DSSortableContainerSchema = describe(DSSortableContainer);\nDSSortableContainerSchema.propTypes = DSSortalContainerPropTypes;\n\nexport { DSSortableContainerSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAnBJ,mBAAwD;AACxD,0BAA2B;AAC3B,8BAAyB;AACzB,kBAA6B;AAC7B,sBAAgC;AAChC,4BAA+B;AAE/B,mCAA2C;AAE3C,sCAAkC;AAElC,MAAM,wBAAwB,CAAO,UAA6D;AAChG,QAAM,EAAE,OAAO,eAAe,IAAI;AAClC,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AACA,QAAM,EAAE,OAAO,cAAc,GAAG,KAAK,IAAI;AACzC,QAAM,OAAO,MAAM,KAAK;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAQC,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,gCAAgC,aAAAA,QAAM,KAAK,qBAAqB;AAE/D,MAAM,sBAAsB,CAAO,UAA4C;AACpF,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,IAAI;AAC3E,QAAM,EAAE,YAAY,OAAO,QAAI,0BAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,UAAM,yBAAW,iDAAiB;AACxC,QAAM,EAAE,sBAAsB,OAAO,eAAe,IAAI;AACxD,QAAM,gCAAgC,qBAAqB,WAAW;AAItE,QAAM,sBAAkB;AAAA,IACtB,CAAC,SAA6B;AAC5B,iBAAW,IAAI;AACf,UAAI,eAAgB,gBAAe,QAAQ,WAAW,IAAI;AAAA,IAC5D;AAAA,IACA,CAAC,YAAY,gBAAgB,WAAW;AAAA,EAC1C;AAEA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,cAAc;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,WAAW,EAAE;AAAA,UAE1B,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd,OAAO,MAAM,WAAW;AAAA,YACxB;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO,CAAC,UAA2B,MAAM,WAAW,EAAE,KAAe,EAAE;AAAA;AAAA,MACzE;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,UAAU,aAAa,gBAAgB,KAAK,CAAC;AAE/D,SACE,4CAAC,mCAAiB,GAAG,+BAA+B,IAAG,aACrD,sDAAC,aAAU,UAAU,iBAAiB,QACnC,kBACH,GACF;AAEJ;AAEA,MAAM,gCAA4B,kCAAS,mBAAmB;AAC9D,0BAA0B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/parts/DSSortableContainer/config/SortableContainerContext.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { createContext } from 'react';\nimport type { DnDKitTree } from '../../../tree/types.js';\nimport type { DSSortableContainerT } from '../react-desc-prop-types.js';\n\ninterface ContainerContextT<T> {\n isDropValid?: boolean;\n dropIndicatorPosition?: string;\n sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;\n items: Record<string, DSSortableContainerT.Item<T>[]>;\n onCollapse?: (nodeId: string) => void;\n}\n\nexport function createContainerContext<T>() {\n return createContext<ContainerContextT<T>>({\n sortableContextProps: {},\n items: {},\n });\n}\n\nexport const ContainersContext = createContainerContext();\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { createContext, type MutableRefObject } from 'react';\nimport type { DnDKitTree } from '../../../tree/types.js';\nimport type { DSSortableContainerT } from '../react-desc-prop-types.js';\n\ninterface ContainerContextT<T> {\n isDropValid?: boolean;\n dropIndicatorPosition?: string;\n sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;\n items: Record<string, DSSortableContainerT.Item<T>[]>;\n onCollapse?: (nodeId: string) => void;\n containerNodes?: MutableRefObject<Record<string, HTMLElement | null>>;\n}\n\nexport function createContainerContext<T>() {\n return createContext<ContainerContextT<T>>({\n sortableContextProps: {},\n items: {},\n });\n}\n\nexport const ContainersContext = createContainerContext();\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AAa9C,SAAS,yBAA4B;AAC1C,aAAO,4BAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,oBAAoB,uBAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {\n Active,\n Announcements,\n CollisionDetection,\n DragCancelEvent,\n DragEndEvent,\n DragMoveEvent,\n DragOverEvent,\n DragStartEvent,\n DroppableContainers,\n MeasuringConfiguration,\n Modifier,\n Over,\n ClientRect,\n UniqueIdentifier,\n SensorDescriptor,\n SensorOptions,\n} from '@dnd-kit/core';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport type { RectMap } from '@dnd-kit/core/dist/store';\nimport type { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { Dispatch, SetStateAction, MutableRefObject } from 'react';\nimport type { DropIndicatorPosition } from './constants.js';\n\nexport namespace DnDKitTree {\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type Item<T> = {\n uid: UniqueIdentifier;\n depth: number;\n parentId: UniqueIdentifier | null;\n realIndex: number;\n childrenCount: number;\n original: T;\n container?: string;\n subitems: Item<T>[];\n index: number;\n collapsed?: boolean;\n };\n\n export type DragEventData = {\n dropIndicatorPosition: DropIndicatorPositionValues;\n };\n\n type OnDragStart = (e: DragStartEvent) => void;\n type OnDragMove = (e: DragMoveEvent) => void;\n type OnDragOver = (e: DragOverEvent) => void;\n type OnDragEnd = (e: DragEndEvent) => void;\n type OnDragCancel = (e: DragCancelEvent) => void;\n\n export type GetIsDropValid<T> = (\n active: Item<T>,\n over: Item<T>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n\n export type OnReorder<T> = (\n active: Item<T>,\n targetIndex: number,\n metadata: {\n over: Item<T>;\n fromIndex: number;\n considerExpanding: UniqueIdentifier | null;\n movedData: Record<string, Item<T>[]>;\n overContainer: UniqueIdentifier;\n projectedMove: {\n depth: number;\n parentId: UniqueIdentifier | null;\n position?: number;\n };\n flattenedItems: Record<string, Item<T>[]>;\n },\n ) => void;\n\n // =============================================================================\n // PREVIEW HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseTreePreviewHandlersArgs = {\n setActive: Dispatch<SetStateAction<Active | null>>;\n setOver: Dispatch<SetStateAction<Over | null>>;\n setDropIndicatorPosition: Dispatch<SetStateAction<DropIndicatorPositionValues>>;\n };\n\n export type UseTreePreviewHandlersReturn = {\n handlePreviewDragStart: OnDragStart;\n handlePreviewDragMove: OnDragMove;\n handlePreviewDragOver: OnDragOver;\n handlePreviewDragEnd: OnDragEnd;\n handlePreviewDragCancel: OnDragCancel;\n };\n\n // =============================================================================\n // ACTION HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseTreeActionHandlersArgs<T> = UseTreePreviewHandlersReturn & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n flattenedItems: Record<string, Item<T>[]>;\n projected: {\n depth: number;\n parentId: UniqueIdentifier | null;\n position?: number;\n } | null;\n onReorder: OnReorder<T>;\n isDropValid: boolean;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n };\n\n export type UseTreeActionHandlersReturn = {\n onDragStart: OnDragStart;\n onDragMove: OnDragMove;\n onDragOver: OnDragOver;\n onDragEnd: OnDragEnd;\n onDragCancel: OnDragCancel;\n };\n\n // =============================================================================\n // DND, SORTABLE AND SENSOR CONTEXT PROPS TYPES\n // =============================================================================\n\n export type DndContextPropsType = {\n accessibility: { announcements: Announcements; container: HTMLElement };\n modifiers: Modifier[];\n sensors: SensorDescriptor<SensorOptions>[];\n measuring: Partial<MeasuringConfiguration>;\n collisionDetection: CollisionDetection;\n } & UseTreeActionHandlersReturn;\n\n export type SortableContextPropsType = {\n items: UniqueIdentifier[];\n strategy: SortingStrategy;\n };\n\n export type SensorContext<T> = MutableRefObject<{\n items: Record<string, Item<T>[]>;\n dropIndicatorPosition: DropIndicatorPositionValues;\n isHorizontalDnD: boolean;\n maxDragAndDropLevel: number;\n active: Active | null;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n }>;\n\n // =============================================================================\n // KEYBOARD GETTER TYPE\n // =============================================================================\n\n export type GetKeyboardCoordinatesArgs<T> = {\n flattenedItems: Record<string, Item<T>[]>;\n active: Active;\n over: Over;\n event: KeyboardEvent;\n currentCoordinates: Coordinates;\n droppableRects: RectMap;\n droppableContainers: DroppableContainers;\n collisionRect: ClientRect;\n dropIndicatorPosition: DropIndicatorPositionValues;\n maxDragAndDropLevel: number;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n };\n\n // =============================================================================\n // TREE DNDKIT HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseMultiTreeConfigArgs<T> = {\n flattenedItems: Record<string, Item<T>[]>;\n onReorder: OnReorder<T>;\n isHorizontalDnD?: boolean;\n isExpandable?: boolean;\n getIsDropValid?: GetIsDropValid<T>;\n maxDragAndDropLevel?: number;\n };\n\n export type UseTreeConfigArgs<T> = {\n flattenedItems: Record<string, Item<T>[]> | Omit<Item<T>, 'container'>[];\n onReorder: OnReorder<T>;\n isHorizontalDnD?: boolean;\n isExpandable?: boolean;\n getIsDropValid?: GetIsDropValid<T>;\n maxDragAndDropLevel?: number;\n };\n\n export type UseTreeConfigReturn<T> = {\n dndContextProps: DndContextPropsType;\n sortableContextProps: Record<string, SortableContextPropsType>;\n active: Active | null;\n activeItem: DnDKitTree.Item<T> | null;\n over: Over | null;\n overItem: DnDKitTree.Item<T> | null;\n dropIndicatorPosition: DropIndicatorPositionValues;\n isDropValid: boolean;\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import type {\n Active,\n Announcements,\n CollisionDetection,\n DragCancelEvent,\n DragEndEvent,\n DragMoveEvent,\n DragOverEvent,\n DragStartEvent,\n DroppableContainers,\n MeasuringConfiguration,\n Modifier,\n Over,\n ClientRect,\n UniqueIdentifier,\n SensorDescriptor,\n SensorOptions,\n} from '@dnd-kit/core';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport type { RectMap } from '@dnd-kit/core/dist/store';\nimport type { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { Dispatch, SetStateAction, MutableRefObject } from 'react';\nimport type { DropIndicatorPosition } from './constants.js';\n\nexport namespace DnDKitTree {\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type Item<T> = {\n uid: UniqueIdentifier;\n depth: number;\n parentId: UniqueIdentifier | null;\n realIndex: number;\n childrenCount: number;\n original: T;\n container?: string;\n subitems: Item<T>[];\n index: number;\n collapsed?: boolean;\n };\n\n export type DragEventData = {\n dropIndicatorPosition: DropIndicatorPositionValues;\n };\n\n type OnDragStart = (e: DragStartEvent) => void;\n type OnDragMove = (e: DragMoveEvent) => void;\n type OnDragOver = (e: DragOverEvent) => void;\n type OnDragEnd = (e: DragEndEvent) => void;\n type OnDragCancel = (e: DragCancelEvent) => void;\n\n export type GetIsDropValid<T> = (\n active: Item<T>,\n over: Item<T>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n\n export type OnReorder<T> = (\n active: Item<T>,\n targetIndex: number,\n metadata: {\n over: Item<T>;\n fromIndex: number;\n considerExpanding: UniqueIdentifier | null;\n movedData: Record<string, Item<T>[]>;\n overContainer: UniqueIdentifier;\n projectedMove: {\n depth: number;\n parentId: UniqueIdentifier | null;\n position?: number;\n };\n flattenedItems: Record<string, Item<T>[]>;\n },\n ) => void;\n\n // =============================================================================\n // PREVIEW HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseTreePreviewHandlersArgs = {\n setActive: Dispatch<SetStateAction<Active | null>>;\n setOver: Dispatch<SetStateAction<Over | null>>;\n setDropIndicatorPosition: Dispatch<SetStateAction<DropIndicatorPositionValues>>;\n };\n\n export type UseTreePreviewHandlersReturn = {\n handlePreviewDragStart: OnDragStart;\n handlePreviewDragMove: OnDragMove;\n handlePreviewDragOver: OnDragOver;\n handlePreviewDragEnd: OnDragEnd;\n handlePreviewDragCancel: OnDragCancel;\n };\n\n // =============================================================================\n // ACTION HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseTreeActionHandlersArgs<T> = UseTreePreviewHandlersReturn & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n flattenedItems: Record<string, Item<T>[]>;\n projected: {\n depth: number;\n parentId: UniqueIdentifier | null;\n position?: number;\n } | null;\n onReorder: OnReorder<T>;\n isDropValid: boolean;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n };\n\n export type UseTreeActionHandlersReturn = {\n onDragStart: OnDragStart;\n onDragMove: OnDragMove;\n onDragOver: OnDragOver;\n onDragEnd: OnDragEnd;\n onDragCancel: OnDragCancel;\n };\n\n // =============================================================================\n // DND, SORTABLE AND SENSOR CONTEXT PROPS TYPES\n // =============================================================================\n\n export type DndContextPropsType = {\n accessibility: { announcements: Announcements; container: HTMLElement };\n modifiers: Modifier[];\n sensors: SensorDescriptor<SensorOptions>[];\n measuring: Partial<MeasuringConfiguration>;\n collisionDetection: CollisionDetection;\n } & UseTreeActionHandlersReturn;\n\n export type SortableContextPropsType = {\n items: UniqueIdentifier[];\n strategy: SortingStrategy;\n };\n\n export type SensorContext<T> = MutableRefObject<{\n items: Record<string, Item<T>[]>;\n dropIndicatorPosition: DropIndicatorPositionValues;\n isHorizontalDnD: boolean;\n maxDragAndDropLevel: number;\n active: Active | null;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n }>;\n\n // =============================================================================\n // KEYBOARD GETTER TYPE\n // =============================================================================\n\n export type GetKeyboardCoordinatesArgs<T> = {\n flattenedItems: Record<string, Item<T>[]>;\n active: Active;\n over: Over;\n event: KeyboardEvent;\n currentCoordinates: Coordinates;\n droppableRects: RectMap;\n droppableContainers: DroppableContainers;\n collisionRect: ClientRect;\n dropIndicatorPosition: DropIndicatorPositionValues;\n maxDragAndDropLevel: number;\n flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n };\n\n // =============================================================================\n // TREE DNDKIT HOOK ARGUMENTS AND RETURN TYPES\n // =============================================================================\n\n export type UseMultiTreeConfigArgs<T> = {\n flattenedItems: Record<string, Item<T>[]>;\n onReorder: OnReorder<T>;\n isHorizontalDnD?: boolean;\n isExpandable?: boolean;\n getIsDropValid?: GetIsDropValid<T>;\n maxDragAndDropLevel?: number;\n };\n\n export type UseTreeConfigArgs<T> = {\n flattenedItems: Record<string, Item<T>[]> | Omit<Item<T>, 'container'>[];\n onReorder: OnReorder<T>;\n isHorizontalDnD?: boolean;\n isExpandable?: boolean;\n getIsDropValid?: GetIsDropValid<T>;\n maxDragAndDropLevel?: number;\n };\n\n export type UseTreeConfigReturn<T> = {\n dndContextProps: DndContextPropsType;\n sortableContextProps: Record<string, SortableContextPropsType>;\n active: Active | null;\n activeItem: DnDKitTree.Item<T> | null;\n over: Over | null;\n overItem: DnDKitTree.Item<T> | null;\n dropIndicatorPosition: DropIndicatorPositionValues;\n isDropValid: boolean;\n containerNodesRef: MutableRefObject<Record<string, HTMLElement | null>>;\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
var useMultiTreeDndkitConfig_exports = {};
|
|
30
30
|
__export(useMultiTreeDndkitConfig_exports, {
|
|
31
|
+
adjustTranslate: () => adjustTranslate,
|
|
31
32
|
useMultiTreeDndkitConfig: () => useMultiTreeDndkitConfig
|
|
32
33
|
});
|
|
33
34
|
module.exports = __toCommonJS(useMultiTreeDndkitConfig_exports);
|
|
@@ -51,8 +52,8 @@ const adjustTranslate = (isHorizontalDnD, sortedIds) => {
|
|
|
51
52
|
} else {
|
|
52
53
|
newTransform.x = transform.x + 15;
|
|
53
54
|
if (["Enter", "Space"].includes(activatorEvent?.code)) {
|
|
54
|
-
const
|
|
55
|
-
const isLast = active?.id === sortedIds[
|
|
55
|
+
const activeContainerId = Object.keys(sortedIds).find((key) => sortedIds[key].includes(active?.id ?? "")) ?? Object.keys(sortedIds)[0];
|
|
56
|
+
const isLast = active?.id === sortedIds[activeContainerId][sortedIds[activeContainerId].length - 1];
|
|
56
57
|
const keyboardTranslate = (isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0) / 2;
|
|
57
58
|
newTransform.y = transform.y + keyboardTranslate;
|
|
58
59
|
}
|
|
@@ -90,6 +91,8 @@ const useMultiTreeDndkitConfig = ({
|
|
|
90
91
|
[flattenedItems]
|
|
91
92
|
);
|
|
92
93
|
const containersRef = (0, import_react.useRef)([]);
|
|
94
|
+
const containerNodesRef = (0, import_react.useRef)({});
|
|
95
|
+
const latestDropIndicatorPositionRef = (0, import_react.useRef)(dropIndicatorPosition);
|
|
93
96
|
const visibleFlattenedItems = (0, import_react.useMemo)(() => {
|
|
94
97
|
const dictionary = {};
|
|
95
98
|
const collapsedItems = {};
|
|
@@ -150,7 +153,10 @@ const useMultiTreeDndkitConfig = ({
|
|
|
150
153
|
};
|
|
151
154
|
}, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);
|
|
152
155
|
const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getTreeKeyboardCoordinates.getTreeKeyboardCoordinates)(sensorContext), []);
|
|
153
|
-
const sensors = (0, import_core.useSensors)(
|
|
156
|
+
const sensors = (0, import_core.useSensors)(
|
|
157
|
+
(0, import_core.useSensor)(import_core.PointerSensor),
|
|
158
|
+
(0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter, scrollBehavior: "auto" })
|
|
159
|
+
);
|
|
154
160
|
const projected = (0, import_react.useMemo)(
|
|
155
161
|
() => over && active ? (0, import_utilities.getProjection)(
|
|
156
162
|
visibleFlattenedItems,
|
|
@@ -177,8 +183,26 @@ const useMultiTreeDndkitConfig = ({
|
|
|
177
183
|
flattenedItemsDictionary,
|
|
178
184
|
containersRef
|
|
179
185
|
});
|
|
180
|
-
const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)(
|
|
181
|
-
|
|
186
|
+
const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)({
|
|
187
|
+
flattenedItems,
|
|
188
|
+
visibleFlattenedItems,
|
|
189
|
+
flattenedItemsDictionary,
|
|
190
|
+
containersRef,
|
|
191
|
+
dropIndicatorPosition,
|
|
192
|
+
latestDropIndicatorPositionRef,
|
|
193
|
+
isExpandable,
|
|
194
|
+
containerNodesRef
|
|
195
|
+
});
|
|
196
|
+
const rawCollisionDetection = (0, import_react.useMemo)(() => (0, import_customCollisionDetection.customCollisionDetection)(sensorContext), []);
|
|
197
|
+
const collisionDetection = (0, import_react.useCallback)(
|
|
198
|
+
(collisionArgs) => {
|
|
199
|
+
const collisions = rawCollisionDetection(collisionArgs);
|
|
200
|
+
const fresh = collisions?.[0]?.data?.dropIndicatorPosition;
|
|
201
|
+
if (fresh !== void 0) latestDropIndicatorPositionRef.current = fresh;
|
|
202
|
+
return collisions;
|
|
203
|
+
},
|
|
204
|
+
[rawCollisionDetection]
|
|
205
|
+
);
|
|
182
206
|
const dndContextProps = (0, import_react.useMemo)(
|
|
183
207
|
() => ({
|
|
184
208
|
accessibility: {
|
|
@@ -222,7 +246,8 @@ const useMultiTreeDndkitConfig = ({
|
|
|
222
246
|
activeItem,
|
|
223
247
|
over,
|
|
224
248
|
overItem,
|
|
225
|
-
dropIndicatorPosition
|
|
249
|
+
dropIndicatorPosition,
|
|
250
|
+
containerNodesRef
|
|
226
251
|
};
|
|
227
252
|
};
|
|
228
253
|
//# sourceMappingURL=useMultiTreeDndkitConfig.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/useMultiTreeDndkitConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { Active, MeasuringConfiguration, Modifier, Over, UniqueIdentifier } from '@dnd-kit/core';\nimport { useSensor, useSensors, KeyboardSensor, PointerSensor, MeasuringStrategy } from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers.js';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';\nimport { getProjection, removeChildrenOf } from './utilities.js';\nimport { useTreeActionHandlers } from './useTreeActionHandlers.js';\nimport type { DnDKitTree } from './types.js';\nimport { DropIndicatorPosition } from './constants.js';\nimport { customCollisionDetection } from './customCollisionDetection.js';\nimport { useTreeAnnouncements } from './useTreeAnnouncements.js';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n // @todo we need to make it multi container functional\n const firstContainer = Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.After,\n );\n // Sorted ids for the library\n const sortedIds = useMemo(\n () =>\n Object.keys(flattenedItems).reduce(\n (acc, curr) => {\n acc[curr] = flattenedItems[curr].map((item) => item.uid);\n return acc;\n },\n {} as Record<string, UniqueIdentifier[]>,\n ),\n [flattenedItems],\n );\n\n /**\n * List of unique containers\n */\n const containersRef = useRef([] as string[]);\n\n const visibleFlattenedItems = useMemo(() => {\n const dictionary: Record<string, DnDKitTree.Item<T>[]> = {};\n const collapsedItems: Record<UniqueIdentifier, boolean | undefined> = {};\n Object.keys(flattenedItems).forEach((container) => {\n const itemWithNoActiveChildren = removeChildrenOf(flattenedItems[container], active?.id);\n\n dictionary[container] = [];\n\n itemWithNoActiveChildren.forEach((item) => {\n if (item.parentId === null || !collapsedItems[item.parentId]) {\n dictionary[container].push(item);\n }\n collapsedItems[item.uid] = item.collapsed;\n });\n });\n return dictionary;\n }, [active?.id, flattenedItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular item, so O(1) per DnD move instead of O(#ITEMS)\n */\n const flattenedItemsDictionary = useMemo(() => {\n const dictionary: Record<UniqueIdentifier, TypescriptHelpersT.ObjectValues<typeof flattenedItems>[0]> = {};\n Object.keys(flattenedItems).forEach((container) => {\n flattenedItems[container].forEach((item) => {\n dictionary[item.uid] = item;\n if (!item.container) return;\n if (!containersRef.current.includes(item.container)) containersRef.current.push(item.container);\n });\n });\n return dictionary;\n }, [flattenedItems]);\n\n const isDropValid = useMemo(() => {\n if (!active || !over) return true;\n return getIsDropValid(\n flattenedItemsDictionary[active.id],\n flattenedItemsDictionary[over.id],\n dropIndicatorPosition,\n );\n }, [getIsDropValid, flattenedItemsDictionary, active, over, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: DnDKitTree.SensorContext<T> = useRef({\n items: flattenedItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n dropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n };\n }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);\n\n const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext), []);\n\n const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter }));\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n over && active\n ? getProjection(\n visibleFlattenedItems,\n flattenedItemsDictionary,\n over,\n dropIndicatorPosition,\n isExpandable,\n active,\n )\n : null,\n [over, visibleFlattenedItems, flattenedItemsDictionary, dropIndicatorPosition, isExpandable, active],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActive,\n setOver,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n flattenedItemsDictionary,\n containersRef,\n });\n\n const announcements = useTreeAnnouncements(flattenedItemsDictionary, dropIndicatorPosition);\n\n const collisionDetection = customCollisionDetection(sensorContext);\n\n const dndContextProps = useMemo(\n () => ({\n accessibility: {\n announcements,\n container: document.body,\n },\n modifiers,\n sensors,\n measuring,\n collisionDetection,\n ...dragActionHandlers,\n }),\n [announcements, modifiers, sensors, collisionDetection, dragActionHandlers],\n );\n\n const sortableContextProps = useMemo(\n () =>\n Object.keys(sortedIds).reduce(\n (acc, curr) => {\n acc[curr] = {\n items: sortedIds[curr],\n strategy: () => null,\n };\n return acc;\n },\n {} as Record<string, DnDKitTree.SortableContextPropsType>,\n ),\n [sortedIds],\n );\n\n const activeItem = useMemo(() => {\n if (!active) return null;\n return flattenedItemsDictionary[active.id];\n }, [active, flattenedItemsDictionary]);\n\n const overItem = useMemo(() => {\n if (!over) return null;\n return flattenedItemsDictionary[over.id];\n }, [flattenedItemsDictionary, over]);\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n active,\n activeItem,\n over,\n overItem,\n dropIndicatorPosition,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef, useCallback } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type {\n Active,\n CollisionDetection,\n MeasuringConfiguration,\n Modifier,\n Over,\n UniqueIdentifier,\n} from '@dnd-kit/core';\nimport { useSensor, useSensors, KeyboardSensor, PointerSensor, MeasuringStrategy } from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers.js';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';\nimport { getProjection, removeChildrenOf } from './utilities.js';\nimport { useTreeActionHandlers } from './useTreeActionHandlers.js';\nimport type { DnDKitTree } from './types.js';\nimport { DropIndicatorPosition } from './constants.js';\nimport { customCollisionDetection } from './customCollisionDetection.js';\nimport { useTreeAnnouncements } from './useTreeAnnouncements.js';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nexport const adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n const activeContainerId =\n Object.keys(sortedIds).find((key) => sortedIds[key].includes(active?.id ?? '')) ?? Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[activeContainerId][sortedIds[activeContainerId].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.After,\n );\n // Sorted ids for the library\n const sortedIds = useMemo(\n () =>\n Object.keys(flattenedItems).reduce(\n (acc, curr) => {\n acc[curr] = flattenedItems[curr].map((item) => item.uid);\n return acc;\n },\n {} as Record<string, UniqueIdentifier[]>,\n ),\n [flattenedItems],\n );\n\n /**\n * List of unique containers\n */\n const containersRef = useRef([] as string[]);\n\n /**\n * Container id -> DOM node, registered by DSSortableContainer. Used to resolve the destination\n * container's accessible name for screen-reader announcements on cross-container moves.\n */\n const containerNodesRef = useRef({} as Record<string, HTMLElement | null>);\n\n /**\n * The drop-indicator position from the *latest* collision computation. `dropIndicatorPosition` state\n * lags by one render, so announcements \u2014 which fire during the drag event, before that state commits \u2014\n * would read a stale position whenever the indicator side flips (e.g. crossing above the first item of\n * a container). Collision detection runs before the announcement for the same event, so it writes the\n * fresh value here for the announcement to read, keeping the spoken slot in lockstep with the indicator.\n */\n const latestDropIndicatorPositionRef = useRef<DnDKitTree.DropIndicatorPositionValues>(dropIndicatorPosition);\n\n const visibleFlattenedItems = useMemo(() => {\n const dictionary: Record<string, DnDKitTree.Item<T>[]> = {};\n const collapsedItems: Record<UniqueIdentifier, boolean | undefined> = {};\n Object.keys(flattenedItems).forEach((container) => {\n const itemWithNoActiveChildren = removeChildrenOf(flattenedItems[container], active?.id);\n\n dictionary[container] = [];\n\n itemWithNoActiveChildren.forEach((item) => {\n if (item.parentId === null || !collapsedItems[item.parentId]) {\n dictionary[container].push(item);\n }\n collapsedItems[item.uid] = item.collapsed;\n });\n });\n return dictionary;\n }, [active?.id, flattenedItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular item, so O(1) per DnD move instead of O(#ITEMS)\n */\n const flattenedItemsDictionary = useMemo(() => {\n const dictionary: Record<UniqueIdentifier, TypescriptHelpersT.ObjectValues<typeof flattenedItems>[0]> = {};\n Object.keys(flattenedItems).forEach((container) => {\n flattenedItems[container].forEach((item) => {\n dictionary[item.uid] = item;\n if (!item.container) return;\n if (!containersRef.current.includes(item.container)) containersRef.current.push(item.container);\n });\n });\n return dictionary;\n }, [flattenedItems]);\n\n const isDropValid = useMemo(() => {\n if (!active || !over) return true;\n return getIsDropValid(\n flattenedItemsDictionary[active.id],\n flattenedItemsDictionary[over.id],\n dropIndicatorPosition,\n );\n }, [getIsDropValid, flattenedItemsDictionary, active, over, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: DnDKitTree.SensorContext<T> = useRef({\n items: flattenedItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n dropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n };\n }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);\n\n const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext), []);\n\n // dnd-kit's KeyboardSensor defaults to 'smooth', which re-targets an in-progress scroll\n // animation on every OS key-repeat keydown while an arrow key is held, producing a\n // stutter/rubber-band effect instead of a flicker. 'auto' scrolls happen synchronously,\n // so repeated keydowns just produce a sequence of instant jumps with nothing to interrupt.\n const sensors = useSensors(\n useSensor(PointerSensor),\n useSensor(KeyboardSensor, { coordinateGetter, scrollBehavior: 'auto' }),\n );\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n over && active\n ? getProjection(\n visibleFlattenedItems,\n flattenedItemsDictionary,\n over,\n dropIndicatorPosition,\n isExpandable,\n active,\n )\n : null,\n [over, visibleFlattenedItems, flattenedItemsDictionary, dropIndicatorPosition, isExpandable, active],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActive,\n setOver,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n flattenedItemsDictionary,\n containersRef,\n });\n\n const announcements = useTreeAnnouncements({\n flattenedItems,\n visibleFlattenedItems,\n flattenedItemsDictionary,\n containersRef,\n dropIndicatorPosition,\n latestDropIndicatorPositionRef,\n isExpandable,\n containerNodesRef,\n });\n\n const rawCollisionDetection = useMemo(() => customCollisionDetection(sensorContext), []);\n // Capture the fresh drop-indicator position each time collisions are computed, so announcements can\n // read it without waiting for the lagging `dropIndicatorPosition` state to commit.\n const collisionDetection = useCallback<CollisionDetection>(\n (collisionArgs) => {\n const collisions = rawCollisionDetection(collisionArgs);\n const fresh = (collisions?.[0]?.data as DnDKitTree.DragEventData | undefined)?.dropIndicatorPosition;\n if (fresh !== undefined) latestDropIndicatorPositionRef.current = fresh;\n return collisions;\n },\n [rawCollisionDetection],\n );\n\n const dndContextProps = useMemo(\n () => ({\n accessibility: {\n announcements,\n container: document.body,\n },\n modifiers,\n sensors,\n measuring,\n collisionDetection,\n ...dragActionHandlers,\n }),\n [announcements, modifiers, sensors, collisionDetection, dragActionHandlers],\n );\n\n const sortableContextProps = useMemo(\n () =>\n Object.keys(sortedIds).reduce(\n (acc, curr) => {\n acc[curr] = {\n items: sortedIds[curr],\n strategy: () => null,\n };\n return acc;\n },\n {} as Record<string, DnDKitTree.SortableContextPropsType>,\n ),\n [sortedIds],\n );\n\n const activeItem = useMemo(() => {\n if (!active) return null;\n return flattenedItemsDictionary[active.id];\n }, [active, flattenedItemsDictionary]);\n\n const overItem = useMemo(() => {\n if (!over) return null;\n return flattenedItemsDictionary[over.id];\n }, [flattenedItemsDictionary, over]);\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n active,\n activeItem,\n over,\n overItem,\n dropIndicatorPosition,\n containerNodesRef,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkE;AAUlE,kBAAwF;AACxF,oCAAuC;AACvC,wCAA2C;AAC3C,uBAAgD;AAChD,mCAAsC;AAEtC,uBAAsC;AACtC,sCAAyC;AACzC,kCAAqC;AAI9B,MAAM,kBAAkB,CAAC,iBAA0B,cAA4D;AACpH,QAAM,OAAiB,CAAC,EAAE,WAAW,gBAAgB,OAAO,MAAM;AAChE,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,IACL;AACA,QAAI,iBAAiB;AACnB,mBAAa,IAAI,UAAU,IAAI;AAAA,IACjC,OAAO;AACL,mBAAa,IAAI,UAAU,IAAI;AAC/B,UAAI,CAAC,SAAS,OAAO,EAAE,SAAU,gBAAkC,IAAI,GAAG;AACxE,cAAM,oBACJ,OAAO,KAAK,SAAS,EAAE,KAAK,CAAC,QAAQ,UAAU,GAAG,EAAE,SAAS,QAAQ,MAAM,EAAE,CAAC,KAAK,OAAO,KAAK,SAAS,EAAE,CAAC;AAC7G,cAAM,SAAS,QAAQ,OAAO,UAAU,iBAAiB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC;AAClG,cAAM,qBAAsB,SAAS,KAAK,MAAM,QAAQ,MAAM,SAAS,SAAS,UAAU,KAAM;AAChG,qBAAa,IAAI,UAAU,IAAI;AAAA,MACjC;AAAA,IACF;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,YAA6C;AAAA,EACjD,WAAW;AAAA,IACT,UAAU,8BAAkB;AAAA,EAC9B;AACF;AAEO,MAAM,2BAA2B,CAAK;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,iBAAiB,MAAM;AAAA,EACvB,sBAAsB;AACxB,MAA+E;AAC7E,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAwB,IAAI;AACxD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAsB,IAAI;AAClD,QAAM,CAAC,uBAAuB,wBAAwB,QAAI;AAAA,IACxD,uCAAsB;AAAA,EACxB;AAEA,QAAM,gBAAY;AAAA,IAChB,MACE,OAAO,KAAK,cAAc,EAAE;AAAA,MAC1B,CAAC,KAAK,SAAS;AACb,YAAI,IAAI,IAAI,eAAe,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,GAAG;AACvD,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,cAAc;AAAA,EACjB;AAKA,QAAM,oBAAgB,qBAAO,CAAC,CAAa;AAM3C,QAAM,wBAAoB,qBAAO,CAAC,CAAuC;AASzE,QAAM,qCAAiC,qBAA+C,qBAAqB;AAE3G,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,UAAM,aAAmD,CAAC;AAC1D,UAAM,iBAAgE,CAAC;AACvE,WAAO,KAAK,cAAc,EAAE,QAAQ,CAAC,cAAc;AACjD,YAAM,+BAA2B,mCAAiB,eAAe,SAAS,GAAG,QAAQ,EAAE;AAEvF,iBAAW,SAAS,IAAI,CAAC;AAEzB,+BAAyB,QAAQ,CAAC,SAAS;AACzC,YAAI,KAAK,aAAa,QAAQ,CAAC,eAAe,KAAK,QAAQ,GAAG;AAC5D,qBAAW,SAAS,EAAE,KAAK,IAAI;AAAA,QACjC;AACA,uBAAe,KAAK,GAAG,IAAI,KAAK;AAAA,MAClC,CAAC;AAAA,IACH,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,IAAI,cAAc,CAAC;AAO/B,QAAM,+BAA2B,sBAAQ,MAAM;AAC7C,UAAM,aAAkG,CAAC;AACzG,WAAO,KAAK,cAAc,EAAE,QAAQ,CAAC,cAAc;AACjD,qBAAe,SAAS,EAAE,QAAQ,CAAC,SAAS;AAC1C,mBAAW,KAAK,GAAG,IAAI;AACvB,YAAI,CAAC,KAAK,UAAW;AACrB,YAAI,CAAC,cAAc,QAAQ,SAAS,KAAK,SAAS,EAAG,eAAc,QAAQ,KAAK,KAAK,SAAS;AAAA,MAChG,CAAC;AAAA,IACH,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,CAAC,UAAU,CAAC,KAAM,QAAO;AAC7B,WAAO;AAAA,MACL,yBAAyB,OAAO,EAAE;AAAA,MAClC,yBAAyB,KAAK,EAAE;AAAA,MAChC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,0BAA0B,QAAQ,MAAM,qBAAqB,CAAC;AAElF,QAAM,gBAAwB;AAAA,IAC5B,MAAM,CAAC,gBAAgB,iBAAiB,SAAS,CAAC;AAAA,IAClD,CAAC,iBAAiB,SAAS;AAAA,EAC7B;AAEA,QAAM,oBAA6C,qBAAO;AAAA,IACxD,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,kBAAc,UAAU;AAAA,MACtB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,uBAAuB,iBAAiB,qBAAqB,QAAQ,wBAAwB,CAAC;AAElH,QAAM,uBAAmB,sBAAQ,UAAM,8DAA2B,aAAa,GAAG,CAAC,CAAC;AAMpF,QAAM,cAAU;AAAA,QACd,uBAAU,yBAAa;AAAA,QACvB,uBAAU,4BAAgB,EAAE,kBAAkB,gBAAgB,OAAO,CAAC;AAAA,EACxE;AAGA,QAAM,gBAAY;AAAA,IAChB,MACE,QAAQ,aACJ;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IACA;AAAA,IACN,CAAC,MAAM,uBAAuB,0BAA0B,uBAAuB,cAAc,MAAM;AAAA,EACrG;AAEA,QAAM,0BAAsB,sDAAuB;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,yBAAqB,oDAAsB;AAAA,IAC/C,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,oBAAgB,kDAAqB;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,4BAAwB,sBAAQ,UAAM,0DAAyB,aAAa,GAAG,CAAC,CAAC;AAGvF,QAAM,yBAAqB;AAAA,IACzB,CAAC,kBAAkB;AACjB,YAAM,aAAa,sBAAsB,aAAa;AACtD,YAAM,QAAS,aAAa,CAAC,GAAG,MAA+C;AAC/E,UAAI,UAAU,OAAW,gCAA+B,UAAU;AAClE,aAAO;AAAA,IACT;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,sBAAkB;AAAA,IACtB,OAAO;AAAA,MACL,eAAe;AAAA,QACb;AAAA,QACA,WAAW,SAAS;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,WAAW,SAAS,oBAAoB,kBAAkB;AAAA,EAC5E;AAEA,QAAM,2BAAuB;AAAA,IAC3B,MACE,OAAO,KAAK,SAAS,EAAE;AAAA,MACrB,CAAC,KAAK,SAAS;AACb,YAAI,IAAI,IAAI;AAAA,UACV,OAAO,UAAU,IAAI;AAAA,UACrB,UAAU,MAAM;AAAA,QAClB;AACA,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,iBAAa,sBAAQ,MAAM;AAC/B,QAAI,CAAC,OAAQ,QAAO;AACpB,WAAO,yBAAyB,OAAO,EAAE;AAAA,EAC3C,GAAG,CAAC,QAAQ,wBAAwB,CAAC;AAErC,QAAM,eAAW,sBAAQ,MAAM;AAC7B,QAAI,CAAC,KAAM,QAAO;AAClB,WAAO,yBAAyB,KAAK,EAAE;AAAA,EACzC,GAAG,CAAC,0BAA0B,IAAI,CAAC;AAEnC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_sortable = require("@dnd-kit/sortable");
|
|
36
36
|
var import_lodash_es = require("lodash-es");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
-
var
|
|
38
|
+
var import_utilities = require("./utilities.js");
|
|
39
39
|
const useTreeActionHandlers = ({
|
|
40
40
|
handlePreviewDragStart,
|
|
41
41
|
handlePreviewDragMove,
|
|
@@ -74,18 +74,14 @@ const useTreeActionHandlers = ({
|
|
|
74
74
|
const { active, over } = e;
|
|
75
75
|
if (over === null || !isDropValid) return;
|
|
76
76
|
if (over.id === active.id) return;
|
|
77
|
-
const isOverContainerOfContainer =
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside && !isOverContainerOfContainer) {
|
|
86
|
-
considerExpanding = over.id;
|
|
87
|
-
overIndex = flattenedItems[overContainer][overIndex].realIndex + flattenedItems[overContainer][overIndex].childrenCount + 1;
|
|
88
|
-
}
|
|
77
|
+
const { isOverContainerOfContainer, overContainer, activeContainer, activeIndex, overIndex, considerExpanding } = (0, import_utilities.getDropLandingContext)(
|
|
78
|
+
active,
|
|
79
|
+
over,
|
|
80
|
+
dropIndicatorPosition,
|
|
81
|
+
flattenedItems,
|
|
82
|
+
flattenedItemsDictionary,
|
|
83
|
+
containersRef
|
|
84
|
+
);
|
|
89
85
|
if (projected && (activeIndex !== overIndex || flattenedItems[activeContainer][activeIndex].depth !== projected.depth || activeContainer !== overContainer)) {
|
|
90
86
|
flattenedItems[activeContainer][activeIndex].parentId = projected.parentId;
|
|
91
87
|
flattenedItems[activeContainer][activeIndex].depth = projected.depth;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/useTreeActionHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash-es';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,sBAA0B;AAC1B,uBAA0B;AAC1B,mBAA4B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash-es';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport type { DnDKitTree } from './types.js';\nimport { getDropLandingContext } from './utilities.js';\n\nexport const useTreeActionHandlers = <T,>({\n handlePreviewDragStart,\n handlePreviewDragMove,\n handlePreviewDragOver,\n handlePreviewDragEnd,\n handlePreviewDragCancel,\n onReorder,\n flattenedItems,\n projected,\n dropIndicatorPosition,\n isDropValid,\n flattenedItemsDictionary,\n containersRef,\n}: DnDKitTree.UseTreeActionHandlersArgs<T>): DnDKitTree.UseTreeActionHandlersReturn => {\n const onDragStart = useCallback(\n (e: DragStartEvent) => {\n handlePreviewDragStart(e);\n },\n [handlePreviewDragStart],\n );\n\n const onDragMove = useCallback(\n (e: DragMoveEvent) => {\n handlePreviewDragMove(e);\n },\n [handlePreviewDragMove],\n );\n\n const onDragOver = useCallback(\n (e: DragOverEvent) => {\n handlePreviewDragOver(e);\n },\n [handlePreviewDragOver],\n );\n\n const onDragEnd = useCallback(\n (e: DragEndEvent) => {\n handlePreviewDragEnd(e);\n const { active, over } = e;\n\n if (over === null || !isDropValid) return;\n if (over.id === active.id) return;\n\n const { isOverContainerOfContainer, overContainer, activeContainer, activeIndex, overIndex, considerExpanding } =\n getDropLandingContext(\n active,\n over,\n dropIndicatorPosition,\n flattenedItems,\n flattenedItemsDictionary,\n containersRef,\n );\n\n // If we are dropping the item in a new position, or new depth or new container\n if (\n projected &&\n (activeIndex !== overIndex ||\n flattenedItems[activeContainer][activeIndex].depth !== projected.depth ||\n activeContainer !== overContainer)\n ) {\n // Change parent and depth from projected data\n flattenedItems[activeContainer][activeIndex].parentId = projected.parentId;\n flattenedItems[activeContainer][activeIndex].depth = projected.depth;\n\n // If same index, don't move the array, just copy it\n\n // not deep cloning here would break data-table\n const newFlattenedData = cloneDeep(flattenedItems);\n\n if (isOverContainerOfContainer) {\n if (newFlattenedData[overContainer].length === 0) {\n newFlattenedData[overContainer][0] = { ...flattenedItems[activeContainer][activeIndex] };\n } else {\n newFlattenedData[overContainer].push({ ...flattenedItems[activeContainer][activeIndex] });\n }\n newFlattenedData[activeContainer].splice(activeIndex, 1);\n } else if (activeContainer !== overContainer) {\n newFlattenedData[overContainer].splice(overIndex, 0, newFlattenedData[activeContainer][activeIndex]);\n newFlattenedData[activeContainer].splice(activeIndex, 1);\n } else {\n newFlattenedData[activeContainer] = arrayMove(flattenedItems[activeContainer], activeIndex, overIndex);\n }\n\n onReorder(flattenedItems[activeContainer][activeIndex], overIndex, {\n over: flattenedItems[activeContainer][overIndex],\n fromIndex: activeIndex,\n considerExpanding,\n movedData: newFlattenedData,\n flattenedItems,\n overContainer,\n projectedMove: projected,\n });\n }\n },\n [\n handlePreviewDragEnd,\n isDropValid,\n containersRef,\n flattenedItemsDictionary,\n flattenedItems,\n dropIndicatorPosition,\n projected,\n onReorder,\n ],\n );\n\n const onDragCancel = useCallback(\n (e: DragCancelEvent) => {\n handlePreviewDragCancel(e);\n },\n [handlePreviewDragCancel],\n );\n\n return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,sBAA0B;AAC1B,uBAA0B;AAC1B,mBAA4B;AAG5B,uBAAsC;AAE/B,MAAM,wBAAwB,CAAK;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuF;AACrF,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAsB;AACrB,6BAAuB,CAAC;AAAA,IAC1B;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,QAAM,iBAAa;AAAA,IACjB,CAAC,MAAqB;AACpB,4BAAsB,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,iBAAa;AAAA,IACjB,CAAC,MAAqB;AACpB,4BAAsB,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,MAAoB;AACnB,2BAAqB,CAAC;AACtB,YAAM,EAAE,QAAQ,KAAK,IAAI;AAEzB,UAAI,SAAS,QAAQ,CAAC,YAAa;AACnC,UAAI,KAAK,OAAO,OAAO,GAAI;AAE3B,YAAM,EAAE,4BAA4B,eAAe,iBAAiB,aAAa,WAAW,kBAAkB,QAC5G;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAGF,UACE,cACC,gBAAgB,aACf,eAAe,eAAe,EAAE,WAAW,EAAE,UAAU,UAAU,SACjE,oBAAoB,gBACtB;AAEA,uBAAe,eAAe,EAAE,WAAW,EAAE,WAAW,UAAU;AAClE,uBAAe,eAAe,EAAE,WAAW,EAAE,QAAQ,UAAU;AAK/D,cAAM,uBAAmB,4BAAU,cAAc;AAEjD,YAAI,4BAA4B;AAC9B,cAAI,iBAAiB,aAAa,EAAE,WAAW,GAAG;AAChD,6BAAiB,aAAa,EAAE,CAAC,IAAI,EAAE,GAAG,eAAe,eAAe,EAAE,WAAW,EAAE;AAAA,UACzF,OAAO;AACL,6BAAiB,aAAa,EAAE,KAAK,EAAE,GAAG,eAAe,eAAe,EAAE,WAAW,EAAE,CAAC;AAAA,UAC1F;AACA,2BAAiB,eAAe,EAAE,OAAO,aAAa,CAAC;AAAA,QACzD,WAAW,oBAAoB,eAAe;AAC5C,2BAAiB,aAAa,EAAE,OAAO,WAAW,GAAG,iBAAiB,eAAe,EAAE,WAAW,CAAC;AACnG,2BAAiB,eAAe,EAAE,OAAO,aAAa,CAAC;AAAA,QACzD,OAAO;AACL,2BAAiB,eAAe,QAAI,2BAAU,eAAe,eAAe,GAAG,aAAa,SAAS;AAAA,QACvG;AAEA,kBAAU,eAAe,eAAe,EAAE,WAAW,GAAG,WAAW;AAAA,UACjE,MAAM,eAAe,eAAe,EAAE,SAAS;AAAA,UAC/C,WAAW;AAAA,UACX;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAuB;AACtB,8BAAwB,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW,aAAa;AACxE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,50 +34,130 @@ module.exports = __toCommonJS(useTreeAnnouncements_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_constants = require("./constants.js");
|
|
37
|
-
|
|
37
|
+
var import_utilities = require("./utilities.js");
|
|
38
|
+
const useTreeAnnouncements = ({
|
|
39
|
+
flattenedItems,
|
|
40
|
+
visibleFlattenedItems,
|
|
41
|
+
flattenedItemsDictionary,
|
|
42
|
+
containersRef,
|
|
43
|
+
dropIndicatorPosition,
|
|
44
|
+
latestDropIndicatorPositionRef,
|
|
45
|
+
isExpandable,
|
|
46
|
+
containerNodesRef
|
|
47
|
+
}) => {
|
|
48
|
+
const getActiveDropIndicatorPosition = (0, import_react.useCallback)(
|
|
49
|
+
() => latestDropIndicatorPositionRef?.current ?? dropIndicatorPosition,
|
|
50
|
+
[latestDropIndicatorPositionRef, dropIndicatorPosition]
|
|
51
|
+
);
|
|
52
|
+
const announcedContainerRef = (0, import_react.useRef)(null);
|
|
53
|
+
const hasMovedRef = (0, import_react.useRef)(false);
|
|
54
|
+
const isStillAtOrigin = (0, import_react.useCallback)(
|
|
55
|
+
(active, position, overContainer) => {
|
|
56
|
+
const originPosition = (flattenedItemsDictionary[active.id]?.realIndex ?? 0) + 1;
|
|
57
|
+
const originContainer = String(flattenedItemsDictionary[active.id]?.container ?? "root");
|
|
58
|
+
return position === originPosition && overContainer === originContainer;
|
|
59
|
+
},
|
|
60
|
+
[flattenedItemsDictionary]
|
|
61
|
+
);
|
|
62
|
+
const getMoveContext = (0, import_react.useCallback)(
|
|
63
|
+
(active, over) => {
|
|
64
|
+
const activeDropIndicatorPosition = getActiveDropIndicatorPosition();
|
|
65
|
+
const { isOverContainerOfContainer, overContainer, activeContainer } = (0, import_utilities.getDropLandingContext)(
|
|
66
|
+
active,
|
|
67
|
+
over,
|
|
68
|
+
activeDropIndicatorPosition,
|
|
69
|
+
flattenedItems,
|
|
70
|
+
flattenedItemsDictionary,
|
|
71
|
+
containersRef
|
|
72
|
+
);
|
|
73
|
+
const projection = (0, import_utilities.getProjection)(
|
|
74
|
+
visibleFlattenedItems,
|
|
75
|
+
flattenedItemsDictionary,
|
|
76
|
+
over,
|
|
77
|
+
activeDropIndicatorPosition,
|
|
78
|
+
isExpandable,
|
|
79
|
+
active
|
|
80
|
+
);
|
|
81
|
+
const rawPosition = isOverContainerOfContainer || projection?.position === void 0 ? (flattenedItems[overContainer]?.length ?? 0) + 1 : projection.position + 1;
|
|
82
|
+
if (announcedContainerRef.current === null) announcedContainerRef.current = String(activeContainer);
|
|
83
|
+
return { position: Math.max(1, rawPosition), overContainer: String(overContainer) };
|
|
84
|
+
},
|
|
85
|
+
[
|
|
86
|
+
getActiveDropIndicatorPosition,
|
|
87
|
+
flattenedItems,
|
|
88
|
+
visibleFlattenedItems,
|
|
89
|
+
isExpandable,
|
|
90
|
+
flattenedItemsDictionary,
|
|
91
|
+
containersRef
|
|
92
|
+
]
|
|
93
|
+
);
|
|
38
94
|
const onDragStart = (0, import_react.useCallback)(
|
|
39
|
-
({ active: { id } }) =>
|
|
40
|
-
|
|
95
|
+
({ active: { id } }) => {
|
|
96
|
+
announcedContainerRef.current = String(flattenedItemsDictionary[id]?.container ?? "root");
|
|
97
|
+
hasMovedRef.current = false;
|
|
98
|
+
return `Picked up draggable item from position ${(flattenedItemsDictionary[id]?.realIndex ?? 0) + 1}.`;
|
|
99
|
+
},
|
|
100
|
+
[flattenedItemsDictionary]
|
|
41
101
|
);
|
|
42
102
|
const onDragMove = (0, import_react.useCallback)(
|
|
43
|
-
({ over }) => {
|
|
44
|
-
if (over)
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
const overIndex = visibleItemsDictionary[over.id].realIndex + 1;
|
|
49
|
-
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside) {
|
|
50
|
-
return `Draggable item was moved inside the item at position ${overIndex}.`;
|
|
51
|
-
}
|
|
52
|
-
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Before) {
|
|
53
|
-
return `Draggable item was moved to position ${overIndex - 1}.`;
|
|
54
|
-
}
|
|
55
|
-
return `Draggable item was moved to position ${overIndex}.`;
|
|
103
|
+
({ active, over }) => {
|
|
104
|
+
if (!over) return `Draggable item is no longer over a droppable area.`;
|
|
105
|
+
if (over.id === active.id) return "";
|
|
106
|
+
if (getActiveDropIndicatorPosition() === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
107
|
+
return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
56
108
|
}
|
|
57
|
-
|
|
109
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
110
|
+
if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return "";
|
|
111
|
+
hasMovedRef.current = true;
|
|
112
|
+
return `Draggable item was moved to position ${position}.`;
|
|
58
113
|
},
|
|
59
|
-
[
|
|
114
|
+
[getActiveDropIndicatorPosition, flattenedItemsDictionary, getMoveContext, isStillAtOrigin]
|
|
115
|
+
);
|
|
116
|
+
const onDragOver = (0, import_react.useCallback)(
|
|
117
|
+
({ active, over }) => {
|
|
118
|
+
if (!over) return `Draggable item is no longer over a droppable area.`;
|
|
119
|
+
if (over.id === active.id) return "";
|
|
120
|
+
if (getActiveDropIndicatorPosition() === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
121
|
+
return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
122
|
+
}
|
|
123
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
124
|
+
if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return "";
|
|
125
|
+
hasMovedRef.current = true;
|
|
126
|
+
const isEntry = overContainer !== announcedContainerRef.current;
|
|
127
|
+
announcedContainerRef.current = overContainer;
|
|
128
|
+
if (isEntry) {
|
|
129
|
+
const destName = (0, import_utilities.resolveAccessibleName)(containerNodesRef.current[overContainer]);
|
|
130
|
+
return `Draggable item was moved to ${destName ?? "another container"}, position ${position}.`;
|
|
131
|
+
}
|
|
132
|
+
return `Draggable item was moved to position ${position}.`;
|
|
133
|
+
},
|
|
134
|
+
[getActiveDropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef, isStillAtOrigin]
|
|
60
135
|
);
|
|
61
|
-
const onDragOver = onDragMove;
|
|
62
136
|
const onDragEnd = (0, import_react.useCallback)(
|
|
63
|
-
({ over }) => {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
137
|
+
({ active, over }) => {
|
|
138
|
+
announcedContainerRef.current = null;
|
|
139
|
+
hasMovedRef.current = false;
|
|
140
|
+
if (!over || over.id === active.id) return `Draggable item was dropped at it's original position.`;
|
|
141
|
+
if (getActiveDropIndicatorPosition() === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
142
|
+
return `Draggable item was dropped inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
143
|
+
}
|
|
144
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
145
|
+
const activeContainer = String(flattenedItemsDictionary[active.id]?.container ?? "root");
|
|
146
|
+
if (overContainer !== activeContainer) {
|
|
147
|
+
const destName = (0, import_utilities.resolveAccessibleName)(containerNodesRef.current[overContainer]);
|
|
148
|
+
return `Draggable item was dropped in ${destName ?? "another container"}, position ${position}.`;
|
|
73
149
|
}
|
|
74
|
-
return `Draggable item was dropped at
|
|
150
|
+
return `Draggable item was dropped at position ${position}.`;
|
|
75
151
|
},
|
|
76
|
-
[
|
|
152
|
+
[getActiveDropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef]
|
|
77
153
|
);
|
|
78
154
|
const onDragCancel = (0, import_react.useCallback)(
|
|
79
|
-
({ active: { id } }) =>
|
|
80
|
-
|
|
155
|
+
({ active: { id } }) => {
|
|
156
|
+
announcedContainerRef.current = null;
|
|
157
|
+
hasMovedRef.current = false;
|
|
158
|
+
return `Dragging was cancelled. Draggable item from position ${(flattenedItemsDictionary[id]?.realIndex ?? 0) + 1} was dropped at it's initial position.`;
|
|
159
|
+
},
|
|
160
|
+
[flattenedItemsDictionary]
|
|
81
161
|
);
|
|
82
162
|
return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };
|
|
83
163
|
};
|