@elliemae/ds-pagination 3.16.0-next.2 → 3.16.0-next.20

package/dist/cjs/parts/DSPaginator/index.js

@@ -0,0 +1,148 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSPaginator_exports = {};
+__export(DSPaginator_exports, {
+  DSPaginator: () => DSPaginator,
+  DSPaginatorWithSchema: () => DSPaginatorWithSchema
+});
+module.exports = __toCommonJS(DSPaginator_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_styled = require("../../styled.js");
+var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
+var import_DSPaginationDefinitions = require("../../DSPaginationDefinitions.js");
+var import_usePaginator = require("./usePaginator.js");
+var import_createPaginatorHeader = require("./createPaginatorHeader.js");
+var import_PaginationDataTestID = require("../../PaginationDataTestID.js");
+const DSPaginator = (props) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
+    props,
+    import_react_desc_prop_types.paginatorDefaultProps
+  );
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSPaginatorPropTypesSchema, import_DSPaginationDefinitions.PaginatorName);
+  const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;
+  const {
+    btnRef,
+    btnWidth,
+    pageInfoWidth,
+    options,
+    isOpened,
+    setIsOpened,
+    detailWidth,
+    globalAttributes,
+    xstyledAttributes,
+    actionRef,
+    onKeyDown
+  } = (0, import_usePaginator.usePaginator)(propsWithDefault);
+  const Header = (0, import_react.useMemo)(
+    () => (0, import_createPaginatorHeader.createPaginatorHeader)({ pageDetailsTitle, pageInfoWidth }),
+    [pageDetailsTitle, pageInfoWidth]
+  );
+  const buttonOnClick = (0, import_react.useMemo)(() => {
+    if (globalAttributes.onClick)
+      return globalAttributes.onClick;
+    return () => setIsOpened((prev) => !prev);
+  }, [globalAttributes.onClick, setIsOpened]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ds_dropdownmenu.DSDropdownMenuV2,
+    {
+      isOpened,
+      options,
+      selectedOptions: { [pageIndex.toString()]: true },
+      onOptionClick: (_, clickedOption) => {
+        onPageChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      customOffset: [-23, 2],
+      startPlacementPreference: "top-start",
+      actionRef,
+      onKeyDown,
+      minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
+      maxHeight: 300,
+      HeaderComp: Header,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.PaginationDropdownButton,
+          {
+            buttonType: "raw",
+            disabled: isLoadingPageCount,
+            innerRef: btnRef,
+            "aria-pressed": isOpened,
+            "aria-label": `Page ${pageIndex} out of ${pageCount}, ${pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : "\b\b"}. Press to change the current page`,
+            "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.PAGINATOR,
+            ...globalAttributes,
+            ...xstyledAttributes,
+            onClick: buttonOnClick,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { fontSize: "18px", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageIndex }),
+              "/ ",
+              pageCount,
+              isLoadingPageCount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, { ml: "xxxs", mr: "xxxs", size: "xs" }),
+              pageDetails.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_typography.DSTypography,
+                  {
+                    fontSize: "13px",
+                    w: detailWidth,
+                    mr: "xxs",
+                    variant: "b1",
+                    as: "span",
+                    fontWeight: "semibold",
+                    textAlign: "start",
+                    children: pageDetails[pageIndex - 1]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { position: "relative" }, children: pageDetails.map((pageDetail) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.InvisibleDiv, { "data-testid": "ds-pagination-invisible-detail-for-width-calc", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { fontSize: "13px", mr: "xxs", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageDetail }) }, pageDetail)) })
+      ]
+    }
+  );
+};
+DSPaginator.propTypes = import_react_desc_prop_types.DSPaginatorPropTypesSchema;
+DSPaginator.displayName = import_DSPaginationDefinitions.PaginatorName;
+const DSPaginatorWithSchema = (0, import_ds_props_helpers.describe)(DSPaginator).description("Per Page Selector");
+DSPaginatorWithSchema.propTypes = import_react_desc_prop_types.DSPaginatorPropTypesSchema;
+//# sourceMappingURL=index.js.map

