@elliemae/ds-pagination 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/cjs/Pagination.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -33,18 +47,15 @@ __export(Pagination_exports, {
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_react_desc = require("react-desc");
 var import_PaginationContent = require("./parts/PaginationContent");
 var import_props = require("./props");
 const DSPagination = (props) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_props.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_props.propTypes);
-  return /* @__PURE__ */ import_react.default.createElement(import_PaginationContent.PaginationContent, {
-    ...propsWithDefault
-  });
+  return /* @__PURE__ */ import_react.default.createElement(import_PaginationContent.PaginationContent, __spreadValues({}, propsWithDefault));
 };
 DSPagination.propTypes = import_props.propTypes;
-const DSPaginationWithSchema = (0, import_react_desc.describe)(DSPagination).description("DSPagination");
+const DSPaginationWithSchema = (0, import_ds_props_helpers.describe)(DSPagination).description("DSPagination");
 DSPaginationWithSchema.propTypes = import_props.propTypes;
 module.exports = __toCommonJS(Pagination_exports);
 //# sourceMappingURL=Pagination.js.map

package/dist/cjs/Pagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Pagination.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { PaginationContent } from './parts/PaginationContent';\nimport { propTypes, defaultProps } from './props';\nimport { DSPaginationProps } from './index.d';\n\nconst DSPagination: React.ComponentType<DSPaginationProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = propTypes;\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = propTypes;\n\nexport { DSPagination, DSPaginationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAA6E;AAC7E,wBAAyB;AACzB,+BAAkC;AAClC,mBAAwC;AAGxC,MAAM,eAAuD,CAAC,UAAU;AACtE,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AAEjD,SAAO,mDAAC,4CAAD;AAAA,OAAuB;AAAA;AAAA;AAGhC,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { PaginationContent } from './parts/PaginationContent';\nimport { propTypes, defaultProps } from './props';\nimport { DSPaginationProps } from './index.d';\n\nconst DSPagination: React.ComponentType<DSPaginationProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = propTypes;\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = propTypes;\n\nexport { DSPagination, DSPaginationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAAuF;AACvF,+BAAkC;AAClC,mBAAwC;AAGxC,MAAM,eAAuD,CAAC,UAAU;AACtE,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AAEjD,SAAO,mDAAC,4CAAD,mBAAuB;AAAA;AAGhC,aAAa,YAAY;AACzB,MAAM,yBAAyB,sCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/index.d.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export interface DSPaginationProps {\n  pageCount: number;\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n  width?: any;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["export interface DSPaginationProps {\n  pageCount: number;\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  showPerPageSelector?: boolean;\n  perPageOptions?: (number | Record<string, unknown>)[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n  width?: string | number;\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/parts/PageNextButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PageNextButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PageNextButton: React.ComponentType<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>> = ({\n  onNextPage,\n  canNextPage,\n}) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canNextPage) onNextPage();\n    }}\n    disabled={!canNextPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.NEXT_BUTTON}\n    HeaderComp={() => 'Page'}\n  >\n    <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA6B;AAC7B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,MAEA,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAa;AAAA;AAAA,EAEnB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,EACpC,YAAY,MAAM;AAAA,GAElB,mDAAC,8BAAD;AAAA,EAAc,OAAO,cAAc,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PageNextButton: React.ComponentType<Required<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>>> = ({\n  onNextPage,\n  canNextPage,\n}) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canNextPage) onNextPage();\n    }}\n    disabled={!canNextPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.NEXT_BUTTON}\n    HeaderComp={() => 'Page'}\n  >\n    <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA6B;AAC7B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAAuG,CAAC;AAAA,EACnH;AAAA,EACA;AAAA,MAEA,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAa;AAAA;AAAA,EAEnB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,EACpC,YAAY,MAAM;AAAA,GAElB,mDAAC,8BAAD;AAAA,EAAc,OAAO,cAAc,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
   "names": []
 }

package/dist/cjs/parts/PagePrevButton.js

@@ -34,10 +34,7 @@ var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_PaginationDataTestID = require("../PaginationDataTestID");
 var import_styled = require("../styled");
-const PagePrevButton = ({
-  onPreviousPage,
-  canPreviousPage
-}) => /* @__PURE__ */ import_react.default.createElement(import_styled.PreviousNextPageButton, {
+const PagePrevButton = ({ onPreviousPage, canPreviousPage }) => /* @__PURE__ */ import_react.default.createElement(import_styled.PreviousNextPageButton, {
   onClick: () => {
     if (canPreviousPage)
       onPreviousPage();

package/dist/cjs/parts/PagePrevButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PagePrevButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PagePrevButton: React.ComponentType<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>> = ({\n  onPreviousPage,\n  canPreviousPage,\n}) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canPreviousPage) onPreviousPage();\n    }}\n    disabled={!canPreviousPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.PREVIOUS_BUTTON}\n  >\n    <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA4B;AAC5B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAAqG,CAAC;AAAA,EACjH;AAAA,EACA;AAAA,MAEA,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAiB;AAAA;AAAA,EAEvB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,GAEpC,mDAAC,6BAAD;AAAA,EAAa,OAAO,kBAAkB,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PagePrevButton: React.ComponentType<\n  Required<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>>\n> = ({ onPreviousPage, canPreviousPage }) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canPreviousPage) onPreviousPage();\n    }}\n    disabled={!canPreviousPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.PREVIOUS_BUTTON}\n  >\n    <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA4B;AAC5B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAET,CAAC,EAAE,gBAAgB,sBACrB,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAiB;AAAA;AAAA,EAEvB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,GAEpC,mDAAC,6BAAD;AAAA,EAAa,OAAO,kBAAkB,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
   "names": []
 }

package/dist/cjs/parts/PaginationContent.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
@@ -32,61 +46,66 @@ __export(PaginationContent_exports, {
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 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
-}))));
+const PaginationContent = (props) => {
+  const {
+    pageIndex,
+    pageSize,
+    canPreviousPage,
+    canNextPage,
+    onPageSizeChange,
+    onNextPage,
+    onPreviousPage,
+    onPageChange,
+    pageCount,
+    showPerPageSelector,
+    pageDetails,
+    pageDetailsTitle,
+    perPageOptions,
+    maxPerPage,
+    perPageStep,
+    minPerPage,
+    width
+  } = props;
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationContainer, __spreadValues({
+    justifyContent: "center",
+    alignItems: "center",
+    width: width.toString(),
+    "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER,
+    cols: ["minmax(auto, 80%)"]
+  }, globalAttributes), /* @__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, {
+    mr: "32px",
+    alignItems: "center",
+    style: { gridAutoFlow: "column" }
+  }, /* @__PURE__ */ import_react.default.createElement(import_PagePrevButton.PagePrevButton, {
+    canPreviousPage,
+    onPreviousPage
+  }), /* @__PURE__ */ import_react.default.createElement(import_Paginator.default, {
+    pageCount,
+    pageIndex,
+    onPageChange,
+    pageDetails,
+    pageDetailsTitle
+  }), /* @__PURE__ */ import_react.default.createElement(import_PageNextButton.PageNextButton, {
+    canNextPage,
+    onNextPage
+  }))));
+};
 module.exports = __toCommonJS(PaginationContent_exports);
 //# sourceMappingURL=PaginationContent.js.map

