@elliemae/ds-pagination 3.80.0-next.50 → 3.80.0-next.53

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

@@ -28,13 +28,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  InvisibleDiv: () => InvisibleDiv,
-  PaginationDropdownButtonPerPageSelector: () => PaginationDropdownButtonPerPageSelector,
-  StyledHeader: () => StyledHeader
+  StyledFloatingWrapper: () => StyledFloatingWrapper,
+  StyledHeader: () => StyledHeader,
+  StyledList: () => StyledList,
+  StyledListWrapper: () => StyledListWrapper,
+  StyledOption: () => StyledOption,
+  StyledOptionCheckmark: () => StyledOptionCheckmark,
+  StyledOptionLabel: () => StyledOptionLabel,
+  StyledPanel: () => StyledPanel,
+  StyledTrigger: () => StyledTrigger,
+  StyledTriggerWrapper: () => StyledTriggerWrapper
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_fast_list = require("@elliemae/ds-fast-list");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("./constants/index.js");
 const fontSize13Base13 = 13 / 13;
@@ -55,14 +64,17 @@ const styledFocusCss = import_ds_system.css`
     z-index: 7;
   }
 `;
-const InvisibleDiv = import_ds_system.styled.div`
-  opacity: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: absolute;
+const optionFontSizeCss = import_ds_system.css`
+  font-size: ${fontSize13Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize13Base13}rem;
+  }
 `;
-const paginationDropdownButtonCommonStyles = import_ds_system.css`
+const StyledTrigger = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,
+  preserveLegacyDataTestId: true
+})`
   min-height: 42px;
   display: grid;
   grid-auto-flow: column;
@@ -73,7 +85,9 @@ const paginationDropdownButtonCommonStyles = import_ds_system.css`
   padding-right: 16px;
   grid-gap: 8px;
   font-size: 13px;
-  color: neutral-700;
+  /* the previous DSPerPageSelector declares color: neutral-700 here, but inside its css helper the token is never
+     resolved, so the declaration is dropped and the text renders with the browser's button color (black, greyed when
+     disabled). Not copied: the selector keeps what is rendered today (see dimsum_compliance_status_report.md) */
   cursor: pointer;
   border-radius: 0;
   font-weight: ${(props) => props.theme.fontWeights.regular};
@@ -84,34 +98,92 @@ const paginationDropdownButtonCommonStyles = import_ds_system.css`
     cursor: not-allowed;
   }
   white-space: nowrap;
+
+  /* the typography variants own their font-size, so we target the rendered element by className instead of wrapping
+     DSTypography in styled() (same approach as the previous implementation) */
+  .typography-per-page-selector {
+    ${optionFontSizeCss}
+  }
 `;
-const PaginationDropdownButtonPerPageSelector = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+const StyledTriggerWrapper = (0, import_ds_system.styled)("div", {
   name: import_constants.DSPaginationName,
-  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,
-  preserveLegacyDataTestId: true
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.TRIGGER_WRAPPER
 })`
-  ${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;
-    }
-  }
+  display: contents;
 `;
-const StyledHeader = import_ds_system.styled.div`
+const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.FLOATING_WRAPPER
+})``;
+const StyledPanel = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PER_PAGE_SELECTOR_SLOTS.PANEL })`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  /* same as the previous DSDropdownMenuV2 wrapper: 4px of padding below the list */
+  padding-bottom: ${import_constants.PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM}px;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledHeader = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PER_PAGE_SELECTOR_SLOTS.HEADER })`
+  display: grid;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: ${import_constants.PER_PAGE_SELECTOR_HEADER_HEIGHT}px;
+  padding: 0 0 0 4px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[300]};
   font-size: ${fontSize12Base16}rem;
+  color: ${({ theme }) => theme.colors.neutral[500]};
   @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
     font-size: ${fontSize12Base13}rem;
   }
 `;
