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

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

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createInstancePlugin } from "@elliemae/ds-legacy-shared";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+import { VariableSizeList } from "react-window";
+import { walkTreeStrategy } from "./walkStrategy.js";
+import { RowSizes } from "../../rowSizes.js";
+import { dataGridBlockName } from "../../blockNames.js";
+const blockName = `${dataGridBlockName}-group-row-header`;
+const GroupRowHeaderWrapper = aggregatedClasses("div")(blockName);
+const GroupRowHeaderTitle = aggregatedClasses("div")(blockName, "title");
+const GroupingPlugin = createInstancePlugin("groupedRows", {
+  decorateGrid(grid) {
+    const { columns, composedRows } = grid.getInstance();
+    const detailColumns = useMemo(
+      () => columns.map((column) => ({
+        ...column,
+        customRenderer: column.detailCustomRenderer
+      })).filter((col) => !col.expandableColumn),
+      [columns]
+    );
+    const flatRows = [];
+    walkTreeStrategy({
+      data: composedRows,
+      cb: (n) => flatRows.push(n)
+    });
+    return {
+      detailColumns,
+      composedRows: flatRows
+    };
+  },
+  getBodyProps(bodyProps, grid) {
+    const { composedRows: rows } = grid.getInstance();
+    const getItemSize = (index) => {
+      const rowData = rows[index];
+      if (!rowData)
+        return RowSizes.normal;
+      return rowData._isGroup || rowData.isGroup ? RowSizes.compact : RowSizes.normal;
+    };
+    const getListHeight = () => {
+      const size = rows.reduce((h, r) => {
+        const rowHeight = r._isGroup || r.isGroup ? RowSizes.compact : RowSizes.normal;
+        return h + rowHeight;
+      }, 0);
+      return size;
+    };
+    return {
+      ...bodyProps,
+      getListHeight,
+      listComponent: VariableSizeList,
+      listProps: { itemSize: getItemSize }
+    };
+  },
+  composeRows: (rows, grid) => {
+    const {
+      composedRows,
+      props: { rowKey }
+    } = grid.getInstance();
+    if (Array.isArray(rows)) {
+      const filterIds = rows.map((r) => r.data[rowKey]);
+      return composedRows.filter((c) => filterIds.includes(c.data[rowKey])).map((r) => ({
+        ...r.data,
+        children: Array.isArray(r.data.children) ? r.data.children.filter((c) => filterIds.includes(c[rowKey])) : r.data.children,
+        _isGroup: r.isGroup
+      })).filter((g) => g.children === void 0 || g.children.length > 0);
+    }
+    return {
+      ...rows,
+      allRows: rows.allRows.map((r) => ({
+        ...r.data,
+        _isGroup: r.isGroup
+      })),
+      rows: rows.rows.map((r) => ({
+        ...r.data,
+        _isGroup: r.isGroup
+      }))
+    };
+  },
+  decorateRenderers(renderers, grid) {
+    const Row = renderers.body.row;
+    renderers.body.row = useMemo(
+      () => (
+        // eslint-disable-next-line react/display-name
+        // eslint-disable-next-line react/prop-types
+        function({ isExpanded, ...rowProps }) {
+          const { composedRows } = grid.getInstance();
+          const node = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
+          const { groupedRowsRenderHeader } = grid.props;
+          if (node && node._isGroup) {
+            return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(GroupRowHeaderWrapper, { ...rowProps, children: /* @__PURE__ */ jsx(GroupRowHeaderTitle, { children: groupedRowsRenderHeader ? groupedRowsRenderHeader(node) : "Group" }) }) });
+          }
+          return /* @__PURE__ */ jsx(Row, { ...rowProps });
+        }
+      ),
+      []
+    );
+    return renderers;
+  }
+});
+export {
+  GroupingPlugin
+};
+//# sourceMappingURL=GroupingPlugin.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/grouping-grid/GroupingPlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable no-underscore-dangle */\nimport React, { useMemo } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-legacy-shared';\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\nimport { VariableSizeList } from 'react-window';\nimport { walkTreeStrategy } from './walkStrategy.js';\nimport { RowSizes } from '../../rowSizes.js';\nimport { dataGridBlockName } from '../../blockNames.js';\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        function ({ 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"],
+  "mappings": "AAAA,YAAY,WAAW;AC2GT,mBAEI,WAFJ;AAzGd,SAAgB,eAAe;AAC/B,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAElC,MAAM,YAAY,GAAG;AACrB,MAAM,wBAAwB,kBAAkB,KAAK,EAAE,SAAS;AAChE,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,WAAW,OAAO;AAEhE,MAAM,iBAAiB,qBAAqB,eAAe;AAAA,EAChE,aAAa,MAAM;AACjB,UAAM,EAAE,SAAS,aAAa,IAAI,KAAK,YAAY;AAEnD,UAAM,gBAAgB;AAAA,MACpB,MACE,QACG,IAAI,CAAC,YAAY;AAAA,QAChB,GAAG;AAAA,QACH,gBAAgB,OAAO;AAAA,MACzB,EAAE,EACD,OAAO,CAAC,QAAQ,CAAC,IAAI,gBAAgB;AAAA,MAC1C,CAAC,OAAO;AAAA,IACV;AACA,UAAM,WAAW,CAAC;AAClB,qBAAiB;AAAA,MACf,MAAM;AAAA,MACN,IAAI,CAAC,MAAM,SAAS,KAAK,CAAC;AAAA,IAC5B,CAAC;AACD,WAAO;AAAA,MACL;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,aAAa,WAAW,MAAM;AAC5B,UAAM,EAAE,cAAc,KAAK,IAAI,KAAK,YAAY;AAEhD,UAAM,cAAc,CAAC,UAAU;AAC7B,YAAM,UAAU,KAAK,KAAK;AAC1B,UAAI,CAAC;AAAS,eAAO,SAAS;AAC9B,aAAO,QAAQ,YAAY,QAAQ,UAAU,SAAS,UAAU,SAAS;AAAA,IAC3E;AAEA,UAAM,gBAAgB,MAAM;AAC1B,YAAM,OAAO,KAAK,OAAO,CAAC,GAAG,MAAM;AACjC,cAAM,YAAY,EAAE,YAAY,EAAE,UAAU,SAAS,UAAU,SAAS;AACxE,eAAO,IAAI;AAAA,MACb,GAAG,CAAC;AACJ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,eAAe;AAAA,MACf,WAAW,EAAE,UAAU,YAAY;AAAA,IACrC;AAAA,EACF;AAAA,EACA,aAAa,CAAC,MAAM,SAAS;AAC3B,UAAM;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,OAAO;AAAA,IAClB,IAAI,KAAK,YAAY;AAErB,QAAI,MAAM,QAAQ,IAAI,GAAG;AACvB,YAAM,YAAY,KAAK,IAAI,CAAC,MAAM,EAAE,KAAK,MAAM,CAAC;AAChD,aAAO,aACJ,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,KAAK,MAAM,CAAC,CAAC,EAChD,IAAI,CAAC,OAAO;AAAA,QACX,GAAG,EAAE;AAAA,QACL,UAAU,MAAM,QAAQ,EAAE,KAAK,QAAQ,IACnC,EAAE,KAAK,SAAS,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,MAAM,CAAC,CAAC,IAC3D,EAAE,KAAK;AAAA,QACX,UAAU,EAAE;AAAA,MACd,EAAE,EACD,OAAO,CAAC,MAAM,EAAE,aAAa,UAAa,EAAE,SAAS,SAAS,CAAC;AAAA,IACpE;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,SAAS,KAAK,QAAQ,IAAI,CAAC,OAAO;AAAA,QAChC,GAAG,EAAE;AAAA,QACL,UAAU,EAAE;AAAA,MACd,EAAE;AAAA,MACF,MAAM,KAAK,KAAK,IAAI,CAAC,OAAO;AAAA,QAC1B,GAAG,EAAE;AAAA,QACL,UAAU,EAAE;AAAA,MACd,EAAE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,kBAAkB,WAAW,MAAM;AACjC,UAAM,MAAM,UAAU,KAAK;AAE3B,cAAU,KAAK,MAAM;AAAA,MACnB;AAAA;AAAA;AAAA,QAGE,SAAU,EAAE,YAAY,GAAG,SAAS,GAAG;AACrC,gBAAM,EAAE,aAAa,IAAI,KAAK,YAAY;AAE1C,gBAAM,OAAO,aAAa,SAAS,KAAK,IAAI,aAAa,SAAS,KAAK,IAAI,SAAS;AACpF,gBAAM,EAAE,wBAAwB,IAAI,KAAK;AAEzC,cAAI,QAAQ,KAAK,UAAU;AACzB,mBACE,gCACE,8BAAC,yBAAuB,GAAG,UACzB,8BAAC,uBACE,oCAA0B,wBAAwB,IAAI,IAAI,SAC7D,GACF,GACF;AAAA,UAEJ;AACA,iBAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,QAC5B;AAAA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AACF,CAAC;",
+  "names": []
+}

