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

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

@@ -1,9 +1,16 @@
 import * as React from "react";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
-import Grid from "@elliemae/ds-grid";
+import { FloatingWrapper } from "@elliemae/ds-floating-context";
+import { DSFastList } from "@elliemae/ds-fast-list";
+import { Grid } from "@elliemae/ds-grid";
 import { css, styled } from "@elliemae/ds-system";
-import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
+import {
+  DSPaginationName,
+  PAGINATOR_HEADER_HEIGHT,
+  PAGINATOR_OPTION_HEIGHT,
+  PAGINATOR_PANEL_PADDING_BOTTOM,
+  PAGINATOR_SLOTS
+} from "./constants/index.js";
 const fontSize13Base13 = 13 / 13;
 const fontSize13Base16 = 13 / 16;
 const fontSize18Base13 = 18 / 13;
@@ -24,14 +31,11 @@ const styledFocusCss = css`
     z-index: 7;
   }
 `;
-const InvisibleDiv = styled.div`
-  opacity: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: absolute;
-`;
-const paginationDropdownButtonCommonStyles = css`
+const StyledTrigger = styled(DSButtonV3, {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.PAGINATOR,
+  preserveLegacyDataTestId: true
+})`
   min-height: 42px;
   display: grid;
   grid-auto-flow: column;