+const StyledListWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.LIST_WRAPPER
+})``;
+const StyledList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastList, { name: import_constants.DSPaginationName, slot: import_constants.PER_PAGE_SELECTOR_SLOTS.LIST })``;
+const StyledOption = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PER_PAGE_SELECTOR_SLOTS.OPTION })`
+  position: relative;
+  display: grid;
+  align-items: center;
+  column-gap: 8px;
+  min-height: ${import_constants.PER_PAGE_SELECTOR_OPTION_HEIGHT}px;
+  padding: 4px 16px;
+  cursor: pointer;
+  list-style: none;
+  ${optionFontSizeCss}
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+  }
+  &:focus {
+    outline: none;
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+    &:after {
+      display: block;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid ${({ theme }) => theme.colors.brand[500]};
+      pointer-events: none;
+      z-index: 7;
+    }
+  }
+`;
+const StyledOptionCheckmark = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.OPTION_CHECKMARK
+})`
+  display: grid;
+  place-items: center;
+`;
+const StyledOptionLabel = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PER_PAGE_SELECTOR_SLOTS.OPTION_LABEL
+})`
+  /* labels wrap, they are never truncated (see stories/docs/principles/a11y/TextTruncationCriticalities.md) */
+  white-space: normal;
+  overflow-wrap: anywhere;
+`;
 //# sourceMappingURL=styled.js.map

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

@@ -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';\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  &:disabled {\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;",
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport {\n  DSPaginationName,\n  PER_PAGE_SELECTOR_HEADER_HEIGHT,\n  PER_PAGE_SELECTOR_OPTION_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,\n  PER_PAGE_SELECTOR_SLOTS,\n} from './constants/index.js';\n\n// the font sizes are the ones of the previous DSPerPageSelector (same rem/px dance between the 13px and 16px base)\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 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\nconst optionFontSizeCss = css`\n  font-size: ${fontSize13Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize13Base13}rem;\n  }\n`;\n\nexport const StyledTrigger = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\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  /* the previous DSPerPageSelector declares color: neutral-700 here, but inside its css helper the token is never\n     resolved, so the declaration is dropped and the text renders with the browser's button color (black, greyed when\n     disabled). Not copied: the selector keeps what is rendered today (see dimsum_compliance_status_report.md) */\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n\n  /* the typography variants own their font-size, so we target the rendered element by className instead of wrapping\n     DSTypography in styled() (same approach as the previous implementation) */\n  .typography-per-page-selector {\n    ${optionFontSizeCss}\n  }\n`;\n\nexport const StyledTriggerWrapper = styled('div', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.TRIGGER_WRAPPER,\n})`\n  display: contents;\n`;\n\nexport const StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.FLOATING_WRAPPER,\n})``;\n\nexport const StyledPanel = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.PANEL })`\n  display: grid;\n  grid-template-rows: auto 1fr;\n  /* same as the previous DSDropdownMenuV2 wrapper: 4px of padding below the list */\n  padding-bottom: ${PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM}px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledHeader = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.HEADER })`\n  display: grid;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: ${PER_PAGE_SELECTOR_HEADER_HEIGHT}px;\n  padding: 0 0 0 4px;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[300]};\n  font-size: ${fontSize12Base16}rem;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n\n// explicit height: the virtual list needs a constrained box to scroll (its own container is height: 100%)\nexport const StyledListWrapper = styled('div', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.LIST_WRAPPER,\n})``;\n\nexport const StyledList = styled(DSFastList, { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.LIST })``;\n\nexport const StyledOption = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.OPTION })`\n  position: relative;\n  display: grid;\n  align-items: center;\n  column-gap: 8px;\n  min-height: ${PER_PAGE_SELECTOR_OPTION_HEIGHT}px;\n  padding: 4px 16px;\n  cursor: pointer;\n  list-style: none;\n  ${optionFontSizeCss}\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    outline: none;\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n      pointer-events: none;\n      z-index: 7;\n    }\n  }\n`;\n\nexport const StyledOptionCheckmark = styled('span', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_CHECKMARK,\n})`\n  display: grid;\n  place-items: center;\n`;\n\nexport const StyledOptionLabel = styled('span', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_LABEL,\n})`\n  /* labels wrap, they are never truncated (see stories/docs/principles/a11y/TextTruncationCriticalities.md) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA2B;AAC3B,iCAAgC;AAChC,0BAA2B;AAC3B,uBAA4B;AAE5B,uBAMO;AAGP,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;AAM9D,MAAM,oBAAoB;AAAA,eACX,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAI1B,MAAM,oBAAgB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,yCAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAgBgB,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUd,iBAAiB;AAAA;AAAA;AAIhB,MAAM,2BAAuB,yBAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,yCAAwB;AAChC,CAAC;AAAA;AAAA;AAIM,MAAM,4BAAwB,yBAAO,4CAAiB;AAAA,EAC3D,MAAM;AAAA,EACN,MAAM,yCAAwB;AAChC,CAAC;AAEM,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,yCAAwB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIpF,uDAAsC;AAAA,sBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGzD,MAAM,mBAAe,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,yCAAwB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,gBAI1F,gDAA+B;AAAA;AAAA,6BAElB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACtD,gBAAgB;AAAA,WACpB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,uBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAK1B,MAAM,wBAAoB,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,yCAAwB;AAChC,CAAC;AAEM,MAAM,iBAAa,yBAAO,gCAAY,EAAE,MAAM,mCAAkB,MAAM,yCAAwB,KAAK,CAAC;AAEpG,MAAM,mBAAe,yBAAO,OAAO,EAAE,MAAM,mCAAkB,MAAM,yCAAwB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1F,gDAA+B;AAAA;AAAA;AAAA;AAAA,IAI3C,iBAAiB;AAAA,sBACC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,wBAExC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAItC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BASpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,4BAAwB,yBAAO,QAAQ;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,yCAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,wBAAoB,yBAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,yCAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/DSPerPageSelector/typescript-testing/slots-props.js

