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

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { useOnElementResize } from "../../shared/useOnElementOnResize.js";
+import {
+  PAGINATOR_DEFAULT_LIST_WIDTH,
+  PAGINATOR_HEADER_HEIGHT,
+  PAGINATOR_PANEL_MAX_HEIGHT,
+  PAGINATOR_PANEL_PADDING_BOTTOM,
+  PAGINATOR_VIEWPORT_MARGIN
+} from "../constants/index.js";
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const usePaginatorSizing = ({
+  pageCount,
+  pageIndex,
+  pageDetails,
+  listWidth,
+  chevronRef,
+  pageInfoRef,
+  listActionRef
+}) => {
+  const { width: chevronWidth } = useOnElementResize(chevronRef);
+  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);
+  const hasDetails = pageDetails.length !== 0;
+  const configuredWidth = useMemo(() => {
+    if (listWidth !== void 0) return toCssLength(listWidth);
+    return hasDetails ? `${PAGINATOR_DEFAULT_LIST_WIDTH}px` : void 0;
+  }, [hasDetails, listWidth]);
+  const cappedWidth = configuredWidth ? `min(${configuredWidth}, calc(100vw - ${PAGINATOR_VIEWPORT_MARGIN}px))` : void 0;
+  const panelStyle = useMemo(
+    () => cappedWidth ? { width: cappedWidth } : { minWidth: `calc(${chevronWidth + 60}px + ${pageCount.toString().length}ch)` },
+    [cappedWidth, chevronWidth, pageCount]
+  );
+  const listMaxHeight = PAGINATOR_PANEL_MAX_HEIGHT - PAGINATOR_HEADER_HEIGHT - PAGINATOR_PANEL_PADDING_BOTTOM;
+  const handleListWrapperRef = useCallback(
+    (node) => {
+      if (node) listActionRef.current.scrollTo?.(pageIndex - 1, { align: "center" });
+    },
+    [listActionRef, pageIndex]
+  );
+  return useMemo(
+    () => ({
+      hasDetails,
+      chevronWidth,
+      pageInfoWidth,
+      panelStyle,
+      detailMaxWidth: cappedWidth,
+      listMaxHeight,
+      handleListWrapperRef
+    }),
+    [hasDetails, chevronWidth, pageInfoWidth, panelStyle, cappedWidth, listMaxHeight, handleListWrapperRef]
+  );
+};
+export {
+  usePaginatorSizing
+};
+//# sourceMappingURL=usePaginatorSizing.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/usePaginatorSizing.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSFastListT } from '@elliemae/ds-fast-list';\nimport type React from 'react';\nimport { useCallback, useMemo } from 'react';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\nimport {\n  PAGINATOR_DEFAULT_LIST_WIDTH,\n  PAGINATOR_HEADER_HEIGHT,\n  PAGINATOR_PANEL_MAX_HEIGHT,\n  PAGINATOR_PANEL_PADDING_BOTTOM,\n  PAGINATOR_VIEWPORT_MARGIN,\n} from '../constants/index.js';\n\ntype SizingConfigT = {\n  pageCount: number | string;\n  pageIndex: number;\n  pageDetails: string[] | readonly string[];\n  listWidth?: number | string;\n  chevronRef: React.RefObject<HTMLElement>;\n  pageInfoRef: React.RefObject<HTMLDivElement>;\n  listActionRef: React.MutableRefObject<DSFastListT.ActionRef>;\n};\n\nconst toCssLength = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n\n/**\n * Everything about sizes. The rows of the list are virtualized (out of flow), so nothing inside the list can make the panel\n * grow: its width is an explicit policy, not something derived from its content.\n *  - with `pageDetails` (or when the consumer passes `listWidth`) the list is `listWidth` wide (280px by default), never wider\n *    than the viewport, and the details WRAP inside it. Nothing here renders or measures every detail: that would be O(n) hidden\n *    components just to size the list to the widest detail, and it forced a one-line (truncating) design.\n *  - without details the list is as wide as its page numbers need (the previous formula: chevron + 60px + the digits of the\n *    page count in `ch`), plain CSS.\n * The trigger does not reserve the width of the widest detail either: it follows the detail of the current page.\n */\nexport const usePaginatorSizing = ({\n  pageCount,\n  pageIndex,\n  pageDetails,\n  listWidth,\n  chevronRef,\n  pageInfoRef,\n  listActionRef,\n}: SizingConfigT) => {\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n  const { width: pageInfoWidth } = useOnElementResize(pageInfoRef);\n  const hasDetails = pageDetails.length !== 0;\n\n  const configuredWidth = useMemo(() => {\n    if (listWidth !== undefined) return toCssLength(listWidth);\n    return hasDetails ? `${PAGINATOR_DEFAULT_LIST_WIDTH}px` : undefined;\n  }, [hasDetails, listWidth]);\n  const cappedWidth = configuredWidth\n    ? `min(${configuredWidth}, calc(100vw - ${PAGINATOR_VIEWPORT_MARGIN}px))`\n    : undefined;\n  const panelStyle = useMemo(\n    () =>\n      cappedWidth\n        ? { width: cappedWidth }\n        : { minWidth: `calc(${chevronWidth + 60}px + ${pageCount.toString().length}ch)` },\n    [cappedWidth, chevronWidth, pageCount],\n  );\n  // the tallest the scrolling list gets: the rows can wrap, so the list is as tall as its rows up to this maximum\n  const listMaxHeight = PAGINATOR_PANEL_MAX_HEIGHT - PAGINATOR_HEADER_HEIGHT - PAGINATOR_PANEL_PADDING_BOTTOM;\n\n  /*\n   * The virtual list mounts at scroll offset 0, but the selected page (where the focus must land on open) can be\n   * anywhere, and the virtualizer resets its scroll element to its initial offset when it binds to it (measured: a\n   * `scrollTop` set when the container mounts is overwritten with 0). So the list is told to scroll once it is bound:\n   * React attaches the ref callbacks child first, so this one, on the element that wraps the list, runs after the list's\n   * own layout effects (no effect, no timer). The selected option then mounts in range and focuses itself (focus tracker).\n   * The callback changes only when `pageIndex` changes, which closes the list.\n   */\n  const handleListWrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node) listActionRef.current.scrollTo?.(pageIndex - 1, { align: 'center' });\n    },\n    [listActionRef, pageIndex],\n  );\n\n  return useMemo(\n    () => ({\n      hasDetails,\n      chevronWidth,\n      pageInfoWidth,\n      panelStyle,\n      detailMaxWidth: cappedWidth,\n      listMaxHeight,\n      handleListWrapperRef,\n    }),\n    [hasDetails, chevronWidth, pageInfoWidth, panelStyle, cappedWidth, listMaxHeight, handleListWrapperRef],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,aAAa,eAAe;AACrC,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYP,MAAM,cAAc,CAAC,UAA4B,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAYrF,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,UAAU;AAC7D,QAAM,EAAE,OAAO,cAAc,IAAI,mBAAmB,WAAW;AAC/D,QAAM,aAAa,YAAY,WAAW;AAE1C,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO,YAAY,SAAS;AACzD,WAAO,aAAa,GAAG,4BAA4B,OAAO;AAAA,EAC5D,GAAG,CAAC,YAAY,SAAS,CAAC;AAC1B,QAAM,cAAc,kBAChB,OAAO,eAAe,kBAAkB,yBAAyB,SACjE;AACJ,QAAM,aAAa;AAAA,IACjB,MACE,cACI,EAAE,OAAO,YAAY,IACrB,EAAE,UAAU,QAAQ,eAAe,EAAE,QAAQ,UAAU,SAAS,EAAE,MAAM,MAAM;AAAA,IACpF,CAAC,aAAa,cAAc,SAAS;AAAA,EACvC;AAEA,QAAM,gBAAgB,6BAA6B,0BAA0B;AAU7E,QAAM,uBAAuB;AAAA,IAC3B,CAAC,SAAgC;AAC/B,UAAI,KAAM,eAAc,QAAQ,WAAW,YAAY,GAAG,EAAE,OAAO,SAAS,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,eAAe,SAAS;AAAA,EAC3B;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,cAAc,eAAe,YAAY,aAAa,eAAe,oBAAoB;AAAA,EACxG;AACF;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/useValidateProps.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPaginatorT } from '../react-desc-prop-types.js';\nimport { DSPaginatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginatorT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginatorName);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPaginatorT } from '../react-desc-prop-types.js';\nimport { DSPaginatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginatorT.Props>,\n): void => {\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginatorName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AACT,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
   "names": []
 }

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