package/dist/esm/plugins/grouping-grid/walkStrategy.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+function getPath(parentNode, index, childrenKey) {
+  if (!parentNode)
+    return [index];
+  return [...parentNode.path, childrenKey, index];
+}
+function walkTreeStrategy({
+  data,
+  childrenKey = "children",
+  level = 0,
+  getId = (item) => item.id,
+  parentNode,
+  shouldWalkChildren = () => true,
+  cb
+}) {
+  for (let i = 0; i < data.length; i++) {
+    const currLevel = level + 1;
+    const children = data[i][childrenKey];
+    const isGroup = children && !!children.length;
+    const node = {
+      index: i,
+      id: getId(data[i]),
+      data: data[i],
+      path: getPath(parentNode, i, childrenKey),
+      isGroup,
+      nestingLevel: currLevel,
+      parentNode: parentNode || {
+        isGroup: true,
+        data: { children: data }
+      }
+    };
+    cb(node);
+    if (shouldWalkChildren(node) && children && children.length) {
+      walkTreeStrategy({
+        data: children,
+        level: currLevel,
+        parentNode: node,
+        shouldWalkChildren,
+        cb
+      });
+    }
+  }
+}
+export {
+  walkTreeStrategy
+};
+//# sourceMappingURL=walkStrategy.js.map

