@elliemae/ds-drag-and-drop 3.70.0-next.44 → 3.70.0-next.46
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/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 +10 -2
- 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 +90 -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/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 +10 -2
- 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 +91 -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/DSSortableContainer/config/SortableContainerContext.d.ts +2 -0
- package/dist/types/tree/types.d.ts +1 -0
- package/dist/types/tree/useTreeAnnouncements.d.ts +33 -1
- package/dist/types/tree/utilities.d.ts +23 -0
- package/package.json +6 -6
|
@@ -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
|
}
|
|
@@ -91,6 +91,7 @@ const useMultiTreeDndkitConfig = ({
|
|
|
91
91
|
[flattenedItems]
|
|
92
92
|
);
|
|
93
93
|
const containersRef = (0, import_react.useRef)([]);
|
|
94
|
+
const containerNodesRef = (0, import_react.useRef)({});
|
|
94
95
|
const visibleFlattenedItems = (0, import_react.useMemo)(() => {
|
|
95
96
|
const dictionary = {};
|
|
96
97
|
const collapsedItems = {};
|
|
@@ -178,7 +179,13 @@ const useMultiTreeDndkitConfig = ({
|
|
|
178
179
|
flattenedItemsDictionary,
|
|
179
180
|
containersRef
|
|
180
181
|
});
|
|
181
|
-
const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)(
|
|
182
|
+
const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)({
|
|
183
|
+
flattenedItems,
|
|
184
|
+
flattenedItemsDictionary,
|
|
185
|
+
containersRef,
|
|
186
|
+
dropIndicatorPosition,
|
|
187
|
+
containerNodesRef
|
|
188
|
+
});
|
|
182
189
|
const collisionDetection = (0, import_customCollisionDetection.customCollisionDetection)(sensorContext);
|
|
183
190
|
const dndContextProps = (0, import_react.useMemo)(
|
|
184
191
|
() => ({
|
|
@@ -223,7 +230,8 @@ const useMultiTreeDndkitConfig = ({
|
|
|
223
230
|
activeItem,
|
|
224
231
|
over,
|
|
225
232
|
overItem,
|
|
226
|
-
dropIndicatorPosition
|
|
233
|
+
dropIndicatorPosition,
|
|
234
|
+
containerNodesRef
|
|
227
235
|
};
|
|
228
236
|
};
|
|
229
237
|
//# 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\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 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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAqD;AAGrD,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;
|
|
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\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 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({\n flattenedItems,\n flattenedItemsDictionary,\n containersRef,\n dropIndicatorPosition,\n containerNodesRef,\n });\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 containerNodesRef,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
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,107 @@ 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
|
+
flattenedItemsDictionary,
|
|
41
|
+
containersRef,
|
|
42
|
+
dropIndicatorPosition,
|
|
43
|
+
containerNodesRef
|
|
44
|
+
}) => {
|
|
45
|
+
const announcedContainerRef = (0, import_react.useRef)(null);
|
|
46
|
+
const hasMovedRef = (0, import_react.useRef)(false);
|
|
47
|
+
const isStillAtOrigin = (0, import_react.useCallback)(
|
|
48
|
+
(active, position, overContainer) => {
|
|
49
|
+
const originPosition = (flattenedItemsDictionary[active.id]?.realIndex ?? 0) + 1;
|
|
50
|
+
const originContainer = String(flattenedItemsDictionary[active.id]?.container ?? "root");
|
|
51
|
+
return position === originPosition && overContainer === originContainer;
|
|
52
|
+
},
|
|
53
|
+
[flattenedItemsDictionary]
|
|
54
|
+
);
|
|
55
|
+
const getMoveContext = (0, import_react.useCallback)(
|
|
56
|
+
(active, over) => {
|
|
57
|
+
const { isOverContainerOfContainer, overContainer, activeContainer, overIndex } = (0, import_utilities.getDropLandingContext)(
|
|
58
|
+
active,
|
|
59
|
+
over,
|
|
60
|
+
dropIndicatorPosition,
|
|
61
|
+
flattenedItems,
|
|
62
|
+
flattenedItemsDictionary,
|
|
63
|
+
containersRef
|
|
64
|
+
);
|
|
65
|
+
const rawPosition = isOverContainerOfContainer ? (flattenedItems[overContainer]?.length ?? 0) + 1 : overIndex + 1;
|
|
66
|
+
if (announcedContainerRef.current === null) announcedContainerRef.current = String(activeContainer);
|
|
67
|
+
return { position: Math.max(1, rawPosition), overContainer: String(overContainer) };
|
|
68
|
+
},
|
|
69
|
+
[dropIndicatorPosition, flattenedItems, flattenedItemsDictionary, containersRef]
|
|
70
|
+
);
|
|
38
71
|
const onDragStart = (0, import_react.useCallback)(
|
|
39
|
-
({ active: { id } }) =>
|
|
40
|
-
|
|
72
|
+
({ active: { id } }) => {
|
|
73
|
+
announcedContainerRef.current = String(flattenedItemsDictionary[id]?.container ?? "root");
|
|
74
|
+
hasMovedRef.current = false;
|
|
75
|
+
return `Picked up draggable item from position ${(flattenedItemsDictionary[id]?.realIndex ?? 0) + 1}.`;
|
|
76
|
+
},
|
|
77
|
+
[flattenedItemsDictionary]
|
|
41
78
|
);
|
|
42
79
|
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}.`;
|
|
80
|
+
({ active, over }) => {
|
|
81
|
+
if (!over) return `Draggable item is no longer over a droppable area.`;
|
|
82
|
+
if (over.id === active.id) return "";
|
|
83
|
+
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
84
|
+
return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
56
85
|
}
|
|
57
|
-
|
|
86
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
87
|
+
if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return "";
|
|
88
|
+
hasMovedRef.current = true;
|
|
89
|
+
return `Draggable item was moved to position ${position}.`;
|
|
58
90
|
},
|
|
59
|
-
[
|
|
91
|
+
[dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, isStillAtOrigin]
|
|
92
|
+
);
|
|
93
|
+
const onDragOver = (0, import_react.useCallback)(
|
|
94
|
+
({ active, over }) => {
|
|
95
|
+
if (!over) return `Draggable item is no longer over a droppable area.`;
|
|
96
|
+
if (over.id === active.id) return "";
|
|
97
|
+
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
98
|
+
return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
99
|
+
}
|
|
100
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
101
|
+
if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return "";
|
|
102
|
+
hasMovedRef.current = true;
|
|
103
|
+
const isEntry = overContainer !== announcedContainerRef.current;
|
|
104
|
+
announcedContainerRef.current = overContainer;
|
|
105
|
+
if (isEntry) {
|
|
106
|
+
const destName = (0, import_utilities.resolveAccessibleName)(containerNodesRef.current[overContainer]);
|
|
107
|
+
return `Draggable item was moved to ${destName ?? "another container"}, position ${position}.`;
|
|
108
|
+
}
|
|
109
|
+
return `Draggable item was moved to position ${position}.`;
|
|
110
|
+
},
|
|
111
|
+
[dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef, isStillAtOrigin]
|
|
60
112
|
);
|
|
61
|
-
const onDragOver = onDragMove;
|
|
62
113
|
const onDragEnd = (0, import_react.useCallback)(
|
|
63
|
-
({ over }) => {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Before) {
|
|
70
|
-
return `Draggable item was dropped over position ${overIndex - 1}.`;
|
|
71
|
-
}
|
|
72
|
-
return `Draggable item was dropped over position ${overIndex}.`;
|
|
114
|
+
({ active, over }) => {
|
|
115
|
+
announcedContainerRef.current = null;
|
|
116
|
+
hasMovedRef.current = false;
|
|
117
|
+
if (!over || over.id === active.id) return `Draggable item was dropped at it's original position.`;
|
|
118
|
+
if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {
|
|
119
|
+
return `Draggable item was dropped inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;
|
|
73
120
|
}
|
|
74
|
-
|
|
121
|
+
const { position, overContainer } = getMoveContext(active, over);
|
|
122
|
+
const activeContainer = String(flattenedItemsDictionary[active.id]?.container ?? "root");
|
|
123
|
+
if (overContainer !== activeContainer) {
|
|
124
|
+
const destName = (0, import_utilities.resolveAccessibleName)(containerNodesRef.current[overContainer]);
|
|
125
|
+
return `Draggable item was dropped in ${destName ?? "another container"}, position ${position}.`;
|
|
126
|
+
}
|
|
127
|
+
return `Draggable item was dropped at position ${position}.`;
|
|
75
128
|
},
|
|
76
|
-
[dropIndicatorPosition,
|
|
129
|
+
[dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef]
|
|
77
130
|
);
|
|
78
131
|
const onDragCancel = (0, import_react.useCallback)(
|
|
79
|
-
({ active: { id } }) =>
|
|
80
|
-
|
|
132
|
+
({ active: { id } }) => {
|
|
133
|
+
announcedContainerRef.current = null;
|
|
134
|
+
hasMovedRef.current = false;
|
|
135
|
+
return `Dragging was cancelled. Draggable item from position ${(flattenedItemsDictionary[id]?.realIndex ?? 0) + 1} was dropped at it's initial position.`;
|
|
136
|
+
},
|
|
137
|
+
[flattenedItemsDictionary]
|
|
81
138
|
);
|
|
82
139
|
return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };
|
|
83
140
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/tree/useTreeAnnouncements.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { Announcements, UniqueIdentifier } from '@dnd-kit/core';\nimport { useCallback } from 'react';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["import type { Announcements, UniqueIdentifier, Active, Over } from '@dnd-kit/core';\nimport { useCallback, useRef } from 'react';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\nimport { getDropLandingContext, resolveAccessibleName } from './utilities.js';\n\n/**\n * Screen-reader announcements for the tree DnD engine (shared by single- and multi-tree configs).\n *\n * Position: the announced position is the real 1-based landing slot, derived from the same\n * `getDropLandingContext` the reorder (`onDragEnd`) uses \u2014 so the spoken number matches where the item\n * lands, and never underflows to 0.\n *\n * Destination container (name-on-entry): the destination container is named only when the drag *enters*\n * a different container, not on every move within it. dnd-kit fires `onDragOver` exactly when the over\n * target changes (a container crossing is such a change) and `onDragMove` on every coordinate move; so\n * `onDragOver` owns the entry naming (compared against `announcedContainerRef`) while `onDragMove` stays\n * position-only. The name is resolved from the container's accessible name (`aria-label` /\n * `aria-labelledby`), with a generic fallback when unlabeled.\n *\n * Pickup vs move: on pickup, dnd-kit fires `onDragStart` (\"Picked up \u2026 position N\") and then a settle\n * `onDragOver`/`onDragMove`. For a non-top item that settle resolves `over` to a neighbour (not the item\n * itself), which would emit a spurious \"moved to position N\" that overwrites the pickup message. To\n * prevent that, move announcements are suppressed until the item has *genuinely* moved \u2014 i.e. its landing\n * position or container differs from its origin (`hasMovedRef` latch). The latch also lets a later return\n * to the origin position be announced normally.\n */\nexport type UseTreeAnnouncementsArgs<T> = {\n flattenedItems: Record<string, DnDKitTree.Item<T>[]>;\n flattenedItemsDictionary: Record<UniqueIdentifier, DnDKitTree.Item<T>>;\n containersRef: { current: UniqueIdentifier[] };\n dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues;\n containerNodesRef: { current: Record<string, HTMLElement | null> };\n};\n\nexport const useTreeAnnouncements = <T,>({\n flattenedItems,\n flattenedItemsDictionary,\n containersRef,\n dropIndicatorPosition,\n containerNodesRef,\n}: UseTreeAnnouncementsArgs<T>): Announcements => {\n // The container the user was last told about (the drag origin, then each container they enter).\n // null = not yet initialised for this drag; lazily seeded to the active item's origin container.\n const announcedContainerRef = useRef<string | null>(null);\n // Latches true once the item has genuinely moved from its origin \u2014 suppresses the pickup-settle\n // \"moved\" announcement that would otherwise overwrite the \"Picked up \u2026\" message.\n const hasMovedRef = useRef(false);\n\n // Whether the current landing target is still the item's origin slot (same position AND container).\n // active.realIndex/container reflect the origin throughout the drag (data only mutates on drop).\n const isStillAtOrigin = useCallback(\n (active: Active, position: number, overContainer: string) => {\n const originPosition = (flattenedItemsDictionary[active.id]?.realIndex ?? 0) + 1;\n const originContainer = String(flattenedItemsDictionary[active.id]?.container ?? 'root');\n return position === originPosition && overContainer === originContainer;\n },\n [flattenedItemsDictionary],\n );\n\n const getMoveContext = useCallback(\n (active: Active, over: Over) => {\n const { isOverContainerOfContainer, overContainer, activeContainer, overIndex } = getDropLandingContext(\n active,\n over,\n dropIndicatorPosition,\n flattenedItems,\n flattenedItemsDictionary,\n containersRef,\n );\n const rawPosition = isOverContainerOfContainer ? (flattenedItems[overContainer]?.length ?? 0) + 1 : overIndex + 1;\n if (announcedContainerRef.current === null) announcedContainerRef.current = String(activeContainer);\n return { position: Math.max(1, rawPosition), overContainer: String(overContainer) };\n },\n [dropIndicatorPosition, flattenedItems, flattenedItemsDictionary, containersRef],\n );\n\n const onDragStart: Announcements['onDragStart'] = useCallback(\n ({ active: { id } }) => {\n announcedContainerRef.current = String(flattenedItemsDictionary[id]?.container ?? 'root');\n hasMovedRef.current = false;\n return `Picked up draggable item from position ${(flattenedItemsDictionary[id]?.realIndex ?? 0) + 1}.`;\n },\n [flattenedItemsDictionary],\n );\n\n // onDragMove: position-only, never names the container (fires on every coordinate move).\n // Typed via the non-optional onDragOver signature (same event shape) to keep params strongly typed.\n const onDragMove: Announcements['onDragOver'] = useCallback(\n ({ active, over }) => {\n if (!over) return `Draggable item is no longer over a droppable area.`;\n if (over.id === active.id) return ''; // over itself (e.g. the pickup frame) \u2014 no real move\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {\n return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;\n }\n const { position, overContainer } = getMoveContext(active, over);\n // Suppress the pickup-settle \"moved\" until the item genuinely leaves its origin slot.\n if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return '';\n hasMovedRef.current = true;\n return `Draggable item was moved to position ${position}.`;\n },\n [dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, isStillAtOrigin],\n );\n\n // onDragOver: fires when the over target changes; names the destination container on entry.\n const onDragOver: Announcements['onDragOver'] = useCallback(\n ({ active, over }) => {\n if (!over) return `Draggable item is no longer over a droppable area.`;\n if (over.id === active.id) return '';\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {\n return `Draggable item was moved inside the item at position ${flattenedItemsDictionary[over.id].realIndex + 1}.`;\n }\n const { position, overContainer } = getMoveContext(active, over);\n // Suppress the pickup-settle \"moved\" until the item genuinely leaves its origin slot.\n if (!hasMovedRef.current && isStillAtOrigin(active, position, overContainer)) return '';\n hasMovedRef.current = true;\n const isEntry = overContainer !== announcedContainerRef.current;\n announcedContainerRef.current = overContainer;\n if (isEntry) {\n const destName = resolveAccessibleName(containerNodesRef.current[overContainer]);\n return `Draggable item was moved to ${destName ?? 'another container'}, position ${position}.`;\n }\n return `Draggable item was moved to position ${position}.`;\n },\n [dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef, isStillAtOrigin],\n );\n\n const onDragEnd: Announcements['onDragEnd'] = useCallback(\n ({ active, over }) => {\n announcedContainerRef.current = null; // reset for the next drag\n hasMovedRef.current = false;\n if (!over || over.id === active.id) return `Draggable item was dropped at it's original position.`;\n if (dropIndicatorPosition === DropIndicatorPosition.Inside && flattenedItemsDictionary[over.id]) {\n return `Draggable item was dropped inside the item at position ${\n flattenedItemsDictionary[over.id].realIndex + 1\n }.`;\n }\n const { position, overContainer } = getMoveContext(active, over);\n const activeContainer = String(flattenedItemsDictionary[active.id]?.container ?? 'root');\n // Name the destination only when the item is dropped into a different container than it started in.\n if (overContainer !== activeContainer) {\n const destName = resolveAccessibleName(containerNodesRef.current[overContainer]);\n return `Draggable item was dropped in ${destName ?? 'another container'}, position ${position}.`;\n }\n return `Draggable item was dropped at position ${position}.`;\n },\n [dropIndicatorPosition, flattenedItemsDictionary, getMoveContext, containerNodesRef],\n );\n\n const onDragCancel: Announcements['onDragCancel'] = useCallback(\n ({ active: { id } }) => {\n announcedContainerRef.current = null;\n hasMovedRef.current = false;\n return `Dragging was cancelled. Draggable item from position ${\n (flattenedItemsDictionary[id]?.realIndex ?? 0) + 1\n } was dropped at it's initial position.`;\n },\n [flattenedItemsDictionary],\n );\n\n return { onDragStart, onDragOver, onDragMove, onDragEnd, onDragCancel };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|