@elliemae/ds-pagination 2.2.1 → 2.3.0-alpha.4

package/cjs/parts/PaginationContent.js

@@ -1,78 +1,92 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var Grid = require('@elliemae/ds-grid');
-var styled = require('../styled.js');
-var PerPageSelector = require('./PerPageSelector.js');
-var Paginator = require('./Paginator.js');
-var PaginationDataTestID = require('../PaginationDataTestID.js');
-var PagePrevButton = require('./PagePrevButton.js');
-var PageNextButton = require('./PageNextButton.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-
-var _PaginationSeparator;
-const PaginationContent = _ref => {
-  let {
-    pageIndex,
-    pageSize,
-    canPreviousPage,
-    canNextPage,
-    onPageSizeChange,
-    onNextPage,
-    onPreviousPage,
-    onPageChange,
-    pageCount,
-    showPerPageSelector,
-    pageDetails,
-    pageDetailsTitle,
-    perPageOptions,
-    maxPerPage,
-    perPageStep,
-    minPerPage,
-    width
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](styled.PaginationContainer, {
-    justifyContent: "center",
-    alignItems: "center",
-    width: width,
-    "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](PerPageSelector, {
-      pageSize: pageSize,
-      onPageSizeChange: onPageSizeChange,
-      perPageOptions: perPageOptions,
-      maxPerPage: maxPerPage,
-      perPageStep: perPageStep,
-      minPerPage: minPerPage
-    }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
-      mr: 24
-    }))]
-  }), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-    cols: ['auto', 'auto', 'auto', 'auto', 'auto'],
-    mr: "32px",
-    alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](PagePrevButton.PagePrevButton, {
-    canPreviousPage: canPreviousPage,
-    onPreviousPage: onPreviousPage
-  }), /*#__PURE__*/_jsx__default["default"](Paginator, {
-    pageCount: pageCount,
-    pageIndex: pageIndex,
-    onNextPage: onNextPage,
-    onPageChange: onPageChange,
-    pageDetails: pageDetails,
-    pageDetailsTitle: pageDetailsTitle
-  }), /*#__PURE__*/_jsx__default["default"](PageNextButton.PageNextButton, {
-    canNextPage: canNextPage,
-    onNextPage: onNextPage
-  }))));
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
-
-exports.PaginationContent = PaginationContent;
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var PaginationContent_exports = {};
+__export(PaginationContent_exports, {
+  PaginationContent: () => PaginationContent
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_styled = require("../styled");
+var import_PerPageSelector = __toESM(require("./PerPageSelector"));
+var import_Paginator = __toESM(require("./Paginator"));
+var import_PaginationDataTestID = require("../PaginationDataTestID");
+var import_PagePrevButton = require("./PagePrevButton");
+var import_PageNextButton = require("./PageNextButton");
+const PaginationContent = ({
+  pageIndex,
+  pageSize,
+  canPreviousPage,
+  canNextPage,
+  onPageSizeChange,
+  onNextPage,
+  onPreviousPage,
+  onPageChange,
+  pageCount,
+  showPerPageSelector,
+  pageDetails,
+  pageDetailsTitle,
+  perPageOptions,
+  maxPerPage,
+  perPageStep,
+  minPerPage,
+  width
+}) => /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationContainer, {
+  justifyContent: "center",
+  alignItems: "center",
+  width,
+  "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER
+}, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationWrapper, null, showPerPageSelector && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_PerPageSelector.default, {
+  pageSize,
+  onPageSizeChange,
+  perPageOptions,
+  maxPerPage,
+  perPageStep,
+  minPerPage
+}), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, {
+  mr: 24
+})), /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  cols: ["auto", "auto", "auto", "auto", "auto"],
+  mr: "32px",
+  alignItems: "center"
+}, /* @__PURE__ */ import_react.default.createElement(import_PagePrevButton.PagePrevButton, {
+  canPreviousPage,
+  onPreviousPage
+}), /* @__PURE__ */ import_react.default.createElement(import_Paginator.default, {
+  pageCount,
+  pageIndex,
+  onNextPage,
+  onPageChange,
+  pageDetails,
+  pageDetailsTitle
+}), /* @__PURE__ */ import_react.default.createElement(import_PageNextButton.PageNextButton, {
+  canNextPage,
+  onNextPage
+}))));
+module.exports = __toCommonJS(PaginationContent_exports);
+//# sourceMappingURL=PaginationContent.js.map

