@elliemae/ds-legacy-datagrids 1.0.0-rc.1

package/dist/esm/plugins/editable/EditableComponents/ComboBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/editable/EditableComponents/ComboBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component } from 'react';\nimport { DSComboBox } from '@elliemae/ds-legacy-form';\n\nclass ComboBox extends Component {\n  static defaultProps = {\n    onValue: () => null,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = { value: props.value };\n  }\n\n  handleChange = (value) => {\n    const { onValue } = this.props;\n\n    // some how this is executed before handleBlur, and handleBlur before the value is set\n    // causing the value to be the same as the prevProp\n    // todo: find a better solution to this\n    setTimeout(() => onValue(value), 1);\n    this.setState({ value });\n  };\n\n  handleBlur = () => {\n    const { onValue } = this.props;\n    const { value } = this.state;\n    onValue(value);\n  };\n\n  render() {\n    const { value } = this.state;\n    return (\n      <DSComboBox\n        {...this.props}\n        menuIsOpen\n        onBlur={this.handleBlur}\n        onChange={this.handleChange}\n        onClick={(e) => e.stopPropagation()}\n        value={value}\n      />\n    );\n  }\n}\n\nexport { ComboBox };\nexport default ComboBox;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCjB;AAhCN,SAAgB,iBAAiB;AACjC,SAAS,kBAAkB;AAE3B,MAAM,iBAAiB,UAAU;AAAA,EAK/B,YAAY,OAAO;AACjB,UAAM,KAAK;AAIb,wBAAe,CAAC,UAAU;AACxB,YAAM,EAAE,QAAQ,IAAI,KAAK;AAKzB,iBAAW,MAAM,QAAQ,KAAK,GAAG,CAAC;AAClC,WAAK,SAAS,EAAE,MAAM,CAAC;AAAA,IACzB;AAEA,sBAAa,MAAM;AACjB,YAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,YAAM,EAAE,MAAM,IAAI,KAAK;AACvB,cAAQ,KAAK;AAAA,IACf;AAjBE,SAAK,QAAQ,EAAE,OAAO,MAAM,MAAM;AAAA,EACpC;AAAA,EAkBA,SAAS;AACP,UAAM,EAAE,MAAM,IAAI,KAAK;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,KAAK;AAAA,QACT,YAAU;AAAA,QACV,QAAQ,KAAK;AAAA,QACb,UAAU,KAAK;AAAA,QACf,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAvCM,SACG,eAAe;AAAA,EACpB,SAAS,MAAM;AACjB;AAuCF,IAAO,mBAAQ;",
+  "names": []
+}

package/dist/esm/plugins/editable/EditableComponents/TextBox.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { Component } from "react";
+import { DSTextBox } from "@elliemae/ds-legacy-form";
+class TextBox extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyUp = ({ key, target: { value } }) => {
+      const { onValue } = this.props;
+      if (key === "Enter") {
+        onValue(value);
+      }
+    };
+    this.handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+      }
+    };
+    this.handleBlur = (e) => {
+      const { onValue } = this.props;
+      const {
+        target: { value }
+      } = e;
+      onValue(value);
+    };
+    this.handleChange = ({ target: { value } }) => {
+      this.setState({ value });
+    };
+    this.inputRef = React2.createRef();
+    this.state = { value: props.value };
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      if (this.inputRef && this.inputRef.current) {
+        this.inputRef.current.focus();
+      }
+    }, 50);
+  }
+  render() {
+    const { value } = this.state;
+    return /* @__PURE__ */ jsx(
+      DSTextBox,
+      {
+        "data-testid": "ds-datagrids-editable-text-box",
+        ...this.props,
+        innerRef: this.inputRef,
+        onBlur: this.handleBlur,
+        onChange: this.handleChange,
+        onClick: (e) => e.stopPropagation(),
+        onKeyUp: this.handleKeyUp,
+        onKeyDown: this.handleKeyDown,
+        value
+      }
+    );
+  }
+}
+TextBox.defaultProps = {
+  onValue: () => null
+};
+var TextBox_default = TextBox;
+export {
+  TextBox,
+  TextBox_default as default
+};
+//# sourceMappingURL=TextBox.js.map

