@elliemae/ds-pagination 3.57.0-next.40 → 3.57.0-next.41

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/DSPaginator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSDropdownMenuV2, 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 { PaginationDropdownButtonPaginator, InvisibleDiv } 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    setIsOpened,\n    detailWidth,\n    actionRef,\n    onKeyDown,\n  } = usePaginator(props);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig }),\n    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig],\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      <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          <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\" {...ownerPropsConfig} />\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      </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) => (\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.displayName = DSPaginatorName;\nconst DSPaginatorWithSchema = describe(DSPaginator);\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n\nexport { DSPaginator, DSPaginatorWithSchema };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 } 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          <div ref={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          </div>\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACqGX,SAsCA,UAtCA,KAmBA,YAnBA;AArGZ,OAAOA,UAAS,eAAe;AAE/B,SAAS,wCAAwC;AAEjD,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,kCAAqD;AAC9D,SAAS,cAAc,mCAAmC,sBAAsB;AAEhF,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,WAAW,oBAAoB,cAAc,aAAa,iBAAiB;AAAA,IAC1G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,KAAK;AAEtB,QAAM,sBAAsBA,OAAM,OAAuB,IAAI;AAE7D,QAAM,SAAS;AAAA,IACb,MAAM,sBAAsB,EAAE,kBAAkB,eAAe,kBAAkB,eAAe,CAAC;AAAA,IACjG,CAAC,kBAAkB,eAAe,kBAAkB,cAAc;AAAA,EACpE;AAEA,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,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,UAAU,SAAS,CAAC,GAAG,KAAK;AAAA,MAChD,eAAe,CAAC,GAAG,kBAAkB;AACnC,qBAAc,cAAoD,KAAe;AACjF,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,EAAE,iBAAiB,IAAI,CAAC;AAAA,MACvC,0BAAyB;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UACE,YAAY,WAAW,IACnB,WAAW,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAa5B,QAAQ,iBAAiB,EAAE,QAAQ,UAAU,SAAS,EAAE,MAAM;AAAA;AAAA,MAEpE,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,UAAU;AAAA,YACV,UAAU;AAAA,YACV,gBAAc;AAAA,YACd,cAAY,QAAQ,SAAS,WAAW,SAAS,KAC/C,YAAY,WAAW,IAAI,YAAY,YAAY,CAAC,IAAI,MAC1D;AAAA,YACA,eAAa,sBAAsB;AAAA,YAClC,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,SAAS;AAAA,YAET,+BAAC,QAAK,QAAO,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GACtE;AAAA,mCAAC,SAAI,KAAK,aACR;AAAA;AAAA,kBAAC;AAAA;AAAA,oBAWC,IAAG;AAAA,oBACH,SAAQ;AAAA,oBACR,IAAG;AAAA,oBACH,YAAW;AAAA,oBACX,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,IAAG;AAAA,oBAUC,WAAU;AAAA,oBACf;AAAA;AAAA,sBACI;AAAA;AAAA;AAAA,gBACL;AAAA,iBACF;AAAA,cACC,sBAAsB,oBAAC,oCAAiC,IAAG,QAAO,IAAG,QAAO,MAAK,MAAK;AAAA,cACtF,YAAY,WAAW,KACtB,iCACE;AAAA,oCAAC,yBAAsB,QAAO,QAAO,IAAG,QAAO,IAAG,QAAQ,GAAG,kBAAkB;AAAA,gBAC/E;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAU;AAAA,oBACV,IAAG;AAAA,oBACH,SAAQ;AAAA,oBACR,IAAG;AAAA,oBACH,YAAW;AAAA,oBACX,WAAU;AAAA,oBAET,sBAAY,YAAY,CAAC;AAAA;AAAA,gBAC5B;AAAA,iBACF;AAAA,cAEF,oBAAC,eAAY,IAAG,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,cAAc;AAAA,eAClF;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,QAAK,OAAO,EAAE,UAAU,WAAW,GACjC,sBAAY,IAAI,CAAC,YAAY,UAC5B;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC,OAAO;AAChB,kBAAI,CAAC,GAAI;AACT,kBAAI,CAAC,eAAe,SAAS;AAC3B,+BAAe,UAAU;AACzB;AAAA,cACF;AACA,kBAAI,GAAG,cAAc,eAAe,QAAQ,aAAa;AACvD,+BAAe,UAAU;AAAA,cAC3B;AACA,kBAAI,UAAU,YAAY,SAAS,GAAG;AACpC,oCAAoB,SAAS,MAAM,YAAY,aAAa,GAAG,eAAe,SAAS,WAAW,IAAI;AAAA,cACxG;AAAA,YACF;AAAA,YACA,eAAY;AAAA,YAGZ;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,IAAG;AAAA,gBACH,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,YAAW;AAAA,gBACX,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA;AAAA,UAXK;AAAA,QAYP,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
+  "names": ["React"]
 }

