@elliemae/ds-drag-and-drop 3.37.2 → 3.38.0-rc.0

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

@@ -36,9 +36,11 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
-var import__ = require("../../index.js");
-var import_DSSortableContainer = require("../DSSortableContainer/index.js");
+var import_modifiers = require("@dnd-kit/modifiers");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_core = require("@dnd-kit/core");
+var import_tree = require("../../tree/index.js");
+var import_SortableContainerContext = require("../DSSortableContainer/config/SortableContainerContext.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const flatten = (items, parentId = null, depth = 0, container = "root", iteration = { count: 0 }) => items.reduce((acc, item, index) => {
   acc.push({
@@ -46,7 +48,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
     uid: item.dsId,
     childrenCount: item?.subitems?.length || 0,
     original: item,
-    realIndex: iteration.count++,
+    realIndex: iteration.count + 1,
     parentId,
     depth,
     index,
@@ -76,7 +78,7 @@ const DSDragAndDrop = ({
     ),
     [items]
   );
-  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = (0, import__.useMultiTreeDndkitConfig)({
+  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = (0, import_tree.useMultiTreeDndkitConfig)({
     flattenedItems: itemsFlattened,
     isHorizontalDnD: false,
     isExpandable: true,
@@ -85,16 +87,14 @@ const DSDragAndDrop = ({
     getIsDropValid: () => true,
     ...rest
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DndContext, { ...dndContextProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_DSSortableContainer.ContainersContext.Provider,
-      {
-        value: { sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse },
-        children
-      }
-    ),
+  const ctx = (0, import_react.useMemo)(
+    () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),
+    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps]
+  );
+  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 }),
     (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DragOverlay, { style: { width: "auto", zIndex: 1001 }, modifiers: [import__.restrictToWindowEdges], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragOverlayRenderer, { activeItem: active }) : null }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { style: { width: "auto", zIndex: 1001 }, modifiers: [import_modifiers.restrictToWindowEdges], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragOverlayRenderer, { activeItem: active }) : null }),
       document.body
     )
   ] });

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

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

@@ -28,10 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSSortableContainer_exports = {};
 __export(DSSortableContainer_exports, {
-  ContainersContext: () => ContainersContext,
   DSSortableContainer: () => DSSortableContainer,
-  DSSortableContainerSchema: () => DSSortableContainerSchema,
-  createContainerContext: () => createContainerContext
+  DSSortableContainerSchema: () => DSSortableContainerSchema
 });
 module.exports = __toCommonJS(DSSortableContainer_exports);
 var React = __toESM(require("react"));
