@elliemae/ds-datagrids 3.0.0-next.2 → 3.0.0-next.3

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-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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAIA,MAAM,oBAAoB,CAAC,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,sBAAsB,MAAM;AAAA,IAC9C,SAAS,EAAE;AAAA,MACT;AAEJ,QAAM,UAAU,OAAO;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,YAAU,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,qBAAqB,mBAAmB;AAAA,EAC1E;AAAA,EACA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { InfiniteScrollPlugin } from "./InfiniteScrollPlugin";
+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';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { mergeRefs } from "@elliemae/ds-utilities";
+import { FocusGrid } from "@elliemae/ds-shared/FocusGroup/FocusGrid";
+import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
+import { paginate } from "./helper";
+import { usePaginationState } from "./usePaginationState";
+import { NoResults } from "../../components/NoResults";
+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) => __spreadProps(__spreadValues({}, r), {
+      _isGroup: r.isGroup
+    })), pagination);
+  }
+  return paginate(rows, pagination);
+};
+const Body = React2.memo((_a) => {
+  var _b = _a, {
+    component: Component,
+    rows,
+    rowRenderer,
+    noResultsPlaceholder,
+    innerRef,
+    innerBodyRef,
+    isPlaceholderActive = false
+  } = _b, otherBodyProps = __objRest(_b, [
+    "component",
+    "rows",
+    "rowRenderer",
+    "noResultsPlaceholder",
+    "innerRef",
+    "innerBodyRef",
+    "isPlaceholderActive"
+  ]);
+  return /* @__PURE__ */ React2.createElement(Component, __spreadProps(__spreadValues({}, otherBodyProps), {
+    innerRef: mergeRefs(innerRef)
+  }), !isPlaceholderActive ? rows.map((row, index) => rowRenderer(row, { index, rowIndex: index }, {})) : /* @__PURE__ */ React2.createElement(NoResults, {
+    innerRef,
+    rowRenderer
+  }, noResultsPlaceholder));
+});
+const decorateRenderers = (renderers, grid) => {
+  const BodyWrapper = renderers.body.wrapper;
+  renderers.body.wrapper = useMemo(() => (props) => {
+    const { hotKeys, shouldRefocus, state } = grid.getInstance();
+    return /* @__PURE__ */ React2.createElement(FocusGrid, {
+      hotKeys,
+      shouldRefocus: false
+    }, /* @__PURE__ */ React2.createElement(Body, __spreadProps(__spreadValues({}, 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-utilities';\nimport { FocusGrid } from '@elliemae/ds-shared/FocusGroup/FocusGrid';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { paginate } from './helper';\nimport { usePaginationState } from './usePaginationState';\nimport { NoResults } from '../../components/NoResults';\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    () => (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;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,OAAO,EAAE;AAAA,MACP,KAAK;AACT,MAAI;AAAa,WAAO;AACxB,MAAI,aAAa;AACf,UAAM,YAAY,KAAK,IAAI,CAAC,MAAM,EAAE;AACpC,WAAO,SACL,KACG,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,KACnC,IAAI,CAAC,MAAO,iCACR,IADQ;AAAA,MAEX,UAAU,EAAE;AAAA,SAEhB;AAAA;AAIJ,SAAO,SAAS,MAAM;AAAA;AAGxB,MAAM,OAAO,OAAM,KACjB,CAAC,OASE;AATF,eACC;AAAA,eAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,MAPvB,IAQI,2BARJ,IAQI;AAAA,IAPH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,8CAAC,WAAD,iCAAe,iBAAf;AAAA,IAA+B,UAAU,UAAU;AAAA,MAChD,CAAC,sBACA,KAAK,IAAI,CAAC,KAAK,UAAU,YAAY,KAAK,EAAE,OAAO,UAAU,SAAS,OAEtE,qCAAC,WAAD;AAAA,IAAW;AAAA,IAAoB;AAAA,KAC5B;AAAA;AAOX,MAAM,oBAAoB,CAAC,WAAW,SAAS;AAC7C,QAAM,cAAc,UAAU,KAAK;AACnC,YAAU,KAAK,UAAU,QACvB,MAAM,CAAC,UAAU;AACf,UAAM,EAAE,SAAS,eAAe,UAAU,KAAK;AAC/C,WACE,qCAAC,WAAD;AAAA,MAAW;AAAA,MAAkB,eAAe;AAAA,OAC1C,qCAAC,MAAD,iCAAU,QAAV;AAAA,MAAiB,WAAW;AAAA;AAAA,KAIlC;AAEF,SAAO;AAAA;AAGF,MAAM,mBAAmB,qBAAqB,cAAc;AAAA,EACjE,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import React2 from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { Paginator } from "./Paginator";
+import { PerPageDropdown } from "./PerPageDropdown";
+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__ */ React2.createElement(PaginationControls, null, /* @__PURE__ */ React2.createElement(PerPageDropdown, {
+    max: maxPerPage,
+    min: minPerPage,
+    onChange: onPerPage,
+    step: paginationStep,
+    value: perPage
+  }), /* @__PURE__ */ React2.createElement(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-classnames';\nimport { Paginator } from './Paginator';\nimport { PerPageDropdown } from './PerPageDropdown';\n\nconst PaginationControls = aggregatedClasses('div')(\n  'data-grid',\n  'controls-pagination',\n);\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 (\n    pagination &&\n    pagination.conditionalPagination === true &&\n    paginated.amount === 1\n  )\n    return null;\n  return paginated.amount > 0 ? (\n    <PaginationControls>\n      <PerPageDropdown\n        max={maxPerPage}\n        min={minPerPage}\n        onChange={onPerPage}\n        step={paginationStep}\n        value={perPage}\n      />\n      <Paginator\n        onSelect={onPageSelect}\n        pages={paginated.amount}\n        pagination={pagination}\n      />\n    </PaginationControls>\n  ) : null;\n};\n\nexport { Pagination };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,qBAAqB,kBAAkB,OAC3C,aACA;AAGF,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AAAA,MACT;AACJ,QAAM,EAAE,YAAY;AACpB,MACE,cACA,WAAW,0BAA0B,QACrC,UAAU,WAAW;AAErB,WAAO;AACT,SAAO,UAAU,SAAS,IACxB,qCAAC,oBAAD,MACE,qCAAC,iBAAD;AAAA,IACE,KAAK;AAAA,IACL,KAAK;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,MAET,qCAAC,WAAD;AAAA,IACE,UAAU;AAAA,IACV,OAAO,UAAU;AAAA,IACjB;AAAA,QAGF;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import React2 from "react";
+import ReactPagify from "react-pagify";
+import segmentize from "segmentize";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+const blockName = "data-grid";
+const PaginationContainer = aggregatedClasses("div")(blockName, "pagination");
+const PagifyContext = aggregatedClasses(ReactPagify?.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__ */ React2.createElement(PaginationContainer, null, /* @__PURE__ */ React2.createElement(PagifyContext, {
+    onSelect: (page) => page !== pagination.page && onSelect(page),
+    segments: segmentize({
+      page: pagination.page,
+      pages,
+      beginPages: 1,
+      endPages: 1,
+      sidePages: 1
+    })
+  }, /* @__PURE__ */ React2.createElement(ReactPagify.Button, {
+    className: pagination.page <= 1 ? "button-disabled" : "",
+    page: prevPage
+  }, labelPrevious), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+    field: "beginPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Ellipsis, {
+    className: "ellipsis",
+    nextField: "previousPages",
+    previousField: "beginPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+    field: "previousPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+    className: "selected",
+    field: "centerPage"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+    field: "nextPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Ellipsis, {
+    className: "ellipsis",
+    nextField: "endPages",
+    previousField: "nextPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+    field: "endPages"
+  }), /* @__PURE__ */ React2.createElement(ReactPagify.Button, {
+    className: pagination.page >= pages ? "button-disabled" : "",
+    page: nextPage
+  }, 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 ReactPagify from 'react-pagify';\nimport segmentize from 'segmentize';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst blockName = 'data-grid';\n\nconst PaginationContainer = aggregatedClasses('div')(blockName, 'pagination');\nconst PagifyContext = aggregatedClasses(ReactPagify?.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  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        <ReactPagify.Button className={pagination.page <= 1 ? 'button-disabled' : ''} page={prevPage}>\n          {labelPrevious}\n        </ReactPagify.Button>\n\n        <ReactPagify.Segment field=\"beginPages\" />\n\n        <ReactPagify.Ellipsis className=\"ellipsis\" nextField=\"previousPages\" previousField=\"beginPages\" />\n\n        <ReactPagify.Segment field=\"previousPages\" />\n        <ReactPagify.Segment className=\"selected\" field=\"centerPage\" />\n        <ReactPagify.Segment field=\"nextPages\" />\n\n        <ReactPagify.Ellipsis className=\"ellipsis\" nextField=\"endPages\" previousField=\"nextPages\" />\n\n        <ReactPagify.Segment field=\"endPages\" />\n\n        <ReactPagify.Button className={pagination.page >= pages ? 'button-disabled' : ''} page={nextPage}>\n          {labelNext}\n        </ReactPagify.Button>\n      </PagifyContext>\n    </PaginationContainer>\n  );\n};\n\nexport { Paginator };\nexport default Paginator;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,OAAO,WAAW;AAChE,MAAM,gBAAgB,kBAAkB,aAAa,SAAS,WAAW;AAEzE,MAAM,YAAY,CAAC,EAAE,YAAY,OAAO,UAAU,gBAAgB,YAAY,YAAY,aAAa;AACrG,QAAM,WAAW,WAAW,OAAO;AACnC,QAAM,WAAW,WAAW,OAAO;AACnC,SACE,qCAAC,qBAAD,MACE,qCAAC,eAAD;AAAA,IACE,UAAU,CAAC,SAAS,SAAS,WAAW,QAAQ,SAAS;AAAA,IACzD,UAAU,WAAW;AAAA,MACnB,MAAM,WAAW;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW;AAAA;AAAA,KAGb,qCAAC,YAAY,QAAb;AAAA,IAAoB,WAAW,WAAW,QAAQ,IAAI,oBAAoB;AAAA,IAAI,MAAM;AAAA,KACjF,gBAGH,qCAAC,YAAY,SAAb;AAAA,IAAqB,OAAM;AAAA,MAE3B,qCAAC,YAAY,UAAb;AAAA,IAAsB,WAAU;AAAA,IAAW,WAAU;AAAA,IAAgB,eAAc;AAAA,MAEnF,qCAAC,YAAY,SAAb;AAAA,IAAqB,OAAM;AAAA,MAC3B,qCAAC,YAAY,SAAb;AAAA,IAAqB,WAAU;AAAA,IAAW,OAAM;AAAA,MAChD,qCAAC,YAAY,SAAb;AAAA,IAAqB,OAAM;AAAA,MAE3B,qCAAC,YAAY,UAAb;AAAA,IAAsB,WAAU;AAAA,IAAW,WAAU;AAAA,IAAW,eAAc;AAAA,MAE9E,qCAAC,YAAY,SAAb;AAAA,IAAqB,OAAM;AAAA,MAE3B,qCAAC,YAAY,QAAb;AAAA,IAAoB,WAAW,WAAW,QAAQ,QAAQ,oBAAoB;AAAA,IAAI,MAAM;AAAA,KACrF;AAAA;AAQX,IAAO,oBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,68 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2 from "react";
+import memoize from "memoize-one";
+import { range } from "@elliemae/ds-utilities";
+import { DSComboBox, components } from "@elliemae/ds-form";
+const SingleValue = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ React2.createElement(components.SingleValue, __spreadValues({}, props), children, " ", /* @__PURE__ */ React2.createElement("span", null, "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;
+});
+function PerPageDropdown({ min = 0, max = 100, step = 5, value = 0, onChange = () => null }) {
+  const options = getOptions(step, min, max);
+  return /* @__PURE__ */ React2.createElement(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-utilities';\nimport { DSComboBox, components } from '@elliemae/ds-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\nfunction 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;ACAA;AACA;AACA;AACA;AAEA,MAAM,cAAc,CAAC,OAAwB;AAAxB,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACrB,8CAAC,WAAW,aAAZ,mBAA4B,QACzB,UAAS,KAAC,qCAAC,QAAD,MAAM;AAAA;AAIrB,MAAM,iBAAiB,CAAC,UAAW;AAAA,EACjC;AAAA,EACA,OAAO;AAAA;AAET,MAAM,aAAa,QAAQ,CAAC,MAAM,KAAK,QAAQ;AAC7C,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI;AACjD,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,UAAU;AAAA;AAGxD,yBAAyB,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,GAAG,QAAQ,GAAG,WAAW,MAAM,QAAQ;AAC3F,QAAM,UAAU,WAAW,MAAM,KAAK;AACtC,SACE,qCAAC,YAAD;AAAA,IACE,WAAU;AAAA,IACV,YAAY;AAAA,MACV;AAAA;AAAA,IAEF,gBAAgB;AAAA,MACd,eAAe;AAAA;AAAA,IAEjB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA;AAAA;AAMN,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 = (\n  rows,\n  { page, perPage = 1, amountOfPages: amount, totalRows },\n) => {\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\n    ? Math.ceil(rows.length / (perPage > 0 ? perPage : 1))\n    : 1;\n  const startPage = p < amountOfPages ? p : 0;\n\n  return {\n    amount: amountOfPages,\n    rows: perPage\n      ? rows.slice(startPage * perPage, startPage * perPage + perPage)\n      : rows,\n    allRows: rows,\n    page: startPage,\n  };\n};\n\nexport default paginate;\n"],
+  "mappings": "AAAA;ACAO,MAAM,qBAAqB,CAAC,QAAQ,KAAK,MAAM,MAAM;AAC1D,MAAI,SAAS;AAAK,WAAO;AACzB,MAAI,SAAS;AAAK,WAAO;AACzB,SAAO;AAAA;AAGF,MAAM,WAAW,CACtB,MACA,EAAE,MAAM,UAAU,GAAG,eAAe,QAAQ,gBACzC;AAEH,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAIJ,QAAM,IAAI,OAAO,KAAK;AAEtB,QAAM,gBAAgB,UAClB,KAAK,KAAK,KAAK,SAAU,WAAU,IAAI,UAAU,MACjD;AACJ,QAAM,YAAY,IAAI,gBAAgB,IAAI;AAE1C,SAAO;AAAA,IACL,QAAQ;AAAA,IACR,MAAM,UACF,KAAK,MAAM,YAAY,SAAS,YAAY,UAAU,WACtD;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA;AAAA;AAIV,IAAO,iBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { PaginationPlugin } from "./PaginationPlugin";
+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';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

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

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
+import { parsePerPageNumber } from "./helper";
+function usePaginationState(grid) {
+  const {
+    minPerPage = 0,
+    maxPerPage = 50,
+    onPerPageChange = () => null,
+    onPageChange = () => null,
+    pagination: paginationProp = {
+      page: 1,
+      perPage: 10
+    },
+    groupedRows
+  } = grid.props;
+  const { composedRows, rows } = grid.getInstance();
+  const [pagination, setPagination] = useDerivedStateFromProps(paginationProp);
+  const onPerPage = (perPageNumber) => {
+    const parsedPerPageNumber = parsePerPageNumber(perPageNumber, maxPerPage, minPerPage);
+    const actualNumber = parsedPerPageNumber ? parseInt(parsedPerPageNumber, 10) : 0;
+    setPagination((prevPagination) => {
+      onPerPageChange(actualNumber);
+      return {
+        page: prevPagination.page,
+        perPage: actualNumber
+      };
+    });
+  };
+  const onPageSelect = (page) => {
+    const length = groupedRows ? composedRows.length : rows.length;
+    setPagination((prevPagination) => {
+      const pages = Math.ceil(length / prevPagination.perPage);
+      onPageChange(page);
+      return __spreadProps(__spreadValues({}, prevPagination), {
+        page: Math.min(Math.max(page, 1), pages)
+      });
+    });
+  };
+  return {
+    state: {
+      pagination
+    },
+    actions: {
+      onPerPage,
+      onPageSelect
+    }
+  };
+}
+export {
+  usePaginationState
+};
+//# sourceMappingURL=usePaginationState.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/pagination/usePaginationState.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport { parsePerPageNumber } from './helper';\n\nexport function usePaginationState(grid) {\n  const {\n    minPerPage = 0,\n    maxPerPage = 50,\n    onPerPageChange = () => null,\n    onPageChange = () => null,\n    pagination: paginationProp = {\n      page: 1,\n      perPage: 10,\n    },\n    groupedRows,\n  } = grid.props;\n  const { composedRows, rows } = grid.getInstance();\n  const [pagination, setPagination] = useDerivedStateFromProps(paginationProp);\n\n  const onPerPage = (perPageNumber) => {\n    const parsedPerPageNumber = parsePerPageNumber(perPageNumber, maxPerPage, minPerPage);\n    const actualNumber = parsedPerPageNumber ? parseInt(parsedPerPageNumber, 10) : 0;\n\n    setPagination((prevPagination) => {\n      onPerPageChange(actualNumber);\n      return {\n        page: prevPagination.page,\n        perPage: actualNumber,\n      };\n    });\n  };\n\n  const onPageSelect = (page) => {\n    const length = groupedRows ? composedRows.length : rows.length;\n    setPagination((prevPagination) => {\n      const pages = Math.ceil(length / prevPagination.perPage);\n      onPageChange(page);\n      return {\n        ...prevPagination,\n        page: Math.min(Math.max(page, 1), pages),\n      };\n    });\n  };\n\n  return {\n    state: {\n      pagination,\n    },\n    actions: {\n      onPerPage,\n      onPageSelect,\n    },\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEO,4BAA4B,MAAM;AACvC,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB,MAAM;AAAA,IACxB,eAAe,MAAM;AAAA,IACrB,YAAY,iBAAiB;AAAA,MAC3B,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX;AAAA,MACE,KAAK;AACT,QAAM,EAAE,cAAc,SAAS,KAAK;AACpC,QAAM,CAAC,YAAY,iBAAiB,yBAAyB;AAE7D,QAAM,YAAY,CAAC,kBAAkB;AACnC,UAAM,sBAAsB,mBAAmB,eAAe,YAAY;AAC1E,UAAM,eAAe,sBAAsB,SAAS,qBAAqB,MAAM;AAE/E,kBAAc,CAAC,mBAAmB;AAChC,sBAAgB;AAChB,aAAO;AAAA,QACL,MAAM,eAAe;AAAA,QACrB,SAAS;AAAA;AAAA;AAAA;AAKf,QAAM,eAAe,CAAC,SAAS;AAC7B,UAAM,SAAS,cAAc,aAAa,SAAS,KAAK;AACxD,kBAAc,CAAC,mBAAmB;AAChC,YAAM,QAAQ,KAAK,KAAK,SAAS,eAAe;AAChD,mBAAa;AACb,aAAO,iCACF,iBADE;AAAA,QAEL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI;AAAA;AAAA;AAAA;AAKxC,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA;AAAA,IAEF,SAAS;AAAA,MACP;AAAA,MACA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/resizable/ResizablePlugin.js

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { runAll } from "@elliemae/ds-utilities";
+import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
+import { addResizableToColumn, resizableFormatter } from "./decorateResizable";
+const noop = () => null;
+const DELTA_LAST_COLUMN = 25;
+const decorateColumn = (column, grid, index) => {
+  const {
+    onResizeEnd = noop,
+    onResizeStart = noop,
+    minColumnWidth = 90,
+    isColumnResizeActive = (col) => col.resizable && !col.expandableColumn,
+    onColumnResize
+  } = grid.props;
+  const { decoratedColumns } = grid.getInstance();
+  const colIndex = decoratedColumns.findIndex((col) => col.property === column.property);
+  const isLast = colIndex === decoratedColumns.length - 1;
+  if (!isColumnResizeActive(column))
+    return column;
+  return addResizableToColumn(column, resizableFormatter({
+    onDragStart: () => {
+      grid.isDragging.current = true;
+      grid.disableEvents();
+      onResizeStart();
+      onColumnResize("onResizeStart", { column });
+    },
+    onDrag: (width, increasing) => {
+      const { resizedColumns, refs } = grid.getInstance();
+      if (isLast && increasing) {
+        const thisCol = resizedColumns.current[column.uuid] || 0;
+        width = Math.max(thisCol + DELTA_LAST_COLUMN, width);
+      }
+      column.updateBodyHeaderWidth(width, width);
+      grid.updateRowWidth();
+      if (isLast && increasing) {
+        refs.header.current.scrollLeft += DELTA_LAST_COLUMN;
+        refs.body.current.scrollLeft += DELTA_LAST_COLUMN;
+      }
+    },
+    onDragEnd: (width, increasing, extraData) => {
+      const { resizedColumns } = grid.getInstance();
+      if (isLast && increasing) {
+        const thisCol = resizedColumns.current[column.uuid] || 0;
+        width = Math.max(thisCol + DELTA_LAST_COLUMN, width);
+      }
+      resizedColumns.current[column.uuid] = width;
+      grid.isDragging.current = false;
+      grid.enableEvents();
+      try {
+        const total = grid.getInstance().refs.body.current.scrollWidth;
+        const sum = Object.keys(grid.resizedColumns.current).reduce((p, n) => grid.resizedColumns.current[n] + p, 0);
+        const lastKey = grid.decoratedColumns[grid.columns.length - 1].uuid;
+        if (sum < total) {
+          const lastCol = grid.getInstance().columnSizeService.columns[lastKey];
+          lastCol.updateWidth(grid.resizedColumns.current[lastKey] + total - sum);
+          lastCol.updateBodyHeaderWidth(grid.resizedColumns.current[lastKey] + total - sum);
+          grid.getInstance().columnSizeService.updateMissingWidths(total);
+        }
+      } catch (error) {
+        console.error("Unexpected error in the addResizableToColumn trying to use the remaining grid space to the last column", error);
+      }
+      onColumnResize("onResizeEnd", {
+        column,
+        width,
+        extraData
+      });
+      runAll(onResizeEnd)(width, extraData);
+      grid.updateRowWidth();
+    },
+    minWidth: (column.minWidth || minColumnWidth) - (isLast ? DELTA_LAST_COLUMN : 0),
+    isLast
+  }));
+};
+const ResizablePlugin = createInstancePlugin("resizable", {
+  decorateColumn
+});
+export {
+  ResizablePlugin
+};
+//# sourceMappingURL=ResizablePlugin.js.map

package/dist/esm/plugins/resizable/ResizablePlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/resizable/ResizablePlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-param-reassign */\n/* eslint-disable max-statements */\nimport { runAll } from '@elliemae/ds-utilities';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { addResizableToColumn, resizableFormatter } from './decorateResizable';\n\nconst noop = () => null;\n\nconst DELTA_LAST_COLUMN = 25;\n\n// eslint-disable-next-line no-unused-vars\nconst decorateColumn = (column, grid, index) => {\n  const {\n    onResizeEnd = noop,\n    onResizeStart = noop,\n    minColumnWidth = 90,\n    isColumnResizeActive = (col) => col.resizable && !col.expandableColumn,\n    onColumnResize,\n  } = grid.props;\n\n  const { decoratedColumns } = grid.getInstance();\n  // need to do this because the decorated columns which the index in the function call\n  // could be different from the final decorated columns because a plugin could add a\n  // column afterwards\n  const colIndex = decoratedColumns.findIndex((col) => col.property === column.property);\n  const isLast = colIndex === decoratedColumns.length - 1;\n\n  if (!isColumnResizeActive(column)) return column;\n  return addResizableToColumn(\n    column,\n    resizableFormatter({\n      onDragStart: () => {\n        grid.isDragging.current = true;\n        grid.disableEvents();\n        onResizeStart();\n        onColumnResize('onResizeStart', { column });\n      },\n      onDrag: (width, increasing) => {\n        const { resizedColumns, refs } = grid.getInstance();\n        if (isLast && increasing) {\n          const thisCol = resizedColumns.current[column.uuid] || 0;\n          width = Math.max(thisCol + DELTA_LAST_COLUMN, width);\n        }\n        column.updateBodyHeaderWidth(width, width);\n        grid.updateRowWidth();\n        if (isLast && increasing) {\n          // TODO: Move this to packages/ds-shared/src/ScrollSync/ScrollSync.js\n          // It isn't watching the scrollLeft so you have to move both at the same time\n          refs.header.current.scrollLeft += DELTA_LAST_COLUMN;\n          refs.body.current.scrollLeft += DELTA_LAST_COLUMN;\n        }\n      },\n      onDragEnd: (width, increasing, extraData) => {\n        const { resizedColumns } = grid.getInstance();\n        if (isLast && increasing) {\n          const thisCol = resizedColumns.current[column.uuid] || 0;\n          width = Math.max(thisCol + DELTA_LAST_COLUMN, width);\n        }\n        resizedColumns.current[column.uuid] = width;\n\n        grid.isDragging.current = false;\n        grid.enableEvents();\n        try {\n          const total = grid.getInstance().refs.body.current.scrollWidth;\n          const sum = Object.keys(grid.resizedColumns.current).reduce((p, n) => grid.resizedColumns.current[n] + p, 0);\n          const lastKey = grid.decoratedColumns[grid.columns.length - 1].uuid;\n          if (sum < total) {\n            const lastCol = grid.getInstance().columnSizeService.columns[lastKey];\n            lastCol.updateWidth(grid.resizedColumns.current[lastKey] + total - sum);\n            lastCol.updateBodyHeaderWidth(grid.resizedColumns.current[lastKey] + total - sum);\n            grid.getInstance().columnSizeService.updateMissingWidths(total);\n          }\n        } catch (error) {\n          console.error(\n            'Unexpected error in the addResizableToColumn trying to use the remaining grid space to the last column',\n            error,\n          );\n        }\n\n        onColumnResize('onResizeEnd', {\n          column,\n          width,\n          extraData,\n        });\n        runAll(onResizeEnd)(width, extraData);\n        grid.updateRowWidth();\n      },\n      minWidth: (column.minWidth || minColumnWidth) - (isLast ? DELTA_LAST_COLUMN : 0),\n      isLast,\n    }),\n  );\n};\n\nexport const ResizablePlugin = createInstancePlugin('resizable', {\n  decorateColumn,\n});\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAEnB,MAAM,oBAAoB;AAG1B,MAAM,iBAAiB,CAAC,QAAQ,MAAM,UAAU;AAC9C,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,uBAAuB,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI;AAAA,IACtD;AAAA,MACE,KAAK;AAET,QAAM,EAAE,qBAAqB,KAAK;AAIlC,QAAM,WAAW,iBAAiB,UAAU,CAAC,QAAQ,IAAI,aAAa,OAAO;AAC7E,QAAM,SAAS,aAAa,iBAAiB,SAAS;AAEtD,MAAI,CAAC,qBAAqB;AAAS,WAAO;AAC1C,SAAO,qBACL,QACA,mBAAmB;AAAA,IACjB,aAAa,MAAM;AACjB,WAAK,WAAW,UAAU;AAC1B,WAAK;AACL;AACA,qBAAe,iBAAiB,EAAE;AAAA;AAAA,IAEpC,QAAQ,CAAC,OAAO,eAAe;AAC7B,YAAM,EAAE,gBAAgB,SAAS,KAAK;AACtC,UAAI,UAAU,YAAY;AACxB,cAAM,UAAU,eAAe,QAAQ,OAAO,SAAS;AACvD,gBAAQ,KAAK,IAAI,UAAU,mBAAmB;AAAA;AAEhD,aAAO,sBAAsB,OAAO;AACpC,WAAK;AACL,UAAI,UAAU,YAAY;AAGxB,aAAK,OAAO,QAAQ,cAAc;AAClC,aAAK,KAAK,QAAQ,cAAc;AAAA;AAAA;AAAA,IAGpC,WAAW,CAAC,OAAO,YAAY,cAAc;AAC3C,YAAM,EAAE,mBAAmB,KAAK;AAChC,UAAI,UAAU,YAAY;AACxB,cAAM,UAAU,eAAe,QAAQ,OAAO,SAAS;AACvD,gBAAQ,KAAK,IAAI,UAAU,mBAAmB;AAAA;AAEhD,qBAAe,QAAQ,OAAO,QAAQ;AAEtC,WAAK,WAAW,UAAU;AAC1B,WAAK;AACL,UAAI;AACF,cAAM,QAAQ,KAAK,cAAc,KAAK,KAAK,QAAQ;AACnD,cAAM,MAAM,OAAO,KAAK,KAAK,eAAe,SAAS,OAAO,CAAC,GAAG,MAAM,KAAK,eAAe,QAAQ,KAAK,GAAG;AAC1G,cAAM,UAAU,KAAK,iBAAiB,KAAK,QAAQ,SAAS,GAAG;AAC/D,YAAI,MAAM,OAAO;AACf,gBAAM,UAAU,KAAK,cAAc,kBAAkB,QAAQ;AAC7D,kBAAQ,YAAY,KAAK,eAAe,QAAQ,WAAW,QAAQ;AACnE,kBAAQ,sBAAsB,KAAK,eAAe,QAAQ,WAAW,QAAQ;AAC7E,eAAK,cAAc,kBAAkB,oBAAoB;AAAA;AAAA,eAEpD,OAAP;AACA,gBAAQ,MACN,0GACA;AAAA;AAIJ,qBAAe,eAAe;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA;AAEF,aAAO,aAAa,OAAO;AAC3B,WAAK;AAAA;AAAA,IAEP,UAAW,QAAO,YAAY,kBAAmB,UAAS,oBAAoB;AAAA,IAC9E;AAAA;AAAA;AAKC,MAAM,kBAAkB,qBAAqB,aAAa;AAAA,EAC/D;AAAA;",
+  "names": []
+}

package/dist/esm/plugins/resizable/decorateResizable.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2 from "react";
+import { appendHeaderFormatter } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
+import { useResizeHandle } from "./useResizeHandle";
+const addResizableToColumn = (column, formatter) => appendHeaderFormatter(formatter, column);
+const ResizableWrapper = React2.memo(({ value, onDrag, onDragEnd, onDragStart, minWidth, handleClassName }) => {
+  const { containerRef, Handle } = useResizeHandle({
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    minWidth,
+    handleClassName
+  });
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: containerRef,
+    className: "resize-container"
+  }, value, /* @__PURE__ */ React2.createElement(Handle, null));
+});
+const resizableFormatter = (options) => (value) => /* @__PURE__ */ React2.createElement(ResizableWrapper, __spreadProps(__spreadValues({}, options), {
+  value
+}));
+export {
+  addResizableToColumn,
+  resizableFormatter
+};
+//# sourceMappingURL=decorateResizable.js.map

package/dist/esm/plugins/resizable/decorateResizable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/resizable/decorateResizable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { appendHeaderFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { useResizeHandle } from './useResizeHandle';\n\nconst addResizableToColumn = (column, formatter) =>\n  appendHeaderFormatter(formatter, column);\n\nconst ResizableWrapper = React.memo(\n  ({ value, onDrag, onDragEnd, onDragStart, minWidth, handleClassName }) => {\n    const { containerRef, Handle } = useResizeHandle({\n      onDrag,\n      onDragEnd,\n      onDragStart,\n      minWidth,\n      handleClassName,\n    });\n    return (\n      <div ref={containerRef} className=\"resize-container\">\n        {value}\n        <Handle />\n      </div>\n    );\n  },\n);\n\n// eslint-disable-next-line react/display-name\nconst resizableFormatter = options => value => (\n  <ResizableWrapper {...options} value={value} />\n);\n\nexport { addResizableToColumn, resizableFormatter };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,uBAAuB,CAAC,QAAQ,cACpC,sBAAsB,WAAW;AAEnC,MAAM,mBAAmB,OAAM,KAC7B,CAAC,EAAE,OAAO,QAAQ,WAAW,aAAa,UAAU,sBAAsB;AACxE,QAAM,EAAE,cAAc,WAAW,gBAAgB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,SACE,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAc,WAAU;AAAA,KAC/B,OACD,qCAAC,QAAD;AAAA;AAOR,MAAM,qBAAqB,aAAW,WACpC,qCAAC,kBAAD,iCAAsB,UAAtB;AAAA,EAA+B;AAAA;",
+  "names": []
+}