npm - @elliemae/ds-pagination - Versions diffs - 3.57.0-next.40 → 3.57.0-next.42 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/cjs/parts/DSPaginator/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPaginator/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAE3B,uBAA4B;AAE5B,uBAAkD;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,wBAAO;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,wCAAoC,yBAAO,gCAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,iCAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;",
-  "names": []
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAE3B,gCAAiC;AACjC,qBAAiB;AACjB,uBAA4B;AAE5B,uBAAkD;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,wBAAO;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,wCAAoC,yBAAO,gCAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,iCAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAGjC,MAAM,qBAAiB,yBAAO,0CAAgB;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,mBAAe,yBAAO,eAAAA,OAAI;AAAA,eACxB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;",
+  "names": ["Grid"]
 }

package/dist/cjs/parts/DSPerPageSelector/DSPerPageSelector.js CHANGED Viewed

@@ -34,15 +34,16 @@ __export(DSPerPageSelector_exports, {
 module.exports = __toCommonJS(DSPerPageSelector_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
 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_react = require("react");
 var import_usePerPageSelector = require("./config/usePerPageSelector.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 Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Per Page" });
+const Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeader, { children: "Per Page" });
 const DSPerPageSelector = (props) => {
   const {
     propsWithDefault: { pageSize, onPageSizeChange },
@@ -51,7 +52,8 @@ const DSPerPageSelector = (props) => {
     ownerPropsConfig,
     actionRef,
     btnRef,
-    width,
+    chevronRef,
+    chevronWidth,
     isOpened,
     options,
     setIsOpened
@@ -60,6 +62,10 @@ const DSPerPageSelector = (props) => {
     if (globalAttributes.onClick) return globalAttributes.onClick;
     return () => setIsOpened((prev) => !prev);
   }, [globalAttributes.onClick, setIsOpened]);
+  const maxOptionsLength = (0, import_react.useMemo)(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength;
+  }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ds_dropdownmenu_v2.DSDropdownMenuV2,
     {
@@ -75,10 +81,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__ */ (0, import_jsx_runtime.jsxs)(
@@ -94,9 +100,19 @@ const DSPerPageSelector = (props) => {
           ...ownerPropsConfig,
           onClick: buttonOnClick,
           children: [
-            pageSize,
-            " / page",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"] })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ds_typography.DSTypography,
+              {
+                variant: "b1",
+                as: "span",
+                className: "typography-per-page-selector",
+                children: [
+                  pageSize,
+                  " / page"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
           ]
         }
       )

package/dist/cjs/parts/DSPerPageSelector/DSPerPageSelector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUF;AAVrB,mBAA+B;AAE/B,gCAAuD;AACvD,sBAA4B;AAC5B,8BAAyB;AACzB,gCAAmC;AACnC,uBAAqE;AACrE,mCAA0E;AAC1E,oBAAwD;AAExD,MAAM,SAAS,MAAM,2EAAE,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,QAAI,8CAAmB,KAAK;AAC5B,QAAM,oBAA4C,sBAAQ,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,+CAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWF;AAVrB,gCAAuD;AACvD,sBAA4B;AAC5B,8BAAyB;AACzB,2BAA6B;AAC7B,mBAA+B;AAC/B,gCAAmC;AACnC,uBAAqE;AACrE,mCAA0E;AAC1E,oBAAsE;AAEtE,MAAM,SAAS,MAAM,4CAAC,8BAAa,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,QAAI,8CAAmB,KAAK;AAC5B,QAAM,oBAA4C,sBAAQ,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,uBAAmB,sBAAQ,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,+CAA8B;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,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,MACtE;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
   "names": []
 }

package/dist/cjs/parts/DSPerPageSelector/config/usePerPageSelector.js CHANGED Viewed

@@ -37,6 +37,7 @@ 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_getOptions = require("./getOptions.js");
+var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
 const usePerPageSelector = (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.DSPerPageSelectorPropTypesSchema);
@@ -51,10 +52,8 @@ const usePerPageSelector = (propsFromUser) => {
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
   const actionRef = (0, import_react.useRef)({});
   const btnRef = (0, import_react.useRef)(null);
-  const width = (0, import_react.useMemo)(() => {
-    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
-    return maxLength * 6 + 90;
-  }, [options]);
+  const chevronRef = (0, import_react.useRef)(null);
+  const { width: chevronWidth } = (0, import_useOnElementOnResize.useOnElementResize)(chevronRef);
   (0, import_react.useEffect)(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant(pageSize.toString());
@@ -69,12 +68,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]
   );
 };
 //# sourceMappingURL=usePerPageSelector.js.map

package/dist/cjs/parts/DSPerPageSelector/config/usePerPageSelector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AACP,mBAA4D;AAE5D,mCAAwF;AACxF,8BAAiC;AACjC,wBAA2C;AAEpC,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,uBAAmB,sDAA+D,eAAe,yCAAY;AACnH,gDAAiB,kBAAkB,6DAAgC;AAInE,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB,gDAIvB,gBAAgB;AAIlB,QAAM,uBAAmB,uCAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,IAAI;AAC7C,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAOb,SAAO,aAAAA,QAAM;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AACP,mBAA4D;AAE5D,mCAAwF;AACxF,8BAAiC;AACjC,wBAA2C;AAC3C,kCAAmC;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,uBAAmB,sDAA+D,eAAe,yCAAY;AACnH,gDAAiB,kBAAkB,6DAAgC;AAInE,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB,gDAIvB,gBAAgB;AAIlB,QAAM,uBAAmB,uCAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,IAAI;AAE7C,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,QAAI,gDAAmB,UAAU;AAE7D,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAOb,SAAO,aAAAA,QAAM;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/cjs/parts/DSPerPageSelector/styled.js CHANGED Viewed

@@ -29,13 +29,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var styled_exports = {};
 __export(styled_exports, {
   InvisibleDiv: () => InvisibleDiv,
-  PaginationDropdownButtonPerPageSelector: () => PaginationDropdownButtonPerPageSelector
+  PaginationDropdownButtonPerPageSelector: () => PaginationDropdownButtonPerPageSelector,
+  StyledHeader: () => StyledHeader
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("./constants/index.js");
+const fontSize13Base13 = 13 / 13;
+const fontSize13Base16 = 13 / 16;
+const fontSize12Base13 = 12 / 13;
+const fontSize12Base16 = 12 / 16;
 const styledFocusCss = import_ds_system.css`
   &:after {
     display: block;
@@ -58,7 +63,7 @@ const InvisibleDiv = import_ds_system.styled.div`
   position: absolute;
 `;
 const paginationDropdownButtonCommonStyles = import_ds_system.css`
-  height: 42px;
+  min-height: 42px;
   display: grid;
   grid-auto-flow: column;
   justify-content: center;
@@ -86,5 +91,27 @@ const PaginationDropdownButtonPerPageSelector = (0, import_ds_system.styled)(imp
   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 = import_ds_system.styled.div`
+  font-size: ${fontSize12Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize12Base13}rem;
+  }
 `;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/parts/DSPerPageSelector/styled.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPerPageSelector/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PER_PAGE_SELECTOR_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 PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAE3B,uBAA4B;AAE5B,uBAA0D;AAE1D,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,wBAAO;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,8CAA0C,yBAAO,gCAAY;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,yCAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\n\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 PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\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-per-page-selector {\n    font-size: ${fontSize13Base16}rem;\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${fontSize13Base13}rem;\n    }\n  }\n`;\n\nexport const StyledHeader = styled.div`\n  font-size: ${fontSize12Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAE3B,uBAA4B;AAE5B,uBAA0D;AAC1D,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,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,wBAAO;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,8CAA0C,yBAAO,gCAAY;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,yCAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYvB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAK5B,MAAM,eAAe,wBAAO;AAAA,eACpB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/{DSPaginator/config → shared}/useOnElementOnResize.js.map RENAMED Viewed

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../src/parts/DSPaginator/config/useOnElementOnResize.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../src/parts/shared/useOnElementOnResize.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqD;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,eAAW,qBAAuB;AAExC,8BAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
   "names": []

package/dist/esm/parts/DSPageNextButton/DSPageNextButton.js CHANGED Viewed

@@ -17,7 +17,7 @@ const NextPageButton = styled(DSButtonV3, {
   slot: PAGE_NEXT_BUTTON_SLOTS.PAGE_NEXT_BUTTON,
   preserveLegacyDataTestId: true
 })`
-  height: 42px;
+  min-height: 42px;
   display: grid;
   place-items: center;
   position: relative;

package/dist/esm/parts/DSPageNextButton/DSPageNextButton.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPageNextButton/DSPageNextButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\n\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { usePageNextButton } from './config/usePageNextButton.js';\nimport {\n  DSPageNextButtonName,\n  DSPaginationName,\n  PAGE_NEXT_BUTTON_DATA_TESTID,\n  PAGE_NEXT_BUTTON_SLOTS,\n} from './constants/index.js';\nimport { type DSPageNextButtonT, DSPageNextButtonPropTypesSchema } from './react-desc-prop-types.js';\n\nconst NextPageButton = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGE_NEXT_BUTTON_SLOTS.PAGE_NEXT_BUTTON,\n  preserveLegacyDataTestId: true,\n})`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  :focus {\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  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst DSPageNextButton: React.ComponentType<DSPageNextButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { canNextPage, onNextPage },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n  } = usePageNextButton(props);\n\n  return (\n    <NextPageButton\n      disabled={!canNextPage}\n      buttonType=\"raw\"\n      data-testid={PAGE_NEXT_BUTTON_DATA_TESTID.PAGE_NEXT_BUTTON}\n      aria-label=\"Go to next page\"\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      onClick={() => {\n        if (canNextPage) onNextPage();\n      }}\n    >\n      <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </NextPageButton>\n  );\n};\n\nDSPageNextButton.displayName = DSPageNextButtonName;\nconst DSPageNextButtonWithSchema = describe(DSPageNextButton);\nDSPageNextButtonWithSchema.propTypes = DSPageNextButtonPropTypesSchema;\n\nexport { DSPageNextButton, DSPageNextButtonWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\n\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { usePageNextButton } from './config/usePageNextButton.js';\nimport {\n  DSPageNextButtonName,\n  DSPaginationName,\n  PAGE_NEXT_BUTTON_DATA_TESTID,\n  PAGE_NEXT_BUTTON_SLOTS,\n} from './constants/index.js';\nimport { type DSPageNextButtonT, DSPageNextButtonPropTypesSchema } from './react-desc-prop-types.js';\n\nconst NextPageButton = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGE_NEXT_BUTTON_SLOTS.PAGE_NEXT_BUTTON,\n  preserveLegacyDataTestId: true,\n})`\n  min-height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  :focus {\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  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst DSPageNextButton: React.ComponentType<DSPageNextButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { canNextPage, onNextPage },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n  } = usePageNextButton(props);\n\n  return (\n    <NextPageButton\n      disabled={!canNextPage}\n      buttonType=\"raw\"\n      data-testid={PAGE_NEXT_BUTTON_DATA_TESTID.PAGE_NEXT_BUTTON}\n      aria-label=\"Go to next page\"\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      onClick={() => {\n        if (canNextPage) onNextPage();\n      }}\n    >\n      <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </NextPageButton>\n  );\n};\n\nDSPageNextButton.displayName = DSPageNextButtonName;\nconst DSPageNextButtonWithSchema = describe(DSPageNextButton);\nDSPageNextButtonWithSchema.propTypes = DSPageNextButtonPropTypesSchema;\n\nexport { DSPageNextButton, DSPageNextButtonWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiEjB;AAjEN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAGvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAiC,uCAAuC;AAExE,MAAM,iBAAiB,OAAO,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAAA,EAC7B,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAiByB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKpD,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAGnE,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM;AAAA,IACJ,kBAAkB,EAAE,aAAa,WAAW;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,KAAK;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC;AAAA,MACX,YAAW;AAAA,MACX,eAAa,6BAA6B;AAAA,MAC1C,cAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,SAAS,MAAM;AACb,YAAI,YAAa,YAAW;AAAA,MAC9B;AAAA,MAEA,8BAAC,gBAAa,OAAO,cAAc,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,EACpF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSPagePrevButton/DSPagePrevButton.js CHANGED Viewed

@@ -17,7 +17,7 @@ const PreviousPageButton = styled(DSButtonV3, {
   slot: PAGE_PREV_BUTTON_SLOTS.PREVIOUS_BUTTON,
   preserveLegacyDataTestId: true
 })`
-  height: 42px;
+  min-height: 42px;
   display: grid;
   place-items: center;
   position: relative;

package/dist/esm/parts/DSPagePrevButton/DSPagePrevButton.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPagePrevButton/DSPagePrevButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\n\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { usePagePrevButton } from './config/usePagePrevButton.js';\nimport {\n  DSPagePrevButtonName,\n  DSPaginationName,\n  PAGE_PREV_BUTTON_DATA_TESTID,\n  PAGE_PREV_BUTTON_SLOTS,\n} from './constants/index.js';\nimport { type DSPagePrevButtonT, DSPagePrevButtonPropTypesSchema } from './react-desc-prop-types.js';\n\nconst PreviousPageButton = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGE_PREV_BUTTON_SLOTS.PREVIOUS_BUTTON,\n  preserveLegacyDataTestId: true,\n})`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  :focus {\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  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst DSPagePrevButton: React.ComponentType<DSPagePrevButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { canPreviousPage, onPreviousPage },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n  } = usePagePrevButton(props);\n\n  return (\n    <PreviousPageButton\n      disabled={!canPreviousPage}\n      buttonType=\"raw\"\n      data-testid={PAGE_PREV_BUTTON_DATA_TESTID.PREVIOUS_BUTTON}\n      aria-label=\"Go to previous page\"\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      onClick={() => {\n        if (canPreviousPage) onPreviousPage();\n      }}\n    >\n      <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </PreviousPageButton>\n  );\n};\n\nDSPagePrevButton.displayName = DSPagePrevButtonName;\nconst DSPagePrevButtonWithSchema = describe(DSPagePrevButton);\nDSPagePrevButtonWithSchema.propTypes = DSPagePrevButtonPropTypesSchema;\n\nexport { DSPagePrevButton, DSPagePrevButtonWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\n\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { usePagePrevButton } from './config/usePagePrevButton.js';\nimport {\n  DSPagePrevButtonName,\n  DSPaginationName,\n  PAGE_PREV_BUTTON_DATA_TESTID,\n  PAGE_PREV_BUTTON_SLOTS,\n} from './constants/index.js';\nimport { type DSPagePrevButtonT, DSPagePrevButtonPropTypesSchema } from './react-desc-prop-types.js';\n\nconst PreviousPageButton = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGE_PREV_BUTTON_SLOTS.PREVIOUS_BUTTON,\n  preserveLegacyDataTestId: true,\n})`\n  min-height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  :focus {\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  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n`;\n\nconst DSPagePrevButton: React.ComponentType<DSPagePrevButtonT.Props> = (props) => {\n  const {\n    propsWithDefault: { canPreviousPage, onPreviousPage },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n  } = usePagePrevButton(props);\n\n  return (\n    <PreviousPageButton\n      disabled={!canPreviousPage}\n      buttonType=\"raw\"\n      data-testid={PAGE_PREV_BUTTON_DATA_TESTID.PREVIOUS_BUTTON}\n      aria-label=\"Go to previous page\"\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      onClick={() => {\n        if (canPreviousPage) onPreviousPage();\n      }}\n    >\n      <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </PreviousPageButton>\n  );\n};\n\nDSPagePrevButton.displayName = DSPagePrevButtonName;\nconst DSPagePrevButtonWithSchema = describe(DSPagePrevButton);\nDSPagePrevButtonWithSchema.propTypes = DSPagePrevButtonPropTypesSchema;\n\nexport { DSPagePrevButton, DSPagePrevButtonWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACiEjB;AAjEN,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAGvB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAiC,uCAAuC;AAExE,MAAM,qBAAqB,OAAO,YAAY;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,uBAAuB;AAAA,EAC7B,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAiByB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKpD,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAGnE,MAAM,mBAAiE,CAAC,UAAU;AAChF,QAAM;AAAA,IACJ,kBAAkB,EAAE,iBAAiB,eAAe;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,KAAK;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC;AAAA,MACX,YAAW;AAAA,MACX,eAAa,6BAA6B;AAAA,MAC1C,cAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,SAAS,MAAM;AACb,YAAI,gBAAiB,gBAAe;AAAA,MACtC;AAAA,MAEA,8BAAC,eAAY,OAAO,kBAAkB,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,EACvF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSPaginationContainer/DSPaginationContainer.js CHANGED Viewed

@@ -12,7 +12,7 @@ import {
   PAGINATION_CONTAINER_SLOTS
 } from "./constants/index.js";
 const StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PAGINATION_CONTAINER_SLOTS.ROOT })`
-  height: 42px;
+  min-height: 42px;
   max-width: 100%;
   align-items: center;
   justify-content: center;

package/dist/esm/parts/DSPaginationContainer/DSPaginationContainer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginationContainer/DSPaginationContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, type XstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSPaginationContainerT, DSPaginationContainerPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePaginationContainer } from './config/usePaginationContainer.js';\nimport {\n  DSPaginationContainerName,\n  DSPaginationName,\n  PAGINATION_CONTAINER_DATA_TESTID,\n  PAGINATION_CONTAINER_SLOTS,\n} from './constants/index.js';\n\nconst StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PAGINATION_CONTAINER_SLOTS.ROOT })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nconst StyledPaginationWrapper = styled('div', { name: DSPaginationName, slot: PAGINATION_CONTAINER_SLOTS.WRAPPER })`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst DSPaginationContainer: React.ComponentType<DSPaginationContainerT.Props> = (props) => {\n  const { xstyledProps, globalAttributes, ownerPropsConfig } = usePaginationContainer(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_CONTAINER_DATA_TESTID.ROOT}\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper {...ownerPropsConfig}>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = DSPaginationContainerName;\nconst DSPaginationContainerWithSchema = describe(DSPaginationContainer);\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n\nexport { DSPaginationContainer, DSPaginationContainerWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, type XstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSPaginationContainerT, DSPaginationContainerPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePaginationContainer } from './config/usePaginationContainer.js';\nimport {\n  DSPaginationContainerName,\n  DSPaginationName,\n  PAGINATION_CONTAINER_DATA_TESTID,\n  PAGINATION_CONTAINER_SLOTS,\n} from './constants/index.js';\n\nconst StyledPaginationContainer = styled(Grid, { name: DSPaginationName, slot: PAGINATION_CONTAINER_SLOTS.ROOT })<\n  React.ComponentProps<typeof Grid> & XstyledProps\n>`\n  min-height: 42px;\n  max-width: 100%;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n  position: relative;\n  ${xStyledCommonProps}\n`;\n\nconst StyledPaginationWrapper = styled('div', { name: DSPaginationName, slot: PAGINATION_CONTAINER_SLOTS.WRAPPER })`\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst DSPaginationContainer: React.ComponentType<DSPaginationContainerT.Props> = (props) => {\n  const { xstyledProps, globalAttributes, ownerPropsConfig } = usePaginationContainer(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_CONTAINER_DATA_TESTID.ROOT}\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper {...ownerPropsConfig}>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.displayName = DSPaginationContainerName;\nconst DSPaginationContainerWithSchema = describe(DSPaginationContainer);\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n\nexport { DSPaginationContainer, DSPaginationContainerWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;AC2CjB;AA1CN,SAAS,gBAAmC;AAC5C,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAsC,4CAA4C;AAClF,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,4BAA4B,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,2BAA2B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAS5G,kBAAkB;AAAA;AAGtB,MAAM,0BAA0B,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,2BAA2B,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlH,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM,EAAE,cAAc,kBAAkB,iBAAiB,IAAI,uBAAuB,KAAK;AAEzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iCAAiC;AAAA,MAC7C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,8BAAC,2BAAyB,GAAG,kBAAmB,gBAAM,UAAS;AAAA;AAAA,EACjE;AAEJ;AAEA,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
   "names": []
 }

package/dist/esm/parts/DSPaginator/DSPaginator.js CHANGED Viewed

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React2, { useMemo } from "react";
 import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
 import { Grid } from "@elliemae/ds-grid";
 import { ChevronDown } from "@elliemae/ds-icons";
 import { describe } from "@elliemae/ds-props-helpers";
@@ -12,7 +11,7 @@ import { createPaginatorHeader } from "./config/createPaginatorHeader.js";
 import { usePaginator } from "./config/usePaginator.js";
 import { DSPaginatorName, PAGINATOR_DATA_TESTID } from "./constants/index.js";
 import { DSPaginatorPropTypesSchema } from "./react-desc-prop-types.js";
-import { PaginationDropdownButtonPaginator, InvisibleDiv } from "./styled.js";
+import { InvisibleDiv, PaginationDropdownButtonPaginator, StyledDropdown } from "./styled.js";
 const DSPaginator = (props) => {
   const {
     propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },
@@ -24,21 +23,25 @@ const DSPaginator = (props) => {
     pageInfoWidth,
     options,
     isOpened,
-    setIsOpened,
-    detailWidth,
     actionRef,
-    onKeyDown
+    widestChildRef,
+    pageInfoRef,
+    checkMarkRef,
+    checkMarkWidth,
+    onKeyDown,
+    setIsOpened
   } = usePaginator(props);
+  const widestTypographyRef = React2.useRef(null);
   const Header = useMemo(
-    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig }),
-    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig]
+    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth }),
+    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth]
   );
   const buttonOnClick = useMemo(() => {
     if (globalAttributes.onClick) return globalAttributes.onClick;
     return () => setIsOpened((prev) => !prev);
   }, [globalAttributes.onClick, setIsOpened]);
   return /* @__PURE__ */ jsxs(
-    DSDropdownMenuV2,
+    StyledDropdown,
     {
       isOpened,
       options,
@@ -52,11 +55,24 @@ const DSPaginator = (props) => {
         setIsOpened(false);
         btnRef.current?.focus();
       },
-      customOffset: [-23, 2],
+      customOffset: [-(checkMarkWidth + 7), 2],
       startPlacementPreference: "top-start",
       actionRef,
       onKeyDown,
-      minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
+      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: [
@@ -74,17 +90,39 @@ const DSPaginator = (props) => {
             ...ownerPropsConfig,
             onClick: buttonOnClick,
             children: /* @__PURE__ */ jsxs(Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
-              /* @__PURE__ */ jsx(DSTypography, { fontSize: "18px", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageIndex }),
-              "/ ",
-              pageCount,
+              /* @__PURE__ */ jsxs("div", { ref: pageInfoRef, children: [
+                /* @__PURE__ */ jsx(
+                  DSTypography,
+                  {
+                    id: "typography-page-index",
+                    variant: "b1",
+                    as: "span",
+                    fontWeight: "semibold",
+                    textAlign: "start",
+                    children: pageIndex
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  DSTypography,
+                  {
+                    variant: "b1",
+                    as: "span",
+                    className: "typography-page-info-and-detail",
+                    children: [
+                      "/ ",
+                      pageCount
+                    ]
+                  }
+                )
+              ] }),
               isLoadingPageCount && /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ml: "xxxs", mr: "xxxs", size: "xs" }),
               pageDetails.length !== 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs", ...ownerPropsConfig }),
                 /* @__PURE__ */ jsx(
                   DSTypography,
                   {
-                    fontSize: "13px",
-                    w: detailWidth,
+                    className: "typography-page-info-and-detail",
+                    innerRef: widestTypographyRef,
                     mr: "xxs",
                     variant: "b1",
                     as: "span",
@@ -94,11 +132,42 @@ const DSPaginator = (props) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"] })
+              /* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"], innerRef: checkMarkRef })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(Grid, { style: { position: "relative" }, children: pageDetails.map((pageDetail) => /* @__PURE__ */ jsx(InvisibleDiv, { "data-testid": "ds-pagination-invisible-detail-for-width-calc", children: /* @__PURE__ */ jsx(DSTypography, { fontSize: "13px", mr: "xxs", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageDetail }) }, pageDetail)) })
+        /* @__PURE__ */ jsx(Grid, { style: { position: "relative" }, children: pageDetails.map((pageDetail, index) => /* @__PURE__ */ jsx(
+          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__ */ jsx(
+              DSTypography,
+              {
+                className: "typography-page-info-and-detail",
+                mr: "xxs",
+                variant: "b1",
+                as: "span",
+                fontWeight: "semibold",
+                textAlign: "start",
+                children: pageDetail
+              }
+            )
+          },
+          pageDetail
+        )) })
       ]
     }
   );