package/dist/esm/plugins/editable/EditableComponents/TextBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/editable/EditableComponents/TextBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable react/static-property-placement */\nimport React, { Component } from 'react';\nimport { DSTextBox } from '@elliemae/ds-legacy-form';\n\n// todo: redo with hooks\nclass TextBox extends Component {\n  static defaultProps = {\n    onValue: () => null,\n  };\n\n  constructor(props) {\n    super(props);\n    this.inputRef = React.createRef();\n    this.state = { value: props.value };\n  }\n\n  componentDidMount() {\n    setTimeout(() => {\n      if (this.inputRef && this.inputRef.current) {\n        this.inputRef.current.focus();\n      }\n    }, 50);\n  }\n\n  handleKeyUp = ({ key, target: { value } }) => {\n    const { onValue } = this.props;\n    if (key === 'Enter') {\n      onValue(value);\n    }\n  };\n\n  handleKeyDown = (e) => {\n    // PUI-2553 prevent form submit on `Enter` keypress\n    if (e.key === 'Enter') {\n      e.preventDefault();\n    }\n  };\n\n  handleBlur = (e) => {\n    const { onValue } = this.props;\n    const {\n      target: { value },\n    } = e;\n    onValue(value);\n  };\n\n  handleChange = ({ target: { value } }) => {\n    this.setState({ value });\n  };\n\n  render() {\n    const { value } = this.state;\n    return (\n      <DSTextBox\n        data-testid=\"ds-datagrids-editable-text-box\"\n        {...this.props}\n        innerRef={this.inputRef}\n        onBlur={this.handleBlur}\n        onChange={this.handleChange}\n        onClick={(e) => e.stopPropagation()}\n        onKeyUp={this.handleKeyUp}\n        onKeyDown={this.handleKeyDown}\n        value={value}\n      />\n    );\n  }\n}\n\nexport { TextBox };\nexport default TextBox;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDjB;AApDN,OAAOA,UAAS,iBAAiB;AACjC,SAAS,iBAAiB;AAG1B,MAAM,gBAAgB,UAAU;AAAA,EAK9B,YAAY,OAAO;AACjB,UAAM,KAAK;AAab,uBAAc,CAAC,EAAE,KAAK,QAAQ,EAAE,MAAM,EAAE,MAAM;AAC5C,YAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,UAAI,QAAQ,SAAS;AACnB,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,yBAAgB,CAAC,MAAM;AAErB,UAAI,EAAE,QAAQ,SAAS;AACrB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAEA,sBAAa,CAAC,MAAM;AAClB,YAAM,EAAE,QAAQ,IAAI,KAAK;AACzB,YAAM;AAAA,QACJ,QAAQ,EAAE,MAAM;AAAA,MAClB,IAAI;AACJ,cAAQ,KAAK;AAAA,IACf;AAEA,wBAAe,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM;AACxC,WAAK,SAAS,EAAE,MAAM,CAAC;AAAA,IACzB;AApCE,SAAK,WAAWA,OAAM,UAAU;AAChC,SAAK,QAAQ,EAAE,OAAO,MAAM,MAAM;AAAA,EACpC;AAAA,EAEA,oBAAoB;AAClB,eAAW,MAAM;AACf,UAAI,KAAK,YAAY,KAAK,SAAS,SAAS;AAC1C,aAAK,SAAS,QAAQ,MAAM;AAAA,MAC9B;AAAA,IACF,GAAG,EAAE;AAAA,EACP;AAAA,EA4BA,SAAS;AACP,UAAM,EAAE,MAAM,IAAI,KAAK;AACvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACX,GAAG,KAAK;AAAA,QACT,UAAU,KAAK;AAAA,QACf,QAAQ,KAAK;AAAA,QACb,UAAU,KAAK;AAAA,QACf,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,SAAS,KAAK;AAAA,QACd,WAAW,KAAK;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AA7DM,QACG,eAAe;AAAA,EACpB,SAAS,MAAM;AACjB;AA6DF,IAAO,kBAAQ;",
+  "names": ["React"]
+}

package/dist/esm/plugins/editable/EditableComponents/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { default as default2 } from "./ComboBox.js";
+import { default as default3 } from "./TextBox.js";
+export {
+  default2 as ComboBox,
+  default3 as TextBox
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/editable/EditableComponents/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/editable/EditableComponents/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as ComboBox } from './ComboBox.js';\nexport { default as TextBox } from './TextBox.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAoB,WAAXA,gBAA2B;AACpC,SAAoB,WAAXA,gBAA0B;",
+  "names": ["default"]
+}

