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

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

@@ -31,7 +31,16 @@ __export(constants_exports, {
   DSPaginationName: () => import_constants.DSPaginationName,
   DSPaginatorName: () => DSPaginatorName,
   PAGINATOR_DATA_TESTID: () => PAGINATOR_DATA_TESTID,
-  PAGINATOR_SLOTS: () => PAGINATOR_SLOTS
+  PAGINATOR_DEFAULT_LIST_WIDTH: () => PAGINATOR_DEFAULT_LIST_WIDTH,
+  PAGINATOR_HEADER_HEIGHT: () => PAGINATOR_HEADER_HEIGHT,
+  PAGINATOR_OPTION_HEIGHT: () => PAGINATOR_OPTION_HEIGHT,
+  PAGINATOR_PAGE_JUMP: () => PAGINATOR_PAGE_JUMP,
+  PAGINATOR_PANEL_MAX_HEIGHT: () => PAGINATOR_PANEL_MAX_HEIGHT,
+  PAGINATOR_PANEL_PADDING_BOTTOM: () => PAGINATOR_PANEL_PADDING_BOTTOM,
+  PAGINATOR_REGION_FOCUSES: () => PAGINATOR_REGION_FOCUSES,
+  PAGINATOR_SLOTS: () => PAGINATOR_SLOTS,
+  PAGINATOR_TYPEAHEAD_RESET_MS: () => PAGINATOR_TYPEAHEAD_RESET_MS,
+  PAGINATOR_VIEWPORT_MARGIN: () => PAGINATOR_VIEWPORT_MARGIN
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
@@ -39,7 +48,44 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../../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 = (0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSPaginationName, PAGINATOR_SLOTS);
+const PAGINATOR_DATA_TESTID = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(import_constants.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;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/DSPaginator/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\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAG1B,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AAGO,MAAM,4BAAwB,0CAAwB,mCAAkB,eAAe;",
+  "sourcesContent": ["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", "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;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,OAAG,0CAAwB,mCAAkB,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/cjs/parts/DSPaginator/parts/OptionRenderer.js

@@ -0,0 +1,98 @@
+"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_useFocusTracker = require("../config/useFocusTracker.js");
+var import_constants = require("../constants/index.js");
+var import_DSPaginatorCTX = require("../DSPaginatorCTX.js");
+var import_styled = require("../styled.js");
+const OptionRenderer = ({ index }) => {
+  const {
+    propsWithDefault: { pageIndex, pageDetails },
+    ownerPropsConfig: { getOwnerProps },
+    amountOfPages,
+    hasDetails,
+    chevronWidth,
+    pageInfoWidth,
+    focusTrackers: { focusRegion, trackFocusOption },
+    commitPage
+  } = (0, import_react.useContext)(import_DSPaginatorCTX.DSPaginatorContext);
+  const page = index + 1;
+  const isSelected = page === pageIndex;
+  const isFocusTarget = focusRegion === (0, import_useFocusTracker.getOptionRegionId)(page);
+  const handleRef = (0, import_react.useCallback)(
+    (node) => {
+      if (node && isFocusTarget) node.focus();
+    },
+    [isFocusTarget]
+  );
+  const handleFocus = (0, import_react.useCallback)(() => trackFocusOption(page), [page, trackFocusOption]);
+  const handleClick = (0, import_react.useCallback)(() => commitPage(page), [commitPage, page]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({ page, isSelected }), [page, isSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledOption,
+    {
+      "data-testid": import_constants.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__ */ (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.StyledOptionPage, { getOwnerProps, getOwnerPropsArguments, children: page }),
+        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledOptionDetail, { getOwnerProps, getOwnerPropsArguments, children: pageDetails[index] }) : null
+      ]
+    }
+  );
+};
+//# sourceMappingURL=OptionRenderer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/parts/OptionRenderer.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CnB;AA1CJ,sBAA0B;AAC1B,mBAA+C;AAC/C,6BAAkC;AAClC,uBAAsC;AACtC,4BAAmC;AACnC,oBAA0F;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,QAAI,yBAAW,wCAAkB;AAEjC,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,SAAS;AAC5B,QAAM,gBAAgB,oBAAgB,0CAAkB,IAAI;AAE5D,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,IAAI,GAAG,CAAC,MAAM,gBAAgB,CAAC;AACtF,QAAM,kBAAc,0BAAY,MAAM,WAAW,IAAI,GAAG,CAAC,YAAY,IAAI,CAAC;AAC1E,QAAM,6BAAyB,0BAAY,OAAO,EAAE,MAAM,WAAW,IAAI,CAAC,MAAM,UAAU,CAAC;AAE3F,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,uCAAsB;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,4CAAC,6BAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK;AAAA;AAAA,QAC1E;AAAA,QACA,4CAAC,kCAAiB,eAA8B,wBAC7C,gBACH;AAAA,QACC,aACC,4CAAC,oCAAmB,eAA8B,wBAC/C,sBAAY,KAAK,GACpB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,131 @@
+"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_DSPaginationSeparator = require("../../DSPaginationSeparator/index.js");
+var import_constants = require("../constants/index.js");
+var import_DSPaginatorCTX = require("../DSPaginatorCTX.js");
+var import_styled = require("../styled.js");
+var import_OptionRenderer = require("./OptionRenderer.js");
+const getOptionId = (index) => index + 1;
+const getEstimatedSize = () => import_constants.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
+  } = (0, import_react.useContext)(import_DSPaginatorCTX.DSPaginatorContext);
+  const hasDetailsTitle = hasDetails && pageDetailsTitle !== "";
+  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.PAGINATOR_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.PAGINATOR_DATA_TESTID.HEADER,
+                cols: hasDetailsTitle ? [`${pageInfoWidth + chevronWidth + 34}px`, "8px", "auto"] : void 0,
+                ...ownerPropsConfig,
+                children: hasDetailsTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { marginLeft: "8px" }, children: "Page" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSPaginationSeparator.DSPaginationSeparator, { height: "100%", ...ownerPropsConfig }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: pageDetailsTitle })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "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.PAGINATOR_DATA_TESTID.LIST
+                },
+                dsFastlistItem: { role: "none" },
+                dsFastlistContainer: { style: { height: "auto", maxHeight: listMaxHeight } },
+                actionRef: listActionRef,
+                count: amountOfPages,
+                ItemRenderer: import_OptionRenderer.OptionRenderer,
+                getId: getOptionId,
+                estimateSize: getEstimatedSize,
+                remountOnCountChange: false,
+                ...ownerPropsConfig
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "DSPaginator.Panel";
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/parts/Panel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmEX;AAnEZ,mBAAkC;AAClC,mCAAsC;AACtC,uBAA+D;AAC/D,4BAAmC;AACnC,oBAAgG;AAChG,4BAA+B;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,QAAI,yBAAW,wCAAkB;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,uCAAsB;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,uCAAsB;AAAA,gBACnC,MAAM,kBAAkB,CAAC,GAAG,gBAAgB,eAAe,EAAE,MAAM,OAAO,MAAM,IAAI;AAAA,gBACnF,GAAG;AAAA,gBAEH,4BACC,4EACE;AAAA,8DAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,kBACxC,4CAAC,sDAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,kBAC3D,4CAAC,UAAM,4BAAiB;AAAA,mBAC1B,IAEA,4CAAC,UAAK,kBAAI;AAAA;AAAA,YAEd;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,uCAAsB;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/cjs/parts/DSPaginator/parts/Trigger.js