package/dist/cjs/parts/PaginationContent.js.map

@@ -1,7 +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;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\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<Required<DSPaginationProps>> = (props) => {\n  const {\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  } = props;\n\n  const globalAttributes = useGetGlobalAttributes(props);\n\n  return (\n    <PaginationContainer\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      width={width.toString()}\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      cols={['minmax(auto, 80%)']}\n      {...globalAttributes}\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 mr=\"32px\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <PagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n          <Paginator\n            pageCount={pageCount}\n            pageIndex={pageIndex}\n            onPageChange={onPageChange}\n            pageDetails={pageDetails}\n            pageDetailsTitle={pageDetailsTitle}\n          />\n          <PageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n        </Grid>\n      </PaginationWrapper>\n    </PaginationContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,qBAAqB;AACrB,8BAAuC;AACvC,oBAA4E;AAC5E,6BAA4B;AAC5B,uBAAsB;AACtB,kCAAuC;AACvC,4BAA+B;AAC/B,4BAA+B;AAGxB,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,oDAAuB;AAEhD,SACE,mDAAC,mCAAD;AAAA,IACE,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAO,MAAM;AAAA,IACb,eAAa,mDAAuB;AAAA,IACpC,MAAM,CAAC;AAAA,KACH,mBAEJ,mDAAC,iCAAD,MACG,uBACC,wFACE,mDAAC,gCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,mDAAC,mCAAD;AAAA,IAAqB,IAAI;AAAA,OAG7B,mDAAC,qBAAD;AAAA,IAAM,IAAG;AAAA,IAAO,YAAW;AAAA,IAAS,OAAO,EAAE,cAAc;AAAA,KACzD,mDAAC,sCAAD;AAAA,IAAgB;AAAA,IAAkC;AAAA,MAClD,mDAAC,0BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,mDAAC,sCAAD;AAAA,IAAgB;AAAA,IAA0B;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/Paginator.js

@@ -35,6 +35,7 @@ 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_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
 var import_styled = require("../styled");
 var import_usePaginationSearch = require("../hooks/usePaginationSearch");
 const Paginator = (props) => {
@@ -51,7 +52,7 @@ const Paginator = (props) => {
       value: index + 1,
       type: "single"
     };
-    if (pageDetails.length) {
+    if (pageDetails?.length) {
       option.render = () => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
         cols: ["16px", `${txtWidth + 16}px`, "auto"],
         gutter: "xxs",
@@ -76,6 +77,14 @@ const Paginator = (props) => {
       actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
     }
   }, [isOpened]);
+  const [detailWidth, setDetailWidth] = (0, import_react.useState)(0);
+  (0, import_react.useLayoutEffect)(() => {
+    const invisibleDetails = [
+      ...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')
+    ];
+    const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
+    setDetailWidth(maxWidth);
+  }, [pageDetails]);
   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,
@@ -84,11 +93,11 @@ const Paginator = (props) => {
     onOptionClick: (_, clickedOption) => {
       onPageChange(clickedOption.value);
       setIsOpened(false);
-      btnRef.current.focus();
+      btnRef.current?.focus();
     },
     onClickOutside: () => {
       setIsOpened(false);
-      btnRef.current.focus();
+      btnRef.current?.focus();
     },
     customOffset: [0, 2],
     startPlacementPreference: "top-end",
@@ -105,15 +114,17 @@ const Paginator = (props) => {
     }), /* @__PURE__ */ import_react.default.createElement("span", null, pageDetailsTitle)) : "Page"
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationDropdownButton, {
     buttonType: "raw",
-    onClick: () => setIsOpened(true),
+    onClick: () => setIsOpened((prev) => !prev),
     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"],
+    gutter: "xxs",
+    alignItems: "center",
+    cols: pageDetails.length !== 0 ? ["auto", "min-content", "minmax(0px, 70%)", "min-content"] : ["auto", "min-content"]
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
     alignItems: "center",
     gutter: "xxxs",
-    ref: pageInfoRef
+    ref: pageInfoRef,
+    style: { gridAutoFlow: "column" }
   }, /* @__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, {
@@ -121,10 +132,16 @@ const Paginator = (props) => {
     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, {
+    w: detailWidth,
+    mr: "xxs",
+    display: "grid"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
+    value: pageDetails[pageIndex]
+  }, pageDetails[pageIndex]))), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
     color: ["brand-primary", "700"]
-  })))), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, null));
+  }), pageDetails.map((pageDetail) => /* @__PURE__ */ import_react.default.createElement(import_styled.InvisibleDetail, {
+    "data-testid": "ds-pagination-invisible-detail-for-width-calc"
+  }, pageDetail))))), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, null));
 };
 var Paginator_default = Paginator;
 module.exports = __toCommonJS(Paginator_exports);