package/dist/esm/plugins/editable/EditablePlugin.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { useDerivedStateFromProps, toggleInObject } from "@elliemae/ds-legacy-utilities";
+import { createInstancePlugin } from "@elliemae/ds-legacy-shared";
+import { addEditableToCell, makeEditableConfig } from "./decorateEditable.js";
+const registerStateHook = (grid) => {
+  const { rowKey = "id", editingRows: editingRowsProp, onColumnRowEdited, onColumnRowEdit } = grid.props;
+  const [editingRows, setEditingRows] = useDerivedStateFromProps(editingRowsProp || {});
+  const activateEdit = (editParams) => {
+    const { shouldRefocus } = grid.getInstance();
+    const { rowData, columnIndex } = editParams;
+    shouldRefocus.current = { forced: true, value: false };
+    setEditingRows((prevEditingRows) => {
+      onColumnRowEdit(editParams);
+      return toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
+    });
+  };
+  const editValue = ({ value, rowData, property, rowIndex }) => {
+    setEditingRows({});
+    onColumnRowEdited({
+      value,
+      rowData,
+      property,
+      rowIndex
+    });
+  };
+  return {
+    state: { editingRows },
+    actions: {
+      activateEdit,
+      editValue
+    }
+  };
+};
+const decorateColumn = (column, grid) => {
+  const {
+    props: { isColumnEditable = (col) => col.editable, customHandlers }
+  } = grid;
+  const editableConfig = makeEditableConfig(grid);
+  return isColumnEditable(column) ? addEditableToCell(
+    {
+      column,
+      config: editableConfig,
+      handlers: customHandlers
+    },
+    grid
+  ) : column;
+};
+const EditablePlugin = createInstancePlugin("editable", {
+  registerStateHook,
+  decorateColumn,
+  registerHotKeys(grid) {
+    return {
+      key: "enter",
+      handler: ({ rowIndex, cellIndex }) => {
+        const {
+          composedRows,
+          decoratedColumns,
+          actions: { activateEdit },
+          props: { isColumnEditable }
+        } = grid.getInstance();
+        if (!isColumnEditable(decoratedColumns[cellIndex]))
+          return;
+        const rows = composedRows.rows || composedRows;
+        const row = rows[rowIndex];
+        if (!row)
+          return;
+        activateEdit({
+          rowData: row,
+          columnIndex: cellIndex
+        });
+      },
+      options: {
+        keydown: false,
+        keyup: true
+      }
+    };
+  }
+});
+export {
+  EditablePlugin
+};
+//# sourceMappingURL=EditablePlugin.js.map

