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

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

@@ -0,0 +1,66 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePerPageSelectorSizing_exports = {};
+__export(usePerPageSelectorSizing_exports, {
+  usePerPageSelectorSizing: () => usePerPageSelectorSizing
+});
+module.exports = __toCommonJS(usePerPageSelectorSizing_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
+var import_constants = require("../constants/index.js");
+var import_getSelectedOptionIndex = require("./getSelectedOptionIndex.js");
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+const usePerPageSelectorSizing = ({
+  pageSize,
+  options,
+  listWidth,
+  chevronRef,
+  listActionRef
+}) => {
+  const { width: chevronWidth } = (0, import_useOnElementOnResize.useOnElementResize)(chevronRef);
+  const configuredWidth = toCssLength(listWidth ?? import_constants.PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH);
+  const panelStyle = (0, import_react.useMemo)(
+    () => ({ width: `min(${configuredWidth}, calc(100vw - ${import_constants.PER_PAGE_SELECTOR_VIEWPORT_MARGIN}px))` }),
+    [configuredWidth]
+  );
+  const listMaxHeight = import_constants.PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT - import_constants.PER_PAGE_SELECTOR_HEADER_HEIGHT - import_constants.PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM;
+  const handleListWrapperRef = (0, import_react.useCallback)(
+    (node) => {
+      const selectedIndex = (0, import_getSelectedOptionIndex.getSelectedOptionIndex)(options, pageSize);
+      if (node && selectedIndex >= 0) listActionRef.current.scrollTo?.(selectedIndex, { align: "center" });
+    },
+    [listActionRef, options, pageSize]
+  );
+  return (0, import_react.useMemo)(
+    () => ({ chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef }),
+    [chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef]
+  );
+};
+//# sourceMappingURL=usePerPageSelectorSizing.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelectorSizing.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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  PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH,\n  PER_PAGE_SELECTOR_HEADER_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,\n  PER_PAGE_SELECTOR_VIEWPORT_MARGIN,\n} from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { getSelectedOptionIndex } from './getSelectedOptionIndex.js';\n\ntype SizingConfigT = {\n  pageSize: number;\n  options: DSPerPageSelectorT.PerPageOption[];\n  listWidth?: number | string;\n  chevronRef: React.RefObject<HTMLElement>;\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. The list is `listWidth` wide (100px by\n * default), never wider than the viewport, and the labels WRAP inside it. Nothing here renders or measures every label: that\n * would be O(n) hidden components just to size the list to the widest label, and it forced a one-line (truncating) design.\n */\nexport const usePerPageSelectorSizing = ({\n  pageSize,\n  options,\n  listWidth,\n  chevronRef,\n  listActionRef,\n}: SizingConfigT) => {\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n  const configuredWidth = toCssLength(listWidth ?? PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH);\n  const panelStyle = useMemo(\n    () => ({ width: `min(${configuredWidth}, calc(100vw - ${PER_PAGE_SELECTOR_VIEWPORT_MARGIN}px))` }),\n    [configuredWidth],\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 =\n    PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT - PER_PAGE_SELECTOR_HEADER_HEIGHT - PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM;\n\n  /*\n   * The virtual list mounts at scroll offset 0, but the selected option (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. So the list is told\n   * to scroll once it is bound: React attaches the ref callbacks child first, so this one, on the element that wraps the\n   * list, runs after the list's own layout effects (no effect, no timer). The selected option then mounts in range and\n   * focuses itself (focus tracker). The callback changes only when the page size changes, which closes the list.\n   */\n  const handleListWrapperRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      const selectedIndex = getSelectedOptionIndex(options, pageSize);\n      if (node && selectedIndex >= 0) listActionRef.current.scrollTo?.(selectedIndex, { align: 'center' });\n    },\n    [listActionRef, options, pageSize],\n  );\n\n  return useMemo(\n    () => ({ chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef }),\n    [chevronWidth, panelStyle, listMaxHeight, handleListWrapperRef],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAqC;AACrC,kCAAmC;AACnC,uBAMO;AAEP,oCAAuC;AAUvC,MAAM,cAAc,CAAC,UAA4B,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAQrF,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,EAAE,OAAO,aAAa,QAAI,gDAAmB,UAAU;AAC7D,QAAM,kBAAkB,YAAY,aAAa,qDAAoC;AACrF,QAAM,iBAAa;AAAA,IACjB,OAAO,EAAE,OAAO,OAAO,eAAe,kBAAkB,kDAAiC,OAAO;AAAA,IAChG,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,gBACJ,sDAAqC,mDAAkC;AASzE,QAAM,2BAAuB;AAAA,IAC3B,CAAC,SAAgC;AAC/B,YAAM,oBAAgB,sDAAuB,SAAS,QAAQ;AAC9D,UAAI,QAAQ,iBAAiB,EAAG,eAAc,QAAQ,WAAW,eAAe,EAAE,OAAO,SAAS,CAAC;AAAA,IACrG;AAAA,IACA,CAAC,eAAe,SAAS,QAAQ;AAAA,EACnC;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,cAAc,YAAY,eAAe,qBAAqB;AAAA,IACvE,CAAC,cAAc,YAAY,eAAe,oBAAoB;AAAA,EAChE;AACF;",
+  "names": []
+}

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

