@elliemae/ds-data-table 3.20.0-next.5 → 3.20.0-next.6

package/dist/cjs/helpers/gridLayoutHelpers.js

@@ -0,0 +1,71 @@
+"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 gridLayoutHelpers_exports = {};
+__export(gridLayoutHelpers_exports, {
+  changeGridLayout: () => changeGridLayout,
+  getGridLayout: () => getGridLayout,
+  setSubColumnsGridLayout: () => setSubColumnsGridLayout
+});
+module.exports = __toCommonJS(gridLayoutHelpers_exports);
+var React = __toESM(require("react"));
+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("--total-width", `${cols.reduce((acc, col) => acc + col, 0)}px`);
+};
+const setSubColumnsGridLayout = (wrapper, columns) => {
+  if (!wrapper)
+    return;
+  const cols = getGridLayout(wrapper);
+  let prevIndex = 0;
+  const variables = columns.reduce((acc, cur) => {
+    const count = cur.columns ? cur.columns.length : 1;
+    acc.push({
+      cols: cols.slice(prevIndex, prevIndex + count),
+      id: cur.id
+    });
+    prevIndex += count;
+    return acc;
+  }, []);
+  variables.forEach((variable) => {
+    wrapper.style.setProperty(
+      `--grid-layout-${variable.id}`,
+      variable.cols.map((col) => `minmax(0, ${col}px)`).join(" ")
+    );
+  });
+};
+//# sourceMappingURL=gridLayoutHelpers.js.map