package/dist/esm/plugins/editable/EditablePlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/editable/EditablePlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useDerivedStateFromProps, toggleInObject } from '@elliemae/ds-legacy-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-legacy-shared';\nimport { addEditableToCell, makeEditableConfig } from './decorateEditable.js';\n\nconst registerStateHook = (grid) => {\n  const { rowKey = 'id', editingRows: editingRowsProp, onColumnRowEdited, onColumnRowEdit } = grid.props;\n  const [editingRows, setEditingRows] = useDerivedStateFromProps(editingRowsProp || {});\n\n  const activateEdit = (editParams) => {\n    const { shouldRefocus } = grid.getInstance();\n    const { rowData, columnIndex } = editParams;\n    shouldRefocus.current = { forced: true, value: false };\n    setEditingRows((prevEditingRows) => {\n      onColumnRowEdit(editParams);\n      return toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);\n    });\n  };\n\n  const editValue = ({ value, rowData, property, rowIndex }) => {\n    setEditingRows({});\n    onColumnRowEdited({\n      value,\n      rowData,\n      property,\n      rowIndex,\n    });\n  };\n\n  return {\n    state: { editingRows },\n    actions: {\n      activateEdit,\n      editValue,\n    },\n  };\n};\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isColumnEditable = (col) => col.editable, customHandlers },\n  } = grid;\n\n  const editableConfig = makeEditableConfig(grid);\n\n  return isColumnEditable(column)\n    ? addEditableToCell(\n        {\n          column,\n          config: editableConfig,\n          handlers: customHandlers,\n        },\n        grid,\n      )\n    : column;\n};\n\nexport const EditablePlugin = createInstancePlugin('editable', {\n  registerStateHook,\n  decorateColumn,\n  registerHotKeys(grid) {\n    return {\n      key: 'enter',\n      handler: ({ rowIndex, cellIndex }) => {\n        const {\n          composedRows,\n          decoratedColumns,\n          actions: { activateEdit },\n          props: { isColumnEditable },\n        } = grid.getInstance();\n\n        if (!isColumnEditable(decoratedColumns[cellIndex])) return;\n\n        const rows = composedRows.rows || composedRows;\n        const row = rows[rowIndex];\n        if (!row) return;\n\n        activateEdit({\n          rowData: row,\n          columnIndex: cellIndex,\n        });\n      },\n      options: {\n        keydown: false,\n        keyup: true,\n      },\n    };\n  },\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,0BAA0B,sBAAsB;AACzD,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,0BAA0B;AAEtD,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM,EAAE,SAAS,MAAM,aAAa,iBAAiB,mBAAmB,gBAAgB,IAAI,KAAK;AACjG,QAAM,CAAC,aAAa,cAAc,IAAI,yBAAyB,mBAAmB,CAAC,CAAC;AAEpF,QAAM,eAAe,CAAC,eAAe;AACnC,UAAM,EAAE,cAAc,IAAI,KAAK,YAAY;AAC3C,UAAM,EAAE,SAAS,YAAY,IAAI;AACjC,kBAAc,UAAU,EAAE,QAAQ,MAAM,OAAO,MAAM;AACrD,mBAAe,CAAC,oBAAoB;AAClC,sBAAgB,UAAU;AAC1B,aAAO,eAAe,iBAAiB,QAAQ,MAAM,GAAG,WAAW;AAAA,IACrE,CAAC;AAAA,EACH;AAEA,QAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,SAAS,MAAM;AAC5D,mBAAe,CAAC,CAAC;AACjB,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,YAAY;AAAA,IACrB,SAAS;AAAA,MACP;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,CAAC,QAAQ,IAAI,UAAU,eAAe;AAAA,EACpE,IAAI;AAEJ,QAAM,iBAAiB,mBAAmB,IAAI;AAE9C,SAAO,iBAAiB,MAAM,IAC1B;AAAA,IACE;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IACA;AACN;AAEO,MAAM,iBAAiB,qBAAqB,YAAY;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,UAAU,UAAU,MAAM;AACpC,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA,SAAS,EAAE,aAAa;AAAA,UACxB,OAAO,EAAE,iBAAiB;AAAA,QAC5B,IAAI,KAAK,YAAY;AAErB,YAAI,CAAC,iBAAiB,iBAAiB,SAAS,CAAC;AAAG;AAEpD,cAAM,OAAO,aAAa,QAAQ;AAClC,cAAM,MAAM,KAAK,QAAQ;AACzB,YAAI,CAAC;AAAK;AAEV,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,aAAa;AAAA,QACf,CAAC;AAAA,MACH;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "names": []
+}

package/dist/esm/plugins/editable/decorateEditable.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as edit from "react-edit";
+import { EditPencil } from "@elliemae/ds-legacy-icons";
+import { cx } from "@elliemae/ds-legacy-utilities";
+import { appendCellFormatter } from "@elliemae/ds-legacy-shared";
+import { getEditorComponent } from "./getEditorComponent.js";
+const makeEditableConfig = (grid) => edit.edit({
+  isEditing: ({ columnIndex, rowData, column = {}, ...rest }) => {
+    const {
+      state: { editingRows },
+      props: { rowKey }
+    } = grid.getInstance();
+    let isCustomEditing;
+    if (typeof column.isEditing === "function") {
+      isCustomEditing = column.isEditing({
+        columnIndex,
+        rowData,
+        column,
+        ...rest
+      });
+    }
+    return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;
+  },
+  onActivate: () => null,
+  onValue: (...args) => grid.getInstance().actions.editValue(...args)
+});
+const addEditableToCell = ({ column, config, handlers }, grid) => {
+  column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));
+  column.cell.props.className = cx(
+    column.cell.props.className,
+    `editable${column.customEditor ? " customEditor" : ""}`
+  );
+  return appendCellFormatter(
+    [
+      (value, extraParams) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            grid.getInstance().actions.activateEdit(extraParams);
+          },
+          onKeyUp: (e) => {
+            e.stopPropagation();
+            if (e.keyCode === 33) {
+              grid.getInstance().actions.activateEdit(extraParams);
+            }
+          },
+          role: "gridcell",
+          tabIndex: 0,
+          children: [
+            value,
+            /* @__PURE__ */ jsx(EditPencil, { className: "edit-pencil" }),
+            /* @__PURE__ */ jsx("span", { className: "edit-separator", children: " " })
+          ]
+        }
+      ) })
+    ],
+    column
+  );
+};
+export {
+  addEditableToCell,
+  makeEditableConfig
+};
+//# sourceMappingURL=decorateEditable.js.map

