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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/parts/OptionRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Checkmark } from '@elliemae/ds-icons';\nimport React, { useCallback, useContext } from 'react';\nimport { 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyCnB,SAuBkB,KAvBlB;AAzCJ,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,qCAAqC;AAC9C,SAAS,gCAAgC;AACzC,SAAS,cAAc,uBAAuB,yBAAyB;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,IAAI,WAAW,wBAAwB;AAEvC,QAAM,SAAS,QAAQ,KAAK;AAC5B,QAAM,aAAa,uBAAuB,SAAS,QAAQ,MAAM;AACjE,QAAM,gBAAgB,gBAAgB,kBAAkB,OAAO,IAAI;AAEnE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAgC;AAC/B,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,cAAc,YAAY,MAAM,iBAAiB,OAAO,IAAI,GAAG,CAAC,OAAO,MAAM,gBAAgB,CAAC;AACpG,QAAM,cAAc,YAAY,MAAM,aAAa,MAAM,GAAG,CAAC,cAAc,MAAM,CAAC;AAClF,QAAM,yBAAyB,YAAY,OAAO,EAAE,QAAQ,WAAW,IAAI,CAAC,QAAQ,UAAU,CAAC;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,8BAA8B;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,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK;AAAA;AAAA,QAC1E;AAAA,QACA,oBAAC,qBAAkB,eAA8B,wBAC9C,iBAAO,OACV;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useContext } from "react";
+import { PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_OPTION_HEIGHT } from "../constants/index.js";
+import { DSPerPageSelectorContext } from "../DSPerPageSelectorCTX.js";
+import { StyledFloatingWrapper, StyledHeader, StyledList, StyledListWrapper, StyledPanel } from "../styled.js";
+import { OptionRenderer } from "./OptionRenderer.js";
+const getEstimatedSize = () => PER_PAGE_SELECTOR_OPTION_HEIGHT;
+const Panel = () => {
+  const {
+    ownerPropsConfig,
+    isOpen,
+    options,
+    panelStyle,
+    listMaxHeight,
+    floatingStyles,
+    floatingContext,
+    floatingInnerRef,
+    listActionRef,
+    handleListWrapperRef,
+    handlePanelKeyDown,
+    handlePanelKeyDownCapture,
+    handleBlurOutOfWidget,
+    headerId,
+    listId,
+    dialogId
+  } = useContext(DSPerPageSelectorContext);
+  const getOptionId = useCallback((index) => options[index].dsId, [options]);
+  return /* @__PURE__ */ jsx(
+    StyledFloatingWrapper,
+    {
+      innerRef: floatingInnerRef,
+      isOpen,
+      floatingStyles,
+      context: floatingContext,
+      id: dialogId,
+      role: "dialog",
+      "aria-labelledby": headerId,
+      ...ownerPropsConfig,
+      children: /* @__PURE__ */ jsxs(
+        StyledPanel,
+        {
+          "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.PANEL,
+          style: panelStyle,
+          onKeyDownCapture: handlePanelKeyDownCapture,
+          onKeyDown: handlePanelKeyDown,
+          onBlur: handleBlurOutOfWidget,
+          ...ownerPropsConfig,
+          children: [
+            /* @__PURE__ */ jsx(
+              StyledHeader,
+              {
+                id: headerId,
+                "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.HEADER,
+                ...ownerPropsConfig,
+                children: /* @__PURE__ */ jsx("span", { children: "Per Page" })
+              }
+            ),
+            /* @__PURE__ */ jsx(StyledListWrapper, { innerRef: handleListWrapperRef, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(
+              StyledList,
+              {
+                dsFastlistWrapperList: {
+                  role: "listbox",
+                  id: listId,
+                  "aria-labelledby": headerId,
+                  // legacy data-testid — preserved for QA/consumer compatibility, breaking change if removed
+                  "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.LIST
+                },
+                dsFastlistItem: { role: "none" },
+                dsFastlistContainer: { style: { height: "auto", maxHeight: listMaxHeight } },
+                actionRef: listActionRef,
+                count: options.length,
+                ItemRenderer: OptionRenderer,
+                getId: getOptionId,
+                estimateSize: getEstimatedSize,
+                remountOnCountChange: false,
+                ...ownerPropsConfig
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "DSPerPageSelector.Panel";
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/parts/Panel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;AC2CjB,SAeI,KAfJ;AA3CN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,+BAA+B,uCAAuC;AAC/E,SAAS,gCAAgC;AACzC,SAAS,uBAAuB,cAAc,YAAY,mBAAmB,mBAAmB;AAChG,SAAS,sBAAsB;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,IAAI,WAAW,wBAAwB;AAEvC,QAAM,cAAc,YAAY,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,8BAA8B;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,8BAA8B;AAAA,gBAC1C,GAAG;AAAA,gBAEJ,8BAAC,UAAK,sBAAQ;AAAA;AAAA,YAChB;AAAA,YACA,oBAAC,qBAAkB,UAAU,sBAAuB,GAAG,kBACrD;AAAA,cAAC;AAAA;AAAA,gBACC,uBAAuB;AAAA,kBACrB,MAAM;AAAA,kBACN,IAAI;AAAA,kBACJ,mBAAmB;AAAA;AAAA,kBAEnB,eAAe,8BAA8B;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/esm/parts/DSPerPageSelector/parts/Trigger.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "@elliemae/ds-icons";
+import { DSTypography } from "@elliemae/ds-typography";
+import { useCallback, useContext } from "react";
+import { PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_REGION_FOCUSES } from "../constants/index.js";
+import { DSPerPageSelectorContext } from "../DSPerPageSelectorCTX.js";
+import { StyledTrigger, StyledTriggerWrapper } from "../styled.js";
+const Trigger = () => {
+  const {
+    propsWithDefault: { pageSize },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    isOpen,
+    focusTrackers: { focusRegion },
+    chevronRef,
+    handleTriggerRef,
+    handleTriggerClick,
+    handleTriggerKeyDown,
+    handleBlurOutOfWidget,
+    dialogId
+  } = useContext(DSPerPageSelectorContext);
+  const isFocusTarget = focusRegion === PER_PAGE_SELECTOR_REGION_FOCUSES.TRIGGER;
+  const handleRef = 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__ */ jsx(StyledTriggerWrapper, { "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.TRIGGER_WRAPPER, ...ownerPropsConfig, children: /* @__PURE__ */ jsxs(
+      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": PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
+        ...globalAttributes,
+        ...xstyledProps,
+        ...ownerPropsConfig,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+        onBlur: handleBlurOutOfWidget,
+        children: [
+          /* @__PURE__ */ jsxs(DSTypography, { variant: "b1", as: "span", className: "typography-per-page-selector", children: [
+            pageSize,
+            " / page"
+          ] }),
+          /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
+        ]
+      }
+    ) })
+  );
+};
+Trigger.displayName = "DSPerPageSelector.Trigger";
+export {
+  Trigger
+};
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/parts/Trigger.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACqDf,SAGA,KAHA;AArDR,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,+BAA+B,wCAAwC;AAChF,SAAS,gCAAgC;AACzC,SAAS,eAAe,4BAA4B;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,IAAI,WAAW,wBAAwB;AAGvC,QAAM,gBAAgB,gBAAgB,iCAAiC;AACvE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAmC;AAClC,uBAAiB,IAAI;AACrB,UAAI,QAAQ,cAAe,MAAK,MAAM;AAAA,IACxC;AAAA,IACA,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA;AAAA;AAAA,IAEE,oBAAC,wBAAqB,eAAa,8BAA8B,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,8BAA8B;AAAA,QAC1C,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QAER;AAAA,+BAAC,gBAAa,SAAQ,MAAK,IAAG,QAAO,WAAU,gCAC5C;AAAA;AAAA,YAAS;AAAA,aACZ;AAAA,UACA,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG,UAAU,YAAY;AAAA;AAAA;AAAA,IACtE,GACF;AAAA;AAEJ;AAEA,QAAQ,cAAc;",
+  "names": []
+}

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

@@ -18,8 +18,25 @@ const DSPerPageSelectorPropTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   pageSize: PropTypes.number.description("The current page size").defaultValue(10),
-  onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
-  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).description("The available options for page size").defaultValue([10]),
+  onPageSizeChange: 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: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        type: PropTypes.oneOf(["single"]),
+        dsId: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        value: 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: PropTypes.oneOfType([PropTypes.number, 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: PropTypes.number.description("Min for the per page options").defaultValue(0),
   maxPerPage: PropTypes.number.description("Max for the per page options").defaultValue(100),
   perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5)

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,+BAA+B;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,GAAG,yBAAyB,kBAAkB,uBAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,UAAU,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,EACxF,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,+BAA+B;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,GAAG,yBAAyB,kBAAkB,uBAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,UAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,MAAM,IAAI;AAAA,EAC1B,gBAAgB,UAAU;AAAA,IACxB,UAAU,UAAU;AAAA,MAClB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,QACd,MAAM,UAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,QAChC,MAAM,UAAU,OAAO;AAAA,QACvB,OAAO,UAAU,OAAO;AAAA,QACxB,OAAO,UAAU,OAAO;AAAA,MAC1B,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EACG;AAAA,IACC;AAAA,EACF,EACC,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE;AAAA,IACnE;AAAA,EACF;AAAA,EACA,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,UAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
   "names": []
 }

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

@@ -1,7 +1,15 @@
 import * as React from "react";
 import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { FloatingWrapper } from "@elliemae/ds-floating-context";
+import { DSFastList } from "@elliemae/ds-fast-list";
 import { css, styled } from "@elliemae/ds-system";
-import { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from "./constants/index.js";
+import {
+  DSPaginationName,
+  PER_PAGE_SELECTOR_HEADER_HEIGHT,
+  PER_PAGE_SELECTOR_OPTION_HEIGHT,
+  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,
+  PER_PAGE_SELECTOR_SLOTS
+} from "./constants/index.js";
 const fontSize13Base13 = 13 / 13;
 const fontSize13Base16 = 13 / 16;
 const fontSize12Base13 = 12 / 13;
@@ -20,14 +28,17 @@ const styledFocusCss = css`
     z-index: 7;
   }
 `;
-const InvisibleDiv = styled.div`
-  opacity: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: absolute;
+const optionFontSizeCss = css`
+  font-size: ${fontSize13Base16}rem;
+  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${fontSize13Base13}rem;
+  }
 `;
-const paginationDropdownButtonCommonStyles = css`
+const StyledTrigger = styled(DSButtonV3, {
+  name: DSPaginationName,
+  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,
+  preserveLegacyDataTestId: true
+})`
   min-height: 42px;
   display: grid;
   grid-auto-flow: column;
@@ -38,7 +49,9 @@ const paginationDropdownButtonCommonStyles = css`
   padding-right: 16px;
   grid-gap: 8px;
   font-size: 13px;
-  color: neutral-700;
+  /* the previous DSPerPageSelector declares color: neutral-700 here, but inside its css helper the token is never
+     resolved, so the declaration is dropped and the text renders with the browser's button color (black, greyed when
+     disabled). Not copied: the selector keeps what is rendered today (see dimsum_compliance_status_report.md) */
   cursor: pointer;
   border-radius: 0;
   font-weight: ${(props) => props.theme.fontWeights.regular};
@@ -49,39 +62,104 @@ const paginationDropdownButtonCommonStyles = css`
     cursor: not-allowed;
   }
   white-space: nowrap;
+
+  /* the typography variants own their font-size, so we target the rendered element by className instead of wrapping
+     DSTypography in styled() (same approach as the previous implementation) */
+  .typography-per-page-selector {
+    ${optionFontSizeCss}
+  }
 `;
-const PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {
+const StyledTriggerWrapper = styled("div", {
   name: DSPaginationName,
-  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,
-  preserveLegacyDataTestId: true
+  slot: PER_PAGE_SELECTOR_SLOTS.TRIGGER_WRAPPER
 })`
-  ${paginationDropdownButtonCommonStyles}
-  /**
- * Pagination uses DSTypography internally, but each typography variant defines
- * its own font-size. When these components are placed inside a styled() wrapper,
- * trying to style them via styled(DSTypography) triggers TypeScript errors
- * because DSTypography exposes  "as"  props and variant-specific overrides.
- *
- * Instead of wrapping DSTypography directly in styled(), we target the
- * underlying rendered elements via className/id. This avoids the TS conflicts
- * while still allowing us to override their font-size reliably.
- */
-  .typography-per-page-selector {
-    font-size: ${fontSize13Base16}rem;
-    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
-      font-size: ${fontSize13Base13}rem;
-    }
-  }
+  display: contents;
 `;
-const StyledHeader = styled.div`
+const StyledFloatingWrapper = styled(FloatingWrapper, {
+  name: DSPaginationName,
+  slot: PER_PAGE_SELECTOR_SLOTS.FLOATING_WRAPPER
+})``;
+const StyledPanel = styled("div", { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.PANEL })`
+  display: grid;
+  grid-template-rows: auto 1fr;
+  /* same as the previous DSDropdownMenuV2 wrapper: 4px of padding below the list */
+  padding-bottom: ${PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM}px;
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+`;
+const StyledHeader = styled("div", { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.HEADER })`
+  display: grid;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: ${PER_PAGE_SELECTOR_HEADER_HEIGHT}px;
+  padding: 0 0 0 4px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[300]};
   font-size: ${fontSize12Base16}rem;
+  color: ${({ theme }) => theme.colors.neutral[500]};
   @media (min-width: ${({ theme }) => theme.breakpoints.small}) {
     font-size: ${fontSize12Base13}rem;
   }
 `;
+const StyledListWrapper = styled("div", {
+  name: DSPaginationName,
+  slot: PER_PAGE_SELECTOR_SLOTS.LIST_WRAPPER
+})``;
+const StyledList = styled(DSFastList, { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.LIST })``;
+const StyledOption = styled("div", { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.OPTION })`
+  position: relative;
+  display: grid;
+  align-items: center;
+  column-gap: 8px;
+  min-height: ${PER_PAGE_SELECTOR_OPTION_HEIGHT}px;
+  padding: 4px 16px;
+  cursor: pointer;
+  list-style: none;
+  ${optionFontSizeCss}
+  background-color: ${({ theme }) => theme.colors.neutral["000"]};
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+  }
+  &:focus {
+    outline: none;
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+    &:after {
+      display: block;
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid ${({ theme }) => theme.colors.brand[500]};
+      pointer-events: none;
+      z-index: 7;
+    }
+  }
+`;
+const StyledOptionCheckmark = styled("span", {
+  name: DSPaginationName,
+  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_CHECKMARK
+})`
+  display: grid;
+  place-items: center;
+`;
+const StyledOptionLabel = styled("span", {
+  name: DSPaginationName,
+  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_LABEL
+})`
+  /* labels wrap, they are never truncated (see stories/docs/principles/a11y/TextTruncationCriticalities.md) */
+  white-space: normal;
+  overflow-wrap: anywhere;
+`;
 export {
-  InvisibleDiv,
-  PaginationDropdownButtonPerPageSelector,
-  StyledHeader
+  StyledFloatingWrapper,
+  StyledHeader,
+  StyledList,
+  StyledListWrapper,
+  StyledOption,
+  StyledOptionCheckmark,
+  StyledOptionLabel,
+  StyledPanel,
+  StyledTrigger,
+  StyledTriggerWrapper
 };
 //# sourceMappingURL=styled.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\n\nconst fontSize12Base13 = 12 / 13;\nconst fontSize12Base16 = 12 / 16;\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\n  min-height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n  /**\n * Pagination uses DSTypography internally, but each typography variant defines\n * its own font-size. When these components are placed inside a styled() wrapper,\n * trying to style them via styled(DSTypography) triggers TypeScript errors\n * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n *\n * Instead of wrapping DSTypography directly in styled(), we target the\n * underlying rendered elements via className/id. This avoids the TS conflicts\n * while still allowing us to override their font-size reliably.\n */\n  .typography-per-page-selector {\n    font-size: ${fontSize13Base16}rem;\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${fontSize13Base13}rem;\n    }\n  }\n`;\n\nexport const StyledHeader = styled.div`\n  font-size: ${fontSize12Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,+BAA+B;AAC1D,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,0CAA0C,OAAO,YAAY;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,wBAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYvB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAK5B,MAAM,eAAe,OAAO;AAAA,eACpB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSFastList } from '@elliemae/ds-fast-list';\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport {\n  DSPaginationName,\n  PER_PAGE_SELECTOR_HEADER_HEIGHT,\n  PER_PAGE_SELECTOR_OPTION_HEIGHT,\n  PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM,\n  PER_PAGE_SELECTOR_SLOTS,\n} from './constants/index.js';\n\n// the font sizes are the ones of the previous DSPerPageSelector (same rem/px dance between the 13px and 16px base)\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\nconst fontSize12Base13 = 12 / 13;\nconst fontSize12Base16 = 12 / 16;\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nconst optionFontSizeCss = css`\n  font-size: ${fontSize13Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize13Base13}rem;\n  }\n`;\n\nexport const StyledTrigger = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  min-height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  /* the previous DSPerPageSelector declares color: neutral-700 here, but inside its css helper the token is never\n     resolved, so the declaration is dropped and the text renders with the browser's button color (black, greyed when\n     disabled). Not copied: the selector keeps what is rendered today (see dimsum_compliance_status_report.md) */\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n\n  /* the typography variants own their font-size, so we target the rendered element by className instead of wrapping\n     DSTypography in styled() (same approach as the previous implementation) */\n  .typography-per-page-selector {\n    ${optionFontSizeCss}\n  }\n`;\n\nexport const StyledTriggerWrapper = styled('div', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.TRIGGER_WRAPPER,\n})`\n  display: contents;\n`;\n\nexport const StyledFloatingWrapper = styled(FloatingWrapper, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.FLOATING_WRAPPER,\n})``;\n\nexport const StyledPanel = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.PANEL })`\n  display: grid;\n  grid-template-rows: auto 1fr;\n  /* same as the previous DSDropdownMenuV2 wrapper: 4px of padding below the list */\n  padding-bottom: ${PER_PAGE_SELECTOR_PANEL_PADDING_BOTTOM}px;\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledHeader = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.HEADER })`\n  display: grid;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: ${PER_PAGE_SELECTOR_HEADER_HEIGHT}px;\n  padding: 0 0 0 4px;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[300]};\n  font-size: ${fontSize12Base16}rem;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n\n// explicit height: the virtual list needs a constrained box to scroll (its own container is height: 100%)\nexport const StyledListWrapper = styled('div', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.LIST_WRAPPER,\n})``;\n\nexport const StyledList = styled(DSFastList, { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.LIST })``;\n\nexport const StyledOption = styled('div', { name: DSPaginationName, slot: PER_PAGE_SELECTOR_SLOTS.OPTION })`\n  position: relative;\n  display: grid;\n  align-items: center;\n  column-gap: 8px;\n  min-height: ${PER_PAGE_SELECTOR_OPTION_HEIGHT}px;\n  padding: 4px 16px;\n  cursor: pointer;\n  list-style: none;\n  ${optionFontSizeCss}\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  &:hover {\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n  }\n  &:focus {\n    outline: none;\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 1px solid ${({ theme }) => theme.colors.brand[500]};\n      pointer-events: none;\n      z-index: 7;\n    }\n  }\n`;\n\nexport const StyledOptionCheckmark = styled('span', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_CHECKMARK,\n})`\n  display: grid;\n  place-items: center;\n`;\n\nexport const StyledOptionLabel = styled('span', {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.OPTION_LABEL,\n})`\n  /* labels wrap, they are never truncated (see stories/docs/principles/a11y/TextTruncationCriticalities.md) */\n  white-space: normal;\n  overflow-wrap: anywhere;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,KAAK,cAAc;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAM9D,MAAM,oBAAoB;AAAA,eACX,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAI1B,MAAM,gBAAgB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAgBgB,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUd,iBAAiB;AAAA;AAAA;AAIhB,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAIM,MAAM,wBAAwB,OAAO,iBAAiB;AAAA,EAC3D,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAEM,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,wBAAwB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,oBAIpF,sCAAsC;AAAA,sBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGzD,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,wBAAwB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,gBAI1F,+BAA+B;AAAA;AAAA,6BAElB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,eACtD,gBAAgB;AAAA,WACpB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,uBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;AAK1B,MAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAEM,MAAM,aAAa,OAAO,YAAY,EAAE,MAAM,kBAAkB,MAAM,wBAAwB,KAAK,CAAC;AAEpG,MAAM,eAAe,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,wBAAwB,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK1F,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAI3C,iBAAiB;AAAA,sBACC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA,wBAExC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAItC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BASpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,wBAAwB,OAAO,QAAQ;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,wBAAwB;AAChC,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/DSPerPageSelector/typescript-testing/slots-props.js