package/dist/cjs/helpers/gridLayoutHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/gridLayoutHelpers.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSDataTableT } from '../react-desc-prop-types.js';\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const 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)\nexport const 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('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (wrapper: HTMLDivElement | null, columns: DSDataTableT.InternalColumn[]) => {\n  if (!wrapper) return;\n\n  const cols = getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce((acc, cur) => {\n    const count = cur.columns ? cur.columns.length : 1;\n    acc.push({\n      cols: cols.slice(prevIndex, prevIndex + count),\n      id: cur.id,\n    });\n    prevIndex += count;\n    return acc;\n  }, [] as { cols: number[]; id: string }[]);\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => `minmax(0, ${col}px)`).join(' '),\n    );\n  });\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGhB,MAAM,gBAAgB,CAAC,YAA6C;AACzE,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;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,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,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,KAAK;AAC3F;AAMO,MAAM,0BAA0B,CAAC,SAAgC,YAA2C;AACjH,MAAI,CAAC;AAAS;AAEd,QAAM,OAAO,cAAc,OAAO;AAElC,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ;AAC7C,UAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,QAAI,KAAK;AAAA,MACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,MAC7C,IAAI,IAAI;AAAA,IACV,CAAC;AACD,iBAAa;AACb,WAAO;AAAA,EACT,GAAG,CAAC,CAAqC;AAEzC,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS;AAAA,MAC1B,SAAS,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG;AAAA,IAC5D;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

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

@@ -84,7 +84,7 @@ const HeaderCellGroupComp = ({
       shouldDropOneLevel: isMultiLevel && level === 0 && !children,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCell.HeaderCell, { column: header, isDragOverlay, colSpan }),
-        !!children?.length && !isDragOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { isGroup: true, items: children, isDragOverlay, children: children.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        !!children?.length && !isDragOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { isGroup: true, items: children, isDragOverlay, colId: header.id, children: children.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           ChildGroup,
           {
             header: h,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\n\nconst StyledWrapper = styled(Grid)<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AA9DJ,mBAAkC;AAClC,qBAAqB;AACrB,uBAAuB;AACvB,wBAA2B;AAC3B,iCAAoC;AACpC,sBAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,qBAA4B;AAC5B,8BAAiC;AAEjC,MAAM,oBAAgB,yBAAO,mBAAI;AAAA;AAAA,IAQ7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAYhH,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,QAAI,yBAAW,wCAAgB;AACtD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,MAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,2BAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAEpD;AAAA,oDAAC,gCAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,4CAAC,gDAAmB,SAAO,MAAC,OAAO,UAAU,eAC1C,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,4CAAC,gDAAmB;AAAA,QAC1D,4CAAC,sCAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,8BAA0B,8CAA6B,mBAAmB;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\n\nconst StyledWrapper = styled(Grid)<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AA9DJ,mBAAkC;AAClC,qBAAqB;AACrB,uBAAuB;AACvB,wBAA2B;AAC3B,iCAAoC;AACpC,sBAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,qBAA4B;AAC5B,8BAAiC;AAEjC,MAAM,oBAAgB,yBAAO,mBAAI;AAAA;AAAA,IAQ7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAYhH,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,QAAI,yBAAW,wCAAgB;AACtD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,MAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,2BAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAEpD;AAAA,oDAAC,gCAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,4CAAC,gDAAmB,SAAO,MAAC,OAAO,UAAU,eAA8B,OAAO,OAAO,IACtF,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,4CAAC,gDAAmB;AAAA,QAC1D,4CAAC,sCAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,8BAA0B,8CAA6B,mBAAmB;",
   "names": []
 }

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

@@ -35,20 +35,8 @@ var React = __toESM(require("react"));
 var import_react = require("react");
 var import_lodash = require("lodash");
 var import_DataTableContext = require("../../DataTableContext.js");
+var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.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("--total-width", `${cols.reduce((acc, col) => acc + col, 0)}px`);
-};
 const getCorrectDelta = (e) => {
   let multiplier = 1;
   if (e.shiftKey)
@@ -90,34 +78,35 @@ const useHeaderResizer = ({
   const pushColumnSizeChange = (0, import_react.useCallback)(
     (nextWidth) => {
       onColumnResize?.(columnId, nextWidth);
-      visibleColumnsCopy[realColumnIndex].width = nextWidth;
+      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;
       onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);
     },
-    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy]
+    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const onResizeStart = (0, import_react.useCallback)(() => {
     setIsResizing(true);
   }, []);
   const onResizeEnd = (0, import_react.useCallback)(() => {
     setIsResizing(false);
-    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);
+    pushColumnSizeChange((0, import_gridLayoutHelpers.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 originalWidth = (0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsCopy[realColumnIndex].minWidth,
-        visibleColumnsCopy[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      (0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndex, widthWithDelta);
+      (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
       e.preventDefault();
       e.stopPropagation();
     },
-    [realColumnIndex, visibleColumnsCopy, virtualListRef, innerRef]
+    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const handleKeyboardResize = (0, import_react.useCallback)(
     (e) => {
@@ -126,16 +115,17 @@ const useHeaderResizer = ({
       const delta = getCorrectDelta(e);
       if (delta === 0)
         return;
-      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
+      const originalWidth = (0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsCopy[realColumnIndex].minWidth,
-        visibleColumnsCopy[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
       );
-      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
-      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);
+      (0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndex, widthWithDelta);
+      (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
+      pushColumnSizeChange((0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndex] + delta);
     },
-    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy]
+    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,

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

@@ -1,7 +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';\nimport type { DSDataTableT } from '../../react-desc-prop-types.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('--total-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 visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\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": "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",
+  "sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.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 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 visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\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      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\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        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\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, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\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        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\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": "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",
   "names": []
 }

package/dist/cjs/parts/SortableHeaderCell.js

@@ -36,14 +36,32 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_withConditionalDnDSortableContext = require("./HoC/withConditionalDnDSortableContext.js");
-const SortableGrid = (0, import_withConditionalDnDSortableContext.withConditionalDnDSortableContext)(import_ds_grid.Grid);
+var import_ds_system = require("@elliemae/ds-system");
+const GridWithCssVariable = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  ${(props) => {
+  if (props.colId) {
+    return `grid-template-columns: var(--grid-layout-${props.colId});`;
+  }
+}}
+`;
+const SortableGrid = (0, import_withConditionalDnDSortableContext.withConditionalDnDSortableContext)(GridWithCssVariable);
 const SortableHeaderCell = ({
   items,
   isDragOverlay = false,
   isGroup = false,
+  colId,
   ...rest
 }) => {
   const style = (0, import_react.useMemo)(() => isGroup ? { gridAutoFlow: "column" } : { display: "flex" }, [isGroup]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableGrid, { ...rest, style, items, isDragOverlay });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    SortableGrid,
+    {
+      ...rest,
+      style,
+      items,
+      isDragOverlay,
+      colId: isGroup ? colId : void 0
+    }
+  );
 };
 //# sourceMappingURL=SortableHeaderCell.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/SortableHeaderCell.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\n\nconst SortableGrid = withConditionalDnDSortableContext(Grid);\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  ...rest\n}: {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element => {\n  const style = useMemo(() => (isGroup ? { gridAutoFlow: 'column' } : { display: 'flex' }), [isGroup]);\n\n  return <SortableGrid {...rest} style={style} items={items} isDragOverlay={isDragOverlay} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBd;AApBT,mBAA+B;AAC/B,qBAAqB;AAErB,+CAAkD;AAElD,MAAM,mBAAe,4EAAkC,mBAAI;AAEpD,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,GAAG;AACL,MAKmB;AACjB,QAAM,YAAQ,sBAAQ,MAAO,UAAU,EAAE,cAAc,SAAS,IAAI,EAAE,SAAS,OAAO,GAAI,CAAC,OAAO,CAAC;AAEnG,SAAO,4CAAC,gBAAc,GAAG,MAAM,OAAc,OAAc,eAA8B;AAC3F;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\nimport { styled } from '@elliemae/ds-system';\n\n// TODO: @carusox remove this\n// This is the other thing that needs to be removed after implementing new structure, read more in\n// gridLayoutHelpers file.\nconst GridWithCssVariable = styled(Grid)<{ colId?: string }>`\n  ${(props) => {\n    if (props.colId) {\n      return `grid-template-columns: var(--grid-layout-${props.colId});`;\n    }\n  }}\n`;\n\nconst SortableGrid = withConditionalDnDSortableContext(GridWithCssVariable);\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  colId,\n  ...rest\n}: {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  colId?: string;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element => {\n  const style = useMemo(() => (isGroup ? { gridAutoFlow: 'column' } : { display: 'flex' }), [isGroup]);\n\n  return (\n    <SortableGrid\n      {...rest}\n      style={style}\n      items={items}\n      isDragOverlay={isDragOverlay}\n      colId={isGroup ? colId : undefined}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAnCJ,mBAA+B;AAC/B,qBAAqB;AAErB,+CAAkD;AAClD,uBAAuB;AAKvB,MAAM,0BAAsB,yBAAO,mBAAI;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,OAAO;AACf,WAAO,4CAA4C,MAAM;AAAA,EAC3D;AACF;AAAA;AAGF,MAAM,mBAAe,4EAAkC,mBAAmB;AAEnE,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAMmB;AACjB,QAAM,YAAQ,sBAAQ,MAAO,UAAU,EAAE,cAAc,SAAS,IAAI,EAAE,SAAS,OAAO,GAAI,CAAC,OAAO,CAAC;AAEnG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,UAAU,QAAQ;AAAA;AAAA,EAC3B;AAEJ;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -230,6 +230,12 @@ const StyledResizer = (0, import_ds_system.styled)(import_ds_form_input_text.DSI
       appearance: none;
       background: transparent;
     }
+
+    &::-moz-range-thumb {
+      appearance: none;
+      background: transparent;
+      border: none;
+    }
   }
 `;
 const StyledActionCell = import_ds_system.styled.div`

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/gridLayoutHelpers.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+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("--total-width", `${cols.reduce((acc, col) => acc + col, 0)}px`);
+};
+const setSubColumnsGridLayout = (wrapper, columns) => {
+  if (!wrapper)
+    return;
+  const cols = getGridLayout(wrapper);
+  let prevIndex = 0;
+  const variables = columns.reduce((acc, cur) => {
+    const count = cur.columns ? cur.columns.length : 1;
+    acc.push({
+      cols: cols.slice(prevIndex, prevIndex + count),
+      id: cur.id
+    });
+    prevIndex += count;
+    return acc;
+  }, []);
+  variables.forEach((variable) => {
+    wrapper.style.setProperty(
+      `--grid-layout-${variable.id}`,
+      variable.cols.map((col) => `minmax(0, ${col}px)`).join(" ")
+    );
+  });
+};
+export {
+  changeGridLayout,
+  getGridLayout,
+  setSubColumnsGridLayout
+};
+//# sourceMappingURL=gridLayoutHelpers.js.map

package/dist/esm/helpers/gridLayoutHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/helpers/gridLayoutHelpers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSDataTableT } from '../react-desc-prop-types.js';\n\n// Returns the current grid layout of the table (by reading the CSS variable --grid-layout)\nexport const 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)\nexport const 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('--total-width', `${cols.reduce((acc, col) => acc + col, 0)}px`);\n};\n\n// TODO: @carusox remove this\n// Since the structure of the column grouping is not ideal (with this I mean that the columns are nested in the HTML DOM),\n// we need to create variables to keep track of the sub-columns layout for each different group\n// When we go ahead and implement the new behavior (also present nowadays on the specs, we should be removing this code)\nexport const setSubColumnsGridLayout = (wrapper: HTMLDivElement | null, columns: DSDataTableT.InternalColumn[]) => {\n  if (!wrapper) return;\n\n  const cols = getGridLayout(wrapper);\n\n  let prevIndex = 0;\n\n  const variables = columns.reduce((acc, cur) => {\n    const count = cur.columns ? cur.columns.length : 1;\n    acc.push({\n      cols: cols.slice(prevIndex, prevIndex + count),\n      id: cur.id,\n    });\n    prevIndex += count;\n    return acc;\n  }, [] as { cols: number[]; id: string }[]);\n\n  variables.forEach((variable) => {\n    wrapper.style.setProperty(\n      `--grid-layout-${variable.id}`,\n      variable.cols.map((col) => `minmax(0, ${col}px)`).join(' '),\n    );\n  });\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGhB,MAAM,gBAAgB,CAAC,YAA6C;AACzE,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;AAGO,MAAM,mBAAmB,CAAC,SAAgC,UAAkB,aAAqB;AACtG,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,iBAAiB,GAAG,KAAK,OAAO,CAAC,KAAK,QAAQ,MAAM,KAAK,CAAC,KAAK;AAC3F;AAMO,MAAM,0BAA0B,CAAC,SAAgC,YAA2C;AACjH,MAAI,CAAC;AAAS;AAEd,QAAM,OAAO,cAAc,OAAO;AAElC,MAAI,YAAY;AAEhB,QAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ;AAC7C,UAAM,QAAQ,IAAI,UAAU,IAAI,QAAQ,SAAS;AACjD,QAAI,KAAK;AAAA,MACP,MAAM,KAAK,MAAM,WAAW,YAAY,KAAK;AAAA,MAC7C,IAAI,IAAI;AAAA,IACV,CAAC;AACD,iBAAa;AACb,WAAO;AAAA,EACT,GAAG,CAAC,CAAqC;AAEzC,YAAU,QAAQ,CAAC,aAAa;AAC9B,YAAQ,MAAM;AAAA,MACZ,iBAAiB,SAAS;AAAA,MAC1B,SAAS,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,EAAE,KAAK,GAAG;AAAA,IAC5D;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/dist/esm/parts/Headers/HeaderCellGroup.js

@@ -50,7 +50,7 @@ const HeaderCellGroupComp = ({
       shouldDropOneLevel: isMultiLevel && level === 0 && !children,
       children: [
         /* @__PURE__ */ jsx(HeaderCell, { column: header, isDragOverlay, colSpan }),
-        !!children?.length && !isDragOverlay && /* @__PURE__ */ jsx(SortableHeaderCell, { isGroup: true, items: children, isDragOverlay, children: children.map((h, index) => /* @__PURE__ */ jsx(
+        !!children?.length && !isDragOverlay && /* @__PURE__ */ jsx(SortableHeaderCell, { isGroup: true, items: children, isDragOverlay, colId: header.id, children: children.map((h, index) => /* @__PURE__ */ jsx(
           ChildGroup,
           {
             header: h,

package/dist/esm/parts/Headers/HeaderCellGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\n\nconst StyledWrapper = styled(Grid)<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgEnB,SAUE,KAVF;AA9DJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA,IAQ7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAYhH,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,IAAI,WAAW,gBAAgB;AACtD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,MAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAEpD;AAAA,4BAAC,cAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,oBAAC,sBAAmB,SAAO,MAAC,OAAO,UAAU,eAC1C,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,oBAAC,sBAAmB;AAAA,QAC1D,oBAAC,iBAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { HeaderCell } from './HeaderCell.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../internal.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { DataTableContext } from '../../DataTableContext.js';\n\nconst StyledWrapper = styled(Grid)<{\n  shouldDropOneLevel: boolean;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isFirst?: boolean;\n  gridColumn: string;\n}>`\n  position: relative;\n  ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: DSDataTableT.InternalColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n    </StyledWrapper>\n  );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgEnB,SAUE,KAVF;AA9DJ,SAAgB,kBAAkB;AAClC,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,MAAM,gBAAgB,OAAO,IAAI;AAAA;AAAA,IAQ7B,CAAC,EAAE,oBAAoB,cAAc,MAAO,sBAAsB,CAAC,gBAAgB,2BAA2B;AAAA,WACvG,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,QAAQ,MAAO,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAYhH,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAM;AACJ,QAAM,EAAE,eAAe,IAAI,WAAW,gBAAgB;AACtD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,OAAO;AAE/D,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,iBAAiB,eAAe,aAAa;AAAA,MAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,MAC1E;AAAA,MACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,MAEpD;AAAA,4BAAC,cAAW,QAAQ,QAAQ,eAA8B,SAAkB;AAAA,QAC3E,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,oBAAC,sBAAmB,SAAO,MAAC,OAAO,UAAU,eAA8B,OAAO,OAAO,IACtF,mBAAS,IAAI,CAAC,GAAG,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,QAAQ;AAAA,YACR;AAAA,YACA,kBAAkB;AAAA,YAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,YACpC,SAAS,UAAU;AAAA,YACnB,OAAO,QAAQ;AAAA;AAAA,UANV,EAAE;AAAA,QAOT,CACD,GACH;AAAA,QAED,UAAU,UAAU,iBAAiB,oBAAC,sBAAmB;AAAA,QAC1D,oBAAC,iBAAc,UAAQ,MAAC,uBAA8C,QAAQ,UAAU,YAAY,aAAW,MAAC;AAAA;AAAA;AAAA,EAClH;AAEJ;AAIO,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B,mBAAmB;",
   "names": []
 }

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

@@ -2,20 +2,8 @@ import * as React from "react";
 import { useCallback, useContext, useMemo, useState } from "react";
 import { cloneDeep } from "lodash";
 import { DataTableContext } from "../../DataTableContext.js";
+import { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from "../../helpers/gridLayoutHelpers.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("--total-width", `${cols.reduce((acc, col) => acc + col, 0)}px`);
-};
 const getCorrectDelta = (e) => {
   let multiplier = 1;
   if (e.shiftKey)
@@ -57,10 +45,10 @@ const useHeaderResizer = ({
   const pushColumnSizeChange = useCallback(
     (nextWidth) => {
       onColumnResize?.(columnId, nextWidth);
-      visibleColumnsCopy[realColumnIndex].width = nextWidth;
+      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;
       onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);
     },
-    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy]
+    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const onResizeStart = useCallback(() => {
     setIsResizing(true);
@@ -77,14 +65,15 @@ const useHeaderResizer = ({
       const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsCopy[realColumnIndex].minWidth,
-        visibleColumnsCopy[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
       );
       changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
       e.preventDefault();
       e.stopPropagation();
     },
-    [realColumnIndex, visibleColumnsCopy, virtualListRef, innerRef]
+    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   const handleKeyboardResize = useCallback(
     (e) => {
@@ -96,13 +85,14 @@ const useHeaderResizer = ({
       const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
         originalWidth + delta,
-        visibleColumnsCopy[realColumnIndex].minWidth,
-        visibleColumnsCopy[realColumnIndex].maxWidth
+        visibleColumnsOnGridLayout[realColumnIndex].minWidth,
+        visibleColumnsOnGridLayout[realColumnIndex].maxWidth
       );
       changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);
+      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
       pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);
     },
-    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy]
+    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
   );
   return {
     isResizing,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderResizer.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.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('--total-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 visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.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 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 visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\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      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\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        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\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, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\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        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/SortableHeaderCell.js

@@ -3,15 +3,33 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext.js";
-const SortableGrid = withConditionalDnDSortableContext(Grid);
+import { styled } from "@elliemae/ds-system";
+const GridWithCssVariable = styled(Grid)`
+  ${(props) => {
+  if (props.colId) {
+    return `grid-template-columns: var(--grid-layout-${props.colId});`;
+  }
+}}
+`;
+const SortableGrid = withConditionalDnDSortableContext(GridWithCssVariable);
 const SortableHeaderCell = ({
   items,
   isDragOverlay = false,
   isGroup = false,
+  colId,
   ...rest
 }) => {
   const style = useMemo(() => isGroup ? { gridAutoFlow: "column" } : { display: "flex" }, [isGroup]);
-  return /* @__PURE__ */ jsx(SortableGrid, { ...rest, style, items, isDragOverlay });
+  return /* @__PURE__ */ jsx(
+    SortableGrid,
+    {
+      ...rest,
+      style,
+      items,
+      isDragOverlay,
+      colId: isGroup ? colId : void 0
+    }
+  );
 };
 export {
   SortableHeaderCell

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortableHeaderCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\n\nconst SortableGrid = withConditionalDnDSortableContext(Grid);\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  ...rest\n}: {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element => {\n  const style = useMemo(() => (isGroup ? { gridAutoFlow: 'column' } : { display: 'flex' }), [isGroup]);\n\n  return <SortableGrid {...rest} style={style} items={items} isDragOverlay={isDragOverlay} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBd;AApBT,SAAgB,eAAe;AAC/B,SAAS,YAAY;AAErB,SAAS,yCAAyC;AAElD,MAAM,eAAe,kCAAkC,IAAI;AAEpD,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,GAAG;AACL,MAKmB;AACjB,QAAM,QAAQ,QAAQ,MAAO,UAAU,EAAE,cAAc,SAAS,IAAI,EAAE,SAAS,OAAO,GAAI,CAAC,OAAO,CAAC;AAEnG,SAAO,oBAAC,gBAAc,GAAG,MAAM,OAAc,OAAc,eAA8B;AAC3F;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\nimport { styled } from '@elliemae/ds-system';\n\n// TODO: @carusox remove this\n// This is the other thing that needs to be removed after implementing new structure, read more in\n// gridLayoutHelpers file.\nconst GridWithCssVariable = styled(Grid)<{ colId?: string }>`\n  ${(props) => {\n    if (props.colId) {\n      return `grid-template-columns: var(--grid-layout-${props.colId});`;\n    }\n  }}\n`;\n\nconst SortableGrid = withConditionalDnDSortableContext(GridWithCssVariable);\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  colId,\n  ...rest\n}: {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  colId?: string;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element => {\n  const style = useMemo(() => (isGroup ? { gridAutoFlow: 'column' } : { display: 'flex' }), [isGroup]);\n\n  return (\n    <SortableGrid\n      {...rest}\n      style={style}\n      items={items}\n      isDragOverlay={isDragOverlay}\n      colId={isGroup ? colId : undefined}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB;AAnCJ,SAAgB,eAAe;AAC/B,SAAS,YAAY;AAErB,SAAS,yCAAyC;AAClD,SAAS,cAAc;AAKvB,MAAM,sBAAsB,OAAO,IAAI;AAAA,IACnC,CAAC,UAAU;AACX,MAAI,MAAM,OAAO;AACf,WAAO,4CAA4C,MAAM;AAAA,EAC3D;AACF;AAAA;AAGF,MAAM,eAAe,kCAAkC,mBAAmB;AAEnE,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAMmB;AACjB,QAAM,QAAQ,QAAQ,MAAO,UAAU,EAAE,cAAc,SAAS,IAAI,EAAE,SAAS,OAAO,GAAI,CAAC,OAAO,CAAC;AAEnG,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,UAAU,QAAQ;AAAA;AAAA,EAC3B;AAEJ;",
   "names": []
 }

package/dist/esm/styled.js

@@ -178,6 +178,12 @@ const StyledResizer = styled(DSInputText)`
       appearance: none;
       background: transparent;
     }
+
+    &::-moz-range-thumb {
+      appearance: none;
+      background: transparent;
+      border: none;
+    }
   }
 `;
 const StyledActionCell = styled.div`

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${color ?? theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height) as string};\n  `}\n  width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n  overflow: auto;\n  height: 100%;\n  --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n  --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n  colsLayoutStyle: string;\n}>`\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n  isExpandable: boolean;\n  colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  grid-template-columns: var(--grid-layout);\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n  isDraggingActive?: boolean;\n  column: DSDataTableT.InternalColumn;\n  shouldShowDnD?: boolean;\n}>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  border: none;\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border: none;\n    outline: none;\n  }\n\n  input {\n    appearance: none;\n    cursor: col-resize;\n    background-image: transparent;\n    padding: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      :after {\n        position: absolute;\n        content: ' ';\n        z-index: 2;\n        top: 0;\n        right: 0;\n        width: 8px;\n        height: 100%;\n        border: 2px solid brand-700;\n      }\n      ::-webkit-slider-runnable-track {\n        background: transparent;\n      }\n    }\n\n    &::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &::-webkit-slider-thumb {\n      appearance: none;\n      background: transparent;\n    }\n\n    &::-moz-range-thumb {\n      appearance: none;\n      background: transparent;\n      border: none;\n    }\n  }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n  backgroundColor?: string;\n  isDragOverlay?: boolean;\n  isDragging?: boolean;\n  isDisabled?: boolean;\n  isDropValid?: boolean;\n  shouldDisplayHover?: boolean;\n  isDropIndicatorPositionInside?: boolean;\n  minHeight?: string;\n  gridTemplateColumns?: string;\n}>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 100%;\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n  grid-template-columns: ${(props) =>\n    props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/helpers/gridLayoutHelpers.d.ts

@@ -0,0 +1,4 @@
+import type { DSDataTableT } from '../react-desc-prop-types.js';
+export declare const getGridLayout: (wrapper: HTMLDivElement | null) => number[];
+export declare const changeGridLayout: (wrapper: HTMLDivElement | null, colIndex: number, newWidth: number) => void;
+export declare const setSubColumnsGridLayout: (wrapper: HTMLDivElement | null, columns: DSDataTableT.InternalColumn[]) => void;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { DSDataTableT } from '../react-desc-prop-types.js';
-export declare const SortableHeaderCell: ({ items, isDragOverlay, isGroup, ...rest }: {
+export declare const SortableHeaderCell: ({ items, isDragOverlay, isGroup, colId, ...rest }: {
     items: DSDataTableT.InternalColumn[];
     isDragOverlay?: boolean | undefined;
     isGroup?: boolean | undefined;
+    colId?: string | undefined;
     children: JSX.Element | JSX.Element[];
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.20.0-next.5",
+  "version": "3.20.0-next.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -573,30 +573,30 @@
   "dependencies": {
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
-    "@elliemae/ds-button": "3.20.0-next.5",
-    "@elliemae/ds-button-v2": "3.20.0-next.5",
-    "@elliemae/ds-circular-progress-indicator": "3.20.0-next.5",
-    "@elliemae/ds-drag-and-drop": "3.20.0-next.5",
-    "@elliemae/ds-form-checkbox": "3.20.0-next.5",
-    "@elliemae/ds-form-combobox": "3.20.0-next.5",
-    "@elliemae/ds-dropdownmenu": "3.20.0-next.5",
-    "@elliemae/ds-form-date-range-picker": "3.20.0-next.5",
-    "@elliemae/ds-form-date-time-picker": "3.20.0-next.5",
-    "@elliemae/ds-form-layout-blocks": "3.20.0-next.5",
-    "@elliemae/ds-form-input-text": "3.20.0-next.5",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.20.0-next.5",
-    "@elliemae/ds-form-radio": "3.20.0-next.5",
-    "@elliemae/ds-grid": "3.20.0-next.5",
-    "@elliemae/ds-icons": "3.20.0-next.5",
-    "@elliemae/ds-pills": "3.20.0-next.5",
-    "@elliemae/ds-props-helpers": "3.20.0-next.5",
-    "@elliemae/ds-popperjs": "3.20.0-next.5",
-    "@elliemae/ds-system": "3.20.0-next.5",
-    "@elliemae/ds-pagination": "3.20.0-next.5",
-    "@elliemae/ds-toolbar": "3.20.0-next.5",
-    "@elliemae/ds-truncated-tooltip-text": "3.20.0-next.5",
-    "@elliemae/ds-utilities": "3.20.0-next.5",
-    "@elliemae/ds-skeleton": "3.20.0-next.5"
+    "@elliemae/ds-button": "3.20.0-next.6",
+    "@elliemae/ds-dropdownmenu": "3.20.0-next.6",
+    "@elliemae/ds-form-combobox": "3.20.0-next.6",
+    "@elliemae/ds-button-v2": "3.20.0-next.6",
+    "@elliemae/ds-form-checkbox": "3.20.0-next.6",
+    "@elliemae/ds-form-date-range-picker": "3.20.0-next.6",
+    "@elliemae/ds-form-date-time-picker": "3.20.0-next.6",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.20.0-next.6",
+    "@elliemae/ds-form-layout-blocks": "3.20.0-next.6",
+    "@elliemae/ds-form-input-text": "3.20.0-next.6",
+    "@elliemae/ds-form-radio": "3.20.0-next.6",
+    "@elliemae/ds-grid": "3.20.0-next.6",
+    "@elliemae/ds-icons": "3.20.0-next.6",
+    "@elliemae/ds-pills": "3.20.0-next.6",
+    "@elliemae/ds-pagination": "3.20.0-next.6",
+    "@elliemae/ds-popperjs": "3.20.0-next.6",
+    "@elliemae/ds-props-helpers": "3.20.0-next.6",
+    "@elliemae/ds-system": "3.20.0-next.6",
+    "@elliemae/ds-skeleton": "3.20.0-next.6",
+    "@elliemae/ds-toolbar": "3.20.0-next.6",
+    "@elliemae/ds-truncated-tooltip-text": "3.20.0-next.6",
+    "@elliemae/ds-utilities": "3.20.0-next.6",
+    "@elliemae/ds-circular-progress-indicator": "3.20.0-next.6",
+    "@elliemae/ds-drag-and-drop": "3.20.0-next.6"
   },
   "devDependencies": {
     "@testing-library/react": "~12.1.3",