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

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

@@ -28,17 +28,25 @@ 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,
-  PaginationDropdownButtonPaginator: () => PaginationDropdownButtonPaginator,
-  StyledDropdown: () => StyledDropdown,
+  StyledFloatingWrapper: () => StyledFloatingWrapper,
   StyledHeader: () => StyledHeader,
-  StyledPageInfo: () => StyledPageInfo
+  StyledList: () => StyledList,
+  StyledListWrapper: () => StyledListWrapper,
+  StyledOption: () => StyledOption,
+  StyledOptionCheckmark: () => StyledOptionCheckmark,
+  StyledOptionDetail: () => StyledOptionDetail,
+  StyledOptionPage: () => StyledOptionPage,
+  StyledPageInfo: () => StyledPageInfo,
+  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_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
+var import_ds_floating_context = require("@elliemae/ds-floating-context");
+var import_ds_fast_list = require("@elliemae/ds-fast-list");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("./constants/index.js");
 const fontSize13Base13 = 13 / 13;
@@ -61,14 +69,11 @@ 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 paginationDropdownButtonCommonStyles = import_ds_system.css`
+const StyledTrigger = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PAGINATOR_SLOTS.PAGINATOR,
+  preserveLegacyDataTestId: true
+})`
   min-height: 42px;
   display: grid;
   grid-auto-flow: column;
@@ -79,7 +84,9 @@ const paginationDropdownButtonCommonStyles = import_ds_system.css`
   padding-right: 16px;
   grid-gap: 8px;
   font-size: 13px;
-  color: neutral-700;
+  /* the existing DSPaginator 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 paginator keeps what is rendered today (see dimsum_compliance_status_report.md) */
   cursor: pointer;
   border-radius: 0;
   font-weight: ${(props) => props.theme.fontWeights.regular};
@@ -90,25 +97,15 @@ const paginationDropdownButtonCommonStyles = import_ds_system.css`
     cursor: not-allowed;
   }
   white-space: nowrap;
