@elliemae/ds-data-table 3.19.0 → 3.19.1-rc.1

package/dist/cjs/parts/Headers/useHeaderResizer.js

@@ -0,0 +1,139 @@
+"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 useHeaderResizer_exports = {};
+__export(useHeaderResizer_exports, {
+  useHeaderResizer: () => useHeaderResizer
+});
+module.exports = __toCommonJS(useHeaderResizer_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_DataTableContext = require("../../DataTableContext.js");
+const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
+const getGridLayout = (wrapper) => {
+  if (!wrapper)
+    return [];
+  return getComputedStyle(wrapper).getPropertyValue("--grid-layout").split("minmax(0,").slice(1).map((str) => str.replace("px) ", "").replace("px)", "")).map((str) => Number.parseInt(str, 10));
+};
+const changeGridLayout = (wrapper, colIndex, newWidth) => {
+  if (!wrapper)
+    return;
+  const cols = getGridLayout(wrapper);
+  cols[colIndex] = newWidth;
+  wrapper.style.setProperty("--grid-layout", cols.map((col) => `minmax(0, ${col}px)`).join(" "));
+  wrapper.style.setProperty("width", `${cols.reduce((acc, col) => acc + col, 0)}px`);
+};
+const getCorrectDelta = (e) => {
+  let multiplier = 1;
+  if (e.shiftKey)
+    multiplier *= 5;
+  if (e.altKey)
+    multiplier *= 10;
+  if (e.code === "ArrowLeft") {
+    return -multiplier;
+  }
+  if (e.code === "ArrowRight") {
+    return multiplier;
+  }
+  return 0;
+};
+const useHeaderResizer = ({
+  columnId,
+  innerRef
+}) => {
+  const {
+    visibleColumns,
+    tableProps: { onColumnResize, onColumnSizeChange },
+    virtualListRef
+  } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
+  const [isResizing, setIsResizing] = (0, import_react.useState)(false);
+  const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(visibleColumns), [visibleColumns]);
+  const realColumnIndex = (0, import_react.useMemo)(
+    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === columnId),
+    [columnId, visibleColumnsCopy]
+  );
+  const pushColumnSizeChange = (0, import_react.useCallback)(
+    (nextWidth) => {
+      onColumnResize?.(columnId, nextWidth);
+      visibleColumnsCopy[realColumnIndex].width = nextWidth;
+      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);
+    },
+    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy]
+  );
+  const onResizeStart = (0, import_react.useCallback)(() => {
+    setIsResizing(true);
+  }, []);
+  const onResizeEnd = (0, import_react.useCallback)(() => {
+    setIsResizing(false);
+    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);
+  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
+  const onResizeHandler = (0, import_react.useCallback)(
+    (e) => {
+      if (realColumnIndex == -1)
+        return;
+      const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0);
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const widthWithDelta = narrow(
+        originalWidth + delta,
+        visibleColumnsCopy[realColumnIndex].minWidth,
+        visibleColumnsCopy[realColumnIndex].maxWidth
+      );
+      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [realColumnIndex, visibleColumnsCopy, virtualListRef, innerRef]
+  );
+  const handleKeyboardResize = (0, import_react.useCallback)(
+    (e) => {
+      if (realColumnIndex == -1)
+        return;
+      const delta = getCorrectDelta(e);
+      if (delta === 0)
+        return;
+      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const widthWithDelta = narrow(
+        originalWidth + delta,
+        visibleColumnsCopy[realColumnIndex].minWidth,
+        visibleColumnsCopy[realColumnIndex].maxWidth
+      );
+      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);
+    },
+    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy]
+  );
+  return {
+    isResizing,
+    onResizeStart,
+    onResizeEnd,
+    onResizeHandler,
+    handleKeyboardResize
+  };
+};
+//# sourceMappingURL=useHeaderResizer.js.map