@@ -26,7 +26,16 @@ const SlotPropsAsObj = {
   dsPaginationPerPageSelector: { "aria-label": "just a typescript test" }
 };
 const SlotPropsAsFunctions = {
-  dsPaginationPerPageSelector: () => ({ "aria-label": "just a typescript test" })
+  dsPaginationPerPageSelector: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorTriggerWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorFloatingWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorPanel: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorHeader: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorListWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorList: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOption: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOptionCheckmark: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOptionLabel: () => ({ "aria-label": "just a typescript test" })
 };
 const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
 //# sourceMappingURL=slots-props.js.map

package/dist/cjs/parts/DSPerPageSelector/typescript-testing/slots-props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/typescript-testing/slots-props.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPerPageSelectorT.Props> = {\n  dsPaginationPerPageSelector: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPerPageSelectorT.SlotFunctionArguments = {\n  dsPaginationPerPageSelector: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAAoD;AAAA,EACxD,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AACA,MAAM,uBAAiE;AAAA,EACrE,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AACA,MAAM,6CAEF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPerPageSelectorT.Props> = {\n  dsPaginationPerPageSelector: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPerPageSelectorT.SlotFunctionArguments = {\n  dsPaginationPerPageSelector: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorTriggerWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorFloatingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorPanel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorHeader: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorList: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOption: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOptionCheckmark: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOptionLabel: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAAoD;AAAA,EACxD,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AACA,MAAM,uBAAiE;AAAA,EACrE,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,2CAA2C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3F,4CAA4C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5F,kCAAkC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClF,mCAAmC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnF,wCAAwC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxF,iCAAiC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjF,mCAAmC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnF,4CAA4C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5F,wCAAwC,OAAO,EAAE,cAAc,yBAAyB;AAC1F;AACA,MAAM,6CAEF;",
   "names": []
 }

package/dist/cjs/parts/DSPerPageSelector/typescript-testing/typescript-testing.js

@@ -26,8 +26,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import__ = require("../index.js");
 const testRequiredProps = {};
 const testOptionalProps = {
-  perPageOptions: [5, 10, 20]
+  perPageOptions: [5, 10, 20],
+  listWidth: 120
 };
+const testOptionalPropsCssLength = { listWidth: "10rem" };
 const testPartialDefaults = {
   onPageSizeChange: () => null,
   perPageStep: 5
@@ -86,4 +88,61 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSPerPageSelector, { ...testDefinitionAsConst }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSPerPageSelector, { pageSize: 10, onPageSizeChange: () => null, perPageStep: 5, minPerPage: 0, maxPerPage: 100 })
 ] });
