@elliemae/ds-datagrids 3.0.0-next.1 → 3.0.0-next.13

package/dist/cjs/plugins/editable/index.js

@@ -0,0 +1,38 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var editable_exports = {};
+__export(editable_exports, {
+  ComboBox: () => import_EditableComponents.ComboBox,
+  EditablePlugin: () => import_EditablePlugin.EditablePlugin,
+  TextBox: () => import_EditableComponents.TextBox
+});
+var React = __toESM(require("react"));
+var import_EditablePlugin = require("./EditablePlugin");
+var import_EditableComponents = require("./EditableComponents");
+module.exports = __toCommonJS(editable_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/plugins/editable/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/editable/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { EditablePlugin } from './EditablePlugin';\nexport { ComboBox, TextBox } from './EditableComponents';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAA+B;AAC/B,gCAAkC;",
+  "names": []
+}

package/dist/cjs/plugins/expandable-grid/ExpandableColumn.js

@@ -0,0 +1,163 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ExpandableColumn_exports = {};
+__export(ExpandableColumn_exports, {
+  ExpandableColumn: () => ExpandableColumn,
+  default: () => ExpandableColumn_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_button = require("@elliemae/ds-button");
+var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
+var import_blockNames = require("../../blockNames");
+var import_rowSizes = require("../../rowSizes");
+const blockName = `${import_blockNames.dataGridBlockName}-expandable-column`;
+const ExpandableColumnWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName);
+const LabelDescriptionWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "label-description-wrapper");
+const Label = (0, import_ds_classnames.aggregatedClasses)("span")(blockName, "label");
+const Description = (0, import_ds_classnames.aggregatedClasses)("span")(blockName, "description");
+const ExtraColumnData = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "extra-column-data");
+const ExpandableMasterWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(`${blockName}-master-wrapper`);
+const ExpandableDetailsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(`${blockName}-details-wrapper`);
+function ExpandableColumnCell({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) {
+  const ref = (0, import_react.useRef)();
+  return /* @__PURE__ */ import_react.default.createElement(ExpandableColumnWrapper, {
+    ref,
+    tabindex: 0
+  }, /* @__PURE__ */ import_react.default.createElement(ExpandableMasterWrapper, {
+    style: { height: import_rowSizes.RowSizes.extend }
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+    buttonType: "text",
+    className: "expandable-arrow",
+    icon: isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, null) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, null),
+    onClick: (e) => {
+      onToggleExpand(e);
+      if (ref && ref.current) {
+        ref.current.focus();
+      }
+    },
+    size: "s"
+  }), /* @__PURE__ */ import_react.default.createElement(LabelDescriptionWrapper, null, /* @__PURE__ */ import_react.default.createElement(Label, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
+    value: label
+  })), /* @__PURE__ */ import_react.default.createElement(Description, null, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.DSTruncatedTooltipText, {
+    value: description
+  }))), /* @__PURE__ */ import_react.default.createElement(ExtraColumnData, null, extraData)), isExpanded && /* @__PURE__ */ import_react.default.createElement(ExpandableDetailsWrapper, null, expandableDetails));
+}
+const expandableColumnRenderer = ({ renderRowLabel, renderRowDescription, renderExtraData }) => (value, { rowData, isExpanded }, grid) => {
+  const {
+    props: { renderExpandedDetails },
+    actions: { toggleExpand }
+  } = grid.getInstance();
+  const expandableDetails = renderExpandedDetails({ rowData });
+  return /* @__PURE__ */ import_react.default.createElement(ExpandableColumnCell, {
+    description: renderRowDescription({ rowData }),
+    expandableDetails,
+    extraData: renderExtraData({ rowData }),
+    isExpanded,
+    label: renderRowLabel({ rowData }),
+    onToggleExpand: () => toggleExpand(rowData)
+  });
+};
+const noop = () => null;
+const ExpandableColumn = (_a) => {
+  var _b = _a, {
+    property,
+    label,
+    renderRowLabel = () => "----",
+    renderRowDescription = noop,
+    renderExtraData = noop,
+    width,
+    resizable,
+    sortable,
+    searchable,
+    customRenderer
+  } = _b, rest = __objRest(_b, [
+    "property",
+    "label",
+    "renderRowLabel",
+    "renderRowDescription",
+    "renderExtraData",
+    "width",
+    "resizable",
+    "sortable",
+    "searchable",
+    "customRenderer"
+  ]);
+  return __spreadProps(__spreadValues({}, rest), {
+    label,
+    property,
+    cell: {
+      formatters: [
+        expandableColumnRenderer({
+          renderRowLabel,
+          renderRowDescription,
+          renderExtraData
+        })
+      ]
+    },
+    width: width || "50%",
+    expandableColumn: true,
+    resizable,
+    sortable,
+    searchable
+  });
+};
+var ExpandableColumn_default = ExpandableColumn;
+module.exports = __toCommonJS(ExpandableColumn_exports);
+//# sourceMappingURL=ExpandableColumn.js.map

