@elliemae/ds-data-table 3.22.0-next.2 → 3.22.0-next.20

package/dist/cjs/configs/useTableColsWithAddons.js

@@ -64,30 +64,33 @@ const useTableColsWithAddons = ({
   selection,
   dragAndDropRows,
   noSelectionColumn
-}) => (0, import_react.useMemo)(() => {
-  const columnsWithAddons = [...augmentColumns(columns)];
-  const colsToPrepend = [];
-  const colsToAppend = [];
-  if (isExpandable)
-    colsToPrepend.push(import_Columns.expandRowColumn);
-  if (selection && !noSelectionColumn) {
-    if (selectSingle)
-      colsToPrepend.push(import_Columns.singleSelectColumn);
-    else
-      colsToPrepend.push(import_Columns.multiSelectColumn);
-  }
-  if (dragAndDropRows)
-    colsToPrepend.push(import_Columns.dragHandleColumn);
-  if (renderRowActions)
-    colsToAppend.push((0, import_Columns.actionColumn)(renderRowActions));
-  colsToPrepend.forEach((col) => {
-    if (!isColumnInArrayOfColumns(columnsWithAddons, col))
-      columnsWithAddons.unshift(col);
-  });
-  colsToAppend.forEach((col) => {
-    if (!isColumnInArrayOfColumns(columnsWithAddons, col))
-      columnsWithAddons.push(col);
-  });
-  return columnsWithAddons;
-}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
+}) => {
+  const withSelection = Boolean(selection);
+  return (0, import_react.useMemo)(() => {
+    const columnsWithAddons = [...augmentColumns(columns)];
+    const colsToPrepend = [];
+    const colsToAppend = [];
+    if (isExpandable)
+      colsToPrepend.push(import_Columns.expandRowColumn);
+    if (withSelection && !noSelectionColumn) {
+      if (selectSingle)
+        colsToPrepend.push(import_Columns.singleSelectColumn);
+      else
+        colsToPrepend.push(import_Columns.multiSelectColumn);
+    }
+    if (dragAndDropRows)
+      colsToPrepend.push(import_Columns.dragHandleColumn);
+    if (renderRowActions)
+      colsToAppend.push((0, import_Columns.actionColumn)(renderRowActions));
+    colsToPrepend.forEach((col) => {
+      if (!isColumnInArrayOfColumns(columnsWithAddons, col))
+        columnsWithAddons.unshift(col);
+    });
+    colsToAppend.forEach((col) => {
+      if (!isColumnInArrayOfColumns(columnsWithAddons, col))
+        columnsWithAddons.push(col);
+    });
+    return columnsWithAddons;
+  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);
+};
 //# sourceMappingURL=useTableColsWithAddons.js.map

package/dist/cjs/configs/useTableColsWithAddons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/configs/useTableColsWithAddons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\ntype UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: UseTableColsWithAddonsType = ({\n  columns,\n  renderRowActions,\n  isExpandable,\n  selectSingle,\n  selection,\n  dragAndDropRows,\n  noSelectionColumn,\n}) =>\n  useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (selection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons;\n  }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);\n\nexport { useTableColsWithAddons };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmC;AAEnC,qBAMO;AAIP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI;AAAc,aAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,UACE,sBAAQ,MAAM;AACZ,QAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,QAAM,gBAA+C,CAAC;AAEtD,QAAM,eAA8C,CAAC;AAErD,MAAI;AAAc,kBAAc,KAAK,8BAAe;AACpD,MAAI,aAAa,CAAC,mBAAmB;AACnC,QAAI;AAAc,oBAAc,KAAK,iCAA4D;AAAA;AAC5F,oBAAc,KAAK,gCAA2D;AAAA,EACrF;AACA,MAAI;AAAiB,kBAAc,KAAK,+BAA0D;AAClG,MAAI;AAAkB,iBAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,gBAAc,QAAQ,CAAC,QAAQ;AAC7B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,QAAQ,GAAG;AAAA,EACtF,CAAC;AACD,eAAa,QAAQ,CAAC,QAAQ;AAC5B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,KAAK,GAAG;AAAA,EACnF,CAAC;AAED,SAAO;AACT,GAAG,CAAC,SAAS,cAAc,WAAW,mBAAmB,cAAc,iBAAiB,gBAAgB,CAAC;",
+  "sourcesContent": ["/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n  dragHandleColumn,\n  expandRowColumn,\n  actionColumn,\n  singleSelectColumn,\n  multiSelectColumn,\n} from '../addons/Columns/index.js';\n\ntype UseTableColsWithAddonsType = (config: DSDataTableT.InternalProps) => DSDataTableT.InternalColumn[];\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n  const augmentColumn = (\n    column: DSDataTableT.Column,\n    index: number,\n    parentId: string | null = null,\n    depth = 0,\n  ): DSDataTableT.InternalColumn => {\n    let id = `column${index}`;\n    if (typeof column.Header === 'string') id = column.Header;\n    if (typeof column.accessor === 'string') id = column.accessor;\n    const { columns: childColumns, ...restOfColumn } = column;\n    const newCol: DSDataTableT.InternalColumn = {\n      id,\n      parentId,\n      depth,\n      ...restOfColumn,\n      ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n    };\n    if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n    return newCol;\n  };\n  return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n  columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: UseTableColsWithAddonsType = ({\n  columns,\n  renderRowActions,\n  isExpandable,\n  selectSingle,\n  selection,\n  dragAndDropRows,\n  noSelectionColumn,\n}) => {\n  const withSelection = Boolean(selection);\n\n  return useMemo(() => {\n    const columnsWithAddons = [...augmentColumns(columns)];\n\n    // Columns to be prepended\n    const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n    // Columns to be appended\n    const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n    if (isExpandable) colsToPrepend.push(expandRowColumn);\n    if (withSelection && !noSelectionColumn) {\n      if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n      else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n    }\n    if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n    if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n    // Prepend or append all the columns that were not extended by the user\n    colsToPrepend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n    });\n    colsToAppend.forEach((col) => {\n      if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n    });\n\n    return columnsWithAddons;\n  }, [columns, isExpandable, withSelection, noSelectionColumn, dragAndDropRows, renderRowActions, selectSingle]);\n};\n\nexport { useTableColsWithAddons };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmC;AAEnC,qBAMO;AAIP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI;AAAc,aAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI;AAAc,oBAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI;AAAc,sBAAc,KAAK,iCAA4D;AAAA;AAC5F,sBAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI;AAAiB,oBAAc,KAAK,+BAA0D;AAClG,QAAI;AAAkB,mBAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,0BAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,0BAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,cAAc,eAAe,mBAAmB,iBAAiB,kBAAkB,YAAY,CAAC;AAC/G;",
   "names": []
 }