+const testOptionObject = { type: "single", dsId: "all", label: "All", value: 1e3 };
+const testOptionObjectWithoutType = { dsId: "all", label: "All", value: 1e3 };
+const testPerPageOptions = [
+  10,
+  20,
+  testOptionObject,
+  testOptionObjectWithoutType
+];
+const testNoRender = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `render` is not part of the contract (it only worked because the dropdown got the options unchanged)
+  render: () => null
+};
+const testNoDisabled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `disabled` is not part of the contract
+  disabled: true
+};
+const testNoApplyAriaDisabled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `applyAriaDisabled` is not part of the contract
+  applyAriaDisabled: true
+};
+const testNoOnClick = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `onClick` is not part of the contract
+  onClick: () => null
+};
+const testNoGlobalAttributes = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error global attributes are not part of the contract
+  "aria-label": "x"
+};
+const testNoXstyled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error xstyled props are not part of the contract
+  mt: "xs"
+};
+const testValueIsANumber = {
+  dsId: "a",
+  label: "A",
+  // @ts-expect-error the value is the number of rows
+  value: "many"
+};
+const testDsIdIsRequired = { label: "A", value: 1 };
 //# sourceMappingURL=typescript-testing.js.map

package/dist/cjs/parts/DSPerPageSelector/typescript-testing/typescript-testing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/typescript-testing/typescript-testing.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPerPageSelector } from '../index.js';\nimport type { DSPerPageSelectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPerPageSelectorT.Props;\ntype ComponentPropsInternals = DSPerPageSelectorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPerPageSelectorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPerPageSelectorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPerPageSelectorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  perPageOptions: [5, 10, 20],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPerPageSelector {...testExplicitDefinition} />\n    <DSPerPageSelector {...testInferedTypeCompatibility} />\n    <DSPerPageSelector {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPerPageSelector pageSize={10} onPageSizeChange={() => null} perPageStep={5} minPerPage={0} maxPerPage={100} />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoFrB;AAnFF,eAAkC;AAUlC,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD;AAAA,EACrD,gBAAgB,CAAC,GAAG,IAAI,EAAE;AAC5B;AAIA,MAAM,sBAA2D;AAAA,EAC/D,kBAAkB,MAAM;AAAA,EACxB,aAAa;AACf;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,8BAAmB,GAAG,wBAAwB;AAAA,EAC/C,4CAAC,8BAAmB,GAAG,8BAA8B;AAAA,EACrD,4CAAC,8BAAmB,GAAG,uBAAuB;AAAA,EAE9C,4CAAC,8BAAkB,UAAU,IAAI,kBAAkB,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,YAAY,KAAK;AAAA,GACjH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPerPageSelector } from '../index.js';\nimport type { DSPerPageSelectorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPerPageSelectorT.Props;\ntype ComponentPropsInternals = DSPerPageSelectorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPerPageSelectorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPerPageSelectorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPerPageSelectorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  perPageOptions: [5, 10, 20],\n  listWidth: 120,\n};\nconst testOptionalPropsCssLength: ComponentPropsOptionalProps = { listWidth: '10rem' };\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPerPageSelector {...testExplicitDefinition} />\n    <DSPerPageSelector {...testInferedTypeCompatibility} />\n    <DSPerPageSelector {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPerPageSelector pageSize={10} onPageSizeChange={() => null} perPageStep={5} minPerPage={0} maxPerPage={100} />\n  </>\n);\n\n// the contract of an option is closed: a number, or { type?: 'single', dsId, label, value } and nothing else.\n// What it inherited from the DSDropdownMenuV2 single item (render, disabled, applyAriaDisabled, onClick, onKeyDown,\n// global attributes, xstyled props) was never meant for consumers nor shown in the examples, and is not accepted.\n// Each @ts-expect-error sits right above the property it is about, so formatting can not detach it from its line.\nconst testOptionObject: DSPerPageSelectorT.PerPageOption = { type: 'single', dsId: 'all', label: 'All', value: 1000 };\nconst testOptionObjectWithoutType: DSPerPageSelectorT.PerPageOption = { dsId: 'all', label: 'All', value: 1000 };\nconst testPerPageOptions: ComponentPropsForApp['perPageOptions'] = [\n  10,\n  20,\n  testOptionObject,\n  testOptionObjectWithoutType,\n];\n\nconst testNoRender: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error `render` is not part of the contract (it only worked because the dropdown got the options unchanged)\n  render: () => null,\n};\nconst testNoDisabled: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error `disabled` is not part of the contract\n  disabled: true,\n};\nconst testNoApplyAriaDisabled: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error `applyAriaDisabled` is not part of the contract\n  applyAriaDisabled: true,\n};\nconst testNoOnClick: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error `onClick` is not part of the contract\n  onClick: () => null,\n};\nconst testNoGlobalAttributes: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error global attributes are not part of the contract\n  'aria-label': 'x',\n};\nconst testNoXstyled: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  value: 1,\n  // @ts-expect-error xstyled props are not part of the contract\n  mt: 'xs',\n};\nconst testValueIsANumber: DSPerPageSelectorT.PerPageOption = {\n  dsId: 'a',\n  label: 'A',\n  // @ts-expect-error the value is the number of rows\n  value: 'many',\n};\n// @ts-expect-error a `dsId` is required: it is the identity of the option\nconst testDsIdIsRequired: DSPerPageSelectorT.PerPageOption = { label: 'A', value: 1 };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport namespace DSPaginationT {\n  // LEGACY WAY OF USING THE PAGINATION COMPONENT\n  export interface DefaultProps {\n    pageCount: number | string;\n    isLoadingPageCount: boolean;\n    pageIndex: number;\n    canPreviousPage: boolean;\n    canNextPage: boolean;\n    pageSize: number;\n    showPerPageSelector: boolean;\n    perPageStep: number;\n    minPerPage: number;\n    maxPerPage: number;\n    onPageSizeChange: (pageSize: number) => void;\n    onPreviousPage: () => void;\n    onNextPage: () => void;\n    onPageChange: (page: number) => void;\n    pageDetails: string[] | readonly string[];\n    pageDetailsTitle: string;\n    width: string | number;\n  }\n  export interface OptionalProps {\n    perPageOptions?: (number | DSDropdownMenuT.ItemSingleOptions)[];\n  }\n  export interface RequiredProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginationT.DefaultProps = {\n  pageCount: 0,\n  pageIndex: 1,\n  isLoadingPageCount: false,\n  canPreviousPage: true,\n  canNextPage: true,\n  pageSize: 10,\n  showPerPageSelector: true,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n  onPageSizeChange: () => null,\n  onPreviousPage: () => null,\n  onNextPage: () => null,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n  width: '100%',\n};\n\nexport const DSPaginationPropTypes: DSPropTypesSchema<DSPaginationT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n  canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n  onPreviousPage: PropTypes.func\n    .description('Function invoked when the previous button is pressed')\n    .defaultValue(() => null),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n  showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object]))\n    .description('The available options for page size')\n    .defaultValue([10]),\n  minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n  width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n  isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n};\n\nexport const DSPaginationPropTypesSchema = DSPaginationPropTypes as unknown as ValidationMap<DSPaginationT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport type { DSPerPageSelectorT } from './parts/DSPerPageSelector/react-desc-prop-types.js';\n\nexport namespace DSPaginationT {\n  // LEGACY WAY OF USING THE PAGINATION COMPONENT\n  export interface DefaultProps {\n    pageCount: number | string;\n    isLoadingPageCount: boolean;\n    pageIndex: number;\n    canPreviousPage: boolean;\n    canNextPage: boolean;\n    pageSize: number;\n    showPerPageSelector: boolean;\n    perPageStep: number;\n    minPerPage: number;\n    maxPerPage: number;\n    onPageSizeChange: (pageSize: number) => void;\n    onPreviousPage: () => void;\n    onNextPage: () => void;\n    onPageChange: (page: number) => void;\n    pageDetails: string[] | readonly string[];\n    pageDetailsTitle: string;\n    width: string | number;\n  }\n  export interface OptionalProps {\n    perPageOptions?: (number | DSPerPageSelectorT.PerPageOption)[];\n  }\n  export interface RequiredProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginationT.DefaultProps = {\n  pageCount: 0,\n  pageIndex: 1,\n  isLoadingPageCount: false,\n  canPreviousPage: true,\n  canNextPage: true,\n  pageSize: 10,\n  showPerPageSelector: true,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n  onPageSizeChange: () => null,\n  onPreviousPage: () => null,\n  onNextPage: () => null,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n  width: '100%',\n};\n\nexport const DSPaginationPropTypes: DSPropTypesSchema<DSPaginationT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n  canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n  onPreviousPage: PropTypes.func\n    .description('Function invoked when the previous button is pressed')\n    .defaultValue(() => null),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n  showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object]))\n    .description('The available options for page size')\n    .defaultValue([10]),\n  minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n  width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n  isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n};\n\nexport const DSPaginationPropTypesSchema = DSPaginationPropTypes as unknown as ValidationMap<DSPaginationT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AA+ChE,MAAM,eAA2C;AAAA,EACtD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB,MAAM;AAAA,EACxB,gBAAgB,MAAM;AAAA,EACtB,YAAY,MAAM;AAAA,EAClB,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,EAClB,OAAO;AACT;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,UAAU,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,iBAAiB,kCAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,EAC/G,aAAa,kCAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EACvG,gBAAgB,kCAAU,KACvB,YAAY,sDAAsD,EAClE,aAAa,MAAM,IAAI;AAAA,EAC1B,cAAc,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,YAAY,kCAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,MAAM,IAAI;AAAA,EAC9G,qBAAqB,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,EACtG,gBAAgB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACxF,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACzF,kBAAkB,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,aAAa,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,kCAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AAAA,EAClB,OAAO,kCAAU,IAAI,YAAY,2CAA2C,EAAE,aAAa,MAAM;AAAA,EACjG,oBAAoB,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAC/G;AAEO,MAAM,8BAA8B;",
   "names": []
 }

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