package/dist/cjs/parts/Paginator.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useLayoutEffect, 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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n  InvisibleDetail,\n  PaginationBoldText,\n  PaginationDetail,\n  PaginationDropdownButton,\n  PaginationSeparator,\n} from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\n\ninterface PaginatorPropsT {\n  pageIndex: number;\n  pageCount: number;\n  onPageChange: (page: number) => void;\n  pageDetails: string[];\n  pageDetailsTitle: string;\n}\n\nconst Paginator: React.ComponentType<PaginatorPropsT> = (props) => {\n  const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n  const [isOpened, setIsOpened] = useState(false);\n\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const pageInfoRef = useRef<HTMLDivElement>(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 [detailWidth, setDetailWidth] = useState(0);\n\n  useLayoutEffect(() => {\n    const invisibleDetails = [\n      ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n    ] as HTMLDivElement[];\n    const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n    setDetailWidth(maxWidth);\n  }, [pageDetails]);\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((prev) => !prev)} innerRef={btnRef}>\n          <Grid\n            gutter=\"xxs\"\n            alignItems=\"center\"\n            cols={\n              pageDetails.length !== 0\n                ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content']\n                : ['auto', 'min-content']\n            }\n          >\n            <Grid alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef} style={{ gridAutoFlow: 'column' }}>\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\" w={detailWidth} mr=\"xxs\" display=\"grid\">\n                  <SimpleTruncatedTooltipText value={pageDetails[pageIndex]}>\n                    {pageDetails[pageIndex]}\n                  </SimpleTruncatedTooltipText>\n                </PaginationBoldText>\n              </>\n            )}\n            <ChevronDown color={['brand-primary', '700']} />\n            {pageDetails.map((pageDetail) => (\n              <InvisibleDetail data-testid=\"ds-pagination-invisible-detail-for-width-calc\">\n                {pageDetail}\n              </InvisibleDetail>\n            ))}\n          </Grid>\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/dist/cjs/parts/PerPageSelector.js

@@ -75,11 +75,11 @@ const PerPageSelector = (props) => {
     onOptionClick: (_, clickedOption) => {
       onPageSizeChange(clickedOption.value);
       setIsOpened(false);
-      btnRef.current.focus();
+      btnRef.current?.focus();
     },
     onClickOutside: () => {
       setIsOpened(false);
-      btnRef.current.focus();
+      btnRef.current?.focus();
     },
     customOffset: [0, 2],
     startPlacementPreference: "top-end",
@@ -91,7 +91,7 @@ const PerPageSelector = (props) => {
     style: { marginLeft: "32px" }
   }, /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationDropdownButton, {
     buttonType: "raw",
-    onClick: () => setIsOpened(true),
+    onClick: () => setIsOpened((prev) => !prev),
     "aria-pressed": isOpened,
     innerRef: btnRef
   }, pageSize, " / page", /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {

package/dist/cjs/parts/PerPageSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PerPageSelector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range, useOnElementResize } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSPaginationProps } from '../index.d';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value) => {\n  if (typeof value === 'object') {\n    return value;\n  }\n  return {\n    dsId: value.toString(),\n    value,\n    label: value.toString(),\n    type: 'single',\n  };\n};\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 PerPageSelector: React.ComponentType<\n  Pick<\n    DSPaginationProps,\n    'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n  >\n> = (props) => {\n  const [isOpened, setIsOpened] = useState(false);\n  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageSize.toString());\n      actionRef.current.scrollOptionIntoView(pageSize.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  const { width } = useOnElementResize(btnRef);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange(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      minWidth={width + 25}\n      maxHeight={300}\n      HeaderComp={() => 'Per Page'}\n    >\n      <div style={{ marginLeft: '32px' }}>\n        <PaginationDropdownButton\n          buttonType=\"raw\"\n          onClick={() => setIsOpened(true)}\n          aria-pressed={isOpened}\n          innerRef={btnRef}\n        >\n          {pageSize} / page\n          <ChevronDown color={['brand-primary', '700']} />\n        </PaginationDropdownButton>\n      </div>\n    </DSDropdownMenuV2>\n  );\n};\n\nexport default PerPageSelector;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4D;AAC5D,yBAAoB;AACpB,0BAA0C;AAC1C,6BAAiC;AACjC,sBAA4B;AAE5B,oBAAyC;AAEzC,MAAM,iBAAiB,CAAC,UAAU;AAChC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM;AAAA;AAAA;AAIV,MAAM,aAAa,gCAAQ,CAAC,MAAM,KAAK,QAAQ;AAC7C,QAAM,UAAU,+BAAM,KAAK,MAAM,MAAM,MAAM,IAAI;AACjD,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,UAAU;AAAA;AAGxD,MAAM,kBAKF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,eAAe,2BAAS;AACzC,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,0BAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI;AAC9C,WAAO,WAAW,aAAa,YAAY;AAAA,KAC1C,CAAC,YAAY,YAAY,gBAAgB;AAE5C,QAAM,YAAY,yBAA+C;AACjE,QAAM,SAAS,yBAA0B;AAEzC,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS;AAC/C,gBAAU,QAAQ,qBAAqB,SAAS;AAAA;AAAA,KAGjD,CAAC;AAEJ,QAAM,EAAE,UAAU,4CAAmB;AAErC,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAG,SAAS,aAAa;AAAA,IAC1C,eAAe,CAAC,GAAG,kBAAkB;AACnC,uBAAiB,cAAc;AAC/B,kBAAY;AACZ,aAAO,QAAQ;AAAA;AAAA,IAEjB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,QAAQ;AAAA;AAAA,IAEjB,cAAc,CAAC,GAAG;AAAA,IAClB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,YAAY;AAAA,KACxB,mDAAC,wCAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAS,MAAM,YAAY;AAAA,IAC3B,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,mDAAC,6BAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAOhD,IAAO,0BAAQ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range, useOnElementResize } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSPaginationProps } from '../index.d';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value: number | Record<string, unknown>) => {\n  if (typeof value === 'object') {\n    return value;\n  }\n  return {\n    dsId: value.toString(),\n    value,\n    label: value.toString(),\n    type: 'single',\n  };\n};\n\nconst getOptions = memoize((step: number, min: number, max: number) => {\n  const options = range(min, max + step, step).map(generateOption);\n  return min === 0 ? options.slice(1, options.length) : options;\n});\n\nconst PerPageSelector: React.ComponentType<\n  Required<\n    Pick<\n      DSPaginationProps,\n      'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n    >\n  >\n> = (props) => {\n  const [isOpened, setIsOpened] = useState(false);\n  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageSize.toString());\n      actionRef.current.scrollOptionIntoView(pageSize.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  const { width } = useOnElementResize(btnRef);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange(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      minWidth={width + 25}\n      maxHeight={300}\n      HeaderComp={() => 'Per Page'}\n    >\n      <div style={{ marginLeft: '32px' }}>\n        <PaginationDropdownButton\n          buttonType=\"raw\"\n          onClick={() => setIsOpened((prev) => !prev)}\n          aria-pressed={isOpened}\n          innerRef={btnRef}\n        >\n          {pageSize} / page\n          <ChevronDown color={['brand-primary', '700']} />\n        </PaginationDropdownButton>\n      </div>\n    </DSDropdownMenuV2>\n  );\n};\n\nexport default PerPageSelector;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4D;AAC5D,yBAAoB;AACpB,0BAA0C;AAC1C,6BAAiC;AACjC,sBAA4B;AAE5B,oBAAyC;AAEzC,MAAM,iBAAiB,CAAC,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM;AAAA;AAAA;AAIV,MAAM,aAAa,gCAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,+BAAM,KAAK,MAAM,MAAM,MAAM,IAAI;AACjD,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,UAAU;AAAA;AAGxD,MAAM,kBAOF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,eAAe,2BAAS;AACzC,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,0BAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI;AAC9C,WAAO,WAAW,aAAa,YAAY;AAAA,KAC1C,CAAC,YAAY,YAAY,gBAAgB;AAE5C,QAAM,YAAY,yBAA+C;AACjE,QAAM,SAAS,yBAA0B;AAEzC,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS;AAC/C,gBAAU,QAAQ,qBAAqB,SAAS;AAAA;AAAA,KAGjD,CAAC;AAEJ,QAAM,EAAE,UAAU,4CAAmB;AAErC,SACE,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAG,SAAS,aAAa;AAAA,IAC1C,eAAe,CAAC,GAAG,kBAAkB;AACnC,uBAAiB,cAAc;AAC/B,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,cAAc,CAAC,GAAG;AAAA,IAClB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,YAAY;AAAA,KACxB,mDAAC,wCAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC;AAAA,IACtC,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,mDAAC,6BAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAOhD,IAAO,0BAAQ;",
   "names": []
 }

package/dist/cjs/props.js

@@ -31,34 +31,34 @@ __export(props_exports, {
   propTypes: () => propTypes
 });
 var React = __toESM(require("react"));
-var import_react_desc = require("react-desc");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 const emptyFunc = () => null;
 const propTypes = {
-  pageCount: import_react_desc.PropTypes.number.description("How many pages are there"),
-  pageIndex: import_react_desc.PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
-  canPreviousPage: import_react_desc.PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
-  canNextPage: import_react_desc.PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
-  pageSize: import_react_desc.PropTypes.number.description("The current page size").defaultValue(10),
-  showPerPageSelector: import_react_desc.PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
-  perPageOptions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.oneOfType([
-    import_react_desc.PropTypes.number,
-    import_react_desc.PropTypes.shape({
-      dsId: import_react_desc.PropTypes.string,
-      value: import_react_desc.PropTypes.number,
-      label: import_react_desc.PropTypes.string,
-      type: import_react_desc.PropTypes.oneOf(["single"])
+  pageCount: import_ds_props_helpers.PropTypes.number.description("How many pages are there"),
+  pageIndex: import_ds_props_helpers.PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
+  canPreviousPage: import_ds_props_helpers.PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
+  canNextPage: import_ds_props_helpers.PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
+  pageSize: import_ds_props_helpers.PropTypes.number.description("The current page size").defaultValue(10),
+  showPerPageSelector: import_ds_props_helpers.PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
+  perPageOptions: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([
+    import_ds_props_helpers.PropTypes.number,
+    import_ds_props_helpers.PropTypes.shape({
+      dsId: import_ds_props_helpers.PropTypes.string,
+      value: import_ds_props_helpers.PropTypes.number,
+      label: import_ds_props_helpers.PropTypes.string,
+      type: import_ds_props_helpers.PropTypes.oneOf(["single"])
     })
   ])).description("The available options for page size").defaultValue([10]),
-  perPageStep: import_react_desc.PropTypes.number.description("Step for the per page options").defaultValue(5),
-  minPerPage: import_react_desc.PropTypes.number.description("Step for the per page options").defaultValue(0),
-  maxPerPage: import_react_desc.PropTypes.number.description("Step for the per page options").defaultValue(100),
-  onPageSizeChange: import_react_desc.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
-  onPreviousPage: import_react_desc.PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
-  onPageChange: import_react_desc.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
-  onNextPage: import_react_desc.PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
-  pageDetails: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.string).description("Details to provide for each page").defaultValue([]),
-  pageDetailsTitle: import_react_desc.PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
-  width: import_react_desc.PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
+  perPageStep: import_ds_props_helpers.PropTypes.number.description("Step for the per page options").defaultValue(5),
+  minPerPage: import_ds_props_helpers.PropTypes.number.description("Step for the per page options").defaultValue(0),
+  maxPerPage: import_ds_props_helpers.PropTypes.number.description("Step for the per page options").defaultValue(100),
+  onPageSizeChange: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
+  onPreviousPage: import_ds_props_helpers.PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
+  onPageChange: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  onNextPage: import_ds_props_helpers.PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
+  pageDetails: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  pageDetailsTitle: import_ds_props_helpers.PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
+  width: import_ds_props_helpers.PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
 };
 const defaultProps = {
   pageIndex: 1,

package/dist/cjs/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nconst emptyFunc = (): void => null;\n\nexport const propTypes = {\n  pageCount: PropTypes.number.description('How many pages are there'),\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n  canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n  perPageOptions: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.shape({\n        dsId: PropTypes.string,\n        value: PropTypes.number,\n        label: PropTypes.string,\n        type: PropTypes.oneOf(['single']),\n      }),\n    ]),\n  )\n    .description('The available options for page size')\n    .defaultValue([10]),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n  minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  onPreviousPage: PropTypes.func\n    .description('Function invoked when the previous button is pressed')\n    .defaultValue(() => null),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n  width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n};\n\nexport const defaultProps = {\n  pageIndex: 1,\n  canPreviousPage: true,\n  canNextPage: true,\n  pageSize: 10,\n  showPerPageSelector: true,\n  perPageOptions: [10],\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n  onPageSizeChange: emptyFunc,\n  onPreviousPage: emptyFunc,\n  onNextPage: emptyFunc,\n  onPageChange: emptyFunc,\n  pageDetails: [],\n  pageDetailsTitle: '',\n  width: '100%',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAE1B,MAAM,YAAY,MAAY;AAEvB,MAAM,YAAY;AAAA,EACvB,WAAW,4BAAU,OAAO,YAAY;AAAA,EACxC,WAAW,4BAAU,OAAO,YAAY,8CAA8C,aAAa;AAAA,EACnG,iBAAiB,4BAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC3G,aAAa,4BAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,UAAU,4BAAU,OAAO,YAAY,yBAAyB,aAAa;AAAA,EAC7E,qBAAqB,4BAAU,KAAK,YAAY,qCAAqC,aAAa;AAAA,EAClG,gBAAgB,4BAAU,QACxB,4BAAU,UAAU;AAAA,IAClB,4BAAU;AAAA,IACV,4BAAU,MAAM;AAAA,MACd,MAAM,4BAAU;AAAA,MAChB,OAAO,4BAAU;AAAA,MACjB,OAAO,4BAAU;AAAA,MACjB,MAAM,4BAAU,MAAM,CAAC;AAAA;AAAA,MAI1B,YAAY,uCACZ,aAAa,CAAC;AAAA,EACjB,aAAa,4BAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACxF,YAAY,4BAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,YAAY,4BAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,kBAAkB,4BAAU,KAAK,YAAY,+CAA+C,aAAa,MAAM;AAAA,EAC/G,gBAAgB,4BAAU,KACvB,YAAY,wDACZ,aAAa,MAAM;AAAA,EACtB,cAAc,4BAAU,KAAK,YAAY,0CAA0C,aAAa,MAAM;AAAA,EACtG,YAAY,4BAAU,KAAK,YAAY,gDAAgD,aAAa,MAAM;AAAA,EAC1G,aAAa,4BAAU,QAAQ,4BAAU,QAAQ,YAAY,oCAAoC,aAAa;AAAA,EAC9G,kBAAkB,4BAAU,OACzB,YAAY,+DACZ,aAAa;AAAA,EAChB,OAAO,4BAAU,IAAI,YAAY,6CAA6C,aAAa;AAAA;AAGtF,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,OAAO;AAAA;",
+  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-props-helpers';\nimport { WeakValidationMap } from 'react';\n\nconst emptyFunc = () => null;\n\nexport const propTypes = {\n  pageCount: PropTypes.number.description('How many pages are there'),\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n  canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n  perPageOptions: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.shape({\n        dsId: PropTypes.string,\n        value: PropTypes.number,\n        label: PropTypes.string,\n        type: PropTypes.oneOf(['single']),\n      }),\n    ]),\n  )\n    .description('The available options for page size')\n    .defaultValue([10]),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n  minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  onPreviousPage: PropTypes.func\n    .description('Function invoked when the previous button is pressed')\n    .defaultValue(() => null),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n  width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps = {\n  pageIndex: 1,\n  canPreviousPage: true,\n  canNextPage: true,\n  pageSize: 10,\n  showPerPageSelector: true,\n  perPageOptions: [10],\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n  onPageSizeChange: emptyFunc,\n  onPreviousPage: emptyFunc,\n  onNextPage: emptyFunc,\n  onPageChange: emptyFunc,\n  pageDetails: [],\n  pageDetailsTitle: '',\n  width: '100%',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA0B;AAG1B,MAAM,YAAY,MAAM;AAEjB,MAAM,YAAY;AAAA,EACvB,WAAW,kCAAU,OAAO,YAAY;AAAA,EACxC,WAAW,kCAAU,OAAO,YAAY,8CAA8C,aAAa;AAAA,EACnG,iBAAiB,kCAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC3G,aAAa,kCAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,UAAU,kCAAU,OAAO,YAAY,yBAAyB,aAAa;AAAA,EAC7E,qBAAqB,kCAAU,KAAK,YAAY,qCAAqC,aAAa;AAAA,EAClG,gBAAgB,kCAAU,QACxB,kCAAU,UAAU;AAAA,IAClB,kCAAU;AAAA,IACV,kCAAU,MAAM;AAAA,MACd,MAAM,kCAAU;AAAA,MAChB,OAAO,kCAAU;AAAA,MACjB,OAAO,kCAAU;AAAA,MACjB,MAAM,kCAAU,MAAM,CAAC;AAAA;AAAA,MAI1B,YAAY,uCACZ,aAAa,CAAC;AAAA,EACjB,aAAa,kCAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACxF,YAAY,kCAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,YAAY,kCAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,kBAAkB,kCAAU,KAAK,YAAY,+CAA+C,aAAa,MAAM;AAAA,EAC/G,gBAAgB,kCAAU,KACvB,YAAY,wDACZ,aAAa,MAAM;AAAA,EACtB,cAAc,kCAAU,KAAK,YAAY,0CAA0C,aAAa,MAAM;AAAA,EACtG,YAAY,kCAAU,KAAK,YAAY,gDAAgD,aAAa,MAAM;AAAA,EAC1G,aAAa,kCAAU,QAAQ,kCAAU,QAAQ,YAAY,oCAAoC,aAAa;AAAA,EAC9G,kBAAkB,kCAAU,OACzB,YAAY,+DACZ,aAAa;AAAA,EAChB,OAAO,kCAAU,IAAI,YAAY,6CAA6C,aAAa;AAAA;AAGtF,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,OAAO;AAAA;",
   "names": []
 }