package/dist/esm/plugins/grouping-grid/walkStrategy.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/grouping-grid/walkStrategy.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "function getPath(parentNode, index, childrenKey) {\n  if (!parentNode) return [index];\n  return [...parentNode.path, childrenKey, index];\n}\n\nexport function walkTreeStrategy({\n  data,\n  childrenKey = 'children',\n  level = 0,\n  getId = (item) => item.id,\n  parentNode,\n  shouldWalkChildren = () => true,\n  cb,\n}) {\n  // eslint-disable-next-line no-loops/no-loops,no-plusplus\n  for (let i = 0; i < data.length; i++) {\n    const currLevel = level + 1;\n    const children = data[i][childrenKey];\n    const isGroup = children && !!children.length;\n    const node = {\n      index: i,\n      id: getId(data[i]),\n      data: data[i],\n      path: getPath(parentNode, i, childrenKey),\n      isGroup,\n      nestingLevel: currLevel,\n      parentNode: parentNode || {\n        isGroup: true,\n        data: { children: data },\n      },\n    };\n    cb(node);\n    if (shouldWalkChildren(node) && children && children.length) {\n      walkTreeStrategy({\n        data: children,\n        level: currLevel,\n        parentNode: node,\n        shouldWalkChildren,\n        cb,\n      });\n    }\n  }\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,YAAY,OAAO,aAAa;AAC/C,MAAI,CAAC;AAAY,WAAO,CAAC,KAAK;AAC9B,SAAO,CAAC,GAAG,WAAW,MAAM,aAAa,KAAK;AAChD;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ,CAAC,SAAS,KAAK;AAAA,EACvB;AAAA,EACA,qBAAqB,MAAM;AAAA,EAC3B;AACF,GAAG;AAED,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,UAAM,YAAY,QAAQ;AAC1B,UAAM,WAAW,KAAK,CAAC,EAAE,WAAW;AACpC,UAAM,UAAU,YAAY,CAAC,CAAC,SAAS;AACvC,UAAM,OAAO;AAAA,MACX,OAAO;AAAA,MACP,IAAI,MAAM,KAAK,CAAC,CAAC;AAAA,MACjB,MAAM,KAAK,CAAC;AAAA,MACZ,MAAM,QAAQ,YAAY,GAAG,WAAW;AAAA,MACxC;AAAA,MACA,cAAc;AAAA,MACd,YAAY,cAAc;AAAA,QACxB,SAAS;AAAA,QACT,MAAM,EAAE,UAAU,KAAK;AAAA,MACzB;AAAA,IACF;AACA,OAAG,IAAI;AACP,QAAI,mBAAmB,IAAI,KAAK,YAAY,SAAS,QAAQ;AAC3D,uBAAiB;AAAA,QACf,MAAM;AAAA,QACN,OAAO;AAAA,QACP,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/plugins/index.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { BodyHeaderScrollSyncPlugin } from "./body-header-scroll-sync/index.js";
+import { DndColumnsPlugin } from "./column-dnd/index.js";
+import { ColumnSizingPlugin } from "./column-sizing/index.js";
+import { CustomRendererPlugin } from "./custom-cell-renderer/index.js";
+import { EditablePlugin, ComboBox, TextBox } from "./editable/index.js";
+import { ExpandableColumn, ExpandablePlugin } from "./expandable-grid/index.js";
+import { FilterablePlugin } from "./filterable/index.js";
+import { InfiniteScrollPlugin } from "./infinite-scrolling/index.js";
+import { PaginationPlugin } from "./pagination/index.js";
+import { ResizablePlugin } from "./resizable/index.js";
+import { DndRowsPlugin } from "./row-dnd/index.js";
+import { SelectablePlugin } from "./selectable/index.js";
+import { SortablePlugin } from "./sortable/index.js";
+import { ToolbarPlugin } from "./toolbar/index.js";
+import { ExportDataPlugin } from "./export-data/index.js";
+import { VirtualizationPlugin } from "./virtualization/index.js";
+export {
+  BodyHeaderScrollSyncPlugin,
+  ColumnSizingPlugin,
+  ComboBox,
+  CustomRendererPlugin,
+  DndColumnsPlugin,
+  DndRowsPlugin,
+  EditablePlugin,
+  ExpandableColumn,
+  ExpandablePlugin,
+  ExportDataPlugin,
+  FilterablePlugin,
+  InfiniteScrollPlugin,
+  PaginationPlugin,
+  ResizablePlugin,
+  SelectablePlugin,
+  SortablePlugin,
+  TextBox,
+  ToolbarPlugin,
+  VirtualizationPlugin
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/plugins/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { BodyHeaderScrollSyncPlugin } from './body-header-scroll-sync/index.js';\nexport { DndColumnsPlugin } from './column-dnd/index.js';\nexport { ColumnSizingPlugin } from './column-sizing/index.js';\nexport { CustomRendererPlugin } from './custom-cell-renderer/index.js';\nexport { EditablePlugin, ComboBox, TextBox } from './editable/index.js';\nexport { ExpandableColumn, ExpandablePlugin } from './expandable-grid/index.js';\nexport { FilterablePlugin } from './filterable/index.js';\nexport { InfiniteScrollPlugin } from './infinite-scrolling/index.js';\nexport { PaginationPlugin } from './pagination/index.js';\nexport { ResizablePlugin } from './resizable/index.js';\nexport { DndRowsPlugin } from './row-dnd/index.js';\nexport { SelectablePlugin } from './selectable/index.js';\nexport { SortablePlugin } from './sortable/index.js';\nexport { ToolbarPlugin } from './toolbar/index.js';\nexport { ExportDataPlugin } from './export-data/index.js';\nexport { VirtualizationPlugin } from './virtualization/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB,UAAU,eAAe;AAClD,SAAS,kBAAkB,wBAAwB;AACnD,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;",
+  "names": []
+}

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

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { useRef, useEffect, useState } from "react";
+import { createInstancePlugin } from "@elliemae/ds-legacy-shared";
+const registerStateHook = (grid) => {
+  const {
+    props: { getData, onInfiniteScrolling = () => null },
+    actions: { updateRows }
+  } = grid;
+  const loading = useRef(false);
+  const addMoreData = (data = []) => {
+    loading.current = false;
+    updateRows((prevRows) => prevRows.concat(data || []));
+  };
+  const doLoadData = async (currentRows) => {
+    loading.current = true;
+    return Promise.resolve(getData(currentRows)).then(addMoreData);
+  };
+  const loadMoreData = (currentRows) => {
+    onInfiniteScrolling(currentRows);
+    if (loading.current || !getData)
+      return;
+    doLoadData(currentRows);
+  };
+  return {
+    actions: {
+      loadMoreData
+    }
+  };
+};
+const getBodyProps = ({ children, ...props }, grid) => {
+  const { loadMoreData } = grid.getInstance().actions;
+  const [bodyNode, setBodyRef] = useState();
+  const prevScroll = useRef();
+  prevScroll.current = 0;
+  const handleBodyScroll = (event, s) => {
+    const { target } = event;
+    const { scrollHeight, scrollTop, offsetHeight, scrollLeft } = target;
+    const { composedRows } = grid.getInstance();
+    if (prevScroll.current !== scrollLeft) {
+      prevScroll.current = scrollLeft;
+      return;
+    }
+    if (bodyNode !== target)
+      return;
+    if (scrollTop + offsetHeight >= scrollHeight - 1) {
+      loadMoreData(composedRows);
+    }
+  };
+  useEffect(() => {
+    if (bodyNode) {
+      bodyNode.addEventListener("scroll", handleBodyScroll);
+    }
+    return () => {
+      if (bodyNode) {
+        bodyNode.removeEventListener("scroll", handleBodyScroll);
+      }
+    };
+  }, [bodyNode]);
+  return {
+    ...props,
+    listProps: { outerRef: setBodyRef }
+  };
+};
+const InfiniteScrollPlugin = createInstancePlugin("infinite-scroll", {
+  registerStateHook,
+  getBodyProps
+});
+export {
+  InfiniteScrollPlugin
+};
+//# sourceMappingURL=InfiniteScrollPlugin.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/infinite-scrolling/InfiniteScrollPlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useEffect, useState } from 'react';\nimport { createInstancePlugin } from '@elliemae/ds-legacy-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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW,gBAAgB;AAC5C,SAAS,4BAA4B;AAIrC,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,sBAAsB,MAAM,KAAK;AAAA,IACnD,SAAS,EAAE,WAAW;AAAA,EACxB,IAAI;AAEJ,QAAM,UAAU,OAAO,KAAK;AAE5B,QAAM,cAAc,CAAC,OAAO,CAAC,MAAM;AACjC,YAAQ,UAAU;AAClB,eAAW,CAAC,aAAa,SAAS,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAA,EACtD;AAEA,QAAM,aAAa,OAAO,gBAAgB;AACxC,YAAQ,UAAU;AAClB,WAAO,QAAQ,QAAQ,QAAQ,WAAW,CAAC,EAAE,KAAK,WAAW;AAAA,EAC/D;AAEA,QAAM,eAAe,CAAC,gBAAgB;AACpC,wBAAoB,WAAW;AAC/B,QAAI,QAAQ,WAAW,CAAC;AAAS;AACjC,eAAW,WAAW;AAAA,EACxB;AAEA,SAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,eAAe,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS;AACrD,QAAM,EAAE,aAAa,IAAI,KAAK,YAAY,EAAE;AAE5C,QAAM,CAAC,UAAU,UAAU,IAAI,SAAS;AACxC,QAAM,aAAa,OAAO;AAC1B,aAAW,UAAU;AAErB,QAAM,mBAAmB,CAAC,OAAO,MAAM;AACrC,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,EAAE,cAAc,WAAW,cAAc,WAAW,IAAI;AAC9D,UAAM,EAAE,aAAa,IAAI,KAAK,YAAY;AAE1C,QAAI,WAAW,YAAY,YAAY;AACrC,iBAAW,UAAU;AACrB;AAAA,IACF;AAEA,QAAI,aAAa;AAAQ;AACzB,QAAI,YAAY,gBAAgB,eAAe,GAAG;AAChD,mBAAa,YAAY;AAAA,IAC3B;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,iBAAiB,UAAU,gBAAgB;AAAA,IACtD;AACA,WAAO,MAAM;AACX,UAAI,UAAU;AACZ,iBAAS,oBAAoB,UAAU,gBAAgB;AAAA,MACzD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,EAAE,UAAU,WAAW;AAAA,EACpC;AACF;AAEO,MAAM,uBAAuB,qBAAqB,mBAAmB;AAAA,EAC1E;AAAA,EACA;AACF,CAAC;",
+  "names": []
+}

