@elliemae/ds-drag-and-drop 3.62.1 → 3.70.0-alpha.9

package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js

@@ -79,7 +79,7 @@ const DSDragAndDrop = ({
     ),
     [items]
   );
-  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = (0, import_tree.useMultiTreeDndkitConfig)({
+  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, containerNodesRef } = (0, import_tree.useMultiTreeDndkitConfig)({
     flattenedItems: itemsFlattened,
     isHorizontalDnD: false,
     isExpandable: true,
@@ -89,8 +89,15 @@ const DSDragAndDrop = ({
     ...rest
   });
   const ctx = (0, import_react.useMemo)(
-    () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),
-    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps]
+    () => ({
+      sortableContextProps,
+      dropIndicatorPosition,
+      isDropValid,
+      items: itemsFlattened,
+      onCollapse,
+      containerNodes: containerNodesRef
+    }),
+    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps, containerNodesRef]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.DndContext, { ...dndContextProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableContainerContext.ContainersContext.Provider, { value: ctx, children }),

package/dist/cjs/parts/DSDragAndDrop/DSDragAndDrop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSDragAndDrop/DSDragAndDrop.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
-  "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;",
+  "sourcesContent": ["/* eslint-disable no-plusplus */\n/* eslint-disable max-params */\nimport React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { type UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DragOverlay, DndContext } from '@dnd-kit/core';\nimport { useMultiTreeDndkitConfig } from '../../tree/index.js';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSDragAndDropT, Item } from './react-desc-prop-types.js';\nimport { DSDragAndDropPropTypes } from './react-desc-prop-types.js';\n\nconst flatten = <T,>(\n  items: Item<T>[],\n  parentId: UniqueIdentifier | null = null,\n  depth = 0,\n  container = 'root',\n  iteration = { count: 0 },\n) =>\n  items.reduce((acc, item, index) => {\n    acc.push({\n      ...item,\n      uid: item.dsId,\n      childrenCount: item?.subitems?.length || 0,\n      original: item,\n      realIndex: iteration.count,\n      parentId,\n      depth,\n      index,\n      container,\n    });\n    if (item.subitems?.length > 0 && item.collapsed === false) {\n      acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));\n    }\n    iteration.count++;\n\n    return acc;\n  }, [] as Item<T>[]);\n\nexport const DSDragAndDrop = <T,>({\n  items,\n  children,\n  onReorder,\n  onCollapse,\n  DragOverlayRenderer,\n  maxDragAndDropLevel = 0,\n  ...rest\n}: DSDragAndDropT.Props<T>) => {\n  const itemsFlattened = useMemo(\n    () =>\n      Object.keys(items).reduce(\n        (acc, container) => {\n          acc[container] = flatten(items[container] as Item<T>[], null, 0, container);\n          return acc;\n        },\n        {} as Record<string, Item<T>[]>,\n      ),\n    [items],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid, containerNodesRef } =\n    useMultiTreeDndkitConfig({\n      flattenedItems: itemsFlattened,\n      isHorizontalDnD: false,\n      isExpandable: true,\n      onReorder,\n      maxDragAndDropLevel,\n      getIsDropValid: () => true,\n      ...rest,\n    });\n\n  const ctx = useMemo(\n    () => ({\n      sortableContextProps,\n      dropIndicatorPosition,\n      isDropValid,\n      items: itemsFlattened,\n      onCollapse,\n      containerNodes: containerNodesRef,\n    }),\n    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps, containerNodesRef],\n  );\n\n  return (\n    <DndContext {...dndContextProps}>\n      <ContainersContext.Provider value={ctx}>{children}</ContainersContext.Provider>\n      {createPortal(\n        <DragOverlay style={{ width: 'auto', zIndex: 1001 }} modifiers={[restrictToWindowEdges]}>\n          {active ? <DragOverlayRenderer activeItem={active} /> : null}\n        </DragOverlay>,\n        document.body,\n      )}\n    </DndContext>\n  );\n};\n\nconst DSDragAndDropWithSchema = describe(DSDragAndDrop);\n\nDSDragAndDropWithSchema.propTypes = DSDragAndDropPropTypes;\n\nexport { DSDragAndDropWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqFnB;AAnFJ,mBAA+B;AAC/B,uBAA6B;AAE7B,uBAAsC;AACtC,8BAAyB;AACzB,kBAAwC;AACxC,kBAAyC;AACzC,sCAAkC;AAElC,mCAAuC;AAEvC,MAAM,UAAU,CACd,OACA,WAAoC,MACpC,QAAQ,GACR,YAAY,QACZ,YAAY,EAAE,OAAO,EAAE,MAEvB,MAAM,OAAO,CAAC,KAAK,MAAM,UAAU;AACjC,MAAI,KAAK;AAAA,IACP,GAAG;AAAA,IACH,KAAK,KAAK;AAAA,IACV,eAAe,MAAM,UAAU,UAAU;AAAA,IACzC,UAAU;AAAA,IACV,WAAW,UAAU;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,KAAK,UAAU,SAAS,KAAK,KAAK,cAAc,OAAO;AACzD,QAAI,KAAK,GAAG,QAAQ,KAAK,UAAU,KAAK,MAAM,QAAQ,GAAG,WAAW,SAAS,CAAC;AAAA,EAChF;AACA,YAAU;AAEV,SAAO;AACT,GAAG,CAAC,CAAc;AAEb,MAAM,gBAAgB,CAAK;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,GAAG;AACL,MAA+B;AAC7B,QAAM,qBAAiB;AAAA,IACrB,MACE,OAAO,KAAK,KAAK,EAAE;AAAA,MACjB,CAAC,KAAK,cAAc;AAClB,YAAI,SAAS,IAAI,QAAQ,MAAM,SAAS,GAAgB,MAAM,GAAG,SAAS;AAC1E,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,aAAa,kBAAkB,QAC3G,sCAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM;AAAA,IACtB,GAAG;AAAA,EACL,CAAC;AAEH,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,gBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,sBAAsB,iBAAiB;AAAA,EAC1G;AAEA,SACE,6CAAC,0BAAY,GAAG,iBACd;AAAA,gDAAC,kDAAkB,UAAlB,EAA2B,OAAO,KAAM,UAAS;AAAA,QACjD;AAAA,MACC,4CAAC,2BAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,sCAAqB,GACnF,mBAAS,4CAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,8BAA0B,kCAAS,aAAa;AAEtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/cjs/parts/DSDragAndDrop/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSDragAndDrop/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport { type Active } from '../../index.js';\n\nexport type DnDReOrder<T> = DnDKitTree.OnReorder<T>;\n\nexport type ItemProp<T> = {\n  dsId: number | string;\n  subitems?: ItemProp<T>[] | [];\n} & T;\n\n// opinionated item type\nexport type Item<T> = DnDKitTree.Item<T> & {\n  dsId: number | string;\n  subitems?: Item<T>[];\n} & T;\n\nexport declare namespace DSDragAndDropT {\n  export interface RequiredProps<T> {\n    items: Record<string, ItemProp<T>[]>;\n    onReorder: DnDKitTree.OnReorder<T>;\n    children: React.ReactNode;\n    DragOverlayRenderer: React.ComponentType<{ activeItem: Active }>;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    onCollapse?: (nodeId: string) => void;\n    maxDragAndDropLevel?: number;\n  }\n\n  export interface Props<T> extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps<T> {}\n\n  export interface InternalProps<T> extends DefaultProps, OptionalProps, XstyledProps, RequiredProps<T> {}\n}\n\nexport const defaultProps: DSDragAndDropT.DefaultProps = {};\n\nexport const DSDragAndDropPropTypes = {\n  items: PropTypes.object.description('The items to be rendered in the drag and drop container').isRequired,\n  onReorder: PropTypes.func.description('The function to be called when an item is reordered').isRequired,\n  children: PropTypes.node.description('The children to be rendered in the drag and drop container').isRequired,\n  DragOverlayRenderer: PropTypes.node.description('The component to be rendered as the drag overlay').isRequired,\n  onCollapse: PropTypes.func.description('The function to be called when an item is collapsed'),\n  maxDragAndDropLevel: PropTypes.number.description('The maximum level of drag and drop'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAqCnB,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,OAAO,kCAAU,OAAO,YAAY,yDAAyD,EAAE;AAAA,EAC/F,WAAW,kCAAU,KAAK,YAAY,qDAAqD,EAAE;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4DAA4D,EAAE;AAAA,EACnG,qBAAqB,kCAAU,KAAK,YAAY,kDAAkD,EAAE;AAAA,EACpG,YAAY,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,qBAAqB,kCAAU,OAAO,YAAY,oCAAoC;AACxF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport { type Active } from '../../index.js';\n\nexport type DnDReOrder<T> = DnDKitTree.OnReorder<T>;\n\nexport type ItemProp<T> = {\n  dsId: number | string;\n  subitems?: ItemProp<T>[] | [];\n} & T;\n\n// opinionated item type\nexport type Item<T> = DnDKitTree.Item<T> & {\n  dsId: number | string;\n  subitems?: Item<T>[];\n} & T;\n\nexport declare namespace DSDragAndDropT {\n  export interface RequiredProps<T> {\n    items: Record<string, ItemProp<T>[]>;\n    onReorder: DnDKitTree.OnReorder<T>;\n    children: React.ReactNode;\n    DragOverlayRenderer: React.ComponentType<{ activeItem: Active }>;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    onCollapse?: (nodeId: string) => void;\n    maxDragAndDropLevel?: number;\n  }\n\n  export interface Props<T> extends Partial<DefaultProps>, OptionalProps, XstyledProps, RequiredProps<T> {}\n\n  export interface InternalProps<T> extends DefaultProps, OptionalProps, XstyledProps, RequiredProps<T> {}\n}\n\nexport const defaultProps: DSDragAndDropT.DefaultProps = {};\n\nexport const DSDragAndDropPropTypes = {\n  items: PropTypes.object.description('The items to be rendered in the drag and drop container').isRequired,\n  onReorder: PropTypes.func.description('The function to be called when an item is reordered').isRequired,\n  children: PropTypes.node.description('The children to be rendered in the drag and drop container').isRequired,\n  DragOverlayRenderer: PropTypes.node.description('The component to be rendered as the drag overlay').isRequired,\n  onCollapse: PropTypes.func.description('The function to be called when an item is collapsed'),\n  maxDragAndDropLevel: PropTypes.number.description('The maximum level of drag and drop'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAqCnB,MAAM,eAA4C,CAAC;AAEnD,MAAM,yBAAyB;AAAA,EACpC,OAAO,kCAAU,OAAO,YAAY,yDAAyD,EAAE;AAAA,EAC/F,WAAW,kCAAU,KAAK,YAAY,qDAAqD,EAAE;AAAA,EAC7F,UAAU,kCAAU,KAAK,YAAY,4DAA4D,EAAE;AAAA,EACnG,qBAAqB,kCAAU,KAAK,YAAY,kDAAkD,EAAE;AAAA,EACpG,YAAY,kCAAU,KAAK,YAAY,qDAAqD;AAAA,EAC5F,qBAAqB,kCAAU,OAAO,YAAY,oCAAoC;AACxF;",
   "names": []
 }

package/dist/cjs/parts/DSDropIndicator/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSDropIndicator/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n};\n\nexport declare namespace DSDropIndicatorT {\n  export type DropIndicatorPositionT = (typeof DropIndicatorPosition)[keyof typeof DropIndicatorPosition] | false;\n\n  export interface RequiredProps {\n    vertical: boolean;\n    dropIndicatorPosition: DropIndicatorPositionT;\n    isDropValid: boolean;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    isLast?: boolean;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const DSDropIndicatorPropTypes = {\n  vertical: PropTypes.bool.description('Whether the drop indicator is vertical.').isRequired,\n  dropIndicatorPosition: PropTypes.oneOf(Object.values(DropIndicatorPosition)).description(\n    'The position of the drop indicator.',\n  ).isRequired,\n  isDropValid: PropTypes.bool.description('Whether the drop is valid.').isRequired,\n  isLast: PropTypes.bool.description('Whether the drop indicator is the last one.'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAEnB,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAsBO,MAAM,2BAA2B;AAAA,EACtC,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE;AAAA,EAChF,uBAAuB,kCAAU,MAAM,OAAO,OAAO,qBAAqB,CAAC,EAAE;AAAA,IAC3E;AAAA,EACF,EAAE;AAAA,EACF,aAAa,kCAAU,KAAK,YAAY,4BAA4B,EAAE;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAClF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport { PropTypes } from '@elliemae/ds-props-helpers';\n\nexport const DropIndicatorPosition = {\n  None: 'none',\n  Before: 'before',\n  After: 'after',\n  Inside: 'inside',\n};\n\nexport declare namespace DSDropIndicatorT {\n  export type DropIndicatorPositionT = (typeof DropIndicatorPosition)[keyof typeof DropIndicatorPosition] | false;\n\n  export interface RequiredProps {\n    vertical: boolean;\n    dropIndicatorPosition: DropIndicatorPositionT;\n    isDropValid: boolean;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    isLast?: boolean;\n  }\n\n  export interface Props extends Partial<DefaultProps>, OptionalProps, RequiredProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps, RequiredProps {}\n}\n\nexport const DSDropIndicatorPropTypes = {\n  vertical: PropTypes.bool.description('Whether the drop indicator is vertical.').isRequired,\n  dropIndicatorPosition: PropTypes.oneOf(Object.values(DropIndicatorPosition)).description(\n    'The position of the drop indicator.',\n  ).isRequired,\n  isDropValid: PropTypes.bool.description('Whether the drop is valid.').isRequired,\n  isLast: PropTypes.bool.description('Whether the drop indicator is the last one.'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AAEnB,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAsBO,MAAM,2BAA2B;AAAA,EACtC,UAAU,kCAAU,KAAK,YAAY,yCAAyC,EAAE;AAAA,EAChF,uBAAuB,kCAAU,MAAM,OAAO,OAAO,qBAAqB,CAAC,EAAE;AAAA,IAC3E;AAAA,EACF,EAAE;AAAA,EACF,aAAa,kCAAU,KAAK,YAAY,4BAA4B,EAAE;AAAA,EACtE,QAAQ,kCAAU,KAAK,YAAY,6CAA6C;AAClF;",
   "names": []
 }

package/dist/cjs/parts/DSSortableContainer/DSSortableContainer.js

@@ -66,8 +66,15 @@ const DSSortableContainer = (props) => {
     id: containerId
   });
   const ctx = (0, import_react.useContext)(import_SortableContainerContext.ContainersContext);
-  const { sortableContextProps, items } = ctx;
+  const { sortableContextProps, items, containerNodes } = ctx;
   const containerSortableContextProps = sortableContextProps[containerId];
+  const registerNodeRef = (0, import_react.useCallback)(
+    (node) => {
+      setNodeRef(node);
+      if (containerNodes) containerNodes.current[containerId] = node;
+    },
+    [setNodeRef, containerNodes, containerId]
+  );
   const render = (0, import_react.useMemo)(() => {
     if (children) {
       return children;
@@ -89,7 +96,7 @@ const DSSortableContainer = (props) => {
     }
     return null;
   }, [ItemRenderer, children, containerId, extraItemProps, items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { ...containerSortableContextProps, id: "container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: setNodeRef, isOver, children: render }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { ...containerSortableContextProps, id: "container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: registerNodeRef, isOver, children: render }) });
 };
 const DSSortableContainerSchema = (0, import_ds_props_helpers.describe)(DSSortableContainer);
 DSSortableContainerSchema.propTypes = import_react_desc_prop_types.DSSortalContainerPropTypes;

package/dist/cjs/parts/DSSortableContainer/DSSortableContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSSortableContainer/DSSortableContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { DSSortableItem } from '../DSSortableItem/index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nimport { ContainersContext } from './config/SortableContainerContext.js';\nimport type { Item } from '../DSDragAndDrop/index.js';\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n  const { index, extraItemProps } = props;\n  if (!extraItemProps) {\n    return null;\n  }\n  const { items, ItemRenderer, ...rest } = extraItemProps;\n  const item = items[index];\n  return (\n    <DSSortableItem\n      item={item}\n      ItemRenderer={\n        ItemRenderer as React.ComponentType<\n          ItemRendererPropsT<\n            T,\n            { items: Item<T>[]; extraItemProps: K; ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>> }\n          >\n        >\n      }\n      {...rest}\n      extraItemProps={extraItemProps}\n    />\n  );\n};\n\nconst ContainerItemRendererMemoized = React.memo(ContainerItemRenderer);\n\nexport const DSSortableContainer = <T, K>(props: DSSortableContainerT.Props<T, K>) => {\n  const { containerId, ItemRenderer, Component, extraItemProps, children } = props;\n  const { setNodeRef, isOver } = useDroppable({\n    id: containerId,\n  });\n  const ctx = useContext(ContainersContext);\n  const { sortableContextProps, items } = ctx;\n  const containerSortableContextProps = sortableContextProps[containerId];\n\n  const render = useMemo(() => {\n    if (children) {\n      return children;\n    }\n    if (ItemRenderer) {\n      return (\n        <DSFastList\n          count={items[containerId].length}\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n          ItemRenderer={ContainerItemRendererMemoized as any}\n          extraItemProps={{\n            items: items[containerId],\n            ItemRenderer: ItemRenderer as React.ComponentType<ItemRendererPropsT<unknown, unknown>>,\n            extraItemProps,\n          }}\n          getId={(index: number | string) => items[containerId][index as number].dsId}\n        />\n      );\n    }\n    return null;\n  }, [ItemRenderer, children, containerId, extraItemProps, items]);\n\n  return (\n    <SortableContext {...containerSortableContextProps} id=\"container\">\n      <Component innerRef={setNodeRef} isOver={isOver}>\n        {render}\n      </Component>\n    </SortableContext>\n  );\n};\n\nconst DSSortableContainerSchema = describe(DSSortableContainer);\nDSSortableContainerSchema.propTypes = DSSortalContainerPropTypes;\n\nexport { DSSortableContainerSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAnBJ,mBAA2C;AAC3C,0BAA2B;AAC3B,8BAAyB;AACzB,kBAA6B;AAC7B,sBAAgC;AAChC,4BAA+B;AAE/B,mCAA2C;AAE3C,sCAAkC;AAElC,MAAM,wBAAwB,CAAO,UAA6D;AAChG,QAAM,EAAE,OAAO,eAAe,IAAI;AAClC,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AACA,QAAM,EAAE,OAAO,cAAc,GAAG,KAAK,IAAI;AACzC,QAAM,OAAO,MAAM,KAAK;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAQC,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,gCAAgC,aAAAA,QAAM,KAAK,qBAAqB;AAE/D,MAAM,sBAAsB,CAAO,UAA4C;AACpF,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,IAAI;AAC3E,QAAM,EAAE,YAAY,OAAO,QAAI,0BAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,UAAM,yBAAW,iDAAiB;AACxC,QAAM,EAAE,sBAAsB,MAAM,IAAI;AACxC,QAAM,gCAAgC,qBAAqB,WAAW;AAEtE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,cAAc;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,WAAW,EAAE;AAAA,UAE1B,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd,OAAO,MAAM,WAAW;AAAA,YACxB;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO,CAAC,UAA2B,MAAM,WAAW,EAAE,KAAe,EAAE;AAAA;AAAA,MACzE;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,UAAU,aAAa,gBAAgB,KAAK,CAAC;AAE/D,SACE,4CAAC,mCAAiB,GAAG,+BAA+B,IAAG,aACrD,sDAAC,aAAU,UAAU,YAAY,QAC9B,kBACH,GACF;AAEJ;AAEA,MAAM,gCAA4B,kCAAS,mBAAmB;AAC9D,0BAA0B,YAAY;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext } from '@dnd-kit/sortable';\nimport { DSSortableItem } from '../DSSortableItem/index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nimport { ContainersContext } from './config/SortableContainerContext.js';\nimport type { Item } from '../DSDragAndDrop/index.js';\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n  const { index, extraItemProps } = props;\n  if (!extraItemProps) {\n    return null;\n  }\n  const { items, ItemRenderer, ...rest } = extraItemProps;\n  const item = items[index];\n  return (\n    <DSSortableItem\n      item={item}\n      ItemRenderer={\n        ItemRenderer as React.ComponentType<\n          ItemRendererPropsT<\n            T,\n            { items: Item<T>[]; extraItemProps: K; ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>> }\n          >\n        >\n      }\n      {...rest}\n      extraItemProps={extraItemProps}\n    />\n  );\n};\n\nconst ContainerItemRendererMemoized = React.memo(ContainerItemRenderer);\n\nexport const DSSortableContainer = <T, K>(props: DSSortableContainerT.Props<T, K>) => {\n  const { containerId, ItemRenderer, Component, extraItemProps, children } = props;\n  const { setNodeRef, isOver } = useDroppable({\n    id: containerId,\n  });\n  const ctx = useContext(ContainersContext);\n  const { sortableContextProps, items, containerNodes } = ctx;\n  const containerSortableContextProps = sortableContextProps[containerId];\n\n  // Register the container's DOM node so screen-reader announcements can resolve its accessible\n  // name (aria-label / aria-labelledby) when the item is moved into this container.\n  const registerNodeRef = useCallback(\n    (node: HTMLElement | null) => {\n      setNodeRef(node);\n      if (containerNodes) containerNodes.current[containerId] = node;\n    },\n    [setNodeRef, containerNodes, containerId],\n  );\n\n  const render = useMemo(() => {\n    if (children) {\n      return children;\n    }\n    if (ItemRenderer) {\n      return (\n        <DSFastList\n          count={items[containerId].length}\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any\n          ItemRenderer={ContainerItemRendererMemoized as any}\n          extraItemProps={{\n            items: items[containerId],\n            ItemRenderer: ItemRenderer as React.ComponentType<ItemRendererPropsT<unknown, unknown>>,\n            extraItemProps,\n          }}\n          getId={(index: number | string) => items[containerId][index as number].dsId}\n        />\n      );\n    }\n    return null;\n  }, [ItemRenderer, children, containerId, extraItemProps, items]);\n\n  return (\n    <SortableContext {...containerSortableContextProps} id=\"container\">\n      <Component innerRef={registerNodeRef} isOver={isOver}>\n        {render}\n      </Component>\n    </SortableContext>\n  );\n};\n\nconst DSSortableContainerSchema = describe(DSSortableContainer);\nDSSortableContainerSchema.propTypes = DSSortalContainerPropTypes;\n\nexport { DSSortableContainerSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAnBJ,mBAAwD;AACxD,0BAA2B;AAC3B,8BAAyB;AACzB,kBAA6B;AAC7B,sBAAgC;AAChC,4BAA+B;AAE/B,mCAA2C;AAE3C,sCAAkC;AAElC,MAAM,wBAAwB,CAAO,UAA6D;AAChG,QAAM,EAAE,OAAO,eAAe,IAAI;AAClC,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AACA,QAAM,EAAE,OAAO,cAAc,GAAG,KAAK,IAAI;AACzC,QAAM,OAAO,MAAM,KAAK;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAQC,GAAG;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,gCAAgC,aAAAA,QAAM,KAAK,qBAAqB;AAE/D,MAAM,sBAAsB,CAAO,UAA4C;AACpF,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,IAAI;AAC3E,QAAM,EAAE,YAAY,OAAO,QAAI,0BAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,UAAM,yBAAW,iDAAiB;AACxC,QAAM,EAAE,sBAAsB,OAAO,eAAe,IAAI;AACxD,QAAM,gCAAgC,qBAAqB,WAAW;AAItE,QAAM,sBAAkB;AAAA,IACtB,CAAC,SAA6B;AAC5B,iBAAW,IAAI;AACf,UAAI,eAAgB,gBAAe,QAAQ,WAAW,IAAI;AAAA,IAC5D;AAAA,IACA,CAAC,YAAY,gBAAgB,WAAW;AAAA,EAC1C;AAEA,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,cAAc;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM,WAAW,EAAE;AAAA,UAE1B,cAAc;AAAA,UACd,gBAAgB;AAAA,YACd,OAAO,MAAM,WAAW;AAAA,YACxB;AAAA,YACA;AAAA,UACF;AAAA,UACA,OAAO,CAAC,UAA2B,MAAM,WAAW,EAAE,KAAe,EAAE;AAAA;AAAA,MACzE;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,UAAU,aAAa,gBAAgB,KAAK,CAAC;AAE/D,SACE,4CAAC,mCAAiB,GAAG,+BAA+B,IAAG,aACrD,sDAAC,aAAU,UAAU,iBAAiB,QACnC,kBACH,GACF;AAEJ;AAEA,MAAM,gCAA4B,kCAAS,mBAAmB;AAC9D,0BAA0B,YAAY;",
   "names": ["React"]
 }

package/dist/cjs/parts/DSSortableContainer/config/SortableContainerContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSSortableContainer/config/SortableContainerContext.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DnDKitTree } from '../../../tree/types.js';\nimport type { DSSortableContainerT } from '../react-desc-prop-types.js';\n\ninterface ContainerContextT<T> {\n  isDropValid?: boolean;\n  dropIndicatorPosition?: string;\n  sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;\n  items: Record<string, DSSortableContainerT.Item<T>[]>;\n  onCollapse?: (nodeId: string) => void;\n}\n\nexport function createContainerContext<T>() {\n  return createContext<ContainerContextT<T>>({\n    sortableContextProps: {},\n    items: {},\n  });\n}\n\nexport const ContainersContext = createContainerContext();\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAYvB,SAAS,yBAA4B;AAC1C,aAAO,4BAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,oBAAoB,uBAAuB;",
+  "sourcesContent": ["import { createContext, type MutableRefObject } from 'react';\nimport type { DnDKitTree } from '../../../tree/types.js';\nimport type { DSSortableContainerT } from '../react-desc-prop-types.js';\n\ninterface ContainerContextT<T> {\n  isDropValid?: boolean;\n  dropIndicatorPosition?: string;\n  sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;\n  items: Record<string, DSSortableContainerT.Item<T>[]>;\n  onCollapse?: (nodeId: string) => void;\n  containerNodes?: MutableRefObject<Record<string, HTMLElement | null>>;\n}\n\nexport function createContainerContext<T>() {\n  return createContext<ContainerContextT<T>>({\n    sortableContextProps: {},\n    items: {},\n  });\n}\n\nexport const ContainersContext = createContainerContext();\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AAa9C,SAAS,yBAA4B;AAC1C,aAAO,4BAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,oBAAoB,uBAAuB;",
   "names": []
 }

package/dist/cjs/parts/DSSortableContainer/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSSortableContainer/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nexport declare namespace DSSortableContainerT {\n  export interface WrapperComponentProps {\n    innerRef: React.MutableRefObject<HTMLDivElement | null> | ((ref: HTMLDivElement | null) => void);\n    isOver: boolean;\n    children: React.ReactNode;\n  }\n  export interface RequiredProps {\n    containerId: UniqueIdentifier;\n    Component: React.ComponentType<WrapperComponentProps>;\n  }\n\n  export interface ContainerItemRendererT<T, K> {\n    extraItemProps?: {\n      items: Item<T>[];\n      extraItemProps: K;\n      ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>>;\n    };\n    index: number;\n  }\n\n  export type ItemProp<T> = {\n    dsId: number | string;\n    subitems: ItemProp<T>[];\n  } & T;\n\n  // opinionated item type\n  export type Item<T> = DnDKitTree.Item<T> & {\n    dsId: number | string;\n    subitems: Item<T>[];\n  } & T;\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps<T, K> {\n    items?: Record<string, Item<T>[]>;\n    extraItemProps?: K;\n    ItemRenderer?: React.ComponentType<ItemRendererPropsT<T, K>>;\n    children?: React.ReactNode;\n  }\n\n  export interface Props<T, K> extends Partial<DefaultProps>, OptionalProps<T, K>, XstyledProps, RequiredProps {}\n\n  export interface InternalProps<T, K> extends DefaultProps, OptionalProps<T, K>, XstyledProps, RequiredProps {}\n}\n\nexport const DSSortalContainerPropTypes = {\n  containerId: PropTypes.string.description('The id of the container').isRequired,\n  Component: PropTypes.node.description('The component to be rendered as the container').isRequired,\n  children: PropTypes.node.description('The children to be rendered in the container'),\n  items: PropTypes.object.description('The items to be rendered in the container'),\n  extraItemProps: PropTypes.object.description('The extra item props to be passed to the item renderer'),\n  ItemRenderer: PropTypes.node.description('The item renderer to be used'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,8BAA0B;AAgDnB,MAAM,6BAA6B;AAAA,EACxC,aAAa,kCAAU,OAAO,YAAY,yBAAyB,EAAE;AAAA,EACrE,WAAW,kCAAU,KAAK,YAAY,+CAA+C,EAAE;AAAA,EACvF,UAAU,kCAAU,KAAK,YAAY,8CAA8C;AAAA,EACnF,OAAO,kCAAU,OAAO,YAAY,2CAA2C;AAAA,EAC/E,gBAAgB,kCAAU,OAAO,YAAY,wDAAwD;AAAA,EACrG,cAAc,kCAAU,KAAK,YAAY,8BAA8B;AACzE;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport type { UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.js';\nexport declare namespace DSSortableContainerT {\n  export interface WrapperComponentProps {\n    innerRef: React.MutableRefObject<HTMLDivElement | null> | ((ref: HTMLDivElement | null) => void);\n    isOver: boolean;\n    children: React.ReactNode;\n  }\n  export interface RequiredProps {\n    containerId: UniqueIdentifier;\n    Component: React.ComponentType<WrapperComponentProps>;\n  }\n\n  export interface ContainerItemRendererT<T, K> {\n    extraItemProps?: {\n      items: Item<T>[];\n      extraItemProps: K;\n      ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>>;\n    };\n    index: number;\n  }\n\n  export type ItemProp<T> = {\n    dsId: number | string;\n    subitems: ItemProp<T>[];\n  } & T;\n\n  // opinionated item type\n  export type Item<T> = DnDKitTree.Item<T> & {\n    dsId: number | string;\n    subitems: Item<T>[];\n  } & T;\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps<T, K> {\n    items?: Record<string, Item<T>[]>;\n    extraItemProps?: K;\n    ItemRenderer?: React.ComponentType<ItemRendererPropsT<T, K>>;\n    children?: React.ReactNode;\n  }\n\n  export interface Props<T, K> extends Partial<DefaultProps>, OptionalProps<T, K>, XstyledProps, RequiredProps {}\n\n  export interface InternalProps<T, K> extends DefaultProps, OptionalProps<T, K>, XstyledProps, RequiredProps {}\n}\n\nexport const DSSortalContainerPropTypes = {\n  containerId: PropTypes.string.description('The id of the container').isRequired,\n  Component: PropTypes.node.description('The component to be rendered as the container').isRequired,\n  children: PropTypes.node.description('The children to be rendered in the container'),\n  items: PropTypes.object.description('The items to be rendered in the container'),\n  extraItemProps: PropTypes.object.description('The extra item props to be passed to the item renderer'),\n  ItemRenderer: PropTypes.node.description('The item renderer to be used'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAA0B;AAgDnB,MAAM,6BAA6B;AAAA,EACxC,aAAa,kCAAU,OAAO,YAAY,yBAAyB,EAAE;AAAA,EACrE,WAAW,kCAAU,KAAK,YAAY,+CAA+C,EAAE;AAAA,EACvF,UAAU,kCAAU,KAAK,YAAY,8CAA8C;AAAA,EACnF,OAAO,kCAAU,OAAO,YAAY,2CAA2C;AAAA,EAC/E,gBAAgB,kCAAU,OAAO,YAAY,wDAAwD;AAAA,EACrG,cAAc,kCAAU,KAAK,YAAY,8BAA8B;AACzE;",
   "names": []
 }

package/dist/cjs/parts/DSSortableItem/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSSortableItem/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\n/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { useSortable } from '../../index.js';\nimport type { Item, ItemProp } from '../DSDragAndDrop/index.js';\nexport type DraggablePropsT = ReturnType<typeof useSortable> & {\n  shouldShowDropIndicatorPosition: boolean;\n  dropIndicatorPosition: string;\n  isDropValid: boolean;\n};\n\nexport interface ItemRendererPropsT<T, K> {\n  item: Item<T>;\n  draggableProps: DraggablePropsT;\n  onCollapse?: (nodeId: string) => void;\n  extraItemProps: K;\n}\n\n// export interface ItemRendererT<T, K> {\n//   item: ItemProp<T>;\n//   draggableProps: DraggablePropsT;\n//   onCollapse?: (nodeId: number) => void;\n//   extraItemProps: K;\n// }\n\nexport declare namespace DSSortableItemT {\n  export interface RequiredProps<T, K> {\n    ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>>;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps<T, K> {\n    item?: ItemProp<T>;\n    extraItemProps?: K;\n    index?: number;\n    containerId?: string;\n  }\n\n  export interface Props<T, K> extends Partial<DefaultProps>, OptionalProps<T, K>, RequiredProps<T, K> {}\n\n  export interface InternalProps<T, K> extends DefaultProps, OptionalProps<T, K>, RequiredProps<T, K> {}\n}\n\nexport const DSSortalItemPropTypes = {\n  item: PropTypes.object.description('The item to be rendered').isRequired,\n  ItemRenderer: PropTypes.node.description('The item renderer to be used').isRequired,\n  extraItemProps: PropTypes.object.description('The extra item props to be passed to the item renderer'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AA0CnB,MAAM,wBAAwB;AAAA,EACnC,MAAM,kCAAU,OAAO,YAAY,yBAAyB,EAAE;AAAA,EAC9D,cAAc,kCAAU,KAAK,YAAY,8BAA8B,EAAE;AAAA,EACzE,gBAAgB,kCAAU,OAAO,YAAY,wDAAwD;AACvG;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { useSortable } from '../../index.js';\nimport type { Item, ItemProp } from '../DSDragAndDrop/index.js';\nexport type DraggablePropsT = ReturnType<typeof useSortable> & {\n  shouldShowDropIndicatorPosition: boolean;\n  dropIndicatorPosition: string;\n  isDropValid: boolean;\n};\n\nexport interface ItemRendererPropsT<T, K> {\n  item: Item<T>;\n  draggableProps: DraggablePropsT;\n  onCollapse?: (nodeId: string) => void;\n  extraItemProps: K;\n}\n\n// export interface ItemRendererT<T, K> {\n//   item: ItemProp<T>;\n//   draggableProps: DraggablePropsT;\n//   onCollapse?: (nodeId: number) => void;\n//   extraItemProps: K;\n// }\n\nexport declare namespace DSSortableItemT {\n  export interface RequiredProps<T, K> {\n    ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>>;\n  }\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps<T, K> {\n    item?: ItemProp<T>;\n    extraItemProps?: K;\n    index?: number;\n    containerId?: string;\n  }\n\n  export interface Props<T, K> extends Partial<DefaultProps>, OptionalProps<T, K>, RequiredProps<T, K> {}\n\n  export interface InternalProps<T, K> extends DefaultProps, OptionalProps<T, K>, RequiredProps<T, K> {}\n}\n\nexport const DSSortalItemPropTypes = {\n  item: PropTypes.object.description('The item to be rendered').isRequired,\n  ItemRenderer: PropTypes.node.description('The item renderer to be used').isRequired,\n  extraItemProps: PropTypes.object.description('The extra item props to be passed to the item renderer'),\n} as React.WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAA0B;AA0CnB,MAAM,wBAAwB;AAAA,EACnC,MAAM,kCAAU,OAAO,YAAY,yBAAyB,EAAE;AAAA,EAC9D,cAAc,kCAAU,KAAK,YAAY,8BAA8B,EAAE;AAAA,EACzE,gBAAgB,kCAAU,OAAO,YAAY,wDAAwD;AACvG;",
   "names": []
 }

