@elliemae/ds-data-table 3.53.1-rc.0 → 3.54.0-beta.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  restrictToFirstScrollableAncestor,\n  useTreeDndkitConfig,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  restrictToFirstScrollableAncestor,\n  useTreeDndkitConfig,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps} autoScroll={{ layoutShiftCompensation: false }}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -41,6 +41,7 @@ var import_SortableItemContext = require("./SortableItemContext.js");
 var import_DnDGroupContext = require("./DnDGroupContext.js");
 const withDnDSortableColumnContext = (Component) => (props) => {
   const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const setIsHeaderCellDragging = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setIsHeaderCellDragging);
   const { activeIndex } = (0, import_react.useContext)(import_DnDGroupContext.DnDGroupContext);
   const draggableOptions = (0, import_react.useMemo)(
     () => ({
@@ -49,6 +50,13 @@ const withDnDSortableColumnContext = (Component) => (props) => {
     [props.header.id]
   );
   const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)(draggableOptions);
+  (0, import_react.useEffect)(() => {
+    if (useSortableHelpers.isDragging) {
+      setIsHeaderCellDragging(true);
+    } else {
+      setIsHeaderCellDragging(false);
+    }
+  }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
   const draggableProps = (0, import_react.useMemo)(() => {
     if (!dragAndDropColumns) return false;
     const { index, overIndex } = useSortableHelpers;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withDnDSortableColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDf;AAnDR,8BAA4B;AAC5B,mBAA2C;AAC3C,uBAAsC;AACtC,2CAA8B;AAG9B,iCAAoC;AACpC,6BAAgC;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,EAAE,YAAY,QAAI,yBAAW,sCAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // Since Header component for some reason is being render inside the virtual scrollable list,\n    // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n    useEffect(() => {\n      if (useSortableHelpers.isDragging) {\n        setIsHeaderCellDragging(true);\n      } else {\n        setIsHeaderCellDragging(false);\n      }\n    }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Df;AA9DR,8BAA4B;AAC5B,mBAAsD;AACtD,uBAAsC;AACtC,2CAAgD;AAGhD,iCAAoC;AACpC,6BAAgC;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,8BAA0B,uDAAiB,CAAC,UAAU,MAAM,uBAAuB;AAEzF,QAAM,EAAE,YAAY,QAAI,yBAAW,sCAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAIvD,8BAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAAA,IAC9B,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,uBAAuB,CAAC;AAE3D,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/SkeletonTable.js

@@ -43,7 +43,10 @@ const SkeletonTable = import_react.default.memo(({ height = "100" }) => {
   const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { gutter: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { height: "25px", variant: "rectangular" }),
-    Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { height: "36px", variant: "rectangular" }, i))
+    Array.from({ length: rows }).map((_, i) => (
+      // eslint-disable-next-line react/no-array-index-key -- skeletons are not dynamic
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { height: "36px", variant: "rectangular" }, i)
+    ))
   ] });
 });
 //# sourceMappingURL=SkeletonTable.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/SkeletonTable.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonTable = React.memo(({ height = '100' }: { height: string }) => {\n  const gap = 16;\n  const rowHeight = 36;\n  const headerHeight = 25;\n  const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));\n  return (\n    <Grid gutter=\"xs\">\n      <DSSkeleton height=\"25px\" variant=\"rectangular\" />\n      {Array.from({ length: rows }).map((_, i) => (\n        <DSSkeleton height=\"36px\" key={i} variant=\"rectangular\" />\n      ))}\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AAVJ,mBAAkB;AAClB,qBAAqB;AACrB,yBAA2B;AAEpB,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,SAAS,MAAM,MAA0B;AAClF,QAAM,MAAM;AACZ,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,KAAK,OAAO,SAAS,QAAQ,EAAE,IAAI,iBAAiB,YAAY,IAAI;AACjF,SACE,6CAAC,uBAAK,QAAO,MACX;AAAA,gDAAC,iCAAW,QAAO,QAAO,SAAQ,eAAc;AAAA,IAC/C,MAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,MACpC,4CAAC,iCAAW,QAAO,QAAe,SAAQ,iBAAX,CAAyB,CACzD;AAAA,KACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonTable = React.memo(({ height = '100' }: { height: string }) => {\n  const gap = 16;\n  const rowHeight = 36;\n  const headerHeight = 25;\n  const rows = Math.floor((parseInt(height, 10) - headerHeight) / (rowHeight + gap));\n  return (\n    <Grid gutter=\"xs\">\n      <DSSkeleton height=\"25px\" variant=\"rectangular\" />\n      {Array.from({ length: rows }).map((_, i) => (\n        // eslint-disable-next-line react/no-array-index-key -- skeletons are not dynamic\n        <DSSkeleton height=\"36px\" key={i} variant=\"rectangular\" />\n      ))}\n    </Grid>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUnB;AAVJ,mBAAkB;AAClB,qBAAqB;AACrB,yBAA2B;AAEpB,MAAM,gBAAgB,aAAAA,QAAM,KAAK,CAAC,EAAE,SAAS,MAAM,MAA0B;AAClF,QAAM,MAAM;AACZ,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,KAAK,OAAO,SAAS,QAAQ,EAAE,IAAI,iBAAiB,YAAY,IAAI;AACjF,SACE,6CAAC,uBAAK,QAAO,MACX;AAAA,gDAAC,iCAAW,QAAO,QAAO,SAAQ,eAAc;AAAA,IAC/C,MAAM,KAAK,EAAE,QAAQ,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG;AAAA;AAAA,MAEpC,4CAAC,iCAAW,QAAO,QAAe,SAAQ,iBAAX,CAAyB;AAAA,KACzD;AAAA,KACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/parts/SortableHeaderCell.js