package/cjs/parts/PaginationContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/PaginationContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaginationContainer, PaginationSeparator, PaginationWrapper } from '../styled';\nimport PerPageSelector from './PerPageSelector';\nimport Paginator from './Paginator';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PagePrevButton } from './PagePrevButton';\nimport { PageNextButton } from './PageNextButton';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PaginationContent: React.ComponentType<DSPaginationProps> = ({\n  pageIndex,\n  pageSize,\n  canPreviousPage,\n  canNextPage,\n  onPageSizeChange,\n  onNextPage,\n  onPreviousPage,\n  onPageChange,\n  pageCount,\n  showPerPageSelector,\n  pageDetails,\n  pageDetailsTitle,\n  perPageOptions,\n  maxPerPage,\n  perPageStep,\n  minPerPage,\n  width,\n}) => (\n  <PaginationContainer\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    width={width}\n    data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n  >\n    <PaginationWrapper>\n      {showPerPageSelector && (\n        <>\n          <PerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <PaginationSeparator mr={24} />\n        </>\n      )}\n      <Grid cols={['auto', 'auto', 'auto', 'auto', 'auto']} mr=\"32px\" alignItems=\"center\">\n        <PagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n        <Paginator\n          pageCount={pageCount}\n          pageIndex={pageIndex}\n          onNextPage={onNextPage}\n          onPageChange={onPageChange}\n          pageDetails={pageDetails}\n          pageDetailsTitle={pageDetailsTitle}\n        />\n        <PageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n      </Grid>\n    </PaginationWrapper>\n  </PaginationContainer>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,qBAAqB;AACrB,oBAA4E;AAC5E,6BAA4B;AAC5B,uBAAsB;AACtB,kCAAuC;AACvC,4BAA+B;AAC/B,4BAA+B;AAGxB,MAAM,oBAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC,mCAAD;AAAA,EACE,gBAAe;AAAA,EACf,YAAW;AAAA,EACX;AAAA,EACA,eAAa,mDAAuB;AAAA,GAEpC,mDAAC,iCAAD,MACG,uBACC,wFACE,mDAAC,gCAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IAEF,mDAAC,mCAAD;AAAA,EAAqB,IAAI;AAAA,KAG7B,mDAAC,qBAAD;AAAA,EAAM,MAAM,CAAC,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,EAAS,IAAG;AAAA,EAAO,YAAW;AAAA,GACzE,mDAAC,sCAAD;AAAA,EAAgB;AAAA,EAAkC;AAAA,IAClD,mDAAC,0BAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IAEF,mDAAC,sCAAD;AAAA,EAAgB;AAAA,EAA0B;AAAA;",
+  "names": []
+}

package/cjs/parts/Paginator.js

