@elliemae/ds-drag-and-drop 3.51.0-rc.9 → 3.51.1

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.
Files changed (15) hide show
  1. package/dist/cjs/index.js +11 -11
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js +2 -1
  4. package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js.map +2 -2
  5. package/dist/cjs/tree/customCollisionDetection.js +1 -1
  6. package/dist/cjs/tree/customCollisionDetection.js.map +2 -2
  7. package/dist/cjs/tree/useMultiTreeDndkitConfig.js +1 -1
  8. package/dist/cjs/tree/useMultiTreeDndkitConfig.js.map +1 -1
  9. package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js +2 -1
  10. package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js.map +2 -2
  11. package/dist/esm/tree/customCollisionDetection.js +1 -1
  12. package/dist/esm/tree/customCollisionDetection.js.map +2 -2
  13. package/dist/esm/tree/useMultiTreeDndkitConfig.js +1 -1
  14. package/dist/esm/tree/useMultiTreeDndkitConfig.js.map +1 -1
  15. package/package.json +7 -7
package/dist/cjs/index.js CHANGED
@@ -23,16 +23,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
23
23
  mod
24
24
  ));
25
25
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
26
- var src_exports = {};
27
- module.exports = __toCommonJS(src_exports);
26
+ var index_exports = {};
27
+ module.exports = __toCommonJS(index_exports);
28
28
  var React = __toESM(require("react"));
29
- __reExport(src_exports, require("./hierarchy/index.js"), module.exports);
30
- __reExport(src_exports, require("./tree/index.js"), module.exports);
31
- __reExport(src_exports, require("./parts/DSDragAndDrop/index.js"), module.exports);
32
- __reExport(src_exports, require("./parts/DSSortableContainer/index.js"), module.exports);
33
- __reExport(src_exports, require("./parts/DSSortableItem/index.js"), module.exports);
34
- __reExport(src_exports, require("./parts/DSDropIndicator/index.js"), module.exports);
35
- __reExport(src_exports, require("@dnd-kit/core"), module.exports);
36
- __reExport(src_exports, require("@dnd-kit/sortable"), module.exports);
37
- __reExport(src_exports, require("@dnd-kit/modifiers"), module.exports);
29
+ __reExport(index_exports, require("./hierarchy/index.js"), module.exports);
30
+ __reExport(index_exports, require("./tree/index.js"), module.exports);
31
+ __reExport(index_exports, require("./parts/DSDragAndDrop/index.js"), module.exports);
32
+ __reExport(index_exports, require("./parts/DSSortableContainer/index.js"), module.exports);
33
+ __reExport(index_exports, require("./parts/DSSortableItem/index.js"), module.exports);
34
+ __reExport(index_exports, require("./parts/DSDropIndicator/index.js"), module.exports);
35
+ __reExport(index_exports, require("@dnd-kit/core"), module.exports);
36
+ __reExport(index_exports, require("@dnd-kit/sortable"), module.exports);
37
+ __reExport(index_exports, require("@dnd-kit/modifiers"), module.exports);
38
38
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["export * from './hierarchy/index.js';\nexport * from './tree/index.js';\nexport * from './parts/DSDragAndDrop/index.js';\nexport * from './parts/DSSortableContainer/index.js';\nexport * from './parts/DSSortableItem/index.js';\nexport * from './parts/DSDropIndicator/index.js';\nexport * from '@dnd-kit/core';\nexport * from '@dnd-kit/sortable';\nexport * from '@dnd-kit/modifiers';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,iCAAd;AACA,wBAAc,4BADd;AAEA,wBAAc,2CAFd;AAGA,wBAAc,iDAHd;AAIA,wBAAc,4CAJd;AAKA,wBAAc,6CALd;AAMA,wBAAc,0BANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,+BARd;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAc,iCAAd;AACA,0BAAc,4BADd;AAEA,0BAAc,2CAFd;AAGA,0BAAc,iDAHd;AAIA,0BAAc,4CAJd;AAKA,0BAAc,6CALd;AAMA,0BAAc,0BANd;AAOA,0BAAc,8BAPd;AAQA,0BAAc,+BARd;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js CHANGED
@@ -48,7 +48,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
48
48
  uid: item.dsId,
49
49
  childrenCount: item?.subitems?.length || 0,
50
50
  original: item,
51
- realIndex: iteration.count + 1,
51
+ realIndex: iteration.count,
52
52
  parentId,
53
53
  depth,
54
54
  index,
@@ -57,6 +57,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
57
57
  if (item.subitems?.length > 0 && item.collapsed === false) {
58
58
  acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));