@@ -3,13 +3,59 @@ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 import { DSPaginationName } from "../../../constants/index.js";
 const DSPaginatorName = "DSPaginator";
 const PAGINATOR_SLOTS = {
-  PAGINATOR: "paginator"
+  PAGINATOR: "paginator",
+  // legacy ones...
+  TRIGGER_WRAPPER: "paginator-trigger-wrapper",
+  PAGE_INFO: "paginator-page-info",
+  FLOATING_WRAPPER: "paginator-floating-wrapper",
+  PANEL: "paginator-panel",
+  HEADER: "paginator-header",
+  LIST_WRAPPER: "paginator-list-wrapper",
+  LIST: "paginator-list",
+  OPTION: "paginator-option",
+  OPTION_CHECKMARK: "paginator-option-checkmark",
+  OPTION_PAGE: "paginator-option-page",
+  OPTION_DETAIL: "paginator-option-detail"
 };
-const PAGINATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS);
+const PAGINATOR_DATA_TESTID = {
+  ...slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS),
+  // legacy values of the DSDropdownMenuV2 the paginator used to render: the paginator is now its own widget but QA and
+  //   consumers select on these, so they stay on the equivalent element — breaking change if removed
+  TRIGGER_WRAPPER: "dropdown-menu-trigger-wrapper",
+  // wraps the trigger
+  PANEL: "dropdown-menu-wrapper",
+  // wraps the header and the list (it used to be the focus holder of the open menu)
+  HEADER: "ds-dropdownmenu-header-wrapper",
+  LIST: "dropdown-menu-listbox",
+  OPTION: "ds-menu-item"
+  // one per page
+};
+const PAGINATOR_REGION_FOCUSES = {
+  RESET: "",
+  TRIGGER: "trigger",
+  OPTION_PREFIX: "option-"
+};
+const PAGINATOR_OPTION_HEIGHT = 32;
+const PAGINATOR_PANEL_MAX_HEIGHT = 300;
+const PAGINATOR_HEADER_HEIGHT = 17;
+const PAGINATOR_PANEL_PADDING_BOTTOM = 4;
+const PAGINATOR_DEFAULT_LIST_WIDTH = 280;
+const PAGINATOR_VIEWPORT_MARGIN = 16;
+const PAGINATOR_PAGE_JUMP = 10;
+const PAGINATOR_TYPEAHEAD_RESET_MS = 1e3;
 export {
   DSPaginationName,
   DSPaginatorName,
   PAGINATOR_DATA_TESTID,
-  PAGINATOR_SLOTS
+  PAGINATOR_DEFAULT_LIST_WIDTH,
+  PAGINATOR_HEADER_HEIGHT,
+  PAGINATOR_OPTION_HEIGHT,
+  PAGINATOR_PAGE_JUMP,
+  PAGINATOR_PANEL_MAX_HEIGHT,
+  PAGINATOR_PANEL_PADDING_BOTTOM,
+  PAGINATOR_REGION_FOCUSES,
+  PAGINATOR_SLOTS,
+  PAGINATOR_TYPEAHEAD_RESET_MS,
+  PAGINATOR_VIEWPORT_MARGIN
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\nexport const DSPaginatorName = 'DSPaginator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATOR_SLOTS = {\n  PAGINATOR: 'paginator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AAGO,MAAM,wBAAwB,wBAAwB,kBAAkB,eAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\nexport const DSPaginatorName = 'DSPaginator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\n// the slots are owned by DSPagination (DSPaginationName): `paginator` is the legacy one (the trigger), the rest are new\nexport const PAGINATOR_SLOTS = {\n  PAGINATOR: 'paginator', // legacy ones...\n  TRIGGER_WRAPPER: 'paginator-trigger-wrapper',\n  PAGE_INFO: 'paginator-page-info',\n  FLOATING_WRAPPER: 'paginator-floating-wrapper',\n  PANEL: 'paginator-panel',\n  HEADER: 'paginator-header',\n  LIST_WRAPPER: 'paginator-list-wrapper',\n  LIST: 'paginator-list',\n  OPTION: 'paginator-option',\n  OPTION_CHECKMARK: 'paginator-option-checkmark',\n  OPTION_PAGE: 'paginator-option-page',\n  OPTION_DETAIL: 'paginator-option-detail',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATOR_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS),\n  // legacy values of the DSDropdownMenuV2 the paginator used to render: the paginator is now its own widget but QA and\n  //   consumers select on these, so they stay on the equivalent element \u2014 breaking change if removed\n  TRIGGER_WRAPPER: 'dropdown-menu-trigger-wrapper', // wraps the trigger\n  PANEL: 'dropdown-menu-wrapper', // wraps the header and the list (it used to be the focus holder of the open menu)\n  HEADER: 'ds-dropdownmenu-header-wrapper',\n  LIST: 'dropdown-menu-listbox',\n  OPTION: 'ds-menu-item', // one per page\n};\n\n// we are naming this with the ${component_name}_region_focuses convention to namespace & avoid errors on duplicate exports variables in aggregators\n// semantic identities of the focus tracker: never positional, an option is identified by the page it represents\nexport const PAGINATOR_REGION_FOCUSES = {\n  RESET: '',\n  TRIGGER: 'trigger',\n  OPTION_PREFIX: 'option-',\n} as const;\n\n// the rows of the list are fixed height, the virtual list estimate and the panel height are derived from it\nexport const PAGINATOR_OPTION_HEIGHT = 32;\n// the max height of the whole panel (header + list), same as the existing DSPaginator (measured: header ~17px)\nexport const PAGINATOR_PANEL_MAX_HEIGHT = 300;\nexport const PAGINATOR_HEADER_HEIGHT = 17;\n// the previous DSDropdownMenuV2 wrapper always kept 4px of padding below the list, inside the same max height\nexport const PAGINATOR_PANEL_PADDING_BOTTOM = 4;\n// the width of the open list when there are page details: details wrap inside it instead of the list growing to the widest\n// one (that would need every detail rendered and measured up front). Overridable with the `listWidth` prop.\nexport const PAGINATOR_DEFAULT_LIST_WIDTH = 280;\n// the list never gets wider than the viewport minus this margin (reflow at high zoom levels)\nexport const PAGINATOR_VIEWPORT_MARGIN = 16;\n// APG listbox / select-only combobox: PageUp / PageDown move 10 options\nexport const PAGINATOR_PAGE_JUMP = 10;\n// digits typed within this window build a single page number (same value as the existing DSPaginator search)\nexport const PAGINATOR_TYPEAHEAD_RESET_MS = 1000;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,kBAAkB;AAIxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA;AAAA,EACX,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,eAAe;AACjB;AAGO,MAAM,wBAAwB;AAAA,EACnC,GAAG,wBAAwB,kBAAkB,eAAe;AAAA;AAAA;AAAA,EAG5D,iBAAiB;AAAA;AAAA,EACjB,OAAO;AAAA;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA;AACV;AAIO,MAAM,2BAA2B;AAAA,EACtC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAGO,MAAM,0BAA0B;AAEhC,MAAM,6BAA6B;AACnC,MAAM,0BAA0B;AAEhC,MAAM,iCAAiC;AAGvC,MAAM,+BAA+B;AAErC,MAAM,4BAA4B;AAElC,MAAM,sBAAsB;AAE5B,MAAM,+BAA+B;",
   "names": []
 }

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkmark } from "@elliemae/ds-icons";
+import { useCallback, useContext } from "react";
+import { getOptionRegionId } from "../config/useFocusTracker.js";
+import { PAGINATOR_DATA_TESTID } from "../constants/index.js";
+import { DSPaginatorContext } from "../DSPaginatorCTX.js";
+import { StyledOption, StyledOptionCheckmark, StyledOptionDetail, StyledOptionPage } from "../styled.js";
+const OptionRenderer = ({ index }) => {
+  const {
+    propsWithDefault: { pageIndex, pageDetails },
+    ownerPropsConfig: { getOwnerProps },
+    amountOfPages,
+    hasDetails,
+    chevronWidth,
+    pageInfoWidth,
+    focusTrackers: { focusRegion, trackFocusOption },
+    commitPage
+  } = useContext(DSPaginatorContext);
+  const page = index + 1;
+  const isSelected = page === pageIndex;
+  const isFocusTarget = focusRegion === getOptionRegionId(page);
+  const handleRef = useCallback(
+    (node) => {
+      if (node && isFocusTarget) node.focus();
+    },
+    [isFocusTarget]
+  );
+  const handleFocus = useCallback(() => trackFocusOption(page), [page, trackFocusOption]);
+  const handleClick = useCallback(() => commitPage(page), [commitPage, page]);
+  const getOwnerPropsArguments = useCallback(() => ({ page, isSelected }), [page, isSelected]);
+  return /* @__PURE__ */ jsxs(
+    StyledOption,
+    {
+      "data-testid": PAGINATOR_DATA_TESTID.OPTION,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-setsize": amountOfPages,
+      "aria-posinset": page,
+      tabIndex: isFocusTarget ? 0 : -1,
+      innerRef: handleRef,
+      onFocus: handleFocus,
+      onClick: handleClick,
+      style: {
+        gridTemplateColumns: hasDetails ? `${chevronWidth}px ${pageInfoWidth + 16}px auto` : `${chevronWidth}px auto`
+      },
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledOptionCheckmark,
+          {
+            "aria-hidden": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isSelected ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : null
+          }
+        ),
+        /* @__PURE__ */ jsx(StyledOptionPage, { getOwnerProps, getOwnerPropsArguments, children: page }),
+        hasDetails ? /* @__PURE__ */ jsx(StyledOptionDetail, { getOwnerProps, getOwnerPropsArguments, children: pageDetails[index] }) : null
+      ]
+    }
+  );
+};
+export {
+  OptionRenderer
+};
+//# sourceMappingURL=OptionRenderer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/parts/OptionRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Checkmark } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { getOptionRegionId } from '../config/useFocusTracker.js';\nimport { PAGINATOR_DATA_TESTID } from '../constants/index.js';\nimport { DSPaginatorContext } from '../DSPaginatorCTX.js';\nimport { StyledOption, StyledOptionCheckmark, StyledOptionDetail, StyledOptionPage } from '../styled.js';\n\ntype OptionRendererPropsT = { index: number };\n\n/**\n * One page of the list. Rendered by the virtual list, so only the options near the viewport are mounted:\n * every position-dependent a11y fact (`aria-posinset`, `aria-setsize`) is explicit, and the focus lands on an option by\n * its page identity from the ref callback (see useFocusTracker), not by its place in the DOM.\n */\nexport const OptionRenderer = ({ index }: OptionRendererPropsT) => {\n  const {\n    propsWithDefault: { pageIndex, pageDetails },\n    ownerPropsConfig: { getOwnerProps },\n    amountOfPages,\n    hasDetails,\n    chevronWidth,\n    pageInfoWidth,\n    focusTrackers: { focusRegion, trackFocusOption },\n    commitPage,\n  } = useContext(DSPaginatorContext);\n\n  const page = index + 1;\n  const isSelected = page === pageIndex;\n  const isFocusTarget = focusRegion === getOptionRegionId(page);\n\n  const handleRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node && isFocusTarget) node.focus();\n    },\n    [isFocusTarget],\n  );\n  // the tracker follows the real focus, so a mouse or pointer interaction can't leave it pointing somewhere else\n  const handleFocus = useCallback(() => trackFocusOption(page), [page, trackFocusOption]);\n  const handleClick = useCallback(() => commitPage(page), [commitPage, page]);\n  const getOwnerPropsArguments = useCallback(() => ({ page, isSelected }), [page, isSelected]);\n\n  return (\n    <StyledOption\n      // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={PAGINATOR_DATA_TESTID.OPTION}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-setsize={amountOfPages}\n      aria-posinset={page}\n      // roving tabindex: the option that holds the focus is the single tab stop of the list\n      tabIndex={isFocusTarget ? 0 : -1}\n      innerRef={handleRef}\n      onFocus={handleFocus}\n      onClick={handleClick}\n      // same columns as the header: [checkmark] [page] [detail]\n      style={{\n        gridTemplateColumns: hasDetails ? `${chevronWidth}px ${pageInfoWidth + 16}px auto` : `${chevronWidth}px auto`,\n      }}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      {/* the selected state is conveyed by aria-selected, the icon is only visual */}\n      <StyledOptionCheckmark\n        aria-hidden=\"true\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {isSelected ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : null}\n      </StyledOptionCheckmark>\n      <StyledOptionPage getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {page}\n      </StyledOptionPage>\n      {hasDetails ? (\n        <StyledOptionDetail getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          {pageDetails[index]}\n        </StyledOptionDetail>\n      ) : null}\n    </StyledOption>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CnB,SAyBkB,KAzBlB;AA1CJ,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,cAAc,uBAAuB,oBAAoB,wBAAwB;AASnF,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAA4B;AACjE,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,YAAY;AAAA,IAC3C,kBAAkB,EAAE,cAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,aAAa,iBAAiB;AAAA,IAC/C;AAAA,EACF,IAAI,WAAW,kBAAkB;AAEjC,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,SAAS;AAC5B,QAAM,gBAAgB,gBAAgB,kBAAkB,IAAI;AAE5D,QAAM,YAAY;AAAA,IAChB,CAAC,SAAgC;AAC/B,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,cAAc,YAAY,MAAM,iBAAiB,IAAI,GAAG,CAAC,MAAM,gBAAgB,CAAC;AACtF,QAAM,cAAc,YAAY,MAAM,WAAW,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC;AAC1E,QAAM,yBAAyB,YAAY,OAAO,EAAE,MAAM,WAAW,IAAI,CAAC,MAAM,UAAU,CAAC;AAE3F,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,sBAAsB;AAAA,MACnC,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,gBAAc;AAAA,MACd,iBAAe;AAAA,MAEf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MAET,OAAO;AAAA,QACL,qBAAqB,aAAa,GAAG,YAAY,MAAM,gBAAgB,EAAE,YAAY,GAAG,YAAY;AAAA,MACtG;AAAA,MACA;AAAA,MACA;AAAA,MAGA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YAEC,uBAAa,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK;AAAA;AAAA,QAC1E;AAAA,QACA,oBAAC,oBAAiB,eAA8B,wBAC7C,gBACH;AAAA,QACC,aACC,oBAAC,sBAAmB,eAA8B,wBAC/C,sBAAY,KAAK,GACpB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { DSPaginationSeparator } from "../../DSPaginationSeparator/index.js";
+import { PAGINATOR_DATA_TESTID, PAGINATOR_OPTION_HEIGHT } from "../constants/index.js";
+import { DSPaginatorContext } from "../DSPaginatorCTX.js";
+import { StyledFloatingWrapper, StyledHeader, StyledList, StyledListWrapper, StyledPanel } from "../styled.js";
+import { OptionRenderer } from "./OptionRenderer.js";
+const getOptionId = (index) => index + 1;
+const getEstimatedSize = () => PAGINATOR_OPTION_HEIGHT;
+const Panel = () => {
+  const {
+    propsWithDefault: { pageDetailsTitle },
+    ownerPropsConfig,
+    isOpen,
+    amountOfPages,
+    hasDetails,
+    chevronWidth,
+    pageInfoWidth,
+    panelStyle,
+    listMaxHeight,
+    floatingStyles,
+    floatingContext,
+    floatingInnerRef,
+    listActionRef,
+    handleListWrapperRef,
+    handlePanelKeyDown,
+    handlePanelKeyDownCapture,
+    handleBlurOutOfWidget,
+    headerId,
+    listId,
+    dialogId
+  } = useContext(DSPaginatorContext);
+  const hasDetailsTitle = hasDetails && pageDetailsTitle !== "";
+  return /* @__PURE__ */ jsx(
+    StyledFloatingWrapper,
+    {
+      innerRef: floatingInnerRef,
+      isOpen,
+      floatingStyles,
+      context: floatingContext,
+      id: dialogId,
+      role: "dialog",
+      "aria-labelledby": headerId,
+      ...ownerPropsConfig,
+      children: /* @__PURE__ */ jsxs(
+        StyledPanel,
+        {
+          "data-testid": PAGINATOR_DATA_TESTID.PANEL,
+          style: panelStyle,
+          onKeyDownCapture: handlePanelKeyDownCapture,
+          onKeyDown: handlePanelKeyDown,
+          onBlur: handleBlurOutOfWidget,
+          ...ownerPropsConfig,
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledHeader,
+              {
+                id: headerId,
+                "data-testid": PAGINATOR_DATA_TESTID.HEADER,
+                cols: hasDetailsTitle ? [`${pageInfoWidth + chevronWidth + 34}px`, "8px", "auto"] : void 0,
+                ...ownerPropsConfig,
+                children: hasDetailsTitle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "Page" }),
+                  /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "100%", ...ownerPropsConfig }),
+                  /* @__PURE__ */ jsx("span", { children: pageDetailsTitle })
+                ] }) : /* @__PURE__ */ jsx("span", { children: "Page" })
+              }
+            ),
+            /* @__PURE__ */ jsx(StyledListWrapper, { innerRef: handleListWrapperRef, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(
+              StyledList,
+              {
+                dsFastlistWrapperList: {
+                  role: "listbox",
+                  id: listId,
+                  "aria-labelledby": headerId,
+                  // legacy data-testid — preserved for QA/consumer compatibility, breaking change if removed
+                  "data-testid": PAGINATOR_DATA_TESTID.LIST
+                },
+                dsFastlistItem: { role: "none" },
+                dsFastlistContainer: { style: { height: "auto", maxHeight: listMaxHeight } },
+                actionRef: listActionRef,
+                count: amountOfPages,
+                ItemRenderer: OptionRenderer,
+                getId: getOptionId,
+                estimateSize: getEstimatedSize,
+                remountOnCountChange: false,
+                ...ownerPropsConfig
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "DSPaginator.Panel";
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/parts/Panel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { DSPaginationSeparator } from '../../DSPaginationSeparator/index.js';\nimport { PAGINATOR_DATA_TESTID, PAGINATOR_OPTION_HEIGHT } from '../constants/index.js';\nimport { DSPaginatorContext } from '../DSPaginatorCTX.js';\nimport { StyledFloatingWrapper, StyledHeader, StyledList, StyledListWrapper, StyledPanel } from '../styled.js';\nimport { OptionRenderer } from './OptionRenderer.js';\n\n// stable references: the virtual list reads them on every render\nconst getOptionId = (index: number) => index + 1;\nconst getEstimatedSize = () => PAGINATOR_OPTION_HEIGHT;\n\nexport const Panel = () => {\n  const {\n    propsWithDefault: { pageDetailsTitle },\n    ownerPropsConfig,\n    isOpen,\n    amountOfPages,\n    hasDetails,\n    chevronWidth,\n    pageInfoWidth,\n    panelStyle,\n    listMaxHeight,\n    floatingStyles,\n    floatingContext,\n    floatingInnerRef,\n    listActionRef,\n    handleListWrapperRef,\n    handlePanelKeyDown,\n    handlePanelKeyDownCapture,\n    handleBlurOutOfWidget,\n    headerId,\n    listId,\n    dialogId,\n  } = useContext(DSPaginatorContext);\n\n  // same rule as the existing DSPaginator: the two column header only exists when there is a details title\n  const hasDetailsTitle = hasDetails && pageDetailsTitle !== '';\n\n  // the dialog (non-modal) and the list are named by the visible header, so what is announced is what is displayed\n  return (\n    <StyledFloatingWrapper\n      innerRef={floatingInnerRef}\n      isOpen={isOpen}\n      floatingStyles={floatingStyles}\n      context={floatingContext}\n      id={dialogId}\n      role=\"dialog\"\n      aria-labelledby={headerId}\n      {...ownerPropsConfig}\n    >\n      <StyledPanel\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={PAGINATOR_DATA_TESTID.PANEL}\n        style={panelStyle}\n        onKeyDownCapture={handlePanelKeyDownCapture}\n        onKeyDown={handlePanelKeyDown}\n        onBlur={handleBlurOutOfWidget}\n        {...ownerPropsConfig}\n      >\n        <StyledHeader\n          id={headerId}\n          // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n          data-testid={PAGINATOR_DATA_TESTID.HEADER}\n          cols={hasDetailsTitle ? [`${pageInfoWidth + chevronWidth + 34}px`, '8px', 'auto'] : undefined}\n          {...ownerPropsConfig}\n        >\n          {hasDetailsTitle ? (\n            <>\n              <span style={{ marginLeft: '8px' }}>Page</span>\n              <DSPaginationSeparator height=\"100%\" {...ownerPropsConfig} />\n              <span>{pageDetailsTitle}</span>\n            </>\n          ) : (\n            <span>Page</span>\n          )}\n        </StyledHeader>\n        <StyledListWrapper innerRef={handleListWrapperRef} {...ownerPropsConfig}>\n          <StyledList\n            dsFastlistWrapperList={{\n              role: 'listbox',\n              id: listId,\n              'aria-labelledby': headerId,\n              // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n              'data-testid': PAGINATOR_DATA_TESTID.LIST,\n            }}\n            // the rows are the options themselves (they carry role=\"option\"), the wrapper of the virtual list is inert\n            dsFastlistItem={{ role: 'none' }}\n            // rows can wrap, so the list is as tall as its rows up to a maximum (its own default is height: 100%)\n            dsFastlistContainer={{ style: { height: 'auto', maxHeight: listMaxHeight } }}\n            actionRef={listActionRef}\n            count={amountOfPages}\n            ItemRenderer={OptionRenderer}\n            getId={getOptionId}\n            estimateSize={getEstimatedSize}\n            remountOnCountChange={false}\n            {...ownerPropsConfig}\n          />\n        </StyledListWrapper>\n      </StyledPanel>\n    </StyledFloatingWrapper>\n  );\n};\n\nPanel.displayName = 'DSPaginator.Panel';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmEX,mBACE,KADF;AAnEZ,SAAgB,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB,+BAA+B;AAC/D,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,cAAc,YAAY,mBAAmB,mBAAmB;AAChG,SAAS,sBAAsB;AAG/B,MAAM,cAAc,CAAC,UAAkB,QAAQ;AAC/C,MAAM,mBAAmB,MAAM;AAExB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,kBAAkB,EAAE,iBAAiB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,kBAAkB;AAGjC,QAAM,kBAAkB,cAAc,qBAAqB;AAG3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UAEC,eAAa,sBAAsB;AAAA,UACnC,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,WAAW;AAAA,UACX,QAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBAEJ,eAAa,sBAAsB;AAAA,gBACnC,MAAM,kBAAkB,CAAC,GAAG,gBAAgB,eAAe,EAAE,MAAM,OAAO,MAAM,IAAI;AAAA,gBACnF,GAAG;AAAA,gBAEH,4BACC,iCACE;AAAA,sCAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,kBACxC,oBAAC,yBAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,kBAC3D,oBAAC,UAAM,4BAAiB;AAAA,mBAC1B,IAEA,oBAAC,UAAK,kBAAI;AAAA;AAAA,YAEd;AAAA,YACA,oBAAC,qBAAkB,UAAU,sBAAuB,GAAG,kBACrD;AAAA,cAAC;AAAA;AAAA,gBACC,uBAAuB;AAAA,kBACrB,MAAM;AAAA,kBACN,IAAI;AAAA,kBACJ,mBAAmB;AAAA;AAAA,kBAEnB,eAAe,sBAAsB;AAAA,gBACvC;AAAA,gBAEA,gBAAgB,EAAE,MAAM,OAAO;AAAA,gBAE/B,qBAAqB,EAAE,OAAO,EAAE,QAAQ,QAAQ,WAAW,cAAc,EAAE;AAAA,gBAC3E,WAAW;AAAA,gBACX,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,OAAO;AAAA,gBACP,cAAc;AAAA,gBACd,sBAAsB;AAAA,gBACrB,GAAG;AAAA;AAAA,YACN,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { Grid } from "@elliemae/ds-grid";
+import { ChevronDown } from "@elliemae/ds-icons";
+import { DSTypography } from "@elliemae/ds-typography";
+import { useCallback, useContext } from "react";
+import { DSPaginationSeparator } from "../../DSPaginationSeparator/index.js";
+import { PAGINATOR_DATA_TESTID, PAGINATOR_REGION_FOCUSES } from "../constants/index.js";
+import { DSPaginatorContext } from "../DSPaginatorCTX.js";
+import { StyledPageInfo, StyledTrigger, StyledTriggerWrapper } from "../styled.js";
+const Trigger = () => {
+  const {
+    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, pageDetails },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    isOpen,
+    hasDetails,
+    focusTrackers: { focusRegion },
+    chevronRef,
+    pageInfoRef,
+    detailMaxWidth,
+    handleTriggerRef,
+    handleTriggerClick,
+    handleTriggerKeyDown,
+    handleBlurOutOfWidget,
+    dialogId
+  } = useContext(DSPaginatorContext);
+  const isFocusTarget = focusRegion === PAGINATOR_REGION_FOCUSES.TRIGGER;
+  const handleRef = useCallback(
+    (node) => {
+      handleTriggerRef(node);
+      if (node && isFocusTarget) node.focus();
+    },
+    [handleTriggerRef, isFocusTarget]
+  );
+  const currentDetail = hasDetails ? pageDetails[pageIndex - 1] : "";
+  const accessibleName = `Page ${pageIndex} out of ${pageCount}${currentDetail ? `, ${currentDetail}` : ""}`;
+  return (
+    // legacy data-testid (the wrapper of the DSDropdownMenuV2 trigger) — preserved for QA/consumer compatibility, breaking change if removed
+    /* @__PURE__ */ jsx(StyledTriggerWrapper, { "data-testid": PAGINATOR_DATA_TESTID.TRIGGER_WRAPPER, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(
+      StyledTrigger,
+      {
+        buttonType: "raw",
+        disabled: isLoadingPageCount,
+        innerRef: handleRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? dialogId : void 0,
+        "aria-label": accessibleName,
+        "data-testid": PAGINATOR_DATA_TESTID.PAGINATOR,
+        ...globalAttributes,
+        ...xstyledProps,
+        ...ownerPropsConfig,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        onBlur: handleBlurOutOfWidget,
+        children: /* @__PURE__ */ jsxs(Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
+          /* @__PURE__ */ jsxs(StyledPageInfo, { innerRef: pageInfoRef, ...ownerPropsConfig, children: [
+            /* @__PURE__ */ jsx(DSTypography, { id: "typography-page-index", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageIndex }),
+            /* @__PURE__ */ jsxs(DSTypography, { className: "typography-page-info-and-detail", variant: "b1", as: "span", children: [
+              "/ ",
+              pageCount
+            ] })
+          ] }),
+          isLoadingPageCount && /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ml: "xxxs", mr: "xxxs", size: "xs" }),
+          hasDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs", ...ownerPropsConfig }),
+            /* @__PURE__ */ jsx(
+              DSTypography,
+              {
+                className: "typography-page-info-and-detail typography-paginator-detail",
+                style: { maxWidth: detailMaxWidth },
+                mr: "xxs",
+                variant: "b1",
+                as: "span",
+                fontWeight: "semibold",
+                textAlign: "start",
+                children: currentDetail
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"], innerRef: chevronRef })
+        ] })
+      }
+    ) })
+  );
+};
+Trigger.displayName = "DSPaginator.Trigger";
+export {
+  Trigger
+};
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/parts/Trigger.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useCallback, useContext } from 'react';\nimport { DSPaginationSeparator } from '../../DSPaginationSeparator/index.js';\nimport { PAGINATOR_DATA_TESTID, PAGINATOR_REGION_FOCUSES } from '../constants/index.js';\nimport { DSPaginatorContext } from '../DSPaginatorCTX.js';\nimport { StyledPageInfo, StyledTrigger, StyledTriggerWrapper } from '../styled.js';\n\nexport const Trigger = () => {\n  const {\n    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, pageDetails },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    isOpen,\n    hasDetails,\n    focusTrackers: { focusRegion },\n    chevronRef,\n    pageInfoRef,\n    detailMaxWidth,\n    handleTriggerRef,\n    handleTriggerClick,\n    handleTriggerKeyDown,\n    handleBlurOutOfWidget,\n    dialogId,\n  } = useContext(DSPaginatorContext);\n\n  // focus tracker: the trigger focuses itself when it is the declared target (e.g. after an option was activated)\n  const isFocusTarget = focusRegion === PAGINATOR_REGION_FOCUSES.TRIGGER;\n  const handleRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      handleTriggerRef(node);\n      if (node && isFocusTarget) node.focus();\n    },\n    [handleTriggerRef, isFocusTarget],\n  );\n\n  const currentDetail = hasDetails ? pageDetails[pageIndex - 1] : '';\n  const accessibleName = `Page ${pageIndex} out of ${pageCount}${currentDetail ? `, ${currentDetail}` : ''}`;\n\n  return (\n    // legacy data-testid (the wrapper of the DSDropdownMenuV2 trigger) \u2014 preserved for QA/consumer compatibility, breaking change if removed\n    <StyledTriggerWrapper data-testid={PAGINATOR_DATA_TESTID.TRIGGER_WRAPPER} {...ownerPropsConfig}>\n      <StyledTrigger\n        buttonType=\"raw\"\n        disabled={isLoadingPageCount}\n        innerRef={handleRef}\n        // the trigger owns a non-modal dialog (that hosts the list of pages): it is not a toggle button, so no aria-pressed\n        aria-haspopup=\"dialog\"\n        aria-expanded={isOpen}\n        aria-controls={isOpen ? dialogId : undefined}\n        aria-label={accessibleName}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={PAGINATOR_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        onBlur={handleBlurOutOfWidget}\n      >\n        <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <StyledPageInfo innerRef={pageInfoRef} {...ownerPropsConfig}>\n            <DSTypography id=\"typography-page-index\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n              {pageIndex}\n            </DSTypography>\n            <DSTypography className=\"typography-page-info-and-detail\" variant=\"b1\" as=\"span\">\n              / {pageCount}\n            </DSTypography>\n          </StyledPageInfo>\n          {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n          {hasDetails && (\n            <>\n              <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" {...ownerPropsConfig} />\n              <DSTypography\n                className=\"typography-page-info-and-detail typography-paginator-detail\"\n                // the detail wraps when it reaches the list width; the trigger follows the detail of the current page\n                style={{ maxWidth: detailMaxWidth }}\n                mr=\"xxs\"\n                variant=\"b1\"\n                as=\"span\"\n                fontWeight=\"semibold\"\n                textAlign=\"start\"\n              >\n                {currentDetail}\n              </DSTypography>\n            </>\n          )}\n          <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} innerRef={chevronRef} />\n        </Grid>\n      </StyledTrigger>\n    </StyledTriggerWrapper>\n  );\n};\n\nTrigger.displayName = 'DSPaginator.Trigger';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiEX,SASA,UATA,KAGA,YAHA;AAjEZ,SAAS,wCAAwC;AACjD,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,uBAAuB,gCAAgC;AAChE,SAAS,0BAA0B;AACnC,SAAS,gBAAgB,eAAe,4BAA4B;AAE7D,MAAM,UAAU,MAAM;AAC3B,QAAM;AAAA,IACJ,kBAAkB,EAAE,WAAW,WAAW,oBAAoB,YAAY;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,kBAAkB;AAGjC,QAAM,gBAAgB,gBAAgB,yBAAyB;AAC/D,QAAM,YAAY;AAAA,IAChB,CAAC,SAAmC;AAClC,uBAAiB,IAAI;AACrB,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA,QAAM,gBAAgB,aAAa,YAAY,YAAY,CAAC,IAAI;AAChE,QAAM,iBAAiB,QAAQ,SAAS,WAAW,SAAS,GAAG,gBAAgB,KAAK,aAAa,KAAK,EAAE;AAExG;AAAA;AAAA,IAEE,oBAAC,wBAAqB,eAAa,sBAAsB,iBAAkB,GAAG,kBAC5E;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QACV,UAAU;AAAA,QAEV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe,SAAS,WAAW;AAAA,QACnC,cAAY;AAAA,QAEZ,eAAa,sBAAsB;AAAA,QAClC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QAER,+BAAC,QAAK,QAAO,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GACtE;AAAA,+BAAC,kBAAe,UAAU,aAAc,GAAG,kBACzC;AAAA,gCAAC,gBAAa,IAAG,yBAAwB,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAC7F,qBACH;AAAA,YACA,qBAAC,gBAAa,WAAU,mCAAkC,SAAQ,MAAK,IAAG,QAAO;AAAA;AAAA,cAC5E;AAAA,eACL;AAAA,aACF;AAAA,UACC,sBAAsB,oBAAC,oCAAiC,IAAG,QAAO,IAAG,QAAO,MAAK,MAAK;AAAA,UACtF,cACC,iCACE;AAAA,gCAAC,yBAAsB,QAAO,QAAO,IAAG,QAAO,IAAG,QAAQ,GAAG,kBAAkB;AAAA,YAC/E;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBAEV,OAAO,EAAE,UAAU,eAAe;AAAA,gBAClC,IAAG;AAAA,gBACH,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,YAAW;AAAA,gBACX,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,aACF;AAAA,UAEF,oBAAC,eAAY,IAAG,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA,WAChF;AAAA;AAAA,IACF,GACF;AAAA;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

