@elliemae/ds-drag-and-drop 3.70.0-next.37 → 3.70.0-next.38
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/tree/useMultiTreeDndkitConfig.js +3 -2
- package/dist/cjs/tree/useMultiTreeDndkitConfig.js.map +2 -2
- package/dist/esm/tree/useMultiTreeDndkitConfig.js +3 -2
- package/dist/esm/tree/useMultiTreeDndkitConfig.js.map +2 -2
- package/dist/types/tests/DSDragAndDrop.pui-15649.test.d.ts +1 -0
- package/dist/types/tree/useMultiTreeDndkitConfig.d.ts +2 -0
- package/package.json +6 -6
|
@@ -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
|
}
|
|
@@ -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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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;
|
|
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, 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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,8 +18,8 @@ const adjustTranslate = (isHorizontalDnD, sortedIds) => {
|
|
|
18
18
|
} else {
|
|
19
19
|
newTransform.x = transform.x + 15;
|
|
20
20
|
if (["Enter", "Space"].includes(activatorEvent?.code)) {
|
|
21
|
-
const
|
|
22
|
-
const isLast = active?.id === sortedIds[
|
|
21
|
+
const activeContainerId = Object.keys(sortedIds).find((key) => sortedIds[key].includes(active?.id ?? "")) ?? Object.keys(sortedIds)[0];
|
|
22
|
+
const isLast = active?.id === sortedIds[activeContainerId][sortedIds[activeContainerId].length - 1];
|
|
23
23
|
const keyboardTranslate = (isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0) / 2;
|
|
24
24
|
newTransform.y = transform.y + keyboardTranslate;
|
|
25
25
|
}
|
|
@@ -193,6 +193,7 @@ const useMultiTreeDndkitConfig = ({
|
|
|
193
193
|
};
|
|
194
194
|
};
|
|
195
195
|
export {
|
|
196
|
+
adjustTranslate,
|
|
196
197
|
useMultiTreeDndkitConfig
|
|
197
198
|
};
|
|
198
199
|
//# sourceMappingURL=useMultiTreeDndkitConfig.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/useMultiTreeDndkitConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,UAAU,WAAW,SAAS,cAAc;AAGrD,SAAS,WAAW,YAAY,gBAAgB,eAAe,yBAAyB;AACxF,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,eAAe,wBAAwB;AAChD,SAAS,6BAA6B;AAEtC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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, 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import type { Modifier, UniqueIdentifier } from '@dnd-kit/core';
|
|
1
2
|
import type { DnDKitTree } from './types.js';
|
|
3
|
+
export declare const adjustTranslate: (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>) => Modifier;
|
|
2
4
|
export declare const useMultiTreeDndkitConfig: <T>({ flattenedItems, onReorder, isHorizontalDnD, isExpandable, getIsDropValid, maxDragAndDropLevel, }: DnDKitTree.UseMultiTreeConfigArgs<T>) => DnDKitTree.UseTreeConfigReturn<T>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-drag-and-drop",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.38",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Drag And Drop",
|
|
6
6
|
"files": [
|
|
@@ -39,15 +39,15 @@
|
|
|
39
39
|
"@dnd-kit/core": "~6.0.8",
|
|
40
40
|
"@dnd-kit/modifiers": "~6.0.1",
|
|
41
41
|
"@dnd-kit/sortable": "~7.0.2",
|
|
42
|
-
"@elliemae/ds-fast-list": "3.70.0-next.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-fast-list": "3.70.0-next.38",
|
|
43
|
+
"@elliemae/ds-system": "3.70.0-next.38",
|
|
44
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.38",
|
|
45
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.38"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"jest": "^30.0.0",
|
|
49
49
|
"styled-components": "~5.3.9",
|
|
50
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
50
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.38"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"lodash-es": "^4.18.1",
|