package/dist/cjs/parts/DSPaginator/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginator/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled.js';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginatorName } from '../../DSPaginationDefinitions.js';\nimport { usePaginator } from './usePaginator.js';\nimport { createPaginatorHeader } from './createPaginatorHeader.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const DSPaginator: React.ComponentType<DSPaginationT.PaginatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PaginatorInternalProps>(\n    props,\n    paginatorDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPaginatorPropTypesSchema, PaginatorName);\n\n  const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;\n\n  const {\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    setIsOpened,\n    detailWidth,\n    globalAttributes,\n    xstyledAttributes,\n    actionRef,\n    onKeyDown,\n  } = usePaginator(propsWithDefault);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth }),\n    [pageDetailsTitle, pageInfoWidth],\n  );\n\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageIndex.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-23, 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      onKeyDown={onKeyDown}\n      minWidth={pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButton\n        buttonType=\"raw\"\n        disabled={isLoadingPageCount}\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`Page ${pageIndex} out of ${pageCount}, ${\n          pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : '\\b\\b'\n        }. Press to change the current page`}\n        data-testid={PAGINATION_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledAttributes}\n        onClick={buttonOnClick}\n      >\n        <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <DSTypography fontSize=\"18px\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n            {pageIndex}\n          </DSTypography>\n          / {pageCount}\n          {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n          {pageDetails.length !== 0 && (\n            <>\n              <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" />\n              <DSTypography\n                fontSize=\"13px\"\n                w={detailWidth}\n                mr=\"xxs\"\n                variant=\"b1\"\n                as=\"span\"\n                fontWeight=\"semibold\"\n                textAlign=\"start\"\n              >\n                {pageDetails[pageIndex - 1]}\n              </DSTypography>\n            </>\n          )}\n          <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} />\n        </Grid>\n      </PaginationDropdownButton>\n      {/* We calculate the length of the longest detail here (this is as per specs) */}\n      <Grid style={{ position: 'relative' }}>\n        {pageDetails.map((pageDetail) => (\n          <InvisibleDiv data-testid=\"ds-pagination-invisible-detail-for-width-calc\" key={pageDetail}>\n            <DSTypography fontSize=\"13px\" mr=\"xxs\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n              {pageDetail}\n            </DSTypography>\n          </InvisibleDiv>\n        ))}\n      </Grid>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPaginator.propTypes = DSPaginatorPropTypesSchema;\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/{hooks → parts/DSPaginator}/usePaginationSearch.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -32,8 +36,10 @@ var import_react = require("react");
 const usePaginationSearch = (pageCount, actionRef) => {
   const [searchValue, setSearchValue] = (0, import_react.useState)("");
   const [shouldResetSearchValue, setShouldResetSearchValue] = (0, import_react.useState)(true);
-  const timeoutRef = (0, import_react.useRef)(null);
+  const timeoutRef = (0, import_react.useRef)();
   (0, import_react.useEffect)(() => {
+    if (typeof pageCount === "string")
+      return;
     if (searchValue !== "" && Number.parseInt(searchValue, 10) <= pageCount) {
       actionRef.current.setActiveDescendant(searchValue);
       actionRef.current.scrollOptionIntoView(searchValue);
@@ -47,7 +53,8 @@ const usePaginationSearch = (pageCount, actionRef) => {
         else
           setSearchValue((prevValue) => prevValue + e.key);
         setShouldResetSearchValue(false);
-        clearTimeout(timeoutRef.current);
+        if (timeoutRef.current)
+          clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => {
           setShouldResetSearchValue(true);
         }, 1e3);

package/dist/cjs/parts/DSPaginator/usePaginationSearch.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginator/usePaginationSearch.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const usePaginationSearch = (\n  pageCount: string | number,\n  actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>,\n): React.KeyboardEventHandler => {\n  const [searchValue, setSearchValue] = useState('');\n  const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);\n\n  const timeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (typeof pageCount === 'string') return;\n\n    if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {\n      actionRef.current.setActiveDescendant(searchValue);\n      actionRef.current.scrollOptionIntoView(searchValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchValue]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code.startsWith('Digit')) {\n        if (shouldResetSearchValue) setSearchValue(e.key);\n        else setSearchValue((prevValue) => prevValue + e.key);\n\n        setShouldResetSearchValue(false);\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        timeoutRef.current = setTimeout(() => {\n          setShouldResetSearchValue(true);\n        }, 1000);\n      }\n    },\n    [shouldResetSearchValue],\n  );\n\n  return onKeyDown;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyD;AAElD,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AACjD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,uBAAS,IAAI;AAEzE,QAAM,iBAAa,qBAAuB;AAE1C,8BAAU,MAAM;AACd,QAAI,OAAO,cAAc;AAAU;AAEnC,QAAI,gBAAgB,MAAM,OAAO,SAAS,aAAa,EAAE,KAAK,WAAW;AACvE,gBAAU,QAAQ,oBAAoB,WAAW;AACjD,gBAAU,QAAQ,qBAAqB,WAAW;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,KAAK,WAAW,OAAO,GAAG;AAC9B,YAAI;AAAwB,yBAAe,EAAE,GAAG;AAAA;AAC3C,yBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,kCAA0B,KAAK;AAC/B,YAAI,WAAW;AAAS,uBAAa,WAAW,OAAO;AACvD,mBAAW,UAAU,WAAW,MAAM;AACpC,oCAA0B,IAAI;AAAA,QAChC,GAAG,GAAI;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/DSPaginator/usePaginator.js

@@ -0,0 +1,91 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePaginator_exports = {};
+__export(usePaginator_exports, {
+  usePaginator: () => usePaginator
+});
+module.exports = __toCommonJS(usePaginator_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_usePaginationSearch = require("./usePaginationSearch.js");
+var import_getOptions = require("./getOptions.js");
+const usePaginator = (props) => {
+  const { pageIndex, pageCount, pageDetails } = props;
+  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
+  const [detailWidth, setDetailWidth] = (0, import_react.useState)(0);
+  const [pageInfoWidth, setPageInfoWidth] = (0, import_react.useState)(0);
+  const btnRef = (0, import_react.useRef)(null);
+  const actionRef = (0, import_react.useRef)({});
+  const { width: btnWidth } = (0, import_ds_utilities.useOnElementResize)(btnRef);
+  const options = (0, import_react.useMemo)(
+    () => (0, import_getOptions.getOptions)({ pageCount, pageIndex, pageDetails, pageInfoWidth }),
+    [pageCount, pageIndex, pageDetails, pageInfoWidth]
+  );
+  const onKeyDown = (0, import_usePaginationSearch.usePaginationSearch)(pageCount, actionRef);
+  const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(props), ["shape", "type", "size"]);
+  const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  (0, import_react.useEffect)(() => {
+    if (isOpened) {
+      actionRef.current.setActiveDescendant(pageIndex.toString());
+      actionRef.current.scrollOptionIntoView(pageIndex.toString());
+    }
+  }, [isOpened]);
+  (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]);
+  (0, import_react.useEffect)(() => {
+    setPageInfoWidth(() => {
+      if (detailWidth)
+        return btnWidth - detailWidth - 89;
+      return btnWidth - 56;
+    });
+  }, [btnWidth, detailWidth]);
+  return {
+    btnRef,
+    btnWidth,
+    pageInfoWidth,
+    options,
+    isOpened,
+    setIsOpened,
+    detailWidth,
+    setDetailWidth,
+    globalAttributes,
+    xstyledAttributes,
+    actionRef,
+    onKeyDown
+  };
+};
+//# sourceMappingURL=usePaginator.js.map

package/dist/cjs/parts/DSPaginator/usePaginator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginator/usePaginator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { usePaginationSearch } from './usePaginationSearch.js';\nimport { getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const usePaginator = (props: DSPaginationT.PaginatorInternalProps) => {\n  const { pageIndex, pageCount, pageDetails } = props;\n\n  const [isOpened, setIsOpened] = useState(false);\n  const [detailWidth, setDetailWidth] = useState(0);\n  const [pageInfoWidth, setPageInfoWidth] = useState(0);\n\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n  const { width: btnWidth } = useOnElementResize(btnRef);\n\n  const options = useMemo(\n    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),\n    [pageCount, pageIndex, pageDetails, pageInfoWidth],\n  );\n\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n  const globalAttributes = omit(useGetGlobalAttributes(props), ['shape', 'type', 'size']);\n  const xstyledAttributes = useGetXstyledProps(props);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageIndex.toString());\n      actionRef.current.scrollOptionIntoView(pageIndex.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\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  useEffect(() => {\n    setPageInfoWidth(() => {\n      // Here we get the size of the page info\n      // Inside of the button, we have the page info, the chevron, separators, page details and padding\n      // We substract the detailWidth if present, and the padding + chevron + separators in each case\n      if (detailWidth) return btnWidth - detailWidth - 89;\n      return btnWidth - 56;\n    });\n  }, [btnWidth, detailWidth]);\n\n  return {\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    setIsOpened,\n    detailWidth,\n    setDetailWidth,\n    globalAttributes,\n    xstyledAttributes,\n    actionRef,\n    onKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsE;AACtE,oBAAqB;AACrB,8BAA2D;AAC3D,0BAAmC;AACnC,iCAAoC;AACpC,wBAA2B;AAGpB,MAAM,eAAe,CAAC,UAAgD;AAC3E,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,QAAM,aAAS,qBAA0B,IAAI;AAC7C,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,QAAI,wCAAmB,MAAM;AAErD,QAAM,cAAU;AAAA,IACd,UAAM,8BAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,gBAAY,gDAAoB,WAAW,SAAS;AAE1D,QAAM,uBAAmB,wBAAK,gDAAuB,KAAK,GAAG,CAAC,SAAS,QAAQ,MAAM,CAAC;AACtF,QAAM,wBAAoB,4CAAmB,KAAK;AAElD,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,oCAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,8BAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI;AAAa,eAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/parts/{PagePrevButton.js → DSPerPageSelector/getOptions.js}

@@ -18,32 +18,35 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var PagePrevButton_exports = {};
-__export(PagePrevButton_exports, {
-  PagePrevButton: () => PagePrevButton
+var getOptions_exports = {};
+__export(getOptions_exports, {
+  generateOption: () => generateOption,
+  getOptions: () => getOptions
 });
-module.exports = __toCommonJS(PagePrevButton_exports);
+module.exports = __toCommonJS(getOptions_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_PaginationDataTestID = require("../PaginationDataTestID");
-var import_styled = require("../styled");
-const PagePrevButton = ({ onPreviousPage, canPreviousPage }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_styled.PreviousNextPageButton,
-  {
-    onClick: () => {
-      if (canPreviousPage)
-        onPreviousPage();
-    },
-    disabled: !canPreviousPage,
-    buttonType: "raw",
-    "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.PREVIOUS_BUTTON,
-    "aria-label": "Go to previous page",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronLeft, { color: canPreviousPage ? ["brand-primary", "700"] : ["neutral", "500"] })
+var import_ds_utilities = require("@elliemae/ds-utilities");
+const generateOption = (value) => {
+  if (typeof value === "object") {
+    return value;
   }
-);
-//# sourceMappingURL=PagePrevButton.js.map
+  return {
+    dsId: value.toString(),
+    value,
+    label: value.toString(),
+    type: "single"
+  };
+};
+const getOptions = (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;
+};
+//# sourceMappingURL=getOptions.js.map

package/dist/cjs/parts/DSPerPageSelector/getOptions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPerPageSelector/getOptions.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { range } from '@elliemae/ds-utilities';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\n\nexport const generateOption = (\n  value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\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  } as const;\n};\n\nexport const getOptions = (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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAsB;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,cAAU,2BAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
+  "names": []
+}

package/dist/cjs/parts/DSPerPageSelector/index.js

@@ -0,0 +1,106 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSPerPageSelector_exports = {};
+__export(DSPerPageSelector_exports, {
+  DSPerPageSelector: () => DSPerPageSelector,
+  DSPerPageSelectorWithSchema: () => DSPerPageSelectorWithSchema
+});
+module.exports = __toCommonJS(DSPerPageSelector_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
+var import_styled = require("../../styled.js");
+var import_DSPaginationDefinitions = require("../../DSPaginationDefinitions.js");
+var import_usePerPageSelector = require("./usePerPageSelector.js");
+var import_PaginationDataTestID = require("../../PaginationDataTestID.js");
+const Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Per Page" });
+const DSPerPageSelector = (props) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
+    props,
+    import_react_desc_prop_types.perPageSelectorDefaultProps
+  );
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema, import_DSPaginationDefinitions.PerPageSelectorName);
+  const { pageSize, onPageSizeChange } = propsWithDefault;
+  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } = (0, import_usePerPageSelector.usePerPageSelector)(propsWithDefault);
+  const buttonOnClick = (0, import_react.useMemo)(() => {
+    if (globalAttributes.onClick)
+      return globalAttributes.onClick;
+    return () => setIsOpened((prev) => !prev);
+  }, [globalAttributes.onClick, setIsOpened]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_dropdownmenu.DSDropdownMenuV2,
+    {
+      isOpened,
+      options,
+      selectedOptions: { [pageSize.toString()]: true },
+      onOptionClick: (_, clickedOption) => {
+        onPageSizeChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      customOffset: [-23, 2],
+      startPlacementPreference: "top-start",
+      actionRef,
+      minWidth: width,
+      maxHeight: 300,
+      HeaderComp: Header,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.PaginationDropdownButton,
+        {
+          buttonType: "raw",
+          innerRef: btnRef,
+          "aria-pressed": isOpened,
+          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
+          "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR,
+          ...globalAttributes,
+          ...xstyledAttributes,
+          onClick: buttonOnClick,
+          children: [
+            pageSize,
+            " / page",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"] })
+          ]
+        }
+      )
+    }
+  );
+};
+DSPerPageSelector.propTypes = import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema;
+DSPerPageSelector.displayName = import_DSPaginationDefinitions.PerPageSelectorName;
+const DSPerPageSelectorWithSchema = (0, import_ds_props_helpers.describe)(DSPerPageSelector).description("Per Page Selector");
+DSPerPageSelectorWithSchema.propTypes = import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema;
+//# sourceMappingURL=index.js.map

package/dist/cjs/parts/DSPerPageSelector/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPerPageSelector/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginationDropdownButton } from '../../styled.js';\nimport { PerPageSelectorName } from '../../DSPaginationDefinitions.js';\nimport { usePerPageSelector } from './usePerPageSelector.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\n\nconst Header = () => <>{'Per Page'}</>;\n\nexport const DSPerPageSelector: React.ComponentType<DSPaginationT.PerPageSelectorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PerPageSelectorInternalProps>(\n    props,\n    perPageSelectorDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);\n\n  const { pageSize, onPageSizeChange } = propsWithDefault;\n\n  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } =\n    usePerPageSelector(propsWithDefault);\n\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-23, 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      minWidth={width}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButton\n        buttonType=\"raw\"\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`${pageSize} rows per page. Press to select rows per page`}\n        data-testid={PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledAttributes}\n        onClick={buttonOnClick}\n      >\n        {pageSize} / page\n        <ChevronDown color={['brand-primary', '700']} />\n      </PaginationDropdownButton>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.propTypes = DSPerPageSelectorPropTypesSchema;\nDSPerPageSelector.displayName = PerPageSelectorName;\nexport const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description('Per Page Selector');\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaF;AAbrB,mBAA+B;AAC/B,8BAAuF;AAEvF,6BAAiC;AACjC,sBAA4B;AAC5B,mCAA8E;AAC9E,oBAAyC;AACzC,qCAAoC;AACpC,gCAAmC;AACnC,kCAAuC;AAIvC,MAAM,SAAS,MAAM,2EAAG,sBAAW;AAE5B,MAAM,oBAA6E,CAAC,UAAU;AACnG,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,8DAA+B,kBAAkB,+DAAkC,kDAAmB;AAEtG,QAAM,EAAE,UAAU,iBAAiB,IAAI;AAEvC,QAAM,EAAE,WAAW,QAAQ,OAAO,UAAU,aAAa,SAAS,kBAAkB,kBAAkB,QACpG,8CAAmB,gBAAgB;AAErC,QAAM,oBAA4C,sBAAQ,MAAM;AAC9D,QAAI,iBAAiB;AAAS,aAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,CAAC,GAAG,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,KAAK,CAAC;AAAA,MACrB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG;AAAA,UACf,eAAa,mDAAuB;AAAA,UACnC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AACzB,MAAM,kCAA8B,kCAAS,iBAAiB,EAAE,YAAY,mBAAmB;AACtG,4BAA4B,YAAY;",
+  "names": []
+}

package/dist/cjs/parts/DSPerPageSelector/usePerPageSelector.js

@@ -0,0 +1,72 @@
+"use strict";
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePerPageSelector_exports = {};
+__export(usePerPageSelector_exports, {
+  usePerPageSelector: () => usePerPageSelector
+});
+module.exports = __toCommonJS(usePerPageSelector_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_lodash = require("lodash");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_getOptions = require("./getOptions.js");
+const usePerPageSelector = (props) => {
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;
+  const [isOpened, setIsOpened] = (0, import_react.useState)(false);
+  const options = (0, import_react.useMemo)(() => {
+    if (perPageOptions)
+      return perPageOptions.map(import_getOptions.generateOption);
+    return (0, import_getOptions.getOptions)(perPageStep, minPerPage, maxPerPage);
+  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
+  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());
+    }
+  }, [isOpened]);
+  const width = (0, import_react.useMemo)(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength * 6 + 90;
+  }, [options]);
+  const globalAttributes = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(props), ["shape", "type", "size"]);
+  const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  return {
+    actionRef,
+    btnRef,
+    width,
+    isOpened,
+    setIsOpened,
+    options,
+    globalAttributes,
+    xstyledAttributes
+  };
+};
+//# sourceMappingURL=usePerPageSelector.js.map

package/dist/cjs/parts/DSPerPageSelector/usePerPageSelector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPerPageSelector/usePerPageSelector.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useEffect, useMemo, useRef, useState } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { generateOption, getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const usePerPageSelector = (props: DSPaginationT.PerPageSelectorInternalProps) => {\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;\n\n  const [isOpened, setIsOpened] = useState(false);\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 = useMemo(() => {\n    const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n    return maxLength * 6 + 90;\n  }, [options]);\n\n  const globalAttributes = omit(useGetGlobalAttributes(props), ['shape', 'type', 'size']);\n  const xstyledAttributes = useGetXstyledProps(props);\n\n  return {\n    actionRef,\n    btnRef,\n    width,\n    isOpened,\n    setIsOpened,\n    options,\n    globalAttributes,\n    xstyledAttributes,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,oBAAqB;AACrB,8BAA2D;AAC3D,wBAA2C;AAGpC,MAAM,qBAAqB,CAAC,UAAsD;AACvF,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAE1E,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,uBAAmB,wBAAK,gDAAuB,KAAK,GAAG,CAAC,SAAS,QAAQ,MAAM,CAAC;AACtF,QAAM,wBAAoB,4CAAmB,KAAK;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}