@@ -42,7 +46,9 @@ const paginationDropdownButtonCommonStyles = 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};
@@ -53,25 +59,15 @@ const paginationDropdownButtonCommonStyles = css`
     cursor: not-allowed;
   }
   white-space: nowrap;
-`;
-const PaginationDropdownButtonPaginator = styled(DSButtonV3, {
-  name: DSPaginationName,
-  slot: PAGINATOR_SLOTS.PAGINATOR,
-  preserveLegacyDataTestId: true
-})`
-  ${paginationDropdownButtonCommonStyles}
-`;
-const StyledDropdown = styled(DSDropdownMenuV2)`
-  /**
- * Pagination uses DSTypography internally, but each typography variant defines
- * its own font-size. When these components are placed inside a styled() wrapper,
- * trying to style them via styled(DSTypography) triggers TypeScript errors
- * because DSTypography exposes  "as"  props and variant-specific overrides.
- *
- * Instead of wrapping DSTypography directly in styled(), we target the
- * underlying rendered elements via className/id. This avoids the TS conflicts
- * while still allowing us to override their font-size reliably.
- */
+
+  /* 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}) {
@@ -85,21 +81,106 @@ const StyledDropdown = styled(DSDropdownMenuV2)`
     }
   }
 `;
-const StyledHeader = styled(Grid)`
+const StyledTriggerWrapper = styled("div", {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.TRIGGER_WRAPPER
+})`
+  display: contents;
+`;
+const StyledPageInfo = styled("div", { name: DSPaginationName, slot: PAGINATOR_SLOTS.PAGE_INFO })`
+  display: flex;
+  gap: 4px;
+`;
+const StyledFloatingWrapper = styled(FloatingWrapper, {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.FLOATING_WRAPPER
+})``;
+const StyledPanel = styled("div", { name: DSPaginationName, slot: PAGINATOR_SLOTS.PANEL })`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  /* same as the previous DSDropdownMenuV2 wrapper: 4px of padding below the list */
+  padding-bottom: ${PAGINATOR_PANEL_PADDING_BOTTOM}px;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledHeader = styled(Grid, { name: DSPaginationName, slot: PAGINATOR_SLOTS.HEADER })`
+  align-items: center;
+  box-sizing: border-box;
+  min-height: ${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 = styled.div`
-  display: flex;
-  gap: 4px;
+const StyledListWrapper = styled("div", {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.LIST_WRAPPER
+})``;
+const StyledList = styled(DSFastList, { name: DSPaginationName, slot: PAGINATOR_SLOTS.LIST })``;
+const StyledOption = styled("div", { name: DSPaginationName, slot: PAGINATOR_SLOTS.OPTION })`
+  position: relative;
+  display: grid;
+  align-items: center;
+  column-gap: 8px;
+  min-height: ${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 = styled("span", {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.OPTION_CHECKMARK
+})`
+  display: grid;
+  place-items: center;
+`;
+const StyledOptionPage = styled("span", { name: DSPaginationName, slot: PAGINATOR_SLOTS.OPTION_PAGE })``;
+const StyledOptionDetail = styled("span", {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.OPTION_DETAIL
+})`
+  /* details wrap, they are never truncated (see stories/docs/principles/a11y/TextTruncationCriticalities.md) */
+  white-space: normal;
+  overflow-wrap: anywhere;
 `;
 export {
-  InvisibleDiv,
-  PaginationDropdownButtonPaginator,
-  StyledDropdown,
+  StyledFloatingWrapper,
   StyledHeader,
-  StyledPageInfo
+  StyledList,
+  StyledListWrapper,
+  StyledOption,
+  StyledOptionCheckmark,
+  StyledOptionDetail,
+  StyledOptionPage,
+  StyledPageInfo,
+  StyledPanel,
+  StyledTrigger,
+  StyledTriggerWrapper
 };
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,wBAAwB;AACjC,OAAO,UAAU;AACjB,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,uBAAuB;AAElD,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,oCAAoC,OAAO,YAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAGjC,MAAM,iBAAiB,OAAO,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYpC,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAAA,iBAIlB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAI5B,MAAM,eAAe,OAAO,IAAI;AAAA,eACxB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAI1B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -3,7 +3,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/esm/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,YAAY,WAAW;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,YAAY,WAAW;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/esm/parts/DSPaginator/typescript-testing/typescript-testing.js

@@ -2,7 +2,8 @@ import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DSPaginator } from "../index.js";
 const testRequiredProps = {};
-const testOptionalProps = {};
+const testOptionalProps = { listWidth: 320 };
+const testOptionalPropsCssLength = { listWidth: "24rem" };
 const testPartialDefaults = {
   pageCount: 0,
   isLoadingPageCount: false,

package/dist/esm/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,YAAY,WAAW;ACuFrB,mBAEE,KAFF;AAtFF,SAAS,mBAAmB;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,iCAEE;AAAA,sBAAC,eAAa,GAAG,wBAAwB;AAAA,EACzC,oBAAC,eAAa,GAAG,8BAA8B;AAAA,EAC/C,oBAAC,eAAa,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,YAAY,WAAW;ACwFrB,mBAEE,KAFF;AAvFF,SAAS,mBAAmB;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,iCAEE;AAAA,sBAAC,eAAa,GAAG,wBAAwB;AAAA,EACzC,oBAAC,eAAa,GAAG,8BAA8B;AAAA,EAC/C,oBAAC,eAAa,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/esm/parts/DSPerPageSelector/DSPerPageSelector.js

@@ -1,89 +1,20 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
-import { ChevronDown } from "@elliemae/ds-icons";
 import { describe } from "@elliemae/ds-props-helpers";
-import { DSTypography } from "@elliemae/ds-typography";
-import { useMemo } from "react";
+import React2 from "react";
 import { usePerPageSelector } from "./config/usePerPageSelector.js";
-import { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from "./constants/index.js";
+import { DSPerPageSelectorName } from "./constants/index.js";
+import { DSPerPageSelectorContext } from "./DSPerPageSelectorCTX.js";
+import { Panel } from "./parts/Panel.js";
+import { Trigger } from "./parts/Trigger.js";
 import { DSPerPageSelectorPropTypesSchema } from "./react-desc-prop-types.js";
-import { PaginationDropdownButtonPerPageSelector, StyledHeader } from "./styled.js";
-const Header = () => /* @__PURE__ */ jsx(StyledHeader, { children: "Per Page" });
 const DSPerPageSelector = (props) => {
-  const {
-    propsWithDefault: { pageSize, onPageSizeChange },
-    xstyledProps,
-    globalAttributes,
-    ownerPropsConfig,
-    actionRef,
-    btnRef,
-    chevronRef,
-    chevronWidth,
-    isOpened,
-    options,
-    setIsOpened
-  } = usePerPageSelector(props);
-  const buttonOnClick = useMemo(() => {
-    if (globalAttributes.onClick) return globalAttributes.onClick;
-    return () => setIsOpened((prev) => !prev);
-  }, [globalAttributes.onClick, setIsOpened]);
-  const maxOptionsLength = useMemo(() => {
-    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
-    return maxLength;
-  }, [options]);
-  return /* @__PURE__ */ jsx(
-    DSDropdownMenuV2,
-    {
-      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__ */ jsxs(
-        PaginationDropdownButtonPerPageSelector,
-        {
-          buttonType: "raw",
-          innerRef: btnRef,
-          "aria-pressed": isOpened,
-          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
-          "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
-          ...globalAttributes,
-          ...xstyledProps,
-          ...ownerPropsConfig,
-          onClick: buttonOnClick,
-          children: [
-            /* @__PURE__ */ jsxs(
-              DSTypography,
-              {
-                variant: "b1",
-                as: "span",
-                className: "typography-per-page-selector",
-                children: [
-                  pageSize,
-                  " / page"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
-          ]
-        }
-      )
-    }
-  );
+  const config = usePerPageSelector(props);
+  const ctx = React2.useMemo(() => ({ ...config }), [config]);
+  return /* @__PURE__ */ jsxs(DSPerPageSelectorContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx(Trigger, {}),
+    /* @__PURE__ */ jsx(Panel, {})
+  ] });
 };
 DSPerPageSelector.displayName = DSPerPageSelectorName;
 const DSPerPageSelectorWithSchema = describe(DSPerPageSelector);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useMemo } from 'react';\nimport { usePerPageSelector } from './config/usePerPageSelector.js';\nimport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from './constants/index.js';\nimport { DSPerPageSelectorPropTypesSchema, type DSPerPageSelectorT } from './react-desc-prop-types.js';\nimport { PaginationDropdownButtonPerPageSelector, StyledHeader } from './styled.js';\n\nconst Header = () => <StyledHeader>Per Page</StyledHeader>;\n\nconst DSPerPageSelector: React.ComponentType<DSPerPageSelectorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageSize, onPageSizeChange },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    actionRef,\n    btnRef,\n    chevronRef,\n    chevronWidth,\n    isOpened,\n    options,\n    setIsOpened,\n  } = usePerPageSelector(props);\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  const maxOptionsLength = useMemo(() => {\n    const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n    return maxLength;\n  }, [options]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-(chevronWidth + 7), 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      /**\n       * Calculate the dynamic minWidth for the Dropdown:\n       *\n       * Structure of the width:\n       *   16px (left padding)\n       *   + chevronWidth (size of the chevron icon)\n       *   + 8px (spacing between chevron and text)\n       *   + maxOptionsLength ch (longest option label measured in characters)\n       *   + 16px (right padding)\n       *   + a small scrollbar placeholder (to avoid text wrapping when scrollbars appear)\n       *\n       * Why `calc()`?\n       * - When using pure px values, the initial render works correctly.\n       * - But when switching between different stories in Storybook \u2014 especially those\n       *   that modify font-size or typography scale \u2014 the measured width from the ref\n       *   becomes outdated and ends up returning a smaller value than it should.\n       * - That incorrect (underestimated) width causes the longest option label to wrap,\n       *   even though there is actually enough space.\n       *\n       * By using `calc()` + `ch` units, the component stays responsive to font-size changes\n       * without requiring an extra ref to measure the page size text width.\n       */\n      minWidth={`calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButtonPerPageSelector\n        buttonType=\"raw\"\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`${pageSize} rows per page. Press to select rows per page`}\n        data-testid={PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={buttonOnClick}\n      >\n        <DSTypography\n          variant=\"b1\"\n          as=\"span\"\n          /**\n           * Pagination uses DSTypography internally, but each typography variant defines\n           * its own font-size. When these components are placed inside a styled() wrapper,\n           * trying to style them via styled(DSTypography) triggers TypeScript errors\n           * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n           *\n           * Instead of wrapping DSTypography directly in styled(), we target the\n           * underlying rendered elements via className/id. This avoids the TS conflicts\n           * while still allowing us to override their font-size reliably.\n           */\n          className=\"typography-per-page-selector\"\n        >\n          {pageSize} / page\n        </DSTypography>\n\n        <ChevronDown color={['brand-primary', '700']} innerRef={chevronRef} />\n      </PaginationDropdownButtonPerPageSelector>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.displayName = DSPerPageSelectorName;\nconst DSPerPageSelectorWithSchema = describe(DSPerPageSelector);\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWF,cAgFb,YAhFa;AAVrB,SAAS,wBAA8C;AACvD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAgB,eAAe;AAC/B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,qCAAqC;AACrE,SAAS,wCAAiE;AAC1E,SAAS,yCAAyC,oBAAoB;AAEtE,MAAM,SAAS,MAAM,oBAAC,gBAAa,sBAAQ;AAE3C,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,iBAAiB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,KAAK;AAC5B,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,CAAC,GAAG,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,EAAE,eAAe,IAAI,CAAC;AAAA,MACrC,0BAAyB;AAAA,MACzB;AAAA,MAuBA,UAAU,QAAQ,eAAe,EAAE,QAAQ,gBAAgB;AAAA,MAC3D,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG,QAAQ;AAAA,UACvB,eAAa,8BAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAET;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,IAAG;AAAA,gBAWH,WAAU;AAAA,gBAET;AAAA;AAAA,kBAAS;AAAA;AAAA;AAAA,YACZ;AAAA,YAEA,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,MACtE;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBnB,SACE,KADF;AAnBJ,SAAS,gBAAgB;AACzB,OAAOA,YAAW;AAClB,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,gCAA2D;AACpE,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,wCAAiE;AAO1E,MAAM,oBAAmE,CAAC,UAAU;AAClF,QAAM,SAAS,mBAAmB,KAAK;AACvC,QAAM,MAA4BA,OAAM,QAAQ,OAAO,EAAE,GAAG,OAAO,IAAI,CAAC,MAAM,CAAC;AAE/E,SACE,qBAAC,yBAAyB,UAAzB,EAAkC,OAAO,KACxC;AAAA,wBAAC,WAAQ;AAAA,IACT,oBAAC,SAAM;AAAA,KACT;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "names": ["React"]
 }

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const DSPerPageSelectorContext = createContext(defaultContext);
+export {
+  DSPerPageSelectorContext
+};
+//# sourceMappingURL=DSPerPageSelectorCTX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/DSPerPageSelectorCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAK9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,2BAA2B,cAAoC,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import * as React from "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}`;
+export {
+  getDialogId,
+  getHeaderId,
+  getListId
+};
+//# sourceMappingURL=getInstanceIds.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/getInstanceIds.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACChB,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/esm/parts/DSPerPageSelector/config/getOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/getOptions.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;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,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;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,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
   "names": []
 }

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+const getSelectedOptionIndex = (options, pageSize) => options.findIndex((option) => option.dsId === pageSize.toString());
+export {
+  getSelectedOptionIndex
+};
+//# sourceMappingURL=getSelectedOptionIndex.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/getSelectedOptionIndex.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACKhB,MAAM,yBAAyB,CAAC,SAA6C,aAClF,QAAQ,UAAU,CAAC,WAAW,OAAO,SAAS,SAAS,SAAS,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { PER_PAGE_SELECTOR_PAGE_JUMP } from "../constants/index.js";
+const NAVIGATION_KEYS = {
+  ArrowDown: (currentIndex) => currentIndex + 1,
+  ArrowUp: (currentIndex) => currentIndex - 1,
+  PageDown: (currentIndex) => currentIndex + PER_PAGE_SELECTOR_PAGE_JUMP,
+  PageUp: (currentIndex) => currentIndex - PER_PAGE_SELECTOR_PAGE_JUMP,
+  Home: () => 0,
+  End: (_currentIndex, amountOfOptions) => amountOfOptions - 1
+};
+export {
+  NAVIGATION_KEYS
+};
+//# sourceMappingURL=navigationKeys.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/navigationKeys.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PER_PAGE_SELECTOR_PAGE_JUMP } from '../constants/index.js';\n\ntype GetTargetIndex = (currentIndex: number, amountOfOptions: number) => number;\n\n// the keys that only MOVE the focus through the options (APG listbox / select-only combobox navigation)\nexport const NAVIGATION_KEYS: Record<string, GetTargetIndex> = {\n  ArrowDown: (currentIndex) => currentIndex + 1,\n  ArrowUp: (currentIndex) => currentIndex - 1,\n  PageDown: (currentIndex) => currentIndex + PER_PAGE_SELECTOR_PAGE_JUMP,\n  PageUp: (currentIndex) => currentIndex - PER_PAGE_SELECTOR_PAGE_JUMP,\n  Home: () => 0,\n  End: (_currentIndex, amountOfOptions) => amountOfOptions - 1,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mCAAmC;AAKrC,MAAM,kBAAkD;AAAA,EAC7D,WAAW,CAAC,iBAAiB,eAAe;AAAA,EAC5C,SAAS,CAAC,iBAAiB,eAAe;AAAA,EAC1C,UAAU,CAAC,iBAAiB,eAAe;AAAA,EAC3C,QAAQ,CAAC,iBAAiB,eAAe;AAAA,EACzC,MAAM,MAAM;AAAA,EACZ,KAAK,CAAC,eAAe,oBAAoB,kBAAkB;AAC7D;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { PER_PAGE_SELECTOR_REGION_FOCUSES } from "../constants/index.js";
+import { getSelectedOptionIndex } from "./getSelectedOptionIndex.js";
+const getOptionRegionId = (dsId) => `${PER_PAGE_SELECTOR_REGION_FOCUSES.OPTION_PREFIX}${dsId}`;
+const useFocusTracker = ({ options, pageSize }) => {
+  const [focusRegion, setFocusRegion] = useState(PER_PAGE_SELECTOR_REGION_FOCUSES.RESET);
+  const focusedIndex = useMemo(
+    () => options.findIndex((option) => getOptionRegionId(option.dsId) === focusRegion),
+    [focusRegion, options]
+  );
+  const clampIndex = useCallback((index) => Math.min(Math.max(index, 0), options.length - 1), [options.length]);
+  const trackFocusRegionReset = useCallback(() => setFocusRegion(PER_PAGE_SELECTOR_REGION_FOCUSES.RESET), []);
+  const trackFocusTrigger = useCallback(() => setFocusRegion(PER_PAGE_SELECTOR_REGION_FOCUSES.TRIGGER), []);
+  const trackFocusOptionAtIndex = useCallback(
+    (index) => {
+      if (options.length > 0) setFocusRegion(getOptionRegionId(options[clampIndex(index)].dsId));
+    },
+    [clampIndex, options]
+  );
+  const trackFocusOption = useCallback((dsId) => setFocusRegion(getOptionRegionId(dsId)), []);
+  const trackFocusSelectedOption = useCallback(
+    () => trackFocusOptionAtIndex(Math.max(getSelectedOptionIndex(options, pageSize), 0)),
+    [options, pageSize, trackFocusOptionAtIndex]
+  );
+  return useMemo(
+    () => ({
+      focusRegion,
+      focusedIndex,
+      clampIndex,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusOption,
+      trackFocusOptionAtIndex,
+      trackFocusSelectedOption
+    }),
+    [
+      focusRegion,
+      focusedIndex,
+      clampIndex,
+      trackFocusRegionReset,
+      trackFocusTrigger,
+      trackFocusOption,
+      trackFocusOptionAtIndex,
+      trackFocusSelectedOption
+    ]
+  );
+};
+export {
+  getOptionRegionId,
+  useFocusTracker
+};
+//# sourceMappingURL=useFocusTracker.js.map