@@ -3,7 +3,16 @@ const SlotPropsAsObj = {
   dsPaginationPerPageSelector: { "aria-label": "just a typescript test" }
 };
 const SlotPropsAsFunctions = {
-  dsPaginationPerPageSelector: () => ({ "aria-label": "just a typescript test" })
+  dsPaginationPerPageSelector: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorTriggerWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorFloatingWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorPanel: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorHeader: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorListWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorList: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOption: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOptionCheckmark: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationPerPageSelectorOptionLabel: () => ({ "aria-label": "just a typescript test" })
 };
 const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
 //# sourceMappingURL=slots-props.js.map

package/dist/esm/parts/DSPerPageSelector/typescript-testing/slots-props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/typescript-testing/slots-props.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPerPageSelectorT.Props> = {\n  dsPaginationPerPageSelector: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPerPageSelectorT.SlotFunctionArguments = {\n  dsPaginationPerPageSelector: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,iBAAoD;AAAA,EACxD,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AACA,MAAM,uBAAiE;AAAA,EACrE,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAC/E;AACA,MAAM,6CAEF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from '../constants/index.js';\nimport type { DSPerPageSelectorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPerPageSelectorT.Props> = {\n  dsPaginationPerPageSelector: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPerPageSelectorT.SlotFunctionArguments = {\n  dsPaginationPerPageSelector: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorTriggerWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorFloatingWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorPanel: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorHeader: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorListWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorList: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOption: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOptionCheckmark: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationPerPageSelectorOptionLabel: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,MAAM,iBAAoD;AAAA,EACxD,6BAA6B,EAAE,cAAc,yBAAyB;AACxE;AACA,MAAM,uBAAiE;AAAA,EACrE,6BAA6B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC7E,2CAA2C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC3F,4CAA4C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5F,kCAAkC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClF,mCAAmC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnF,wCAAwC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACxF,iCAAiC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACjF,mCAAmC,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACnF,4CAA4C,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC5F,wCAAwC,OAAO,EAAE,cAAc,yBAAyB;AAC1F;AACA,MAAM,6CAEF;",
   "names": []
 }

package/dist/esm/parts/DSPerPageSelector/typescript-testing/typescript-testing.js

@@ -3,8 +3,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DSPerPageSelector } from "../index.js";
 const testRequiredProps = {};
 const testOptionalProps = {
-  perPageOptions: [5, 10, 20]
+  perPageOptions: [5, 10, 20],
+  listWidth: 120
 };
+const testOptionalPropsCssLength = { listWidth: "10rem" };
 const testPartialDefaults = {
   onPageSizeChange: () => null,
   perPageStep: 5
@@ -63,4 +65,61 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSPerPageSelector, { ...testDefinitionAsConst }),
   /* @__PURE__ */ jsx(DSPerPageSelector, { pageSize: 10, onPageSizeChange: () => null, perPageStep: 5, minPerPage: 0, maxPerPage: 100 })
 ] });