@@ -33,16 +33,12 @@ __export(SortableHeaderCell_exports, {
 module.exports = __toCommonJS(SortableHeaderCell_exports);
 var React = __toESM(require("react"));
 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");
 var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
+var import_withConditionalDnDSortableContext = require("./HoC/withConditionalDnDSortableContext.js");
 const GridWithCssVariable = (0, import_ds_system.styled)(import_ds_grid.Grid)`
-  ${(props) => {
-  if (props.colId) {
-    return `grid-template-columns: var(--grid-layout-${CSS.escape(props.colId)});`;
-  }
-}}
+  ${(props) => props.colId ? `grid-template-columns: var(--grid-layout-${CSS.escape(props.colId)});` : ""}
 `;
 const SortableGrid = (0, import_withConditionalDnDSortableContext.withConditionalDnDSortableContext)(GridWithCssVariable);
 const SortableHeaderCell = ({

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';\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-${CSS.escape(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,IAAI,OAAO,MAAM,KAAK,CAAC;AAAA,EAC5E;AACF,CAAC;AAAA;AAGH,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;",
+  "sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\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) => (props.colId ? `grid-template-columns: var(--grid-layout-${CSS.escape(props.colId)});` : '')}\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;AD+BnB;AA/BJ,qBAAqB;AACrB,uBAAuB;AACvB,mBAAwB;AAExB,+CAAkD;AAKlD,MAAM,0BAAsB,yBAAO,mBAAI;AAAA,IACnC,CAAC,UAAW,MAAM,QAAQ,4CAA4C,IAAI,OAAO,MAAM,KAAK,CAAC,OAAO,EAAG;AAAA;AAG3G,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/parts/VirtualRowsList.js

@@ -41,14 +41,17 @@ var import_EmptyContent = require("./EmptyContent.js");
 var import_Headers = require("./Headers/index.js");
 var import_Loader = require("./Loader.js");
 var import_Rows = require("./Rows.js");
+var import_useFreezeVirtualScrollOnDrag = require("../configs/useFreezeVirtualScrollOnDrag.js");
 const VirtualRowsList = () => {
   const isLoading = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isLoading);
   const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
+  const setBodyClientWidth = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.setBodyClientWidth);
   const flattenedData = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.flattenedData);
   const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
   const { totalColumnsWidth, gridLayout } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.layoutHelpers);
   const { totalSize, scrollToIndex } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListHelpers);
   const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const isHeaderCellDragging = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.isHeaderCellDragging);
   const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
   const onKeyDown = (0, import_react.useCallback)(
     (e) => {
@@ -66,10 +69,21 @@ const VirtualRowsList = () => {
     () => isEmptyContent || isLoading ? "100%" : totalSize,
     [isEmptyContent, isLoading, totalSize]
   );
+  (0, import_useFreezeVirtualScrollOnDrag.useFreezeVirtualScrollOnDrag)(virtualListRef, isHeaderCellDragging);
+  const trackVirtualListRefAndClientWidth = (0, import_react.useCallback)(
+    (node) => {
+      virtualListRef.current = node;
+      if (node) {
+        const { clientWidth } = node;
+        setBodyClientWidth(clientWidth);
+      }
+    },
+    [virtualListRef, setBodyClientWidth]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledVirtualListWrapper,
     {
-      innerRef: virtualListRef,
+      innerRef: trackVirtualListRefAndClientWidth,
       "data-testid": import_constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER,
       onKeyDown,
       tabIndex: -1,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\n\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      innerRef={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAA4C;AAC5C,2CAAgD;AAChD,uBAA4B;AAC5B,oBAAoE;AACpE,0BAA6B;AAC7B,qBAAwB;AACxB,oBAAyC;AACzC,kBAAwC;AAEjC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,oDAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,gCAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const setBodyClientWidth = usePropsStore((state) => state.setBodyClientWidth);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n  const trackVirtualListRefAndClientWidth = useCallback(\n    (node: HTMLDivElement | null) => {\n      virtualListRef.current = node;\n      if (node) {\n        const { clientWidth } = node;\n        // if we don't track this with a non-ref, react will not know some component needs to be re-rendered to apply the new width\n        setBodyClientWidth(clientWidth);\n      }\n    },\n    [virtualListRef, setBodyClientWidth],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      innerRef={trackVirtualListRefAndClientWidth}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEjB;AAlEN,mBAA4C;AAC5C,2CAAgD;AAChD,uBAA4B;AAC5B,oBAAoE;AACpE,0BAA6B;AAC7B,qBAAwB;AACxB,oBAAyC;AACzC,kBAAwC;AACxC,0CAA6C;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,oDAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,2BAAuB,uDAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,gCAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,wEAA6B,gBAAgB,oBAAoB;AAEjE,QAAM,wCAAoC;AAAA,IACxC,CAAC,SAAgC;AAC/B,qBAAe,UAAU;AACzB,UAAI,MAAM;AACR,cAAM,EAAE,YAAY,IAAI;AAExB,2BAAmB,WAAW;AAAA,MAChC;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
   "names": ["Loader", "Rows"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -234,7 +234,7 @@ const DSDataTablePropTypes = {
   noResultsMessage: import_ds_props_helpers.PropTypes.string.description("Message to show when no more data is available"),
   noResultsSecondaryMessage: import_ds_props_helpers.PropTypes.string.description("Secondary message to show when no more data is available"),
   noResultsButtonLabel: import_ds_props_helpers.PropTypes.string.description("Label of the button when no more data is available"),
-  noResultsPlaceholder: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.node]).description(
+  noResultsPlaceholder: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node]).description(
     "Custom content to show when dataset is empty"
   ),
   isLoading: import_ds_props_helpers.PropTypes.bool.description("Whether to show a global loader in the datatable"),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef: React.RefObject<HTMLElement>;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n    showSortCaret?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination extends DSPaginationT.Props {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    id: string;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    disableFirstOptionFocusOnFilter?: boolean;\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n      | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: TypescriptHelpersT.GenericFunc;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'Header name or component',\n      ).isRequired,\n      accessor: PropTypes.string.description('The entry of the data that this column will display'),\n      id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n      filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n        'The custom component to render as a filter',\n      ),\n      Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n      editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'The editable out-of-the-box or component to render',\n      ),\n      disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n      canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n      minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n      maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n      canSort: PropTypes.bool.description('Whereas this column is sortable'),\n      disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n        'Whereas the first option should not be focused on filter',\n      ),\n      filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n        'Minimum width of the filter',\n      ),\n      filterOptions: PropTypes.arrayOf(\n        PropTypes.shape({\n          dsId: PropTypes.string,\n          value: PropTypes.string,\n          label: PropTypes.string,\n        }),\n      ).description('Filter options'),\n      isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n      required: PropTypes.bool.description('Whereas this column is required'),\n      alwaysDisplayEditIcon: PropTypes.bool.description(\n        'Whereas to always show the edit icon on this column if it is editable',\n      ),\n      textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func\n    .description('Function invoked when a column is resized')\n    .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n  onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func\n    .description('Function invoked when a column is sorted')\n    .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n  onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('4 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n  // ===========================================================================\n  // Typescript definition for auxiliary types\n  // ===========================================================================\n  type PropsT<D, R, O> = Partial<D> & R & O;\n\n  type InternalPropsT<D, R, O> = D & R & O;\n\n  // ===========================================================================\n  // Typescript definition for zustand store\n  // ===========================================================================\n\n  export type InternalAtoms = {\n    drilldownRowId: string | null;\n    focusedRowId: string | null;\n    isShiftPressed: boolean;\n    reduxHeaders: Record<string, ReduxHeader>;\n    isHeaderCellDragging: boolean;\n  };\n  export type UseAutoCalculatedT = {\n    /**\n     * visibleRangeRef: React.MutableRefObject<Range>\n     * We can use this ref to get the visible range of the virtual list\n     * taking in consideration the end-start and overscan.\n     */\n    visibleRangeRef: React.MutableRefObject<Range>;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    lastSelected: React.MutableRefObject<number>;\n    bodyClientWidth: number | string;\n    setBodyClientWidth: React.Dispatch<React.SetStateAction<number | string>>;\n  };\n  export type Selectors = Record<string, never>;\n  export type Reducers = {\n    patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  };\n  export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n  // ===========================================================================\n  // Typescript definition for data table related things\n  // ===========================================================================\n\n  export interface Filter {\n    id: string;\n    type: string;\n    value: unknown;\n  }\n\n  export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n  export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n  export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n  export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n    startDate: string;\n    endDate: string;\n    isDateRange: boolean;\n  }>;\n  export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n  export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n  export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n  export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n  export interface FilterItemProps {\n    column: InternalColumn;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n  }\n\n  export interface FilterProps<T> {\n    column: InternalColumn;\n    onValueChange: (type: string, value: T | undefined) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    filterValue: T;\n    reduxHeader: ReduxHeader;\n    innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n    domIdAffix?: string;\n  }\n\n  export interface FilterPillProps<T> {\n    columnHeader: string;\n    column: string;\n    value: T;\n    filters: Filter[];\n    onFiltersChange: (filters: Filter[]) => void;\n    prevRef: React.RefObject<HTMLElement>;\n    innerRef: React.RefObject<HTMLElement>;\n    nextRef: React.RefObject<HTMLElement>;\n  }\n\n  export interface ReduxHeader {\n    hideFilterMenu?: boolean;\n    hideFilterButton?: boolean;\n    showDnDHandle?: boolean;\n    withTabStops?: boolean;\n    showSortCaret?: boolean;\n  }\n\n  export type SelectionItem = boolean | 'mixed';\n\n  export type Selection = Record<string | number, SelectionItem>;\n\n  export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n  export interface SortBy {\n    id: string;\n    desc: boolean;\n  }\n\n  export interface Pagination extends DSPaginationT.Props {\n    hasPagination: boolean;\n    pageIndex?: number;\n    canPreviousPage?: boolean;\n    canNextPage?: boolean;\n    pageSize?: number;\n    dataIsPage?: boolean;\n    showPerPageSelector?: boolean;\n    perPageOptions?: number[];\n    perPageStep?: number;\n    minPerPage?: number;\n    maxPerPage?: number;\n    onPageSizeChange?: (pageSize: number) => void;\n    onPreviousPage?: () => void;\n    onNextPage?: () => void;\n    onPageChange?: (page: number) => void;\n    pageCount?: number | string;\n    isLoadingPageCount?: boolean;\n    pageDetails?: string[];\n    pageDetailsTitle?: string;\n  }\n\n  export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n  export interface RenderRowActionsConfig {\n    columnWidth: number;\n    renderer: React.ComponentType<CellProps>;\n  }\n\n  export type RenderRowActions = false | RenderRowActionsConfig;\n\n  export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n  export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n  export type DraggablePropsT =\n    | false\n    | (ReturnType<typeof useSortable> & {\n        dropIndicatorPosition: DropIndicatorPositionValues;\n        shouldShowDropIndicatorPosition: boolean;\n        isDropValid: boolean;\n      });\n\n  export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n  export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n  // ===========================================================================\n  // Typescript definition for the row and columns\n  // ===========================================================================\n\n  export interface Row {\n    [key: string]: unknown;\n    id: string;\n    subRows?: Row[];\n    tableRowDetails?: React.ComponentType<DetailsProps>;\n    dimsumHeaderValue?: string;\n  }\n  export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n    DefaultCellRender: JSX.Element;\n  }\n\n  export interface Column {\n    id?: string;\n    Header: string | React.ComponentType<HeaderProps>;\n    accessor?: string;\n    filter?: string;\n    filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n    disableFirstOptionFocusOnFilter?: boolean;\n    editOptions?: EditOptionT[] | (() => EditOptionT[]);\n    filterMinWidth?: number | string;\n    Filter?: React.ComponentType<FilterProps<unknown>>;\n    Cell?: React.ComponentType<CellRendererProps>;\n    editable?: string | React.ComponentType<EditableCellProps>;\n    disableDnD?: boolean;\n    width?: number;\n    minWidth?: number;\n    maxWidth?: number;\n    padding?: number;\n    columns?: Column[];\n    canSort?: boolean;\n    isSortedDesc?: boolean;\n    canResize?: boolean;\n    isFocuseable?: boolean;\n    textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n    ref?: React.MutableRefObject<HTMLTableColElement | null>;\n    required?: boolean;\n    cellStyle?: React.CSSProperties;\n    alwaysDisplayEditIcon?: boolean;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the row and columns\n  // ===========================================================================\n\n  export interface InternalRow {\n    id: string;\n    uid: string;\n    index: number;\n    realIndex: number;\n    parent: InternalRow | null;\n    parentId: string | null;\n    parentIndex: number | null;\n    depth: number;\n    isExpanded: boolean;\n    subRows: Row[];\n    childrenCount: number;\n    original: Row;\n    cells: Cell[];\n  }\n\n  export interface InternalColumn extends Column {\n    id: string;\n    parentId: string | null;\n    depth: number;\n    ref: React.MutableRefObject<HTMLTableColElement | null>;\n    columns?: InternalColumn[];\n  }\n\n  // ===========================================================================\n  // Typescript definition for the internal representation of the cell\n  // ===========================================================================\n\n  export interface CellRendererProps {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    // cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n    domIdAffix?: string;\n  }\n\n  export interface Cell<T extends HTMLElement = HTMLElement> {\n    column: InternalColumn;\n    value: unknown;\n    render: React.ComponentType<CellRendererProps>;\n    row: InternalRow;\n    ref: React.MutableRefObject<T | null>;\n    id: string;\n  }\n\n  // ===========================================================================\n  // Typescript definition for all component props\n  // ===========================================================================\n\n  export interface HeaderProps {\n    column: InternalColumn;\n    draggableProps: DraggablePropsT;\n  }\n\n  export interface CellProps<T extends HTMLElement = HTMLElement> {\n    row: InternalRow;\n    column: InternalColumn;\n    cell: Cell<T>;\n    domIdAffix?: string;\n    isRowSelected: boolean;\n    isDragOverlay: boolean;\n    shouldAddExpandCell: boolean;\n    cellIsNextToExpander: boolean;\n    isDisabledRow?: boolean;\n    draggableProps?: DraggablePropsT;\n  }\n\n  export interface DetailsProps {\n    detailsIndent: number;\n    row: InternalRow;\n  }\n  export interface RowVariantProps {\n    row: DSDataTableT.InternalRow;\n    itemIndex: number;\n    isDragOverlay: boolean;\n    focusedRowId: string | null;\n    drilldownRowId: string | null;\n  }\n\n  // ===========================================================================\n  // Typescript definition for the React Context\n  // ===========================================================================\n\n  export interface Context {\n    tableProps: InternalProps;\n    columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n    virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n    flattenedData: InternalRow[];\n    allDataFlattened: InternalRow[];\n    isEmptyContent: boolean;\n    firstFocuseableColumnHeaderId: string | undefined;\n    visibleColumns: InternalColumn[];\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    layoutHelpers: {\n      totalColumnsWidth: number | string;\n      gridLayout: string[];\n    };\n    paginationHelpers: Pagination;\n    drilldownRowId: string | null;\n    setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    focusedRowId: string | null;\n    setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n    reduxHeaders: Record<string, ReduxHeader>;\n    patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n    patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n    isShiftPressed: boolean;\n    setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n    lastSelected: React.MutableRefObject<number>;\n    isHeaderCellDragging: boolean;\n    setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n\n  export interface DefaultProps {\n    height: string;\n    width: string;\n    renderRowActions: false | RenderRowActionsConfig;\n    getRowVariant: (\n      row: InternalRow,\n      defaultCellRenderer: React.ComponentType<{\n        row: DSDataTableT.InternalRow;\n        isRowSelected: boolean;\n        isDragOverlay: boolean;\n      }>,\n    ) => RowVariant | React.ComponentType<RowVariantProps>;\n    withFilterBar: boolean;\n    isExpandable: boolean;\n    expandedRows: Record<string, boolean>;\n    disabledRows: Record<string, boolean>;\n    isResizeable: boolean;\n    isLoading: boolean;\n    pagination: false | Pagination;\n    filters: Filter[];\n    colsLayoutStyle: ColsLayoutStyleValues;\n    hiddenColumns: string[];\n    noResultsMessage: string;\n    dragAndDropRows: boolean;\n    maxDragAndDropLevel: number;\n    onRowsReorder: (\n      newData: Row[],\n      indexes: { targetIndex: number; fromIndex: number },\n      considerExpanding: string | null,\n      extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n    ) => void;\n    dragAndDropColumns: boolean;\n    onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n    getIsDropValid: (\n      active: DnDKitTree.Item<Row>,\n      over: DnDKitTree.Item<Row>,\n      dropIndicatorPosition: DropIndicatorPositionValues,\n    ) => boolean;\n    onColumnResize: (headerId: string, width: number) => void;\n    onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n    onRowClick: TypescriptHelpersT.GenericFunc;\n    onRowFocus: TypescriptHelpersT.GenericFunc;\n    noSelectionColumn: boolean;\n    selectSingle: boolean;\n    onSelectionChange: (\n      newSelection: Selection,\n      selectedControl: string,\n      event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    textWrap: 'wrap' | 'wrap-all' | 'truncate';\n    onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n    onFiltersChange: TypescriptHelpersT.GenericFunc;\n    onPageChanged: TypescriptHelpersT.GenericFunc;\n    onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n    onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n    onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n    isSkeleton: boolean;\n    domIdAffix?: string;\n  }\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n    uniqueRowAccessor?: UniqueRowAccessorType;\n    cellRendererProps?: Record<string, unknown>;\n    selection?: Selection;\n    groupedRowsRenderHeader?:\n      | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n      | string;\n    filterBarProps?: {\n      filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n      customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n      onClearAllFiltersClick?: () => void;\n      onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n      onDropdownMenuClickOutside?: () => void;\n      onDropdownMenuTriggerClick?: () => void;\n      isDropdownMenuOpen?: boolean;\n      extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n    };\n    actionRef?: React.MutableRefObject<{\n      scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n      scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n    }>;\n    noResultsSecondaryMessage?: string;\n    noResultsButtonLabel?: string;\n    noResultsPlaceholder?: React.ReactElement;\n    onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n    onTableResize?: TypescriptHelpersT.GenericFunc;\n    Pagination?: React.ComponentType<Record<string, never>>;\n    getAriaLabelForRow?: (args: {\n      row: InternalRow;\n      selected: boolean;\n      disabled: boolean;\n      expandable: boolean;\n      expanded: boolean;\n    }) => string;\n    checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n  }\n  export interface RequiredProps {\n    columns: Column[];\n    data: Row[];\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n  height: '100%',\n  width: '100%',\n  renderRowActions: false,\n  getRowVariant: () => 'ds-primary-row',\n  isExpandable: false,\n  expandedRows: {},\n  disabledRows: {},\n  isResizeable: false,\n  isLoading: false,\n  pagination: false,\n  withFilterBar: false,\n  filters: [],\n  getIsDropValid: () => true,\n  onColumnResize: () => null,\n  onColumnSortChange: () => null,\n  colsLayoutStyle: ColsLayoutStyle.Fixed,\n  hiddenColumns: [],\n  noResultsMessage: 'No Results Found',\n  dragAndDropRows: false,\n  maxDragAndDropLevel: 1,\n  onRowsReorder: () => null,\n  dragAndDropColumns: false,\n  onColumnsReorder: () => null,\n  onColumnSizeChange: () => null,\n  onRowClick: () => null,\n  onRowFocus: () => null,\n  noSelectionColumn: false,\n  selectSingle: false,\n  onSelectionChange: () => null,\n  textWrap: 'wrap',\n  onCellValueChange: () => null,\n  onFiltersChange: () => null,\n  onPageChanged: () => null,\n  onRowExpand: () => null,\n  onColumnSort: () => null,\n  isSkeleton: false,\n  domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n  ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n  columns: PropTypes.arrayOf(\n    PropTypes.shape({\n      Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'Header name or component',\n      ).isRequired,\n      accessor: PropTypes.string.description('The entry of the data that this column will display'),\n      id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n      filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n      Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n        'The custom component to render as a filter',\n      ),\n      Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n      editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n        'The editable out-of-the-box or component to render',\n      ),\n      disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n      canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n      width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n      minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n      maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n      canSort: PropTypes.bool.description('Whereas this column is sortable'),\n      disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n        'Whereas the first option should not be focused on filter',\n      ),\n      filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n        'Minimum width of the filter',\n      ),\n      filterOptions: PropTypes.arrayOf(\n        PropTypes.shape({\n          dsId: PropTypes.string,\n          value: PropTypes.string,\n          label: PropTypes.string,\n        }),\n      ).description('Filter options'),\n      isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n      required: PropTypes.bool.description('Whereas this column is required'),\n      alwaysDisplayEditIcon: PropTypes.bool.description(\n        'Whereas to always show the edit icon on this column if it is editable',\n      ),\n      textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n    }),\n  ).description('Array of columns').isRequired,\n  data: PropTypes.arrayOf(\n    PropTypes.shape({\n      tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n      dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n    }),\n  ).description('Array of rows'),\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n    'The renderer to use for the action toolbar',\n  ),\n  isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n  uniqueRowAccessor: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n    PropTypes.func,\n  ]).description(\n    'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n      ' This is necessary for the selectable and drag and drop features',\n  ),\n  disabledRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n  ),\n  expandedRows: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n  ),\n  onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n  cellRendererProps: PropTypes.object.description(\n    'Object with all the props you want the cells to have available when rendering',\n  ),\n  selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n  selection: PropTypes.object.description(\n    'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n  ),\n  onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n  groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n    'String | Function to call which will display in the row headers',\n  ),\n  isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n  filters: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string,\n      type: PropTypes.string,\n      value: PropTypes.any,\n    }),\n  ).description('Array of filter keys and values'),\n  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n  filterBarProps: PropTypes.shape({\n    filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n      'If you specify custom filters, you will need to render their pills here',\n    ),\n    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n    extraOptions: PropTypes.arrayOf(\n      PropTypes.shape({\n        type: PropTypes.string,\n        id: PropTypes.string,\n        label: PropTypes.string,\n        onClick: PropTypes.func,\n      }),\n    ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n  }).description('Props for the filter bar'),\n  onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n  pagination: PropTypes.oneOfType([\n    PropTypes.oneOf([false]),\n    PropTypes.shape({\n      pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n      isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n      pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n      canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n      canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n      pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n      showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n      perPageOptions: PropTypes.arrayOf(\n        PropTypes.oneOfType([\n          PropTypes.number,\n          PropTypes.shape({\n            dsId: PropTypes.string,\n            value: PropTypes.number,\n            label: PropTypes.string,\n            type: PropTypes.oneOf(['single']),\n          }),\n        ]),\n      )\n        .description('The available options for page size')\n        .defaultValue([10]),\n      perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n      minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n      maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n      onPageSizeChange: PropTypes.func\n        .description('Function invoked when the page size changes')\n        .defaultValue(() => null),\n      onPreviousPage: PropTypes.func\n        .description('Function invoked when the previous button is pressed')\n        .defaultValue(() => null),\n      onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n      onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n      pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n      dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n      pageDetailsTitle: PropTypes.string\n        .description('The title of the details (usually a column of your dataset)')\n        .defaultValue(''),\n    }),\n  ]).description('Object containing the data for the pagination'),\n  Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n  colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n  hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n  dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n  onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n  maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n  dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n  onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n  getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n  textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n  noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n  noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n  noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.node]).description(\n    'Custom content to show when dataset is empty',\n  ),\n  isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n  onColumnResize: PropTypes.func\n    .description('Function invoked when a column is resized')\n    .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n  onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n  onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n  onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n  onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n  onColumnSortChange: PropTypes.func\n    .description('Function invoked when a column is sorted')\n    .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n  onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n  onTableResize: PropTypes.func.description(\n    'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n  ),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  getRowVariant: PropTypes.func\n    .description(\"Function invoked to determine a row's variant\")\n    .defaultValue(`() => 'ds-primary-row'`),\n  noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n  onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNoResultsButtonClick: PropTypes.func\n    .description('Function invoked when the no results button is clicked')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n  getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n  domIdAffix: PropTypes.string\n    .description('Affix to avoid duplicate ids')\n    .defaultValue('4 randomly generated characters'),\n  checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/styled.js

@@ -53,14 +53,14 @@ __export(styled_exports, {
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
-var import_ds_system = require("@elliemae/ds-system");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_helpers = require("./helpers/index.js");
-var import_zIndexInternalConfig = require("./configs/zIndexInternalConfig.js");
-var import_constants = require("./configs/constants.js");
-var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_system = require("@elliemae/ds-system");
 var import_DSDataTableDefinitions = require("./DSDataTableDefinitions.js");
+var import_constants = require("./configs/constants.js");
+var import_zIndexInternalConfig = require("./configs/zIndexInternalConfig.js");
+var import_helpers = require("./helpers/index.js");
 const styledFocusCss = ({ theme }, color) => `
 &:after {
   display: block;

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';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ 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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\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-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\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    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\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  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ 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  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\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\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_WRAPPER,\n})<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n  width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ 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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TR,\n})<{\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-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_TH,\n})<{\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  name: DSDataTableName,\n  slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.RESIZER,\n})`\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 0;\n  min-height: unset;\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    border-radius: 0;\n\n    &:focus::-webkit-slider-runnable-track {\n      background: transparent;\n    }\n\n    &:focus-visible {\n      background: brand-700;\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  name: DSDataTableName,\n  slot: DSDataTableSlots.ACTION_CELL,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL,\n})`\n  ${cellPadding}\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTENT,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ 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, {\n  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ 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  name: DSDataTableName,\n  slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\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  name: DSDataTableName,\n  slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\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\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/DataTable.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { withZustand } from "@elliemae/ds-zustand-helpers";
+import { describe } from "@elliemae/ds-props-helpers";
 import { MainContent } from "./parts/MainContent.js";
 import { config } from "./configs/useStore/index.js";
-import { describe } from "@elliemae/ds-props-helpers";
 import { DSDataTablePropTypesSchema } from "./react-desc-prop-types.js";
 const DataTable = withZustand(MainContent, config);
 DataTable.displayName = "DataTable";

package/dist/esm/DataTable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
   "names": []
 }