package/dist/esm/plugins/infinite-scrolling/index.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { InfiniteScrollPlugin } from "./InfiniteScrollPlugin.js";
+export {
+  InfiniteScrollPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/plugins/infinite-scrolling/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/infinite-scrolling/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { InfiniteScrollPlugin } from './InfiniteScrollPlugin.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,4BAA4B;",
+  "names": []
+}

package/dist/esm/plugins/pagination/PaginationPlugin.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2, { useMemo } from "react";
+import { mergeRefs } from "@elliemae/ds-legacy-utilities";
+import { createInstancePlugin, FocusGrid } from "@elliemae/ds-legacy-shared";
+import { paginate } from "./helper.js";
+import { usePaginationState } from "./usePaginationState.js";
+import { NoResults } from "../../components/NoResults.js";
+const composeRows = (rows, grid) => {
+  const {
+    state: { pagination },
+    props: { groupedRows }
+  } = grid.getInstance();
+  if (groupedRows)
+    return rows;
+  if (groupedRows) {
+    const filterIds = rows.map((r) => r.id);
+    return paginate(
+      rows.filter((c) => filterIds.includes(c.id)).map((r) => ({
+        ...r,
+        _isGroup: r.isGroup
+      })),
+      pagination
+    );
+  }
+  return paginate(rows, pagination);
+};
+const Body = React2.memo(
+  ({
+    component: Component,
+    rows,
+    rowRenderer,
+    noResultsPlaceholder,
+    innerRef,
+    innerBodyRef,
+    // depends on body-header-scroll-sync
+    isPlaceholderActive = false,
+    ...otherBodyProps
+  }) => /* @__PURE__ */ jsx(Component, { ...otherBodyProps, innerRef: mergeRefs(innerRef), children: !isPlaceholderActive ? rows.map((row, index) => rowRenderer(row, { index, rowIndex: index }, {})) : /* @__PURE__ */ jsx(NoResults, { innerRef, rowRenderer, children: noResultsPlaceholder }) })
+);
+const decorateRenderers = (renderers, grid) => {
+  const BodyWrapper = renderers.body.wrapper;
+  renderers.body.wrapper = useMemo(
+    () => function(props) {
+      const { hotKeys, shouldRefocus, state } = grid.getInstance();
+      return /* @__PURE__ */ jsx(FocusGrid, { hotKeys, shouldRefocus: false, children: /* @__PURE__ */ jsx(Body, { ...props, component: BodyWrapper }) });
+    },
+    []
+  );
+  return renderers;
+};
+const PaginationPlugin = createInstancePlugin("pagination", {
+  registerStateHook: usePaginationState,
+  decorateRenderers,
+  composeRows
+});
+export {
+  PaginationPlugin
+};
+//# sourceMappingURL=PaginationPlugin.js.map