package/dist/esm/parts/DSPaginator/config/createPaginatorHeader.js

@@ -1,15 +1,16 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Grid } from "@elliemae/ds-grid";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DSPaginationSeparator } from "../../DSPaginationSeparator/index.js";
+import { StyledHeader } from "../styled.js";
 const createPaginatorHeader = ({
   pageDetailsTitle,
   pageInfoWidth,
-  ownerPropsConfig
+  ownerPropsConfig,
+  checkMarkWidth
 }) => {
   const Comp = () => {
-    if (pageDetailsTitle === "") return /* @__PURE__ */ jsx(Fragment, { children: "Page" });
-    return /* @__PURE__ */ jsxs(Grid, { cols: [`${pageInfoWidth + 50}px`, "8px", "auto"], children: [
+    if (pageDetailsTitle === "") return /* @__PURE__ */ jsx(StyledHeader, { children: "Page" });
+    return /* @__PURE__ */ jsxs(StyledHeader, { cols: [`${pageInfoWidth + checkMarkWidth + 34}px`, "8px", "auto"], children: [
       /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "Page" }),
       /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "100%", ...ownerPropsConfig }),
       /* @__PURE__ */ jsx("span", { children: pageDetailsTitle })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/createPaginatorHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPaginationSeparator } from '../../DSPaginationSeparator/index.js';\n\ninterface PaginatorHeaderOptions {\n  pageDetailsTitle: string;\n  pageInfoWidth: number;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const createPaginatorHeader = ({\n  pageDetailsTitle,\n  pageInfoWidth,\n  ownerPropsConfig,\n}: PaginatorHeaderOptions) => {\n  const Comp = () => {\n    if (pageDetailsTitle === '') return <>Page</>;\n\n    return (\n      <Grid cols={[`${pageInfoWidth + 50}px`, '8px', 'auto']}>\n        <span style={{ marginLeft: '8px' }}>Page</span>\n        <DSPaginationSeparator height=\"100%\" {...ownerPropsConfig} />\n        <span>{pageDetailsTitle}</span>\n      </Grid>\n    );\n  };\n  return Comp;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBiB,wBAGlC,YAHkC;AAfxC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AAQ/B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,OAAO,MAAM;AACjB,QAAI,qBAAqB,GAAI,QAAO,gCAAE,kBAAI;AAE1C,WACE,qBAAC,QAAK,MAAM,CAAC,GAAG,gBAAgB,EAAE,MAAM,OAAO,MAAM,GACnD;AAAA,0BAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,MACxC,oBAAC,yBAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,MAC3D,oBAAC,UAAM,4BAAiB;AAAA,OAC1B;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkBiB,cAGlC,YAHkC;AAjBxC,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAStB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,OAAO,MAAM;AACjB,QAAI,qBAAqB,GAAI,QAAO,oBAAC,gBAAa,kBAAI;AAEtD,WACE,qBAAC,gBAAa,MAAM,CAAC,GAAG,gBAAgB,iBAAiB,EAAE,MAAM,OAAO,MAAM,GAC5E;AAAA,0BAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,MACxC,oBAAC,yBAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,MAC3D,oBAAC,UAAM,4BAAiB;AAAA,OAC1B;AAAA,EAEJ;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/DSPaginator/config/getOptions.js

@@ -4,8 +4,8 @@ import { Grid } from "@elliemae/ds-grid";
 import { Checkmark } from "@elliemae/ds-icons";
 const OptionWithDetails = (props) => {
   const Comp = () => {
-    const { pageInfoWidth, pageIndex, index, pageDetails } = props;
-    return /* @__PURE__ */ jsxs(Grid, { cols: ["16px", `${pageInfoWidth + 16}px`, "auto"], gutter: "xxs", alignItems: "center", children: [
+    const { pageInfoWidth, pageIndex, index, pageDetails, checkMarkWidth } = props;
+    return /* @__PURE__ */ jsxs(Grid, { cols: [`${checkMarkWidth}px`, `${pageInfoWidth + 16}px`, "auto"], gutter: "xxs", alignItems: "center", children: [
       pageIndex - 1 === index ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}),
       /* @__PURE__ */ jsx("span", { children: index + 1 }),
       /* @__PURE__ */ jsx(
@@ -24,7 +24,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 = {
@@ -34,7 +34,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/esm/parts/DSPaginator/config/getOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/getOptions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\ninterface OptionWithDetailsT {\n  pageInfoWidth: number;\n  pageIndex: number;\n  index: number;\n  pageDetails: string[] | readonly string[];\n}\n\nconst OptionWithDetails = (props: OptionWithDetailsT) => {\n  const Comp = () => {\n    const { pageInfoWidth, pageIndex, index, pageDetails } = props;\n    return (\n      <Grid cols={['16px', `${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}): DSDropdownMenuT.ItemSingleOptions[] => {\n  const { pageCount, pageIndex, pageDetails, pageInfoWidth } = 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 });\n    }\n    return option;\n  });\n  return options;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgBjB,SAC6B,KAD7B;AAfN,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,YAAY,IAAI;AACzD,WACE,qBAAC,QAAK,MAAM,CAAC,QAAQ,GAAG,gBAAgB,EAAE,MAAM,MAAM,GAAG,QAAO,OAAM,YAAW,UAC9E;AAAA,kBAAY,MAAM,QAAQ,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI;AAAA,MAC1F,oBAAC,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,SAKgB;AACzC,QAAM,EAAE,WAAW,WAAW,aAAa,cAAc,IAAI;AAE7D,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,YAAY,CAAC;AAAA,IACpF;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBjB,SAC6B,KAD7B;AAhBN,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,aAAa,eAAe,IAAI;AAEzE,WACE,qBAAC,QAAK,MAAM,CAAC,GAAG,cAAc,MAAM,GAAG,gBAAgB,EAAE,MAAM,MAAM,GAAG,QAAO,OAAM,YAAW,UAC7F;AAAA,kBAAY,MAAM,QAAQ,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI;AAAA,MAC1F,oBAAC,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/esm/parts/DSPaginator/config/usePaginator.js

@@ -5,10 +5,10 @@ import {
   useMemoMergePropsWithDefault,
   useOwnerProps
 } from "@elliemae/ds-props-helpers";
-import React2, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React2, { useEffect, useMemo, useRef, useState } from "react";
 import { DSPaginatorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
 import { useValidateProps } from "./useValidateProps.js";
-import { useOnElementResize } from "./useOnElementOnResize.js";
+import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
 import { getOptions } from "./getOptions.js";
 import { usePaginationSearch } from "./usePaginationSearch.js";
 const usePaginator = (propsFromUser) => {
@@ -21,14 +21,18 @@ const usePaginator = (propsFromUser) => {
   const ownerPropsConfig = useOwnerProps(propsWithDefault);
   const { pageIndex, pageCount, pageDetails } = propsWithDefault;
   const [isOpened, setIsOpened] = useState(false);
-  const [detailWidth, setDetailWidth] = useState(0);
-  const [pageInfoWidth, setPageInfoWidth] = useState(0);
   const btnRef = useRef(null);
   const actionRef = useRef({});
+  const widestChildRef = React2.useRef(null);
+  const pageInfoRef = React2.useRef(null);
+  const checkMarkRef = useRef(null);
   const { width: btnWidth } = useOnElementResize(btnRef);
+  const { width: checkMarkWidth } = useOnElementResize(checkMarkRef);
+  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);
+  const { width: detailWidth } = useOnElementResize(widestChildRef);
   const options = useMemo(
-    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),
-    [pageCount, pageIndex, pageDetails, pageInfoWidth]
+    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth }),
+    [pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth]
   );
   const onKeyDown = usePaginationSearch(pageCount, actionRef);
   useEffect(() => {
@@ -37,19 +41,6 @@ const usePaginator = (propsFromUser) => {
       actionRef.current.scrollOptionIntoView(pageIndex.toString());
     }
   }, [isOpened]);
-  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]);
-  useEffect(() => {
-    setPageInfoWidth(() => {
-      if (detailWidth) return btnWidth - detailWidth - 89;
-      return btnWidth - 56;
-    });
-  }, [btnWidth, detailWidth]);
   return React2.useMemo(
     () => ({
       propsWithDefault,
@@ -59,10 +50,14 @@ const usePaginator = (propsFromUser) => {
       btnRef,
       btnWidth,
       pageInfoWidth,
+      pageInfoRef,
       options,
       isOpened,
       detailWidth,
       actionRef,
+      widestChildRef,
+      checkMarkRef,
+      checkMarkWidth,
       setIsOpened,
       onKeyDown
     }),
@@ -78,6 +73,10 @@ const usePaginator = (propsFromUser) => {
       isOpened,
       detailWidth,
       actionRef,
+      widestChildRef,
+      checkMarkRef,
+      checkMarkWidth,
+      pageInfoRef,
       setIsOpened,
       onKeyDown
     ]

package/dist/esm/parts/DSPaginator/config/usePaginator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/usePaginator.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type DSPaginatorT, DSPaginatorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useOnElementResize } from './useOnElementOnResize.js';\nimport { getOptions } from './getOptions.js';\nimport { usePaginationSearch } from './usePaginationSearch.js';\n\nexport const usePaginator = (propsFromUser: DSPaginatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginatorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginatorT.InternalProps, HTMLButtonElement, DSButtonV3T.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { pageIndex, pageCount, pageDetails } = propsWithDefault;\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  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\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 React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      setIsOpened,\n      onKeyDown,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      setIsOpened,\n      onKeyDown,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AAG7E,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAE7B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,mBAAmB,cAAc,gBAAgB;AAKvD,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAErD,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAKA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAC1D,YAAU,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,kBAAgB,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,YAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI,YAAa,QAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type DSPaginatorT, DSPaginatorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\nimport { getOptions } from './getOptions.js';\nimport { usePaginationSearch } from './usePaginationSearch.js';\n\nexport const usePaginator = (propsFromUser: DSPaginatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginatorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginatorT.InternalProps, HTMLButtonElement, DSButtonV3T.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { pageIndex, pageCount, pageDetails } = propsWithDefault;\n\n  const [isOpened, setIsOpened] = useState(false);\n\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const widestChildRef = React.useRef<HTMLDivElement | null>(null);\n  const pageInfoRef = React.useRef<HTMLDivElement | null>(null);\n  const checkMarkRef = useRef<HTMLDivElement>(null);\n\n  // btnWidth is used to calculate dropdown min-width when pageDetails are provided\n  const { width: btnWidth } = useOnElementResize(btnRef);\n\n  // checkMarkWidth is used to calculate dropdown offset so, when opening the dropdown,\n  // selected page is aligned properly with the available options.\n  // It is also used to calculate paginatorHeader and options custom render.\n  const { width: checkMarkWidth } = useOnElementResize(checkMarkRef);\n  // pageInfoWidth is used to calculate dropdown min-width when pageDetails are provided on segmented pagination\n  // pageInfoWidth || detailWidth\n  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);\n  // detailWidth is used to calculate dropdown min-width when pageDetails are provided on segmented pagination\n  // pageInfoWidth || detailWidth\n  const { width: detailWidth } = useOnElementResize(widestChildRef);\n  const options = useMemo(\n    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth }),\n    [pageCount, pageIndex, pageDetails, pageInfoWidth, checkMarkWidth],\n  );\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\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  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      pageInfoRef,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      widestChildRef,\n      checkMarkRef,\n      checkMarkWidth,\n      setIsOpened,\n      onKeyDown,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      widestChildRef,\n      checkMarkRef,\n      checkMarkWidth,\n      pageInfoRef,\n      setIsOpened,\n      onKeyDown,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAG5D,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAE7B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,mBAAmB,cAAc,gBAAgB;AAKvD,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,iBAAiBA,OAAM,OAA8B,IAAI;AAC/D,QAAM,cAAcA,OAAM,OAA8B,IAAI;AAC5D,QAAM,eAAe,OAAuB,IAAI;AAGhD,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAKrD,QAAM,EAAE,OAAO,eAAe,IAAI,mBAAmB,YAAY;AAGjE,QAAM,EAAE,OAAO,cAAc,IAAI,mBAAmB,WAAW;AAG/D,QAAM,EAAE,OAAO,YAAY,IAAI,mBAAmB,cAAc;AAChE,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,eAAe,eAAe,CAAC;AAAA,IACrF,CAAC,WAAW,WAAW,aAAa,eAAe,cAAc;AAAA,EACnE;AAKA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,YAAU,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,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSPaginator/styled.js

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
+import Grid from "@elliemae/ds-grid";
 import { css, styled } from "@elliemae/ds-system";
 import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
+const fontSize13Base13 = 13 / 13;
+const fontSize13Base16 = 13 / 16;
+const fontSize18Base13 = 18 / 13;
+const fontSize18Base16 = 18 / 16;
+const fontSize12Base13 = 12 / 13;
+const fontSize12Base16 = 12 / 16;
 const styledFocusCss = css`
   &:after {
     display: block;
@@ -24,7 +32,7 @@ const InvisibleDiv = styled.div`
   position: absolute;
 `;
 const paginationDropdownButtonCommonStyles = css`
-  height: 42px;
+  min-height: 42px;
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
@@ -53,8 +61,40 @@ const PaginationDropdownButtonPaginator = styled(DSButtonV3, {
 })`
   ${paginationDropdownButtonCommonStyles}
 `;
+const StyledDropdown = styled(DSDropdownMenuV2)`
+  /**
+ * Pagination uses DSTypography internally, but each typography variant defines
+ * its own font-size. When these components are placed inside a styled() wrapper,
+ * trying to style them via styled(DSTypography) triggers TypeScript errors
+ * because DSTypography exposes  "as"  props and variant-specific overrides.
+ *
+ * Instead of wrapping DSTypography directly in styled(), we target the
+ * underlying rendered elements via className/id. This avoids the TS conflicts
+ * while still allowing us to override their font-size reliably.
+ */
+  #typography-page-index {
+    font-size: ${fontSize18Base16}rem;
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${fontSize18Base13}rem;
+    }
+  }
+  .typography-page-info-and-detail {
+    font-size: ${fontSize13Base16}rem;
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${fontSize13Base13}rem;
+    }
+  }
+`;
+const StyledHeader = styled(Grid)`
+  font-size: ${fontSize12Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize12Base13}rem;
+  }
+`;
 export {
   InvisibleDiv,
-  PaginationDropdownButtonPaginator
+  PaginationDropdownButtonPaginator,
+  StyledDropdown,
+  StyledHeader
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/parts/DSPaginator/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPaginator = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.PAGINATOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,uBAAuB;AAElD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,oCAAoC,OAAO,YAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport Grid from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\nconst fontSize18Base13 = 18 / 13;\nconst fontSize18Base16 = 18 / 16;\nconst fontSize12Base13 = 12 / 13;\nconst fontSize12Base16 = 12 / 16;\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\n  min-height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPaginator = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.PAGINATOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n`;\n\nexport const StyledDropdown = styled(DSDropdownMenuV2)`\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  #typography-page-index {\n    font-size: ${fontSize18Base16}rem;\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${fontSize18Base13}rem;\n    }\n  }\n  .typography-page-info-and-detail {\n    font-size: ${fontSize13Base16}rem;\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${fontSize13Base13}rem;\n    }\n  }\n`;\nexport const StyledHeader = styled(Grid)`\n  font-size: ${fontSize12Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,uBAAuB;AAElD,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,oCAAoC,OAAO,YAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAGjC,MAAM,iBAAiB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYpC,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAAA,iBAIlB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAI5B,MAAM,eAAe,OAAO,IAAI;AAAA,eACxB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/DSPerPageSelector/DSPerPageSelector.js

@@ -1,14 +1,15 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
 import { ChevronDown } from "@elliemae/ds-icons";
 import { describe } from "@elliemae/ds-props-helpers";
+import { DSTypography } from "@elliemae/ds-typography";
+import { useMemo } from "react";
 import { usePerPageSelector } from "./config/usePerPageSelector.js";
 import { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from "./constants/index.js";
 import { DSPerPageSelectorPropTypesSchema } from "./react-desc-prop-types.js";
-import { PaginationDropdownButtonPerPageSelector } from "./styled.js";
-const Header = () => /* @__PURE__ */ jsx(Fragment, { children: "Per Page" });
+import { PaginationDropdownButtonPerPageSelector, StyledHeader } from "./styled.js";
+const Header = () => /* @__PURE__ */ jsx(StyledHeader, { children: "Per Page" });
 const DSPerPageSelector = (props) => {
   const {
     propsWithDefault: { pageSize, onPageSizeChange },
@@ -17,7 +18,8 @@ const DSPerPageSelector = (props) => {
     ownerPropsConfig,
     actionRef,
     btnRef,
-    width,
+    chevronRef,
+    chevronWidth,
     isOpened,
     options,
     setIsOpened
@@ -26,6 +28,10 @@ const DSPerPageSelector = (props) => {
     if (globalAttributes.onClick) return globalAttributes.onClick;
     return () => setIsOpened((prev) => !prev);
   }, [globalAttributes.onClick, setIsOpened]);
+  const maxOptionsLength = useMemo(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength;
+  }, [options]);
   return /* @__PURE__ */ jsx(
     DSDropdownMenuV2,
     {
@@ -41,10 +47,10 @@ const DSPerPageSelector = (props) => {
         setIsOpened(false);
         btnRef.current?.focus();
       },
-      customOffset: [-23, 2],
+      customOffset: [-(chevronWidth + 7), 2],
       startPlacementPreference: "top-start",
       actionRef,
-      minWidth: width,
+      minWidth: `calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`,
       maxHeight: 300,
       HeaderComp: Header,
       children: /* @__PURE__ */ jsxs(
@@ -60,9 +66,19 @@ const DSPerPageSelector = (props) => {
           ...ownerPropsConfig,
           onClick: buttonOnClick,
           children: [
-            pageSize,
-            " / page",
-            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
+            /* @__PURE__ */ jsxs(
+              DSTypography,
+              {
+                variant: "b1",
+                as: "span",
+                className: "typography-per-page-selector",
+                children: [
+                  pageSize,
+                  " / page"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
           ]
         }
       )

package/dist/esm/parts/DSPerPageSelector/DSPerPageSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { usePerPageSelector } from './config/usePerPageSelector.js';\nimport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from './constants/index.js';\nimport { DSPerPageSelectorPropTypesSchema, type DSPerPageSelectorT } from './react-desc-prop-types.js';\nimport { PaginationDropdownButtonPerPageSelector } from './styled.js';\n\nconst Header = () => <>Per Page</>;\n\nconst DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageSize, onPageSizeChange },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    actionRef,\n    btnRef,\n    width,\n    isOpened,\n    options,\n    setIsOpened,\n  } = usePerPageSelector(props);\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  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      <PaginationDropdownButtonPerPageSelector\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={PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={buttonOnClick}\n      >\n        {pageSize} / page\n        <ChevronDown color={['brand-primary', '700']} />\n      </PaginationDropdownButtonPerPageSelector>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.displayName = DSPerPageSelectorName;\nconst DSPerPageSelectorWithSchema = describe(DSPerPageSelector);\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACUF,wBAwCf,YAxCe;AAVrB,SAAgB,eAAe;AAE/B,SAAS,wBAA8C;AACvD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,qCAAqC;AACrE,SAAS,wCAAiE;AAC1E,SAAS,+CAA+C;AAExD,MAAM,SAAS,MAAM,gCAAE,sBAAQ;AAE/B,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,iBAAiB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAC5B,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAC1C,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,QAAQ;AAAA,UACvB,eAAa,8BAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useMemo } from 'react';\nimport { usePerPageSelector } from './config/usePerPageSelector.js';\nimport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from './constants/index.js';\nimport { DSPerPageSelectorPropTypesSchema, type DSPerPageSelectorT } from './react-desc-prop-types.js';\nimport { PaginationDropdownButtonPerPageSelector, StyledHeader } from './styled.js';\n\nconst Header = () => <StyledHeader>Per Page</StyledHeader>;\n\nconst DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageSize, onPageSizeChange },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    actionRef,\n    btnRef,\n    chevronRef,\n    chevronWidth,\n    isOpened,\n    options,\n    setIsOpened,\n  } = usePerPageSelector(props);\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  const maxOptionsLength = useMemo(() => {\n    const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n    return maxLength;\n  }, [options]);\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={[-(chevronWidth + 7), 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      /**\n       * Calculate the dynamic minWidth for the Dropdown:\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       *   + maxOptionsLength ch (longest option label measured in characters)\n       *   + 16px (right padding)\n       *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)\n       *\n       * Why `calc()`?\n       * - When using pure px values, the initial render works correctly.\n       * - But when switching between different stories in Storybook \u2014 especially those\n       *   that modify font-size or typography scale \u2014 the measured width from the ref\n       *   becomes outdated and ends up returning a smaller value than it should.\n       * - That incorrect (underestimated) width causes the longest option label to wrap,\n       *   even though there is actually enough space.\n       *\n       * By using `calc()` + `ch` units, the component stays responsive to font-size changes\n       * without requiring an extra ref to measure the page size text width.\n       */\n      minWidth={`calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButtonPerPageSelector\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={PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={buttonOnClick}\n      >\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           */\n          className=\"typography-per-page-selector\"\n        >\n          {pageSize} / page\n        </DSTypography>\n\n        <ChevronDown color={['brand-primary', '700']} innerRef={chevronRef} />\n      </PaginationDropdownButtonPerPageSelector>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.displayName = DSPerPageSelectorName;\nconst DSPerPageSelectorWithSchema = describe(DSPerPageSelector);\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWF,cAgFb,YAhFa;AAVrB,SAAS,wBAA8C;AACvD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAgB,eAAe;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,qCAAqC;AACrE,SAAS,wCAAiE;AAC1E,SAAS,yCAAyC,oBAAoB;AAEtE,MAAM,SAAS,MAAM,oBAAC,gBAAa,sBAAQ;AAE3C,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,iBAAiB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAC5B,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,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,EAAE,eAAe,IAAI,CAAC;AAAA,MACrC,0BAAyB;AAAA,MACzB;AAAA,MAuBA,UAAU,QAAQ,eAAe,EAAE,QAAQ,gBAAgB;AAAA,MAC3D,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG,QAAQ;AAAA,UACvB,eAAa,8BAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAET;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,IAAG;AAAA,gBAWH,WAAU;AAAA,gBAET;AAAA;AAAA,kBAAS;AAAA;AAAA;AAAA,YACZ;AAAA,YAEA,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,MACtE;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js

@@ -9,6 +9,7 @@ import React2, { useEffect, useMemo, useRef, useState } from "react";
 import { DSPerPageSelectorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
 import { useValidateProps } from "./useValidateProps.js";
 import { generateOption, getOptions } from "./getOptions.js";
+import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
 const usePerPageSelector = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
   useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);
@@ -23,10 +24,8 @@ const usePerPageSelector = (propsFromUser) => {
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
   const actionRef = useRef({});
   const btnRef = useRef(null);
-  const width = useMemo(() => {
-    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
-    return maxLength * 6 + 90;
-  }, [options]);
+  const chevronRef = useRef(null);
+  const { width: chevronWidth } = useOnElementResize(chevronRef);
   useEffect(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant(pageSize.toString());
@@ -41,12 +40,13 @@ const usePerPageSelector = (propsFromUser) => {
       ownerPropsConfig,
       actionRef,
       btnRef,
-      width,
+      chevronRef,
+      chevronWidth,
       isOpened,
       options,
       setIsOpened
     }),
-    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, width, isOpened, options]
+    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth]
   );
 };
 export {

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { generateOption, getOptions } from './getOptions.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<\n    DSPerPageSelectorT.InternalProps,\n    HTMLButtonElement,\n    DSButtonV3T.Props\n  >(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  // const instanceUid = React.useMemo(() => `ds-per-page-selector-${uid(5)}`, []);\n\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;\n  const [isOpened, setIsOpened] = useState(false);\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  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  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  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      actionRef,\n      btnRef,\n      width,\n      isOpened,\n      options,\n      setIsOpened,\n    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, width, isOpened, options],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAE5D,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,kBAAkB;AAEpC,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,QAAQ,QAAQ,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,YAAU,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;AAOb,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,OAAO,UAAU,OAAO;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { generateOption, getOptions } from './getOptions.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<\n    DSPerPageSelectorT.InternalProps,\n    HTMLButtonElement,\n    DSButtonV3T.Props\n  >(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  // const instanceUid = React.useMemo(() => `ds-per-page-selector-${uid(5)}`, []);\n\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;\n  const [isOpened, setIsOpened] = useState(false);\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  const chevronRef = useRef<HTMLElement>(null);\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\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  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      actionRef,\n      btnRef,\n      chevronRef,\n      chevronWidth,\n      isOpened,\n      options,\n      setIsOpened,\n    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAE5D,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,kBAAkB;AAC3C,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,QAAM,aAAa,OAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,UAAU;AAE7D,YAAU,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;AAOb,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,UAAU,SAAS,YAAY,YAAY;AAAA,EAClH;AACF;",
   "names": ["React"]
 }

package/dist/esm/parts/DSPerPageSelector/styled.js

@@ -2,6 +2,10 @@ import * as React from "react";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { css, styled } from "@elliemae/ds-system";
 import { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from "./constants/index.js";
+const fontSize13Base13 = 13 / 13;
+const fontSize13Base16 = 13 / 16;
+const fontSize12Base13 = 12 / 13;
+const fontSize12Base16 = 12 / 16;
 const styledFocusCss = css`
   &:after {
     display: block;
@@ -24,7 +28,7 @@ const InvisibleDiv = styled.div`
   position: absolute;
 `;
 const paginationDropdownButtonCommonStyles = css`
-  height: 42px;
+  min-height: 42px;
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
@@ -52,9 +56,32 @@ const PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {
   preserveLegacyDataTestId: true
 })`
   ${paginationDropdownButtonCommonStyles}
+  /**
+ * Pagination uses DSTypography internally, but each typography variant defines
+ * its own font-size. When these components are placed inside a styled() wrapper,
+ * trying to style them via styled(DSTypography) triggers TypeScript errors
+ * because DSTypography exposes  "as"  props and variant-specific overrides.
+ *
+ * Instead of wrapping DSTypography directly in styled(), we target the
+ * underlying rendered elements via className/id. This avoids the TS conflicts
+ * while still allowing us to override their font-size reliably.
+ */
+  .typography-per-page-selector {
+    font-size: ${fontSize13Base16}rem;
+    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+      font-size: ${fontSize13Base13}rem;
+    }
+  }
+`;
+const StyledHeader = styled.div`
+  font-size: ${fontSize12Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize12Base13}rem;
+  }
 `;
 export {
   InvisibleDiv,
-  PaginationDropdownButtonPerPageSelector
+  PaginationDropdownButtonPerPageSelector,
+  StyledHeader
 };
 //# sourceMappingURL=styled.js.map