package/dist/cjs/exported-related/Skeleton/SkeletonCell.js

@@ -0,0 +1,42 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SkeletonCell_exports = {};
+__export(SkeletonCell_exports, {
+  SkeletonCell: () => SkeletonCell
+});
+module.exports = __toCommonJS(SkeletonCell_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_skeleton = require("@elliemae/ds-skeleton");
+const SkeletonCell = () => {
+  const randomPercentage = (0, import_react.useMemo)(() => Math.floor(Math.random() * 70 + 30), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { w: `${randomPercentage}%`, height: "25px" });
+};
+//# sourceMappingURL=SkeletonCell.js.map

package/dist/cjs/exported-related/Skeleton/SkeletonCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/exported-related/Skeleton/SkeletonCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonCell = () => {\n  const randomPercentage = useMemo(() => Math.floor(Math.random() * 70 + 30), []);\n  return <DSSkeleton w={`${randomPercentage}%`} height=\"25px\" />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKd;AALT,mBAA+B;AAC/B,yBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,uBAAmB,sBAAQ,MAAM,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC;AAC9E,SAAO,4CAAC,iCAAW,GAAG,GAAG,qBAAqB,QAAO,QAAO;AAC9D;",
+  "names": []
+}

package/dist/cjs/exported-related/Skeleton/SkeletonHeaderCell.js

@@ -0,0 +1,38 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SkeletonHeaderCell_exports = {};
+__export(SkeletonHeaderCell_exports, {
+  SkeletonHeaderCell: () => SkeletonHeaderCell
+});
+module.exports = __toCommonJS(SkeletonHeaderCell_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_skeleton = require("@elliemae/ds-skeleton");
+const SkeletonHeaderCell = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { w: "100%", height: "20px" });
+//# sourceMappingURL=SkeletonHeaderCell.js.map

package/dist/cjs/exported-related/Skeleton/SkeletonHeaderCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/exported-related/Skeleton/SkeletonHeaderCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\n\nexport const SkeletonHeaderCell = () => <DSSkeleton w=\"100%\" height=\"20px\" />;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGiB;AAFxC,yBAA2B;AAEpB,MAAM,qBAAqB,MAAM,4CAAC,iCAAW,GAAE,QAAO,QAAO,QAAO;",
+  "names": []
+}