package/dist/esm/plugins/pagination/PaginationPlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/pagination/PaginationPlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/display-name */\nimport React, { useMemo } from 'react';\nimport { mergeRefs } from '@elliemae/ds-legacy-utilities';\nimport { createInstancePlugin, FocusGrid } from '@elliemae/ds-legacy-shared';\nimport { paginate } from './helper.js';\nimport { usePaginationState } from './usePaginationState.js';\nimport { NoResults } from '../../components/NoResults.js';\n\nconst composeRows = (rows, grid) => {\n  const {\n    state: { pagination },\n    props: { groupedRows },\n  } = grid.getInstance();\n  if (groupedRows) return rows; // disable pagination with grouping\n  if (groupedRows) {\n    const filterIds = rows.map((r) => r.id);\n    return paginate(\n      rows\n        .filter((c) => filterIds.includes(c.id))\n        .map((r) => ({\n          ...r,\n          _isGroup: r.isGroup,\n        })),\n      pagination,\n    );\n  }\n\n  return paginate(rows, pagination);\n};\n\nconst Body = React.memo(\n  ({\n    component: Component,\n    rows,\n    rowRenderer,\n    noResultsPlaceholder,\n    innerRef,\n    innerBodyRef, // depends on body-header-scroll-sync\n    isPlaceholderActive = false,\n    ...otherBodyProps\n  }) => (\n    <Component {...otherBodyProps} innerRef={mergeRefs(innerRef)}>\n      {!isPlaceholderActive ? (\n        rows.map((row, index) => rowRenderer(row, { index, rowIndex: index }, {}))\n      ) : (\n        <NoResults innerRef={innerRef} rowRenderer={rowRenderer}>\n          {noResultsPlaceholder}\n        </NoResults>\n      )}\n    </Component>\n  ),\n);\n\nconst decorateRenderers = (renderers, grid) => {\n  const BodyWrapper = renderers.body.wrapper;\n  renderers.body.wrapper = useMemo(\n    () =>\n      function (props) {\n        const { hotKeys, shouldRefocus, state } = grid.getInstance();\n        return (\n          <FocusGrid hotKeys={hotKeys} shouldRefocus={false}>\n            <Body {...props} component={BodyWrapper} />\n          </FocusGrid>\n        );\n      },\n    [],\n  );\n  return renderers;\n};\n\nexport const PaginationPlugin = createInstancePlugin('pagination', {\n  registerStateHook: usePaginationState,\n  decorateRenderers,\n  composeRows,\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6Cf;AA5CR,OAAOA,UAAS,eAAe;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB,iBAAiB;AAChD,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAE1B,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,IACpB,OAAO,EAAE,YAAY;AAAA,EACvB,IAAI,KAAK,YAAY;AACrB,MAAI;AAAa,WAAO;AACxB,MAAI,aAAa;AACf,UAAM,YAAY,KAAK,IAAI,CAAC,MAAM,EAAE,EAAE;AACtC,WAAO;AAAA,MACL,KACG,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,EAAE,CAAC,EACtC,IAAI,CAAC,OAAO;AAAA,QACX,GAAG;AAAA,QACH,UAAU,EAAE;AAAA,MACd,EAAE;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AAEA,SAAO,SAAS,MAAM,UAAU;AAClC;AAEA,MAAM,OAAOA,OAAM;AAAA,EACjB,CAAC;AAAA,IACC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IACA,sBAAsB;AAAA,IACtB,GAAG;AAAA,EACL,MACE,oBAAC,aAAW,GAAG,gBAAgB,UAAU,UAAU,QAAQ,GACxD,WAAC,sBACA,KAAK,IAAI,CAAC,KAAK,UAAU,YAAY,KAAK,EAAE,OAAO,UAAU,MAAM,GAAG,CAAC,CAAC,CAAC,IAEzE,oBAAC,aAAU,UAAoB,aAC5B,gCACH,GAEJ;AAEJ;AAEA,MAAM,oBAAoB,CAAC,WAAW,SAAS;AAC7C,QAAM,cAAc,UAAU,KAAK;AACnC,YAAU,KAAK,UAAU;AAAA,IACvB,MACE,SAAU,OAAO;AACf,YAAM,EAAE,SAAS,eAAe,MAAM,IAAI,KAAK,YAAY;AAC3D,aACE,oBAAC,aAAU,SAAkB,eAAe,OAC1C,8BAAC,QAAM,GAAG,OAAO,WAAW,aAAa,GAC3C;AAAA,IAEJ;AAAA,IACF,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,MAAM,mBAAmB,qBAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AACF,CAAC;",
+  "names": ["React"]
+}