package/dist/cjs/plugins/expandable-grid/ExpandableColumn.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/expandable-grid/ExpandableColumn.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/display-name */\nimport React, { useRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { dataGridBlockName } from '../../blockNames';\nimport { RowSizes } from '../../rowSizes';\n\nconst blockName = `${dataGridBlockName}-expandable-column`;\n\n// todo: clean this when we move to css-js\nconst ExpandableColumnWrapper = aggregatedClasses('div')(blockName);\nconst LabelDescriptionWrapper = aggregatedClasses('div')(blockName, 'label-description-wrapper');\nconst Label = aggregatedClasses('span')(blockName, 'label');\nconst Description = aggregatedClasses('span')(blockName, 'description');\nconst ExtraColumnData = aggregatedClasses('div')(blockName, 'extra-column-data');\nconst ExpandableMasterWrapper = aggregatedClasses('div')(`${blockName}-master-wrapper`);\nconst ExpandableDetailsWrapper = aggregatedClasses('div')(`${blockName}-details-wrapper`);\n\nfunction ExpandableColumnCell({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) {\n  const ref = useRef();\n  return (\n    <ExpandableColumnWrapper ref={ref} tabindex={0}>\n      <ExpandableMasterWrapper style={{ height: RowSizes.extend }}>\n        <DSButton\n          buttonType=\"text\"\n          className=\"expandable-arrow\"\n          icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n          onClick={(e) => {\n            onToggleExpand(e);\n            if (ref && ref.current) {\n              ref.current.focus();\n            }\n          }}\n          size=\"s\"\n        />\n        <LabelDescriptionWrapper>\n          <Label>\n            <DSTruncatedTooltipText value={label} />\n          </Label>\n          <Description>\n            <DSTruncatedTooltipText value={description} />\n          </Description>\n        </LabelDescriptionWrapper>\n        <ExtraColumnData>{extraData}</ExtraColumnData>\n      </ExpandableMasterWrapper>\n      {isExpanded && <ExpandableDetailsWrapper>{expandableDetails}</ExpandableDetailsWrapper>}\n    </ExpandableColumnWrapper>\n  );\n}\n\nconst expandableColumnRenderer =\n  ({ renderRowLabel, renderRowDescription, renderExtraData }) =>\n  (value, { rowData, isExpanded }, grid) => {\n    const {\n      props: { renderExpandedDetails },\n      actions: { toggleExpand },\n    } = grid.getInstance();\n\n    const expandableDetails = renderExpandedDetails({ rowData });\n    return (\n      <ExpandableColumnCell\n        description={renderRowDescription({ rowData })}\n        expandableDetails={expandableDetails}\n        extraData={renderExtraData({ rowData })}\n        isExpanded={isExpanded}\n        label={renderRowLabel({ rowData })}\n        onToggleExpand={() => toggleExpand(rowData)}\n      />\n    );\n  };\nconst noop = () => null;\nexport const ExpandableColumn = ({\n  property,\n  label,\n  renderRowLabel = () => '----',\n  renderRowDescription = noop,\n  renderExtraData = noop,\n  width,\n  resizable,\n  sortable,\n  searchable,\n  customRenderer,\n  ...rest\n}) => {\n  return {\n    ...rest,\n    label,\n    property,\n    cell: {\n      formatters: [\n        expandableColumnRenderer({\n          renderRowLabel,\n          renderRowDescription,\n          renderExtraData,\n        }),\n      ],\n    },\n    width: width || '50%',\n    expandableColumn: true,\n    resizable,\n    sortable,\n    searchable,\n  };\n};\n\nexport default ExpandableColumn;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8B;AAC9B,sBAA8C;AAC9C,2BAAkC;AAClC,uBAAyB;AACzB,uCAAuC;AACvC,wBAAkC;AAClC,sBAAyB;AAEzB,MAAM,YAAY,GAAG;AAGrB,MAAM,0BAA0B,4CAAkB,OAAO;AACzD,MAAM,0BAA0B,4CAAkB,OAAO,WAAW;AACpE,MAAM,QAAQ,4CAAkB,QAAQ,WAAW;AACnD,MAAM,cAAc,4CAAkB,QAAQ,WAAW;AACzD,MAAM,kBAAkB,4CAAkB,OAAO,WAAW;AAC5D,MAAM,0BAA0B,4CAAkB,OAAO,GAAG;AAC5D,MAAM,2BAA2B,4CAAkB,OAAO,GAAG;AAE7D,8BAA8B,EAAE,OAAO,aAAa,YAAY,mBAAmB,WAAW,kBAAkB;AAC9G,QAAM,MAAM;AACZ,SACE,mDAAC,yBAAD;AAAA,IAAyB;AAAA,IAAU,UAAU;AAAA,KAC3C,mDAAC,yBAAD;AAAA,IAAyB,OAAO,EAAE,QAAQ,yBAAS;AAAA,KACjD,mDAAC,2BAAD;AAAA,IACE,YAAW;AAAA,IACX,WAAU;AAAA,IACV,MAAM,aAAa,mDAAC,+BAAD,QAAoB,mDAAC,gCAAD;AAAA,IACvC,SAAS,CAAC,MAAM;AACd,qBAAe;AACf,UAAI,OAAO,IAAI,SAAS;AACtB,YAAI,QAAQ;AAAA;AAAA;AAAA,IAGhB,MAAK;AAAA,MAEP,mDAAC,yBAAD,MACE,mDAAC,OAAD,MACE,mDAAC,yDAAD;AAAA,IAAwB,OAAO;AAAA,OAEjC,mDAAC,aAAD,MACE,mDAAC,yDAAD;AAAA,IAAwB,OAAO;AAAA,QAGnC,mDAAC,iBAAD,MAAkB,aAEnB,cAAc,mDAAC,0BAAD,MAA2B;AAAA;AAKhD,MAAM,2BACJ,CAAC,EAAE,gBAAgB,sBAAsB,sBACzC,CAAC,OAAO,EAAE,SAAS,cAAc,SAAS;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,SAAS,EAAE;AAAA,MACT,KAAK;AAET,QAAM,oBAAoB,sBAAsB,EAAE;AAClD,SACE,mDAAC,sBAAD;AAAA,IACE,aAAa,qBAAqB,EAAE;AAAA,IACpC;AAAA,IACA,WAAW,gBAAgB,EAAE;AAAA,IAC7B;AAAA,IACA,OAAO,eAAe,EAAE;AAAA,IACxB,gBAAgB,MAAM,aAAa;AAAA;AAAA;AAI3C,MAAM,OAAO,MAAM;AACZ,MAAM,mBAAmB,CAAC,OAY3B;AAZ2B,eAC/B;AAAA;AAAA,IACA;AAAA,IACA,iBAAiB,MAAM;AAAA,IACvB,uBAAuB;AAAA,IACvB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAV+B,IAW5B,iBAX4B,IAW5B;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SAAO,iCACF,OADE;AAAA,IAEL;AAAA,IACA;AAAA,IACA,MAAM;AAAA,MACJ,YAAY;AAAA,QACV,yBAAyB;AAAA,UACvB;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,IAIN,OAAO,SAAS;AAAA,IAChB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIJ,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/cjs/plugins/expandable-grid/ExpandablePlugin.js

@@ -0,0 +1,205 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ExpandablePlugin_exports = {};
+__export(ExpandablePlugin_exports, {
+  ExpandablePlugin: () => ExpandablePlugin
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_react_window = require("react-window");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = require("@elliemae/ds-button");
+var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_initColumnDefinition = require("@elliemae/ds-shared/useDataGrid/initColumnDefinition");
+var import_ExpandedRow = require("./ExpandedRow");
+var import_ExpandedRowExtra = require("./ExpandedRowExtra");
+var import_rowSizes = require("../../rowSizes");
+var import_useExpandGridState = require("./useExpandGridState");
+const getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) => isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
+const ExpandedRows = {
+  SingleColumn: import_ExpandedRow.ExpandedRow,
+  Master: import_ExpandedRowExtra.ExpandedRowExtra
+};
+const createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;
+const isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);
+const ExpandablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("expandable", {
+  registerStateHook: import_useExpandGridState.useExpandGridState,
+  decorateGrid(grid) {
+    const { decoratedColumns, columns } = grid.getInstance();
+    const detailColumns = (0, import_react.useMemo)(() => decoratedColumns.map((column) => __spreadProps(__spreadValues({}, column), {
+      customRenderer: column.detailCustomRenderer
+    })).filter((col) => !col.expandableColumn), [columns]);
+    return {
+      detailColumns
+    };
+  },
+  decorateColumns(columns, grid) {
+    if (isExpandableSingleColumn(columns))
+      return columns;
+    const firstColumnIndex = columns.findIndex((column) => column.isUserColumn);
+    const firstColumn = columns[firstColumnIndex];
+    firstColumn.formatExpandable = true;
+    return [
+      ...columns.slice(0, firstColumnIndex),
+      (0, import_initColumnDefinition.appendCellFormatter)((value, { isExpanded, rowData }) => {
+        const {
+          actions: { toggleExpand }
+        } = grid.getInstance();
+        return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+          buttonType: "text",
+          className: "expandable-arrow",
+          icon: isExpanded ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, null) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, null),
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleExpand(rowData);
+          },
+          size: "s"
+        }), value);
+      }, firstColumn),
+      ...columns.slice(firstColumnIndex + 1)
+    ];
+  },
+  getBodyProps(bodyProps, grid) {
+    const {
+      composedRows: rows,
+      props: {
+        rowKey,
+        getChildrenRows,
+        rowSize = "normal",
+        subrowSize = "normal",
+        getExpandedRowMinSize,
+        getExpandedRowSize,
+        expandableSubrowsVisible
+      },
+      state: { expandedRows }
+    } = grid.getInstance();
+    const rowSizePx = import_rowSizes.RowSizes[rowSize];
+    const subrowSizePx = import_rowSizes.RowSizes[subrowSize];
+    const listRef = (0, import_react.useRef)();
+    (0, import_react.useEffect)(() => {
+      if (listRef.current)
+        listRef.current.resetAfterIndex(0, true);
+    });
+    const getItemSize = (index) => {
+      const rowData = rows[index];
+      const key = rowData[rowKey];
+      const children = getChildrenRows({ rowData });
+      const expandedSize = getExpandedRowSize ? getExpandedRowSize(index, { rowData }) : getExpandedRowSizeBySubrows({
+        totalAmount: children.length,
+        amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,
+        isShowingAll: children.length < expandableSubrowsVisible || expandedRows[key] && expandedRows[key].showAllRows,
+        size: subrowSizePx
+      });
+      const expandedMinSize = (0, import_ds_utilities.isFunction)(getExpandedRowMinSize) && getExpandedRowMinSize(index);
+      return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
+    };
+    return __spreadProps(__spreadValues({}, bodyProps), {
+      className: (0, import_ds_utilities.cx)(bodyProps.className, "expandable"),
+      listComponent: import_react_window.VariableSizeList,
+      listProps: { ref: listRef, itemSize: getItemSize }
+    });
+  },
+  decorateRenderers(renderers, grid) {
+    const Row = renderers.body.row;
+    const Cell = renderers.body.cell;
+    renderers.body.row = (0, import_react.useMemo)(() => {
+      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? "SingleColumn" : "Master";
+      const ExpandedRowComponent = createExpandedRow(expandedRowType);
+      return (_a) => {
+        var _b = _a, { isExpanded } = _b, rowProps = __objRest(_b, ["isExpanded"]);
+        if (isExpanded) {
+          const {
+            props: { detailColumns, getChildrenRows, renderRowDetails },
+            composedRows
+          } = grid.getInstance();
+          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
+          return /* @__PURE__ */ import_react.default.createElement(ExpandedRowComponent, {
+            cellComponent: Cell,
+            detailColumns,
+            parentGrid: grid,
+            renderRowDetails,
+            rowComponent: Row,
+            rowData,
+            rowProps: __spreadValues({
+              rowData,
+              isExpanded
+            }, rowProps),
+            rows: getChildrenRows({ rowData })
+          }, rowProps.children);
+        }
+        return /* @__PURE__ */ import_react.default.createElement(Row, __spreadValues({}, rowProps));
+      };
+    }, []);
+    return renderers;
+  },
+  getRowProps(rowProps, grid, { rowData }) {
+    const {
+      props: { rowKey },
+      state: { expandedRows }
+    } = grid.getInstance();
+    const key = rowData[rowKey];
+    const isExpanded = !!expandedRows[key];
+    return __spreadProps(__spreadValues({}, rowProps), {
+      className: (0, import_ds_utilities.cx)(rowProps.className, Object.keys(expandedRows).length > 0 && "expandable-row", isExpanded && "expanded"),
+      isExpanded,
+      showAllRows: expandedRows[key] && expandedRows[key].showAllRows
+    });
+  }
+});
+module.exports = __toCommonJS(ExpandablePlugin_exports);
+//# sourceMappingURL=ExpandablePlugin.js.map