@@ -39,30 +37,35 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_fast_list = require("@elliemae/ds-fast-list");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import__ = require("../../index.js");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_DSSortableItem = require("../DSSortableItem/index.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
-function createContainerContext() {
-  return (0, import_react.createContext)({
-    sortableContextProps: {},
-    items: {}
-  });
-}
-const ContainersContext = createContainerContext();
+var import_SortableContainerContext = require("./config/SortableContainerContext.js");
 const ContainerItemRenderer = (props) => {
-  const {
-    index,
-    extraItemProps: { items, ItemRenderer, extraItemProps, ...rest }
-  } = props;
+  const { index, extraItemProps } = props;
+  if (!extraItemProps) {
+    return null;
+  }
+  const { items, ItemRenderer, ...rest } = extraItemProps;
   const item = items[index];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSSortableItem, { item, ItemRenderer, extraItemProps, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_DSSortableItem.DSSortableItem,
+    {
+      item,
+      ItemRenderer,
+      ...rest,
+      extraItemProps
+    }
+  );
 };
 const ContainerItemRendererMemoized = import_react.default.memo(ContainerItemRenderer);
 const DSSortableContainer = (props) => {
   const { containerId, ItemRenderer, Component, extraItemProps, children } = props;
-  const { setNodeRef, isOver } = (0, import__.useDroppable)({
+  const { setNodeRef, isOver } = (0, import_core.useDroppable)({
     id: containerId
   });
-  const ctx = (0, import_react.useContext)(ContainersContext);
+  const ctx = (0, import_react.useContext)(import_SortableContainerContext.ContainersContext);
   const { sortableContextProps, items } = ctx;
   const containerSortableContextProps = sortableContextProps[containerId];
   const render = (0, import_react.useMemo)(() => {
@@ -86,7 +89,7 @@ const DSSortableContainer = (props) => {
     }
     return null;
   }, [ItemRenderer, children, containerId, extraItemProps, items]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.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: setNodeRef, 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, createContext, useMemo } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { SortableContext, useDroppable, DSSortableItem } from '../../index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.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}\nexport const ContainersContext = createContainerContext();\n\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n  const {\n    index,\n    extraItemProps: { items, ItemRenderer, extraItemProps, ...rest },\n  } = props;\n  const item = items[index];\n  return <DSSortableItem item={item} ItemRenderer={ItemRenderer} extraItemProps={extraItemProps} {...rest} />;\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;AAAA;AAAA;ACAA,YAAuB;AD+Bd;AA/BT,mBAA0D;AAC1D,0BAA2B;AAC3B,8BAAyB;AACzB,eAA8D;AAE9D,mCAA2C;AAYpC,SAAS,yBAA4B;AAC1C,aAAO,4BAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AACO,MAAM,oBAAoB,uBAAuB;AAExD,MAAM,wBAAwB,CAAO,UAA6D;AAChG,QAAM;AAAA,IACJ;AAAA,IACA,gBAAgB,EAAE,OAAO,cAAc,gBAAgB,GAAG,KAAK;AAAA,EACjE,IAAI;AACJ,QAAM,OAAO,MAAM,KAAK;AACxB,SAAO,4CAAC,2BAAe,MAAY,cAA4B,gBAAiC,GAAG,MAAM;AAC3G;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,uBAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,UAAM,yBAAW,iBAAiB;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,4BAAiB,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 } 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;",
   "names": ["React"]
 }

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

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SortableContainerContext_exports = {};
+__export(SortableContainerContext_exports, {
+  ContainersContext: () => ContainersContext,
+  createContainerContext: () => createContainerContext
+});
+module.exports = __toCommonJS(SortableContainerContext_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+function createContainerContext() {
+  return (0, import_react.createContext)({
+    sortableContextProps: {},
+    items: {}
+  });
+}
+const ContainersContext = createContainerContext();
+//# sourceMappingURL=SortableContainerContext.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -28,11 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSSortableContainer_exports = {};
 __export(DSSortableContainer_exports, {
-  ContainersContext: () => import_DSSortableContainer.ContainersContext,
+  ContainersContext: () => import_SortableContainerContext.ContainersContext,
   DSSortableContainer: () => import_DSSortableContainer.DSSortableContainer,
   DSSortableContainerSchema: () => import_DSSortableContainer.DSSortableContainerSchema
 });
 module.exports = __toCommonJS(DSSortableContainer_exports);
 var React = __toESM(require("react"));
 var import_DSSortableContainer = require("./DSSortableContainer.js");
+var import_SortableContainerContext = require("./config/SortableContainerContext.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSSortableContainer/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { DSSortableContainer, DSSortableContainerSchema, ContainersContext } from './DSSortableContainer.js';\nexport type { DSSortableContainerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAAkF;",
+  "sourcesContent": ["export { DSSortableContainer, DSSortableContainerSchema } from './DSSortableContainer.js';\nexport { ContainersContext } from './config/SortableContainerContext.js';\nexport type { DSSortableContainerT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iCAA+D;AAC/D,sCAAkC;",
   "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"],
+  "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;",
   "names": []
 }

package/dist/cjs/parts/DSSortableItem/DSSortableItem.js

@@ -36,12 +36,12 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import__ = require("../../index.js");
-var import_DSSortableContainer = require("../DSSortableContainer/index.js");
+var import_sortable = require("@dnd-kit/sortable");
+var import_SortableContainerContext = require("../DSSortableContainer/config/SortableContainerContext.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const DSSortableItem = (props) => {
   const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;
-  const ctx = (0, import_react.useContext)(import_DSSortableContainer.ContainersContext);
+  const ctx = (0, import_react.useContext)(import_SortableContainerContext.ContainersContext);
   const currentItem = item || (userIndex !== void 0 ? ctx.items[containerId || "root"][userIndex] : void 0);
   const { isDropValid, dropIndicatorPosition, onCollapse } = ctx;
   const draggableOptions = (0, import_react.useMemo)(
@@ -50,7 +50,7 @@ const DSSortableItem = (props) => {
     }),
     [currentItem]
   );
-  const useSortableHelpers = (0, import__.useSortable)(draggableOptions);
+  const useSortableHelpers = (0, import_sortable.useSortable)(draggableOptions);
   const draggableProps = (0, import_react.useMemo)(() => {
     const { index, overIndex } = useSortableHelpers;
     return {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSSortableItem/DSSortableItem.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\n\nimport { useSortable } from '../../index.js';\nimport { ContainersContext } from '../DSSortableContainer/index.js';\nimport type { DSSortableItemT, DraggablePropsT } from './react-desc-prop-types.js';\nimport { DSSortalItemPropTypes } from './react-desc-prop-types.js';\n\nimport type { Item } from '../DSDragAndDrop/index.js';\nexport const DSSortableItem = <T, K>(props: DSSortableItemT.Props<T, K>) => {\n  const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;\n  const ctx = useContext(ContainersContext);\n\n  const currentItem = item || (userIndex !== undefined ? ctx.items[containerId || 'root'][userIndex] : undefined);\n\n  const { isDropValid, dropIndicatorPosition, onCollapse } = ctx;\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id: currentItem?.dsId || '',\n    }),\n    [currentItem],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  const draggableProps: DraggablePropsT = useMemo(() => {\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition: dropIndicatorPosition || 'none',\n      isDropValid: isDropValid || false,\n    };\n  }, [dropIndicatorPosition, isDropValid, useSortableHelpers]);\n\n  if (!currentItem) {\n    return null;\n  }\n  return (\n    <div ref={draggableProps.setNodeRef} style={{ position: 'relative' }}>\n      <ItemRenderer\n        item={currentItem as Item<T>}\n        draggableProps={draggableProps}\n        onCollapse={onCollapse}\n        extraItemProps={extraItemProps as K}\n      />\n    </div>\n  );\n};\n\nconst DSSortableItemSchema = describe(DSSortableItem);\n\nDSSortableItemSchema.propTypes = DSSortalItemPropTypes;\n\nexport { DSSortableItemSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA3CN,mBAA2C;AAC3C,8BAAyB;AAEzB,eAA4B;AAC5B,iCAAkC;AAElC,mCAAsC;AAG/B,MAAM,iBAAiB,CAAO,UAAuC;AAC1E,QAAM,EAAE,MAAM,OAAO,WAAW,aAAa,cAAc,eAAe,IAAI;AAC9E,QAAM,UAAM,yBAAW,4CAAiB;AAExC,QAAM,cAAc,SAAS,cAAc,SAAY,IAAI,MAAM,eAAe,MAAM,EAAE,SAAS,IAAI;AAErG,QAAM,EAAE,aAAa,uBAAuB,WAAW,IAAI;AAG3D,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,aAAa,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,yBAAqB,sBAAY,gBAAgB;AAEvD,QAAM,qBAAkC,sBAAQ,MAAM;AACpD,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C,uBAAuB,yBAAyB;AAAA,MAChD,aAAa,eAAe;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,uBAAuB,aAAa,kBAAkB,CAAC;AAE3D,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AACA,SACE,4CAAC,SAAI,KAAK,eAAe,YAAY,OAAO,EAAE,UAAU,WAAW,GACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,2BAAuB,kCAAS,cAAc;AAEpD,qBAAqB,YAAY;",
+  "sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSSortableItemT, DraggablePropsT } from './react-desc-prop-types.js';\nimport { DSSortalItemPropTypes } from './react-desc-prop-types.js';\n\nimport type { Item } from '../DSDragAndDrop/index.js';\nexport const DSSortableItem = <T, K>(props: DSSortableItemT.Props<T, K>) => {\n  const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;\n  const ctx = useContext(ContainersContext);\n\n  const currentItem = item || (userIndex !== undefined ? ctx.items[containerId || 'root'][userIndex] : undefined);\n\n  const { isDropValid, dropIndicatorPosition, onCollapse } = ctx;\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id: currentItem?.dsId || '',\n    }),\n    [currentItem],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  const draggableProps: DraggablePropsT = useMemo(() => {\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition: dropIndicatorPosition || 'none',\n      isDropValid: isDropValid || false,\n    };\n  }, [dropIndicatorPosition, isDropValid, useSortableHelpers]);\n\n  if (!currentItem) {\n    return null;\n  }\n  return (\n    <div ref={draggableProps.setNodeRef} style={{ position: 'relative' }}>\n      <ItemRenderer\n        item={currentItem as Item<T>}\n        draggableProps={draggableProps}\n        onCollapse={onCollapse}\n        extraItemProps={extraItemProps as K}\n      />\n    </div>\n  );\n};\n\nconst DSSortableItemSchema = describe(DSSortableItem);\n\nDSSortableItemSchema.propTypes = DSSortalItemPropTypes;\n\nexport { DSSortableItemSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CjB;AA1CN,mBAA2C;AAC3C,8BAAyB;AACzB,sBAA4B;AAC5B,sCAAkC;AAElC,mCAAsC;AAG/B,MAAM,iBAAiB,CAAO,UAAuC;AAC1E,QAAM,EAAE,MAAM,OAAO,WAAW,aAAa,cAAc,eAAe,IAAI;AAC9E,QAAM,UAAM,yBAAW,iDAAiB;AAExC,QAAM,cAAc,SAAS,cAAc,SAAY,IAAI,MAAM,eAAe,MAAM,EAAE,SAAS,IAAI;AAErG,QAAM,EAAE,aAAa,uBAAuB,WAAW,IAAI;AAG3D,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,aAAa,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,yBAAqB,6BAAY,gBAAgB;AAEvD,QAAM,qBAAkC,sBAAQ,MAAM;AACpD,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C,uBAAuB,yBAAyB;AAAA,MAChD,aAAa,eAAe;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,uBAAuB,aAAa,kBAAkB,CAAC;AAE3D,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AACA,SACE,4CAAC,SAAI,KAAK,eAAe,YAAY,OAAO,EAAE,UAAU,WAAW,GACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,2BAAuB,kCAAS,cAAc;AAEpD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/cjs/tree/customCollisionDetection.js

@@ -32,8 +32,8 @@ __export(customCollisionDetection_exports, {
 });
 module.exports = __toCommonJS(customCollisionDetection_exports);
 var React = __toESM(require("react"));
-var import_constants = require("./constants.js");
 var import_core = require("@dnd-kit/core");
+var import_constants = require("./constants.js");
 const insideThreshold = 0.7;
 const customCollisionDetection = (sensorContext) => {
   const func = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {
@@ -47,7 +47,7 @@ const customCollisionDetection = (sensorContext) => {
     });
     const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};
     const possibleCollidingContainers = droppableContainers.filter(
-      (container) => !containersRef.current.includes(container.id) && flattenedItemsDictionary[container.id].container === closestContainerOfContainersId
+      (container) => !containersRef.current.includes(container?.id) && flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId
     );
     const [collidingContainer, nearesCollidingContainer] = (0, import_core.closestCorners)({
       ...args,
@@ -68,10 +68,10 @@ const customCollisionDetection = (sensorContext) => {
     ];
     const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);
     const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;
-    if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== active.id) {
+    if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel && collidingContainer?.id !== active.id) {
       dropIndicatorPosition = import_constants.DropIndicatorPosition.Inside;
     } else {
-      const isFirstElement = flattenedItemsDictionary[collidingContainer.id].realIndex === 0;
+      const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;
       if (isFirstElement) {
         dropIndicatorPosition = isBefore ? import_constants.DropIndicatorPosition.Before : import_constants.DropIndicatorPosition.After;
       } else {
@@ -80,7 +80,7 @@ const customCollisionDetection = (sensorContext) => {
     }
     return [
       {
-        id: isBefore && dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? nearesCollidingContainer.id : collidingContainer.id,
+        id: isBefore && dropIndicatorPosition === import_constants.DropIndicatorPosition.After ? nearesCollidingContainer?.id : collidingContainer?.id,
         data: { dropIndicatorPosition }
       }
     ];

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/tree/customCollisionDetection.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { DropIndicatorPosition } from './constants.js';\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n  const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n    const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n    if (!active) return [];\n\n    const rectIntersectionCollisions = rectIntersection({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n    });\n\n    const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n    const possibleCollidingContainers = droppableContainers.filter(\n      (container) =>\n        !containersRef.current.includes(container.id) &&\n        flattenedItemsDictionary[container.id].container === closestContainerOfContainersId,\n    );\n\n    const [collidingContainer, nearesCollidingContainer] = closestCorners({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: possibleCollidingContainers,\n    });\n\n    let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n    // If we didn't find a match, return empty array\n    if (!collidingContainer) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n      return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n    }\n\n    const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n      ?.current;\n\n    if (!collidingRect) return [];\n\n    // Calculate the intersection interval\n    const [top, bottom] = [\n      Math.max(collisionRect.top, collidingRect.top),\n      Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n    ];\n\n    // Calculate the percentage of intersection\n    const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n    const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n    if (\n      intersectionPercentage > insideThreshold &&\n      flattenedItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel &&\n      collidingContainer.id !== active.id\n    ) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n    } else {\n      const isFirstElement = flattenedItemsDictionary[collidingContainer.id].realIndex === 0;\n      if (isFirstElement) {\n        dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n      } else {\n        dropIndicatorPosition = DropIndicatorPosition.After;\n      }\n    }\n\n    // Return the id of the match rectangle\n    return [\n      {\n        id:\n          isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n            ? nearesCollidingContainer.id\n            : collidingContainer.id,\n        data: { dropIndicatorPosition },\n      },\n    ];\n  };\n  return func;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAsC;AACtC,kBAA0E;AAG1E,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,iCAA6B,8BAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,UAAU,EAAE,KAC5C,yBAAyB,UAAU,EAAE,EAAE,cAAc;AAAA,IACzD;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,QAAI,4BAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,uCAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,uCAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAC3G,QACE,yBAAyB,mBACzB,yBAAyB,mBAAmB,EAAE,EAAE,QAAQ,KAAK,uBAC7D,mBAAmB,OAAO,OAAO,IACjC;AACA,8BAAwB,uCAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,mBAAmB,EAAE,EAAE,cAAc;AACrF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,uCAAsB,SAAS,uCAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,uCAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,uCAAsB,QACxD,yBAAyB,KACzB,mBAAmB;AAAA,QACzB,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n  const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n    const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n    if (!active) return [];\n\n    const rectIntersectionCollisions = rectIntersection({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n    });\n\n    const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n    const possibleCollidingContainers = droppableContainers.filter(\n      (container) =>\n        !containersRef.current.includes(container?.id) &&\n        flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n    );\n\n    const [collidingContainer, nearesCollidingContainer] = closestCorners({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: possibleCollidingContainers,\n    });\n\n    let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n    // If we didn't find a match, return empty array\n    if (!collidingContainer) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n      return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n    }\n\n    const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n      ?.current;\n\n    if (!collidingRect) return [];\n\n    // Calculate the intersection interval\n    const [top, bottom] = [\n      Math.max(collisionRect.top, collidingRect.top),\n      Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n    ];\n\n    // Calculate the percentage of intersection\n    const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n    const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n    if (\n      intersectionPercentage > insideThreshold &&\n      flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n      collidingContainer?.id !== active.id\n    ) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n    } else {\n      const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;\n      if (isFirstElement) {\n        dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n      } else {\n        dropIndicatorPosition = DropIndicatorPosition.After;\n      }\n    }\n\n    // Return the id of the match rectangle\n    return [\n      {\n        id:\n          isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n            ? nearesCollidingContainer?.id\n            : collidingContainer?.id,\n        data: { dropIndicatorPosition },\n      },\n    ];\n  };\n  return func;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,kBAA0E;AAC1E,uBAAsC;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,iCAA6B,8BAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,QAAI,4BAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,uCAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,uCAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAC3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,uCAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,cAAc;AACtF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,uCAAsB,SAAS,uCAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,uCAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,uCAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/DSDragAndDrop/DSDragAndDrop.js

@@ -2,14 +2,11 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
-import {
-  DndContext,
-  DragOverlay,
-  restrictToWindowEdges,
-  useMultiTreeDndkitConfig
-} from "../../index.js";
-import { ContainersContext } from "../DSSortableContainer/index.js";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { describe } from "@elliemae/ds-props-helpers";
+import { DragOverlay, DndContext } from "@dnd-kit/core";
+import { useMultiTreeDndkitConfig } from "../../tree/index.js";
+import { ContainersContext } from "../DSSortableContainer/config/SortableContainerContext.js";
 import { DSDragAndDropPropTypes } from "./react-desc-prop-types.js";
 const flatten = (items, parentId = null, depth = 0, container = "root", iteration = { count: 0 }) => items.reduce((acc, item, index) => {
   acc.push({
@@ -17,7 +14,7 @@ const flatten = (items, parentId = null, depth = 0, container = "root", iteratio
     uid: item.dsId,
     childrenCount: item?.subitems?.length || 0,
     original: item,
-    realIndex: iteration.count++,
+    realIndex: iteration.count + 1,
     parentId,
     depth,
     index,
@@ -56,14 +53,12 @@ const DSDragAndDrop = ({
     getIsDropValid: () => true,
     ...rest
   });
+  const ctx = useMemo(
+    () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),
+    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps]
+  );
   return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
-    /* @__PURE__ */ jsx(
-      ContainersContext.Provider,
-      {
-        value: { sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse },
-        children
-      }
-    ),
+    /* @__PURE__ */ jsx(ContainersContext.Provider, { value: ctx, children }),
     createPortal(
       /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto", zIndex: 1001 }, modifiers: [restrictToWindowEdges], children: active ? /* @__PURE__ */ jsx(DragOverlayRenderer, { activeItem: active }) : null }),
       document.body

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSDragAndDrop/DSDragAndDrop.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DndContext,\n  DragOverlay,\n  restrictToWindowEdges,\n  useMultiTreeDndkitConfig,\n  type UniqueIdentifier,\n} from '../../index.js';\nimport { ContainersContext } from '../DSSortableContainer/index.js';\nimport { describe } from '@elliemae/ds-props-helpers';\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    return acc;\n  }, [] as Item<T>[]);\n\nexport const DSDragAndDrop = <T,>({\n  items,\n  children,\n  onReorder,\n  onCollapse,\n  DragOverlayRenderer,\n  maxDragAndDropLevel = 0,\n  ...rest\n}: DSDragAndDropT.Props<T>) => {\n  const itemsFlattened = useMemo(\n    () =>\n      Object.keys(items).reduce(\n        (acc, container) => {\n          acc[container] = flatten(items[container] as Item<T>[], null, 0, container);\n          return acc;\n        },\n        {} as Record<string, Item<T>[]>,\n      ),\n    [items],\n  );\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } =\n    useMultiTreeDndkitConfig({\n      flattenedItems: itemsFlattened,\n      isHorizontalDnD: false,\n      isExpandable: true,\n      onReorder,\n      maxDragAndDropLevel,\n      getIsDropValid: () => true,\n      ...rest,\n    });\n\n  return (\n    <DndContext {...dndContextProps}>\n      <ContainersContext.Provider\n        value={{ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }}\n      >\n        {children}\n      </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"],
-  "mappings": "AAAA,YAAY,WAAW;ACwEnB,SACE,KADF;AAvEJ,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AAEvC,MAAM,UAAU,CACd,OACA,WAAoC,MACpC,QAAQ,GACR,YAAY,QACZ,YAAY,EAAE,OAAO,EAAE,MAEvB,MAAM,OAAO,CAAC,KAAK,MAAM,UAAU;AACjC,MAAI,KAAK;AAAA,IACP,GAAG;AAAA,IACH,KAAK,KAAK;AAAA,IACV,eAAe,MAAM,UAAU,UAAU;AAAA,IACzC,UAAU;AAAA,IACV,WAAW,UAAU;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,KAAK,UAAU,SAAS,KAAK,KAAK,cAAc,OAAO;AACzD,QAAI,KAAK,GAAG,QAAQ,KAAK,UAAU,KAAK,MAAM,QAAQ,GAAG,WAAW,SAAS,CAAC;AAAA,EAChF;AACA,SAAO;AACT,GAAG,CAAC,CAAc;AAEb,MAAM,gBAAgB,CAAK;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,GAAG;AACL,MAA+B;AAC7B,QAAM,iBAAiB;AAAA,IACrB,MACE,OAAO,KAAK,KAAK,EAAE;AAAA,MACjB,CAAC,KAAK,cAAc;AAClB,YAAI,SAAS,IAAI,QAAQ,MAAM,SAAS,GAAgB,MAAM,GAAG,SAAS;AAC1E,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IACxF,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM;AAAA,IACtB,GAAG;AAAA,EACL,CAAC;AAEH,SACE,qBAAC,cAAY,GAAG,iBACd;AAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,QAEpG;AAAA;AAAA,IACH;AAAA,IACC;AAAA,MACC,oBAAC,eAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,qBAAqB,GACnF,mBAAS,oBAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,0BAA0B,SAAS,aAAa;AAEtD,wBAAwB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { type UniqueIdentifier } from '@dnd-kit/core/dist/types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DragOverlay, DndContext } from '@dnd-kit/core';\nimport { useMultiTreeDndkitConfig } from '../../tree/index.js';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSDragAndDropT, Item } from './react-desc-prop-types.js';\nimport { DSDragAndDropPropTypes } from './react-desc-prop-types.js';\n\nconst flatten = <T,>(\n  items: Item<T>[],\n  parentId: UniqueIdentifier | null = null,\n  depth = 0,\n  container = 'root',\n  iteration = { count: 0 },\n) =>\n  items.reduce((acc, item, index) => {\n    acc.push({\n      ...item,\n      uid: item.dsId,\n      childrenCount: item?.subitems?.length || 0,\n      original: item,\n      realIndex: iteration.count + 1,\n      parentId,\n      depth,\n      index,\n      container,\n    });\n    if (item.subitems?.length > 0 && item.collapsed === false) {\n      acc.push(...flatten(item.subitems, item.dsId, depth + 1, container, iteration));\n    }\n    return acc;\n  }, [] as Item<T>[]);\n\nexport const DSDragAndDrop = <T,>({\n  items,\n  children,\n  onReorder,\n  onCollapse,\n  DragOverlayRenderer,\n  maxDragAndDropLevel = 0,\n  ...rest\n}: DSDragAndDropT.Props<T>) => {\n  const itemsFlattened = useMemo(\n    () =>\n      Object.keys(items).reduce(\n        (acc, container) => {\n          acc[container] = flatten(items[container] as Item<T>[], null, 0, container);\n          return acc;\n        },\n        {} as Record<string, Item<T>[]>,\n      ),\n    [items],\n  );\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } =\n    useMultiTreeDndkitConfig({\n      flattenedItems: itemsFlattened,\n      isHorizontalDnD: false,\n      isExpandable: true,\n      onReorder,\n      maxDragAndDropLevel,\n      getIsDropValid: () => true,\n      ...rest,\n    });\n\n  const ctx = useMemo(\n    () => ({ sortableContextProps, dropIndicatorPosition, isDropValid, items: itemsFlattened, onCollapse }),\n    [dropIndicatorPosition, isDropValid, itemsFlattened, onCollapse, sortableContextProps],\n  );\n\n  return (\n    <DndContext {...dndContextProps}>\n      <ContainersContext.Provider value={ctx}>{children}</ContainersContext.Provider>\n      {createPortal(\n        <DragOverlay style={{ width: 'auto', zIndex: 1001 }} modifiers={[restrictToWindowEdges]}>\n          {active ? <DragOverlayRenderer activeItem={active} /> : null}\n        </DragOverlay>,\n        document.body,\n      )}\n    </DndContext>\n  );\n};\n\nconst DSDragAndDropWithSchema = describe(DSDragAndDrop);\n\nDSDragAndDropWithSchema.propTypes = DSDragAndDropPropTypes;\n\nexport { DSDragAndDropWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0EnB,SACE,KADF;AAzEJ,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAE7B,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,aAAa,kBAAkB;AACxC,SAAS,gCAAgC;AACzC,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;AAEvC,MAAM,UAAU,CACd,OACA,WAAoC,MACpC,QAAQ,GACR,YAAY,QACZ,YAAY,EAAE,OAAO,EAAE,MAEvB,MAAM,OAAO,CAAC,KAAK,MAAM,UAAU;AACjC,MAAI,KAAK;AAAA,IACP,GAAG;AAAA,IACH,KAAK,KAAK;AAAA,IACV,eAAe,MAAM,UAAU,UAAU;AAAA,IACzC,UAAU;AAAA,IACV,WAAW,UAAU,QAAQ;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,KAAK,UAAU,SAAS,KAAK,KAAK,cAAc,OAAO;AACzD,QAAI,KAAK,GAAG,QAAQ,KAAK,UAAU,KAAK,MAAM,QAAQ,GAAG,WAAW,SAAS,CAAC;AAAA,EAChF;AACA,SAAO;AACT,GAAG,CAAC,CAAc;AAEb,MAAM,gBAAgB,CAAK;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,GAAG;AACL,MAA+B;AAC7B,QAAM,iBAAiB;AAAA,IACrB,MACE,OAAO,KAAK,KAAK,EAAE;AAAA,MACjB,CAAC,KAAK,cAAc;AAClB,YAAI,SAAS,IAAI,QAAQ,MAAM,SAAS,GAAgB,MAAM,GAAG,SAAS;AAC1E,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAAA,IACF,CAAC,KAAK;AAAA,EACR;AACA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IACxF,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,gBAAgB,MAAM;AAAA,IACtB,GAAG;AAAA,EACL,CAAC;AAEH,QAAM,MAAM;AAAA,IACV,OAAO,EAAE,sBAAsB,uBAAuB,aAAa,OAAO,gBAAgB,WAAW;AAAA,IACrG,CAAC,uBAAuB,aAAa,gBAAgB,YAAY,oBAAoB;AAAA,EACvF;AAEA,SACE,qBAAC,cAAY,GAAG,iBACd;AAAA,wBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KAAM,UAAS;AAAA,IACjD;AAAA,MACC,oBAAC,eAAY,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,GAAG,WAAW,CAAC,qBAAqB,GACnF,mBAAS,oBAAC,uBAAoB,YAAY,QAAQ,IAAK,MAC1D;AAAA,MACA,SAAS;AAAA,IACX;AAAA,KACF;AAEJ;AAEA,MAAM,0BAA0B,SAAS,aAAa;AAEtD,wBAAwB,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSSortableContainer/DSSortableContainer.js

@@ -1,24 +1,29 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2, { useContext, createContext, useMemo } from "react";
+import React2, { useContext, useMemo } from "react";
 import { DSFastList } from "@elliemae/ds-fast-list";
 import { describe } from "@elliemae/ds-props-helpers";
-import { SortableContext, useDroppable, DSSortableItem } from "../../index.js";
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext } from "@dnd-kit/sortable";
+import { DSSortableItem } from "../DSSortableItem/index.js";
 import { DSSortalContainerPropTypes } from "./react-desc-prop-types.js";
-function createContainerContext() {
-  return createContext({
-    sortableContextProps: {},
-    items: {}
-  });
-}
-const ContainersContext = createContainerContext();
+import { ContainersContext } from "./config/SortableContainerContext.js";
 const ContainerItemRenderer = (props) => {
-  const {
-    index,
-    extraItemProps: { items, ItemRenderer, extraItemProps, ...rest }
-  } = props;
+  const { index, extraItemProps } = props;
+  if (!extraItemProps) {
+    return null;
+  }
+  const { items, ItemRenderer, ...rest } = extraItemProps;
   const item = items[index];
-  return /* @__PURE__ */ jsx(DSSortableItem, { item, ItemRenderer, extraItemProps, ...rest });
+  return /* @__PURE__ */ jsx(
+    DSSortableItem,
+    {
+      item,
+      ItemRenderer,
+      ...rest,
+      extraItemProps
+    }
+  );
 };
 const ContainerItemRendererMemoized = React2.memo(ContainerItemRenderer);
 const DSSortableContainer = (props) => {
@@ -55,9 +60,7 @@ const DSSortableContainer = (props) => {
 const DSSortableContainerSchema = describe(DSSortableContainer);
 DSSortableContainerSchema.propTypes = DSSortalContainerPropTypes;
 export {
-  ContainersContext,
   DSSortableContainer,
-  DSSortableContainerSchema,
-  createContainerContext
+  DSSortableContainerSchema
 };
 //# sourceMappingURL=DSSortableContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSSortableContainer/DSSortableContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, createContext, useMemo } from 'react';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { SortableContext, useDroppable, DSSortableItem } from '../../index.js';\nimport type { DSSortableContainerT } from './react-desc-prop-types.js';\nimport { DSSortalContainerPropTypes } from './react-desc-prop-types.js';\nimport type { DnDKitTree } from '../../tree/types.js';\nimport type { ItemRendererPropsT } from '../DSSortableItem/index.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}\nexport const ContainersContext = createContainerContext();\n\nconst ContainerItemRenderer = <T, K>(props: DSSortableContainerT.ContainerItemRendererT<T, K>) => {\n  const {\n    index,\n    extraItemProps: { items, ItemRenderer, extraItemProps, ...rest },\n  } = props;\n  const item = items[index];\n  return <DSSortableItem item={item} ItemRenderer={ItemRenderer} extraItemProps={extraItemProps} {...rest} />;\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"],
-  "mappings": "AAAA,YAAY,WAAW;AC+Bd;AA/BT,OAAOA,UAAS,YAAY,eAAe,eAAe;AAC1D,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,cAAc,sBAAsB;AAE9D,SAAS,kCAAkC;AAYpC,SAAS,yBAA4B;AAC1C,SAAO,cAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AACO,MAAM,oBAAoB,uBAAuB;AAExD,MAAM,wBAAwB,CAAO,UAA6D;AAChG,QAAM;AAAA,IACJ;AAAA,IACA,gBAAgB,EAAE,OAAO,cAAc,gBAAgB,GAAG,KAAK;AAAA,EACjE,IAAI;AACJ,QAAM,OAAO,MAAM,KAAK;AACxB,SAAO,oBAAC,kBAAe,MAAY,cAA4B,gBAAiC,GAAG,MAAM;AAC3G;AAEA,MAAM,gCAAgCA,OAAM,KAAK,qBAAqB;AAE/D,MAAM,sBAAsB,CAAO,UAA4C;AACpF,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,IAAI;AAC3E,QAAM,EAAE,YAAY,OAAO,IAAI,aAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,MAAM,WAAW,iBAAiB;AACxC,QAAM,EAAE,sBAAsB,MAAM,IAAI;AACxC,QAAM,gCAAgC,qBAAqB,WAAW;AAEtE,QAAM,SAAS,QAAQ,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,oBAAC,mBAAiB,GAAG,+BAA+B,IAAG,aACrD,8BAAC,aAAU,UAAU,YAAY,QAC9B,kBACH,GACF;AAEJ;AAEA,MAAM,4BAA4B,SAAS,mBAAmB;AAC9D,0BAA0B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBnB;AAnBJ,OAAOA,UAAS,YAAY,eAAe;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAE/B,SAAS,kCAAkC;AAE3C,SAAS,yBAAyB;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,gCAAgCA,OAAM,KAAK,qBAAqB;AAE/D,MAAM,sBAAsB,CAAO,UAA4C;AACpF,QAAM,EAAE,aAAa,cAAc,WAAW,gBAAgB,SAAS,IAAI;AAC3E,QAAM,EAAE,YAAY,OAAO,IAAI,aAAa;AAAA,IAC1C,IAAI;AAAA,EACN,CAAC;AACD,QAAM,MAAM,WAAW,iBAAiB;AACxC,QAAM,EAAE,sBAAsB,MAAM,IAAI;AACxC,QAAM,gCAAgC,qBAAqB,WAAW;AAEtE,QAAM,SAAS,QAAQ,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,oBAAC,mBAAiB,GAAG,+BAA+B,IAAG,aACrD,8BAAC,aAAU,UAAU,YAAY,QAC9B,kBACH,GACF;AAEJ;AAEA,MAAM,4BAA4B,SAAS,mBAAmB;AAC9D,0BAA0B,YAAY;",
   "names": ["React"]
 }

package/dist/esm/parts/DSSortableContainer/config/SortableContainerContext.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { createContext } from "react";
+function createContainerContext() {
+  return createContext({
+    sortableContextProps: {},
+    items: {}
+  });
+}
+const ContainersContext = createContainerContext();
+export {
+  ContainersContext,
+  createContainerContext
+};
+//# sourceMappingURL=SortableContainerContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSSortableContainer/config/SortableContainerContext.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAYvB,SAAS,yBAA4B;AAC1C,SAAO,cAAoC;AAAA,IACzC,sBAAsB,CAAC;AAAA,IACvB,OAAO,CAAC;AAAA,EACV,CAAC;AACH;AAEO,MAAM,oBAAoB,uBAAuB;",
+  "names": []
+}

package/dist/esm/parts/DSSortableContainer/index.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { DSSortableContainer, DSSortableContainerSchema, ContainersContext } from "./DSSortableContainer.js";
+import { DSSortableContainer, DSSortableContainerSchema } from "./DSSortableContainer.js";
+import { ContainersContext } from "./config/SortableContainerContext.js";
 export {
   ContainersContext,
   DSSortableContainer,

package/dist/esm/parts/DSSortableContainer/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSSortableContainer/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSortableContainer, DSSortableContainerSchema, ContainersContext } from './DSSortableContainer.js';\nexport type { DSSortableContainerT } from './react-desc-prop-types.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB,2BAA2B,yBAAyB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSSortableContainer, DSSortableContainerSchema } from './DSSortableContainer.js';\nexport { ContainersContext } from './config/SortableContainerContext.js';\nexport type { DSSortableContainerT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB,iCAAiC;AAC/D,SAAS,yBAAyB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSSortableContainer/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
   "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,iBAAiB;AAgDnB,MAAM,6BAA6B;AAAA,EACxC,aAAa,UAAU,OAAO,YAAY,yBAAyB,EAAE;AAAA,EACrE,WAAW,UAAU,KAAK,YAAY,+CAA+C,EAAE;AAAA,EACvF,UAAU,UAAU,KAAK,YAAY,8CAA8C;AAAA,EACnF,OAAO,UAAU,OAAO,YAAY,2CAA2C;AAAA,EAC/E,gBAAgB,UAAU,OAAO,YAAY,wDAAwD;AAAA,EACrG,cAAc,UAAU,KAAK,YAAY,8BAA8B;AACzE;",
   "names": []
 }

package/dist/esm/parts/DSSortableItem/DSSortableItem.js

@@ -2,8 +2,8 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useContext } from "react";
 import { describe } from "@elliemae/ds-props-helpers";
-import { useSortable } from "../../index.js";
-import { ContainersContext } from "../DSSortableContainer/index.js";
+import { useSortable } from "@dnd-kit/sortable";
+import { ContainersContext } from "../DSSortableContainer/config/SortableContainerContext.js";
 import { DSSortalItemPropTypes } from "./react-desc-prop-types.js";
 const DSSortableItem = (props) => {
   const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;

package/dist/esm/parts/DSSortableItem/DSSortableItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSSortableItem/DSSortableItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\n\nimport { useSortable } from '../../index.js';\nimport { ContainersContext } from '../DSSortableContainer/index.js';\nimport type { DSSortableItemT, DraggablePropsT } from './react-desc-prop-types.js';\nimport { DSSortalItemPropTypes } from './react-desc-prop-types.js';\n\nimport type { Item } from '../DSDragAndDrop/index.js';\nexport const DSSortableItem = <T, K>(props: DSSortableItemT.Props<T, K>) => {\n  const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;\n  const ctx = useContext(ContainersContext);\n\n  const currentItem = item || (userIndex !== undefined ? ctx.items[containerId || 'root'][userIndex] : undefined);\n\n  const { isDropValid, dropIndicatorPosition, onCollapse } = ctx;\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id: currentItem?.dsId || '',\n    }),\n    [currentItem],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  const draggableProps: DraggablePropsT = useMemo(() => {\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition: dropIndicatorPosition || 'none',\n      isDropValid: isDropValid || false,\n    };\n  }, [dropIndicatorPosition, isDropValid, useSortableHelpers]);\n\n  if (!currentItem) {\n    return null;\n  }\n  return (\n    <div ref={draggableProps.setNodeRef} style={{ position: 'relative' }}>\n      <ItemRenderer\n        item={currentItem as Item<T>}\n        draggableProps={draggableProps}\n        onCollapse={onCollapse}\n        extraItemProps={extraItemProps as K}\n      />\n    </div>\n  );\n};\n\nconst DSSortableItemSchema = describe(DSSortableItem);\n\nDSSortableItemSchema.propTypes = DSSortalItemPropTypes;\n\nexport { DSSortableItemSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2CjB;AA3CN,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAAS,6BAA6B;AAG/B,MAAM,iBAAiB,CAAO,UAAuC;AAC1E,QAAM,EAAE,MAAM,OAAO,WAAW,aAAa,cAAc,eAAe,IAAI;AAC9E,QAAM,MAAM,WAAW,iBAAiB;AAExC,QAAM,cAAc,SAAS,cAAc,SAAY,IAAI,MAAM,eAAe,MAAM,EAAE,SAAS,IAAI;AAErG,QAAM,EAAE,aAAa,uBAAuB,WAAW,IAAI;AAG3D,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,aAAa,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAEvD,QAAM,iBAAkC,QAAQ,MAAM;AACpD,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C,uBAAuB,yBAAyB;AAAA,MAChD,aAAa,eAAe;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,uBAAuB,aAAa,kBAAkB,CAAC;AAE3D,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AACA,SACE,oBAAC,SAAI,KAAK,eAAe,YAAY,OAAO,EAAE,UAAU,WAAW,GACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,uBAAuB,SAAS,cAAc;AAEpD,qBAAqB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useContext } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { ContainersContext } from '../DSSortableContainer/config/SortableContainerContext.js';\nimport type { DSSortableItemT, DraggablePropsT } from './react-desc-prop-types.js';\nimport { DSSortalItemPropTypes } from './react-desc-prop-types.js';\n\nimport type { Item } from '../DSDragAndDrop/index.js';\nexport const DSSortableItem = <T, K>(props: DSSortableItemT.Props<T, K>) => {\n  const { item, index: userIndex, containerId, ItemRenderer, extraItemProps } = props;\n  const ctx = useContext(ContainersContext);\n\n  const currentItem = item || (userIndex !== undefined ? ctx.items[containerId || 'root'][userIndex] : undefined);\n\n  const { isDropValid, dropIndicatorPosition, onCollapse } = ctx;\n\n  // onMount generate unique options, so everyting is only ran once\n  const draggableOptions = useMemo(\n    () => ({\n      id: currentItem?.dsId || '',\n    }),\n    [currentItem],\n  );\n\n  const useSortableHelpers = useSortable(draggableOptions);\n\n  const draggableProps: DraggablePropsT = useMemo(() => {\n    const { index, overIndex } = useSortableHelpers;\n\n    return {\n      ...useSortableHelpers,\n      shouldShowDropIndicatorPosition: overIndex === index,\n      dropIndicatorPosition: dropIndicatorPosition || 'none',\n      isDropValid: isDropValid || false,\n    };\n  }, [dropIndicatorPosition, isDropValid, useSortableHelpers]);\n\n  if (!currentItem) {\n    return null;\n  }\n  return (\n    <div ref={draggableProps.setNodeRef} style={{ position: 'relative' }}>\n      <ItemRenderer\n        item={currentItem as Item<T>}\n        draggableProps={draggableProps}\n        onCollapse={onCollapse}\n        extraItemProps={extraItemProps as K}\n      />\n    </div>\n  );\n};\n\nconst DSSortableItemSchema = describe(DSSortableItem);\n\nDSSortableItemSchema.propTypes = DSSortalItemPropTypes;\n\nexport { DSSortableItemSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CjB;AA1CN,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAAS,6BAA6B;AAG/B,MAAM,iBAAiB,CAAO,UAAuC;AAC1E,QAAM,EAAE,MAAM,OAAO,WAAW,aAAa,cAAc,eAAe,IAAI;AAC9E,QAAM,MAAM,WAAW,iBAAiB;AAExC,QAAM,cAAc,SAAS,cAAc,SAAY,IAAI,MAAM,eAAe,MAAM,EAAE,SAAS,IAAI;AAErG,QAAM,EAAE,aAAa,uBAAuB,WAAW,IAAI;AAG3D,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,aAAa,QAAQ;AAAA,IAC3B;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAEvD,QAAM,iBAAkC,QAAQ,MAAM;AACpD,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C,uBAAuB,yBAAyB;AAAA,MAChD,aAAa,eAAe;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,uBAAuB,aAAa,kBAAkB,CAAC;AAE3D,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AACA,SACE,oBAAC,SAAI,KAAK,eAAe,YAAY,OAAO,EAAE,UAAU,WAAW,GACjE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,uBAAuB,SAAS,cAAc;AAEpD,qBAAqB,YAAY;",
   "names": []
 }

package/dist/esm/tree/customCollisionDetection.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { DropIndicatorPosition } from "./constants.js";
 import { rectIntersection, closestCorners } from "@dnd-kit/core";
+import { DropIndicatorPosition } from "./constants.js";
 const insideThreshold = 0.7;
 const customCollisionDetection = (sensorContext) => {
   const func = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {
@@ -14,7 +14,7 @@ const customCollisionDetection = (sensorContext) => {
     });
     const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};
     const possibleCollidingContainers = droppableContainers.filter(
-      (container) => !containersRef.current.includes(container.id) && flattenedItemsDictionary[container.id].container === closestContainerOfContainersId
+      (container) => !containersRef.current.includes(container?.id) && flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId
     );
     const [collidingContainer, nearesCollidingContainer] = closestCorners({
       ...args,
@@ -35,10 +35,10 @@ const customCollisionDetection = (sensorContext) => {
     ];
     const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);
     const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;
-    if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel && collidingContainer.id !== active.id) {
+    if (intersectionPercentage > insideThreshold && flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel && collidingContainer?.id !== active.id) {
       dropIndicatorPosition = DropIndicatorPosition.Inside;
     } else {
-      const isFirstElement = flattenedItemsDictionary[collidingContainer.id].realIndex === 0;
+      const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;
       if (isFirstElement) {
         dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;
       } else {
@@ -47,7 +47,7 @@ const customCollisionDetection = (sensorContext) => {
     }
     return [
       {
-        id: isBefore && dropIndicatorPosition === DropIndicatorPosition.After ? nearesCollidingContainer.id : collidingContainer.id,
+        id: isBefore && dropIndicatorPosition === DropIndicatorPosition.After ? nearesCollidingContainer?.id : collidingContainer?.id,
         data: { dropIndicatorPosition }
       }
     ];

package/dist/esm/tree/customCollisionDetection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/tree/customCollisionDetection.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { DropIndicatorPosition } from './constants.js';\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n  const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n    const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n    if (!active) return [];\n\n    const rectIntersectionCollisions = rectIntersection({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n    });\n\n    const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n    const possibleCollidingContainers = droppableContainers.filter(\n      (container) =>\n        !containersRef.current.includes(container.id) &&\n        flattenedItemsDictionary[container.id].container === closestContainerOfContainersId,\n    );\n\n    const [collidingContainer, nearesCollidingContainer] = closestCorners({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: possibleCollidingContainers,\n    });\n\n    let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n    // If we didn't find a match, return empty array\n    if (!collidingContainer) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n      return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n    }\n\n    const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n      ?.current;\n\n    if (!collidingRect) return [];\n\n    // Calculate the intersection interval\n    const [top, bottom] = [\n      Math.max(collisionRect.top, collidingRect.top),\n      Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n    ];\n\n    // Calculate the percentage of intersection\n    const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n    const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n    if (\n      intersectionPercentage > insideThreshold &&\n      flattenedItemsDictionary[collidingContainer.id].depth + 1 <= maxDragAndDropLevel &&\n      collidingContainer.id !== active.id\n    ) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n    } else {\n      const isFirstElement = flattenedItemsDictionary[collidingContainer.id].realIndex === 0;\n      if (isFirstElement) {\n        dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n      } else {\n        dropIndicatorPosition = DropIndicatorPosition.After;\n      }\n    }\n\n    // Return the id of the match rectangle\n    return [\n      {\n        id:\n          isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n            ? nearesCollidingContainer.id\n            : collidingContainer.id,\n        data: { dropIndicatorPosition },\n      },\n    ];\n  };\n  return func;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,6BAA6B;AACtC,SAAkC,kBAAkB,sBAAsB;AAG1E,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,6BAA6B,iBAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,UAAU,EAAE,KAC5C,yBAAyB,UAAU,EAAE,EAAE,cAAc;AAAA,IACzD;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,IAAI,eAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,sBAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,sBAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAC3G,QACE,yBAAyB,mBACzB,yBAAyB,mBAAmB,EAAE,EAAE,QAAQ,KAAK,uBAC7D,mBAAmB,OAAO,OAAO,IACjC;AACA,8BAAwB,sBAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,mBAAmB,EAAE,EAAE,cAAc;AACrF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,sBAAsB,SAAS,sBAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,sBAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,sBAAsB,QACxD,yBAAyB,KACzB,mBAAmB;AAAA,QACzB,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { type CollisionDetection, rectIntersection, closestCorners } from '@dnd-kit/core';\nimport { DropIndicatorPosition } from './constants.js';\nimport type { DnDKitTree } from './types.js';\n// Percentage to be inside\nconst insideThreshold = 0.7;\n\nexport const customCollisionDetection = <T,>(sensorContext: DnDKitTree.SensorContext<T>): CollisionDetection => {\n  const func: CollisionDetection = ({ droppableContainers, collisionRect, droppableRects, ...args }) => {\n    const { active, flattenedItemsDictionary, maxDragAndDropLevel, containersRef } = sensorContext.current;\n\n    if (!active) return [];\n\n    const rectIntersectionCollisions = rectIntersection({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: droppableContainers.filter(({ id }) => containersRef.current.includes(id)),\n    });\n\n    const { id: closestContainerOfContainersId } = rectIntersectionCollisions[0] ?? {};\n\n    const possibleCollidingContainers = droppableContainers.filter(\n      (container) =>\n        !containersRef.current.includes(container?.id) &&\n        flattenedItemsDictionary[container?.id].container === closestContainerOfContainersId,\n    );\n\n    const [collidingContainer, nearesCollidingContainer] = closestCorners({\n      ...args,\n      droppableRects,\n      collisionRect,\n      droppableContainers: possibleCollidingContainers,\n    });\n\n    let dropIndicatorPosition: DnDKitTree.DropIndicatorPositionValues = DropIndicatorPosition.None;\n\n    // If we didn't find a match, return empty array\n    if (!collidingContainer) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n      return [{ id: closestContainerOfContainersId, data: { dropIndicatorPosition } }];\n    }\n\n    const collidingRect = possibleCollidingContainers.find((container) => container.id === collidingContainer.id)?.rect\n      ?.current;\n\n    if (!collidingRect) return [];\n\n    // Calculate the intersection interval\n    const [top, bottom] = [\n      Math.max(collisionRect.top, collidingRect.top),\n      Math.min(collisionRect.top + collisionRect.height, collidingRect.top + collidingRect.height),\n    ];\n\n    // Calculate the percentage of intersection\n    const intersectionPercentage = Math.abs(bottom - top) / Math.min(collisionRect.height, collidingRect.height);\n    const isBefore = collisionRect.top + collisionRect.height / 2 < collidingRect.top + collidingRect.height / 2;\n    if (\n      intersectionPercentage > insideThreshold &&\n      flattenedItemsDictionary[collidingContainer?.id].depth + 1 <= maxDragAndDropLevel &&\n      collidingContainer?.id !== active.id\n    ) {\n      dropIndicatorPosition = DropIndicatorPosition.Inside;\n    } else {\n      const isFirstElement = flattenedItemsDictionary[collidingContainer?.id].realIndex === 0;\n      if (isFirstElement) {\n        dropIndicatorPosition = isBefore ? DropIndicatorPosition.Before : DropIndicatorPosition.After;\n      } else {\n        dropIndicatorPosition = DropIndicatorPosition.After;\n      }\n    }\n\n    // Return the id of the match rectangle\n    return [\n      {\n        id:\n          isBefore && dropIndicatorPosition === DropIndicatorPosition.After\n            ? nearesCollidingContainer?.id\n            : collidingContainer?.id,\n        data: { dropIndicatorPosition },\n      },\n    ];\n  };\n  return func;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAkC,kBAAkB,sBAAsB;AAC1E,SAAS,6BAA6B;AAGtC,MAAM,kBAAkB;AAEjB,MAAM,2BAA2B,CAAK,kBAAmE;AAC9G,QAAM,OAA2B,CAAC,EAAE,qBAAqB,eAAe,gBAAgB,GAAG,KAAK,MAAM;AACpG,UAAM,EAAE,QAAQ,0BAA0B,qBAAqB,cAAc,IAAI,cAAc;AAE/F,QAAI,CAAC,OAAQ,QAAO,CAAC;AAErB,UAAM,6BAA6B,iBAAiB;AAAA,MAClD,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB,oBAAoB,OAAO,CAAC,EAAE,GAAG,MAAM,cAAc,QAAQ,SAAS,EAAE,CAAC;AAAA,IAChG,CAAC;AAED,UAAM,EAAE,IAAI,+BAA+B,IAAI,2BAA2B,CAAC,KAAK,CAAC;AAEjF,UAAM,8BAA8B,oBAAoB;AAAA,MACtD,CAAC,cACC,CAAC,cAAc,QAAQ,SAAS,WAAW,EAAE,KAC7C,yBAAyB,WAAW,EAAE,EAAE,cAAc;AAAA,IAC1D;AAEA,UAAM,CAAC,oBAAoB,wBAAwB,IAAI,eAAe;AAAA,MACpE,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB,CAAC;AAED,QAAI,wBAAgE,sBAAsB;AAG1F,QAAI,CAAC,oBAAoB;AACvB,8BAAwB,sBAAsB;AAC9C,aAAO,CAAC,EAAE,IAAI,gCAAgC,MAAM,EAAE,sBAAsB,EAAE,CAAC;AAAA,IACjF;AAEA,UAAM,gBAAgB,4BAA4B,KAAK,CAAC,cAAc,UAAU,OAAO,mBAAmB,EAAE,GAAG,MAC3G;AAEJ,QAAI,CAAC,cAAe,QAAO,CAAC;AAG5B,UAAM,CAAC,KAAK,MAAM,IAAI;AAAA,MACpB,KAAK,IAAI,cAAc,KAAK,cAAc,GAAG;AAAA,MAC7C,KAAK,IAAI,cAAc,MAAM,cAAc,QAAQ,cAAc,MAAM,cAAc,MAAM;AAAA,IAC7F;AAGA,UAAM,yBAAyB,KAAK,IAAI,SAAS,GAAG,IAAI,KAAK,IAAI,cAAc,QAAQ,cAAc,MAAM;AAC3G,UAAM,WAAW,cAAc,MAAM,cAAc,SAAS,IAAI,cAAc,MAAM,cAAc,SAAS;AAC3G,QACE,yBAAyB,mBACzB,yBAAyB,oBAAoB,EAAE,EAAE,QAAQ,KAAK,uBAC9D,oBAAoB,OAAO,OAAO,IAClC;AACA,8BAAwB,sBAAsB;AAAA,IAChD,OAAO;AACL,YAAM,iBAAiB,yBAAyB,oBAAoB,EAAE,EAAE,cAAc;AACtF,UAAI,gBAAgB;AAClB,gCAAwB,WAAW,sBAAsB,SAAS,sBAAsB;AAAA,MAC1F,OAAO;AACL,gCAAwB,sBAAsB;AAAA,MAChD;AAAA,IACF;AAGA,WAAO;AAAA,MACL;AAAA,QACE,IACE,YAAY,0BAA0B,sBAAsB,QACxD,0BAA0B,KAC1B,oBAAoB;AAAA,QAC1B,MAAM,EAAE,sBAAsB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/types/parts/DSSortableContainer/DSSortableContainer.d.ts

@@ -1,15 +1,4 @@
-import React from 'react';
 import type { DSSortableContainerT } from './react-desc-prop-types.js';
-import type { DnDKitTree } from '../../tree/types.js';
-interface ContainerContextT<T> {
-    isDropValid?: boolean;
-    dropIndicatorPosition?: string;
-    sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;
-    items: Record<string, DSSortableContainerT.Item<T>[]>;
-    onCollapse?: (nodeId: string) => void;
-}
-export declare function createContainerContext<T>(): React.Context<ContainerContextT<T>>;
-export declare const ContainersContext: React.Context<ContainerContextT<unknown>>;
 export declare const DSSortableContainer: <T, K>(props: DSSortableContainerT.Props<T, K>) => import("react/jsx-runtime.js").JSX.Element;
 declare const DSSortableContainerSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSSortableContainerT.Props<unknown, unknown>>;
 export { DSSortableContainerSchema };

package/dist/types/parts/DSSortableContainer/config/SortableContainerContext.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { DnDKitTree } from '../../../tree/types.js';
+import type { DSSortableContainerT } from '../react-desc-prop-types.js';
+interface ContainerContextT<T> {
+    isDropValid?: boolean;
+    dropIndicatorPosition?: string;
+    sortableContextProps: Record<string, DnDKitTree.SortableContextPropsType>;
+    items: Record<string, DSSortableContainerT.Item<T>[]>;
+    onCollapse?: (nodeId: string) => void;
+}
+export declare function createContainerContext<T>(): import("react").Context<ContainerContextT<T>>;
+export declare const ContainersContext: import("react").Context<ContainerContextT<unknown>>;
+export {};

package/dist/types/parts/DSSortableContainer/index.d.ts

@@ -1,2 +1,3 @@
-export { DSSortableContainer, DSSortableContainerSchema, ContainersContext } from './DSSortableContainer.js';
+export { DSSortableContainer, DSSortableContainerSchema } from './DSSortableContainer.js';
+export { ContainersContext } from './config/SortableContainerContext.js';
 export type { DSSortableContainerT } from './react-desc-prop-types.js';

package/dist/types/parts/DSSortableContainer/react-desc-prop-types.d.ts

@@ -14,7 +14,7 @@ export declare namespace DSSortableContainerT {
         Component: React.ComponentType<WrapperComponentProps>;
     }
     interface ContainerItemRendererT<T, K> {
-        extraItemProps: {
+        extraItemProps?: {
             items: Item<T>[];
             extraItemProps: K;
             ItemRenderer: React.ComponentType<ItemRendererPropsT<T, K>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-drag-and-drop",
-  "version": "3.37.2",
+  "version": "3.38.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Drag And Drop",
   "files": [
@@ -111,16 +111,16 @@
     "@dnd-kit/core": "~6.0.8",
     "@dnd-kit/modifiers": "~6.0.1",
     "@dnd-kit/sortable": "~7.0.2",
-    "@elliemae/ds-fast-list": "3.37.2",
-    "@elliemae/ds-system": "3.37.2",
-    "@elliemae/ds-typescript-helpers": "3.37.2",
-    "@elliemae/ds-props-helpers": "3.37.2",
-    "@elliemae/ds-tree-model": "3.37.2"
+    "@elliemae/ds-fast-list": "3.38.0-rc.0",
+    "@elliemae/ds-system": "3.38.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.38.0-rc.0",
+    "@elliemae/ds-typescript-helpers": "3.38.0-rc.0",
+    "@elliemae/ds-tree-model": "3.38.0-rc.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.37.2"
+    "@elliemae/ds-monorepo-devops": "3.38.0-rc.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",