package/dist/cjs/parts/Headers/useHeaderResizer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nconst getGridLayout = (wrapper: HTMLDivElement | null): number[] => {\n  if (!wrapper) return [];\n  return getComputedStyle(wrapper)\n    .getPropertyValue('--grid-layout')\n    .split('minmax(0,')\n    .slice(1)\n    .map((str) => str.replace('px) ', '').replace('px)', ''))\n    .map((str) => Number.parseInt(str, 10));\n};\n\n// Changes the grid layout of the table (by changing the CSS variable --grid-layout)\nconst changeGridLayout = (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => {\n  if (!wrapper) return;\n  const cols = getGridLayout(wrapper);\n  cols[colIndex] = newWidth;\n  wrapper.style.setProperty('--grid-layout', cols.map((col) => `minmax(0, ${col}px)`).join(' '));\n  wrapper.style.setProperty('width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const {\n    visibleColumns,\n    tableProps: { onColumnResize, onColumnSizeChange },\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === columnId),\n    [columnId, visibleColumnsCopy],\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      onColumnResize?.(columnId, nextWidth);\n      visibleColumnsCopy[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex == -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsCopy[realColumnIndex].minWidth,\n        visibleColumnsCopy[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, visibleColumnsCopy, virtualListRef, innerRef],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex == -1) return;\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsCopy[realColumnIndex].minWidth,\n        visibleColumnsCopy[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2D;AAC3D,oBAA0B;AAC1B,8BAAiC;AAKjC,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAGtD,MAAM,gBAAgB,CAAC,YAA6C;AAClE,MAAI,CAAC;AAAS,WAAO,CAAC;AACtB,SAAO,iBAAiB,OAAO,EAC5B,iBAAiB,eAAe,EAChC,MAAM,WAAW,EACjB,MAAM,CAAC,EACP,IAAI,CAAC,QAAQ,IAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,OAAO,EAAE,CAAC,EACvD,IAAI,CAAC,QAAQ,OAAO,SAAS,KAAK,EAAE,CAAC;AAC1C;AAGA,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AAC/F,MAAI,CAAC;AAAS;AACd,QAAM,OAAO,cAAc,OAAO;AAClC,OAAK,QAAQ,IAAI;AACjB,UAAQ,MAAM,YAAY,iBAAiB,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG,CAAC;AAC7F,UAAQ,MAAM,YAAY,SAAS,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,KAAK;AACnF;AAGA,MAAM,kBAAkB,CAAC,MAA2B;AAClD,MAAI,aAAa;AAEjB,MAAI,EAAE;AAAU,kBAAc;AAC9B,MAAI,EAAE;AAAQ,kBAAc;AAE5B,MAAI,EAAE,SAAS,aAAa;AAC1B,WAAO,CAAC;AAAA,EACV;AACA,MAAI,EAAE,SAAS,cAAc;AAC3B,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AACF,MAGM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,gBAAgB,mBAAmB;AAAA,IACjD;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,yBAAqB,sBAAQ,UAAM,yBAAU,cAAc,GAAG,CAAC,cAAc,CAAC;AAEpF,QAAM,sBAAkB;AAAA,IACtB,MAAM,mBAAmB,UAAU,CAAC,kBAAkB,cAAc,OAAO,QAAQ;AAAA,IACnF,CAAC,UAAU,kBAAkB;AAAA,EAC/B;AAGA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,cAAsB;AACrB,uBAAiB,UAAU,SAAS;AACpC,yBAAmB,eAAe,EAAE,QAAQ;AAC5C,yBAAmB,oBAAoB,UAAU,SAAS;AAAA,IAC5D;AAAA,IACA,CAAC,UAAU,gBAAgB,oBAAoB,iBAAiB,kBAAkB;AAAA,EACpF;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,kBAAc,IAAI;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAc,0BAAY,MAAM;AACpC,kBAAc,KAAK;AACnB,yBAAqB,cAAc,eAAe,OAAO,EAAE,eAAe,CAAC;AAAA,EAC7E,GAAG,CAAC,sBAAsB,gBAAgB,eAAe,CAAC;AAG1D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA+B;AAC9B,UAAI,mBAAmB;AAAI;AAE3B,YAAM,SACH,aAAa,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,YAAY,SAAS,SAAS,sBAAsB,EAAE,KAAK;AAExG,YAAM,gBAAgB,cAAc,eAAe,OAAO,EAAE,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,mBAAmB,eAAe,EAAE;AAAA,QACpC,mBAAmB,eAAe,EAAE;AAAA,MACtC;AAEA,uBAAiB,eAAe,SAAS,iBAAiB,cAAc;AAKxE,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA,CAAC,iBAAiB,oBAAoB,gBAAgB,QAAQ;AAAA,EAChE;AAGA,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAA2B;AAC1B,UAAI,mBAAmB;AAAI;AAE3B,YAAM,QAAQ,gBAAgB,CAAC;AAE/B,UAAI,UAAU;AAAG;AAEjB,YAAM,gBAAgB,cAAc,eAAe,OAAO,EAAE,eAAe;AAE3E,YAAM,iBAAiB;AAAA,QACrB,gBAAgB;AAAA,QAChB,mBAAmB,eAAe,EAAE;AAAA,QACpC,mBAAmB,eAAe,EAAE;AAAA,MACtC;AAEA,uBAAiB,eAAe,SAAS,iBAAiB,cAAc;AAExE,2BAAqB,cAAc,eAAe,OAAO,EAAE,eAAe,IAAI,KAAK;AAAA,IACrF;AAAA,IACA,CAAC,sBAAsB,iBAAiB,gBAAgB,kBAAkB;AAAA,EAC5E;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/parts/HoC/DnDTreeContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/DnDTreeContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DropIndicatorPosition } from '../../types/props.js';\n\nexport type DnDTreeContextType = {\n  visibleItems: unknown[];\n  dropIndicatorPosition: DropIndicatorPosition;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({} as unknown as DnDTreeContextType);\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport type DnDTreeContextType = {\n  visibleItems: DSDataTableT.InternalRow[];\n  dropIndicatorPosition: DSDataTableT.DropIndicatorPositionValues;\n  isDropValid: boolean;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({} as unknown as DnDTreeContextType);\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AASvB,MAAM,qBAAiB,4BAAkC,CAAC,CAAkC;",
   "names": []
 }

