@elliemae/ds-pagination 3.57.0-next.8 → 3.57.0-rc.0

package/dist/cjs/parts/DSPaginationSeparator/constants/index.js

@@ -0,0 +1,45 @@
+"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 constants_exports = {};
+__export(constants_exports, {
+  DSPaginationName: () => import_constants.DSPaginationName,
+  DSPaginationSeparatorName: () => DSPaginationSeparatorName,
+  PAGINATION_SEPARATOR_DATA_TESTID: () => PAGINATION_SEPARATOR_DATA_TESTID,
+  PAGINATION_SEPARATOR_SLOTS: () => PAGINATION_SEPARATOR_SLOTS
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../../constants/index.js");
+const DSPaginationSeparatorName = "DSPaginationSeparator";
+const PAGINATION_SEPARATOR_SLOTS = {
+  SEPARATOR: "separator"
+};
+const PAGINATION_SEPARATOR_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSPaginationName, PAGINATION_SEPARATOR_SLOTS);
+//# sourceMappingURL=index.js.map

package/dist/cjs/parts/DSPaginationSeparator/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginationSeparator/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\nexport const DSPaginationSeparatorName = 'DSPaginationSeparator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATION_SEPARATOR_SLOTS = {\n  SEPARATOR: 'separator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATION_SEPARATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATION_SEPARATOR_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAG1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,EACxC,WAAW;AACb;AAGO,MAAM,uCAAmC,0CAAwB,mCAAkB,0BAA0B;",
+  "names": []
+}

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

@@ -0,0 +1,41 @@
+"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 DSPaginationSeparator_exports = {};
+__export(DSPaginationSeparator_exports, {
+  DSPaginationSeparator: () => import_DSPaginationSeparator.DSPaginationSeparator,
+  DSPaginationSeparatorName: () => import_constants.DSPaginationSeparatorName,
+  DSPaginationSeparatorWithSchema: () => import_DSPaginationSeparator.DSPaginationSeparatorWithSchema,
+  PAGINATION_SEPARATOR_DATA_TESTID: () => import_constants.PAGINATION_SEPARATOR_DATA_TESTID,
+  PAGINATION_SEPARATOR_SLOTS: () => import_constants.PAGINATION_SEPARATOR_SLOTS
+});
+module.exports = __toCommonJS(DSPaginationSeparator_exports);
+var React = __toESM(require("react"));
+var import_DSPaginationSeparator = require("./DSPaginationSeparator.js");
+var import_constants = require("./constants/index.js");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginationSeparator/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { DSPaginationSeparator, DSPaginationSeparatorWithSchema } from './DSPaginationSeparator.js';\nexport {\n  DSPaginationSeparatorName,\n  PAGINATION_SEPARATOR_DATA_TESTID,\n  PAGINATION_SEPARATOR_SLOTS,\n} from './constants/index.js';\nexport type { DSPaginationSeparatorT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mCAAuE;AACvE,uBAIO;",
+  "names": []
+}

package/dist/cjs/parts/DSPaginationSeparator/react-desc-prop-types.js