package/dist/cjs/tree/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tree/types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type {\n  Active,\n  Announcements,\n  CollisionDetection,\n  DragCancelEvent,\n  DragEndEvent,\n  DragMoveEvent,\n  DragOverEvent,\n  DragStartEvent,\n  DroppableContainers,\n  MeasuringConfiguration,\n  Modifier,\n  Over,\n  ClientRect,\n  UniqueIdentifier,\n  SensorDescriptor,\n  SensorOptions,\n} from '@dnd-kit/core';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport type { RectMap } from '@dnd-kit/core/dist/store';\nimport type { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { Dispatch, SetStateAction, MutableRefObject } from 'react';\nimport type { DropIndicatorPosition } from './constants.js';\n\nexport namespace DnDKitTree {\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type Item<T> = {\n    uid: UniqueIdentifier;\n    depth: number;\n    parentId: UniqueIdentifier | null;\n    realIndex: number;\n    childrenCount: number;\n    original: T;\n    container?: string;\n    subitems: Item<T>[];\n    index: number;\n    collapsed?: boolean;\n  };\n\n  export type DragEventData = {\n    dropIndicatorPosition: DropIndicatorPositionValues;\n  };\n\n  type OnDragStart = (e: DragStartEvent) => void;\n  type OnDragMove = (e: DragMoveEvent) => void;\n  type OnDragOver = (e: DragOverEvent) => void;\n  type OnDragEnd = (e: DragEndEvent) => void;\n  type OnDragCancel = (e: DragCancelEvent) => void;\n\n  export type GetIsDropValid<T> = (\n    active: Item<T>,\n    over: Item<T>,\n    dropIndicatorPosition: DropIndicatorPositionValues,\n  ) => boolean;\n\n  export type OnReorder<T> = (\n    active: Item<T>,\n    targetIndex: number,\n    metadata: {\n      over: Item<T>;\n      fromIndex: number;\n      considerExpanding: UniqueIdentifier | null;\n      movedData: Record<string, Item<T>[]>;\n      overContainer: UniqueIdentifier;\n      projectedMove: {\n        depth: number;\n        parentId: UniqueIdentifier | null;\n        position?: number;\n      };\n      flattenedItems: Record<string, Item<T>[]>;\n    },\n  ) => void;\n\n  // =============================================================================\n  // PREVIEW HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseTreePreviewHandlersArgs = {\n    setActive: Dispatch<SetStateAction<Active | null>>;\n    setOver: Dispatch<SetStateAction<Over | null>>;\n    setDropIndicatorPosition: Dispatch<SetStateAction<DropIndicatorPositionValues>>;\n  };\n\n  export type UseTreePreviewHandlersReturn = {\n    handlePreviewDragStart: OnDragStart;\n    handlePreviewDragMove: OnDragMove;\n    handlePreviewDragOver: OnDragOver;\n    handlePreviewDragEnd: OnDragEnd;\n    handlePreviewDragCancel: OnDragCancel;\n  };\n\n  // =============================================================================\n  // ACTION HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseTreeActionHandlersArgs<T> = UseTreePreviewHandlersReturn & {\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    flattenedItems: Record<string, Item<T>[]>;\n    projected: {\n      depth: number;\n      parentId: UniqueIdentifier | null;\n      position?: number;\n    } | null;\n    onReorder: OnReorder<T>;\n    isDropValid: boolean;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n    containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n  };\n\n  export type UseTreeActionHandlersReturn = {\n    onDragStart: OnDragStart;\n    onDragMove: OnDragMove;\n    onDragOver: OnDragOver;\n    onDragEnd: OnDragEnd;\n    onDragCancel: OnDragCancel;\n  };\n\n  // =============================================================================\n  // DND, SORTABLE AND SENSOR CONTEXT PROPS TYPES\n  // =============================================================================\n\n  export type DndContextPropsType = {\n    accessibility: { announcements: Announcements; container: HTMLElement };\n    modifiers: Modifier[];\n    sensors: SensorDescriptor<SensorOptions>[];\n    measuring: Partial<MeasuringConfiguration>;\n    collisionDetection: CollisionDetection;\n  } & UseTreeActionHandlersReturn;\n\n  export type SortableContextPropsType = {\n    items: UniqueIdentifier[];\n    strategy: SortingStrategy;\n  };\n\n  export type SensorContext<T> = MutableRefObject<{\n    items: Record<string, Item<T>[]>;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    isHorizontalDnD: boolean;\n    maxDragAndDropLevel: number;\n    active: Active | null;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n    containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n  }>;\n\n  // =============================================================================\n  // KEYBOARD GETTER TYPE\n  // =============================================================================\n\n  export type GetKeyboardCoordinatesArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]>;\n    active: Active;\n    over: Over;\n    event: KeyboardEvent;\n    currentCoordinates: Coordinates;\n    droppableRects: RectMap;\n    droppableContainers: DroppableContainers;\n    collisionRect: ClientRect;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    maxDragAndDropLevel: number;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n  };\n\n  // =============================================================================\n  // TREE DNDKIT HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseMultiTreeConfigArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]>;\n    onReorder: OnReorder<T>;\n    isHorizontalDnD?: boolean;\n    isExpandable?: boolean;\n    getIsDropValid?: GetIsDropValid<T>;\n    maxDragAndDropLevel?: number;\n  };\n\n  export type UseTreeConfigArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]> | Omit<Item<T>, 'container'>[];\n    onReorder: OnReorder<T>;\n    isHorizontalDnD?: boolean;\n    isExpandable?: boolean;\n    getIsDropValid?: GetIsDropValid<T>;\n    maxDragAndDropLevel?: number;\n  };\n\n  export type UseTreeConfigReturn<T> = {\n    dndContextProps: DndContextPropsType;\n    sortableContextProps: Record<string, SortableContextPropsType>;\n    active: Active | null;\n    activeItem: DnDKitTree.Item<T> | null;\n    over: Over | null;\n    overItem: DnDKitTree.Item<T> | null;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    isDropValid: boolean;\n  };\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type {\n  Active,\n  Announcements,\n  CollisionDetection,\n  DragCancelEvent,\n  DragEndEvent,\n  DragMoveEvent,\n  DragOverEvent,\n  DragStartEvent,\n  DroppableContainers,\n  MeasuringConfiguration,\n  Modifier,\n  Over,\n  ClientRect,\n  UniqueIdentifier,\n  SensorDescriptor,\n  SensorOptions,\n} from '@dnd-kit/core';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { SortingStrategy } from '@dnd-kit/sortable';\nimport type { RectMap } from '@dnd-kit/core/dist/store';\nimport type { Coordinates } from '@dnd-kit/core/dist/types';\nimport type { Dispatch, SetStateAction, MutableRefObject } from 'react';\nimport type { DropIndicatorPosition } from './constants.js';\n\nexport namespace DnDKitTree {\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type Item<T> = {\n    uid: UniqueIdentifier;\n    depth: number;\n    parentId: UniqueIdentifier | null;\n    realIndex: number;\n    childrenCount: number;\n    original: T;\n    container?: string;\n    subitems: Item<T>[];\n    index: number;\n    collapsed?: boolean;\n  };\n\n  export type DragEventData = {\n    dropIndicatorPosition: DropIndicatorPositionValues;\n  };\n\n  type OnDragStart = (e: DragStartEvent) => void;\n  type OnDragMove = (e: DragMoveEvent) => void;\n  type OnDragOver = (e: DragOverEvent) => void;\n  type OnDragEnd = (e: DragEndEvent) => void;\n  type OnDragCancel = (e: DragCancelEvent) => void;\n\n  export type GetIsDropValid<T> = (\n    active: Item<T>,\n    over: Item<T>,\n    dropIndicatorPosition: DropIndicatorPositionValues,\n  ) => boolean;\n\n  export type OnReorder<T> = (\n    active: Item<T>,\n    targetIndex: number,\n    metadata: {\n      over: Item<T>;\n      fromIndex: number;\n      considerExpanding: UniqueIdentifier | null;\n      movedData: Record<string, Item<T>[]>;\n      overContainer: UniqueIdentifier;\n      projectedMove: {\n        depth: number;\n        parentId: UniqueIdentifier | null;\n        position?: number;\n      };\n      flattenedItems: Record<string, Item<T>[]>;\n    },\n  ) => void;\n\n  // =============================================================================\n  // PREVIEW HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseTreePreviewHandlersArgs = {\n    setActive: Dispatch<SetStateAction<Active | null>>;\n    setOver: Dispatch<SetStateAction<Over | null>>;\n    setDropIndicatorPosition: Dispatch<SetStateAction<DropIndicatorPositionValues>>;\n  };\n\n  export type UseTreePreviewHandlersReturn = {\n    handlePreviewDragStart: OnDragStart;\n    handlePreviewDragMove: OnDragMove;\n    handlePreviewDragOver: OnDragOver;\n    handlePreviewDragEnd: OnDragEnd;\n    handlePreviewDragCancel: OnDragCancel;\n  };\n\n  // =============================================================================\n  // ACTION HANDLERS HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseTreeActionHandlersArgs<T> = UseTreePreviewHandlersReturn & {\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    flattenedItems: Record<string, Item<T>[]>;\n    projected: {\n      depth: number;\n      parentId: UniqueIdentifier | null;\n      position?: number;\n    } | null;\n    onReorder: OnReorder<T>;\n    isDropValid: boolean;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n    containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n  };\n\n  export type UseTreeActionHandlersReturn = {\n    onDragStart: OnDragStart;\n    onDragMove: OnDragMove;\n    onDragOver: OnDragOver;\n    onDragEnd: OnDragEnd;\n    onDragCancel: OnDragCancel;\n  };\n\n  // =============================================================================\n  // DND, SORTABLE AND SENSOR CONTEXT PROPS TYPES\n  // =============================================================================\n\n  export type DndContextPropsType = {\n    accessibility: { announcements: Announcements; container: HTMLElement };\n    modifiers: Modifier[];\n    sensors: SensorDescriptor<SensorOptions>[];\n    measuring: Partial<MeasuringConfiguration>;\n    collisionDetection: CollisionDetection;\n  } & UseTreeActionHandlersReturn;\n\n  export type SortableContextPropsType = {\n    items: UniqueIdentifier[];\n    strategy: SortingStrategy;\n  };\n\n  export type SensorContext<T> = MutableRefObject<{\n    items: Record<string, Item<T>[]>;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    isHorizontalDnD: boolean;\n    maxDragAndDropLevel: number;\n    active: Active | null;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n    containersRef: React.MutableRefObject<UniqueIdentifier[]>;\n  }>;\n\n  // =============================================================================\n  // KEYBOARD GETTER TYPE\n  // =============================================================================\n\n  export type GetKeyboardCoordinatesArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]>;\n    active: Active;\n    over: Over;\n    event: KeyboardEvent;\n    currentCoordinates: Coordinates;\n    droppableRects: RectMap;\n    droppableContainers: DroppableContainers;\n    collisionRect: ClientRect;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    maxDragAndDropLevel: number;\n    flattenedItemsDictionary: Record<UniqueIdentifier, Item<T>>;\n  };\n\n  // =============================================================================\n  // TREE DNDKIT HOOK ARGUMENTS AND RETURN TYPES\n  // =============================================================================\n\n  export type UseMultiTreeConfigArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]>;\n    onReorder: OnReorder<T>;\n    isHorizontalDnD?: boolean;\n    isExpandable?: boolean;\n    getIsDropValid?: GetIsDropValid<T>;\n    maxDragAndDropLevel?: number;\n  };\n\n  export type UseTreeConfigArgs<T> = {\n    flattenedItems: Record<string, Item<T>[]> | Omit<Item<T>, 'container'>[];\n    onReorder: OnReorder<T>;\n    isHorizontalDnD?: boolean;\n    isExpandable?: boolean;\n    getIsDropValid?: GetIsDropValid<T>;\n    maxDragAndDropLevel?: number;\n  };\n\n  export type UseTreeConfigReturn<T> = {\n    dndContextProps: DndContextPropsType;\n    sortableContextProps: Record<string, SortableContextPropsType>;\n    active: Active | null;\n    activeItem: DnDKitTree.Item<T> | null;\n    over: Over | null;\n    overItem: DnDKitTree.Item<T> | null;\n    dropIndicatorPosition: DropIndicatorPositionValues;\n    isDropValid: boolean;\n    containerNodesRef: MutableRefObject<Record<string, HTMLElement | null>>;\n  };\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/tree/useMultiTreeDndkitConfig.js

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useMultiTreeDndkitConfig_exports = {};
 __export(useMultiTreeDndkitConfig_exports, {
+  adjustTranslate: () => adjustTranslate,
   useMultiTreeDndkitConfig: () => useMultiTreeDndkitConfig
 });
 module.exports = __toCommonJS(useMultiTreeDndkitConfig_exports);
@@ -51,8 +52,8 @@ const adjustTranslate = (isHorizontalDnD, sortedIds) => {
     } else {
       newTransform.x = transform.x + 15;
       if (["Enter", "Space"].includes(activatorEvent?.code)) {
-        const firstContainer = Object.keys(sortedIds)[0];
-        const isLast = active?.id === sortedIds[firstContainer][sortedIds[firstContainer].length - 1];
+        const activeContainerId = Object.keys(sortedIds).find((key) => sortedIds[key].includes(active?.id ?? "")) ?? Object.keys(sortedIds)[0];
+        const isLast = active?.id === sortedIds[activeContainerId][sortedIds[activeContainerId].length - 1];
         const keyboardTranslate = (isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0) / 2;
         newTransform.y = transform.y + keyboardTranslate;
       }
@@ -90,6 +91,8 @@ const useMultiTreeDndkitConfig = ({
     [flattenedItems]
   );
   const containersRef = (0, import_react.useRef)([]);
+  const containerNodesRef = (0, import_react.useRef)({});
+  const latestDropIndicatorPositionRef = (0, import_react.useRef)(dropIndicatorPosition);
   const visibleFlattenedItems = (0, import_react.useMemo)(() => {
     const dictionary = {};
     const collapsedItems = {};
@@ -150,7 +153,10 @@ const useMultiTreeDndkitConfig = ({
     };
   }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);
   const coordinateGetter = (0, import_react.useMemo)(() => (0, import_getTreeKeyboardCoordinates.getTreeKeyboardCoordinates)(sensorContext), []);
-  const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter }));
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter, scrollBehavior: "auto" })
+  );
   const projected = (0, import_react.useMemo)(
     () => over && active ? (0, import_utilities.getProjection)(
       visibleFlattenedItems,
@@ -177,8 +183,26 @@ const useMultiTreeDndkitConfig = ({
     flattenedItemsDictionary,
     containersRef
   });
-  const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)(flattenedItemsDictionary, dropIndicatorPosition);
-  const collisionDetection = (0, import_customCollisionDetection.customCollisionDetection)(sensorContext);
+  const announcements = (0, import_useTreeAnnouncements.useTreeAnnouncements)({
+    flattenedItems,
+    visibleFlattenedItems,
+    flattenedItemsDictionary,
+    containersRef,
+    dropIndicatorPosition,
+    latestDropIndicatorPositionRef,
+    isExpandable,
+    containerNodesRef
+  });
+  const rawCollisionDetection = (0, import_react.useMemo)(() => (0, import_customCollisionDetection.customCollisionDetection)(sensorContext), []);
+  const collisionDetection = (0, import_react.useCallback)(
+    (collisionArgs) => {
+      const collisions = rawCollisionDetection(collisionArgs);
+      const fresh = collisions?.[0]?.data?.dropIndicatorPosition;
+      if (fresh !== void 0) latestDropIndicatorPositionRef.current = fresh;
+      return collisions;
+    },
+    [rawCollisionDetection]
+  );
   const dndContextProps = (0, import_react.useMemo)(
     () => ({
       accessibility: {
@@ -222,7 +246,8 @@ const useMultiTreeDndkitConfig = ({
     activeItem,
     over,
     overItem,
-    dropIndicatorPosition
+    dropIndicatorPosition,
+    containerNodesRef
   };
 };
 //# sourceMappingURL=useMultiTreeDndkitConfig.js.map

package/dist/cjs/tree/useMultiTreeDndkitConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tree/useMultiTreeDndkitConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "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"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport { useState, useEffect, useMemo, useRef, useCallback } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type {\n  Active,\n  CollisionDetection,\n  MeasuringConfiguration,\n  Modifier,\n  Over,\n  UniqueIdentifier,\n} from '@dnd-kit/core';\nimport { useSensor, useSensors, KeyboardSensor, PointerSensor, MeasuringStrategy } from '@dnd-kit/core';\nimport { useTreePreviewHandlers } from './useTreePreviewHandlers.js';\nimport { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';\nimport { getProjection, removeChildrenOf } from './utilities.js';\nimport { useTreeActionHandlers } from './useTreeActionHandlers.js';\nimport type { DnDKitTree } from './types.js';\nimport { DropIndicatorPosition } from './constants.js';\nimport { customCollisionDetection } from './customCollisionDetection.js';\nimport { useTreeAnnouncements } from './useTreeAnnouncements.js';\n\n// we make space for the drop indicator\n// if second parameter is true, the space will be done on the horizontal axis\nexport const adjustTranslate = (isHorizontalDnD: boolean, sortedIds: Record<string, UniqueIdentifier[]>): Modifier => {\n  const func: Modifier = ({ transform, activatorEvent, active }) => {\n    const newTransform = {\n      ...transform,\n    };\n    if (isHorizontalDnD) {\n      newTransform.x = transform.x + 25;\n    } else {\n      newTransform.x = transform.x + 15;\n      if (['Enter', 'Space'].includes((activatorEvent as KeyboardEvent)?.code)) {\n        const activeContainerId =\n          Object.keys(sortedIds).find((key) => sortedIds[key].includes(active?.id ?? '')) ?? Object.keys(sortedIds)[0];\n        const isLast = active?.id === sortedIds[activeContainerId][sortedIds[activeContainerId].length - 1];\n        const keyboardTranslate = ((isLast ? -1 : 1) * (active?.rect?.current?.initial?.height ?? 0)) / 2;\n        newTransform.y = transform.y + keyboardTranslate;\n      }\n    }\n    return newTransform;\n  };\n  return func;\n};\n\nconst measuring: Partial<MeasuringConfiguration> = {\n  droppable: {\n    strategy: MeasuringStrategy.Always,\n  },\n};\n\nexport const useMultiTreeDndkitConfig = <T,>({\n  flattenedItems,\n  onReorder,\n  isHorizontalDnD = false,\n  isExpandable = false,\n  getIsDropValid = () => true,\n  maxDragAndDropLevel = Infinity,\n}: DnDKitTree.UseMultiTreeConfigArgs<T>): DnDKitTree.UseTreeConfigReturn<T> => {\n  const [active, setActive] = useState<Active | null>(null);\n  const [over, setOver] = useState<Over | null>(null);\n  const [dropIndicatorPosition, setDropIndicatorPosition] = useState<DnDKitTree.DropIndicatorPositionValues>(\n    DropIndicatorPosition.After,\n  );\n  // Sorted ids for the library\n  const sortedIds = useMemo(\n    () =>\n      Object.keys(flattenedItems).reduce(\n        (acc, curr) => {\n          acc[curr] = flattenedItems[curr].map((item) => item.uid);\n          return acc;\n        },\n        {} as Record<string, UniqueIdentifier[]>,\n      ),\n    [flattenedItems],\n  );\n\n  /**\n   * List of unique containers\n   */\n  const containersRef = useRef([] as string[]);\n\n  /**\n   * Container id -> DOM node, registered by DSSortableContainer. Used to resolve the destination\n   * container's accessible name for screen-reader announcements on cross-container moves.\n   */\n  const containerNodesRef = useRef({} as Record<string, HTMLElement | null>);\n\n  /**\n   * The drop-indicator position from the *latest* collision computation. `dropIndicatorPosition` state\n   * lags by one render, so announcements \u2014 which fire during the drag event, before that state commits \u2014\n   * would read a stale position whenever the indicator side flips (e.g. crossing above the first item of\n   * a container). Collision detection runs before the announcement for the same event, so it writes the\n   * fresh value here for the announcement to read, keeping the spoken slot in lockstep with the indicator.\n   */\n  const latestDropIndicatorPositionRef = useRef<DnDKitTree.DropIndicatorPositionValues>(dropIndicatorPosition);\n\n  const visibleFlattenedItems = useMemo(() => {\n    const dictionary: Record<string, DnDKitTree.Item<T>[]> = {};\n    const collapsedItems: Record<UniqueIdentifier, boolean | undefined> = {};\n    Object.keys(flattenedItems).forEach((container) => {\n      const itemWithNoActiveChildren = removeChildrenOf(flattenedItems[container], active?.id);\n\n      dictionary[container] = [];\n\n      itemWithNoActiveChildren.forEach((item) => {\n        if (item.parentId === null || !collapsedItems[item.parentId]) {\n          dictionary[container].push(item);\n        }\n        collapsedItems[item.uid] = item.collapsed;\n      });\n    });\n    return dictionary;\n  }, [active?.id, flattenedItems]);\n\n  /**\n   * Dictionary from UID to ITEM\n   * This dictionary is computed since on every DnD move, I need to know the\n   * depth of a particular item, so O(1) per DnD move instead of O(#ITEMS)\n   */\n  const flattenedItemsDictionary = useMemo(() => {\n    const dictionary: Record<UniqueIdentifier, TypescriptHelpersT.ObjectValues<typeof flattenedItems>[0]> = {};\n    Object.keys(flattenedItems).forEach((container) => {\n      flattenedItems[container].forEach((item) => {\n        dictionary[item.uid] = item;\n        if (!item.container) return;\n        if (!containersRef.current.includes(item.container)) containersRef.current.push(item.container);\n      });\n    });\n    return dictionary;\n  }, [flattenedItems]);\n\n  const isDropValid = useMemo(() => {\n    if (!active || !over) return true;\n    return getIsDropValid(\n      flattenedItemsDictionary[active.id],\n      flattenedItemsDictionary[over.id],\n      dropIndicatorPosition,\n    );\n  }, [getIsDropValid, flattenedItemsDictionary, active, over, dropIndicatorPosition]);\n\n  const modifiers: Modifier[] = useMemo(\n    () => [adjustTranslate(isHorizontalDnD, sortedIds)],\n    [isHorizontalDnD, sortedIds],\n  );\n\n  const sensorContext: DnDKitTree.SensorContext<T> = useRef({\n    items: flattenedItems,\n    dropIndicatorPosition,\n    setDropIndicatorPosition,\n    isHorizontalDnD,\n    maxDragAndDropLevel,\n    active,\n    flattenedItemsDictionary,\n    containersRef,\n  });\n\n  useEffect(() => {\n    sensorContext.current = {\n      items: flattenedItems,\n      dropIndicatorPosition,\n      isHorizontalDnD,\n      maxDragAndDropLevel,\n      active,\n      flattenedItemsDictionary,\n      containersRef,\n    };\n  }, [flattenedItems, dropIndicatorPosition, isHorizontalDnD, maxDragAndDropLevel, active, flattenedItemsDictionary]);\n\n  const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext), []);\n\n  // dnd-kit's KeyboardSensor defaults to 'smooth', which re-targets an in-progress scroll\n  // animation on every OS key-repeat keydown while an arrow key is held, producing a\n  // stutter/rubber-band effect instead of a flicker. 'auto' scrolls happen synchronously,\n  // so repeated keydowns just produce a sequence of instant jumps with nothing to interrupt.\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, { coordinateGetter, scrollBehavior: 'auto' }),\n  );\n\n  // where is the activeItem being positioned (depth and parent)\n  const projected = useMemo(\n    () =>\n      over && active\n        ? getProjection(\n            visibleFlattenedItems,\n            flattenedItemsDictionary,\n            over,\n            dropIndicatorPosition,\n            isExpandable,\n            active,\n          )\n        : null,\n    [over, visibleFlattenedItems, flattenedItemsDictionary, dropIndicatorPosition, isExpandable, active],\n  );\n\n  const dragPreviewHandlers = useTreePreviewHandlers({\n    setActive,\n    setOver,\n    setDropIndicatorPosition,\n  });\n\n  const dragActionHandlers = useTreeActionHandlers({\n    ...dragPreviewHandlers,\n    onReorder,\n    projected,\n    flattenedItems,\n    dropIndicatorPosition,\n    isDropValid,\n    flattenedItemsDictionary,\n    containersRef,\n  });\n\n  const announcements = useTreeAnnouncements({\n    flattenedItems,\n    visibleFlattenedItems,\n    flattenedItemsDictionary,\n    containersRef,\n    dropIndicatorPosition,\n    latestDropIndicatorPositionRef,\n    isExpandable,\n    containerNodesRef,\n  });\n\n  const rawCollisionDetection = useMemo(() => customCollisionDetection(sensorContext), []);\n  // Capture the fresh drop-indicator position each time collisions are computed, so announcements can\n  // read it without waiting for the lagging `dropIndicatorPosition` state to commit.\n  const collisionDetection = useCallback<CollisionDetection>(\n    (collisionArgs) => {\n      const collisions = rawCollisionDetection(collisionArgs);\n      const fresh = (collisions?.[0]?.data as DnDKitTree.DragEventData | undefined)?.dropIndicatorPosition;\n      if (fresh !== undefined) latestDropIndicatorPositionRef.current = fresh;\n      return collisions;\n    },\n    [rawCollisionDetection],\n  );\n\n  const dndContextProps = useMemo(\n    () => ({\n      accessibility: {\n        announcements,\n        container: document.body,\n      },\n      modifiers,\n      sensors,\n      measuring,\n      collisionDetection,\n      ...dragActionHandlers,\n    }),\n    [announcements, modifiers, sensors, collisionDetection, dragActionHandlers],\n  );\n\n  const sortableContextProps = useMemo(\n    () =>\n      Object.keys(sortedIds).reduce(\n        (acc, curr) => {\n          acc[curr] = {\n            items: sortedIds[curr],\n            strategy: () => null,\n          };\n          return acc;\n        },\n        {} as Record<string, DnDKitTree.SortableContextPropsType>,\n      ),\n    [sortedIds],\n  );\n\n  const activeItem = useMemo(() => {\n    if (!active) return null;\n    return flattenedItemsDictionary[active.id];\n  }, [active, flattenedItemsDictionary]);\n\n  const overItem = useMemo(() => {\n    if (!over) return null;\n    return flattenedItemsDictionary[over.id];\n  }, [flattenedItemsDictionary, over]);\n\n  return {\n    dndContextProps,\n    sortableContextProps,\n    isDropValid,\n    active,\n    activeItem,\n    over,\n    overItem,\n    dropIndicatorPosition,\n    containerNodesRef,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/tree/useTreeActionHandlers.js

@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
 var import_sortable = require("@dnd-kit/sortable");
 var import_lodash_es = require("lodash-es");
 var import_react = require("react");
-var import_constants = require("./constants.js");
+var import_utilities = require("./utilities.js");
 const useTreeActionHandlers = ({
   handlePreviewDragStart,
   handlePreviewDragMove,
@@ -74,18 +74,14 @@ const useTreeActionHandlers = ({
       const { active, over } = e;
       if (over === null || !isDropValid) return;
       if (over.id === active.id) return;
-      const isOverContainerOfContainer = containersRef.current.includes(over.id);
-      const overContainer = isOverContainerOfContainer ? over.id : flattenedItemsDictionary[over.id]?.container || "root";
-      const activeContainer = flattenedItemsDictionary[active.id].container || "root";
-      const activeIndex = flattenedItems[activeContainer].findIndex((item) => item.uid === active.id);
-      let considerExpanding = null;
-      let overIndex = flattenedItems[overContainer].findIndex((item) => item.uid === over.id);
-      const isUp = overIndex < activeIndex;
-      if (dropIndicatorPosition === "after" && (isUp || activeContainer !== overContainer)) overIndex += 1;
-      if (dropIndicatorPosition === import_constants.DropIndicatorPosition.Inside && !isOverContainerOfContainer) {
-        considerExpanding = over.id;
-        overIndex = flattenedItems[overContainer][overIndex].realIndex + flattenedItems[overContainer][overIndex].childrenCount + 1;
-      }
+      const { isOverContainerOfContainer, overContainer, activeContainer, activeIndex, overIndex, considerExpanding } = (0, import_utilities.getDropLandingContext)(
+        active,
+        over,
+        dropIndicatorPosition,
+        flattenedItems,
+        flattenedItemsDictionary,
+        containersRef
+      );
       if (projected && (activeIndex !== overIndex || flattenedItems[activeContainer][activeIndex].depth !== projected.depth || activeContainer !== overContainer)) {
         flattenedItems[activeContainer][activeIndex].parentId = projected.parentId;
         flattenedItems[activeContainer][activeIndex].depth = projected.depth;

package/dist/cjs/tree/useTreeActionHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tree/useTreeActionHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash-es';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n\nexport const useTreeActionHandlers = <T,>({\n  handlePreviewDragStart,\n  handlePreviewDragMove,\n  handlePreviewDragOver,\n  handlePreviewDragEnd,\n  handlePreviewDragCancel,\n  onReorder,\n  flattenedItems,\n  projected,\n  dropIndicatorPosition,\n  isDropValid,\n  flattenedItemsDictionary,\n  containersRef,\n}: DnDKitTree.UseTreeActionHandlersArgs<T>): DnDKitTree.UseTreeActionHandlersReturn => {\n  const onDragStart = useCallback(\n    (e: DragStartEvent) => {\n      handlePreviewDragStart(e);\n    },\n    [handlePreviewDragStart],\n  );\n\n  const onDragMove = useCallback(\n    (e: DragMoveEvent) => {\n      handlePreviewDragMove(e);\n    },\n    [handlePreviewDragMove],\n  );\n\n  const onDragOver = useCallback(\n    (e: DragOverEvent) => {\n      handlePreviewDragOver(e);\n    },\n    [handlePreviewDragOver],\n  );\n\n  const onDragEnd = useCallback(\n    (e: DragEndEvent) => {\n      handlePreviewDragEnd(e);\n      const { active, over } = e;\n\n      if (over === null || !isDropValid) return;\n      if (over.id === active.id) return;\n\n      const isOverContainerOfContainer = containersRef.current.includes(over.id);\n      const overContainer = isOverContainerOfContainer\n        ? over.id\n        : flattenedItemsDictionary[over.id]?.container || 'root';\n      const activeContainer = flattenedItemsDictionary[active.id].container || 'root';\n\n      const activeIndex = flattenedItems[activeContainer].findIndex((item) => item.uid === active.id);\n\n      let considerExpanding = null;\n\n      let overIndex = flattenedItems[overContainer].findIndex((item) => item.uid === over.id);\n      const isUp = overIndex < activeIndex;\n\n      if (dropIndicatorPosition === 'after' && (isUp || activeContainer !== overContainer)) overIndex += 1;\n      // If drop indicator is inside, then put it last,\n      // It will be reconstructed well later\n      if (dropIndicatorPosition === DropIndicatorPosition.Inside && !isOverContainerOfContainer) {\n        considerExpanding = over.id;\n        overIndex =\n          flattenedItems[overContainer][overIndex].realIndex +\n          flattenedItems[overContainer][overIndex].childrenCount +\n          1;\n      }\n\n      // If we are dropping the item in a new position, or new depth or new container\n      if (\n        projected &&\n        (activeIndex !== overIndex ||\n          flattenedItems[activeContainer][activeIndex].depth !== projected.depth ||\n          activeContainer !== overContainer)\n      ) {\n        // Change parent and depth from projected data\n        flattenedItems[activeContainer][activeIndex].parentId = projected.parentId;\n        flattenedItems[activeContainer][activeIndex].depth = projected.depth;\n\n        // If same index, don't move the array, just copy it\n\n        // not deep cloning here would break data-table\n        const newFlattenedData = cloneDeep(flattenedItems);\n\n        if (isOverContainerOfContainer) {\n          if (newFlattenedData[overContainer].length === 0) {\n            newFlattenedData[overContainer][0] = { ...flattenedItems[activeContainer][activeIndex] };\n          } else {\n            newFlattenedData[overContainer].push({ ...flattenedItems[activeContainer][activeIndex] });\n          }\n          newFlattenedData[activeContainer].splice(activeIndex, 1);\n        } else if (activeContainer !== overContainer) {\n          newFlattenedData[overContainer].splice(overIndex, 0, newFlattenedData[activeContainer][activeIndex]);\n          newFlattenedData[activeContainer].splice(activeIndex, 1);\n        } else {\n          newFlattenedData[activeContainer] = arrayMove(flattenedItems[activeContainer], activeIndex, overIndex);\n        }\n\n        onReorder(flattenedItems[activeContainer][activeIndex], overIndex, {\n          over: flattenedItems[activeContainer][overIndex],\n          fromIndex: activeIndex,\n          considerExpanding,\n          movedData: newFlattenedData,\n          flattenedItems,\n          overContainer,\n          projectedMove: projected,\n        });\n      }\n    },\n    [\n      handlePreviewDragEnd,\n      isDropValid,\n      containersRef,\n      flattenedItemsDictionary,\n      flattenedItems,\n      dropIndicatorPosition,\n      projected,\n      onReorder,\n    ],\n  );\n\n  const onDragCancel = useCallback(\n    (e: DragCancelEvent) => {\n      handlePreviewDragCancel(e);\n    },\n    [handlePreviewDragCancel],\n  );\n\n  return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { cloneDeep } from 'lodash-es';\nimport { useCallback } from 'react';\nimport type { DragStartEvent, DragMoveEvent, DragEndEvent, DragOverEvent, DragCancelEvent } from '@dnd-kit/core';\nimport type { DnDKitTree } from './types.js';\nimport { getDropLandingContext } from './utilities.js';\n\nexport const useTreeActionHandlers = <T,>({\n  handlePreviewDragStart,\n  handlePreviewDragMove,\n  handlePreviewDragOver,\n  handlePreviewDragEnd,\n  handlePreviewDragCancel,\n  onReorder,\n  flattenedItems,\n  projected,\n  dropIndicatorPosition,\n  isDropValid,\n  flattenedItemsDictionary,\n  containersRef,\n}: DnDKitTree.UseTreeActionHandlersArgs<T>): DnDKitTree.UseTreeActionHandlersReturn => {\n  const onDragStart = useCallback(\n    (e: DragStartEvent) => {\n      handlePreviewDragStart(e);\n    },\n    [handlePreviewDragStart],\n  );\n\n  const onDragMove = useCallback(\n    (e: DragMoveEvent) => {\n      handlePreviewDragMove(e);\n    },\n    [handlePreviewDragMove],\n  );\n\n  const onDragOver = useCallback(\n    (e: DragOverEvent) => {\n      handlePreviewDragOver(e);\n    },\n    [handlePreviewDragOver],\n  );\n\n  const onDragEnd = useCallback(\n    (e: DragEndEvent) => {\n      handlePreviewDragEnd(e);\n      const { active, over } = e;\n\n      if (over === null || !isDropValid) return;\n      if (over.id === active.id) return;\n\n      const { isOverContainerOfContainer, overContainer, activeContainer, activeIndex, overIndex, considerExpanding } =\n        getDropLandingContext(\n          active,\n          over,\n          dropIndicatorPosition,\n          flattenedItems,\n          flattenedItemsDictionary,\n          containersRef,\n        );\n\n      // If we are dropping the item in a new position, or new depth or new container\n      if (\n        projected &&\n        (activeIndex !== overIndex ||\n          flattenedItems[activeContainer][activeIndex].depth !== projected.depth ||\n          activeContainer !== overContainer)\n      ) {\n        // Change parent and depth from projected data\n        flattenedItems[activeContainer][activeIndex].parentId = projected.parentId;\n        flattenedItems[activeContainer][activeIndex].depth = projected.depth;\n\n        // If same index, don't move the array, just copy it\n\n        // not deep cloning here would break data-table\n        const newFlattenedData = cloneDeep(flattenedItems);\n\n        if (isOverContainerOfContainer) {\n          if (newFlattenedData[overContainer].length === 0) {\n            newFlattenedData[overContainer][0] = { ...flattenedItems[activeContainer][activeIndex] };\n          } else {\n            newFlattenedData[overContainer].push({ ...flattenedItems[activeContainer][activeIndex] });\n          }\n          newFlattenedData[activeContainer].splice(activeIndex, 1);\n        } else if (activeContainer !== overContainer) {\n          newFlattenedData[overContainer].splice(overIndex, 0, newFlattenedData[activeContainer][activeIndex]);\n          newFlattenedData[activeContainer].splice(activeIndex, 1);\n        } else {\n          newFlattenedData[activeContainer] = arrayMove(flattenedItems[activeContainer], activeIndex, overIndex);\n        }\n\n        onReorder(flattenedItems[activeContainer][activeIndex], overIndex, {\n          over: flattenedItems[activeContainer][overIndex],\n          fromIndex: activeIndex,\n          considerExpanding,\n          movedData: newFlattenedData,\n          flattenedItems,\n          overContainer,\n          projectedMove: projected,\n        });\n      }\n    },\n    [\n      handlePreviewDragEnd,\n      isDropValid,\n      containersRef,\n      flattenedItemsDictionary,\n      flattenedItems,\n      dropIndicatorPosition,\n      projected,\n      onReorder,\n    ],\n  );\n\n  const onDragCancel = useCallback(\n    (e: DragCancelEvent) => {\n      handlePreviewDragCancel(e);\n    },\n    [handlePreviewDragCancel],\n  );\n\n  return { onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,sBAA0B;AAC1B,uBAA0B;AAC1B,mBAA4B;AAG5B,uBAAsC;AAE/B,MAAM,wBAAwB,CAAK;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuF;AACrF,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAsB;AACrB,6BAAuB,CAAC;AAAA,IAC1B;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,QAAM,iBAAa;AAAA,IACjB,CAAC,MAAqB;AACpB,4BAAsB,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,iBAAa;AAAA,IACjB,CAAC,MAAqB;AACpB,4BAAsB,CAAC;AAAA,IACzB;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,MAAoB;AACnB,2BAAqB,CAAC;AACtB,YAAM,EAAE,QAAQ,KAAK,IAAI;AAEzB,UAAI,SAAS,QAAQ,CAAC,YAAa;AACnC,UAAI,KAAK,OAAO,OAAO,GAAI;AAE3B,YAAM,EAAE,4BAA4B,eAAe,iBAAiB,aAAa,WAAW,kBAAkB,QAC5G;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAGF,UACE,cACC,gBAAgB,aACf,eAAe,eAAe,EAAE,WAAW,EAAE,UAAU,UAAU,SACjE,oBAAoB,gBACtB;AAEA,uBAAe,eAAe,EAAE,WAAW,EAAE,WAAW,UAAU;AAClE,uBAAe,eAAe,EAAE,WAAW,EAAE,QAAQ,UAAU;AAK/D,cAAM,uBAAmB,4BAAU,cAAc;AAEjD,YAAI,4BAA4B;AAC9B,cAAI,iBAAiB,aAAa,EAAE,WAAW,GAAG;AAChD,6BAAiB,aAAa,EAAE,CAAC,IAAI,EAAE,GAAG,eAAe,eAAe,EAAE,WAAW,EAAE;AAAA,UACzF,OAAO;AACL,6BAAiB,aAAa,EAAE,KAAK,EAAE,GAAG,eAAe,eAAe,EAAE,WAAW,EAAE,CAAC;AAAA,UAC1F;AACA,2BAAiB,eAAe,EAAE,OAAO,aAAa,CAAC;AAAA,QACzD,WAAW,oBAAoB,eAAe;AAC5C,2BAAiB,aAAa,EAAE,OAAO,WAAW,GAAG,iBAAiB,eAAe,EAAE,WAAW,CAAC;AACnG,2BAAiB,eAAe,EAAE,OAAO,aAAa,CAAC;AAAA,QACzD,OAAO;AACL,2BAAiB,eAAe,QAAI,2BAAU,eAAe,eAAe,GAAG,aAAa,SAAS;AAAA,QACvG;AAEA,kBAAU,eAAe,eAAe,EAAE,WAAW,GAAG,WAAW;AAAA,UACjE,MAAM,eAAe,eAAe,EAAE,SAAS;AAAA,UAC/C,WAAW;AAAA,UACX;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAuB;AACtB,8BAAwB,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,SAAO,EAAE,aAAa,YAAY,YAAY,WAAW,aAAa;AACxE;",
   "names": []
 }