@@ -1,176 +1,20 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React2, { useMemo } from "react";
-import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
-import { Grid } from "@elliemae/ds-grid";
-import { ChevronDown } from "@elliemae/ds-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { DSTypography } from "@elliemae/ds-typography";
-import { DSPaginationSeparator } from "../DSPaginationSeparator/index.js";
-import { createPaginatorHeader } from "./config/createPaginatorHeader.js";
+import React2 from "react";
 import { usePaginator } from "./config/usePaginator.js";
-import { DSPaginatorName, PAGINATOR_DATA_TESTID } from "./constants/index.js";
+import { DSPaginatorName } from "./constants/index.js";
+import { DSPaginatorContext } from "./DSPaginatorCTX.js";
+import { Panel } from "./parts/Panel.js";
+import { Trigger } from "./parts/Trigger.js";
 import { DSPaginatorPropTypesSchema } from "./react-desc-prop-types.js";
-import { InvisibleDiv, PaginationDropdownButtonPaginator, StyledDropdown, StyledPageInfo } from "./styled.js";
 const DSPaginator = (props) => {
-  const {
-    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },
-    xstyledProps,
-    globalAttributes,
-    ownerPropsConfig,
-    btnRef,
-    btnWidth,
-    pageInfoWidth,
-    options,
-    isOpened,
-    actionRef,
-    widestChildRef,
-    pageInfoRef,
-    checkMarkRef,
-    checkMarkWidth,
-    onKeyDown,
-    setIsOpened
-  } = usePaginator(props);
-  const widestTypographyRef = React2.useRef(null);
-  const Header = useMemo(
-    () => 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(
-    StyledDropdown,
-    {
-      isOpened,
-      options,
-      selectedOptions: { [pageIndex.toString()]: true },
-      onOptionClick: (_, clickedOption) => {
-        onPageChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      customOffset: [-(checkMarkWidth + 7), 2],
-      startPlacementPreference: "top-start",
-      actionRef,
-      onKeyDown,
-      minWidth: pageDetails.length !== 0 ? btnWidth + checkMarkWidth + 7 : (
-        /**
-         * Structure of the width:
-         *   16px (left padding)
-         *   + chevronWidth (size of the chevron icon)
-         *   + 8px (spacing between chevron and text)
-         *   + pageCount length in ch
-         *   + 16px (right padding)
-         *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)
-         * By using `calc()` + `ch` units, the component stays responsive to font-size changes
-         * without requiring an extra ref to measure the page count text width.
-         */
-        `calc(${checkMarkWidth + 60}px + ${pageCount.toString().length}ch)`
-      ),
-      maxHeight: 300,
-      HeaderComp: Header,
-      children: [
-        /* @__PURE__ */ jsx(
-          PaginationDropdownButtonPaginator,
-          {
-            buttonType: "raw",
-            disabled: isLoadingPageCount,
-            innerRef: btnRef,
-            "aria-pressed": isOpened,
-            "aria-label": `Page ${pageIndex} out of ${pageCount}, ${pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : "\b\b"}. Press to change the current page`,
-            "data-testid": PAGINATOR_DATA_TESTID.PAGINATOR,
-            ...globalAttributes,
-            ...xstyledProps,
-            ...ownerPropsConfig,
-            onClick: buttonOnClick,
-            children: /* @__PURE__ */ jsxs(Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
-              /* @__PURE__ */ jsxs(StyledPageInfo, { innerRef: 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,
-                  {
-                    className: "typography-page-info-and-detail",
-                    innerRef: widestTypographyRef,
-                    mr: "xxs",
-                    variant: "b1",
-                    as: "span",
-                    fontWeight: "semibold",
-                    textAlign: "start",
-                    children: pageDetails[pageIndex - 1]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"], innerRef: checkMarkRef })
-            ] })
-          }
-        ),
-        /* @__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
-        )) })
-      ]
-    }
-  );
+  const config = usePaginator(props);
+  const ctx = React2.useMemo(() => ({ ...config }), [config]);
+  return /* @__PURE__ */ jsxs(DSPaginatorContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx(Trigger, {}),
+    /* @__PURE__ */ jsx(Panel, {})
+  ] });
 };
 DSPaginator.displayName = DSPaginatorName;
 const DSPaginatorWithSchema = describe(DSPaginator);

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 { type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSPaginationSeparator } from '../DSPaginationSeparator/index.js';\nimport { createPaginatorHeader } from './config/createPaginatorHeader.js';\nimport { usePaginator } from './config/usePaginator.js';\nimport { DSPaginatorName, PAGINATOR_DATA_TESTID } from './constants/index.js';\nimport { DSPaginatorPropTypesSchema, type DSPaginatorT } from './react-desc-prop-types.js';\nimport { InvisibleDiv, PaginationDropdownButtonPaginator, StyledDropdown, StyledPageInfo } from './styled.js';\n\nconst DSPaginator: React.ComponentType<DSPaginatorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    actionRef,\n    widestChildRef,\n    pageInfoRef,\n    checkMarkRef,\n    checkMarkWidth,\n    onKeyDown,\n    setIsOpened,\n  } = usePaginator(props);\n\n  const widestTypographyRef = React.useRef<HTMLDivElement>(null);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth }),\n    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth],\n  );\n\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  return (\n    <StyledDropdown\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageIndex.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-(checkMarkWidth + 7), 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      onKeyDown={onKeyDown}\n      minWidth={\n        pageDetails.length !== 0\n          ? btnWidth + checkMarkWidth + 7\n          : /**\n             * Structure of the width:\n             *   16px (left padding)\n             *   + chevronWidth (size of the chevron icon)\n             *   + 8px (spacing between chevron and text)\n             *   + pageCount length in ch\n             *   + 16px (right padding)\n             *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)\n             * By using `calc()` + `ch` units, the component stays responsive to font-size changes\n             * without requiring an extra ref to measure the page count text width.\n             */\n\n            `calc(${checkMarkWidth + 60}px + ${pageCount.toString().length}ch)`\n      }\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButtonPaginator\n        buttonType=\"raw\"\n        disabled={isLoadingPageCount}\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`Page ${pageIndex} out of ${pageCount}, ${\n          pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : '\\b\\b'\n        }. Press to change the current page`}\n        data-testid={PAGINATOR_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={buttonOnClick}\n      >\n        <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <StyledPageInfo innerRef={pageInfoRef}>\n            <DSTypography\n              /**\n               * Pagination uses DSTypography internally, but each typography variant defines\n               * its own font-size. When these components are placed inside a styled() wrapper,\n               * trying to style them via styled(DSTypography) triggers TypeScript errors\n               * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n               *\n               * Instead of wrapping DSTypography directly in styled(), we target the\n               * underlying rendered elements via className/id. This avoids the TS conflicts\n               * while still allowing us to override their font-size reliably.\n               */\n              id=\"typography-page-index\"\n              variant=\"b1\"\n              as=\"span\"\n              fontWeight=\"semibold\"\n              textAlign=\"start\"\n            >\n              {pageIndex}\n            </DSTypography>\n            <DSTypography\n              variant=\"b1\"\n              as=\"span\"\n              /**\n               * Pagination uses DSTypography internally, but each typography variant defines\n               * its own font-size. When these components are placed inside a styled() wrapper,\n               * trying to style them via styled(DSTypography) triggers TypeScript errors\n               * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n               *\n               * Instead of wrapping DSTypography directly in styled(), we target the\n               * underlying rendered elements via className/id. This avoids the TS conflicts\n               * while still allowing us to override their font-size reliably.\n               */ className=\"typography-page-info-and-detail\"\n            >\n              / {pageCount}\n            </DSTypography>\n          </StyledPageInfo>\n          {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n          {pageDetails.length !== 0 && (\n            <>\n              <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" {...ownerPropsConfig} />\n              <DSTypography\n                className=\"typography-page-info-and-detail\"\n                innerRef={widestTypographyRef}\n                mr=\"xxs\"\n                variant=\"b1\"\n                as=\"span\"\n                fontWeight=\"semibold\"\n                textAlign=\"start\"\n              >\n                {pageDetails[pageIndex - 1]}\n              </DSTypography>\n            </>\n          )}\n          <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} innerRef={checkMarkRef} />\n        </Grid>\n      </PaginationDropdownButtonPaginator>\n      {/* We calculate the length of the longest detail here (this is as per specs) */}\n      <Grid style={{ position: 'relative' }}>\n        {pageDetails.map((pageDetail, index) => (\n          <InvisibleDiv\n            innerRef={(el) => {\n              if (!el) return;\n              if (!widestChildRef.current) {\n                widestChildRef.current = el;\n                return;\n              }\n              if (el.offsetWidth > widestChildRef.current.offsetWidth) {\n                widestChildRef.current = el;\n              }\n              if (index === pageDetails.length - 1) {\n                widestTypographyRef.current?.style.setProperty('min-width', `${widestChildRef.current?.offsetWidth}px`);\n              }\n            }}\n            data-testid=\"ds-pagination-invisible-detail-for-width-calc\"\n            key={pageDetail}\n          >\n            <DSTypography\n              className=\"typography-page-info-and-detail\"\n              mr=\"xxs\"\n              variant=\"b1\"\n              as=\"span\"\n              fontWeight=\"semibold\"\n              textAlign=\"start\"\n            >\n              {pageDetail}\n            </DSTypography>\n          </InvisibleDiv>\n        ))}\n      </Grid>\n    </StyledDropdown>\n  );\n};\n\nDSPaginator.displayName = DSPaginatorName;\nconst DSPaginatorWithSchema = describe(DSPaginator);\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n\nexport { DSPaginator, DSPaginatorWithSchema };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { usePaginator } from './config/usePaginator.js';\nimport { DSPaginatorName } from './constants/index.js';\nimport { DSPaginatorContext, type DSPaginatorCTX } from './DSPaginatorCTX.js';\nimport { Panel } from './parts/Panel.js';\nimport { Trigger } from './parts/Trigger.js';\nimport { DSPaginatorPropTypesSchema, type DSPaginatorT } from './react-desc-prop-types.js';\n\n/**\n * A trigger (aria-haspopup=\"dialog\") that owns a non-modal dialog, positioned by the floating context, whose content is\n * a listbox of pages (virtualized with DSFastList). It replaced a DSDropdownMenuV2 based implementation keeping its\n * public contract; see KNOWN_INTENTIONAL_DEVIATIONS.md (package root) for the accepted deviations and the release notes for the behavior changes.\n */\nconst DSPaginator: React.ComponentType<DSPaginatorT.Props> = (props) => {\n  const config = usePaginator(props);\n  const ctx: DSPaginatorCTX = React.useMemo(() => ({ ...config }), [config]);\n\n  return (\n    <DSPaginatorContext.Provider value={ctx}>\n      <Trigger />\n      <Panel />\n    </DSPaginatorContext.Provider>\n  );\n};\n\nDSPaginator.displayName = DSPaginatorName;\nconst DSPaginatorWithSchema = describe(DSPaginator);\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n\nexport { DSPaginator, DSPaginatorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBnB,SACE,KADF;AAnBJ,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,0BAA+C;AACxD,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,kCAAqD;AAO9D,MAAM,cAAuD,CAAC,UAAU;AACtE,QAAM,SAAS,aAAa,KAAK;AACjC,QAAM,MAAsBA,OAAM,QAAQ,OAAO,EAAE,GAAG,OAAO,IAAI,CAAC,MAAM,CAAC;AAEzE,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAAO,KAClC;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM;AAAA,KACT;AAEJ;AAEA,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;",
   "names": ["React"]
 }