package/dist/cjs/parts/HoC/SortableItemContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/SortableItemContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext } from 'react';\nimport type { DraggablePropsT } from '../../types/props.js';\n\nexport type SortableItemContextType = { draggableProps: DraggablePropsT };\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n  draggableProps: false,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport type SortableItemContextType = { draggableProps: DSDataTableT.DraggablePropsT };\n\n/** Context for cross component communication */\nexport const SortableItemContext = createContext<SortableItemContextType>({\n  draggableProps: false,\n});\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAMvB,MAAM,0BAAsB,4BAAuC;AAAA,EACxE,gBAAgB;AAClB,CAAC;",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -92,10 +92,14 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
     isHorizontalDnD: true,
     onReorder
   });
+  const dragOverlayCol = (0, import_react.useMemo)(
+    () => activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null,
+    [activeId, flattenedItems]
+  );
   if (dragAndDropColumns)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DnDGroupContext.Provider, { value: { activeIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_internal.HeaderCellGroup, { header: flattenedItems.find((item) => item.uid === activeId)?.original, isDragOverlay: true }) : null })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_internal.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
     ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 };

package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport {\n  restrictToFirstScrollableAncestor,\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { InternalTypescriptColumn, TypescriptColumn } from '../../types/props.js';\nimport { HeaderCellGroup } from '../internal.js';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\n\ntype DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n\nconst flattenColumns = (cols: InternalTypescriptColumn[]): DnDKitHierarchy.Item<InternalTypescriptColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<InternalTypescriptColumn>[];\n  const flatten = (col: InternalTypescriptColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: InternalTypescriptColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const {\n      tableProps: { dragAndDropColumns, onColumnsReorder },\n      visibleColumns,\n    } = React.useContext(DataTableContext);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<InternalTypescriptColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, InternalTypescriptColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as TypescriptColumn[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={{ activeIndex }}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? (\n              <HeaderCellGroup header={flattenedItems.find((item) => item.uid === activeId)?.original} isDragOverlay />\n            ) : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFf;AApFR,mBAA2D;AAC3D,8BAOO;AAEP,8BAAiC;AAEjC,sBAAgC;AAChC,qBAAiC;AAM1B,MAAM,sBAAkB,4BAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAAuF;AAC7G,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAA+B,OAAe,WAA0B,SAAS;AAChG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAqC,eACxD,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB,iBAAiB;AAAA,IACnD;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,qBAAiB,sBAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,gBAAiE;AAAA,IACrE,CAAC,WAAW,YAAY;AAEtB,YAAM,uBAAmB,mCAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAkD,CAAC;AACzD,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,gCAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW;AAAS,uBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,uBAAW,UAAU,CAAC,OAAO;AAAA,QACpC;AAAO,kBAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,QAAI,kDAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,YAAY,GAC7C,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,4CAAC,uCAAY,WAAW,CAAC,yDAAiC,GACvD,qBACC,4CAAC,mCAAgB,QAAQ,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,UAAU,eAAa,MAAC,IACrG,MACN;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport {\n  restrictToFirstScrollableAncestor,\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { HeaderCellGroup } from '../internal.js';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\n\ntype DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const {\n      tableProps: { dragAndDropColumns, onColumnsReorder },\n      visibleColumns,\n    } = React.useContext(DataTableContext);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={{ activeIndex }}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Ff;AAzFR,mBAA2D;AAC3D,8BAOO;AAEP,8BAAiC;AAEjC,sBAAgC;AAChC,qBAAiC;AAM1B,MAAM,sBAAkB,4BAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB,iBAAiB;AAAA,IACnD;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,qBAAiB,sBAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,gBAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,uBAAmB,mCAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,gCAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW;AAAS,uBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,uBAAW,UAAU,CAAC,OAAO;AAAA,QACpC;AAAO,kBAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,QAAI,kDAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,YAAY,GAC7C,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,4CAAC,uCAAY,WAAW,CAAC,yDAAiC,GACvD,qBAAW,4CAAC,mCAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": ["React"]
 }

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -93,11 +93,15 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     }),
     [visibleItems, dropIndicatorPosition, isDropValid]
   );