@@ -1,143 +1,131 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-var react = require('react');
-var dsIcons = require('@elliemae/ds-icons');
-var dsUtilities = require('@elliemae/ds-utilities');
-var Grid = require('@elliemae/ds-grid');
-var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
-var styled = require('../styled.js');
-var usePaginationSearch = require('../hooks/usePaginationSearch.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-
-var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
-
-const Paginator = props => {
-  var _span2;
-
-  const {
-    pageIndex,
-    pageCount,
-    onPageChange,
-    pageDetails,
-    pageDetailsTitle
-  } = props;
-  const [isOpened, setIsOpened] = react.useState(false);
-  const btnRef = react.useRef(null);
-  const pageInfoRef = react.useRef(null);
-  const {
-    width: btnWidth
-  } = dsUtilities.useOnElementResize(btnRef);
-  const {
-    width: txtWidth
-  } = dsUtilities.useOnElementResize(pageInfoRef);
-  const options = react.useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
-    var _span;
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Paginator_exports = {};
+__export(Paginator_exports, {
+  default: () => Paginator_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_styled = require("../styled");
+var import_usePaginationSearch = require("../hooks/usePaginationSearch");
+const Paginator = (props) => {
+  const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
+  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
+  const btnRef = (0, import_react.useRef)(null);
+  const pageInfoRef = (0, import_react.useRef)(null);
+  const { width: btnWidth } = (0, import_ds_utilities.useOnElementResize)(btnRef);
+  const { width: txtWidth } = (0, import_ds_utilities.useOnElementResize)(pageInfoRef);
+  const options = (0, import_react.useMemo)(() => new Array(pageCount).fill(0).map((_, index) => {
     const option = {
       dsId: (index + 1).toString(),
       label: (index + 1).toString(),
       value: index + 1,
-      type: 'single'
+      type: "single"
     };
-
     if (pageDetails.length) {
-      option.render = () => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-        cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
+      option.render = () => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+        cols: ["16px", `${txtWidth + 16}px`, "auto"],
         gutter: "xxs",
         alignItems: "center"
-      }, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+      }, pageIndex === index ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Checkmark, {
         size: "s",
-        color: ['brand-primary', '600']
-      }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
+        color: ["brand-primary", "600"]
+      }) : /* @__PURE__ */ import_react.default.createElement("div", null), /* @__PURE__ */ import_react.default.createElement("span", null, index + 1), /* @__PURE__ */ import_react.default.createElement("span", {
         style: {
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden'
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          overflow: "hidden"
         }
-      }, void 0, pageDetails[index]));
+      }, pageDetails[index]));
     }
-
     return option;
   }), [pageCount, pageDetails, pageIndex, txtWidth]);
-  const actionRef = react.useRef({});
-  react.useEffect(() => {
+  const actionRef = (0, import_react.useRef)({});
+  (0, import_react.useEffect)(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant((pageIndex + 1).toString());
       actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
   }, [isOpened]);
-  const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
-      isOpened: isOpened,
-      options: options,
-      selectedOptions: {
-        [(pageIndex + 1).toString()]: true
-      },
-      onOptionClick: (_, clickedOption) => {
-        onPageChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current.focus();
-      },
-      customOffset: [0, 2],
-      startPlacementPreference: "top-end",
-      actionRef: actionRef,
-      onKeyDown: onKeyDown,
-      minWidth: btnWidth + 23,
-      maxHeight: 300,
-      HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-        cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
-      }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
-        style: {
-          marginLeft: '8px'
-        }
-      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
-        height: "100%"
-      })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
-      buttonType: "raw",
-      onClick: () => setIsOpened(true),
-      innerRef: btnRef
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-      style: {
-        display: 'flex',
-        gridGap: '8px',
-        alignItems: 'center'
-      }
-    }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
-      cols: ['auto', 'auto', 'auto'],
-      alignItems: "center",
-      gutter: "xxxs",
-      ref: pageInfoRef,
-      children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
-        fontSize: "18px"
-      }, void 0, pageIndex + 1), " / ", pageCount]
-    }), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
-        height: "12px",
-        ml: "8px"
-      })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
-        fontSize: "13px",
-        mr: "8px"
-      }, void 0, pageDetails[pageIndex])]
-    }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
-      color: ['brand-primary', '700']
-    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
-  });
+  const onKeyDown = (0, import_usePaginationSearch.usePaginationSearch)(pageCount, actionRef);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, null), /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
+    isOpened,
+    options,
+    selectedOptions: { [(pageIndex + 1).toString()]: true },
+    onOptionClick: (_, clickedOption) => {
+      onPageChange(clickedOption.value);
+      setIsOpened(false);
+      btnRef.current.focus();
+    },
+    onClickOutside: () => {
+      setIsOpened(false);
+      btnRef.current.focus();
+    },
+    customOffset: [0, 2],
+    startPlacementPreference: "top-end",
+    actionRef,
+    onKeyDown,
+    minWidth: btnWidth + 23,
+    maxHeight: 300,
+    HeaderComp: () => pageDetailsTitle !== "" ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+      cols: [`${txtWidth + 50}px`, "8px", "auto"]
+    }, /* @__PURE__ */ import_react.default.createElement("span", {
+      style: { marginLeft: "8px" }
+    }, "Page"), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, {
+      height: "100%"
+    }), /* @__PURE__ */ import_react.default.createElement("span", null, pageDetailsTitle)) : "Page"
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationDropdownButton, {
+    buttonType: "raw",
+    onClick: () => setIsOpened(true),
+    innerRef: btnRef
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { display: "flex", gridGap: "8px", alignItems: "center" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+    cols: ["auto", "auto", "auto"],
+    alignItems: "center",
+    gutter: "xxxs",
+    ref: pageInfoRef
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationBoldText, {
+    fontSize: "18px"
+  }, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, {
+    height: "12px",
+    ml: "8px"
+  }), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationBoldText, {
+    fontSize: "13px",
+    mr: "8px"
+  }, pageDetails[pageIndex])), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
+    color: ["brand-primary", "700"]
+  })))), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, null));
 };