package/dist/esm/plugins/pagination/components/Pagination.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+import { Paginator } from "./Paginator.js";
+import { PerPageDropdown } from "./PerPageDropdown.js";
+const PaginationControls = aggregatedClasses("div")("data-grid", "controls-pagination");
+const Pagination = ({
+  paginated,
+  pagination = {},
+  onPerPage,
+  onPageSelect,
+  paginationStep = 5,
+  maxPerPage = 10,
+  minPerPage = 5
+}) => {
+  const { perPage } = pagination;
+  if (pagination && pagination.conditionalPagination === true && paginated.amount === 1)
+    return null;
+  return paginated.amount > 0 ? /* @__PURE__ */ jsxs(PaginationControls, { children: [
+    /* @__PURE__ */ jsx(PerPageDropdown, { max: maxPerPage, min: minPerPage, onChange: onPerPage, step: paginationStep, value: perPage }),
+    /* @__PURE__ */ jsx(Paginator, { onSelect: onPageSelect, pages: paginated.amount, pagination })
+  ] }) : null;
+};
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/esm/plugins/pagination/components/Pagination.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/pagination/components/Pagination.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\nimport { Paginator } from './Paginator.js';\nimport { PerPageDropdown } from './PerPageDropdown.js';\n\nconst PaginationControls = aggregatedClasses('div')('data-grid', 'controls-pagination');\n\nconst Pagination = ({\n  paginated,\n  pagination = {},\n  onPerPage,\n  onPageSelect,\n  paginationStep = 5,\n  maxPerPage = 10,\n  minPerPage = 5,\n}) => {\n  const { perPage } = pagination;\n  if (pagination && pagination.conditionalPagination === true && paginated.amount === 1) return null;\n  return paginated.amount > 0 ? (\n    <PaginationControls>\n      <PerPageDropdown max={maxPerPage} min={minPerPage} onChange={onPerPage} step={paginationStep} value={perPage} />\n      <Paginator onSelect={onPageSelect} pages={paginated.amount} pagination={pagination} />\n    </PaginationControls>\n  ) : null;\n};\n\nexport { Pagination };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBnB,SACE,KADF;AAlBJ,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,MAAM,qBAAqB,kBAAkB,KAAK,EAAE,aAAa,qBAAqB;AAEtF,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AACf,MAAM;AACJ,QAAM,EAAE,QAAQ,IAAI;AACpB,MAAI,cAAc,WAAW,0BAA0B,QAAQ,UAAU,WAAW;AAAG,WAAO;AAC9F,SAAO,UAAU,SAAS,IACxB,qBAAC,sBACC;AAAA,wBAAC,mBAAgB,KAAK,YAAY,KAAK,YAAY,UAAU,WAAW,MAAM,gBAAgB,OAAO,SAAS;AAAA,IAC9G,oBAAC,aAAU,UAAU,cAAc,OAAO,UAAU,QAAQ,YAAwB;AAAA,KACtF,IACE;AACN;",
+  "names": []
+}

package/dist/esm/plugins/pagination/components/Paginator.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { default as ReactPagify } from "react-pagify";
+import segmentize from "segmentize";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+const Comp = ReactPagify?.default ?? ReactPagify;
+const blockName = "data-grid";
+const PaginationContainer = aggregatedClasses("div")(blockName, "pagination");
+const PagifyContext = aggregatedClasses(Comp?.Context)(blockName, "pagify-pagination");
+const Paginator = ({ pagination, pages, onSelect, labelPrevious = "Previous", labelNext = "Next" }) => {
+  const prevPage = pagination.page - 1;
+  const nextPage = pagination.page + 1;
+  return /* @__PURE__ */ jsx(PaginationContainer, { children: /* @__PURE__ */ jsxs(
+    PagifyContext,
+    {
+      onSelect: (page) => page !== pagination.page && onSelect(page),
+      segments: segmentize({
+        page: pagination.page,
+        pages,
+        beginPages: 1,
+        endPages: 1,
+        sidePages: 1
+      }),
+      children: [
+        /* @__PURE__ */ jsx(Comp.Button, { className: pagination.page <= 1 ? "button-disabled" : "", page: prevPage, children: labelPrevious }),
+        /* @__PURE__ */ jsx(Comp.Segment, { field: "beginPages" }),
+        /* @__PURE__ */ jsx(Comp.Ellipsis, { className: "ellipsis", nextField: "previousPages", previousField: "beginPages" }),
+        /* @__PURE__ */ jsx(Comp.Segment, { field: "previousPages" }),
+        /* @__PURE__ */ jsx(Comp.Segment, { className: "selected", field: "centerPage" }),
+        /* @__PURE__ */ jsx(Comp.Segment, { field: "nextPages" }),
+        /* @__PURE__ */ jsx(Comp.Ellipsis, { className: "ellipsis", nextField: "endPages", previousField: "nextPages" }),
+        /* @__PURE__ */ jsx(Comp.Segment, { field: "endPages" }),
+        /* @__PURE__ */ jsx(Comp.Button, { className: pagination.page >= pages ? "button-disabled" : "", page: nextPage, children: labelNext })
+      ]
+    }
+  ) });
+};
+var Paginator_default = Paginator;
+export {
+  Paginator,
+  Paginator_default as default
+};
+//# sourceMappingURL=Paginator.js.map