59
59
  }
60
+ iteration.count++;
60
61
  return acc;
61
62
  }, []);
62
63
  const DSDragAndDrop = ({
package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js.map CHANGED
@@ -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 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 + 1,\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 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 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 () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),\n [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps],\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;AD0EnB;AAzEJ,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,QAAQ;AAAA,IAC7B;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,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;AACA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QACxF,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,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,IACrG,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,oBAAoB;AAAA,EACvF;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;",
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 () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),\n [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps],\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;AD8EnB;AA5EJ,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,YAAY,QACxF,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,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,IACrG,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,oBAAoB;AAAA,EACvF;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
  }
package/dist/cjs/tree/customCollisionDetection.js CHANGED
@@ -71,7 +71,7 @@ const customCollisionDetection = (sensorContext) => {
71
71
  if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel && collidingContainer?.id !== active.id) {
72
72
  dropIndicatorPosition = import_constants.DropIndicatorPosition.Inside;
73
73
  } else {
74
- const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].index === 0;
74
+ const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;
75
75
  if (isFirstElement) {
76
76
  dropIndicatorPosition = isBefore ? import_constants.DropIndicatorPosition.Before : import_constants.DropIndicatorPosition.After;
77
77
  } else {
package/dist/cjs/tree/customCollisionDetection.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/tree/customCollisionDetection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n if (!active) return [];\n\n const rectIntersectionCollisions = rectIntersection({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n });\n\n const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n const possibleCollidingContainers = droppableContainers.filter(\n (container) =>\n !containersRef.current.includes(container?.id) &&\n flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n );\n\n const [collidingContainer, nearesCollidingContainer] = closestCorners({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: possibleCollidingContainers,\n });\n\n let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n // If we didn't find a match, return empty array\n if (!collidingContainer) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n }\n\n const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n ?.current;\n\n if (!collidingRect) return [];\n\n // Calculate the intersection interval\n const [top, bottom] = [\n Math.max(collisionRect.top, collidingRect.top),\n Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n ];\n\n // Calculate the percentage of intersection\n const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n\n if (\n intersectionPercentage > insideThreshold &&\n flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n collidingContainer?.id !== active.id\n ) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n } else {\n const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].index === 0;\n if (isFirstElement) {\n dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n } else {\n dropIndicatorPosition = DropIndicatorPosition.After;\n }\n }\n\n // Return the id of the match rectangle\n return [\n {\n id:\n isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n ? nearesCollidingContainer?.id\n : collidingContainer?.id,\n data: { dropIndicatorPosition },\n },\n ];\n };\n return func;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,kBAA0E;AAC1E,uBAAsC;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,iCAA6B,8BAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,QAAI,4BAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,uCAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,uCAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAE3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,uCAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,UAAU;AAClF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,uCAAsB,SAAS,uCAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,uCAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,uCAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n if (!active) return [];\n\n const rectIntersectionCollisions = rectIntersection({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n });\n\n const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n const possibleCollidingContainers = droppableContainers.filter(\n (container) =>\n !containersRef.current.includes(container?.id) &&\n flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n );\n\n const [collidingContainer, nearesCollidingContainer] = closestCorners({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: possibleCollidingContainers,\n });\n\n let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n // If we didn't find a match, return empty array\n if (!collidingContainer) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n }\n\n const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n ?.current;\n\n if (!collidingRect) return [];\n\n // Calculate the intersection interval\n const [top, bottom] = [\n Math.max(collisionRect.top, collidingRect.top),\n Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n ];\n\n // Calculate the percentage of intersection\n const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n\n if (\n intersectionPercentage > insideThreshold &&\n flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n collidingContainer?.id !== active.id\n ) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n } else {\n const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;\n if (isFirstElement) {\n dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n } else {\n dropIndicatorPosition = DropIndicatorPosition.After;\n }\n }\n\n // Return the id of the match rectangle\n return [\n {\n id:\n isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n ? nearesCollidingContainer?.id\n : collidingContainer?.id,\n data: { dropIndicatorPosition },\n },\n ];\n };\n return func;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,kBAA0E;AAC1E,uBAAsC;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,iCAA6B,8BAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,QAAI,4BAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,uCAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,uCAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAE3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,uCAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,cAAc;AACtF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,uCAAsB,SAAS,uCAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,uCAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,uCAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/cjs/tree/useMultiTreeDndkitConfig.js CHANGED
@@ -77,7 +77,7 @@ const useMultiTreeDndkitConfig = ({
77
77
  const [active, setActive] = (0, import_react.useState)(null);
78
78
  const [over, setOver] = (0, import_react.useState)(null);
79
79
  const [dropIndicatorPosition, setDropIndicatorPosition] = (0, import_react.useState)(
80
- import_constants.DropIndicatorPosition.None
80
+ import_constants.DropIndicatorPosition.After
81
81
  );
82
82
  const sortedIds = (0, import_react.useMemo)(
83
83
  () => Object.keys(flattenedItems).reduce(
package/dist/cjs/tree/useMultiTreeDndkitConfig.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/tree/useMultiTreeDndkitConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { Active, MeasuringConfiguration, Modifier, Over, UniqueIdentifier } from '@dnd-kit/core';\nimport { useSensor, useSensors, KeyboardSensor, PointerSensor, MeasuringStrategy } from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers.js';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';\nimport { getProjection, removeChildrenOf } from './utilities.js';\nimport { useTreeActionHandlers } from './useTreeActionHandlers.js';\nimport type { DnDKitTree } from './types.js';\nimport { DropIndicatorPosition } from './constants.js';\nimport { customCollisionDetection } from './customCollisionDetection.js';\nimport { useTreeAnnouncements } from './useTreeAnnouncements.js';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n // @todo we need to make it multi container functional\n const firstContainer = Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.None,\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: 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"],
4
+ "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { Active, MeasuringConfiguration, Modifier, Over, UniqueIdentifier } from '@dnd-kit/core';\nimport { useSensor, useSensors, KeyboardSensor, PointerSensor, MeasuringStrategy } from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers.js';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';\nimport { getProjection, removeChildrenOf } from './utilities.js';\nimport { useTreeActionHandlers } from './useTreeActionHandlers.js';\nimport type { DnDKitTree } from './types.js';\nimport { DropIndicatorPosition } from './constants.js';\nimport { customCollisionDetection } from './customCollisionDetection.js';\nimport { useTreeAnnouncements } from './useTreeAnnouncements.js';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nconst adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n // @todo we need to make it multi container functional\n const firstContainer = Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.After,\n );\n // Sorted ids for the library\n const sortedIds = useMemo(\n () =>\n Object.keys(flattenedItems).reduce(\n (acc, curr) => {\n acc[curr] = flattenedItems[curr].map((item) => item.uid);\n return acc;\n },\n {} as Record<string, UniqueIdentifier[]>,\n ),\n [flattenedItems],\n );\n\n /**\n * List of unique containers\n */\n const containersRef = useRef([] as string[]);\n\n const visibleFlattenedItems = useMemo(() => {\n const dictionary: Record<string, DnDKitTree.Item<T>[]> = {};\n const collapsedItems: Record<UniqueIdentifier, boolean | undefined> = {};\n Object.keys(flattenedItems).forEach((container) => {\n const itemWithNoActiveChildren = removeChildrenOf(flattenedItems[container], active?.id);\n\n dictionary[container] = [];\n\n itemWithNoActiveChildren.forEach((item) => {\n if (item.parentId === null || !collapsedItems[item.parentId]) {\n dictionary[container].push(item);\n }\n collapsedItems[item.uid] = item.collapsed;\n });\n });\n return dictionary;\n }, [active?.id, flattenedItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular item, so O(1) per DnD move instead of O(#ITEMS)\n */\n const flattenedItemsDictionary = useMemo(() => {\n const dictionary: Record<UniqueIdentifier, TypescriptHelpersT.ObjectValues<typeof flattenedItems>[0]> = {};\n Object.keys(flattenedItems).forEach((container) => {\n flattenedItems[container].forEach((item) => {\n dictionary[item.uid] = item;\n if (!item.container) return;\n if (!containersRef.current.includes(item.container)) containersRef.current.push(item.container);\n });\n });\n return dictionary;\n }, [flattenedItems]);\n\n const isDropValid = useMemo(() => {\n if (!active || !over) return true;\n return getIsDropValid(\n flattenedItemsDictionary[active.id],\n flattenedItemsDictionary[over.id],\n dropIndicatorPosition,\n );\n }, [getIsDropValid, flattenedItemsDictionary, active, over, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: DnDKitTree.SensorContext<T> = useRef({\n items: flattenedItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n dropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n };\n }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);\n\n const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext), []);\n\n const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter }));\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n over && active\n ? getProjection(\n visibleFlattenedItems,\n flattenedItemsDictionary,\n over,\n dropIndicatorPosition,\n isExpandable,\n active,\n )\n : null,\n [over, visibleFlattenedItems, flattenedItemsDictionary, dropIndicatorPosition, isExpandable, active],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActive,\n setOver,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n flattenedItemsDictionary,\n containersRef,\n });\n\n const announcements = useTreeAnnouncements(flattenedItemsDictionary, dropIndicatorPosition);\n\n const collisionDetection = customCollisionDetection(sensorContext);\n\n const dndContextProps = useMemo(\n () => ({\n accessibility: {\n announcements,\n container: document.body,\n },\n modifiers,\n sensors,\n measuring,\n collisionDetection,\n ...dragActionHandlers,\n }),\n [announcements, modifiers, sensors, collisionDetection, dragActionHandlers],\n );\n\n const sortableContextProps = useMemo(\n () =>\n Object.keys(sortedIds).reduce(\n (acc, curr) => {\n acc[curr] = {\n items: sortedIds[curr],\n strategy: () => null,\n };\n return acc;\n },\n {} as Record<string, DnDKitTree.SortableContextPropsType>,\n ),\n [sortedIds],\n );\n\n const activeItem = useMemo(() => {\n if (!active) return null;\n return flattenedItemsDictionary[active.id];\n }, [active, flattenedItemsDictionary]);\n\n const overItem = useMemo(() => {\n if (!over) return null;\n return flattenedItemsDictionary[over.id];\n }, [flattenedItemsDictionary, over]);\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n active,\n activeItem,\n over,\n overItem,\n dropIndicatorPosition,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js CHANGED
@@ -14,7 +14,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
14
14
  uid: item.dsId,
15
15
  childrenCount: item?.subitems?.length || 0,
16
16
  original: item,
17
- realIndex: iteration.count + 1,
17
+ realIndex: iteration.count,
18
18
  parentId,
19
19
  depth,
20
20
  index,
@@ -23,6 +23,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
23
23
  if (item.subitems?.length > 0 && item.collapsed === false) {
24
24
  acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));
25
25
  }
26
+ iteration.count++;
26
27
  return acc;
27
28
  }, []);
28
29
  const DSDragAndDrop = ({
package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSDragAndDrop/DSDragAndDrop.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\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 + 1,\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 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 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 () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),\n [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps],\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"],
5
- "mappings": "AAAA,YAAY,WAAW;AC0EnB,SACE,KADF;AAzEJ,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,aAAa,kBAAkB;AACxC,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;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,QAAQ;AAAA,IAC7B;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,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,iBAAiB;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;AACA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IACxF,yBAAyB;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,MAAM;AAAA,IACV,OAAO,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,IACrG,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,oBAAoB;AAAA,EACvF;AAEA,SACE,qBAAC,cAAY,GAAG,iBACd;AAAA,wBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KAAM,UAAS;AAAA,IACjD;AAAA,MACC,oBAAC,eAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,qBAAqB,GACnF,mBAAS,oBAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,0BAA0B,SAAS,aAAa;AAEtD,wBAAwB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),\n [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps],\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC8EnB,SACE,KADF;AA5EJ,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,aAAa,kBAAkB;AACxC,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;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,iBAAiB;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,YAAY,IACxF,yBAAyB;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,MAAM;AAAA,IACV,OAAO,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,IACrG,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,oBAAoB;AAAA,EACvF;AAEA,SACE,qBAAC,cAAY,GAAG,iBACd;AAAA,wBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KAAM,UAAS;AAAA,IACjD;AAAA,MACC,oBAAC,eAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,qBAAqB,GACnF,mBAAS,oBAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,0BAA0B,SAAS,aAAa;AAEtD,wBAAwB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/esm/tree/customCollisionDetection.js CHANGED
@@ -38,7 +38,7 @@ const customCollisionDetection = (sensorContext) => {
38
38
  if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel && collidingContainer?.id !== active.id) {
39
39
  dropIndicatorPosition = DropIndicatorPosition.Inside;
40
40
  } else {
41
- const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].index === 0;
41
+ const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;
42
42
  if (isFirstElement) {
43
43
  dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;
44
44
  } else {
package/dist/esm/tree/customCollisionDetection.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/customCollisionDetection.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n if (!active) return [];\n\n const rectIntersectionCollisions = rectIntersection({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n });\n\n const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n const possibleCollidingContainers = droppableContainers.filter(\n (container) =>\n !containersRef.current.includes(container?.id) &&\n flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n );\n\n const [collidingContainer, nearesCollidingContainer] = closestCorners({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: possibleCollidingContainers,\n });\n\n let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n // If we didn't find a match, return empty array\n if (!collidingContainer) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n }\n\n const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n ?.current;\n\n if (!collidingRect) return [];\n\n // Calculate the intersection interval\n const [top, bottom] = [\n Math.max(collisionRect.top, collidingRect.top),\n Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n ];\n\n // Calculate the percentage of intersection\n const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n\n if (\n intersectionPercentage > insideThreshold &&\n flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n collidingContainer?.id !== active.id\n ) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n } else {\n const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].index === 0;\n if (isFirstElement) {\n dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n } else {\n dropIndicatorPosition = DropIndicatorPosition.After;\n }\n }\n\n // Return the id of the match rectangle\n return [\n {\n id:\n isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n ? nearesCollidingContainer?.id\n : collidingContainer?.id,\n data: { dropIndicatorPosition },\n },\n ];\n };\n return func;\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAkC,kBAAkB,sBAAsB;AAC1E,SAAS,6BAA6B;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,6BAA6B,iBAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,IAAI,eAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,sBAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,sBAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAE3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,sBAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,UAAU;AAClF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,sBAAsB,SAAS,sBAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,sBAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,sBAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n if (!active) return [];\n\n const rectIntersectionCollisions = rectIntersection({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n });\n\n const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n const possibleCollidingContainers = droppableContainers.filter(\n (container) =>\n !containersRef.current.includes(container?.id) &&\n flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n );\n\n const [collidingContainer, nearesCollidingContainer] = closestCorners({\n ...args,\n droppableRects,\n collisionRect,\n droppableContainers: possibleCollidingContainers,\n });\n\n let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n // If we didn't find a match, return empty array\n if (!collidingContainer) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n }\n\n const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n ?.current;\n\n if (!collidingRect) return [];\n\n // Calculate the intersection interval\n const [top, bottom] = [\n Math.max(collisionRect.top, collidingRect.top),\n Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n ];\n\n // Calculate the percentage of intersection\n const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n\n if (\n intersectionPercentage > insideThreshold &&\n flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n collidingContainer?.id !== active.id\n ) {\n dropIndicatorPosition = DropIndicatorPosition.Inside;\n } else {\n const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;\n if (isFirstElement) {\n dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n } else {\n dropIndicatorPosition = DropIndicatorPosition.After;\n }\n }\n\n // Return the id of the match rectangle\n return [\n {\n id:\n isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n ? nearesCollidingContainer?.id\n : collidingContainer?.id,\n data: { dropIndicatorPosition },\n },\n ];\n };\n return func;\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAkC,kBAAkB,sBAAsB;AAC1E,SAAS,6BAA6B;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,6BAA6B,iBAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,IAAI,eAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,sBAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,sBAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAE3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,sBAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,cAAc;AACtF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,sBAAsB,SAAS,sBAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,sBAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,sBAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/esm/tree/useMultiTreeDndkitConfig.js CHANGED
@@ -44,7 +44,7 @@ const useMultiTreeDndkitConfig = ({
44
44
  const [active, setActive] = useState(null);
45
45
  const [over, setOver] = useState(null);
46
46
  const [dropIndicatorPosition, setDropIndicatorPosition] = useState(
47
- DropIndicatorPosition.None
47
+ DropIndicatorPosition.After
48
48
  );
49
49
  const sortedIds = useMemo(
50
50
  () => Object.keys(flattenedItems).reduce(
package/dist/esm/tree/useMultiTreeDndkitConfig.js.map CHANGED
@@ -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\nconst adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n // @todo we need to make it multi container functional\n const firstContainer = Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.None,\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: 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"],
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\nconst adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n const func: Modifier = ({ transform, activatorEvent, active }) => {\n const newTransform = {\n ...transform,\n };\n if (isHorizontalDnD) {\n newTransform.x = transform.x + 25;\n } else {\n newTransform.x = transform.x + 15;\n if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n // @todo we need to make it multi container functional\n const firstContainer = Object.keys(sortedIds)[0];\n const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];\n const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n newTransform.y = transform.y + keyboardTranslate;\n }\n }\n return newTransform;\n };\n return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n droppable: {\n strategy: MeasuringStrategy.Always,\n },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n flattenedItems,\n onReorder,\n isHorizontalDnD = false,\n isExpandable = false,\n getIsDropValid = () => true,\n maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n const [active, setActive] = useState<Active | null>(null);\n const [over, setOver] = useState<Over | null>(null);\n const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n DropIndicatorPosition.After,\n );\n // Sorted ids for the library\n const sortedIds = useMemo(\n () =>\n Object.keys(flattenedItems).reduce(\n (acc, curr) => {\n acc[curr] = flattenedItems[curr].map((item) => item.uid);\n return acc;\n },\n {} as Record<string, UniqueIdentifier[]>,\n ),\n [flattenedItems],\n );\n\n /**\n * List of unique containers\n */\n const containersRef = useRef([] as string[]);\n\n const visibleFlattenedItems = useMemo(() => {\n const dictionary: Record<string, DnDKitTree.Item<T>[]> = {};\n const collapsedItems: Record<UniqueIdentifier, boolean | undefined> = {};\n Object.keys(flattenedItems).forEach((container) => {\n const itemWithNoActiveChildren = removeChildrenOf(flattenedItems[container], active?.id);\n\n dictionary[container] = [];\n\n itemWithNoActiveChildren.forEach((item) => {\n if (item.parentId === null || !collapsedItems[item.parentId]) {\n dictionary[container].push(item);\n }\n collapsedItems[item.uid] = item.collapsed;\n });\n });\n return dictionary;\n }, [active?.id, flattenedItems]);\n\n /**\n * Dictionary from UID to ITEM\n * This dictionary is computed since on every DnD move, I need to know the\n * depth of a particular item, so O(1) per DnD move instead of O(#ITEMS)\n */\n const flattenedItemsDictionary = useMemo(() => {\n const dictionary: Record<UniqueIdentifier, TypescriptHelpersT.ObjectValues<typeof flattenedItems>[0]> = {};\n Object.keys(flattenedItems).forEach((container) => {\n flattenedItems[container].forEach((item) => {\n dictionary[item.uid] = item;\n if (!item.container) return;\n if (!containersRef.current.includes(item.container)) containersRef.current.push(item.container);\n });\n });\n return dictionary;\n }, [flattenedItems]);\n\n const isDropValid = useMemo(() => {\n if (!active || !over) return true;\n return getIsDropValid(\n flattenedItemsDictionary[active.id],\n flattenedItemsDictionary[over.id],\n dropIndicatorPosition,\n );\n }, [getIsDropValid, flattenedItemsDictionary, active, over, dropIndicatorPosition]);\n\n const modifiers: Modifier[] = useMemo(\n () => [adjustTranslate(isHorizontalDnD, sortedIds)],\n [isHorizontalDnD, sortedIds],\n );\n\n const sensorContext: DnDKitTree.SensorContext<T> = useRef({\n items: flattenedItems,\n dropIndicatorPosition,\n setDropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n });\n\n useEffect(() => {\n sensorContext.current = {\n items: flattenedItems,\n dropIndicatorPosition,\n isHorizontalDnD,\n maxDragAndDropLevel,\n active,\n flattenedItemsDictionary,\n containersRef,\n };\n }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);\n\n const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext), []);\n\n const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter }));\n\n // where is the activeItem being positioned (depth and parent)\n const projected = useMemo(\n () =>\n over && active\n ? getProjection(\n visibleFlattenedItems,\n flattenedItemsDictionary,\n over,\n dropIndicatorPosition,\n isExpandable,\n active,\n )\n : null,\n [over, visibleFlattenedItems, flattenedItemsDictionary, dropIndicatorPosition, isExpandable, active],\n );\n\n const dragPreviewHandlers = useTreePreviewHandlers({\n setActive,\n setOver,\n setDropIndicatorPosition,\n });\n\n const dragActionHandlers = useTreeActionHandlers({\n ...dragPreviewHandlers,\n onReorder,\n projected,\n flattenedItems,\n dropIndicatorPosition,\n isDropValid,\n flattenedItemsDictionary,\n containersRef,\n });\n\n const announcements = useTreeAnnouncements(flattenedItemsDictionary, dropIndicatorPosition);\n\n const collisionDetection = customCollisionDetection(sensorContext);\n\n const dndContextProps = useMemo(\n () => ({\n accessibility: {\n announcements,\n container: document.body,\n },\n modifiers,\n sensors,\n measuring,\n collisionDetection,\n ...dragActionHandlers,\n }),\n [announcements, modifiers, sensors, collisionDetection, dragActionHandlers],\n );\n\n const sortableContextProps = useMemo(\n () =>\n Object.keys(sortedIds).reduce(\n (acc, curr) => {\n acc[curr] = {\n items: sortedIds[curr],\n strategy: () => null,\n };\n return acc;\n },\n {} as Record<string, DnDKitTree.SortableContextPropsType>,\n ),\n [sortedIds],\n );\n\n const activeItem = useMemo(() => {\n if (!active) return null;\n return flattenedItemsDictionary[active.id];\n }, [active, flattenedItemsDictionary]);\n\n const overItem = useMemo(() => {\n if (!over) return null;\n return flattenedItemsDictionary[over.id];\n }, [flattenedItemsDictionary, over]);\n\n return {\n dndContextProps,\n sortableContextProps,\n isDropValid,\n active,\n activeItem,\n over,\n overItem,\n dropIndicatorPosition,\n };\n};\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-drag-and-drop",
3
- "version": "3.51.0-rc.9",
3
+ "version": "3.51.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Drag And Drop",
6
6
  "files": [
@@ -39,17 +39,17 @@
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.51.0-rc.9",
43
- "@elliemae/ds-props-helpers": "3.51.0-rc.9",
44
- "@elliemae/ds-system": "3.51.0-rc.9",
45
- "@elliemae/ds-tree-model": "3.51.0-rc.9",
46
- "@elliemae/ds-typescript-helpers": "3.51.0-rc.9"
42
+ "@elliemae/ds-fast-list": "3.51.1",
43
+ "@elliemae/ds-props-helpers": "3.51.1",
44
+ "@elliemae/ds-system": "3.51.1",
45
+ "@elliemae/ds-tree-model": "3.51.1",
46
+ "@elliemae/ds-typescript-helpers": "3.51.1"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@elliemae/pui-cli": "9.0.0-next.55",
50
50
  "jest": "~29.7.0",
51
51
  "styled-components": "~5.3.9",
52
- "@elliemae/ds-monorepo-devops": "3.51.0-rc.9"
52
+ "@elliemae/ds-monorepo-devops": "3.51.1"
53
53
  },
54
54
  "peerDependencies": {
55
55
  "lodash": "^4.17.21",