-`;
-const PaginationDropdownButtonPaginator = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
-  name: import_constants.DSPaginationName,
-  slot: import_constants.PAGINATOR_SLOTS.PAGINATOR,
-  preserveLegacyDataTestId: true
-})`
-  ${paginationDropdownButtonCommonStyles}
-`;
-const StyledDropdown = (0, import_ds_system.styled)(import_ds_dropdownmenu_v2.DSDropdownMenuV2)`
-  /**
- * Pagination uses DSTypography internally, but each typography variant defines
- * its own font-size. When these components are placed inside a styled() wrapper,
- * trying to style them via styled(DSTypography) triggers TypeScript errors
- * because DSTypography exposes  "as"  props and variant-specific overrides.
- *
- * Instead of wrapping DSTypography directly in styled(), we target the
- * underlying rendered elements via className/id. This avoids the TS conflicts
- * while still allowing us to override their font-size reliably.
- */
+
+  /* same approach as the existing DSPaginator: the typography variants own their font-size, so we target the
+     rendered elements by className instead of wrapping DSTypography in styled() */
+  /* the detail of the current page wraps when it reaches the list width (the trigger does not reserve the width of the
+     widest detail: it follows the current one) */
+  .typography-paginator-detail {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
   #typography-page-index {
     font-size: ${fontSize18Base16}rem;
     @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
@@ -122,14 +119,92 @@ const StyledDropdown = (0, import_ds_system.styled)(import_ds_dropdownmenu_v2.DS
     }
   }
 `;
-const StyledHeader = (0, import_ds_system.styled)(import_ds_grid.default)`
+const StyledTriggerWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PAGINATOR_SLOTS.TRIGGER_WRAPPER
+})`
+  display: contents;
+`;
+const StyledPageInfo = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_SLOTS.PAGE_INFO })`
+  display: flex;
+  gap: 4px;
+`;
+const StyledFloatingWrapper = (0, import_ds_system.styled)(import_ds_floating_context.FloatingWrapper, {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PAGINATOR_SLOTS.FLOATING_WRAPPER
+})``;
+const StyledPanel = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_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.PAGINATOR_PANEL_PADDING_BOTTOM}px;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledHeader = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_SLOTS.HEADER })`
+  align-items: center;
+  box-sizing: border-box;
+  min-height: ${import_constants.PAGINATOR_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 StyledPageInfo = import_ds_system.styled.div`
-  display: flex;
-  gap: 4px;
+const StyledListWrapper = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PAGINATOR_SLOTS.LIST_WRAPPER
+})``;
+const StyledList = (0, import_ds_system.styled)(import_ds_fast_list.DSFastList, { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_SLOTS.LIST })``;
+const StyledOption = (0, import_ds_system.styled)("div", { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_SLOTS.OPTION })`
+  position: relative;
+  display: grid;
+  align-items: center;
+  column-gap: 8px;
+  min-height: ${import_constants.PAGINATOR_OPTION_HEIGHT}px;
+  padding: 4px 16px;
+  cursor: pointer;
+  list-style: none;
+  font-size: ${fontSize13Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize13Base13}rem;
+  }
+  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.PAGINATOR_SLOTS.OPTION_CHECKMARK
+})`
+  display: grid;
+  place-items: center;
+`;
+const StyledOptionPage = (0, import_ds_system.styled)("span", { name: import_constants.DSPaginationName, slot: import_constants.PAGINATOR_SLOTS.OPTION_PAGE })``;
+const StyledOptionDetail = (0, import_ds_system.styled)("span", {
+  name: import_constants.DSPaginationName,
+  slot: import_constants.PAGINATOR_SLOTS.OPTION_DETAIL
+})`
+  /* details 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/DSPaginator/styled.js.map

@@ -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 { 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  &:disabled {\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\nexport const StyledPageInfo = styled.div`\n  display: flex;\n  gap: 4px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;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;AAI1B,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;",
-  "names": ["Grid"]
+  "sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { Grid } from '@elliemae/ds-grid';\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport {\n  DSPaginationName,\n  PAGINATOR_HEADER_HEIGHT,\n  PAGINATOR_OPTION_HEIGHT,\n  PAGINATOR_PANEL_PADDING_BOTTOM,\n  PAGINATOR_SLOTS,\n} from './constants/index.js';\n\n// the font sizes are the ones of the existing DSPaginator (same rem/px dance between the 13px and 16px base)\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 StyledTrigger = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.PAGINATOR,\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 existing DSPaginator 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 paginator 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  /* same approach as the existing DSPaginator: the typography variants own their font-size, so we target the\n     rendered elements by className instead of wrapping DSTypography in styled() */\n  /* the detail of the current page wraps when it reaches the list width (the trigger does not reserve the width of the\n     widest detail: it follows the current one) */\n  .typography-paginator-detail {\n    white-space: normal;\n    overflow-wrap: anywhere;\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`;\n\nexport const StyledTriggerWrapper = styled('div', {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.TRIGGER_WRAPPER,\n})`\n  display: contents;\n`;\n\nexport const StyledPageInfo = styled('div', { name: DSPaginationName, slot: PAGINATOR_SLOTS.PAGE_INFO })`\n  display: flex;\n  gap: 4px;\n`;\n\nexport const StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.FLOATING_WRAPPER,\n})``;\n\nexport const StyledPanel = styled('div', { name: DSPaginationName, slot: PAGINATOR_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: ${PAGINATOR_PANEL_PADDING_BOTTOM}px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledHeader = styled(Grid, { name: DSPaginationName, slot: PAGINATOR_SLOTS.HEADER })`\n  align-items: center;\n  box-sizing: border-box;\n  min-height: ${PAGINATOR_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: PAGINATOR_SLOTS.LIST_WRAPPER,\n})``;\n\nexport const StyledList = styled(DSFastList, { name: DSPaginationName, slot: PAGINATOR_SLOTS.LIST })``;\n\nexport const StyledOption = styled('div', { name: DSPaginationName, slot: PAGINATOR_SLOTS.OPTION })`\n  position: relative;\n  display: grid;\n  align-items: center;\n  column-gap: 8px;\n  min-height: ${PAGINATOR_OPTION_HEIGHT}px;\n  padding: 4px 16px;\n  cursor: pointer;\n  list-style: none;\n  font-size: ${fontSize13Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize13Base13}rem;\n  }\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: PAGINATOR_SLOTS.OPTION_CHECKMARK,\n})`\n  display: grid;\n  place-items: center;\n`;\n\nexport const StyledOptionPage = styled('span', { name: DSPaginationName, slot: PAGINATOR_SLOTS.OPTION_PAGE })``;\n\nexport const StyledOptionDetail = styled('span', {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.OPTION_DETAIL,\n})`\n  /* details 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": "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",
+  "names": []
 }

package/dist/cjs/parts/DSPaginator/typescript-testing/slot-props.js

@@ -26,7 +26,18 @@ const SlotPropsAsObj = {
   dsPaginationPaginator: { "aria-label": "just a typescript test" }
 };
 const SlotPropsAsFunctions = {
-  dsPaginationPaginator: () => ({ "aria-label": "just a typescript test" })
+  dsPaginationPaginator: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorTriggerWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorPageInfo: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorFloatingWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorPanel: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorHeader: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorListWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorList: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorOption: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorOptionCheckmark: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorOptionPage: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPaginatorOptionDetail: () => ({ "aria-label": "just a typescript test" })
 };
 const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
 //# sourceMappingURL=slot-props.js.map

package/dist/cjs/parts/DSPaginator/typescript-testing/slot-props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/typescript-testing/slot-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, PAGINATOR_SLOTS } from '../constants/index.js';\nimport type { DSPaginatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPaginatorT.Props> = {\n  dsPaginationPaginator: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPaginatorT.SlotFunctionArguments = {\n  dsPaginationPaginator: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAA8C;AAAA,EAClD,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AACA,MAAM,uBAA2D;AAAA,EAC/D,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;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, PAGINATOR_SLOTS } from '../constants/index.js';\nimport type { DSPaginatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPaginatorT.Props> = {\n  dsPaginationPaginator: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPaginatorT.SlotFunctionArguments = {\n  dsPaginationPaginator: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorTriggerWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorPageInfo: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorFloatingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorPanel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorHeader: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorList: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorOption: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorOptionCheckmark: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorOptionPage: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPaginatorOptionDetail: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAA8C;AAAA,EAClD,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AACA,MAAM,uBAA2D;AAAA,EAC/D,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,qCAAqC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACrF,+BAA+B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC/E,sCAAsC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACtF,4BAA4B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,kCAAkC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClF,2BAA2B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3E,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,sCAAsC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACtF,iCAAiC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjF,mCAAmC,OAAO,EAAE,cAAc,yBAAyB;AACrF;AACA,MAAM,6CAEF;",
   "names": []
 }

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

@@ -25,7 +25,8 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import__ = require("../index.js");
 const testRequiredProps = {};
-const testOptionalProps = {};
+const testOptionalProps = { listWidth: 320 };
+const testOptionalPropsCssLength = { listWidth: "24rem" };
 const testPartialDefaults = {
   pageCount: 0,
   isLoadingPageCount: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/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 { DSPaginator } from '../index.js';\nimport type { DSPaginatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPaginatorT.Props;\ntype ComponentPropsInternals = DSPaginatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPaginatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPaginatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPaginatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\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  pageCount: 0,\n  isLoadingPageCount: false,\n  onPageChange: () => null,\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPaginator {...testExplicitDefinition} />\n    <DSPaginator {...testInferedTypeCompatibility} />\n    <DSPaginator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPaginator\n      pageCount={0}\n      isLoadingPageCount={false}\n      pageIndex={1}\n      onPageChange={() => null}\n      pageDetails={[]}\n      pageDetailsTitle=\"\"\n    />\n  </>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACuFrB;AAtFF,eAA4B;AAU5B,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,cAAc,MAAM;AACtB;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,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;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,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAC/C,4CAAC,wBAAa,GAAG,uBAAuB;AAAA,EAExC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,cAAc,MAAM;AAAA,MACpB,aAAa,CAAC;AAAA,MACd,kBAAiB;AAAA;AAAA,EACnB;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPaginator } from '../index.js';\nimport type { DSPaginatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPaginatorT.Props;\ntype ComponentPropsInternals = DSPaginatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPaginatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPaginatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPaginatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = { listWidth: 320 };\nconst testOptionalPropsCssLength: ComponentPropsOptionalProps = { listWidth: '24rem' };\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  pageCount: 0,\n  isLoadingPageCount: false,\n  onPageChange: () => null,\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\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  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPaginator {...testExplicitDefinition} />\n    <DSPaginator {...testInferedTypeCompatibility} />\n    <DSPaginator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPaginator\n      pageCount={0}\n      isLoadingPageCount={false}\n      pageIndex={1}\n      onPageChange={() => null}\n      pageDetails={[]}\n      pageDetailsTitle=\"\"\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwFrB;AAvFF,eAA4B;AAU5B,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD,EAAE,WAAW,IAAI;AACxE,MAAM,6BAA0D,EAAE,WAAW,QAAQ;AAIrF,MAAM,sBAA2D;AAAA,EAC/D,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,cAAc,MAAM;AACtB;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,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;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,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAC/C,4CAAC,wBAAa,GAAG,uBAAuB;AAAA,EAExC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,cAAc,MAAM;AAAA,MACpB,aAAa,CAAC;AAAA,MACd,kBAAiB;AAAA;AAAA,EACnB;AAAA,GACF;",
   "names": []
 }

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

@@ -34,90 +34,21 @@ __export(DSPerPageSelector_exports, {
 module.exports = __toCommonJS(DSPerPageSelector_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-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_react = __toESM(require("react"));
 var import_usePerPageSelector = require("./config/usePerPageSelector.js");
 var import_constants = require("./constants/index.js");
+var import_DSPerPageSelectorCTX = require("./DSPerPageSelectorCTX.js");
+var import_Panel = require("./parts/Panel.js");
+var import_Trigger = require("./parts/Trigger.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_styled.StyledHeader, { children: "Per Page" });
 const DSPerPageSelector = (props) => {
-  const {
-    propsWithDefault: { pageSize, onPageSizeChange },
-    xstyledProps,
-    globalAttributes,
-    ownerPropsConfig,
-    actionRef,
-    btnRef,
-    chevronRef,
-    chevronWidth,
-    isOpened,
-    options,
-    setIsOpened
-  } = (0, import_usePerPageSelector.usePerPageSelector)(props);
-  const buttonOnClick = (0, import_react.useMemo)(() => {
-    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,
-    {
-      isOpened,
-      options,
-      selectedOptions: { [pageSize.toString()]: true },
-      onOptionClick: (_, clickedOption) => {
-        onPageSizeChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      customOffset: [-(chevronWidth + 7), 2],
-      startPlacementPreference: "top-start",
-      actionRef,
-      minWidth: `calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`,
-      maxHeight: 300,
-      HeaderComp: Header,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_styled.PaginationDropdownButtonPerPageSelector,
-        {
-          buttonType: "raw",
-          innerRef: btnRef,
-          "aria-pressed": isOpened,
-          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
-          "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
-          ...globalAttributes,
-          ...xstyledProps,
-          ...ownerPropsConfig,
-          onClick: buttonOnClick,
-          children: [
-            /* @__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 })
-          ]
-        }
-      )
-    }
-  );
+  const config = (0, import_usePerPageSelector.usePerPageSelector)(props);
+  const ctx = import_react.default.useMemo(() => ({ ...config }), [config]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSPerPageSelectorCTX.DSPerPageSelectorContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Trigger.Trigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Panel.Panel, {})
+  ] });
 };
 DSPerPageSelector.displayName = import_constants.DSPerPageSelectorName;
 const DSPerPageSelectorWithSchema = (0, import_ds_props_helpers.describe)(DSPerPageSelector);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "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": []
+  "sourcesContent": ["import { describe } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { usePerPageSelector } from './config/usePerPageSelector.js';\nimport { DSPerPageSelectorName } from './constants/index.js';\nimport { DSPerPageSelectorContext, type DSPerPageSelectorCTX } from './DSPerPageSelectorCTX.js';\nimport { Panel } from './parts/Panel.js';\nimport { Trigger } from './parts/Trigger.js';\nimport { DSPerPageSelectorPropTypesSchema, type DSPerPageSelectorT } 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 page sizes (virtualized with DSFastList). It replaced a DSDropdownMenuV2 based implementation keeping its\n * public contract; same widget as DSPaginator (accepted deviations: KNOWN_INTENTIONAL_DEVIATIONS.md, package root).\n */\nconst DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props> = (props) => {\n  const config = usePerPageSelector(props);\n  const ctx: DSPerPageSelectorCTX = React.useMemo(() => ({ ...config }), [config]);\n\n  return (\n    <DSPerPageSelectorContext.Provider value={ctx}>\n      <Trigger />\n      <Panel />\n    </DSPerPageSelectorContext.Provider>\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;ADmBnB;AAnBJ,8BAAyB;AACzB,mBAAkB;AAClB,gCAAmC;AACnC,uBAAsC;AACtC,kCAAoE;AACpE,mBAAsB;AACtB,qBAAwB;AACxB,mCAA0E;AAO1E,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,aAAS,8CAAmB,KAAK;AACvC,QAAM,MAA4B,aAAAA,QAAM,QAAQ,OAAO,EAAE,GAAG,OAAO,IAAI,CAAC,MAAM,CAAC;AAE/E,SACE,6CAAC,qDAAyB,UAAzB,EAAkC,OAAO,KACxC;AAAA,gDAAC,0BAAQ;AAAA,IACT,4CAAC,sBAAM;AAAA,KACT;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "names": ["React"]
 }

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

@@ -0,0 +1,38 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSPerPageSelectorCTX_exports = {};
+__export(DSPerPageSelectorCTX_exports, {
+  DSPerPageSelectorContext: () => DSPerPageSelectorContext
+});
+module.exports = __toCommonJS(DSPerPageSelectorCTX_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const defaultContext = {};
+const DSPerPageSelectorContext = (0, import_react.createContext)(defaultContext);
+//# sourceMappingURL=DSPerPageSelectorCTX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPerPageSelector/DSPerPageSelectorCTX.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { usePerPageSelector } from './config/usePerPageSelector.js';\n\nexport interface DSPerPageSelectorCTX extends ReturnType<typeof usePerPageSelector> {}\n\nconst defaultContext = {} as DSPerPageSelectorCTX;\n\n/** Single source of truth for the parts of DSPerPageSelector: props, owner props, floating context, focus tracker. */\nexport const DSPerPageSelectorContext = createContext<DSPerPageSelectorCTX>(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAK9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,+BAA2B,4BAAoC,cAAc;",
+  "names": []
+}

package/dist/cjs/parts/DSPerPageSelector/config/getInstanceIds.js

@@ -0,0 +1,40 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getInstanceIds_exports = {};
+__export(getInstanceIds_exports, {
+  getDialogId: () => getDialogId,
+  getHeaderId: () => getHeaderId,
+  getListId: () => getListId
+});
+module.exports = __toCommonJS(getInstanceIds_exports);
+var React = __toESM(require("react"));
+const getHeaderId = (instanceUid) => `ds-per-page-selector-header-${instanceUid}`;
+const getListId = (instanceUid) => `ds-per-page-selector-list-${instanceUid}`;
+const getDialogId = (instanceUid) => `ds-per-page-selector-dialog-${instanceUid}`;
+//# sourceMappingURL=getInstanceIds.js.map

package/dist/cjs/parts/DSPerPageSelector/config/getInstanceIds.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/getInstanceIds.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["// one place composes the ids so the parts and the aria relationships cannot drift apart\nexport const getHeaderId = (instanceUid: string) => `ds-per-page-selector-header-${instanceUid}`;\nexport const getListId = (instanceUid: string) => `ds-per-page-selector-list-${instanceUid}`;\nexport const getDialogId = (instanceUid: string) => `ds-per-page-selector-dialog-${instanceUid}`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADChB,MAAM,cAAc,CAAC,gBAAwB,+BAA+B,WAAW;AACvF,MAAM,YAAY,CAAC,gBAAwB,6BAA6B,WAAW;AACnF,MAAM,cAAc,CAAC,gBAAwB,+BAA+B,WAAW;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPerPageSelector/config/getOptions.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { range } from 'lodash-es';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport const generateOption = (\n  value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\n  if (typeof value === 'object') {\n    return value;\n  }\n  return {\n    dsId: value.toString(),\n    value,\n    label: value.toString(),\n    type: 'single',\n  } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n  const options = range(min, max + step, step).map(generateOption);\n  return min === 0 ? options.slice(1, options.length) : options;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAsB;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,cAAU,wBAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
+  "sourcesContent": ["import { range } from 'lodash-es';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\nexport const generateOption = (value: number | DSPerPageSelectorT.PerPageOption): DSPerPageSelectorT.PerPageOption => {\n  if (typeof value === 'object') {\n    return value;\n  }\n  return {\n    dsId: value.toString(),\n    value,\n    label: value.toString(),\n    type: 'single',\n  } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n  const options = range(min, max + step, step).map(generateOption);\n  return min === 0 ? options.slice(1, options.length) : options;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAsB;AAGf,MAAM,iBAAiB,CAAC,UAAuF;AACpH,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,cAAU,wBAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
   "names": []
 }

package/dist/cjs/parts/DSPerPageSelector/config/getSelectedOptionIndex.js

@@ -0,0 +1,36 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getSelectedOptionIndex_exports = {};
+__export(getSelectedOptionIndex_exports, {
+  getSelectedOptionIndex: () => getSelectedOptionIndex
+});
+module.exports = __toCommonJS(getSelectedOptionIndex_exports);
+var React = __toESM(require("react"));
+const getSelectedOptionIndex = (options, pageSize) => options.findIndex((option) => option.dsId === pageSize.toString());
+//# sourceMappingURL=getSelectedOptionIndex.js.map

package/dist/cjs/parts/DSPerPageSelector/config/getSelectedOptionIndex.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/getSelectedOptionIndex.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\n// the selected option is the one whose `dsId` is the current page size, as in the previous implementation: `value`s are not\n// guaranteed to be unique, `dsId`s are, so it is the one identity the component can control. A consequence kept on purpose: an\n// option like { dsId: 'all', value: 1000 } is not shown as selected when the page size is 1000\nexport const getSelectedOptionIndex = (options: DSPerPageSelectorT.PerPageOption[], pageSize: number) =>\n  options.findIndex((option) => option.dsId === pageSize.toString());\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKhB,MAAM,yBAAyB,CAAC,SAA6C,aAClF,QAAQ,UAAU,CAAC,WAAW,OAAO,SAAS,SAAS,SAAS,CAAC;",
+  "names": []
+}