package/dist/cjs/plugins/expandable-grid/ExpandablePlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/expandable-grid/ExpandablePlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { cx, isFunction } from '@elliemae/ds-utilities';\nimport { VariableSizeList } from 'react-window';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { ExpandedRow } from './ExpandedRow';\nimport { ExpandedRowExtra } from './ExpandedRowExtra';\nimport { RowSizes } from '../../rowSizes';\nimport { useExpandGridState } from './useExpandGridState';\n\nconst getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) =>\n  isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;\n\nconst ExpandedRows = {\n  SingleColumn: ExpandedRow,\n  Master: ExpandedRowExtra,\n};\n\nconst createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;\n\nconst isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);\n\nexport const ExpandablePlugin = createInstancePlugin('expandable', {\n  registerStateHook: useExpandGridState,\n  decorateGrid(grid) {\n    const { decoratedColumns, columns } = grid.getInstance();\n    const detailColumns = useMemo(\n      () =>\n        decoratedColumns\n          .map((column) => ({\n            ...column,\n            customRenderer: column.detailCustomRenderer,\n          }))\n          .filter((col) => !col.expandableColumn),\n      [columns],\n    );\n    return {\n      detailColumns,\n    };\n  },\n\n  decorateColumns(columns, grid) {\n    if (isExpandableSingleColumn(columns)) return columns;\n    // get first column from user\n    const firstColumnIndex = columns.findIndex((column) => column.isUserColumn);\n    const firstColumn = columns[firstColumnIndex];\n    firstColumn.formatExpandable = true;\n\n    return [\n      ...columns.slice(0, firstColumnIndex),\n      appendCellFormatter((value, { isExpanded, rowData }) => {\n        const {\n          actions: { toggleExpand },\n        } = grid.getInstance();\n        /*\n         * should return only 2 elements ../custom-cell-renderer/addCustomRendererToCell.js\n         * getRenderer it's checking that length to apply the custom render to value only\n         */\n        return (\n          <>\n            <DSButton\n              buttonType=\"text\"\n              className=\"expandable-arrow\"\n              icon={isExpanded ? <ArrowheadDown /> : <ArrowheadRight />}\n              onClick={(e) => {\n                e.stopPropagation();\n                toggleExpand(rowData);\n              }}\n              size=\"s\"\n            />\n            {value}\n          </>\n        );\n      }, firstColumn),\n      ...columns.slice(firstColumnIndex + 1),\n    ];\n  },\n\n  getBodyProps(bodyProps, grid) {\n    const {\n      composedRows: rows,\n      props: {\n        rowKey,\n        getChildrenRows,\n        rowSize = 'normal',\n        subrowSize = 'normal',\n        getExpandedRowMinSize,\n        getExpandedRowSize,\n        expandableSubrowsVisible,\n      },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const rowSizePx = RowSizes[rowSize];\n    const subrowSizePx = RowSizes[subrowSize];\n    const listRef = useRef();\n\n    useEffect(() => {\n      if (listRef.current) listRef.current.resetAfterIndex(0, true);\n    });\n\n    // implementation of expandable row single column with aggregation\n    const getItemSize = (index) => {\n      const rowData = rows[index];\n      const key = rowData[rowKey];\n      const children = getChildrenRows({ rowData });\n\n      const expandedSize = getExpandedRowSize\n        ? getExpandedRowSize(index, { rowData }) // https://jira.elliemae.io/browse/PUI-1659\n        : getExpandedRowSizeBySubrows({\n            totalAmount: children.length,\n            amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,\n            isShowingAll:\n              children.length < expandableSubrowsVisible || (expandedRows[key] && expandedRows[key].showAllRows),\n            size: subrowSizePx,\n          });\n\n      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index);\n\n      // eslint-disable-next-line no-nested-ternary\n      return expandedRows[key] ? (expandedMinSize > expandedSize ? expandedMinSize : expandedSize) : rowSizePx;\n    };\n\n    return {\n      ...bodyProps,\n      className: cx(bodyProps.className, 'expandable'),\n      listComponent: VariableSizeList,\n      listProps: { ref: listRef, itemSize: getItemSize },\n    };\n  },\n\n  decorateRenderers(renderers, grid) {\n    const Row = renderers.body.row;\n    const Cell = renderers.body.cell;\n\n    // eslint-disable-next-line react/display-name\n    renderers.body.row = useMemo(() => {\n      // todo: the expandable grid should be created from another specific grid component\n      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';\n      const ExpandedRowComponent = createExpandedRow(expandedRowType);\n      // eslint-disable-next-line react/display-name\n      return ({ isExpanded, ...rowProps }) => {\n        if (isExpanded) {\n          const {\n            props: { detailColumns, getChildrenRows, renderRowDetails },\n            composedRows,\n          } = grid.getInstance();\n          // https://jira.elliemae.io/browse/PUI-1667\n          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;\n          return (\n            <ExpandedRowComponent\n              cellComponent={Cell}\n              detailColumns={detailColumns}\n              parentGrid={grid}\n              renderRowDetails={renderRowDetails}\n              rowComponent={Row}\n              rowData={rowData}\n              rowProps={{\n                rowData,\n                isExpanded,\n                ...rowProps,\n              }}\n              rows={getChildrenRows({ rowData })}\n            >\n              {rowProps.children}\n            </ExpandedRowComponent>\n          );\n        }\n        return <Row {...rowProps} />;\n      };\n    }, []);\n\n    return renderers;\n  },\n\n  getRowProps(rowProps, grid, { rowData }) {\n    const {\n      props: { rowKey },\n      state: { expandedRows },\n    } = grid.getInstance();\n    const key = rowData[rowKey];\n    const isExpanded = !!expandedRows[key];\n    return {\n      ...rowProps,\n      className: cx(\n        rowProps.className,\n        Object.keys(expandedRows).length > 0 && 'expandable-row',\n        isExpanded && 'expanded',\n      ),\n      isExpanded,\n      showAllRows: expandedRows[key] && expandedRows[key].showAllRows,\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/plugins/expandable-grid/ExpandedRow.js

@@ -0,0 +1,159 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ExpandedRow_exports = {};
+__export(ExpandedRow_exports, {
+  ExpandedRow: () => ExpandedRow,
+  default: () => ExpandedRow_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_separator = require("@elliemae/ds-separator");
+var import_ds_button = require("@elliemae/ds-button");
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_defer_render_hoc = require("@elliemae/ds-shared/defer-render-hoc");
+var import_useDataGrid = require("@elliemae/ds-shared/useDataGrid");
+var import_pagination = require("../pagination");
+var import_BodyCell = require("../../components/BodyCell");
+var import_renderers = require("../../components/renderers");
+var import_TableBody = require("../../components/TableBody");
+var import_Table = require("../../components/Table");
+var import_column_sizing = require("../column-sizing");
+const DetailGrid = (0, import_defer_render_hoc.deferComponentRender)(({ parentGrid, parentRowData, rows }) => {
+  const _a = parentGrid.props, { instanceRef } = _a, parentProps = __objRest(_a, ["instanceRef"]);
+  const grid = (0, import_useDataGrid.useDataGrid)(__spreadProps(__spreadValues({
+    uuid: parentGrid.getInstance().uuid
+  }, parentProps), {
+    columns: parentGrid.getInstance().decoratedColumns.filter((col) => !col.expandableColumn).map((c) => __spreadProps(__spreadValues({}, c), { expandableColumn: false })),
+    rows,
+    plugins: [import_column_sizing.ColumnSizingPlugin, import_pagination.PaginationPlugin],
+    renderers: import_renderers.defaultRenderers,
+    bindColumnsSizeTo: parentGrid.uuid,
+    numRowsVisible: "all",
+    paginated: true,
+    pagination: {
+      perPage: rows.length,
+      conditionalPagination: true
+    },
+    parentRowData
+  }));
+  return /* @__PURE__ */ import_react.default.createElement(import_Table.Table, __spreadValues({}, grid), /* @__PURE__ */ import_react.default.createElement(import_TableBody.TableBody, null));
+}, null);
+const DetailsWrapper = import_styled_components.default.span`
+  flex: 1;
+  width: ${(props) => props.width}px;
+`;
+const DetailGridWrapper = import_styled_components.default.div`
+  display: flex;
+  height: calc(100% - ${(props) => props.allRowsVisible ? 18 : 60}px);
+  width: ${(props) => props.expandableGridDetailWidth}px;
+  margin: 12px 0;
+`;
+function ExpandedRow({
+  parentGrid,
+  detailColumns,
+  rowData,
+  rows,
+  rowProps,
+  cellComponent: CellComponent,
+  rowComponent: RowComponent
+}) {
+  const {
+    decoratedColumns,
+    actions: { toggleShowAllRows },
+    state: { expandedRows },
+    props: {
+      rowKey,
+      showMoreRowsText = "SHOW ALL ROWS",
+      showLessRowsText = "SHOW LESS ROWS",
+      expandableSubrowsVisible
+    },
+    columnSizeService: { expandableGridDetailWidth }
+  } = parentGrid.getInstance();
+  const _a = rowProps, { showAllRows } = _a, restRowProps = __objRest(_a, ["showAllRows"]);
+  return /* @__PURE__ */ import_react.default.createElement(RowComponent, __spreadValues({}, restRowProps), /* @__PURE__ */ import_react.default.createElement(import_BodyCell.BodyCell, {
+    column: decoratedColumns[0],
+    columnIndex: 0,
+    component: CellComponent,
+    grid: parentGrid,
+    rowProps: __spreadValues({ rowData }, rowProps)
+  }), /* @__PURE__ */ import_react.default.createElement(DetailsWrapper, {
+    width: expandableGridDetailWidth
+  }, /* @__PURE__ */ import_react.default.createElement(DetailGridWrapper, {
+    allRowsVisible: rows.length < expandableSubrowsVisible || (0, import_ds_utilities.get)(expandedRows, [rowKey, "showAllRows"]),
+    expandableGridDetailWidth
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_separator.DSSeparator, {
+    dashed: true,
+    orientation: "vertical"
+  }), /* @__PURE__ */ import_react.default.createElement(DetailGrid, {
+    detailColumns,
+    parentGrid: parentGrid.getInstance(),
+    parentRowData: rowData,
+    rows: showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)
+  })), rows.length > expandableSubrowsVisible && /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButton, {
+    buttonType: "text",
+    labelText: showAllRows ? showLessRowsText : showMoreRowsText,
+    onClick: (e) => {
+      e.stopPropagation();
+      toggleShowAllRows(rowData);
+    },
+    style: { marginBottom: "10px" }
+  })));
+}
+var ExpandedRow_default = ExpandedRow;
+module.exports = __toCommonJS(ExpandedRow_exports);
+//# sourceMappingURL=ExpandedRow.js.map

package/dist/cjs/plugins/expandable-grid/ExpandedRow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugins/expandable-grid/ExpandedRow.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { DSSeparator } from '@elliemae/ds-separator';\nimport { DSButton } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport { get } from '@elliemae/ds-utilities';\nimport { deferComponentRender } from '@elliemae/ds-shared/defer-render-hoc';\nimport { useDataGrid } from '@elliemae/ds-shared/useDataGrid';\nimport { PaginationPlugin } from '../pagination';\nimport { BodyCell } from '../../components/BodyCell';\nimport { defaultRenderers } from '../../components/renderers';\nimport { TableBody } from '../../components/TableBody';\nimport { Table } from '../../components/Table';\nimport { ColumnSizingPlugin } from '../column-sizing';\n\nconst DetailGrid = deferComponentRender(({ parentGrid, parentRowData, rows }) => {\n  const { instanceRef, ...parentProps } = parentGrid.props;\n  const grid = useDataGrid({\n    uuid: parentGrid.getInstance().uuid,\n    ...parentProps,\n    columns: parentGrid\n      .getInstance()\n      .decoratedColumns.filter((col) => !col.expandableColumn)\n      .map((c) => ({ ...c, expandableColumn: false })),\n    rows,\n    plugins: [ColumnSizingPlugin, PaginationPlugin],\n    renderers: defaultRenderers,\n    bindColumnsSizeTo: parentGrid.uuid,\n    numRowsVisible: 'all',\n    paginated: true,\n    pagination: {\n      perPage: rows.length,\n      conditionalPagination: true,\n    },\n    parentRowData,\n  });\n\n  return (\n    <Table {...grid}>\n      <TableBody />\n    </Table>\n  );\n}, null);\n\nconst DetailsWrapper = styled.span`\n  flex: 1;\n  width: ${(props) => props.width}px;\n`;\n\nconst DetailGridWrapper = styled.div`\n  display: flex;\n  height: calc(100% - ${(props) => (props.allRowsVisible ? 18 : 60)}px);\n  width: ${(props) => props.expandableGridDetailWidth}px;\n  margin: 12px 0;\n`;\n\nfunction ExpandedRow({\n  parentGrid,\n  detailColumns,\n  rowData,\n  rows,\n  rowProps,\n  cellComponent: CellComponent,\n  rowComponent: RowComponent,\n}) {\n  const {\n    decoratedColumns,\n    actions: { toggleShowAllRows },\n    state: { expandedRows },\n    props: {\n      rowKey,\n      showMoreRowsText = 'SHOW ALL ROWS',\n      showLessRowsText = 'SHOW LESS ROWS',\n      expandableSubrowsVisible,\n    },\n    columnSizeService: { expandableGridDetailWidth },\n  } = parentGrid.getInstance();\n\n  const { showAllRows, ...restRowProps } = rowProps;\n  return (\n    <RowComponent {...restRowProps}>\n      <BodyCell\n        column={decoratedColumns[0]}\n        columnIndex={0}\n        component={CellComponent}\n        grid={parentGrid}\n        rowProps={{ rowData, ...rowProps }}\n      />\n      <DetailsWrapper width={expandableGridDetailWidth}>\n        <DetailGridWrapper\n          allRowsVisible={rows.length < expandableSubrowsVisible || get(expandedRows, [rowKey, 'showAllRows'])}\n          expandableGridDetailWidth={expandableGridDetailWidth}\n        >\n          <DSSeparator dashed orientation=\"vertical\" />\n          <DetailGrid\n            detailColumns={detailColumns}\n            parentGrid={parentGrid.getInstance()}\n            parentRowData={rowData}\n            rows={showAllRows ? rows : (rows || []).slice(0, expandableSubrowsVisible)}\n          />\n        </DetailGridWrapper>\n        {rows.length > expandableSubrowsVisible && (\n          <DSButton\n            buttonType=\"text\"\n            labelText={showAllRows ? showLessRowsText : showMoreRowsText}\n            onClick={(e) => {\n              e.stopPropagation();\n              toggleShowAllRows(rowData);\n            }}\n            style={{ marginBottom: '10px' }}\n          />\n        )}\n      </DetailsWrapper>\n    </RowComponent>\n  );\n}\n\nexport { ExpandedRow };\nexport default ExpandedRow;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAkB;AAClB,0BAA4B;AAC5B,uBAAyB;AACzB,+BAAmB;AACnB,0BAAoB;AACpB,8BAAqC;AACrC,yBAA4B;AAC5B,wBAAiC;AACjC,sBAAyB;AACzB,uBAAiC;AACjC,uBAA0B;AAC1B,mBAAsB;AACtB,2BAAmC;AAEnC,MAAM,aAAa,kDAAqB,CAAC,EAAE,YAAY,eAAe,WAAW;AAC/E,QAAwC,gBAAW,OAA3C,kBAAgC,IAAhB,wBAAgB,IAAhB,CAAhB;AACR,QAAM,OAAO,oCAAY;AAAA,IACvB,MAAM,WAAW,cAAc;AAAA,KAC5B,cAFoB;AAAA,IAGvB,SAAS,WACN,cACA,iBAAiB,OAAO,CAAC,QAAQ,CAAC,IAAI,kBACtC,IAAI,CAAC,MAAO,iCAAK,IAAL,EAAQ,kBAAkB;AAAA,IACzC;AAAA,IACA,SAAS,CAAC,yCAAoB;AAAA,IAC9B,WAAW;AAAA,IACX,mBAAmB,WAAW;AAAA,IAC9B,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,MACV,SAAS,KAAK;AAAA,MACd,uBAAuB;AAAA;AAAA,IAEzB;AAAA;AAGF,SACE,mDAAC,oBAAD,mBAAW,OACT,mDAAC,4BAAD;AAAA,GAGH;AAEH,MAAM,iBAAiB,iCAAO;AAAA;AAAA,WAEnB,CAAC,UAAU,MAAM;AAAA;AAG5B,MAAM,oBAAoB,iCAAO;AAAA;AAAA,wBAET,CAAC,UAAW,MAAM,iBAAiB,KAAK;AAAA,WACrD,CAAC,UAAU,MAAM;AAAA;AAAA;AAI5B,qBAAqB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,GACb;AACD,QAAM;AAAA,IACJ;AAAA,IACA,SAAS,EAAE;AAAA,IACX,OAAO,EAAE;AAAA,IACT,OAAO;AAAA,MACL;AAAA,MACA,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB;AAAA;AAAA,IAEF,mBAAmB,EAAE;AAAA,MACnB,WAAW;AAEf,QAAyC,eAAjC,kBAAiC,IAAjB,yBAAiB,IAAjB,CAAhB;AACR,SACE,mDAAC,cAAD,mBAAkB,eAChB,mDAAC,0BAAD;AAAA,IACE,QAAQ,iBAAiB;AAAA,IACzB,aAAa;AAAA,IACb,WAAW;AAAA,IACX,MAAM;AAAA,IACN,UAAU,iBAAE,WAAY;AAAA,MAE1B,mDAAC,gBAAD;AAAA,IAAgB,OAAO;AAAA,KACrB,mDAAC,mBAAD;AAAA,IACE,gBAAgB,KAAK,SAAS,4BAA4B,6BAAI,cAAc,CAAC,QAAQ;AAAA,IACrF;AAAA,KAEA,mDAAC,iCAAD;AAAA,IAAa,QAAM;AAAA,IAAC,aAAY;AAAA,MAChC,mDAAC,YAAD;AAAA,IACE;AAAA,IACA,YAAY,WAAW;AAAA,IACvB,eAAe;AAAA,IACf,MAAM,cAAc,OAAQ,SAAQ,IAAI,MAAM,GAAG;AAAA,OAGpD,KAAK,SAAS,4BACb,mDAAC,2BAAD;AAAA,IACE,YAAW;AAAA,IACX,WAAW,cAAc,mBAAmB;AAAA,IAC5C,SAAS,CAAC,MAAM;AACd,QAAE;AACF,wBAAkB;AAAA;AAAA,IAEpB,OAAO,EAAE,cAAc;AAAA;AAAA;AASnC,IAAO,sBAAQ;",
+  "names": []
+}