package/dist/esm/plugins/editable/decorateEditable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/editable/decorateEditable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport * as edit from 'react-edit';\nimport { EditPencil } from '@elliemae/ds-legacy-icons';\nimport { cx } from '@elliemae/ds-legacy-utilities';\nimport { appendCellFormatter } from '@elliemae/ds-legacy-shared';\nimport { getEditorComponent } from './getEditorComponent.js';\n\nconst makeEditableConfig = (grid) =>\n  edit.edit({\n    isEditing: ({ columnIndex, rowData, column = {}, ...rest }) => {\n      const {\n        state: { editingRows },\n        props: { rowKey },\n      } = grid.getInstance();\n      let isCustomEditing;\n\n      if (typeof column.isEditing === 'function') {\n        isCustomEditing = column.isEditing({\n          columnIndex,\n          rowData,\n          column,\n          ...rest,\n        });\n      }\n      return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;\n    },\n    onActivate: () => null,\n    onValue: (...args) => grid.getInstance().actions.editValue(...args),\n  });\nconst addEditableToCell = ({ column, config, handlers }, grid) => {\n  column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));\n  column.cell.props.className = cx(\n    column.cell.props.className,\n    `editable${column.customEditor ? ' customEditor' : ''}`,\n  );\n  return appendCellFormatter(\n    [\n      (value, extraParams) => (\n        <>\n          <div\n            onClick={(e) => {\n              e.stopPropagation();\n              grid.getInstance().actions.activateEdit(extraParams);\n            }}\n            onKeyUp={(e) => {\n              e.stopPropagation();\n              if (e.keyCode === 33) {\n                grid.getInstance().actions.activateEdit(extraParams);\n              }\n            }}\n            role=\"gridcell\"\n            tabIndex={0}\n          >\n            {value}\n            <EditPencil className=\"edit-pencil\" />\n            <span className=\"edit-separator\"> </span>\n          </div>\n        </>\n      ),\n    ],\n    column,\n  );\n};\n\nexport { makeEditableConfig, addEditableToCell };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCf,mBAgBI,KAfF,YADF;AArCR,YAAY,UAAU;AACtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAEnC,MAAM,qBAAqB,CAAC,SAC1B,KAAK,KAAK;AAAA,EACR,WAAW,CAAC,EAAE,aAAa,SAAS,SAAS,CAAC,GAAG,GAAG,KAAK,MAAM;AAC7D,UAAM;AAAA,MACJ,OAAO,EAAE,YAAY;AAAA,MACrB,OAAO,EAAE,OAAO;AAAA,IAClB,IAAI,KAAK,YAAY;AACrB,QAAI;AAEJ,QAAI,OAAO,OAAO,cAAc,YAAY;AAC1C,wBAAkB,OAAO,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,CAAC;AAAA,IACH;AACA,WAAO,YAAY,QAAQ,MAAM,CAAC,MAAM,eAAe,OAAO,iBAAiB;AAAA,EACjF;AAAA,EACA,YAAY,MAAM;AAAA,EAClB,SAAS,IAAI,SAAS,KAAK,YAAY,EAAE,QAAQ,UAAU,GAAG,IAAI;AACpE,CAAC;AACH,MAAM,oBAAoB,CAAC,EAAE,QAAQ,QAAQ,SAAS,GAAG,SAAS;AAChE,SAAO,KAAK,WAAW,KAAK,OAAO,mBAAmB,OAAO,cAAc,QAAQ,CAAC,CAAC;AACrF,SAAO,KAAK,MAAM,YAAY;AAAA,IAC5B,OAAO,KAAK,MAAM;AAAA,IAClB,WAAW,OAAO,eAAe,kBAAkB;AAAA,EACrD;AACA,SAAO;AAAA,IACL;AAAA,MACE,CAAC,OAAO,gBACN,gCACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,iBAAK,YAAY,EAAE,QAAQ,aAAa,WAAW;AAAA,UACrD;AAAA,UACA,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,gBAAI,EAAE,YAAY,IAAI;AACpB,mBAAK,YAAY,EAAE,QAAQ,aAAa,WAAW;AAAA,YACrD;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACL,UAAU;AAAA,UAET;AAAA;AAAA,YACD,oBAAC,cAAW,WAAU,eAAc;AAAA,YACpC,oBAAC,UAAK,WAAU,kBAAiB,eAAC;AAAA;AAAA;AAAA,MACpC,GACF;AAAA,IAEJ;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/plugins/editable/getEditorComponent.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ComboBox, TextBox } from "./EditableComponents/index.js";
+const components = {
+  DSComboBox: ComboBox,
+  DSTextBox: TextBox
+};
+const getEditorComponent = (editorComponent = {}, handlers) => ({ value, onValue, extraParameters }) => {
+  if (typeof editorComponent === "function") {
+    return editorComponent({
+      value,
+      onValue,
+      customHandlers: handlers,
+      ...extraParameters
+    });
+  }
+  const { type = "DSTextBox", ...restEditorProps } = editorComponent;
+  const Component = components[type];
+  if (type === "DSComboBox") {
+    const maxOptions = restEditorProps?.options?.length || 100;
+    return /* @__PURE__ */ jsx("div", { style: { zIndex: 0 }, children: /* @__PURE__ */ jsx(Component, { autoFocus: true, onValue, value, maxOptions, ...restEditorProps }) });
+  }
+  return /* @__PURE__ */ jsx(Component, { autoFocus: true, onValue, value, ...restEditorProps });
+};
+var getEditorComponent_default = getEditorComponent;
+export {
+  getEditorComponent_default as default,
+  getEditorComponent
+};
+//# sourceMappingURL=getEditorComponent.js.map

package/dist/esm/plugins/editable/getEditorComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/editable/getEditorComponent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/display-name */\nimport React from 'react';\nimport { ComboBox, TextBox } from './EditableComponents/index.js';\n\nconst components = {\n  DSComboBox: ComboBox,\n  DSTextBox: TextBox,\n};\n\nconst getEditorComponent =\n  (editorComponent = {}, handlers) =>\n    ({ value, onValue, extraParameters }) => {\n      if (typeof editorComponent === 'function') {\n        return editorComponent({\n          value,\n          onValue,\n          customHandlers: handlers,\n          ...extraParameters,\n        });\n      }\n\n      const { type = 'DSTextBox', ...restEditorProps } = editorComponent;\n      const Component = components[type];\n\n      if (type === 'DSComboBox') {\n      // TODO: remove this whole condition when combobox v3 is out and fully working without \"maxOptions\" parameter\n        const maxOptions = restEditorProps?.options?.length || 100;\n        return (\n          <div style={{ zIndex: 0 }}>\n            <Component autoFocus onValue={onValue} value={value} maxOptions={maxOptions} {...restEditorProps} />\n          </div>\n        );\n      }\n\n      return <Component autoFocus onValue={onValue} value={value} {...restEditorProps} />;\n    };\n\nexport { getEditorComponent };\nexport default getEditorComponent;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BX;AA3BZ,SAAS,UAAU,eAAe;AAElC,MAAM,aAAa;AAAA,EACjB,YAAY;AAAA,EACZ,WAAW;AACb;AAEA,MAAM,qBACJ,CAAC,kBAAkB,CAAC,GAAG,aACrB,CAAC,EAAE,OAAO,SAAS,gBAAgB,MAAM;AACvC,MAAI,OAAO,oBAAoB,YAAY;AACzC,WAAO,gBAAgB;AAAA,MACrB;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAEA,QAAM,EAAE,OAAO,aAAa,GAAG,gBAAgB,IAAI;AACnD,QAAM,YAAY,WAAW,IAAI;AAEjC,MAAI,SAAS,cAAc;AAEzB,UAAM,aAAa,iBAAiB,SAAS,UAAU;AACvD,WACE,oBAAC,SAAI,OAAO,EAAE,QAAQ,EAAE,GACtB,8BAAC,aAAU,WAAS,MAAC,SAAkB,OAAc,YAAyB,GAAG,iBAAiB,GACpG;AAAA,EAEJ;AAEA,SAAO,oBAAC,aAAU,WAAS,MAAC,SAAkB,OAAe,GAAG,iBAAiB;AACnF;AAGJ,IAAO,6BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { EditablePlugin } from "./EditablePlugin.js";
+import { ComboBox, TextBox } from "./EditableComponents/index.js";
+export {
+  ComboBox,
+  EditablePlugin,
+  TextBox
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/editable/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { EditablePlugin } from './EditablePlugin.js';\nexport { ComboBox, TextBox } from './EditableComponents/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAC/B,SAAS,UAAU,eAAe;",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-legacy-icons";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+import { DSButton } from "@elliemae/ds-legacy-button";
+import { DSTruncatedTooltipText } from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { dataGridBlockName } from "../../blockNames.js";
+import { RowSizes } from "../../rowSizes.js";
+const blockName = `${dataGridBlockName}-expandable-column`;
+const ExpandableColumnWrapper = aggregatedClasses("div")(blockName);
+const LabelDescriptionWrapper = aggregatedClasses("div")(blockName, "label-description-wrapper");
+const Label = aggregatedClasses("span")(blockName, "label");
+const Description = aggregatedClasses("span")(blockName, "description");
+const ExtraColumnData = aggregatedClasses("div")(blockName, "extra-column-data");
+const ExpandableMasterWrapper = aggregatedClasses("div")(`${blockName}-master-wrapper`);
+const ExpandableDetailsWrapper = aggregatedClasses("div")(`${blockName}-details-wrapper`);
+const ExpandableColumnCell = ({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) => {
+  const ref = useRef();
+  return /* @__PURE__ */ jsxs(ExpandableColumnWrapper, { ref, tabindex: 0, children: [
+    /* @__PURE__ */ jsxs(ExpandableMasterWrapper, { style: { height: RowSizes.extend }, children: [
+      /* @__PURE__ */ jsx(
+        DSButton,
+        {
+          buttonType: "text",
+          className: "expandable-arrow",
+          icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, {}) : /* @__PURE__ */ jsx(ArrowheadRight, {}),
+          onClick: (e) => {
+            onToggleExpand(e);
+            if (ref && ref.current) {
+              ref.current.focus();
+            }
+          },
+          size: "s"
+        }
+      ),
+      /* @__PURE__ */ jsxs(LabelDescriptionWrapper, { children: [
+        /* @__PURE__ */ jsx(Label, { children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: label }) }),
+        /* @__PURE__ */ jsx(Description, { children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: description }) })
+      ] }),
+      /* @__PURE__ */ jsx(ExtraColumnData, { children: extraData })
+    ] }),
+    isExpanded && /* @__PURE__ */ jsx(ExpandableDetailsWrapper, { children: expandableDetails })
+  ] });
+};
+const expandableColumnRenderer = ({ renderRowLabel, renderRowDescription, renderExtraData }) => (value, { rowData, isExpanded }, grid) => {
+  const {
+    props: { renderExpandedDetails },
+    actions: { toggleExpand }
+  } = grid.getInstance();
+  const expandableDetails = renderExpandedDetails({ rowData });
+  return /* @__PURE__ */ jsx(
+    ExpandableColumnCell,
+    {
+      description: renderRowDescription({ rowData }),
+      expandableDetails,
+      extraData: renderExtraData({ rowData }),
+      isExpanded,
+      label: renderRowLabel({ rowData }),
+      onToggleExpand: () => toggleExpand(rowData)
+    }
+  );
+};
+const noop = () => null;
+const ExpandableColumn = ({
+  property,
+  label,
+  renderRowLabel = () => "----",
+  renderRowDescription = noop,
+  renderExtraData = noop,
+  width,
+  resizable,
+  sortable,
+  searchable,
+  customRenderer,
+  ...rest
+}) => ({
+  ...rest,
+  label,
+  property,
+  cell: {
+    formatters: [
+      expandableColumnRenderer({
+        renderRowLabel,
+        renderRowDescription,
+        renderExtraData
+      })
+    ]
+  },
+  width: width || "50%",
+  expandableColumn: true,
+  resizable,
+  sortable,
+  searchable
+});
+var ExpandableColumn_default = ExpandableColumn;
+export {
+  ExpandableColumn,
+  ExpandableColumn_default as default
+};
+//# sourceMappingURL=ExpandableColumn.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/expandable-grid/ExpandableColumn.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/display-name */\nimport React, { useRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-legacy-icons';\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\nimport { DSButton } from '@elliemae/ds-legacy-button';\nimport { DSTruncatedTooltipText } from '@elliemae/ds-legacy-truncated-tooltip-text';\nimport { dataGridBlockName } from '../../blockNames.js';\nimport { RowSizes } from '../../rowSizes.js';\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\nconst 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  ...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\nexport default ExpandableColumn;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BM,cASrB,YATqB;AA3B7B,SAAgB,cAAc;AAC9B,SAAS,eAAe,sBAAsB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,MAAM,YAAY,GAAG;AAGrB,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,SAAS;AAClE,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,WAAW,2BAA2B;AAC/F,MAAM,QAAQ,kBAAkB,MAAM,EAAE,WAAW,OAAO;AAC1D,MAAM,cAAc,kBAAkB,MAAM,EAAE,WAAW,aAAa;AACtE,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,WAAW,mBAAmB;AAC/E,MAAM,0BAA0B,kBAAkB,KAAK,EAAE,GAAG,0BAA0B;AACtF,MAAM,2BAA2B,kBAAkB,KAAK,EAAE,GAAG,2BAA2B;AAExF,MAAM,uBAAuB,CAAC,EAAE,OAAO,aAAa,YAAY,mBAAmB,WAAW,eAAe,MAAM;AACjH,QAAM,MAAM,OAAO;AACnB,SACE,qBAAC,2BAAwB,KAAU,UAAU,GAC3C;AAAA,yBAAC,2BAAwB,OAAO,EAAE,QAAQ,SAAS,OAAO,GACxD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,aAAa,oBAAC,iBAAc,IAAK,oBAAC,kBAAe;AAAA,UACvD,SAAS,CAAC,MAAM;AACd,2BAAe,CAAC;AAChB,gBAAI,OAAO,IAAI,SAAS;AACtB,kBAAI,QAAQ,MAAM;AAAA,YACpB;AAAA,UACF;AAAA,UACA,MAAK;AAAA;AAAA,MACP;AAAA,MACA,qBAAC,2BACC;AAAA,4BAAC,SACC,8BAAC,0BAAuB,OAAO,OAAO,GACxC;AAAA,QACA,oBAAC,eACC,8BAAC,0BAAuB,OAAO,aAAa,GAC9C;AAAA,SACF;AAAA,MACA,oBAAC,mBAAiB,qBAAU;AAAA,OAC9B;AAAA,IACC,cAAc,oBAAC,4BAA0B,6BAAkB;AAAA,KAC9D;AAEJ;AAEA,MAAM,2BACJ,CAAC,EAAE,gBAAgB,sBAAsB,gBAAgB,MACzD,CAAC,OAAO,EAAE,SAAS,WAAW,GAAG,SAAS;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,sBAAsB;AAAA,IAC/B,SAAS,EAAE,aAAa;AAAA,EAC1B,IAAI,KAAK,YAAY;AAErB,QAAM,oBAAoB,sBAAsB,EAAE,QAAQ,CAAC;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,qBAAqB,EAAE,QAAQ,CAAC;AAAA,MAC7C;AAAA,MACA,WAAW,gBAAgB,EAAE,QAAQ,CAAC;AAAA,MACtC;AAAA,MACA,OAAO,eAAe,EAAE,QAAQ,CAAC;AAAA,MACjC,gBAAgB,MAAM,aAAa,OAAO;AAAA;AAAA,EAC5C;AAEJ;AACF,MAAM,OAAO,MAAM;AACZ,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,uBAAuB;AAAA,EACvB,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,OAAO;AAAA,EACL,GAAG;AAAA,EACH;AAAA,EACA;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,yBAAyB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAO,2BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { cx, isFunction } from "@elliemae/ds-legacy-utilities";
+import { VariableSizeList } from "react-window";
+import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-legacy-icons";
+import { DSButton } from "@elliemae/ds-legacy-button";
+import { createInstancePlugin, appendCellFormatter } from "@elliemae/ds-legacy-shared";
+import { ExpandedRow } from "./ExpandedRow.js";
+import { ExpandedRowExtra } from "./ExpandedRowExtra.js";
+import { RowSizes } from "../../rowSizes.js";
+import { useExpandGridState } from "./useExpandGridState.js";
+const getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) => isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
+const ExpandedRows = {
+  SingleColumn: ExpandedRow,
+  Master: ExpandedRowExtra
+};
+const createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;
+const isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);
+const ExpandablePlugin = createInstancePlugin("expandable", {
+  registerStateHook: useExpandGridState,
+  decorateGrid(grid) {
+    const { decoratedColumns, columns } = grid.getInstance();
+    const detailColumns = useMemo(
+      () => decoratedColumns.map((column) => ({
+        ...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),
+      appendCellFormatter((value, { isExpanded, rowData }) => {
+        const {
+          actions: { toggleExpand }
+        } = grid.getInstance();
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            DSButton,
+            {
+              buttonType: "text",
+              className: "expandable-arrow",
+              icon: isExpanded ? /* @__PURE__ */ jsx(ArrowheadDown, {}) : /* @__PURE__ */ jsx(ArrowheadRight, {}),
+              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 = RowSizes[rowSize];
+    const subrowSizePx = RowSizes[subrowSize];
+    const listRef = useRef();
+    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 = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index);
+      return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
+    };
+    return {
+      ...bodyProps,
+      className: cx(bodyProps.className, "expandable"),
+      listComponent: VariableSizeList,
+      listProps: { ref: listRef, itemSize: getItemSize }
+    };
+  },
+  decorateRenderers(renderers, grid) {
+    const Row = renderers.body.row;
+    const Cell = renderers.body.cell;
+    renderers.body.row = useMemo(() => {
+      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? "SingleColumn" : "Master";
+      const ExpandedRowComponent = createExpandedRow(expandedRowType);
+      return function({ isExpanded, ...rowProps }) {
+        if (isExpanded) {
+          const {
+            props: { detailColumns, getChildrenRows, renderRowDetails },
+            composedRows
+          } = grid.getInstance();
+          const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
+          return /* @__PURE__ */ jsx(
+            ExpandedRowComponent,
+            {
+              cellComponent: Cell,
+              detailColumns,
+              parentGrid: grid,
+              renderRowDetails,
+              rowComponent: Row,
+              rowData,
+              rowProps: {
+                rowData,
+                isExpanded,
+                ...rowProps
+              },
+              rows: getChildrenRows({ rowData }),
+              children: rowProps.children
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx(Row, { ...rowProps });
+      };
+    }, []);
+    return renderers;
+  },
+  getRowProps(rowProps, grid, { rowData }) {
+    const {
+      props: { rowKey },
+      state: { expandedRows }
+    } = grid.getInstance();
+    const key = rowData[rowKey];
+    const isExpanded = !!expandedRows[key];
+    return {
+      ...rowProps,
+      className: cx(
+        rowProps.className,
+        Object.keys(expandedRows).length > 0 && "expandable-row",
+        isExpanded && "expanded"
+      ),
+      isExpanded,
+      showAllRows: expandedRows[key] && expandedRows[key].showAllRows
+    };
+  }
+});
+export {
+  ExpandablePlugin
+};
+//# sourceMappingURL=ExpandablePlugin.js.map