-
-module.exports = Paginator;
+var Paginator_default = Paginator;
+module.exports = __toCommonJS(Paginator_exports);
+//# sourceMappingURL=Paginator.js.map

package/cjs/parts/Paginator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/Paginator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { Checkmark, ChevronDown } from '@elliemae/ds-icons';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { PaginationBoldText, PaginationDropdownButton, PaginationSeparator } from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\nimport { DSPaginationProps } from '../index.d';\n\nconst Paginator: React.ComponentType<DSPaginationProps> = (props) => {\n  const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n  const [isOpened, setIsOpened] = useState(false);\n\n  const btnRef = useRef(null);\n  const pageInfoRef = useRef(null);\n\n  const { width: btnWidth } = useOnElementResize(btnRef);\n  const { width: txtWidth } = useOnElementResize(pageInfoRef);\n\n  const options = useMemo(\n    () =>\n      new Array(pageCount).fill(0).map((_, index) => {\n        const option: Record<string, unknown> = {\n          dsId: (index + 1).toString(),\n          label: (index + 1).toString(),\n          value: index + 1,\n          type: 'single',\n        };\n        if (pageDetails.length) {\n          option.render = () => (\n            <Grid cols={['16px', `${txtWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n              {pageIndex === index ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}\n              <span>{index + 1}</span>\n              <span\n                style={{\n                  whiteSpace: 'nowrap',\n                  textOverflow: 'ellipsis',\n                  overflow: 'hidden',\n                }}\n              >\n                {pageDetails[index]}\n              </span>\n            </Grid>\n          );\n        }\n        return option;\n      }),\n    [pageCount, pageDetails, pageIndex, txtWidth],\n  );\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant((pageIndex + 1).toString());\n      actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n  return (\n    <>\n      <PaginationSeparator />\n      <DSDropdownMenuV2\n        isOpened={isOpened}\n        options={options}\n        selectedOptions={{ [(pageIndex + 1).toString()]: true }}\n        onOptionClick={(_, clickedOption) => {\n          onPageChange(clickedOption.value);\n          setIsOpened(false);\n          btnRef.current.focus();\n        }}\n        onClickOutside={() => {\n          setIsOpened(false);\n          btnRef.current.focus();\n        }}\n        customOffset={[0, 2]}\n        startPlacementPreference=\"top-end\"\n        actionRef={actionRef}\n        onKeyDown={onKeyDown}\n        minWidth={btnWidth + 23}\n        maxHeight={300}\n        HeaderComp={() =>\n          pageDetailsTitle !== '' ? (\n            <Grid cols={[`${txtWidth + 50}px`, '8px', 'auto']}>\n              <span style={{ marginLeft: '8px' }}>Page</span>\n              <PaginationSeparator height=\"100%\" />\n              <span>{pageDetailsTitle}</span>\n            </Grid>\n          ) : (\n            'Page'\n          )\n        }\n      >\n        <PaginationDropdownButton buttonType=\"raw\" onClick={() => setIsOpened(true)} innerRef={btnRef}>\n          <div style={{ display: 'flex', gridGap: '8px', alignItems: 'center' }}>\n            <Grid cols={['auto', 'auto', 'auto']} alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef}>\n              <PaginationBoldText fontSize=\"18px\">{pageIndex + 1}</PaginationBoldText> / {pageCount}\n            </Grid>\n            {pageDetails.length !== 0 && (\n              <>\n                <PaginationSeparator height=\"12px\" ml=\"8px\" />\n                <PaginationBoldText fontSize=\"13px\" mr=\"8px\">\n                  {pageDetails[pageIndex]}\n                </PaginationBoldText>\n              </>\n            )}\n            <ChevronDown color={['brand-primary', '700']} />\n          </div>\n        </PaginationDropdownButton>\n      </DSDropdownMenuV2>\n      <PaginationSeparator />\n    </>\n  );\n};\n\nexport default Paginator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/parts/PerPageSelector.js

@@ -1,71 +1,77 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var memoize = require('memoize-one');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
-var dsIcons = require('@elliemae/ds-icons');
-var styled = require('../styled.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
-
-const generateOption = value => {
-  if (typeof value === 'object') {
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var PerPageSelector_exports = {};
+__export(PerPageSelector_exports, {
+  default: () => PerPageSelector_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_memoize_one = __toESM(require("memoize-one"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_styled = require("../styled");
+const generateOption = (value) => {
+  if (typeof value === "object") {
     return value;
   }
-
   return {
     dsId: value.toString(),
     value,
     label: value.toString(),
-    type: 'single'
+    type: "single"
   };
 };
-
-const getOptions = memoize__default["default"]((step, min, max) => {
-  const options = dsUtilities.range(min, max + step, step).map(generateOption);
+const getOptions = (0, import_memoize_one.default)((step, min, max) => {
+  const options = (0, import_ds_utilities.range)(min, max + step, step).map(generateOption);
   return min === 0 ? options.slice(1, options.length) : options;
 });
-
-const PerPageSelector = props => {
-  const [isOpened, setIsOpened] = react.useState(false);
-  const {
-    pageSize,
-    onPageSizeChange,
-    perPageOptions,
-    maxPerPage,
-    perPageStep,
-    minPerPage
-  } = props;
-  const options = react.useMemo(() => {
-    if (perPageOptions) return perPageOptions.map(generateOption);
+const PerPageSelector = (props) => {
+  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
+  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;
+  const options = (0, import_react.useMemo)(() => {
+    if (perPageOptions)
+      return perPageOptions.map(generateOption);
     return getOptions(perPageStep, minPerPage, maxPerPage);
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
-  const actionRef = react.useRef({});
-  const btnRef = react.useRef(null);
-  react.useEffect(() => {
+  const actionRef = (0, import_react.useRef)({});
+  const btnRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant(pageSize.toString());
       actionRef.current.scrollOptionIntoView(pageSize.toString());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
   }, [isOpened]);
-  const {
-    width
-  } = dsUtilities.useOnElementResize(btnRef);
-  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: {
-      [pageSize.toString()]: true
-    },
+  const { width } = (0, import_ds_utilities.useOnElementResize)(btnRef);
+  return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
+    isOpened,
+    options,
+    selectedOptions: { [pageSize.toString()]: true },
     onOptionClick: (_, clickedOption) => {
       onPageSizeChange(clickedOption.value);
       setIsOpened(false);
@@ -77,22 +83,21 @@ const PerPageSelector = props => {
     },
     customOffset: [0, 2],
     startPlacementPreference: "top-end",
-    actionRef: actionRef,
+    actionRef,
     minWidth: width + 25,
     maxHeight: 300,
-    HeaderComp: () => 'Per Page'
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-    style: {
-      marginLeft: '32px'
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
+    HeaderComp: () => "Per Page"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    style: { marginLeft: "32px" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationDropdownButton, {
     buttonType: "raw",
     onClick: () => setIsOpened(true),
     "aria-pressed": isOpened,
     innerRef: btnRef
-  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
-    color: ['brand-primary', '700']
+  }, pageSize, " / page", /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
+    color: ["brand-primary", "700"]
   }))));
 };
-
-module.exports = PerPageSelector;
+var PerPageSelector_default = PerPageSelector;
+module.exports = __toCommonJS(PerPageSelector_exports);
+//# sourceMappingURL=PerPageSelector.js.map