@@ -0,0 +1,46 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSPaginationSeparatorPropTypes: () => DSPaginationSeparatorPropTypes,
+  DSPaginationSeparatorPropTypesSchema: () => DSPaginationSeparatorPropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const defaultProps = {};
+const DSPaginationSeparatorPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSPaginationName, import_constants.PAGINATION_SEPARATOR_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes
+};
+const DSPaginationSeparatorPropTypesSchema = DSPaginationSeparatorPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/parts/DSPaginationSeparator/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginationSeparator/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { getPropsPerSlotPropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PAGINATION_SEPARATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginationSeparatorT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PAGINATION_SEPARATOR_SLOTS> {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginationSeparatorT.DefaultProps = {};\n\nexport const DSPaginationSeparatorPropTypes: DSPropTypesSchema<DSPaginationSeparatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATION_SEPARATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSPaginationSeparatorPropTypesSchema =\n  DSPaginationSeparatorPropTypes as unknown as ValidationMap<DSPaginationSeparatorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAsF;AAEtF,uBAA6D;AAwBtD,MAAM,eAAoD,CAAC;AAE3D,MAAM,iCAAkF;AAAA,EAC7F,OAAG,kDAAyB,mCAAkB,2CAA0B;AAAA,EACxE,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,uCACX;",
+  "names": []
+}

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

@@ -0,0 +1,212 @@
+"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 = __toESM(require("react"));
+var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_DSPaginationSeparator = require("../DSPaginationSeparator/index.js");
+var import_createPaginatorHeader = require("./config/createPaginatorHeader.js");
+var import_usePaginator = require("./config/usePaginator.js");
+var import_constants = require("./constants/index.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+const DSPaginator = (props) => {
+  const {
+    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    btnRef,
+    btnWidth,
+    pageInfoWidth,
+    options,
+    isOpened,
+    actionRef,
+    widestChildRef,
+    pageInfoRef,
+    checkMarkRef,
+    checkMarkWidth,
+    onKeyDown,
+    setIsOpened
+  } = (0, import_usePaginator.usePaginator)(props);
+  const widestTypographyRef = import_react.default.useRef(null);
+  const Header = (0, import_react.useMemo)(
+    () => (0, import_createPaginatorHeader.createPaginatorHeader)({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth }),
+    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth]
+  );
+  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_styled.StyledDropdown,
+    {
+      isOpened,
+      options,
+      selectedOptions: { [pageIndex.toString()]: true },
+      onOptionClick: (_, clickedOption) => {
+        onPageChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      customOffset: [-(checkMarkWidth + 7), 2],
+      startPlacementPreference: "top-start",
+      actionRef,
+      onKeyDown,
+      minWidth: pageDetails.length !== 0 ? btnWidth + checkMarkWidth + 7 : (
+        /**
+         * Structure of the width:
+         *   16px (left padding)
+         *   + chevronWidth (size of the chevron icon)
+         *   + 8px (spacing between chevron and text)
+         *   + pageCount length in ch
+         *   + 16px (right padding)
+         *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)
+         * By using `calc()` + `ch` units, the component stays responsive to font-size changes
+         * without requiring an extra ref to measure the page count text width.
+         */
+        `calc(${checkMarkWidth + 60}px + ${pageCount.toString().length}ch)`
+      ),
+      maxHeight: 300,
+      HeaderComp: Header,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.PaginationDropdownButtonPaginator,
+          {
+            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_constants.PAGINATOR_DATA_TESTID.PAGINATOR,
+            ...globalAttributes,
+            ...xstyledProps,
+            ...ownerPropsConfig,
+            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.jsxs)(import_styled.StyledPageInfo, { innerRef: pageInfoRef, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_typography.DSTypography,
+                  {
+                    id: "typography-page-index",
+                    variant: "b1",
+                    as: "span",
+                    fontWeight: "semibold",
+                    textAlign: "start",
+                    children: pageIndex
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_ds_typography.DSTypography,
+                  {
+                    variant: "b1",
+                    as: "span",
+                    className: "typography-page-info-and-detail",
+                    children: [
+                      "/ ",
+                      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_DSPaginationSeparator.DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs", ...ownerPropsConfig }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_ds_typography.DSTypography,
+                  {
+                    className: "typography-page-info-and-detail",
+                    innerRef: widestTypographyRef,
+                    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"], innerRef: checkMarkRef })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { style: { position: "relative" }, children: pageDetails.map((pageDetail, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.InvisibleDiv,
+          {
+            innerRef: (el) => {
+              if (!el) return;
+              if (!widestChildRef.current) {
+                widestChildRef.current = el;
+                return;
+              }
+              if (el.offsetWidth > widestChildRef.current.offsetWidth) {
+                widestChildRef.current = el;
+              }
+              if (index === pageDetails.length - 1) {
+                widestTypographyRef.current?.style.setProperty("min-width", `${widestChildRef.current?.offsetWidth}px`);
+              }
+            },
+            "data-testid": "ds-pagination-invisible-detail-for-width-calc",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_typography.DSTypography,
+              {
+                className: "typography-page-info-and-detail",
+                mr: "xxs",
+                variant: "b1",
+                as: "span",
+                fontWeight: "semibold",
+                textAlign: "start",
+                children: pageDetail
+              }
+            )
+          },
+          pageDetail
+        )) })
+      ]
+    }
+  );
+};
+DSPaginator.displayName = import_constants.DSPaginatorName;
+const DSPaginatorWithSchema = (0, import_ds_props_helpers.describe)(DSPaginator);
+DSPaginatorWithSchema.propTypes = import_react_desc_prop_types.DSPaginatorPropTypesSchema;
+//# sourceMappingURL=DSPaginator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPaginator/DSPaginator.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSPaginationSeparator } from '../DSPaginationSeparator/index.js';\nimport { createPaginatorHeader } from './config/createPaginatorHeader.js';\nimport { usePaginator } from './config/usePaginator.js';\nimport { DSPaginatorName, PAGINATOR_DATA_TESTID } from './constants/index.js';\nimport { DSPaginatorPropTypesSchema, type DSPaginatorT } from './react-desc-prop-types.js';\nimport { InvisibleDiv, PaginationDropdownButtonPaginator, StyledDropdown, StyledPageInfo } from './styled.js';\n\nconst DSPaginator: React.ComponentType<DSPaginatorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    actionRef,\n    widestChildRef,\n    pageInfoRef,\n    checkMarkRef,\n    checkMarkWidth,\n    onKeyDown,\n    setIsOpened,\n  } = usePaginator(props);\n\n  const widestTypographyRef = React.useRef<HTMLDivElement>(null);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth }),\n    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth],\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    <StyledDropdown\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={[-(checkMarkWidth + 7), 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      onKeyDown={onKeyDown}\n      minWidth={\n        pageDetails.length !== 0\n          ? btnWidth + checkMarkWidth + 7\n          : /**\n             * Structure of the width:\n             *   16px (left padding)\n             *   + chevronWidth (size of the chevron icon)\n             *   + 8px (spacing between chevron and text)\n             *   + pageCount length in ch\n             *   + 16px (right padding)\n             *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)\n             * By using `calc()` + `ch` units, the component stays responsive to font-size changes\n             * without requiring an extra ref to measure the page count text width.\n             */\n\n            `calc(${checkMarkWidth + 60}px + ${pageCount.toString().length}ch)`\n      }\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButtonPaginator\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={PAGINATOR_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={buttonOnClick}\n      >\n        <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <StyledPageInfo innerRef={pageInfoRef}>\n            <DSTypography\n              /**\n               * Pagination uses DSTypography internally, but each typography variant defines\n               * its own font-size. When these components are placed inside a styled() wrapper,\n               * trying to style them via styled(DSTypography) triggers TypeScript errors\n               * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n               *\n               * Instead of wrapping DSTypography directly in styled(), we target the\n               * underlying rendered elements via className/id. This avoids the TS conflicts\n               * while still allowing us to override their font-size reliably.\n               */\n              id=\"typography-page-index\"\n              variant=\"b1\"\n              as=\"span\"\n              fontWeight=\"semibold\"\n              textAlign=\"start\"\n            >\n              {pageIndex}\n            </DSTypography>\n            <DSTypography\n              variant=\"b1\"\n              as=\"span\"\n              /**\n               * Pagination uses DSTypography internally, but each typography variant defines\n               * its own font-size. When these components are placed inside a styled() wrapper,\n               * trying to style them via styled(DSTypography) triggers TypeScript errors\n               * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n               *\n               * Instead of wrapping DSTypography directly in styled(), we target the\n               * underlying rendered elements via className/id. This avoids the TS conflicts\n               * while still allowing us to override their font-size reliably.\n               */ className=\"typography-page-info-and-detail\"\n            >\n              / {pageCount}\n            </DSTypography>\n          </StyledPageInfo>\n          {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n          {pageDetails.length !== 0 && (\n            <>\n              <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" {...ownerPropsConfig} />\n              <DSTypography\n                className=\"typography-page-info-and-detail\"\n                innerRef={widestTypographyRef}\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']} innerRef={checkMarkRef} />\n        </Grid>\n      </PaginationDropdownButtonPaginator>\n      {/* We calculate the length of the longest detail here (this is as per specs) */}\n      <Grid style={{ position: 'relative' }}>\n        {pageDetails.map((pageDetail, index) => (\n          <InvisibleDiv\n            innerRef={(el) => {\n              if (!el) return;\n              if (!widestChildRef.current) {\n                widestChildRef.current = el;\n                return;\n              }\n              if (el.offsetWidth > widestChildRef.current.offsetWidth) {\n                widestChildRef.current = el;\n              }\n              if (index === pageDetails.length - 1) {\n                widestTypographyRef.current?.style.setProperty('min-width', `${widestChildRef.current?.offsetWidth}px`);\n              }\n            }}\n            data-testid=\"ds-pagination-invisible-detail-for-width-calc\"\n            key={pageDetail}\n          >\n            <DSTypography\n              className=\"typography-page-info-and-detail\"\n              mr=\"xxs\"\n              variant=\"b1\"\n              as=\"span\"\n              fontWeight=\"semibold\"\n              textAlign=\"start\"\n            >\n              {pageDetail}\n            </DSTypography>\n          </InvisibleDiv>\n        ))}\n      </Grid>\n    </StyledDropdown>\n  );\n};\n\nDSPaginator.displayName = DSPaginatorName;\nconst DSPaginatorWithSchema = describe(DSPaginator);\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n\nexport { DSPaginator, DSPaginatorWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/cjs/parts/DSPaginator/{createPaginatorHeader.js → config/createPaginatorHeader.js}