@@ -0,0 +1,124 @@
+"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_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = require("react");
+var import_DSPaginationSeparator = require("../../DSPaginationSeparator/index.js");
+var import_constants = require("../constants/index.js");
+var import_DSPaginatorCTX = require("../DSPaginatorCTX.js");
+var import_styled = require("../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
+  } = (0, import_react.useContext)(import_DSPaginatorCTX.DSPaginatorContext);
+  const isFocusTarget = focusRegion === import_constants.PAGINATOR_REGION_FOCUSES.TRIGGER;
+  const handleRef = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTriggerWrapper, { "data-testid": import_constants.PAGINATOR_DATA_TESTID.TRIGGER_WRAPPER, ...ownerPropsConfig, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styled.StyledTrigger,
+      {
+        buttonType: "raw",
+        disabled: isLoadingPageCount,
+        innerRef: handleRef,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? dialogId : void 0,
+        "aria-label": accessibleName,
+        "data-testid": import_constants.PAGINATOR_DATA_TESTID.PAGINATOR,
+        ...globalAttributes,
+        ...xstyledProps,
+        ...ownerPropsConfig,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        onBlur: handleBlurOutOfWidget,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledPageInfo, { innerRef: pageInfoRef, ...ownerPropsConfig, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { id: "typography-page-index", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageIndex }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_typography.DSTypography, { className: "typography-page-info-and-detail", variant: "b1", as: "span", children: [
+              "/ ",
+              pageCount
+            ] })
+          ] }),
+          isLoadingPageCount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, { ml: "xxxs", mr: "xxxs", size: "xs" }),
+          hasDetails && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSPaginationSeparator.DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs", ...ownerPropsConfig }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_ds_typography.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__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"], innerRef: chevronRef })
+        ] })
+      }
+    ) })
+  );
+};
+Trigger.displayName = "DSPaginator.Trigger";
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPaginator/parts/Trigger.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiEX;AAjEZ,4CAAiD;AACjD,qBAAqB;AACrB,sBAA4B;AAC5B,2BAA6B;AAC7B,mBAA+C;AAC/C,mCAAsC;AACtC,uBAAgE;AAChE,4BAAmC;AACnC,oBAAoE;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,QAAI,yBAAW,wCAAkB;AAGjC,QAAM,gBAAgB,gBAAgB,0CAAyB;AAC/D,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,QAAM,gBAAgB,aAAa,YAAY,YAAY,CAAC,IAAI;AAChE,QAAM,iBAAiB,QAAQ,SAAS,WAAW,SAAS,GAAG,gBAAgB,KAAK,aAAa,KAAK,EAAE;AAExG;AAAA;AAAA,IAEE,4CAAC,sCAAqB,eAAa,uCAAsB,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,uCAAsB;AAAA,QAClC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QAER,uDAAC,uBAAK,QAAO,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GACtE;AAAA,uDAAC,gCAAe,UAAU,aAAc,GAAG,kBACzC;AAAA,wDAAC,qCAAa,IAAG,yBAAwB,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAC7F,qBACH;AAAA,YACA,6CAAC,qCAAa,WAAU,mCAAkC,SAAQ,MAAK,IAAG,QAAO;AAAA;AAAA,cAC5E;AAAA,eACL;AAAA,aACF;AAAA,UACC,sBAAsB,4CAAC,0EAAiC,IAAG,QAAO,IAAG,QAAO,MAAK,MAAK;AAAA,UACtF,cACC,4EACE;AAAA,wDAAC,sDAAsB,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,4CAAC,+BAAY,IAAG,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA,WAChF;AAAA;AAAA,IACF,GACF;AAAA;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

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

@@ -50,9 +50,14 @@ const DSPaginatorPropTypes = {
   ...import_ds_props_helpers.xstyledPropTypes,
   pageIndex: import_ds_props_helpers.PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
   pageCount: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("How many pages are there"),
-  onPageChange: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  onPageChange: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false),
   pageDetails: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  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). 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: import_ds_props_helpers.PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue("")
 };
 const DSPaginatorPropTypesSchema = DSPaginatorPropTypes;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSPaginator/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "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, 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAkD;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,OAAG,kDAAyB,mCAAkB,gCAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,kCAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,oBAAoB,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,kCAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
+  "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, 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AAEP,uBAAkD;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,OAAG,kDAAyB,mCAAkB,gCAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,kCAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,kCAAU,KACrB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,oBAAoB,kCAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,WAAW,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,kBAAkB,kCAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
   "names": []
 }