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

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

@@ -53,6 +53,27 @@ var import_ds_form = require("@elliemae/ds-form");
 class TextBox extends import_react.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 = import_react.default.createRef();
     this.state = { value: props.value };
   }
@@ -63,27 +84,6 @@ class TextBox extends import_react.Component {
       }
     }, 50);
   }
-  handleKeyUp({ key, target: { value } }) {
-    const { onValue } = this.props;
-    if (key === "Enter") {
-      onValue(value);
-    }
-  }
-  handleKeyDown(e) {
-    if (e.key === "Enter") {
-      e.preventDefault();
-    }
-  }
-  handleBlur(e) {
-    const { onValue } = this.props;
-    const {
-      target: { value }
-    } = e;
-    onValue(value);
-  }
-  handleChange({ target: { value } }) {
-    this.setState({ value });
-  }
   render() {
     const { value } = this.state;
     return /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSTextBox, __spreadProps(__spreadValues({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugins/editable/EditableComponents/TextBox.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/static-property-placement */\nimport React, { Component } from 'react';\nimport { DSTextBox } from '@elliemae/ds-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\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAiC;AACjC,qBAA0B;AAG1B,sBAAsB,uBAAU;AAAA,EAK9B,YAAY,OAAO;AACjB,UAAM;AACN,SAAK,WAAW,qBAAM;AACtB,SAAK,QAAQ,EAAE,OAAO,MAAM;AAAA;AAAA,EAG9B,oBAAoB;AAClB,eAAW,MAAM;AACf,UAAI,KAAK,YAAY,KAAK,SAAS,SAAS;AAC1C,aAAK,SAAS,QAAQ;AAAA;AAAA,OAEvB;AAAA;AAAA,EAGL,YAAY,EAAE,KAAK,QAAQ,EAAE,WAAW;AACtC,UAAM,EAAE,YAAY,KAAK;AACzB,QAAI,QAAQ,SAAS;AACnB,cAAQ;AAAA;AAAA;AAAA,EAIZ,cAAc,GAAG;AAEf,QAAI,EAAE,QAAQ,SAAS;AACrB,QAAE;AAAA;AAAA;AAAA,EAIN,WAAW,GAAG;AACZ,UAAM,EAAE,YAAY,KAAK;AACzB,UAAM;AAAA,MACJ,QAAQ,EAAE;AAAA,QACR;AACJ,YAAQ;AAAA;AAAA,EAGV,aAAa,EAAE,QAAQ,EAAE,WAAW;AAClC,SAAK,SAAS,EAAE;AAAA;AAAA,EAGlB,SAAS;AACP,UAAM,EAAE,UAAU,KAAK;AACvB,WACE,mDAAC,0BAAD;AAAA,MACE,eAAY;AAAA,OACR,KAAK,QAFX;AAAA,MAGE,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf,SAAS,CAAC,MAAM,EAAE;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,WAAW,KAAK;AAAA,MAChB;AAAA;AAAA;AAAA;AAxDC,AADT,QACS,eAAe;AAAA,EACpB,SAAS,MAAM;AAAA;AA8DnB,IAAO,kBAAQ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable react/static-property-placement */\nimport React, { Component } from 'react';\nimport { DSTextBox } from '@elliemae/ds-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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAiC;AACjC,qBAA0B;AAG1B,sBAAsB,uBAAU;AAAA,EAK9B,YAAY,OAAO;AACjB,UAAM;AAaR,uBAAc,CAAC,EAAE,KAAK,QAAQ,EAAE,cAAc;AAC5C,YAAM,EAAE,YAAY,KAAK;AACzB,UAAI,QAAQ,SAAS;AACnB,gBAAQ;AAAA;AAAA;AAIZ,yBAAgB,CAAC,MAAM;AAErB,UAAI,EAAE,QAAQ,SAAS;AACrB,UAAE;AAAA;AAAA;AAIN,sBAAa,CAAC,MAAM;AAClB,YAAM,EAAE,YAAY,KAAK;AACzB,YAAM;AAAA,QACJ,QAAQ,EAAE;AAAA,UACR;AACJ,cAAQ;AAAA;AAGV,wBAAe,CAAC,EAAE,QAAQ,EAAE,cAAc;AACxC,WAAK,SAAS,EAAE;AAAA;AAnChB,SAAK,WAAW,qBAAM;AACtB,SAAK,QAAQ,EAAE,OAAO,MAAM;AAAA;AAAA,EAG9B,oBAAoB;AAClB,eAAW,MAAM;AACf,UAAI,KAAK,YAAY,KAAK,SAAS,SAAS;AAC1C,aAAK,SAAS,QAAQ;AAAA;AAAA,OAEvB;AAAA;AAAA,EA6BL,SAAS;AACP,UAAM,EAAE,UAAU,KAAK;AACvB,WACE,mDAAC,0BAAD;AAAA,MACE,eAAY;AAAA,OACR,KAAK,QAFX;AAAA,MAGE,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,UAAU,KAAK;AAAA,MACf,SAAS,CAAC,MAAM,EAAE;AAAA,MAClB,SAAS,KAAK;AAAA,MACd,WAAW,KAAK;AAAA,MAChB;AAAA;AAAA;AAAA;AAxDC,AADT,QACS,eAAe;AAAA,EACpB,SAAS,MAAM;AAAA;AA8DnB,IAAO,kBAAQ;",
   "names": []
 }

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

@@ -31,7 +31,7 @@ __export(EditablePlugin_exports, {
 });
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_decorateEditable = require("./decorateEditable");
 const registerStateHook = (grid) => {
   const { rowKey = "id", editingRows: editingRowsProp, onColumnRowEdited, onColumnRowEdit } = grid.props;
@@ -73,7 +73,7 @@ const decorateColumn = (column, grid) => {
     handlers: customHandlers
   }, grid) : column;
 };
-const EditablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("editable", {
+const EditablePlugin = (0, import_ds_shared.createInstancePlugin)("editable", {
   registerStateHook,
   decorateColumn,
   registerHotKeys(grid) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/editable/EditablePlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useDerivedStateFromProps, toggleInObject } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { addEditableToCell, makeEditableConfig } from './decorateEditable';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,kCAAqC;AACrC,8BAAsD;AAEtD,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM,EAAE,SAAS,MAAM,aAAa,iBAAiB,mBAAmB,oBAAoB,KAAK;AACjG,QAAM,CAAC,aAAa,kBAAkB,kDAAyB,mBAAmB;AAElF,QAAM,eAAe,CAAC,eAAe;AACnC,UAAM,EAAE,kBAAkB,KAAK;AAC/B,UAAM,EAAE,SAAS,gBAAgB;AACjC,kBAAc,UAAU,EAAE,QAAQ,MAAM,OAAO;AAC/C,mBAAe,CAAC,oBAAoB;AAClC,sBAAgB;AAChB,aAAO,wCAAe,iBAAiB,QAAQ,SAAS;AAAA;AAAA;AAI5D,QAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,eAAe;AAC5D,mBAAe;AACf,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAIJ,SAAO;AAAA,IACL,OAAO,EAAE;AAAA,IACT,SAAS;AAAA,MACP;AAAA,MACA;AAAA;AAAA;AAAA;AAKN,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,CAAC,QAAQ,IAAI,UAAU;AAAA,MACjD;AAEJ,QAAM,iBAAiB,gDAAmB;AAE1C,SAAO,iBAAiB,UACpB,+CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,KAEZ,QAEF;AAAA;AAGC,MAAM,iBAAiB,sDAAqB,YAAY;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,UAAU,gBAAgB;AACpC,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA,SAAS,EAAE;AAAA,UACX,OAAO,EAAE;AAAA,YACP,KAAK;AAET,YAAI,CAAC,iBAAiB,iBAAiB;AAAa;AAEpD,cAAM,OAAO,aAAa,QAAQ;AAClC,cAAM,MAAM,KAAK;AACjB,YAAI,CAAC;AAAK;AAEV,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,aAAa;AAAA;AAAA;AAAA,MAGjB,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { useDerivedStateFromProps, toggleInObject } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\nimport { addEditableToCell, makeEditableConfig } from './decorateEditable';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AACzD,uBAAqC;AACrC,8BAAsD;AAEtD,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM,EAAE,SAAS,MAAM,aAAa,iBAAiB,mBAAmB,oBAAoB,KAAK;AACjG,QAAM,CAAC,aAAa,kBAAkB,kDAAyB,mBAAmB;AAElF,QAAM,eAAe,CAAC,eAAe;AACnC,UAAM,EAAE,kBAAkB,KAAK;AAC/B,UAAM,EAAE,SAAS,gBAAgB;AACjC,kBAAc,UAAU,EAAE,QAAQ,MAAM,OAAO;AAC/C,mBAAe,CAAC,oBAAoB;AAClC,sBAAgB;AAChB,aAAO,wCAAe,iBAAiB,QAAQ,SAAS;AAAA;AAAA;AAI5D,QAAM,YAAY,CAAC,EAAE,OAAO,SAAS,UAAU,eAAe;AAC5D,mBAAe;AACf,sBAAkB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAIJ,SAAO;AAAA,IACL,OAAO,EAAE;AAAA,IACT,SAAS;AAAA,MACP;AAAA,MACA;AAAA;AAAA;AAAA;AAKN,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB,CAAC,QAAQ,IAAI,UAAU;AAAA,MACjD;AAEJ,QAAM,iBAAiB,gDAAmB;AAE1C,SAAO,iBAAiB,UACpB,+CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,KAEZ,QAEF;AAAA;AAGC,MAAM,iBAAiB,2CAAqB,YAAY;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,UAAU,gBAAgB;AACpC,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA,SAAS,EAAE;AAAA,UACX,OAAO,EAAE;AAAA,YACP,KAAK;AAET,YAAI,CAAC,iBAAiB,iBAAiB;AAAa;AAEpD,cAAM,OAAO,aAAa,QAAQ;AAClC,cAAM,MAAM,KAAK;AACjB,YAAI,CAAC;AAAK;AAEV,qBAAa;AAAA,UACX,SAAS;AAAA,UACT,aAAa;AAAA;AAAA;AAAA,MAGjB,SAAS;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -61,7 +61,7 @@ var import_react = __toESM(require("react"));
 var edit = __toESM(require("react-edit"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_initColumnDefinition = require("@elliemae/ds-shared/useDataGrid/initColumnDefinition");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_getEditorComponent = require("./getEditorComponent");
 const makeEditableConfig = (grid) => edit.edit({
   isEditing: (_a) => {
@@ -86,7 +86,7 @@ const makeEditableConfig = (grid) => edit.edit({
 const addEditableToCell = ({ column, config, handlers }, grid) => {
   column.cell.transforms.push(config((0, import_getEditorComponent.getEditorComponent)(column.customEditor, handlers)));
   column.cell.props.className = (0, import_ds_utilities.cx)(column.cell.props.className, `editable${column.customEditor ? " customEditor" : ""}`);
-  return (0, import_initColumnDefinition.appendCellFormatter)([
+  return (0, import_ds_shared.appendCellFormatter)([
     (value, extraParams) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", {
       onClick: (e) => {
         e.stopPropagation();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/editable/decorateEditable.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport * as edit from 'react-edit';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { cx } from '@elliemae/ds-utilities';\nimport { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { getEditorComponent } from './getEditorComponent';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,WAAsB;AACtB,sBAA2B;AAC3B,0BAAmB;AACnB,kCAAoC;AACpC,gCAAmC;AAEnC,MAAM,qBAAqB,CAAC,SAC1B,KAAK,KAAK;AAAA,EACR,WAAW,CAAC,OAAmD;AAAnD,iBAAE,eAAa,SAAS,SAAS,OAAjC,IAAwC,iBAAxC,IAAwC,CAAtC,eAAa,WAAS;AAClC,UAAM;AAAA,MACJ,OAAO,EAAE;AAAA,MACT,OAAO,EAAE;AAAA,QACP,KAAK;AACT,QAAI;AAEJ,QAAI,OAAO,OAAO,cAAc,YAAY;AAC1C,wBAAkB,OAAO,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,SACG;AAAA;AAGP,WAAO,YAAY,QAAQ,aAAa,eAAe,OAAO,iBAAiB;AAAA;AAAA,EAEjF,YAAY,MAAM;AAAA,EAClB,SAAS,IAAI,SAAS,KAAK,cAAc,QAAQ,UAAU,GAAG;AAAA;AAElE,MAAM,oBAAoB,CAAC,EAAE,QAAQ,QAAQ,YAAY,SAAS;AAChE,SAAO,KAAK,WAAW,KAAK,OAAO,kDAAmB,OAAO,cAAc;AAC3E,SAAO,KAAK,MAAM,YAAY,4BAC5B,OAAO,KAAK,MAAM,WAClB,WAAW,OAAO,eAAe,kBAAkB;AAErD,SAAO,qDACL;AAAA,IACE,CAAC,OAAO,gBACN,wFACE,mDAAC,OAAD;AAAA,MACE,SAAS,CAAC,MAAM;AACd,UAAE;AACF,aAAK,cAAc,QAAQ,aAAa;AAAA;AAAA,MAE1C,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI,EAAE,YAAY,IAAI;AACpB,eAAK,cAAc,QAAQ,aAAa;AAAA;AAAA;AAAA,MAG5C,MAAK;AAAA,MACL,UAAU;AAAA,OAET,OACD,mDAAC,4BAAD;AAAA,MAAY,WAAU;AAAA,QACtB,mDAAC,QAAD;AAAA,MAAM,WAAU;AAAA,OAAiB;AAAA,KAKzC;AAAA;",
+  "sourcesContent": ["import React from 'react';\nimport * as edit from 'react-edit';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { cx } from '@elliemae/ds-utilities';\nimport { appendCellFormatter } from '@elliemae/ds-shared';\nimport { getEditorComponent } from './getEditorComponent';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,WAAsB;AACtB,sBAA2B;AAC3B,0BAAmB;AACnB,uBAAoC;AACpC,gCAAmC;AAEnC,MAAM,qBAAqB,CAAC,SAC1B,KAAK,KAAK;AAAA,EACR,WAAW,CAAC,OAAmD;AAAnD,iBAAE,eAAa,SAAS,SAAS,OAAjC,IAAwC,iBAAxC,IAAwC,CAAtC,eAAa,WAAS;AAClC,UAAM;AAAA,MACJ,OAAO,EAAE;AAAA,MACT,OAAO,EAAE;AAAA,QACP,KAAK;AACT,QAAI;AAEJ,QAAI,OAAO,OAAO,cAAc,YAAY;AAC1C,wBAAkB,OAAO,UAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,SACG;AAAA;AAGP,WAAO,YAAY,QAAQ,aAAa,eAAe,OAAO,iBAAiB;AAAA;AAAA,EAEjF,YAAY,MAAM;AAAA,EAClB,SAAS,IAAI,SAAS,KAAK,cAAc,QAAQ,UAAU,GAAG;AAAA;AAElE,MAAM,oBAAoB,CAAC,EAAE,QAAQ,QAAQ,YAAY,SAAS;AAChE,SAAO,KAAK,WAAW,KAAK,OAAO,kDAAmB,OAAO,cAAc;AAC3E,SAAO,KAAK,MAAM,YAAY,4BAC5B,OAAO,KAAK,MAAM,WAClB,WAAW,OAAO,eAAe,kBAAkB;AAErD,SAAO,0CACL;AAAA,IACE,CAAC,OAAO,gBACN,wFACE,mDAAC,OAAD;AAAA,MACE,SAAS,CAAC,MAAM;AACd,UAAE;AACF,aAAK,cAAc,QAAQ,aAAa;AAAA;AAAA,MAE1C,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI,EAAE,YAAY,IAAI;AACpB,eAAK,cAAc,QAAQ,aAAa;AAAA;AAAA;AAAA,MAG5C,MAAK;AAAA,MACL,UAAU;AAAA,OAET,OACD,mDAAC,4BAAD;AAAA,MAAY,WAAU;AAAA,QACtB,mDAAC,QAAD;AAAA,MAAM,WAAU;AAAA,OAAiB;AAAA,KAKzC;AAAA;",
   "names": []
 }

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

@@ -64,8 +64,7 @@ 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_ds_shared = require("@elliemae/ds-shared");
 var import_ExpandedRow = require("./ExpandedRow");
 var import_ExpandedRowExtra = require("./ExpandedRowExtra");
 var import_rowSizes = require("../../rowSizes");
@@ -77,7 +76,7 @@ const ExpandedRows = {
 };
 const createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;
 const isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);
-const ExpandablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("expandable", {
+const ExpandablePlugin = (0, import_ds_shared.createInstancePlugin)("expandable", {
   registerStateHook: import_useExpandGridState.useExpandGridState,
   decorateGrid(grid) {
     const { decoratedColumns, columns } = grid.getInstance();
@@ -96,7 +95,7 @@ const ExpandablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("
     firstColumn.formatExpandable = true;
     return [
       ...columns.slice(0, firstColumnIndex),
-      (0, import_initColumnDefinition.appendCellFormatter)((value, { isExpanded, rowData }) => {
+      (0, import_ds_shared.appendCellFormatter)((value, { isExpanded, rowData }) => {
         const {
           actions: { toggleExpand }
         } = grid.getInstance();

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

@@ -1,7 +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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",
+  "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, appendCellFormatter } from '@elliemae/ds-shared';\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

@@ -65,17 +65,16 @@ 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_ds_shared = require("@elliemae/ds-shared");
 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 DetailGrid = (0, import_ds_shared.deferComponentRender)(({ parentGrid, parentRowData, rows }) => {
   const _a = parentGrid.props, { instanceRef } = _a, parentProps = __objRest(_a, ["instanceRef"]);
-  const grid = (0, import_useDataGrid.useDataGrid)(__spreadProps(__spreadValues({
+  const grid = (0, import_ds_shared.useDataGrid)(__spreadProps(__spreadValues({
     uuid: parentGrid.getInstance().uuid
   }, parentProps), {
     columns: parentGrid.getInstance().decoratedColumns.filter((col) => !col.expandableColumn).map((c) => __spreadProps(__spreadValues({}, c), { expandableColumn: false })),

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

@@ -1,7 +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;",
+  "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, useDataGrid } from '@elliemae/ds-shared';\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,uBAAkD;AAClD,wBAAiC;AACjC,sBAAyB;AACzB,uBAAiC;AACjC,uBAA0B;AAC1B,mBAAsB;AACtB,2BAAmC;AAEnC,MAAM,aAAa,2CAAqB,CAAC,EAAE,YAAY,eAAe,WAAW;AAC/E,QAAwC,gBAAW,OAA3C,kBAAgC,IAAhB,wBAAgB,IAAhB,CAAhB;AACR,QAAM,OAAO,kCAAY;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": []
 }

package/dist/cjs/plugins/export-data/ExportDataPlugin.js

@@ -48,7 +48,7 @@ __export(ExportDataPlugin_exports, {
 });
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 const isVisible = (column) => {
   if (typeof column === "undefined") {
     return false;
@@ -103,7 +103,7 @@ const exportTo = (rows, columns, { range, fileName, type, excludedColumns }) =>
     }
   }
 };
-const ExportDataPlugin = (0, import_createInstancePlugin.createInstancePlugin)("export-data", {
+const ExportDataPlugin = (0, import_ds_shared.createInstancePlugin)("export-data", {
   decorateGrid(instance) {
     return {
       exportRows(opts = {}) {

package/dist/cjs/plugins/export-data/ExportDataPlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/export-data/ExportDataPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable indent */\nimport { get } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\n\nconst isVisible = (column) => {\n  if (typeof column === 'undefined') {\n    return false;\n  }\n  return typeof column.visible === 'undefined' || column.visible;\n};\n\nexport const getColumnValue = (row, property) => get(row, property);\nexport const getVisibleRowData = (row, columns) =>\n  columns.reduce((result, column) => {\n    const columnProperty = column.property;\n    return isVisible(column)\n      ? [...result, getColumnValue(row, `_${columnProperty}`) || getColumnValue(row, columnProperty)]\n      : result;\n  }, []);\n\nconst defaultOptions = (uuid) => ({\n  sheetName: 'SheetName',\n  fileName: `datagrid-${uuid}`,\n  type: 'csv',\n  onlySelection: false,\n  excludedColumns: undefined,\n});\n\nconst getOptions = (opts, uuid) => ({\n  ...defaultOptions(uuid),\n  ...opts,\n});\n\nconst getCellValue = (cell) => {\n  if (cell === undefined || cell === null) return '';\n  return cell;\n};\n\nexport const getExportedData = (rows, columns, range) => {\n  const rowsRanged = range ? rows.slice(...range) : rows;\n  const dataToExport = rowsRanged.map((row) => getVisibleRowData(row, columns));\n  const columnsContent = columns\n    .filter((c) => isVisible(c))\n    .reduce((acc, curr, idx) => `${acc}${idx === 0 ? '' : ','}${curr.label}`, '');\n  const rowsContent = dataToExport\n    .map((e) => e.map((r) => `\"${String(getCellValue(r)).replace(/\"/g, '\"\"')}\"`).join(','))\n    .join('\\r\\n');\n  const csvContent = `${columnsContent}\\r\\n${rowsContent}`;\n  return csvContent;\n};\n\n// eslint-disable-next-line max-statements\nconst exportTo = (rows, columns, { range, fileName, type, excludedColumns }) => {\n  if (excludedColumns) {\n    // eslint-disable-next-line no-param-reassign\n    columns = columns.filter((col) => !excludedColumns.includes(col.property));\n  }\n  const csvContent = getExportedData(rows, columns, range);\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n  if (navigator.msSaveBlob) {\n    // IE 10+\n    navigator.msSaveBlob(blob, `${fileName}.${type}`);\n  } else {\n    const link = document.createElement('a');\n    if (link.download !== undefined) {\n      // feature detection\n      // Browsers that support HTML5 download attribute\n      const url = URL.createObjectURL(blob);\n      link.setAttribute('href', url);\n      link.setAttribute('download', `${fileName}.${type}`);\n      link.style.visibility = 'hidden';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n  }\n};\n\nexport const ExportDataPlugin = createInstancePlugin('export-data', {\n  decorateGrid(instance) {\n    return {\n      exportRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n        // check paginated rows\n        let currentRows = rows.allRows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n      exportVisibleRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n\n        // check paginated rows\n        let currentRows = rows.rows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable indent */\nimport { get } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\n\nconst isVisible = (column) => {\n  if (typeof column === 'undefined') {\n    return false;\n  }\n  return typeof column.visible === 'undefined' || column.visible;\n};\n\nexport const getColumnValue = (row, property) => get(row, property);\nexport const getVisibleRowData = (row, columns) =>\n  columns.reduce((result, column) => {\n    const columnProperty = column.property;\n    return isVisible(column)\n      ? [...result, getColumnValue(row, `_${columnProperty}`) || getColumnValue(row, columnProperty)]\n      : result;\n  }, []);\n\nconst defaultOptions = (uuid) => ({\n  sheetName: 'SheetName',\n  fileName: `datagrid-${uuid}`,\n  type: 'csv',\n  onlySelection: false,\n  excludedColumns: undefined,\n});\n\nconst getOptions = (opts, uuid) => ({\n  ...defaultOptions(uuid),\n  ...opts,\n});\n\nconst getCellValue = (cell) => {\n  if (cell === undefined || cell === null) return '';\n  return cell;\n};\n\nexport const getExportedData = (rows, columns, range) => {\n  const rowsRanged = range ? rows.slice(...range) : rows;\n  const dataToExport = rowsRanged.map((row) => getVisibleRowData(row, columns));\n  const columnsContent = columns\n    .filter((c) => isVisible(c))\n    .reduce((acc, curr, idx) => `${acc}${idx === 0 ? '' : ','}${curr.label}`, '');\n  const rowsContent = dataToExport\n    .map((e) => e.map((r) => `\"${String(getCellValue(r)).replace(/\"/g, '\"\"')}\"`).join(','))\n    .join('\\r\\n');\n  const csvContent = `${columnsContent}\\r\\n${rowsContent}`;\n  return csvContent;\n};\n\n// eslint-disable-next-line max-statements\nconst exportTo = (rows, columns, { range, fileName, type, excludedColumns }) => {\n  if (excludedColumns) {\n    // eslint-disable-next-line no-param-reassign\n    columns = columns.filter((col) => !excludedColumns.includes(col.property));\n  }\n  const csvContent = getExportedData(rows, columns, range);\n\n  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });\n  if (navigator.msSaveBlob) {\n    // IE 10+\n    navigator.msSaveBlob(blob, `${fileName}.${type}`);\n  } else {\n    const link = document.createElement('a');\n    if (link.download !== undefined) {\n      // feature detection\n      // Browsers that support HTML5 download attribute\n      const url = URL.createObjectURL(blob);\n      link.setAttribute('href', url);\n      link.setAttribute('download', `${fileName}.${type}`);\n      link.style.visibility = 'hidden';\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n    }\n  }\n};\n\nexport const ExportDataPlugin = createInstancePlugin('export-data', {\n  decorateGrid(instance) {\n    return {\n      exportRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n        // check paginated rows\n        let currentRows = rows.allRows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n      exportVisibleRows(opts = {}) {\n        const {\n          composedRows: rows,\n          columns,\n          uuid,\n          props: { rowKey },\n          state: { selection },\n        } = instance.getInstance();\n        const options = getOptions(opts, uuid);\n\n        // check paginated rows\n        let currentRows = rows.rows || rows;\n        if (opts.onlySelection) {\n          const selectedRows = Object.keys(selection.selectedRows);\n          currentRows = currentRows.filter((r) => selectedRows.includes(String(r[rowKey])));\n        }\n\n        exportTo(currentRows, columns, options);\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/plugins/filterable/FilterablePlugin.js

@@ -31,7 +31,7 @@ __export(FilterablePlugin_exports, {
 });
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_addFilterToColumn = require("./addFilterToColumn");
 var import_filterRowsByQuery = __toESM(require("./filtering-helper/filterRowsByQuery"));
 var import_useFilterableState = require("./useFilterableState");
@@ -59,7 +59,7 @@ const composeRows = (rows, grid) => {
   const nextRows = !groupedRows ? (0, import_filterRowsByQuery.default)(rows, query) : (0, import_filterRowsByQuery.filterRowsByQueryGroup)(rows, query, composedRows);
   return !isDataFiltered ? nextRows : rows;
 };
-const FilterablePlugin = (0, import_createInstancePlugin.createInstancePlugin)("filterable", {
+const FilterablePlugin = (0, import_ds_shared.createInstancePlugin)("filterable", {
   registerStateHook: import_useFilterableState.useFilterableState,
   decorateColumn,
   composeRows,

package/dist/cjs/plugins/filterable/FilterablePlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/filterable/FilterablePlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport { get, isFunction } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { addFilterToColumn } from './addFilterToColumn';\n\nimport filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery';\nimport { useFilterableState } from './useFilterableState';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },\n    actions: { addFilter, removeFilter },\n    state: { query, filters },\n  } = grid;\n\n  return isFilterableColumnActive(column)\n    ? addFilterToColumn(\n        {\n          grid,\n          onAddFilter: addFilter,\n          onRemoveFilter: removeFilter,\n          onRemoveAllFilters,\n          query,\n          filters,\n        },\n        column,\n      )\n    : column;\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    props: { isDataFiltered, groupedRows },\n    state: { query },\n    composedRows,\n  } = grid.getInstance();\n  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);\n\n  return !isDataFiltered ? nextRows : rows;\n};\n\nexport const FilterablePlugin = createInstancePlugin('filterable', {\n  registerStateHook: useFilterableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+f',\n      handler: ({ cellIndex }) => {\n        const { decoratedColumns } = grid.getInstance();\n\n        const column = decoratedColumns[cellIndex];\n        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);\n        if (isFunction(toggleMenuMethod)) toggleMenuMethod();\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAgC;AAChC,kCAAqC;AACrC,+BAAkC;AAElC,+BAA0D;AAC1D,gCAAmC;AAEnC,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,2BAA2B,CAAC,QAAQ,IAAI,YAAY;AAAA,IAC7D,SAAS,EAAE,WAAW;AAAA,IACtB,OAAO,EAAE,OAAO;AAAA,MACd;AAEJ,SAAO,yBAAyB,UAC5B,gDACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,KAEF,UAEF;AAAA;AAGN,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB,OAAO,EAAE;AAAA,IACT;AAAA,MACE,KAAK;AACT,QAAM,WAAW,CAAC,cAAc,sCAAkB,MAAM,SAAS,qDAAuB,MAAM,OAAO;AAErG,SAAO,CAAC,iBAAiB,WAAW;AAAA;AAG/B,MAAM,mBAAmB,sDAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,gBAAgB;AAC1B,cAAM,EAAE,qBAAqB,KAAK;AAElC,cAAM,SAAS,iBAAiB;AAChC,cAAM,mBAAmB,6BAAI,QAAQ,CAAC,cAAc,WAAW;AAC/D,YAAI,oCAAW;AAAmB;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable indent */\nimport { get, isFunction } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\nimport { addFilterToColumn } from './addFilterToColumn';\n\nimport filterRowsByQuery, { filterRowsByQueryGroup } from './filtering-helper/filterRowsByQuery';\nimport { useFilterableState } from './useFilterableState';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isFilterableColumnActive = (col) => col.searchable, onRemoveAllFilters },\n    actions: { addFilter, removeFilter },\n    state: { query, filters },\n  } = grid;\n\n  return isFilterableColumnActive(column)\n    ? addFilterToColumn(\n        {\n          grid,\n          onAddFilter: addFilter,\n          onRemoveFilter: removeFilter,\n          onRemoveAllFilters,\n          query,\n          filters,\n        },\n        column,\n      )\n    : column;\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    props: { isDataFiltered, groupedRows },\n    state: { query },\n    composedRows,\n  } = grid.getInstance();\n  const nextRows = !groupedRows ? filterRowsByQuery(rows, query) : filterRowsByQueryGroup(rows, query, composedRows);\n\n  return !isDataFiltered ? nextRows : rows;\n};\n\nexport const FilterablePlugin = createInstancePlugin('filterable', {\n  registerStateHook: useFilterableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+f',\n      handler: ({ cellIndex }) => {\n        const { decoratedColumns } = grid.getInstance();\n\n        const column = decoratedColumns[cellIndex];\n        const toggleMenuMethod = get(column, ['filterMenu', 'current', 'toggleMenu']);\n        if (isFunction(toggleMenuMethod)) toggleMenuMethod();\n      },\n    };\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAgC;AAChC,uBAAqC;AACrC,+BAAkC;AAElC,+BAA0D;AAC1D,gCAAmC;AAEnC,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,2BAA2B,CAAC,QAAQ,IAAI,YAAY;AAAA,IAC7D,SAAS,EAAE,WAAW;AAAA,IACtB,OAAO,EAAE,OAAO;AAAA,MACd;AAEJ,SAAO,yBAAyB,UAC5B,gDACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,KAEF,UAEF;AAAA;AAGN,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB;AAAA,IACzB,OAAO,EAAE;AAAA,IACT;AAAA,MACE,KAAK;AACT,QAAM,WAAW,CAAC,cAAc,sCAAkB,MAAM,SAAS,qDAAuB,MAAM,OAAO;AAErG,SAAO,CAAC,iBAAiB,WAAW;AAAA;AAG/B,MAAM,mBAAmB,2CAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,gBAAgB;AAC1B,cAAM,EAAE,qBAAqB,KAAK;AAElC,cAAM,SAAS,iBAAiB;AAChC,cAAM,mBAAmB,6BAAI,QAAQ,CAAC,cAAc,WAAW;AAC/D,YAAI,oCAAW;AAAmB;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/plugins/filterable/addFilterToColumn.js

@@ -48,13 +48,13 @@ __export(addFilterToColumn_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_initColumnDefinition = require("@elliemae/ds-shared/useDataGrid/initColumnDefinition");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_filterableFormatter = require("./filterableFormatter");
 const addFilterToColumn = (props, column) => {
   const filterMenuRef = (0, import_react.createRef)();
   column.header.formatters.push((0, import_filterableFormatter.FilterableFormatter)(__spreadProps(__spreadValues({}, props), { filterMenuRef })));
   column.filterMenu = filterMenuRef;
-  return (0, import_initColumnDefinition.mergeClassNameToColumnHeader)("with-filtering", column);
+  return (0, import_ds_shared.mergeClassNameToColumnHeader)("with-filtering", column);
 };
 module.exports = __toCommonJS(addFilterToColumn_exports);
 //# sourceMappingURL=addFilterToColumn.js.map

package/dist/cjs/plugins/filterable/addFilterToColumn.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/filterable/addFilterToColumn.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createRef } from 'react';\nimport { mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { FilterableFormatter } from './filterableFormatter';\n\nexport const addFilterToColumn = (props, column) => {\n  const filterMenuRef = createRef();\n  column.header.formatters.push(\n    FilterableFormatter({ ...props, filterMenuRef }),\n  );\n  column.filterMenu = filterMenuRef;\n  return mergeClassNameToColumnHeader('with-filtering', column);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAC1B,kCAA6C;AAC7C,iCAAoC;AAE7B,MAAM,oBAAoB,CAAC,OAAO,WAAW;AAClD,QAAM,gBAAgB;AACtB,SAAO,OAAO,WAAW,KACvB,oDAAoB,iCAAK,QAAL,EAAY;AAElC,SAAO,aAAa;AACpB,SAAO,8DAA6B,kBAAkB;AAAA;",
+  "sourcesContent": ["import { createRef } from 'react';\nimport { mergeClassNameToColumnHeader } from '@elliemae/ds-shared';\nimport { FilterableFormatter } from './filterableFormatter';\n\nexport const addFilterToColumn = (props, column) => {\n  const filterMenuRef = createRef();\n  column.header.formatters.push(FilterableFormatter({ ...props, filterMenuRef }));\n  column.filterMenu = filterMenuRef;\n  return mergeClassNameToColumnHeader('with-filtering', column);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAC1B,uBAA6C;AAC7C,iCAAoC;AAE7B,MAAM,oBAAoB,CAAC,OAAO,WAAW;AAClD,QAAM,gBAAgB;AACtB,SAAO,OAAO,WAAW,KAAK,oDAAoB,iCAAK,QAAL,EAAY;AAC9D,SAAO,aAAa;AACpB,SAAO,mDAA6B,kBAAkB;AAAA;",
   "names": []
 }

package/dist/cjs/plugins/grouping-by/GroupingByPlugin.js

@@ -30,7 +30,7 @@ __export(GroupingByPlugin_exports, {
   GroupingByPlugin: () => GroupingByPlugin
 });
 var React = __toESM(require("react"));
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_lodash = require("lodash");
 const groupedByData = (groupedBy, composedRows) => {
   const grouped = (0, import_lodash.groupBy)(composedRows, groupedBy);
@@ -43,7 +43,7 @@ const groupedByData = (groupedBy, composedRows) => {
     isGroup: true
   }));
 };
-const GroupingByPlugin = (0, import_createInstancePlugin.createInstancePlugin)("groupedByRows", {
+const GroupingByPlugin = (0, import_ds_shared.createInstancePlugin)("groupedByRows", {
   decorateGrid(grid) {
     const {
       composedRows,

package/dist/cjs/plugins/grouping-by/GroupingByPlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/grouping-by/GroupingByPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { groupBy } from 'lodash';\n\nconst groupedByData = (groupedBy, composedRows) => {\n  const grouped = groupBy(composedRows, groupedBy);\n  return Object.keys(grouped).map((c, key) => ({\n    id: `grouped-by-${groupedBy}-${key}`,\n    key: groupedBy,\n    value: c,\n    children: grouped[c],\n    _isGroup: true,\n    isGroup: true,\n  }));\n};\n\nexport const GroupingByPlugin = createInstancePlugin('groupedByRows', {\n  decorateGrid(grid) {\n    const {\n      composedRows,\n      props: { groupedBy },\n    } = grid.getInstance();\n    grid.composedRows = groupedBy\n      ? groupedByData(groupedBy, composedRows)\n      : composedRows;\n    return grid;\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kCAAqC;AACrC,oBAAwB;AAExB,MAAM,gBAAgB,CAAC,WAAW,iBAAiB;AACjD,QAAM,UAAU,2BAAQ,cAAc;AACtC,SAAO,OAAO,KAAK,SAAS,IAAI,CAAC,GAAG,QAAS;AAAA,IAC3C,IAAI,cAAc,aAAa;AAAA,IAC/B,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU,QAAQ;AAAA,IAClB,UAAU;AAAA,IACV,SAAS;AAAA;AAAA;AAIN,MAAM,mBAAmB,sDAAqB,iBAAiB;AAAA,EACpE,aAAa,MAAM;AACjB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO,EAAE;AAAA,QACP,KAAK;AACT,SAAK,eAAe,YAChB,cAAc,WAAW,gBACzB;AACJ,WAAO;AAAA;AAAA;",
+  "sourcesContent": ["import { createInstancePlugin } from '@elliemae/ds-shared';\nimport { groupBy } from 'lodash';\n\nconst groupedByData = (groupedBy, composedRows) => {\n  const grouped = groupBy(composedRows, groupedBy);\n  return Object.keys(grouped).map((c, key) => ({\n    id: `grouped-by-${groupedBy}-${key}`,\n    key: groupedBy,\n    value: c,\n    children: grouped[c],\n    _isGroup: true,\n    isGroup: true,\n  }));\n};\n\nexport const GroupingByPlugin = createInstancePlugin('groupedByRows', {\n  decorateGrid(grid) {\n    const {\n      composedRows,\n      props: { groupedBy },\n    } = grid.getInstance();\n    grid.composedRows = groupedBy ? groupedByData(groupedBy, composedRows) : composedRows;\n    return grid;\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqC;AACrC,oBAAwB;AAExB,MAAM,gBAAgB,CAAC,WAAW,iBAAiB;AACjD,QAAM,UAAU,2BAAQ,cAAc;AACtC,SAAO,OAAO,KAAK,SAAS,IAAI,CAAC,GAAG,QAAS;AAAA,IAC3C,IAAI,cAAc,aAAa;AAAA,IAC/B,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU,QAAQ;AAAA,IAClB,UAAU;AAAA,IACV,SAAS;AAAA;AAAA;AAIN,MAAM,mBAAmB,2CAAqB,iBAAiB;AAAA,EACpE,aAAa,MAAM;AACjB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO,EAAE;AAAA,QACP,KAAK;AACT,SAAK,eAAe,YAAY,cAAc,WAAW,gBAAgB;AACzE,WAAO;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/plugins/grouping-grid/GroupingPlugin.js

@@ -60,7 +60,7 @@ __export(GroupingPlugin_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 var import_ds_classnames = require("@elliemae/ds-classnames");
 var import_react_window = require("react-window");
 var import_walkStrategy = require("./walkStrategy");
@@ -69,7 +69,7 @@ var import_blockNames = require("../../blockNames");
 const blockName = `${import_blockNames.dataGridBlockName}-group-row-header`;
 const GroupRowHeaderWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName);
 const GroupRowHeaderTitle = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "title");
-const GroupingPlugin = (0, import_createInstancePlugin.createInstancePlugin)("groupedRows", {
+const GroupingPlugin = (0, import_ds_shared.createInstancePlugin)("groupedRows", {
   decorateGrid(grid) {
     const { columns, composedRows } = grid.getInstance();
     const detailColumns = (0, import_react.useMemo)(() => columns.map((column) => __spreadProps(__spreadValues({}, column), {

package/dist/cjs/plugins/grouping-grid/GroupingPlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/grouping-grid/GroupingPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-underscore-dangle */\nimport React, { useMemo } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { VariableSizeList } from 'react-window';\nimport { walkTreeStrategy } from './walkStrategy';\nimport { RowSizes } from '../../rowSizes';\nimport { dataGridBlockName } from '../../blockNames';\n\nconst blockName = `${dataGridBlockName}-group-row-header`;\nconst GroupRowHeaderWrapper = aggregatedClasses('div')(blockName);\nconst GroupRowHeaderTitle = aggregatedClasses('div')(blockName, 'title');\n\nexport const GroupingPlugin = createInstancePlugin('groupedRows', {\n  decorateGrid(grid) {\n    const { columns, composedRows } = grid.getInstance();\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const detailColumns = useMemo(\n      () =>\n        columns\n          .map((column) => ({\n            ...column,\n            customRenderer: column.detailCustomRenderer,\n          }))\n          .filter((col) => !col.expandableColumn),\n      [columns],\n    );\n    const flatRows = [];\n    walkTreeStrategy({\n      data: composedRows,\n      cb: (n) => flatRows.push(n),\n    });\n    return {\n      detailColumns,\n      composedRows: flatRows,\n    };\n  },\n  getBodyProps(bodyProps, grid) {\n    const { composedRows: rows } = grid.getInstance();\n    // implementation of expandable row single column with aggregation\n    const getItemSize = (index) => {\n      const rowData = rows[index];\n      if (!rowData) return RowSizes.normal;\n      return rowData._isGroup || rowData.isGroup\n        ? RowSizes.compact\n        : RowSizes.normal;\n    };\n    // eslint-disable-next-line no-unused-vars\n    const getListHeight = () => {\n      const size = rows.reduce((h, r) => {\n        const rowHeight =\n          r._isGroup || r.isGroup ? RowSizes.compact : RowSizes.normal;\n        return h + rowHeight;\n      }, 0);\n      return size;\n    };\n    return {\n      ...bodyProps,\n      getListHeight,\n      listComponent: VariableSizeList,\n      listProps: { itemSize: getItemSize },\n    };\n  },\n  composeRows: (rows, grid) => {\n    const {\n      composedRows,\n      props: { rowKey },\n    } = grid.getInstance();\n\n    if (Array.isArray(rows)) {\n      const filterIds = rows.map((r) => r.data[rowKey]);\n      return composedRows\n        .filter((c) => filterIds.includes(c.data[rowKey]))\n        .map((r) => ({\n          ...r.data,\n          children: Array.isArray(r.data.children)\n            ? r.data.children.filter((c) => filterIds.includes(c[rowKey]))\n            : r.data.children,\n          _isGroup: r.isGroup,\n        }))\n        .filter((g) => g.children === undefined || g.children.length > 0);\n    }\n    return {\n      ...rows,\n      allRows: rows.allRows.map((r) => ({\n        ...r.data,\n        _isGroup: r.isGroup,\n      })),\n      rows: rows.rows.map((r) => ({\n        ...r.data,\n        _isGroup: r.isGroup,\n      })),\n    };\n  },\n  decorateRenderers(renderers, grid) {\n    const Row = renderers.body.row;\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    renderers.body.row = useMemo(\n      () =>\n        // eslint-disable-next-line react/display-name\n        // eslint-disable-next-line react/prop-types\n        ({ isExpanded, ...rowProps }) => {\n          const { composedRows } = grid.getInstance();\n          // // https://jira.elliemae.io/browse/PUI-1667\n          const node = composedRows[rowProps.index]\n            ? composedRows[rowProps.index]\n            : rowProps.rowData;\n          const { groupedRowsRenderHeader } = grid.props;\n          // eslint-disable-next-line no-underscore-dangle\n          if (node && node._isGroup) {\n            return (\n              <>\n                <GroupRowHeaderWrapper {...rowProps}>\n                  <GroupRowHeaderTitle>\n                    {groupedRowsRenderHeader\n                      ? groupedRowsRenderHeader(node)\n                      : 'Group'}\n                  </GroupRowHeaderTitle>\n                </GroupRowHeaderWrapper>\n              </>\n            );\n          }\n          return <Row {...rowProps} />;\n        },\n      [],\n    );\n\n    return renderers;\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable no-underscore-dangle */\nimport React, { useMemo } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { VariableSizeList } from 'react-window';\nimport { walkTreeStrategy } from './walkStrategy';\nimport { RowSizes } from '../../rowSizes';\nimport { dataGridBlockName } from '../../blockNames';\n\nconst blockName = `${dataGridBlockName}-group-row-header`;\nconst GroupRowHeaderWrapper = aggregatedClasses('div')(blockName);\nconst GroupRowHeaderTitle = aggregatedClasses('div')(blockName, 'title');\n\nexport const GroupingPlugin = createInstancePlugin('groupedRows', {\n  decorateGrid(grid) {\n    const { columns, composedRows } = grid.getInstance();\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const detailColumns = useMemo(\n      () =>\n        columns\n          .map((column) => ({\n            ...column,\n            customRenderer: column.detailCustomRenderer,\n          }))\n          .filter((col) => !col.expandableColumn),\n      [columns],\n    );\n    const flatRows = [];\n    walkTreeStrategy({\n      data: composedRows,\n      cb: (n) => flatRows.push(n),\n    });\n    return {\n      detailColumns,\n      composedRows: flatRows,\n    };\n  },\n  getBodyProps(bodyProps, grid) {\n    const { composedRows: rows } = grid.getInstance();\n    // implementation of expandable row single column with aggregation\n    const getItemSize = (index) => {\n      const rowData = rows[index];\n      if (!rowData) return RowSizes.normal;\n      return rowData._isGroup || rowData.isGroup ? RowSizes.compact : RowSizes.normal;\n    };\n    // eslint-disable-next-line no-unused-vars\n    const getListHeight = () => {\n      const size = rows.reduce((h, r) => {\n        const rowHeight = r._isGroup || r.isGroup ? RowSizes.compact : RowSizes.normal;\n        return h + rowHeight;\n      }, 0);\n      return size;\n    };\n    return {\n      ...bodyProps,\n      getListHeight,\n      listComponent: VariableSizeList,\n      listProps: { itemSize: getItemSize },\n    };\n  },\n  composeRows: (rows, grid) => {\n    const {\n      composedRows,\n      props: { rowKey },\n    } = grid.getInstance();\n\n    if (Array.isArray(rows)) {\n      const filterIds = rows.map((r) => r.data[rowKey]);\n      return composedRows\n        .filter((c) => filterIds.includes(c.data[rowKey]))\n        .map((r) => ({\n          ...r.data,\n          children: Array.isArray(r.data.children)\n            ? r.data.children.filter((c) => filterIds.includes(c[rowKey]))\n            : r.data.children,\n          _isGroup: r.isGroup,\n        }))\n        .filter((g) => g.children === undefined || g.children.length > 0);\n    }\n    return {\n      ...rows,\n      allRows: rows.allRows.map((r) => ({\n        ...r.data,\n        _isGroup: r.isGroup,\n      })),\n      rows: rows.rows.map((r) => ({\n        ...r.data,\n        _isGroup: r.isGroup,\n      })),\n    };\n  },\n  decorateRenderers(renderers, grid) {\n    const Row = renderers.body.row;\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    renderers.body.row = useMemo(\n      () =>\n        // eslint-disable-next-line react/display-name\n        // eslint-disable-next-line react/prop-types\n        ({ isExpanded, ...rowProps }) => {\n          const { composedRows } = grid.getInstance();\n          // // https://jira.elliemae.io/browse/PUI-1667\n          const node = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;\n          const { groupedRowsRenderHeader } = grid.props;\n          // eslint-disable-next-line no-underscore-dangle\n          if (node && node._isGroup) {\n            return (\n              <>\n                <GroupRowHeaderWrapper {...rowProps}>\n                  <GroupRowHeaderTitle>\n                    {groupedRowsRenderHeader ? groupedRowsRenderHeader(node) : 'Group'}\n                  </GroupRowHeaderTitle>\n                </GroupRowHeaderWrapper>\n              </>\n            );\n          }\n          return <Row {...rowProps} />;\n        },\n      [],\n    );\n\n    return renderers;\n  },\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/plugins/infinite-scrolling/InfiniteScrollPlugin.js

@@ -60,7 +60,7 @@ __export(InfiniteScrollPlugin_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_createInstancePlugin = require("@elliemae/ds-shared/createDataInstance/createInstancePlugin");
+var import_ds_shared = require("@elliemae/ds-shared");
 const registerStateHook = (grid) => {
   const {
     props: { getData, onInfiniteScrolling = () => null },
@@ -121,7 +121,7 @@ const getBodyProps = (_a, grid) => {
     listProps: { outerRef: setBodyRef }
   });
 };
-const InfiniteScrollPlugin = (0, import_createInstancePlugin.createInstancePlugin)("infinite-scroll", {
+const InfiniteScrollPlugin = (0, import_ds_shared.createInstancePlugin)("infinite-scroll", {
   registerStateHook,
   getBodyProps
 });

package/dist/cjs/plugins/infinite-scrolling/InfiniteScrollPlugin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugins/infinite-scrolling/InfiniteScrollPlugin.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useEffect, useState } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\n\n// TODO: EXPORT A SEPARATED INFINITE LOADER GRID\n\nconst registerStateHook = (grid) => {\n  const {\n    props: { getData, onInfiniteScrolling = () => null },\n    actions: { updateRows },\n  } = grid;\n\n  const loading = useRef(false);\n\n  const addMoreData = (data = []) => {\n    loading.current = false;\n    updateRows((prevRows) => prevRows.concat(data || []));\n  };\n\n  const doLoadData = async (currentRows) => {\n    loading.current = true;\n    return Promise.resolve(getData(currentRows)).then(addMoreData);\n  };\n\n  const loadMoreData = (currentRows) => {\n    onInfiniteScrolling(currentRows);\n    if (loading.current || !getData) return;\n    doLoadData(currentRows);\n  };\n\n  return {\n    actions: {\n      loadMoreData,\n    },\n  };\n};\n\nconst getBodyProps = ({ children, ...props }, grid) => {\n  const { loadMoreData } = grid.getInstance().actions;\n\n  const [bodyNode, setBodyRef] = useState();\n  const prevScroll = useRef();\n  prevScroll.current = 0;\n\n  const handleBodyScroll = (event, s) => {\n    const { target } = event;\n    const { scrollHeight, scrollTop, offsetHeight, scrollLeft } = target;\n    const { composedRows } = grid.getInstance();\n    // prevent horizontal scroll triggering infinite scrolling callbacks\n    if (prevScroll.current !== scrollLeft) {\n      prevScroll.current = scrollLeft;\n      return;\n    }\n    // todo: clean this. Better approach using another component for the infinite scroll\n    if (bodyNode !== target) return;\n    if (scrollTop + offsetHeight >= scrollHeight - 1) {\n      loadMoreData(composedRows);\n    }\n  };\n\n  useEffect(() => {\n    if (bodyNode) {\n      bodyNode.addEventListener('scroll', handleBodyScroll);\n    }\n    return () => {\n      if (bodyNode) {\n        bodyNode.removeEventListener('scroll', handleBodyScroll);\n      }\n    };\n  }, [bodyNode]);\n\n  return {\n    ...props,\n    listProps: { outerRef: setBodyRef },\n  };\n};\n\nexport const InfiniteScrollPlugin = createInstancePlugin('infinite-scroll', {\n  registerStateHook,\n  getBodyProps,\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,kCAAqC;AAIrC,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,sBAAsB,MAAM;AAAA,IAC9C,SAAS,EAAE;AAAA,MACT;AAEJ,QAAM,UAAU,yBAAO;AAEvB,QAAM,cAAc,CAAC,OAAO,OAAO;AACjC,YAAQ,UAAU;AAClB,eAAW,CAAC,aAAa,SAAS,OAAO,QAAQ;AAAA;AAGnD,QAAM,aAAa,OAAO,gBAAgB;AACxC,YAAQ,UAAU;AAClB,WAAO,QAAQ,QAAQ,QAAQ,cAAc,KAAK;AAAA;AAGpD,QAAM,eAAe,CAAC,gBAAgB;AACpC,wBAAoB;AACpB,QAAI,QAAQ,WAAW,CAAC;AAAS;AACjC,eAAW;AAAA;AAGb,SAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA;AAAA;AAAA;AAKN,MAAM,eAAe,CAAC,IAAwB,SAAS;AAAjC,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,QAAM,EAAE,iBAAiB,KAAK,cAAc;AAE5C,QAAM,CAAC,UAAU,cAAc;AAC/B,QAAM,aAAa;AACnB,aAAW,UAAU;AAErB,QAAM,mBAAmB,CAAC,OAAO,MAAM;AACrC,UAAM,EAAE,WAAW;AACnB,UAAM,EAAE,cAAc,WAAW,cAAc,eAAe;AAC9D,UAAM,EAAE,iBAAiB,KAAK;AAE9B,QAAI,WAAW,YAAY,YAAY;AACrC,iBAAW,UAAU;AACrB;AAAA;AAGF,QAAI,aAAa;AAAQ;AACzB,QAAI,YAAY,gBAAgB,eAAe,GAAG;AAChD,mBAAa;AAAA;AAAA;AAIjB,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,iBAAiB,UAAU;AAAA;AAEtC,WAAO,MAAM;AACX,UAAI,UAAU;AACZ,iBAAS,oBAAoB,UAAU;AAAA;AAAA;AAAA,KAG1C,CAAC;AAEJ,SAAO,iCACF,QADE;AAAA,IAEL,WAAW,EAAE,UAAU;AAAA;AAAA;AAIpB,MAAM,uBAAuB,sDAAqB,mBAAmB;AAAA,EAC1E;AAAA,EACA;AAAA;",
+  "sourcesContent": ["import { useRef, useEffect, useState } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-shared';\n\n// TODO: EXPORT A SEPARATED INFINITE LOADER GRID\n\nconst registerStateHook = (grid) => {\n  const {\n    props: { getData, onInfiniteScrolling = () => null },\n    actions: { updateRows },\n  } = grid;\n\n  const loading = useRef(false);\n\n  const addMoreData = (data = []) => {\n    loading.current = false;\n    updateRows((prevRows) => prevRows.concat(data || []));\n  };\n\n  const doLoadData = async (currentRows) => {\n    loading.current = true;\n    return Promise.resolve(getData(currentRows)).then(addMoreData);\n  };\n\n  const loadMoreData = (currentRows) => {\n    onInfiniteScrolling(currentRows);\n    if (loading.current || !getData) return;\n    doLoadData(currentRows);\n  };\n\n  return {\n    actions: {\n      loadMoreData,\n    },\n  };\n};\n\nconst getBodyProps = ({ children, ...props }, grid) => {\n  const { loadMoreData } = grid.getInstance().actions;\n\n  const [bodyNode, setBodyRef] = useState();\n  const prevScroll = useRef();\n  prevScroll.current = 0;\n\n  const handleBodyScroll = (event, s) => {\n    const { target } = event;\n    const { scrollHeight, scrollTop, offsetHeight, scrollLeft } = target;\n    const { composedRows } = grid.getInstance();\n    // prevent horizontal scroll triggering infinite scrolling callbacks\n    if (prevScroll.current !== scrollLeft) {\n      prevScroll.current = scrollLeft;\n      return;\n    }\n    // todo: clean this. Better approach using another component for the infinite scroll\n    if (bodyNode !== target) return;\n    if (scrollTop + offsetHeight >= scrollHeight - 1) {\n      loadMoreData(composedRows);\n    }\n  };\n\n  useEffect(() => {\n    if (bodyNode) {\n      bodyNode.addEventListener('scroll', handleBodyScroll);\n    }\n    return () => {\n      if (bodyNode) {\n        bodyNode.removeEventListener('scroll', handleBodyScroll);\n      }\n    };\n  }, [bodyNode]);\n\n  return {\n    ...props,\n    listProps: { outerRef: setBodyRef },\n  };\n};\n\nexport const InfiniteScrollPlugin = createInstancePlugin('infinite-scroll', {\n  registerStateHook,\n  getBodyProps,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,uBAAqC;AAIrC,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,sBAAsB,MAAM;AAAA,IAC9C,SAAS,EAAE;AAAA,MACT;AAEJ,QAAM,UAAU,yBAAO;AAEvB,QAAM,cAAc,CAAC,OAAO,OAAO;AACjC,YAAQ,UAAU;AAClB,eAAW,CAAC,aAAa,SAAS,OAAO,QAAQ;AAAA;AAGnD,QAAM,aAAa,OAAO,gBAAgB;AACxC,YAAQ,UAAU;AAClB,WAAO,QAAQ,QAAQ,QAAQ,cAAc,KAAK;AAAA;AAGpD,QAAM,eAAe,CAAC,gBAAgB;AACpC,wBAAoB;AACpB,QAAI,QAAQ,WAAW,CAAC;AAAS;AACjC,eAAW;AAAA;AAGb,SAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA;AAAA;AAAA;AAKN,MAAM,eAAe,CAAC,IAAwB,SAAS;AAAjC,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,QAAM,EAAE,iBAAiB,KAAK,cAAc;AAE5C,QAAM,CAAC,UAAU,cAAc;AAC/B,QAAM,aAAa;AACnB,aAAW,UAAU;AAErB,QAAM,mBAAmB,CAAC,OAAO,MAAM;AACrC,UAAM,EAAE,WAAW;AACnB,UAAM,EAAE,cAAc,WAAW,cAAc,eAAe;AAC9D,UAAM,EAAE,iBAAiB,KAAK;AAE9B,QAAI,WAAW,YAAY,YAAY;AACrC,iBAAW,UAAU;AACrB;AAAA;AAGF,QAAI,aAAa;AAAQ;AACzB,QAAI,YAAY,gBAAgB,eAAe,GAAG;AAChD,mBAAa;AAAA;AAAA;AAIjB,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,iBAAiB,UAAU;AAAA;AAEtC,WAAO,MAAM;AACX,UAAI,UAAU;AACZ,iBAAS,oBAAoB,UAAU;AAAA;AAAA;AAAA,KAG1C,CAAC;AAEJ,SAAO,iCACF,QADE;AAAA,IAEL,WAAW,EAAE,UAAU;AAAA;AAAA;AAIpB,MAAM,uBAAuB,2CAAqB,mBAAmB;AAAA,EAC1E;AAAA,EACA;AAAA;",
   "names": []
 }