@@ -33,14 +33,19 @@ __export(createPaginatorHeader_exports, {
 module.exports = __toCommonJS(createPaginatorHeader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_grid = require("@elliemae/ds-grid");
-var import_styled = require("../../styled.js");
-const createPaginatorHeader = ({ pageDetailsTitle, pageInfoWidth }) => {
+var import_DSPaginationSeparator = require("../../DSPaginationSeparator/index.js");
+var import_styled = require("../styled.js");
+const createPaginatorHeader = ({
+  pageDetailsTitle,
+  pageInfoWidth,
+  ownerPropsConfig,
+  checkMarkWidth
+}) => {
   const Comp = () => {
-    if (pageDetailsTitle === "") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Page" });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: [`${pageInfoWidth + 50}px`, "8px", "auto"], children: [
+    if (pageDetailsTitle === "") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeader, { children: "Page" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeader, { cols: [`${pageInfoWidth + checkMarkWidth + 34}px`, "8px", "auto"], children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: "8px" }, children: "Page" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.DSPaginationSeparator, { height: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSPaginationSeparator.DSPaginationSeparator, { height: "100%", ...ownerPropsConfig }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: pageDetailsTitle })
     ] });
   };

package/dist/cjs/parts/DSPaginator/config/createPaginatorHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/config/createPaginatorHeader.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { DSPaginationSeparator } from '../../DSPaginationSeparator/index.js';\nimport { StyledHeader } from '../styled.js';\n\ninterface PaginatorHeaderOptions {\n  pageDetailsTitle: string;\n  pageInfoWidth: number;\n  ownerPropsConfig: Record<string, unknown>;\n  checkMarkWidth: number;\n}\n\nexport const createPaginatorHeader = ({\n  pageDetailsTitle,\n  pageInfoWidth,\n  ownerPropsConfig,\n  checkMarkWidth,\n}: PaginatorHeaderOptions) => {\n  const Comp = () => {\n    if (pageDetailsTitle === '') return <StyledHeader>Page</StyledHeader>;\n\n    return (\n      <StyledHeader cols={[`${pageInfoWidth + checkMarkWidth + 34}px`, '8px', 'auto']}>\n        <span style={{ marginLeft: '8px' }}>Page</span>\n        <DSPaginationSeparator height=\"100%\" {...ownerPropsConfig} />\n        <span>{pageDetailsTitle}</span>\n      </StyledHeader>\n    );\n  };\n  return Comp;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBiB;AAjBxC,mCAAsC;AACtC,oBAA6B;AAStB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,OAAO,MAAM;AACjB,QAAI,qBAAqB,GAAI,QAAO,4CAAC,8BAAa,kBAAI;AAEtD,WACE,6CAAC,8BAAa,MAAM,CAAC,GAAG,gBAAgB,iBAAiB,EAAE,MAAM,OAAO,MAAM,GAC5E;AAAA,kDAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,MACxC,4CAAC,sDAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,MAC3D,4CAAC,UAAM,4BAAiB;AAAA,OAC1B;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/DSPaginator/{getOptions.js → config/getOptions.js}

@@ -37,8 +37,8 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
 const OptionWithDetails = (props) => {
   const Comp = () => {
-    const { pageInfoWidth, pageIndex, index, pageDetails } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["16px", `${pageInfoWidth + 16}px`, "auto"], gutter: "xxs", alignItems: "center", children: [
+    const { pageInfoWidth, pageIndex, index, pageDetails, checkMarkWidth } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: [`${checkMarkWidth}px`, `${pageInfoWidth + 16}px`, "auto"], gutter: "xxs", alignItems: "center", children: [
       pageIndex - 1 === index ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: index + 1 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -57,7 +57,7 @@ const OptionWithDetails = (props) => {
   return Comp;
 };
 const getOptions = (args) => {
-  const { pageCount, pageIndex, pageDetails, pageInfoWidth } = args;
+  const { pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth } = args;
   const amountOfPages = typeof pageCount === "string" ? pageIndex + 1 : pageCount;
   const options = new Array(amountOfPages).fill(0).map((_, index) => {
     const option = {
@@ -67,7 +67,7 @@ const getOptions = (args) => {
       type: "single"
     };
     if (pageDetails?.length) {
-      option.render = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails });
+      option.render = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails, checkMarkWidth });
     }
     return option;
   });

package/dist/cjs/parts/DSPaginator/config/getOptions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/config/getOptions.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\n\ninterface OptionWithDetailsT {\n  pageInfoWidth: number;\n  pageIndex: number;\n  index: number;\n  pageDetails: string[] | readonly string[];\n  checkMarkWidth: number;\n}\n\nconst OptionWithDetails = (props: OptionWithDetailsT) => {\n  const Comp = () => {\n    const { pageInfoWidth, pageIndex, index, pageDetails, checkMarkWidth } = props;\n\n    return (\n      <Grid cols={[`${checkMarkWidth}px`, `${pageInfoWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n        {pageIndex - 1 === 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 Comp;\n};\n\nexport const getOptions = (args: {\n  pageCount: number | string;\n  pageIndex: number;\n  pageDetails: string[] | readonly string[];\n  pageInfoWidth: number;\n  checkMarkWidth: number;\n}): DSDropdownMenuT.ItemSingleOptions[] => {\n  const { pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth } = args;\n\n  const amountOfPages = typeof pageCount === 'string' ? pageIndex + 1 : pageCount;\n\n  const options = new Array(amountOfPages).fill(0).map((_, index) => {\n    const option: DSDropdownMenuT.ItemSingleOptions = {\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 = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails, checkMarkWidth });\n    }\n    return option;\n  });\n  return options;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBjB;AAhBN,qBAAqB;AACrB,sBAA0B;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,aAAa,eAAe,IAAI;AAEzE,WACE,6CAAC,uBAAK,MAAM,CAAC,GAAG,cAAc,MAAM,GAAG,gBAAgB,EAAE,MAAM,MAAM,GAAG,QAAO,OAAM,YAAW,UAC7F;AAAA,kBAAY,MAAM,QAAQ,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,4CAAC,SAAI;AAAA,MAC1F,4CAAC,UAAM,kBAAQ,GAAE;AAAA,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,UAAU;AAAA,UACZ;AAAA,UAEC,sBAAY,KAAK;AAAA;AAAA,MACpB;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,CAAC,SAMgB;AACzC,QAAM,EAAE,WAAW,WAAW,aAAa,eAAe,eAAe,IAAI;AAE7E,QAAM,gBAAgB,OAAO,cAAc,WAAW,YAAY,IAAI;AAEtE,QAAM,UAAU,IAAI,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACjE,UAAM,SAA4C;AAAA,MAChD,OAAO,QAAQ,GAAG,SAAS;AAAA,MAC3B,QAAQ,QAAQ,GAAG,SAAS;AAAA,MAC5B,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA,IACR;AACA,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,kBAAkB,EAAE,eAAe,WAAW,OAAO,aAAa,eAAe,CAAC;AAAA,IACpG;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/DSPaginator/usePaginationSearch.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/DSPaginator/config/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,SAAU;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,uBAAwB,gBAAe,EAAE,GAAG;AAAA,YAC3C,gBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,kCAA0B,KAAK;AAC/B,YAAI,WAAW,QAAS,cAAa,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 → config/usePaginator.js}

@@ -32,58 +32,82 @@ __export(usePaginator_exports, {
 });
 module.exports = __toCommonJS(usePaginator_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_usePaginationSearch = require("./usePaginationSearch.js");
+var import_react = __toESM(require("react"));
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
+var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
 var import_getOptions = require("./getOptions.js");
-var import_useOnElementOnResize = require("./useOnElementOnResize.js");
-const usePaginator = (props) => {
-  const { pageIndex, pageCount, pageDetails } = props;
+var import_usePaginationSearch = require("./usePaginationSearch.js");
+const usePaginator = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSPaginatorPropTypesSchema);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(
+    propsWithDefault
+  );
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  const { pageIndex, pageCount, pageDetails } = propsWithDefault;
   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 widestChildRef = import_react.default.useRef(null);
+  const pageInfoRef = import_react.default.useRef(null);
+  const checkMarkRef = (0, import_react.useRef)(null);
   const { width: btnWidth } = (0, import_useOnElementOnResize.useOnElementResize)(btnRef);
+  const { width: checkMarkWidth } = (0, import_useOnElementOnResize.useOnElementResize)(checkMarkRef);
+  const { width: pageInfoWidth } = (0, import_useOnElementOnResize.useOnElementResize)(pageInfoRef);
+  const { width: detailWidth } = (0, import_useOnElementOnResize.useOnElementResize)(widestChildRef);
   const options = (0, import_react.useMemo)(
-    () => (0, import_getOptions.getOptions)({ pageCount, pageIndex, pageDetails, pageInfoWidth }),
-    [pageCount, pageIndex, pageDetails, pageInfoWidth]
+    () => (0, import_getOptions.getOptions)({ pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth }),
+    [pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth]
   );
   const onKeyDown = (0, import_usePaginationSearch.usePaginationSearch)(pageCount, actionRef);
-  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
-  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
-  };
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      btnRef,
+      btnWidth,
+      pageInfoWidth,
+      pageInfoRef,
+      options,
+      isOpened,
+      detailWidth,
+      actionRef,
+      widestChildRef,
+      checkMarkRef,
+      checkMarkWidth,
+      setIsOpened,
+      onKeyDown
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      btnRef,
+      btnWidth,
+      pageInfoWidth,
+      options,
+      isOpened,
+      detailWidth,
+      actionRef,
+      widestChildRef,
+      checkMarkRef,
+      checkMarkWidth,
+      pageInfoRef,
+      setIsOpened,
+      onKeyDown
+    ]
+  );
 };
 //# sourceMappingURL=usePaginator.js.map