@@ -30,21 +30,60 @@ var constants_exports = {};
 __export(constants_exports, {
   DSPaginationName: () => import_constants.DSPaginationName,
   DSPerPageSelectorName: () => DSPerPageSelectorName,
-  EXAMPLE_CONSTANTS: () => EXAMPLE_CONSTANTS,
   PER_PAGE_SELECTOR_DATA_TESTID: () => PER_PAGE_SELECTOR_DATA_TESTID,
-  PER_PAGE_SELECTOR_SLOTS: () => PER_PAGE_SELECTOR_SLOTS
+  PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH: () => PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH,
+  PER_PAGE_SELECTOR_HEADER_HEIGHT: () => PER_PAGE_SELECTOR_HEADER_HEIGHT,
+  PER_PAGE_SELECTOR_OPTION_HEIGHT: () => PER_PAGE_SELECTOR_OPTION_HEIGHT,
+  PER_PAGE_SELECTOR_PAGE_JUMP: () => PER_PAGE_SELECTOR_PAGE_JUMP,
+  PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT: () => PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT,
+  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM: () => PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,
+  PER_PAGE_SELECTOR_REGION_FOCUSES: () => PER_PAGE_SELECTOR_REGION_FOCUSES,
+  PER_PAGE_SELECTOR_SLOTS: () => PER_PAGE_SELECTOR_SLOTS,
+  PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS: () => PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS,
+  PER_PAGE_SELECTOR_VIEWPORT_MARGIN: () => PER_PAGE_SELECTOR_VIEWPORT_MARGIN
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../../constants/index.js");
 const DSPerPageSelectorName = "DSPerPageSelector";
-const EXAMPLE_CONSTANTS = {
-  HELLO: "WORLD",
-  FOO: "BAR"
-};
 const PER_PAGE_SELECTOR_SLOTS = {
-  PER_PAGE_SELECTOR: "per-page-selector"
+  PER_PAGE_SELECTOR: "per-page-selector",
+  // legacy ones...
+  TRIGGER_WRAPPER: "per-page-selector-trigger-wrapper",
+  FLOATING_WRAPPER: "per-page-selector-floating-wrapper",
+  PANEL: "per-page-selector-panel",
+  HEADER: "per-page-selector-header",
+  LIST_WRAPPER: "per-page-selector-list-wrapper",
+  LIST: "per-page-selector-list",
+  OPTION: "per-page-selector-option",
+  OPTION_CHECKMARK: "per-page-selector-option-checkmark",
+  OPTION_LABEL: "per-page-selector-option-label"
+};
+const PER_PAGE_SELECTOR_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSPaginationName, PER_PAGE_SELECTOR_SLOTS),
+  // legacy values of the DSDropdownMenuV2 the per page selector used to render: it 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 option
+};
+const PER_PAGE_SELECTOR_REGION_FOCUSES = {
+  RESET: "",
+  TRIGGER: "trigger",
+  OPTION_PREFIX: "option-"
 };