+  const dragOverlayRow = (0, import_react.useMemo)(
+    () => active ? flattenedData.find((row) => row.uid === active.id) : null,
+    [active, flattenedData]
+  );
   if (dragAndDropRows)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
       (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.Row, { row: flattenedData.find((row) => row.uid === active.id), isDragOverlay: true }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
         document.body
       )
     ] });

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { TypescriptRow } from '../../types/props.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const onReorder: DnDKitTree.OnReorder<TypescriptRow> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<string, TypescriptRow> = {};\n      movedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as TypescriptRow[];\n      movedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id);\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={flattenedData.find((row) => row.uid === active.id)} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EjB;AA9EN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,gBAAiD;AAAA,IACrD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAAuC,CAAC;AAC9C,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,GAAG,eAAa,MAAC,IAAK,MAC7F;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      movedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      movedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoFjB;AAnFN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAA0C,CAAC;AACjD,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": ["React"]
 }

package/dist/cjs/parts/HoC/withConditionalDnDSortableContext.js

@@ -36,10 +36,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
 var import_react = require("react");
 var import_DataTableContext = require("../../DataTableContext.js");
-const withConditionalDnDSortableContext = (items, isDragOverlay = false) => (Component) => function(props) {
+const withConditionalDnDSortableContext = (Component) => (props) => {
   const {
     tableProps: { dragAndDropColumns }
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
+  const { isDragOverlay, items } = props;
   if (!isDragOverlay && dragAndDropColumns)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { items: items.map((item) => item.id), strategy: import_ds_drag_and_drop.horizontalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });

package/dist/cjs/parts/HoC/withConditionalDnDSortableContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDSortableContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport type { TypescriptColumn } from '../../types/props.js';\n\nexport const withConditionalDnDSortableContext =\n  (items: TypescriptColumn[], isDragOverlay = false): FunctionalHOC =>\n  (Component) =>\n    function (props) {\n      const {\n        tableProps: { dragAndDropColumns },\n      } = useContext(DataTableContext);\n\n      // Only add the context if it's not a dragOverlay and dnd for cols was requested\n      // It's important that drag overlays DO NOT have any sortable functionality!\n      if (!isDragOverlay && dragAndDropColumns)\n        return (\n          <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n            <Component {...props} />\n          </SortableContext>\n        );\n\n      return <Component {...props} />;\n    };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBX;AAnBZ,8BAA+D;AAC/D,mBAAkC;AAClC,8BAAiC;AAI1B,MAAM,oCACX,CAAC,OAA2B,gBAAgB,UAC5C,CAAC,cACC,SAAU,OAAO;AACf,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,QAAI,yBAAW,wCAAgB;AAI/B,MAAI,CAAC,iBAAiB;AACpB,WACE,4CAAC,2CAAgB,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,GAAG,UAAU,uDAC9D,sDAAC,aAAW,GAAG,OAAO,GACxB;AAGJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface Props {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay: boolean;\n}\n\nexport const withConditionalDnDSortableContext =\n  <T,>(Component: React.ComponentType<T>) =>\n  (props: T & JSX.IntrinsicAttributes & Props) => {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n\n    const { isDragOverlay, items } = props;\n\n    // Only add the context if it's not a dragOverlay and dnd for cols was requested\n    // It's important that drag overlays DO NOT have any sortable functionality!\n    if (!isDragOverlay && dragAndDropColumns)\n      return (\n        <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n          <Component {...props} />\n        </SortableContext>\n      );\n\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBb;AAxBV,8BAA+D;AAC/D,mBAAkC;AAClC,8BAAiC;AAQ1B,MAAM,oCACX,CAAK,cACL,CAAC,UAA+C;AAC9C,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,EAAE,eAAe,MAAM,IAAI;AAIjC,MAAI,CAAC,iBAAiB;AACpB,WACE,4CAAC,2CAAgB,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,GAAG,UAAU,uDAC9D,sDAAC,aAAW,GAAG,OAAO,GACxB;AAGJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js

@@ -36,10 +36,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
 var import_DataTableContext = require("../../DataTableContext.js");
-var import_props = require("../../types/props.js");
 var import_withConditionalDnDColumnContext = require("./withConditionalDnDColumnContext.js");
 var import_SortableItemContext = require("./SortableItemContext.js");
-const withDnDSortableColumnContext = (Component) => function(props) {
+var import_constants = require("../../configs/constants.js");
+const withDnDSortableColumnContext = (Component) => (props) => {
   const {
     tableProps: { dragAndDropColumns }
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
@@ -58,7 +58,8 @@ const withDnDSortableColumnContext = (Component) => function(props) {
     return {
       ...useSortableHelpers,
       shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
-      dropIndicatorPosition: index > activeIndex ? import_props.DropIndicatorPosition.After : import_props.DropIndicatorPosition.Before
+      dropIndicatorPosition: activeIndex && index > activeIndex ? import_constants.DropIndicatorPosition.After : import_constants.DropIndicatorPosition.Before,
+      isDropValid: true
     };
   }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
   const ctx = (0, import_react.useMemo)(

package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withDnDSortableColumnContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { DropIndicatorPosition } from '../../types/props.js';\nimport { DnDGroupContext } from './withConditionalDnDColumnContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\n\nexport const withDnDSortableColumnContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDf;AAlDR,mBAA2C;AAC3C,8BAA4B;AAC5B,8BAAiC;AAEjC,mBAAsC;AACtC,6CAAgC;AAEhC,iCAAoC;AAE7B,MAAM,+BAA8C,CAAC,cAC1D,SAAU,OAAY;AACpB,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,QAAI,yBAAW,wCAAgB;AAC/B,QAAM,EAAE,YAAY,QAAI,yBAAW,sDAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,CAAC;AAAoB,aAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBAAuB,QAAQ,cAAc,mCAAsB,QAAQ,mCAAsB;AAAA,IACnG;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DnDGroupContext } from './withConditionalDnDColumnContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDf;AArDR,mBAA2C;AAC3C,8BAA4B;AAC5B,8BAAiC;AAEjC,6CAAgC;AAEhC,iCAAoC;AACpC,uBAAsC;AAE/B,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,QAAI,yBAAW,wCAAgB;AAC/B,QAAM,EAAE,YAAY,QAAI,yBAAW,sDAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC;AAAoB,aAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/HoC/withDnDSortableRowContext.js

@@ -60,7 +60,7 @@ const withDnDSortableRowContext = (Component) => function(props) {
       dropIndicatorPosition,
       isDropValid
     };
-  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition]);
+  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, isDropValid]);
   const ctx = (0, import_react.useMemo)(
     () => ({
       draggableProps

package/dist/cjs/parts/HoC/withDnDSortableRowContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withDnDSortableRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\n\nexport const withDnDSortableRowContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropRows },\n    } = useContext(DataTableContext);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDf;AAnDR,mBAA2C;AAC3C,8BAA4B;AAC5B,8BAAiC;AACjC,4BAA+B;AAG/B,iCAAoC;AAE7B,MAAM,4BAA2C,CAAC,cACvD,SAAU,OAAY;AACpB,QAAM;AAAA,IACJ,YAAY,EAAE,gBAAgB;AAAA,EAChC,QAAI,yBAAW,wCAAgB;AAC/B,QAAM,EAAE,uBAAuB,YAAY,QAAI,yBAAW,oCAAc;AAGxE,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,IAAI;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EACZ;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,qBAAqB,CAAC;AAK/D,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const withDnDSortableRowContext = <T extends { row: DSDataTableT.InternalRow }>(\n  Component: React.ComponentType<T>,\n) =>\n  function (props: T) {\n    const {\n      tableProps: { dragAndDropRows },\n    } = useContext(DataTableContext);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDf;AArDR,mBAA2C;AAC3C,8BAA4B;AAC5B,8BAAiC;AACjC,4BAA+B;AAE/B,iCAAoC;AAG7B,MAAM,4BAA4B,CACvC,cAEA,SAAU,OAAU;AAClB,QAAM;AAAA,IACJ,YAAY,EAAE,gBAAgB;AAAA,EAChC,QAAI,yBAAW,wCAAgB;AAC/B,QAAM,EAAE,uBAAuB,YAAY,QAAI,yBAAW,oCAAc;AAGxE,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,IAAI;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EACZ;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Row.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BjB;AA7BN,mBAAkC;AAClC,0BAA0B;AAC1B,uBAAuB;AACvB,8BAAiC;AACjC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,UAAM,yBAAW,wCAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI,GAAG;AAAA,MAChC,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,SAAK,+BAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nconst StyledRow = styled('div')<{ isDisabled: boolean }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  measureRef?: (el: HTMLElement | null) => void;\n  itemWrapperStyle?: React.CSSProperties;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCjB;AAnCN,mBAAkC;AAClC,0BAA0B;AAC1B,uBAAuB;AACvB,8BAAiC;AACjC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAGlC,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAKR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,UAAM,yBAAW,wCAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI,GAAG;AAAA,MAChC,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,SAAK,+BAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;",
   "names": []
 }

package/dist/cjs/parts/RowVariants/RowVariantHeader.js

@@ -45,7 +45,7 @@ const RowContent = (props) => {
     ctx: {
       tableProps: { groupedRowsRenderHeader, disabledRows }
     },
-    backgroundColor = "white",
+    backgroundColor = "neutral-000",
     focusedRowId,
     drilldownRowId
   } = props;
@@ -84,14 +84,14 @@ const RowContent = (props) => {
           cols: hasExpandCell ? ["min-content", "auto"] : ["auto"],
           paddingLeft: hasExpandCell ? "2px" : "8px",
           children: [
-            hasExpandCell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            hasExpandCell && import_Columns.expandRowColumn.Cell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Columns.expandRowColumn.Cell,
               {
                 row,
                 cell: row.cells[0],
+                column: row.cells[0].column,
                 isRowSelected: drilldownRowId === row.uid,
-                ctx,
-                draggableProps: {}
+                ctx
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.GroupHeaderTitle, { children: titleContent })

package/dist/cjs/parts/RowVariants/RowVariantHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/RowVariants/RowVariantHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled.js';\nimport type { RowVariantProps } from './types.js';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx,\n    ctx: {\n      tableProps: { groupedRowsRenderHeader, disabledRows },\n    },\n    backgroundColor = 'white',\n    focusedRowId,\n    drilldownRowId,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const hasExpandCell = useMemo(\n    () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n    [row],\n  );\n\n  const titleContent = useMemo(() => {\n    if (typeof groupedRowsRenderHeader === 'function') {\n      return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n    }\n    return row.original.dimsumHeaderValue;\n  }, [groupedRowsRenderHeader, row]);\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const isDisabled = useMemo(() => disabledRows[row.uid] !== undefined, [disabledRows, row]);\n  return (\n    <StyledCellContainer\n      ref={rowRef}\n      minHeight=\"0px\"\n      tabIndex={0}\n      role=\"row\"\n      backgroundColor={backgroundColor}\n      aria-disabled={isDisabled ? 'true' : 'false'}\n      isDisabled={isDisabled}\n      data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n    >\n      <GroupHeaderContainer\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n        cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n        paddingLeft={hasExpandCell ? '2px' : '8px'}\n      >\n        {hasExpandCell && (\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            isRowSelected={drilldownRowId === row.uid}\n            ctx={ctx}\n            draggableProps={{}}\n          />\n        )}\n        <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => (\n  <RowRenderer\n    row={row}\n    itemIndex={itemIndex}\n    isDragOverlay={isDragOverlay}\n    minHeight=\"0px\"\n    height=\"24px\"\n    CustomRowContentRenderer={RowContent}\n    focusedRowId={focusedRowId}\n    drilldownRowId={drilldownRowId}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDjB;AAnDN,mBAAwD;AACxD,yBAA4B;AAC5B,oBAA4E;AAE5E,qBAAgC;AAChC,uBAA4B;AAE5B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,yBAAyB,aAAa;AAAA,IACtD;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAS,qBAAuB,IAAI;AAE1C,QAAM,oBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,OAAO,4BAA4B,YAAY;AACjD,aAAO,wBAAwB,IAAI,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA,IACrF;AACA,WAAO,IAAI,SAAS;AAAA,EACtB,GAAG,CAAC,yBAAyB,GAAG,CAAC;AAEjC,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,iBAAa,sBAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,QAAW,CAAC,cAAc,GAAG,CAAC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,6BAAY;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6BAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UAEpC;AAAA,6BACC;AAAA,cAAC,+BAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM,CAAC;AAAA,gBACjB,eAAe,mBAAmB,IAAI;AAAA,gBACtC;AAAA,gBACA,gBAAgB,CAAC;AAAA;AAAA,YACnB;AAAA,YAEF,4CAAC,kCAAkB,wBAAa;AAAA;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IACV,QAAO;AAAA,IACP,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled.js';\nimport type { RowVariantProps } from './types.js';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx,\n    ctx: {\n      tableProps: { groupedRowsRenderHeader, disabledRows },\n    },\n    backgroundColor = 'neutral-000',\n    focusedRowId,\n    drilldownRowId,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const hasExpandCell = useMemo(\n    () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n    [row],\n  );\n\n  const titleContent = useMemo(() => {\n    if (typeof groupedRowsRenderHeader === 'function') {\n      return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n    }\n    return row.original.dimsumHeaderValue;\n  }, [groupedRowsRenderHeader, row]);\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const isDisabled = useMemo(() => disabledRows[row.uid] !== undefined, [disabledRows, row]);\n  return (\n    <StyledCellContainer\n      ref={rowRef}\n      minHeight=\"0px\"\n      tabIndex={0}\n      role=\"row\"\n      backgroundColor={backgroundColor}\n      aria-disabled={isDisabled ? 'true' : 'false'}\n      isDisabled={isDisabled}\n      data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n    >\n      <GroupHeaderContainer\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n        cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n        paddingLeft={hasExpandCell ? '2px' : '8px'}\n      >\n        {hasExpandCell && expandRowColumn.Cell && (\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            column={row.cells[0].column}\n            isRowSelected={drilldownRowId === row.uid}\n            ctx={ctx}\n          />\n        )}\n        <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<DSDataTableT.RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => (\n  <RowRenderer\n    row={row}\n    itemIndex={itemIndex}\n    isDragOverlay={isDragOverlay}\n    minHeight=\"0px\"\n    height=\"24px\"\n    CustomRowContentRenderer={RowContent}\n    focusedRowId={focusedRowId}\n    drilldownRowId={drilldownRowId}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AApDN,mBAAwD;AACxD,yBAA4B;AAC5B,oBAA4E;AAE5E,qBAAgC;AAChC,uBAA4B;AAG5B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,yBAAyB,aAAa;AAAA,IACtD;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAS,qBAAuB,IAAI;AAE1C,QAAM,oBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,OAAO,4BAA4B,YAAY;AACjD,aAAO,wBAAwB,IAAI,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA,IACrF;AACA,WAAO,IAAI,SAAS;AAAA,EACtB,GAAG,CAAC,yBAAyB,GAAG,CAAC;AAEjC,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,iBAAa,sBAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,QAAW,CAAC,cAAc,GAAG,CAAC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,6BAAY;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6BAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UAEpC;AAAA,6BAAiB,+BAAgB,QAChC;AAAA,cAAC,+BAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM,CAAC;AAAA,gBACjB,QAAQ,IAAI,MAAM,CAAC,EAAE;AAAA,gBACrB,eAAe,mBAAmB,IAAI;AAAA,gBACtC;AAAA;AAAA,YACF;AAAA,YAEF,4CAAC,kCAAkB,wBAAa;AAAA;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IACV,QAAO;AAAA,IACP,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/cjs/parts/RowVariants/RowVariantPrimary.js

@@ -38,28 +38,21 @@ const RowVariantPrimary = ({
   row,
   itemIndex,
   isDragOverlay,
-  ctx,
   focusedRowId,
   drilldownRowId,
   compact
-}) => {
-  const {
-    layoutHelpers: { gridLayout }
-  } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_RowRenderer.RowRenderer,
-    {
-      row,
-      itemIndex,
-      isDragOverlay,
-      compact,
-      height: compact ? "24px" : "auto",
-      minHeight: compact ? "24px" : "36px",
-      colsLayout: row.isExpanded ? void 0 : gridLayout,
-      rowsLayout: row.isExpanded ? ["auto", "auto"] : [1],
-      focusedRowId,
-      drilldownRowId
-    }
-  );
-};
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_RowRenderer.RowRenderer,
+  {
+    row,
+    itemIndex,
+    isDragOverlay,
+    compact,
+    height: compact ? "24px" : "auto",
+    minHeight: compact ? "24px" : "36px",
+    rowsLayout: row.isExpanded ? ["auto", "auto"] : [1],
+    focusedRowId,
+    drilldownRowId
+  }
+);
 //# sourceMappingURL=RowVariantPrimary.js.map

package/dist/cjs/parts/RowVariants/RowVariantPrimary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/RowVariants/RowVariantPrimary.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport type { RowVariantProps } from './types.js';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\n\nexport const RowVariantPrimary: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  ctx,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => {\n  const {\n    layoutHelpers: { gridLayout },\n  } = ctx;\n\n  return (\n    <RowRenderer\n      row={row}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      compact={compact}\n      height={compact ? '24px' : 'auto'}\n      minHeight={compact ? '24px' : '36px'}\n      colsLayout={row.isExpanded ? undefined : gridLayout}\n      rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBnB;AAhBJ,yBAA4B;AAErB,MAAM,oBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ,eAAe,EAAE,WAAW;AAAA,EAC9B,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU,SAAS;AAAA,MAC3B,WAAW,UAAU,SAAS;AAAA,MAC9B,YAAY,IAAI,aAAa,SAAY;AAAA,MACzC,YAAY,IAAI,aAAa,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC;AAAA,MAClD;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const RowVariantPrimary: React.ComponentType<DSDataTableT.RowVariantProps & { compact?: boolean }> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => (\n  <RowRenderer\n    row={row}\n    itemIndex={itemIndex}\n    isDragOverlay={isDragOverlay}\n    compact={compact}\n    height={compact ? '24px' : 'auto'}\n    minHeight={compact ? '24px' : '36px'}\n    rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n    focusedRowId={focusedRowId}\n    drilldownRowId={drilldownRowId}\n  />\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYrB;AAXF,yBAA4B;AAGrB,MAAM,oBAA+F,CAAC;AAAA,EAC3G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,UAAU,SAAS;AAAA,IAC3B,WAAW,UAAU,SAAS;AAAA,IAC9B,YAAY,IAAI,aAAa,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC;AAAA,IAClD;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/cjs/parts/RowVariants/RowVariantSecondary.js

@@ -38,29 +38,22 @@ const RowVariantSecondary = ({
   row,
   itemIndex,
   isDragOverlay,
-  ctx,
   focusedRowId,
   drilldownRowId,
   compact
-}) => {
-  const {
-    layoutHelpers: { gridLayout }
-  } = ctx;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_RowRenderer.RowRenderer,
-    {
-      row,
-      itemIndex,
-      isDragOverlay,
-      compact,
-      height: compact ? "24px" : "auto",
-      minHeight: compact ? "24px" : "36px",
-      colsLayout: row.isExpanded ? void 0 : gridLayout,
-      rowsLayout: row.isExpanded ? ["auto", "auto"] : [1],
-      backgroundColor: "#F6F7F9",
-      focusedRowId,
-      drilldownRowId
-    }
-  );
-};
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_RowRenderer.RowRenderer,
+  {
+    row,
+    itemIndex,
+    isDragOverlay,
+    compact,
+    height: compact ? "24px" : "auto",
+    minHeight: compact ? "24px" : "36px",
+    rowsLayout: row.isExpanded ? ["auto", "auto"] : [1],
+    backgroundColor: "neutral-050",
+    focusedRowId,
+    drilldownRowId
+  }
+);
 //# sourceMappingURL=RowVariantSecondary.js.map