package/dist/esm/parts/DSPaginator/react-desc-prop-types.js

@@ -20,9 +20,14 @@ const DSPaginatorPropTypes = {
   ...xstyledPropTypes,
   pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
   pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("How many pages are there"),
-  onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  onPageChange: PropTypes.func.description(
+    "Function invoked when the user commits a different page (Enter, Space, click, or Tab out of the list). Moving through the options with the arrow keys does NOT invoke it"
+  ).defaultValue(() => null),
   isLoadingPageCount: PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false),
   pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  listWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(
+    "Width of the open list (a number is px, a string is any CSS length). Details wrap inside it; it is never wider than the viewport. Default: 280px with pageDetails; without them the list is as wide as its page numbers need"
+  ),
   pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue("")
 };
 const DSPaginatorPropTypesSchema = DSPaginatorPropTypes;

package/dist/esm/parts/DSPaginator/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginatorT {\n  export type SlotFunctionArguments = {\n    dsPaginationPaginator: () => object;\n  };\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    pageCount: number | string;\n    isLoadingPageCount: boolean;\n    pageIndex: number;\n    onPageChange: (page: number) => void;\n    pageDetails: string[] | readonly string[];\n    pageDetailsTitle: string;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPaginationName,\n    typeof PAGINATOR_SLOTS\n  > {}\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginatorT.DefaultProps = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n};\n\nexport const DSPaginatorPropTypes: DSPropTypesSchema<DSPaginatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n};\n\nexport const DSPaginatorPropTypesSchema = DSPaginatorPropTypes as unknown as ValidationMap<DSPaginatorT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,uBAAuB;AAsC3C,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,kBAAkB,eAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,oBAAoB,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PAGINATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginatorT {\n  export type SlotFunctionArguments = {\n    dsPaginationPaginator: () => object;\n    dsPaginationPaginatorTriggerWrapper: () => object;\n    dsPaginationPaginatorPageInfo: () => object;\n    dsPaginationPaginatorFloatingWrapper: () => object;\n    dsPaginationPaginatorPanel: () => object;\n    dsPaginationPaginatorHeader: () => object;\n    dsPaginationPaginatorListWrapper: () => object;\n    dsPaginationPaginatorList: () => object;\n    dsPaginationPaginatorOption: () => object;\n    dsPaginationPaginatorOptionCheckmark: () => object;\n    dsPaginationPaginatorOptionPage: () => object;\n    dsPaginationPaginatorOptionDetail: () => object;\n  };\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    pageCount: number | string;\n    isLoadingPageCount: boolean;\n    pageIndex: number;\n    onPageChange: (page: number) => void;\n    pageDetails: string[] | readonly string[];\n    pageDetailsTitle: string;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPaginationName,\n    typeof PAGINATOR_SLOTS\n  > {\n    /**\n     * Width of the open list (a number is px, a string is any CSS length) when the paginator has `pageDetails`: the details\n     * wrap inside it. The list is never wider than the viewport. Default: 280px. Without `pageDetails` the list is as wide\n     * as its page numbers need, unless this is passed.\n     */\n    listWidth?: number | string;\n  }\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginatorT.DefaultProps = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n};\n\nexport const DSPaginatorPropTypes: DSPropTypesSchema<DSPaginatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n  onPageChange: PropTypes.func\n    .description(\n      'Function invoked when the user commits a different page (Enter, Space, click, or Tab out of the list). Moving through the options with the arrow keys does NOT invoke it',\n    )\n    .defaultValue(() => null),\n  isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  listWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(\n    'Width of the open list (a number is px, a string is any CSS length). Details wrap inside it; it is never wider than the viewport. Default: 280px with pageDetails; without them the list is as wide as its page numbers need',\n  ),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n};\n\nexport const DSPaginatorPropTypesSchema = DSPaginatorPropTypes as unknown as ValidationMap<DSPaginatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,uBAAuB;AAwD3C,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,kBAAkB,eAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,UAAU,KACrB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,oBAAoB,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
   "names": []
 }