-const PER_PAGE_SELECTOR_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSPaginationName, PER_PAGE_SELECTOR_SLOTS);
+const PER_PAGE_SELECTOR_OPTION_HEIGHT = 32;
+const PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT = 300;
+const PER_PAGE_SELECTOR_HEADER_HEIGHT = 17;
+const PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM = 4;
+const PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH = 100;
+const PER_PAGE_SELECTOR_VIEWPORT_MARGIN = 16;
+const PER_PAGE_SELECTOR_PAGE_JUMP = 10;
+const PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS = 1e3;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPerPageSelector/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\n\nexport const EXAMPLE_CONSTANTS = {\n  HELLO: 'WORLD',\n  FOO: 'BAR',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_SLOTS = {\n  PER_PAGE_SELECTOR: 'per-page-selector',\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 PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAK1B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAAA,EAC/B,OAAO;AAAA,EACP,KAAK;AACP;AAGO,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AACrB;AAGO,MAAM,oCAAgC,0CAAwB,mCAAkB,uBAAuB;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\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): `per-page-selector` is the legacy one (the trigger), the rest are new\nexport const PER_PAGE_SELECTOR_SLOTS = {\n  PER_PAGE_SELECTOR: 'per-page-selector', // legacy ones...\n  TRIGGER_WRAPPER: 'per-page-selector-trigger-wrapper',\n  FLOATING_WRAPPER: 'per-page-selector-floating-wrapper',\n  PANEL: 'per-page-selector-panel',\n  HEADER: 'per-page-selector-header',\n  LIST_WRAPPER: 'per-page-selector-list-wrapper',\n  LIST: 'per-page-selector-list',\n  OPTION: 'per-page-selector-option',\n  OPTION_CHECKMARK: 'per-page-selector-option-checkmark',\n  OPTION_LABEL: 'per-page-selector-option-label',\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 PER_PAGE_SELECTOR_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n  // legacy values of the DSDropdownMenuV2 the per page selector used to render: it 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 option\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 its dsId\nexport const PER_PAGE_SELECTOR_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 PER_PAGE_SELECTOR_OPTION_HEIGHT = 32;\n// the max height of the whole panel (header + list), same as the previous DSPerPageSelector (measured: header ~17px)\nexport const PER_PAGE_SELECTOR_PANEL_MAX_HEIGHT = 300;\nexport const PER_PAGE_SELECTOR_HEADER_HEIGHT = 17;\n// the previous DSDropdownMenuV2 wrapper always kept 4px of padding below the list, inside the same max height\nexport const PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM = 4;\n// the width of the open list: labels wrap inside it instead of the list growing to the widest one (that would need every\n// label rendered and measured up front). 100px is what the previous formula gave for numeric labels and for `All`.\n// Overridable with the `listWidth` prop.\nexport const PER_PAGE_SELECTOR_DEFAULT_LIST_WIDTH = 100;\n// the list never gets wider than the viewport minus this margin (reflow at high zoom levels)\nexport const PER_PAGE_SELECTOR_VIEWPORT_MARGIN = 16;\n// APG listbox / select-only combobox: PageUp / PageDown move 10 options\nexport const PER_PAGE_SELECTOR_PAGE_JUMP = 10;\n// characters typed within this window build a single prefix to look for\nexport const PER_PAGE_SELECTOR_TYPEAHEAD_RESET_MS = 1000;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAK1B,MAAM,wBAAwB;AAI9B,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AAAA;AAAA,EACnB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,cAAc;AAChB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,mCAAkB,uBAAuB;AAAA;AAAA;AAAA,EAGpE,iBAAiB;AAAA;AAAA,EACjB,OAAO;AAAA;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA;AACV;AAIO,MAAM,mCAAmC;AAAA,EAC9C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAGO,MAAM,kCAAkC;AAExC,MAAM,qCAAqC;AAC3C,MAAM,kCAAkC;AAExC,MAAM,yCAAyC;AAI/C,MAAM,uCAAuC;AAE7C,MAAM,oCAAoC;AAE1C,MAAM,8BAA8B;AAEpC,MAAM,uCAAuC;",
   "names": []
 }

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

@@ -0,0 +1,94 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var OptionRenderer_exports = {};
+__export(OptionRenderer_exports, {
+  OptionRenderer: () => OptionRenderer
+});
+module.exports = __toCommonJS(OptionRenderer_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_react = require("react");
+var import_getSelectedOptionIndex = require("../config/getSelectedOptionIndex.js");
+var import_useFocusTracker = require("../config/useFocusTracker.js");
+var import_constants = require("../constants/index.js");
+var import_DSPerPageSelectorCTX = require("../DSPerPageSelectorCTX.js");
+var import_styled = require("../styled.js");
+const OptionRenderer = ({ index }) => {
+  const {
+    propsWithDefault: { pageSize },
+    ownerPropsConfig: { getOwnerProps },
+    options,
+    chevronWidth,
+    focusTrackers: { focusRegion, trackFocusOption },
+    commitOption
+  } = (0, import_react.useContext)(import_DSPerPageSelectorCTX.DSPerPageSelectorContext);
+  const option = options[index];
+  const isSelected = (0, import_getSelectedOptionIndex.getSelectedOptionIndex)(options, pageSize) === index;
+  const isFocusTarget = focusRegion === (0, import_useFocusTracker.getOptionRegionId)(option.dsId);
+  const handleRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node && isFocusTarget) node.focus();
+    },
+    [isFocusTarget]
+  );
+  const handleFocus = (0, import_react.useCallback)(() => trackFocusOption(option.dsId), [option.dsId, trackFocusOption]);
+  const handleClick = (0, import_react.useCallback)(() => commitOption(option), [commitOption, option]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({ option, isSelected }), [option, isSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledOption,
+    {
+      "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.OPTION,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-setsize": options.length,
+      "aria-posinset": index + 1,
+      tabIndex: isFocusTarget ? 0 : -1,
+      innerRef: handleRef,
+      onFocus: handleFocus,
+      onClick: handleClick,
+      style: { gridTemplateColumns: `${chevronWidth}px auto` },
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledOptionCheckmark,
+          {
+            "aria-hidden": "true",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) : null
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledOptionLabel, { getOwnerProps, getOwnerPropsArguments, children: option.label })
+      ]
+    }
+  );
+};
+//# sourceMappingURL=OptionRenderer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/parts/OptionRenderer.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { Checkmark } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { getSelectedOptionIndex } from '../config/getSelectedOptionIndex.js';\nimport { getOptionRegionId } from '../config/useFocusTracker.js';\nimport { PER_PAGE_SELECTOR_DATA_TESTID } from '../constants/index.js';\nimport { DSPerPageSelectorContext } from '../DSPerPageSelectorCTX.js';\nimport { StyledOption, StyledOptionCheckmark, StyledOptionLabel } from '../styled.js';\n\ntype OptionRendererPropsT = { index: number };\n\n/**\n * One option 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 dsId identity from the ref callback (see useFocusTracker), not by its place in the DOM.\n */\nexport const OptionRenderer = ({ index }: OptionRendererPropsT) => {\n  const {\n    propsWithDefault: { pageSize },\n    ownerPropsConfig: { getOwnerProps },\n    options,\n    chevronWidth,\n    focusTrackers: { focusRegion, trackFocusOption },\n    commitOption,\n  } = useContext(DSPerPageSelectorContext);\n\n  const option = options[index];\n  const isSelected = getSelectedOptionIndex(options, pageSize) === index;\n  const isFocusTarget = focusRegion === getOptionRegionId(option.dsId);\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(option.dsId), [option.dsId, trackFocusOption]);\n  const handleClick = useCallback(() => commitOption(option), [commitOption, option]);\n  const getOwnerPropsArguments = useCallback(() => ({ option, isSelected }), [option, isSelected]);\n\n  return (\n    <StyledOption\n      // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n      data-testid={PER_PAGE_SELECTOR_DATA_TESTID.OPTION}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-setsize={options.length}\n      aria-posinset={index + 1}\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] [label]\n      style={{ gridTemplateColumns: `${chevronWidth}px auto` }}\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      <StyledOptionLabel getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n        {option.label}\n      </StyledOptionLabel>\n    </StyledOption>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAzCJ,sBAA0B;AAC1B,mBAA+C;AAC/C,oCAAuC;AACvC,6BAAkC;AAClC,uBAA8C;AAC9C,kCAAyC;AACzC,oBAAuE;AAShE,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAA4B;AACjE,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B,kBAAkB,EAAE,cAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,eAAe,EAAE,aAAa,iBAAiB;AAAA,IAC/C;AAAA,EACF,QAAI,yBAAW,oDAAwB;AAEvC,QAAM,SAAS,QAAQ,KAAK;AAC5B,QAAM,iBAAa,sDAAuB,SAAS,QAAQ,MAAM;AACjE,QAAM,gBAAgB,oBAAgB,0CAAkB,OAAO,IAAI;AAEnE,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAgC;AAC/B,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,kBAAc,0BAAY,MAAM,iBAAiB,OAAO,IAAI,GAAG,CAAC,OAAO,MAAM,gBAAgB,CAAC;AACpG,QAAM,kBAAc,0BAAY,MAAM,aAAa,MAAM,GAAG,CAAC,cAAc,MAAM,CAAC;AAClF,QAAM,6BAAyB,0BAAY,OAAO,EAAE,QAAQ,WAAW,IAAI,CAAC,QAAQ,UAAU,CAAC;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,+CAA8B;AAAA,MAC3C,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,gBAAc,QAAQ;AAAA,MACtB,iBAAe,QAAQ;AAAA,MAEvB,UAAU,gBAAgB,IAAI;AAAA,MAC9B,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MAET,OAAO,EAAE,qBAAqB,GAAG,YAAY,UAAU;AAAA,MACvD;AAAA,MACA;AAAA,MAGA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ;AAAA,YACA;AAAA,YAEC,uBAAa,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK;AAAA;AAAA,QAC1E;AAAA,QACA,4CAAC,mCAAkB,eAA8B,wBAC9C,iBAAO,OACV;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,120 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Panel_exports = {};
+__export(Panel_exports, {
+  Panel: () => Panel
+});
+module.exports = __toCommonJS(Panel_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_constants = require("../constants/index.js");
+var import_DSPerPageSelectorCTX = require("../DSPerPageSelectorCTX.js");
+var import_styled = require("../styled.js");
+var import_OptionRenderer = require("./OptionRenderer.js");
+const getEstimatedSize = () => import_constants.PER_PAGE_SELECTOR_OPTION_HEIGHT;
+const Panel = () => {
+  const {
+    ownerPropsConfig,
+    isOpen,
+    options,
+    panelStyle,
+    listMaxHeight,
+    floatingStyles,
+    floatingContext,
+    floatingInnerRef,
+    listActionRef,
+    handleListWrapperRef,
+    handlePanelKeyDown,
+    handlePanelKeyDownCapture,
+    handleBlurOutOfWidget,
+    headerId,
+    listId,
+    dialogId
+  } = (0, import_react.useContext)(import_DSPerPageSelectorCTX.DSPerPageSelectorContext);
+  const getOptionId = (0, import_react.useCallback)((index) => options[index].dsId, [options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledFloatingWrapper,
+    {
+      innerRef: floatingInnerRef,
+      isOpen,
+      floatingStyles,
+      context: floatingContext,
+      id: dialogId,
+      role: "dialog",
+      "aria-labelledby": headerId,
+      ...ownerPropsConfig,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.StyledPanel,
+        {
+          "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.PANEL,
+          style: panelStyle,
+          onKeyDownCapture: handlePanelKeyDownCapture,
+          onKeyDown: handlePanelKeyDown,
+          onBlur: handleBlurOutOfWidget,
+          ...ownerPropsConfig,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styled.StyledHeader,
+              {
+                id: headerId,
+                "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.HEADER,
+                ...ownerPropsConfig,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Per Page" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledListWrapper, { innerRef: handleListWrapperRef, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_styled.StyledList,
+              {
+                dsFastlistWrapperList: {
+                  role: "listbox",
+                  id: listId,
+                  "aria-labelledby": headerId,
+                  // legacy data-testid — preserved for QA/consumer compatibility, breaking change if removed
+                  "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.LIST
+                },
+                dsFastlistItem: { role: "none" },
+                dsFastlistContainer: { style: { height: "auto", maxHeight: listMaxHeight } },
+                actionRef: listActionRef,
+                count: options.length,
+                ItemRenderer: import_OptionRenderer.OptionRenderer,
+                getId: getOptionId,
+                estimateSize: getEstimatedSize,
+                remountOnCountChange: false,
+                ...ownerPropsConfig
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "DSPerPageSelector.Panel";
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/parts/Panel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_OPTION_HEIGHT } from '../constants/index.js';\nimport { DSPerPageSelectorContext } from '../DSPerPageSelectorCTX.js';\nimport { StyledFloatingWrapper, StyledHeader, StyledList, StyledListWrapper, StyledPanel } from '../styled.js';\nimport { OptionRenderer } from './OptionRenderer.js';\n\n// stable reference: the virtual list reads it on every render\nconst getEstimatedSize = () => PER_PAGE_SELECTOR_OPTION_HEIGHT;\n\nexport const Panel = () => {\n  const {\n    ownerPropsConfig,\n    isOpen,\n    options,\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(DSPerPageSelectorContext);\n\n  const getOptionId = useCallback((index: number) => options[index].dsId, [options]);\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={PER_PAGE_SELECTOR_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={PER_PAGE_SELECTOR_DATA_TESTID.HEADER}\n          {...ownerPropsConfig}\n        >\n          <span>Per Page</span>\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': PER_PAGE_SELECTOR_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={options.length}\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 = 'DSPerPageSelector.Panel';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CjB;AA3CN,mBAA+C;AAC/C,uBAA+E;AAC/E,kCAAyC;AACzC,oBAAgG;AAChG,4BAA+B;AAG/B,MAAM,mBAAmB,MAAM;AAExB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ;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,QAAI,yBAAW,oDAAwB;AAEvC,QAAM,kBAAc,0BAAY,CAAC,UAAkB,QAAQ,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC;AAGjF,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,+CAA8B;AAAA,UAC3C,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,+CAA8B;AAAA,gBAC1C,GAAG;AAAA,gBAEJ,sDAAC,UAAK,sBAAQ;AAAA;AAAA,YAChB;AAAA,YACA,4CAAC,mCAAkB,UAAU,sBAAuB,GAAG,kBACrD;AAAA,cAAC;AAAA;AAAA,gBACC,uBAAuB;AAAA,kBACrB,MAAM;AAAA,kBACN,IAAI;AAAA,kBACJ,mBAAmB;AAAA;AAAA,kBAEnB,eAAe,+CAA8B;AAAA,gBAC/C;AAAA,gBAEA,gBAAgB,EAAE,MAAM,OAAO;AAAA,gBAE/B,qBAAqB,EAAE,OAAO,EAAE,QAAQ,QAAQ,WAAW,cAAc,EAAE;AAAA,gBAC3E,WAAW;AAAA,gBACX,OAAO,QAAQ;AAAA,gBACf,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/cjs/parts/DSPerPageSelector/parts/Trigger.js

@@ -0,0 +1,95 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Trigger_exports = {};
+__export(Trigger_exports, {
+  Trigger: () => Trigger
+});
+module.exports = __toCommonJS(Trigger_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = require("react");
+var import_constants = require("../constants/index.js");
+var import_DSPerPageSelectorCTX = require("../DSPerPageSelectorCTX.js");
+var import_styled = require("../styled.js");
+const Trigger = () => {
+  const {
+    propsWithDefault: { pageSize },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    isOpen,
+    focusTrackers: { focusRegion },
+    chevronRef,
+    handleTriggerRef,
+    handleTriggerClick,
+    handleTriggerKeyDown,
+    handleBlurOutOfWidget,
+    dialogId
+  } = (0, import_react.useContext)(import_DSPerPageSelectorCTX.DSPerPageSelectorContext);
+  const isFocusTarget = focusRegion === import_constants.PER_PAGE_SELECTOR_REGION_FOCUSES.TRIGGER;
+  const handleRef = (0, import_react.useCallback)(
+    (node) => {
+      handleTriggerRef(node);
+      if (node && isFocusTarget) node.focus();
+    },
+    [handleTriggerRef, isFocusTarget]
+  );
+  return (
+    // legacy data-testid (the wrapper of the DSDropdownMenuV2 trigger) — preserved for QA/consumer compatibility, breaking change if removed
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTriggerWrapper, { "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.TRIGGER_WRAPPER, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_styled.StyledTrigger,
+      {
+        buttonType: "raw",
+        innerRef: handleRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? dialogId : void 0,
+        "aria-label": `${pageSize} rows per page`,
+        "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
+        ...globalAttributes,
+        ...xstyledProps,
+        ...ownerPropsConfig,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        onBlur: handleBlurOutOfWidget,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_typography.DSTypography, { variant: "b1", as: "span", className: "typography-per-page-selector", children: [
+            pageSize,
+            " / page"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
+        ]
+      }
+    ) })
+  );
+};
+Trigger.displayName = "DSPerPageSelector.Trigger";
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/parts/Trigger.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { ChevronDown } from '@elliemae/ds-icons';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport React, { useCallback, useContext } from 'react';\nimport { PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_REGION_FOCUSES } from '../constants/index.js';\nimport { DSPerPageSelectorContext } from '../DSPerPageSelectorCTX.js';\nimport { StyledTrigger, StyledTriggerWrapper } from '../styled.js';\n\nexport const Trigger = () => {\n  const {\n    propsWithDefault: { pageSize },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    isOpen,\n    focusTrackers: { focusRegion },\n    chevronRef,\n    handleTriggerRef,\n    handleTriggerClick,\n    handleTriggerKeyDown,\n    handleBlurOutOfWidget,\n    dialogId,\n  } = useContext(DSPerPageSelectorContext);\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 === PER_PAGE_SELECTOR_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  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={PER_PAGE_SELECTOR_DATA_TESTID.TRIGGER_WRAPPER} {...ownerPropsConfig}>\n      <StyledTrigger\n        buttonType=\"raw\"\n        innerRef={handleRef}\n        // the trigger owns a non-modal dialog (that hosts the list of options): 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={`${pageSize} rows per page`}\n        // legacy data-testid \u2014 preserved for QA/consumer compatibility, breaking change if removed\n        data-testid={PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        onBlur={handleBlurOutOfWidget}\n      >\n        <DSTypography variant=\"b1\" as=\"span\" className=\"typography-per-page-selector\">\n          {pageSize} / page\n        </DSTypography>\n        <ChevronDown color={['brand-primary', '700']} innerRef={chevronRef} />\n      </StyledTrigger>\n    </StyledTriggerWrapper>\n  );\n};\n\nTrigger.displayName = 'DSPerPageSelector.Trigger';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDf;AArDR,sBAA4B;AAC5B,2BAA6B;AAC7B,mBAA+C;AAC/C,uBAAgF;AAChF,kCAAyC;AACzC,oBAAoD;AAE7C,MAAM,UAAU,MAAM;AAC3B,QAAM;AAAA,IACJ,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,oDAAwB;AAGvC,QAAM,gBAAgB,gBAAgB,kDAAiC;AACvE,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAmC;AAClC,uBAAiB,IAAI;AACrB,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA;AAAA;AAAA,IAEE,4CAAC,sCAAqB,eAAa,+CAA8B,iBAAkB,GAAG,kBACpF;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QAEV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,iBAAe,SAAS,WAAW;AAAA,QACnC,cAAY,GAAG,QAAQ;AAAA,QAEvB,eAAa,+CAA8B;AAAA,QAC1C,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QAER;AAAA,uDAAC,qCAAa,SAAQ,MAAK,IAAG,QAAO,WAAU,gCAC5C;AAAA;AAAA,YAAS;AAAA,aACZ;AAAA,UACA,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,IACtE,GACF;AAAA;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

package/dist/cjs/parts/DSPerPageSelector/react-desc-prop-types.js

@@ -48,8 +48,25 @@ const DSPerPageSelectorPropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   pageSize: import_ds_props_helpers.PropTypes.number.description("The current page size").defaultValue(10),
-  onPageSizeChange: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
-  perPageOptions: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.object])).description("The available options for page size").defaultValue([10]),
+  onPageSizeChange: import_ds_props_helpers.PropTypes.func.description(
+    "Function invoked when the user commits a different page size (Enter, Space, click, or Tab out of the list). Moving through the options with the arrow keys does NOT invoke it"
+  ).defaultValue(() => null),
+  perPageOptions: import_ds_props_helpers.PropTypes.arrayOf(
+    import_ds_props_helpers.PropTypes.oneOfType([
+      import_ds_props_helpers.PropTypes.number,
+      import_ds_props_helpers.PropTypes.shape({
+        type: import_ds_props_helpers.PropTypes.oneOf(["single"]),
+        dsId: import_ds_props_helpers.PropTypes.string.isRequired,
+        label: import_ds_props_helpers.PropTypes.string.isRequired,
+        value: import_ds_props_helpers.PropTypes.number.isRequired
+      })
+    ])
+  ).description(
+    'The available options for page size: a number (its own label and dsId), or an object { type?: "single", dsId, label, value }. The selected option is the one whose dsId is the page size. Nothing else of an object is read'
+  ).defaultValue([10]),
+  listWidth: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.string]).description(
+    "Width of the open list (a number is px, a string is any CSS length). Labels wrap inside it; it is never wider than the viewport. Default: 100px"
+  ),
   minPerPage: import_ds_props_helpers.PropTypes.number.description("Min for the per page options").defaultValue(0),
   maxPerPage: import_ds_props_helpers.PropTypes.number.description("Max for the per page options").defaultValue(100),
   perPageStep: import_ds_props_helpers.PropTypes.number.description("Step for the per page options").defaultValue(5)

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPerPageSelector/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport 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, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPerPageSelectorT {\n  export type SlotFunctionArguments = {\n    dsPaginationPerPageSelector: () => object;\n  };\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    pageSize: number;\n    onPageSizeChange: (pageSize: number) => void;\n    perPageStep: number;\n    minPerPage: number;\n    maxPerPage: number;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPaginationName,\n    typeof PER_PAGE_SELECTOR_SLOTS\n  > {\n    perPageOptions?: (number | DSDropdownMenuT.ItemSingleOptions)[];\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: DSPerPageSelectorT.DefaultProps = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\nexport const DSPerPageSelectorPropTypes: DSPropTypesSchema<DSPerPageSelectorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object]))\n    .description('The available options for page size')\n    .defaultValue([10]),\n  minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n};\n\nexport const DSPerPageSelectorPropTypesSchema =\n  DSPerPageSelectorPropTypes as unknown as ValidationMap<DSPerPageSelectorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA0D;AAuCnD,MAAM,eAAgD;AAAA,EAC3D,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,MAAM,6BAA0E;AAAA,EACrF,OAAG,kDAAyB,mCAAkB,wCAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACxF,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
+  "sourcesContent": ["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, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPerPageSelectorT {\n  export type SlotFunctionArguments = {\n    dsPaginationPerPageSelector: () => object;\n    dsPaginationPerPageSelectorTriggerWrapper: () => object;\n    dsPaginationPerPageSelectorFloatingWrapper: () => object;\n    dsPaginationPerPageSelectorPanel: () => object;\n    dsPaginationPerPageSelectorHeader: () => object;\n    dsPaginationPerPageSelectorListWrapper: () => object;\n    dsPaginationPerPageSelectorList: () => object;\n    dsPaginationPerPageSelectorOption: () => object;\n    dsPaginationPerPageSelectorOptionCheckmark: () => object;\n    dsPaginationPerPageSelectorOptionLabel: () => object;\n  };\n\n  /**\n   * One option of the list: what the examples use and what the list reads. It used to be typed as a `DSDropdownMenuV2`\n   * single item, which handed consumers a whole contract that was never meant for them nor shown in the examples (`render`,\n   * `disabled`, `onClick`, global attributes, xstyled props...). Some of it happened to work because the options were passed\n   * to the dropdown unchanged; none of it is supported anymore.\n   */\n  export interface PerPageOption {\n    type?: 'single';\n    dsId: string;\n    label: string;\n    value: number;\n  }\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    pageSize: number;\n    onPageSizeChange: (pageSize: number) => void;\n    perPageStep: number;\n    minPerPage: number;\n    maxPerPage: number;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSPaginationName,\n    typeof PER_PAGE_SELECTOR_SLOTS\n  > {\n    perPageOptions?: (number | PerPageOption)[];\n    /**\n     * Width of the open list (a number is px, a string is any CSS length). Labels wrap inside it; the list is never wider\n     * than the viewport. Default: 100px.\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: DSPerPageSelectorT.DefaultProps = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\nexport const DSPerPageSelectorPropTypes: DSPropTypesSchema<DSPerPageSelectorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  onPageSizeChange: PropTypes.func\n    .description(\n      'Function invoked when the user commits a different page size (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  perPageOptions: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.shape({\n        type: PropTypes.oneOf(['single']),\n        dsId: PropTypes.string.isRequired,\n        label: PropTypes.string.isRequired,\n        value: PropTypes.number.isRequired,\n      }),\n    ]),\n  )\n    .description(\n      'The available options for page size: a number (its own label and dsId), or an object { type?: \"single\", dsId, label, value }. The selected option is the one whose dsId is the page size. Nothing else of an object is read',\n    )\n    .defaultValue([10]),\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). Labels wrap inside it; it is never wider than the viewport. Default: 100px',\n  ),\n  minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n};\n\nexport const DSPerPageSelectorPropTypesSchema =\n  DSPerPageSelectorPropTypes as unknown as ValidationMap<DSPerPageSelectorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAA0D;AAkEnD,MAAM,eAAgD;AAAA,EAC3D,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,MAAM,6BAA0E;AAAA,EACrF,OAAG,kDAAyB,mCAAkB,wCAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,kCAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,kCAAU;AAAA,IACxB,kCAAU,UAAU;AAAA,MAClB,kCAAU;AAAA,MACV,kCAAU,MAAM;AAAA,QACd,MAAM,kCAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,QAChC,MAAM,kCAAU,OAAO;AAAA,QACvB,OAAO,kCAAU,OAAO;AAAA,QACxB,OAAO,kCAAU,OAAO;AAAA,MAC1B,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EACG;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
   "names": []
 }