+const testOptionObject = { type: "single", dsId: "all", label: "All", value: 1e3 };
+const testOptionObjectWithoutType = { dsId: "all", label: "All", value: 1e3 };
+const testPerPageOptions = [
+  10,
+  20,
+  testOptionObject,
+  testOptionObjectWithoutType
+];
+const testNoRender = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `render` is not part of the contract (it only worked because the dropdown got the options unchanged)
+  render: () => null
+};
+const testNoDisabled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `disabled` is not part of the contract
+  disabled: true
+};
+const testNoApplyAriaDisabled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `applyAriaDisabled` is not part of the contract
+  applyAriaDisabled: true
+};
+const testNoOnClick = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error `onClick` is not part of the contract
+  onClick: () => null
+};
+const testNoGlobalAttributes = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error global attributes are not part of the contract
+  "aria-label": "x"
+};
+const testNoXstyled = {
+  dsId: "a",
+  label: "A",
+  value: 1,
+  // @ts-expect-error xstyled props are not part of the contract
+  mt: "xs"
+};
+const testValueIsANumber = {
+  dsId: "a",
+  label: "A",
+  // @ts-expect-error the value is the number of rows
+  value: "many"
+};
+const testDsIdIsRequired = { label: "A", value: 1 };
 //# sourceMappingURL=typescript-testing.js.map