package/dist/esm/plugins/pagination/components/Paginator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/pagination/components/Paginator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable @typescript-eslint/no-unsafe-member-access */\nimport React from 'react';\nimport { default as ReactPagify } from 'react-pagify';\nimport segmentize from 'segmentize';\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\n\nconst Comp = (ReactPagify as any)?.default ?? ReactPagify;\nconst blockName = 'data-grid';\nconst PaginationContainer = aggregatedClasses('div')(blockName, 'pagination');\nconst PagifyContext = aggregatedClasses(Comp?.Context)(blockName, 'pagify-pagination');\n\nconst Paginator = ({ pagination, pages, onSelect, labelPrevious = 'Previous', labelNext = 'Next' }) => {\n  const prevPage = pagination.page - 1;\n  const nextPage = pagination.page + 1;\n\n  return (\n    <PaginationContainer>\n      <PagifyContext\n        onSelect={(page) => page !== pagination.page && onSelect(page)}\n        segments={segmentize({\n          page: pagination.page,\n          pages,\n          beginPages: 1,\n          endPages: 1,\n          sidePages: 1,\n        })}\n      >\n        <Comp.Button className={pagination.page <= 1 ? 'button-disabled' : ''} page={prevPage}>\n          {labelPrevious}\n        </Comp.Button>\n\n        <Comp.Segment field=\"beginPages\" />\n\n        <Comp.Ellipsis className=\"ellipsis\" nextField=\"previousPages\" previousField=\"beginPages\" />\n\n        <Comp.Segment field=\"previousPages\" />\n        <Comp.Segment className=\"selected\" field=\"centerPage\" />\n        <Comp.Segment field=\"nextPages\" />\n\n        <Comp.Ellipsis className=\"ellipsis\" nextField=\"endPages\" previousField=\"nextPages\" />\n\n        <Comp.Segment field=\"endPages\" />\n\n        <Comp.Button className={pagination.page >= pages ? 'button-disabled' : ''} page={nextPage}>\n          {labelNext}\n        </Comp.Button>\n      </PagifyContext>\n    </PaginationContainer>\n  );\n};\n\nexport { Paginator };\nexport default Paginator;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBjB,SAUE,KAVF;AAfN,SAAS,WAAW,mBAAmB;AACvC,OAAO,gBAAgB;AACvB,SAAS,yBAAyB;AAElC,MAAM,OAAQ,aAAqB,WAAW;AAC9C,MAAM,YAAY;AAClB,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,WAAW,YAAY;AAC5E,MAAM,gBAAgB,kBAAkB,MAAM,OAAO,EAAE,WAAW,mBAAmB;AAErF,MAAM,YAAY,CAAC,EAAE,YAAY,OAAO,UAAU,gBAAgB,YAAY,YAAY,OAAO,MAAM;AACrG,QAAM,WAAW,WAAW,OAAO;AACnC,QAAM,WAAW,WAAW,OAAO;AAEnC,SACE,oBAAC,uBACC;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC,SAAS,SAAS,WAAW,QAAQ,SAAS,IAAI;AAAA,MAC7D,UAAU,WAAW;AAAA,QACnB,MAAM,WAAW;AAAA,QACjB;AAAA,QACA,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,MACb,CAAC;AAAA,MAED;AAAA,4BAAC,KAAK,QAAL,EAAY,WAAW,WAAW,QAAQ,IAAI,oBAAoB,IAAI,MAAM,UAC1E,yBACH;AAAA,QAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,cAAa;AAAA,QAEjC,oBAAC,KAAK,UAAL,EAAc,WAAU,YAAW,WAAU,iBAAgB,eAAc,cAAa;AAAA,QAEzF,oBAAC,KAAK,SAAL,EAAa,OAAM,iBAAgB;AAAA,QACpC,oBAAC,KAAK,SAAL,EAAa,WAAU,YAAW,OAAM,cAAa;AAAA,QACtD,oBAAC,KAAK,SAAL,EAAa,OAAM,aAAY;AAAA,QAEhC,oBAAC,KAAK,UAAL,EAAc,WAAU,YAAW,WAAU,YAAW,eAAc,aAAY;AAAA,QAEnF,oBAAC,KAAK,SAAL,EAAa,OAAM,YAAW;AAAA,QAE/B,oBAAC,KAAK,QAAL,EAAY,WAAW,WAAW,QAAQ,QAAQ,oBAAoB,IAAI,MAAM,UAC9E,qBACH;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAGA,IAAO,oBAAQ;",
+  "names": []
+}

package/dist/esm/plugins/pagination/components/PerPageDropdown.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import memoize from "memoize-one";
+import { range } from "@elliemae/ds-legacy-utilities";
+import { DSComboBox, components } from "@elliemae/ds-legacy-form";
+const SingleValue = ({ children, ...props }) => /* @__PURE__ */ jsxs(components.SingleValue, { ...props, children: [
+  children,
+  " ",
+  /* @__PURE__ */ jsx("span", { children: "per page" })
+] });
+const generateOption = (value) => ({
+  value,
+  label: value
+});
+const getOptions = memoize((step, min, max) => {
+  const options = range(min, max + step, step).map(generateOption);
+  return min === 0 ? options.slice(1, options.length) : options;
+});
+const PerPageDropdown = ({ min = 0, max = 100, step = 5, value = 0, onChange = () => null }) => {
+  const options = getOptions(step, min, max);
+  return /* @__PURE__ */ jsx(
+    DSComboBox,
+    {
+      className: "per-page-dropdown",
+      components: {
+        SingleValue
+      },
+      containerProps: {
+        "data-testid": "per-page-dropdown"
+      },
+      maxOptions: 10,
+      onChange,
+      options,
+      searchable: false,
+      value
+    }
+  );
+};
+var PerPageDropdown_default = PerPageDropdown;
+export {
+  PerPageDropdown,
+  PerPageDropdown_default as default
+};
+//# sourceMappingURL=PerPageDropdown.js.map

package/dist/esm/plugins/pagination/components/PerPageDropdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/plugins/pagination/components/PerPageDropdown.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport memoize from 'memoize-one';\nimport { range } from '@elliemae/ds-legacy-utilities';\nimport { DSComboBox, components } from '@elliemae/ds-legacy-form';\n\nconst SingleValue = ({ children, ...props }) => (\n  <components.SingleValue {...props}>\n    {children} <span>per page</span>\n  </components.SingleValue>\n);\n\nconst generateOption = (value) => ({\n  value,\n  label: value,\n});\nconst getOptions = memoize((step, min, max) => {\n  const options = range(min, max + step, step).map(generateOption);\n  return min === 0 ? options.slice(1, options.length) : options;\n});\n\nconst PerPageDropdown = ({ min = 0, max = 100, step = 5, value = 0, onChange = () => null }) => {\n  const options = getOptions(step, min, max);\n  return (\n    <DSComboBox\n      className=\"per-page-dropdown\"\n      components={{\n        SingleValue,\n      }}\n      containerProps={{\n        'data-testid': 'per-page-dropdown',\n      }}\n      maxOptions={10}\n      onChange={onChange}\n      options={options}\n      searchable={false}\n      value={value}\n    />\n  );\n};\n\nexport { PerPageDropdown };\nexport default PerPageDropdown;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMrB,SACa,KADb;AALF,OAAO,aAAa;AACpB,SAAS,aAAa;AACtB,SAAS,YAAY,kBAAkB;AAEvC,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,MAAM,MACxC,qBAAC,WAAW,aAAX,EAAwB,GAAG,OACzB;AAAA;AAAA,EAAS;AAAA,EAAC,oBAAC,UAAK,sBAAQ;AAAA,GAC3B;AAGF,MAAM,iBAAiB,CAAC,WAAW;AAAA,EACjC;AAAA,EACA,OAAO;AACT;AACA,MAAM,aAAa,QAAQ,CAAC,MAAM,KAAK,QAAQ;AAC7C,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD,CAAC;AAED,MAAM,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,GAAG,QAAQ,GAAG,WAAW,MAAM,KAAK,MAAM;AAC9F,QAAM,UAAU,WAAW,MAAM,KAAK,GAAG;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAY;AAAA,QACV;AAAA,MACF;AAAA,MACA,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ;AAGA,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/esm/plugins/pagination/helper.js

@@ -0,0 +1,33 @@
+import * as React from "react";
+const parsePerPageNumber = (number, max, min = 1) => {
+  if (number > max)
+    return max;
+  if (number < min)
+    return min;
+  return number;
+};
+const paginate = (rows, { page, perPage = 1, amountOfPages: amount, totalRows }) => {
+  if (amount && totalRows) {
+    return {
+      amount,
+      rows,
+      page
+    };
+  }
+  const p = page - 1 || 0;
+  const amountOfPages = perPage ? Math.ceil(rows.length / (perPage > 0 ? perPage : 1)) : 1;
+  const startPage = p < amountOfPages ? p : 0;
+  return {
+    amount: amountOfPages,
+    rows: perPage ? rows.slice(startPage * perPage, startPage * perPage + perPage) : rows,
+    allRows: rows,
+    page: startPage
+  };
+};
+var helper_default = paginate;
+export {
+  helper_default as default,
+  paginate,
+  parsePerPageNumber
+};
+//# sourceMappingURL=helper.js.map

package/dist/esm/plugins/pagination/helper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/pagination/helper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const parsePerPageNumber = (number, max, min = 1) => {\n  if (number > max) return max;\n  if (number < min) return min;\n  return number;\n};\n\nexport const paginate = (rows, { page, perPage = 1, amountOfPages: amount, totalRows }) => {\n  // return if pagination state is controlled\n  if (amount && totalRows) {\n    return {\n      amount,\n      rows,\n      page,\n    };\n  }\n  // adapt to zero indexed logic\n  const p = page - 1 || 0;\n\n  const amountOfPages = perPage ? Math.ceil(rows.length / (perPage > 0 ? perPage : 1)) : 1;\n  const startPage = p < amountOfPages ? p : 0;\n\n  return {\n    amount: amountOfPages,\n    rows: perPage ? rows.slice(startPage * perPage, startPage * perPage + perPage) : rows,\n    allRows: rows,\n    page: startPage,\n  };\n};\n\nexport default paginate;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB,CAAC,QAAQ,KAAK,MAAM,MAAM;AAC1D,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,MAAM,EAAE,MAAM,UAAU,GAAG,eAAe,QAAQ,UAAU,MAAM;AAEzF,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,IAAI,OAAO,KAAK;AAEtB,QAAM,gBAAgB,UAAU,KAAK,KAAK,KAAK,UAAU,UAAU,IAAI,UAAU,EAAE,IAAI;AACvF,QAAM,YAAY,IAAI,gBAAgB,IAAI;AAE1C,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,MAAM,UAAU,KAAK,MAAM,YAAY,SAAS,YAAY,UAAU,OAAO,IAAI;AAAA,IACjF,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF;AAEA,IAAO,iBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { PaginationPlugin } from "./PaginationPlugin.js";
+export {
+  PaginationPlugin
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/pagination/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { PaginationPlugin } from './PaginationPlugin.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;",
+  "names": []
+}