@elliemae/ds-pagination 3.57.0-next.5 → 3.57.0-next.51

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

@@ -0,0 +1,32 @@
+"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 __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 React = __toESM(require("react"));
+const SlotPropsAsObj = {
+  dsPaginationPaginator: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsPaginationPaginator: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\n\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DSPaginationName, PAGINATOR_SLOTS } from '../constants/index.js';\nimport type { DSPaginatorT } from '../react-desc-prop-types.js';\n\nconst SlotPropsAsObj: Partial<DSPaginatorT.Props> = {\n  dsPaginationPaginator: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPaginatorT.SlotFunctionArguments = {\n  dsPaginationPaginator: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACMvB,MAAM,iBAA8C;AAAA,EAClD,uBAAuB,EAAE,cAAc,yBAAyB;AAClE;AACA,MAAM,uBAA2D;AAAA,EAC/D,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AACzE;AACA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/cjs/{typescript-testing/typescript-paginator-valid.js → parts/DSPaginator/typescript-testing/typescript-testing.js}

@@ -99,4 +99,4 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
     }
   )
 ] });
-//# sourceMappingURL=typescript-paginator-valid.js.map
+//# sourceMappingURL=typescript-testing.js.map

package/dist/cjs/parts/DSPaginator/typescript-testing/typescript-testing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/typescript-testing/typescript-testing.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSPaginator } from '../index.js';\nimport type { DSPaginatorT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSPaginatorT.Props;\ntype ComponentPropsInternals = DSPaginatorT.InternalProps;\ntype ComponentPropsDefaultProps = DSPaginatorT.DefaultProps;\ntype ComponentPropsOptionalProps = DSPaginatorT.OptionalProps;\ntype ComponentPropsRequiredProps = DSPaginatorT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  onPageChange: () => null,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSPaginator {...testExplicitDefinition} />\n    <DSPaginator {...testInferedTypeCompatibility} />\n    <DSPaginator {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSPaginator\n      pageCount={0}\n      isLoadingPageCount={false}\n      pageIndex={1}\n      onPageChange={() => null}\n      pageDetails={[]}\n      pageDetailsTitle=\"\"\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACuFrB;AAtFF,eAA4B;AAU5B,MAAM,oBAAiD,CAAC;AAExD,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,cAAc,MAAM;AACtB;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAGA,MAAM,+BAA+B;AAAA,EACnC,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,wBAAa,GAAG,wBAAwB;AAAA,EACzC,4CAAC,wBAAa,GAAG,8BAA8B;AAAA,EAC/C,4CAAC,wBAAa,GAAG,uBAAuB;AAAA,EAExC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,cAAc,MAAM;AAAA,MACpB,aAAa,CAAC;AAAA,MACd,kBAAiB;AAAA;AAAA,EACnB;AAAA,GACF;",
+  "names": []
+}

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

@@ -0,0 +1,125 @@
+"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 DSPerPageSelector_exports = {};
+__export(DSPerPageSelector_exports, {
+  DSPerPageSelector: () => DSPerPageSelector,
+  DSPerPageSelectorWithSchema: () => DSPerPageSelectorWithSchema
+});
+module.exports = __toCommonJS(DSPerPageSelector_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_typography = require("@elliemae/ds-typography");
+var import_react = require("react");
+var import_usePerPageSelector = require("./config/usePerPageSelector.js");
+var import_constants = require("./constants/index.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+const Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHeader, { children: "Per Page" });
+const DSPerPageSelector = (props) => {
+  const {
+    propsWithDefault: { pageSize, onPageSizeChange },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    actionRef,
+    btnRef,
+    chevronRef,
+    chevronWidth,
+    isOpened,
+    options,
+    setIsOpened
+  } = (0, import_usePerPageSelector.usePerPageSelector)(props);
+  const buttonOnClick = (0, import_react.useMemo)(() => {
+    if (globalAttributes.onClick) return globalAttributes.onClick;
+    return () => setIsOpened((prev) => !prev);
+  }, [globalAttributes.onClick, setIsOpened]);
+  const maxOptionsLength = (0, import_react.useMemo)(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength;
+  }, [options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ds_dropdownmenu_v2.DSDropdownMenuV2,
+    {
+      isOpened,
+      options,
+      selectedOptions: { [pageSize.toString()]: true },
+      onOptionClick: (_, clickedOption) => {
+        onPageSizeChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      customOffset: [-(chevronWidth + 7), 2],
+      startPlacementPreference: "top-start",
+      actionRef,
+      minWidth: `calc(${chevronWidth + 60}px + ${maxOptionsLength}ch)`,
+      maxHeight: 300,
+      HeaderComp: Header,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.PaginationDropdownButtonPerPageSelector,
+        {
+          buttonType: "raw",
+          innerRef: btnRef,
+          "aria-pressed": isOpened,
+          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
+          "data-testid": import_constants.PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
+          ...globalAttributes,
+          ...xstyledProps,
+          ...ownerPropsConfig,
+          onClick: buttonOnClick,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ds_typography.DSTypography,
+              {
+                variant: "b1",
+                as: "span",
+                className: "typography-per-page-selector",
+                children: [
+                  pageSize,
+                  " / page"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"], innerRef: chevronRef })
+          ]
+        }
+      )
+    }
+  );
+};
+DSPerPageSelector.displayName = import_constants.DSPerPageSelectorName;
+const DSPerPageSelectorWithSchema = (0, import_ds_props_helpers.describe)(DSPerPageSelector);
+DSPerPageSelectorWithSchema.propTypes = import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema;
+//# sourceMappingURL=DSPerPageSelector.js.map

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

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

package/dist/cjs/parts/DSPerPageSelector/{getOptions.js.map → config/getOptions.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/DSPerPageSelector/getOptions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/getOptions.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import { range } from 'lodash-es';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\nexport const generateOption = (\n  value: number | DSDropdownMenuT.ItemSingleOptions,\n): DSDropdownMenuT.ItemSingleOptions => {\n  if (typeof value === 'object') {\n    return value;\n  }\n  return {\n    dsId: value.toString(),\n    value,\n    label: value.toString(),\n    type: 'single',\n  } as const;\n};\n\nexport const getOptions = (step: number, min: number, max: number) => {\n  const options = range(min, max + step, step).map(generateOption);\n  return min === 0 ? options.slice(1, options.length) : options;\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAsB;AAGf,MAAM,iBAAiB,CAC5B,UACsC;AACtC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEO,MAAM,aAAa,CAAC,MAAc,KAAa,QAAgB;AACpE,QAAM,cAAU,wBAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
   "names": []

package/dist/cjs/parts/DSPerPageSelector/{usePerPageSelector.js → config/usePerPageSelector.js}

@@ -32,11 +32,19 @@ __export(usePerPageSelector_exports, {
 });
 module.exports = __toCommonJS(usePerPageSelector_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_react = __toESM(require("react"));
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
+var import_useValidateProps = require("./useValidateProps.js");
 var import_getOptions = require("./getOptions.js");
-const usePerPageSelector = (props) => {
-  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;
+var import_useOnElementOnResize = require("../../shared/useOnElementOnResize.js");
+const usePerPageSelector = (propsFromUser) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
+  (0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;
   const [isOpened, setIsOpened] = (0, import_react.useState)(false);
   const options = (0, import_react.useMemo)(() => {
     if (perPageOptions) return perPageOptions.map(import_getOptions.generateOption);
@@ -44,27 +52,29 @@ const usePerPageSelector = (props) => {
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
   const actionRef = (0, import_react.useRef)({});
   const btnRef = (0, import_react.useRef)(null);
+  const chevronRef = (0, import_react.useRef)(null);
+  const { width: chevronWidth } = (0, import_useOnElementOnResize.useOnElementResize)(chevronRef);
   (0, import_react.useEffect)(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant(pageSize.toString());
       actionRef.current.scrollOptionIntoView(pageSize.toString());
     }
   }, [isOpened]);
-  const width = (0, import_react.useMemo)(() => {
-    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
-    return maxLength * 6 + 90;
-  }, [options]);
-  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
-  const xstyledAttributes = (0, import_ds_props_helpers.useGetXstyledProps)(props);
-  return {
-    actionRef,
-    btnRef,
-    width,
-    isOpened,
-    setIsOpened,
-    options,
-    globalAttributes,
-    xstyledAttributes
-  };
+  return import_react.default.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      actionRef,
+      btnRef,
+      chevronRef,
+      chevronWidth,
+      isOpened,
+      options,
+      setIsOpened
+    }),
+    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth]
+  );
 };
 //# sourceMappingURL=usePerPageSelector.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type DSPerPageSelectorT, DSPerPageSelectorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { generateOption, getOptions } from './getOptions.js';\nimport { useOnElementResize } from '../../shared/useOnElementOnResize.js';\n\nexport const usePerPageSelector = (propsFromUser: DSPerPageSelectorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPerPageSelectorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<\n    DSPerPageSelectorT.InternalProps,\n    HTMLButtonElement,\n    DSButtonV3T.Props\n  >(propsWithDefault);\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  // const instanceUid = React.useMemo(() => `ds-per-page-selector-${uid(5)}`, []);\n\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;\n  const [isOpened, setIsOpened] = useState(false);\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  const chevronRef = useRef<HTMLElement>(null);\n  const { width: chevronWidth } = useOnElementResize(chevronRef);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageSize.toString());\n      actionRef.current.scrollOptionIntoView(pageSize.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      actionRef,\n      btnRef,\n      chevronRef,\n      chevronWidth,\n      isOpened,\n      options,\n      setIsOpened,\n    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, isOpened, options, chevronRef, chevronWidth],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAKO;AACP,mBAA4D;AAE5D,mCAAwF;AACxF,8BAAiC;AACjC,wBAA2C;AAC3C,kCAAmC;AAE5B,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,uBAAmB,sDAA+D,eAAe,yCAAY;AACnH,gDAAiB,kBAAkB,6DAAgC;AAInE,QAAM,mBAAe,4CAAmB,gBAAgB;AAIxD,QAAM,uBAAmB,gDAIvB,gBAAgB;AAIlB,QAAM,uBAAmB,uCAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,cAAU,sBAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,gCAAc;AAC5D,eAAO,8BAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,IAAI;AAE7C,QAAM,iBAAa,qBAAoB,IAAI;AAC3C,QAAM,EAAE,OAAO,aAAa,QAAI,gDAAmB,UAAU;AAE7D,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAOb,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,kBAAkB,UAAU,SAAS,YAAY,YAAY;AAAA,EAClH;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,40 @@
+"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 useValidateProps_exports = {};
+__export(useValidateProps_exports, {
+  useValidateProps: () => useValidateProps
+});
+module.exports = __toCommonJS(useValidateProps_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("../constants/index.js");
+const useValidateProps = (props, propTypes) => {
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, propTypes, import_constants.DSPerPageSelectorName);
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/config/useValidateProps.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSPerPageSelectorT } from '../react-desc-prop-types.js';\nimport { DSPerPageSelectorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPerPageSelectorT.InternalProps,\n  propTypes: ValidationMap<DSPerPageSelectorT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPerPageSelectorName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA+C;AAG/C,uBAAsC;AAE/B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,8DAA+B,OAAO,WAAW,sCAAqB;AACxE;",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+"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 constants_exports = {};
+__export(constants_exports, {
+  DSPaginationName: () => import_constants.DSPaginationName,
+  DSPerPageSelectorName: () => DSPerPageSelectorName,
+  EXAMPLE_CONSTANTS: () => EXAMPLE_CONSTANTS,
+  PER_PAGE_SELECTOR_DATA_TESTID: () => PER_PAGE_SELECTOR_DATA_TESTID,
+  PER_PAGE_SELECTOR_SLOTS: () => PER_PAGE_SELECTOR_SLOTS
+});
+module.exports = __toCommonJS(constants_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../../constants/index.js");
+const DSPerPageSelectorName = "DSPerPageSelector";
+const EXAMPLE_CONSTANTS = {
+  HELLO: "WORLD",
+  FOO: "BAR"
+};
+const PER_PAGE_SELECTOR_SLOTS = {
+  PER_PAGE_SELECTOR: "per-page-selector"
+};
+const PER_PAGE_SELECTOR_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(import_constants.DSPaginationName, PER_PAGE_SELECTOR_SLOTS);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/DSPerPageSelector/constants/index.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\n// This should be used only for displayName, and useValidateProps.\n// For slots definition, use parent component name\nexport const DSPerPageSelectorName = 'DSPerPageSelector';\n\nexport const EXAMPLE_CONSTANTS = {\n  HELLO: 'WORLD',\n  FOO: 'BAR',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_SLOTS = {\n  PER_PAGE_SELECTOR: 'per-page-selector',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PER_PAGE_SELECTOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AACxC,uBAAiC;AAK1B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAAA,EAC/B,OAAO;AAAA,EACP,KAAK;AACP;AAGO,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AACrB;AAGO,MAAM,oCAAgC,0CAAwB,mCAAkB,uBAAuB;",
+  "names": []
+}

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

@@ -28,77 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DSPerPageSelector_exports = {};
 __export(DSPerPageSelector_exports, {
-  DSPerPageSelector: () => DSPerPageSelector,
-  DSPerPageSelectorWithSchema: () => DSPerPageSelectorWithSchema
+  DSPerPageSelector: () => import_DSPerPageSelector.DSPerPageSelector,
+  DSPerPageSelectorName: () => import_constants.DSPerPageSelectorName,
+  DSPerPageSelectorWithSchema: () => import_DSPerPageSelector.DSPerPageSelectorWithSchema,
+  PER_PAGE_SELECTOR_DATA_TESTID: () => import_constants.PER_PAGE_SELECTOR_DATA_TESTID,
+  PER_PAGE_SELECTOR_SLOTS: () => import_constants.PER_PAGE_SELECTOR_SLOTS
 });
 module.exports = __toCommonJS(DSPerPageSelector_exports);
 var React = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_dropdownmenu_v2 = require("@elliemae/ds-dropdownmenu-v2");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_react_desc_prop_types = require("../../react-desc-prop-types.js");
-var import_styled = require("../../styled.js");
-var import_DSPaginationDefinitions = require("../../DSPaginationDefinitions.js");
-var import_usePerPageSelector = require("./usePerPageSelector.js");
-var import_PaginationDataTestID = require("../../PaginationDataTestID.js");
-const Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Per Page" });
-const DSPerPageSelector = (props) => {
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
-    props,
-    import_react_desc_prop_types.perPageSelectorDefaultProps
-  );
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema, import_DSPaginationDefinitions.PerPageSelectorName);
-  const { pageSize, onPageSizeChange } = propsWithDefault;
-  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } = (0, import_usePerPageSelector.usePerPageSelector)(propsWithDefault);
-  const buttonOnClick = (0, import_react.useMemo)(() => {
-    if (globalAttributes.onClick) return globalAttributes.onClick;
-    return () => setIsOpened((prev) => !prev);
-  }, [globalAttributes.onClick, setIsOpened]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ds_dropdownmenu_v2.DSDropdownMenuV2,
-    {
-      isOpened,
-      options,
-      selectedOptions: { [pageSize.toString()]: true },
-      onOptionClick: (_, clickedOption) => {
-        onPageSizeChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      customOffset: [-23, 2],
-      startPlacementPreference: "top-start",
-      actionRef,
-      minWidth: width,
-      maxHeight: 300,
-      HeaderComp: Header,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_styled.PaginationDropdownButton,
-        {
-          buttonType: "raw",
-          innerRef: btnRef,
-          "aria-pressed": isOpened,
-          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
-          "data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR,
-          ...globalAttributes,
-          ...xstyledAttributes,
-          onClick: buttonOnClick,
-          children: [
-            pageSize,
-            " / page",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"] })
-          ]
-        }
-      )
-    }
-  );
-};
-DSPerPageSelector.displayName = import_DSPaginationDefinitions.PerPageSelectorName;
-const DSPerPageSelectorWithSchema = (0, import_ds_props_helpers.describe)(DSPerPageSelector).description("Per Page Selector");
-DSPerPageSelectorWithSchema.propTypes = import_react_desc_prop_types.DSPerPageSelectorPropTypesSchema;
+var import_DSPerPageSelector = require("./DSPerPageSelector.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/parts/DSPerPageSelector/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginationDropdownButton } from '../../styled.js';\nimport { PerPageSelectorName } from '../../DSPaginationDefinitions.js';\nimport { usePerPageSelector } from './usePerPageSelector.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nconst Header = () => <>Per Page</>;\n\nexport const DSPerPageSelector: React.ComponentType<DSPaginationT.PerPageSelectorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PerPageSelectorInternalProps>(\n    props,\n    perPageSelectorDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);\n\n  const { pageSize, onPageSizeChange } = propsWithDefault;\n\n  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } =\n    usePerPageSelector(propsWithDefault);\n\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-23, 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      minWidth={width}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButton\n        buttonType=\"raw\"\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`${pageSize} rows per page. Press to select rows per page`}\n        data-testid={PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledAttributes}\n        onClick={buttonOnClick}\n      >\n        {pageSize} / page\n        <ChevronDown color={['brand-primary', '700']} />\n      </PaginationDropdownButton>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.displayName = PerPageSelectorName;\nexport const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description('Per Page Selector');\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADaF;AAbrB,mBAA+B;AAC/B,8BAAuF;AAEvF,gCAAiC;AACjC,sBAA4B;AAE5B,mCAA8E;AAC9E,oBAAyC;AACzC,qCAAoC;AACpC,gCAAmC;AACnC,kCAAuC;AAGvC,MAAM,SAAS,MAAM,2EAAE,sBAAQ;AAExB,MAAM,oBAA6E,CAAC,UAAU;AACnG,QAAM,uBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,8DAA+B,kBAAkB,+DAAkC,kDAAmB;AAEtG,QAAM,EAAE,UAAU,iBAAiB,IAAI;AAEvC,QAAM,EAAE,WAAW,QAAQ,OAAO,UAAU,aAAa,SAAS,kBAAkB,kBAAkB,QACpG,8CAAmB,gBAAgB;AAErC,QAAM,oBAA4C,sBAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,CAAC,GAAG,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,KAAK,CAAC;AAAA,MACrB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG,QAAQ;AAAA,UACvB,eAAa,mDAAuB;AAAA,UACnC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AACzB,MAAM,kCAA8B,kCAAS,iBAAiB,EAAE,YAAY,mBAAmB;AACtG,4BAA4B,YAAY;",
+  "sources": ["../../../../src/parts/DSPerPageSelector/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export { DSPerPageSelector, DSPerPageSelectorWithSchema } from './DSPerPageSelector.js';\nexport { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\nexport type { DSPerPageSelectorT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAA+D;AAC/D,uBAA8F;",
   "names": []
 }

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

@@ -0,0 +1,58 @@
+"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 react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSPerPageSelectorPropTypes: () => DSPerPageSelectorPropTypes,
+  DSPerPageSelectorPropTypesSchema: () => DSPerPageSelectorPropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const defaultProps = {
+  pageSize: 10,
+  onPageSizeChange: () => null,
+  perPageStep: 5,
+  minPerPage: 0,
+  maxPerPage: 100
+};
+const DSPerPageSelectorPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSPaginationName, import_constants.PER_PAGE_SELECTOR_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  pageSize: import_ds_props_helpers.PropTypes.number.description("The current page size").defaultValue(10),
+  onPageSizeChange: import_ds_props_helpers.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
+  perPageOptions: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.number, import_ds_props_helpers.PropTypes.object])).description("The available options for page size").defaultValue([10]),
+  minPerPage: import_ds_props_helpers.PropTypes.number.description("Min for the per page options").defaultValue(0),
+  maxPerPage: import_ds_props_helpers.PropTypes.number.description("Max for the per page options").defaultValue(100),
+  perPageStep: import_ds_props_helpers.PropTypes.number.description("Step for the per page options").defaultValue(5)
+};
+const DSPerPageSelectorPropTypesSchema = DSPerPageSelectorPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/DSPerPageSelector/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport 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\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PER_PAGE_SELECTOR_SLOTS> {\n    perPageOptions?: (number | DSDropdownMenuT.ItemSingleOptions)[];\n  }\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPerPageSelectorT.DefaultProps = {\n  pageSize: 10,\n  onPageSizeChange: () => null,\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n};\n\nexport const DSPerPageSelectorPropTypes: DSPropTypesSchema<DSPerPageSelectorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PER_PAGE_SELECTOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object]))\n    .description('The available options for page size')\n    .defaultValue([10]),\n  minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n};\n\nexport const DSPerPageSelectorPropTypesSchema =\n  DSPerPageSelectorPropTypes as unknown as ValidationMap<DSPerPageSelectorT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAKO;AAEP,uBAA0D;AAmCnD,MAAM,eAAgD;AAAA,EAC3D,UAAU;AAAA,EACV,kBAAkB,MAAM;AAAA,EACxB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AACd;AAEO,MAAM,6BAA0E;AAAA,EACrF,OAAG,kDAAyB,mCAAkB,wCAAuB;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,kBAAkB,kCAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,kCAAU,QAAQ,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,EACxF,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,kCAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,kCAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAC3F;AAEO,MAAM,mCACX;",
+  "names": []
+}