package/dist/cjs/exported-related/Skeleton/index.js

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

package/dist/cjs/exported-related/Skeleton/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/exported-related/Skeleton/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './SkeletonCell.js';\nexport * from './SkeletonHeaderCell.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAAc,8BAAd;AACA,6BAAc,oCADd;",
+  "names": []
+}

package/dist/cjs/exported-related/index.js

@@ -35,6 +35,8 @@ __export(exported_related_exports, {
   ROW_VARIANTS: () => import_RowVariants.ROW_VARIANTS,
   ROW_VARIANT_COMPACT_KEY: () => import_RowVariants.ROW_VARIANT_COMPACT_KEY,
   ROW_VARIANT_KEY: () => import_RowVariants.ROW_VARIANT_KEY,
+  SkeletonCell: () => import_Skeleton.SkeletonCell,
+  SkeletonHeaderCell: () => import_Skeleton.SkeletonHeaderCell,
   Toolbar: () => import_Toolbar.Toolbar,
   applyOutOfTheBoxFilters: () => import_Filters.applyOutOfTheBoxFilters,
   currencyRangeFilterFn: () => import_Filters.currencyRangeFilterFn,
@@ -55,4 +57,5 @@ var import_FilterTypes = require("./FilterTypes.js");
 var import_RowVariants = require("./RowVariants.js");
 var import_Filters = require("./Filters/index.js");
 var import_FilterBar = require("./FilterBar/index.js");
+var import_Skeleton = require("./Skeleton/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/exported-related/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu } from './FilterBar/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA8B;AAC9B,0BAA6B;AAC7B,qBAAwB;AACxB,qBAAwB;AACxB,yBAA6B;AAC7B,yBAAuE;AACvE,qBAQO;AACP,uBAAsC;",
+  "sourcesContent": ["export { FilterPopover } from './FilterPopover/index.js';\nexport { EditableCell } from './EditableCell.js';\nexport { Toolbar } from './Toolbar/index.js';\nexport { groupBy } from './groupBy.js';\nexport { FILTER_TYPES } from './FilterTypes.js';\nexport { ROW_VARIANTS, ROW_VARIANT_KEY, ROW_VARIANT_COMPACT_KEY } from './RowVariants.js';\nexport {\n  applyOutOfTheBoxFilters,\n  singleDateFilterFn,\n  singleSelectFilterFn,\n  multiSelectFilterFn,\n  numberRangeFilterFn,\n  currencyRangeFilterFn,\n  dateRangeFilterFn,\n} from './Filters/index.js';\nexport { FilterBarDropdownMenu } from './FilterBar/index.js';\nexport { SkeletonCell, SkeletonHeaderCell } from './Skeleton/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAA8B;AAC9B,0BAA6B;AAC7B,qBAAwB;AACxB,qBAAwB;AACxB,yBAA6B;AAC7B,yBAAuE;AACvE,qBAQO;AACP,uBAAsC;AACtC,sBAAiD;",
   "names": []
 }

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

@@ -42,7 +42,7 @@ var import_SortableHeaderCell = require("../SortableHeaderCell.js");
 var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
 const HeadersComp = () => {
   const {
-    tableProps: { isExpandable, colsLayoutStyle },
+    tableProps: { isExpandable, isSkeleton, colsLayoutStyle },
     visibleColumns,
     columnHeaderRef,
     virtualListRef
@@ -50,6 +50,9 @@ const HeadersComp = () => {
   (0, import_react.useEffect)(() => {
     (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumns, true);
   }, [virtualListRef, visibleColumns]);
+  if (visibleColumns.length === 0 && isSkeleton) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeadWrapper, { colsLayoutStyle, ref: columnHeaderRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SortableHeaderCell.SortableHeaderCell, { items: visibleColumns, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeadTr, { role: "row", colsLayoutStyle, isExpandable, children: visibleColumns.map((h, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroupSortable, { header: h, isLast: index === visibleColumns.length - 1 }, h.id)) }) }) });
 };
 const Headers = (0, import_withConditionalDnDColumnContext.withConditionalDnDColumnContext)(HeadersComp);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    visibleColumns,\n    columnHeaderRef,\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BX;AA1BZ,mBAA6C;AAC7C,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AAExC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,SACE,4CAAC,mCAAkB,iBAAkC,KAAK,iBACxD,sDAAC,gDAAmB,OAAO,gBACzB,sDAAC,8BAAa,MAAK,OAAM,iBAAkC,cACxD,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F,GACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
+  "sourcesContent": ["import React, { useContext, useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\n\nconst HeadersComp = () => {\n  const {\n    tableProps: { isExpandable, isSkeleton, colsLayoutStyle },\n    visibleColumns,\n    columnHeaderRef,\n    virtualListRef,\n  } = useContext(DataTableContext);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BX;AA7BZ,mBAA6C;AAC7C,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AAExC,MAAM,cAAc,MAAM;AACxB,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,YAAY,gBAAgB;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,4CAAC,mCAAkB,iBAAkC,KAAK,iBACxD,sDAAC,gDAAmB,OAAO,gBACzB,sDAAC,8BAAa,MAAK,OAAM,iBAAkC,cACxD,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F,GACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
   "names": []
 }

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

@@ -33,13 +33,8 @@ __export(RowVariantSkeleton_exports, {
 module.exports = __toCommonJS(RowVariantSkeleton_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_skeleton = require("@elliemae/ds-skeleton");
+var import_exported_related = require("../../exported-related/index.js");
 var import_RowRenderer = require("../../exported-related/RowRenderer/index.js");
-const RandomSkeleton = () => {
-  const randomPercentage = (0, import_react.useMemo)(() => Math.floor(Math.random() * 70 + 30), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_skeleton.DSSkeleton, { w: `${randomPercentage}%`, h: "90%" });
-};
 const RowVariantSkeleton = ({
   row,
   itemIndex,
@@ -49,7 +44,7 @@ const RowVariantSkeleton = ({
 }) => {
   const newCells = row.cells.map((cell) => ({
     ...cell,
-    render: RandomSkeleton
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_exported_related.SkeletonCell, {})
   }));
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_RowRenderer.RowRenderer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/RowVariants/RowVariantSkeleton.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst RandomSkeleton = () => {\n  const randomPercentage = useMemo(() => Math.floor(Math.random() * 70 + 30), []);\n  return <DSSkeleton w={`${randomPercentage}%`} h=\"90%\" />;\n};\n\nexport const RowVariantSkeleton: React.ComponentType<DSDataTableT.RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => {\n  const newCells = row.cells.map((cell) => ({\n    ...cell,\n    render: RandomSkeleton,\n  }));\n\n  return (\n    <RowRenderer\n      row={{ ...row, cells: newCells }}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      minHeight=\"0px\"\n      height=\"36px\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOd;AAPT,mBAA+B;AAC/B,yBAA2B;AAC3B,yBAA4B;AAG5B,MAAM,iBAAiB,MAAM;AAC3B,QAAM,uBAAmB,sBAAQ,MAAM,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC;AAC9E,SAAO,4CAAC,iCAAW,GAAG,GAAG,qBAAqB,GAAE,OAAM;AACxD;AAEO,MAAM,qBAAwE,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,IAAI,MAAM,IAAI,CAAC,UAAU;AAAA,IACxC,GAAG;AAAA,IACH,QAAQ;AAAA,EACV,EAAE;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE,GAAG,KAAK,OAAO,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,QAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { SkeletonCell } from '../../exported-related/index.js';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const RowVariantSkeleton: React.ComponentType<DSDataTableT.RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => {\n  const newCells = row.cells.map((cell) => ({\n    ...cell,\n    render: () => <SkeletonCell />,\n  }));\n\n  return (\n    <RowRenderer\n      row={{ ...row, cells: newCells }}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      minHeight=\"0px\"\n      height=\"36px\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcL;AAblB,8BAA6B;AAC7B,yBAA4B;AAGrB,MAAM,qBAAwE,CAAC;AAAA,EACpF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,IAAI,MAAM,IAAI,CAAC,UAAU;AAAA,IACxC,GAAG;AAAA,IACH,QAAQ,MAAM,4CAAC,wCAAa;AAAA,EAC9B,EAAE;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE,GAAG,KAAK,OAAO,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,QAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/SkeletonTable.js

@@ -0,0 +1,49 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SkeletonTable_exports = {};
+__export(SkeletonTable_exports, {
+  SkeletonTable: () => SkeletonTable
+});
+module.exports = __toCommonJS(SkeletonTable_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_skeleton = require("@elliemae/ds-skeleton");
+const SkeletonTable = import_react.default.memo(({ height = "100" }) => {
+  const gap = 16;
+  const rowHeight = 36;
+  const headerHeight = 25;
+  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))
+  ] });
+});
+//# sourceMappingURL=SkeletonTable.js.map

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

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

package/dist/cjs/parts/TableContent.js

@@ -39,6 +39,7 @@ var import_DataTableContext = require("../DataTableContext.js");
 var import_Pagination = require("../addons/Pagination/index.js");
 var import_VirtualRowsList = require("./VirtualRowsList.js");
 var import_constants = require("../configs/constants.js");
+var import_SkeletonTable = require("./SkeletonTable.js");
 const TableContent = () => {
   const {
     allDataFlattened,
@@ -46,7 +47,7 @@ const TableContent = () => {
     isShiftPressed,
     setIsShiftPressed,
     paginationHelpers: { hasPagination },
-    tableProps: { isLoading }
+    tableProps: { isLoading, isSkeleton, height }
   } = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
   const handleOnKeyDown = (0, import_react.useCallback)(
     (e) => {
@@ -72,8 +73,8 @@ const TableContent = () => {
             "aria-rowcount": allDataFlattened.length,
             "aria-colcount": visibleColumns.length,
             "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE,
-            "aria-busy": isLoading,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
+            "aria-busy": isLoading || isSkeleton,
+            children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonTable.SkeletonTable, { height }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
           }
         ),
         hasPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) : null

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TableContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\n\nexport const TableContent = () => {\n  const {\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n    paginationHelpers: { hasPagination },\n    tableProps: { isLoading },\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n        aria-busy={isLoading}\n      >\n        <VirtualRowsList />\n      </StyledTableWrapper>\n      {hasPagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAA+C;AAC/C,oBAAkE;AAClE,8BAAiC;AACjC,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,cAAc;AAAA,IACnC,YAAY,EAAE,UAAU;AAAA,EAC1B,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,gBAAgB,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC/C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,6BAAY;AAAA,YACzB,aAAW;AAAA,YAEX,sDAAC,0CAAgB;AAAA;AAAA,QACnB;AAAA,QACC,gBAAgB,4CAAC,gCAAW,IAAK;AAAA;AAAA;AAAA,EACpC;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nexport const TableContent = () => {\n  const {\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n    paginationHelpers: { hasPagination },\n    tableProps: { isLoading, isSkeleton, height },\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n        aria-busy={isLoading || isSkeleton}\n      >\n        {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n      </StyledTableWrapper>\n      {hasPagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BnB;AA5BJ,mBAA+C;AAE/C,oBAAkE;AAClE,8BAAiC;AACjC,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAC5B,2BAA8B;AACvB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,cAAc;AAAA,IACnC,YAAY,EAAE,WAAW,YAAY,OAAO;AAAA,EAC9C,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,gBAAgB,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC/C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,6BAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YAEvB,uBAAa,4CAAC,sCAAc,QAAgB,IAAK,4CAAC,0CAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBAAgB,4CAAC,gCAAW,IAAK;AAAA;AAAA;AAAA,EACpC;AAEJ;",
   "names": []
 }

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

@@ -72,7 +72,8 @@ const defaultProps = {
   onFiltersChange: () => null,
   onPageChanged: () => null,
   onRowExpand: () => null,
-  onColumnSort: () => null
+  onColumnSort: () => null,
+  isSkeleton: false
 };
 const DSDataTablePropTypes = {
   columns: import_ds_props_helpers.PropTypes.arrayOf(
@@ -236,7 +237,8 @@ const DSDataTablePropTypes = {
   getRowVariant: import_ds_props_helpers.PropTypes.func.description("Function invoked to determine a row's variant").defaultValue(`() => 'ds-primary-row'`),
   noSelectionColumn: import_ds_props_helpers.PropTypes.bool.description("Whether to show the selection column or not").defaultValue(false),
   onPageChanged: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
-  onNoResultsButtonClick: import_ds_props_helpers.PropTypes.func.description("Function invoked when the no results button is clicked").defaultValue(() => null)
+  onNoResultsButtonClick: import_ds_props_helpers.PropTypes.func.description("Function invoked when the no results button is clicked").defaultValue(() => null),
+  isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether to show a skeleton loader in the datatable")
 };
 const DSDataTablePropTypesSchema = DSDataTablePropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map