@elliemae/ds-pagination 3.57.0-next.34 → 3.57.0-next.35

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

@@ -1,116 +1,11 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { ChevronDown } from "@elliemae/ds-icons";
-import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { Grid } from "@elliemae/ds-grid";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
-import { DSTypography } from "@elliemae/ds-typography";
-import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
-import { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from "../../styled.js";
-import { paginatorDefaultProps, DSPaginatorPropTypesSchema } from "../../react-desc-prop-types.js";
-import { PaginatorName } from "../../DSPaginationDefinitions.js";
-import { usePaginator } from "./usePaginator.js";
-import { createPaginatorHeader } from "./createPaginatorHeader.js";
-import { PAGINATION_DATA_TESTID } from "../../PaginationDataTestID.js";
-const DSPaginator = (props) => {
-  const propsWithDefault = useMemoMergePropsWithDefault(
-    props,
-    paginatorDefaultProps
-  );
-  useValidateTypescriptPropTypes(propsWithDefault, DSPaginatorPropTypesSchema, PaginatorName);
-  const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;
-  const {
-    btnRef,
-    btnWidth,
-    pageInfoWidth,
-    options,
-    isOpened,
-    setIsOpened,
-    detailWidth,
-    globalAttributes,
-    xstyledAttributes,
-    actionRef,
-    onKeyDown
-  } = usePaginator(propsWithDefault);
-  const Header = useMemo(
-    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth }),
-    [pageDetailsTitle, pageInfoWidth]
-  );
-  const buttonOnClick = useMemo(() => {
-    if (globalAttributes.onClick) return globalAttributes.onClick;
-    return () => setIsOpened((prev) => !prev);
-  }, [globalAttributes.onClick, setIsOpened]);
-  return /* @__PURE__ */ jsxs(
-    DSDropdownMenuV2,
-    {
-      isOpened,
-      options,
-      selectedOptions: { [pageIndex.toString()]: true },
-      onOptionClick: (_, clickedOption) => {
-        onPageChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current?.focus();
-      },
-      customOffset: [-23, 2],
-      startPlacementPreference: "top-start",
-      actionRef,
-      onKeyDown,
-      minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
-      maxHeight: 300,
-      HeaderComp: Header,
-      children: [
-        /* @__PURE__ */ jsx(
-          PaginationDropdownButton,
-          {
-            buttonType: "raw",
-            disabled: isLoadingPageCount,
-            innerRef: btnRef,
-            "aria-pressed": isOpened,
-            "aria-label": `Page ${pageIndex} out of ${pageCount}, ${pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : "\b\b"}. Press to change the current page`,
-            "data-testid": PAGINATION_DATA_TESTID.PAGINATOR,
-            ...globalAttributes,
-            ...xstyledAttributes,
-            onClick: buttonOnClick,
-            children: /* @__PURE__ */ jsxs(Grid, { gutter: "xxxs", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
-              /* @__PURE__ */ jsx(DSTypography, { fontSize: "18px", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageIndex }),
-              "/ ",
-              pageCount,
-              isLoadingPageCount && /* @__PURE__ */ jsx(DSCircularIndeterminateIndicator, { ml: "xxxs", mr: "xxxs", size: "xs" }),
-              pageDetails.length !== 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "12px", ml: "12px", mr: "xxxs" }),
-                /* @__PURE__ */ jsx(
-                  DSTypography,
-                  {
-                    fontSize: "13px",
-                    w: detailWidth,
-                    mr: "xxs",
-                    variant: "b1",
-                    as: "span",
-                    fontWeight: "semibold",
-                    textAlign: "start",
-                    children: pageDetails[pageIndex - 1]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(Grid, { style: { position: "relative" }, children: pageDetails.map((pageDetail) => /* @__PURE__ */ jsx(InvisibleDiv, { "data-testid": "ds-pagination-invisible-detail-for-width-calc", children: /* @__PURE__ */ jsx(DSTypography, { fontSize: "13px", mr: "xxs", variant: "b1", as: "span", fontWeight: "semibold", textAlign: "start", children: pageDetail }) }, pageDetail)) })
-      ]
-    }
-  );
-};
-DSPaginator.displayName = PaginatorName;
-const DSPaginatorWithSchema = describe(DSPaginator).description("Per Page Selector");
-DSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;
+import { DSPaginator, DSPaginatorWithSchema } from "./DSPaginator.js";
+import { DSPaginatorName, PAGINATOR_DATA_TESTID, PAGINATOR_SLOTS } from "./constants/index.js";
 export {
   DSPaginator,
-  DSPaginatorWithSchema
+  DSPaginatorName,
+  DSPaginatorWithSchema,
+  PAGINATOR_DATA_TESTID,
+  PAGINATOR_SLOTS
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled.js';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginatorName } from '../../DSPaginationDefinitions.js';\nimport { usePaginator } from './usePaginator.js';\nimport { createPaginatorHeader } from './createPaginatorHeader.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const DSPaginator: React.ComponentType<DSPaginationT.PaginatorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PaginatorInternalProps>(\n    props,\n    paginatorDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPaginatorPropTypesSchema, PaginatorName);\n\n  const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;\n\n  const {\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    setIsOpened,\n    detailWidth,\n    globalAttributes,\n    xstyledAttributes,\n    actionRef,\n    onKeyDown,\n  } = usePaginator(propsWithDefault);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth }),\n    [pageDetailsTitle, pageInfoWidth],\n  );\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={{ [pageIndex.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageChange((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      onKeyDown={onKeyDown}\n      minWidth={pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButton\n        buttonType=\"raw\"\n        disabled={isLoadingPageCount}\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`Page ${pageIndex} out of ${pageCount}, ${\n          pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : '\\b\\b'\n        }. Press to change the current page`}\n        data-testid={PAGINATION_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledAttributes}\n        onClick={buttonOnClick}\n      >\n        <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <DSTypography fontSize=\"18px\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n            {pageIndex}\n          </DSTypography>\n          / {pageCount}\n          {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n          {pageDetails.length !== 0 && (\n            <>\n              <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" />\n              <DSTypography\n                fontSize=\"13px\"\n                w={detailWidth}\n                mr=\"xxs\"\n                variant=\"b1\"\n                as=\"span\"\n                fontWeight=\"semibold\"\n                textAlign=\"start\"\n              >\n                {pageDetails[pageIndex - 1]}\n              </DSTypography>\n            </>\n          )}\n          <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} />\n        </Grid>\n      </PaginationDropdownButton>\n      {/* We calculate the length of the longest detail here (this is as per specs) */}\n      <Grid style={{ position: 'relative' }}>\n        {pageDetails.map((pageDetail) => (\n          <InvisibleDiv data-testid=\"ds-pagination-invisible-detail-for-width-calc\" key={pageDetail}>\n            <DSTypography fontSize=\"13px\" mr=\"xxs\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n              {pageDetail}\n            </DSTypography>\n          </InvisibleDiv>\n        ))}\n      </Grid>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n"],
-  "mappings": "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",
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPaginator, DSPaginatorWithSchema } from './DSPaginator.js';\nexport { DSPaginatorName, PAGINATOR_DATA_TESTID, PAGINATOR_SLOTS } from './constants/index.js';\nexport type { DSPaginatorT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,6BAA6B;AACnD,SAAS,iBAAiB,uBAAuB,uBAAuB;",
   "names": []
 }

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
+const defaultProps = {
+  pageCount: 0,
+  isLoadingPageCount: false,
+  pageIndex: 1,
+  onPageChange: () => null,
+  pageDetails: [],
+  pageDetailsTitle: ""
+};
+const DSPaginatorPropTypes = {
+  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
+  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("How many pages are there"),
+  onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  isLoadingPageCount: PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false),
+  pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue("")
+};
+const DSPaginatorPropTypesSchema = DSPaginatorPropTypes;
+export {
+  DSPaginatorPropTypes,
+  DSPaginatorPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\n\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, PAGINATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginatorT {\n  export type SlotFunctionArguments = {\n    dsPaginationPaginator: () => object;\n  };\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    pageCount: number | string;\n    isLoadingPageCount: boolean;\n    pageIndex: number;\n    onPageChange: (page: number) => void;\n    pageDetails: string[] | readonly string[];\n    pageDetailsTitle: string;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PAGINATOR_SLOTS> {}\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: DSPaginatorT.DefaultProps = {\n  pageCount: 0,\n  isLoadingPageCount: false,\n  pageIndex: 1,\n  onPageChange: () => null,\n  pageDetails: [],\n  pageDetailsTitle: '',\n};\n\nexport const DSPaginatorPropTypes: DSPropTypesSchema<DSPaginatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n};\n\nexport const DSPaginatorPropTypesSchema = DSPaginatorPropTypes as unknown as ValidationMap<DSPaginatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB,uBAAuB;AAkC3C,MAAM,eAA0C;AAAA,EACrD,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AACpB;AAEO,MAAM,uBAA8D;AAAA,EACzE,GAAG,yBAAyB,kBAAkB,eAAe;AAAA,EAC7D,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,cAAc,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,oBAAoB,UAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAAA,EAC7G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AACpB;AAEO,MAAM,6BAA6B;",
+  "names": []
+}

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
+import { css, styled } from "@elliemae/ds-system";
+import { DSPaginationName, PAGINATOR_SLOTS } from "./constants/index.js";
+const styledFocusCss = css`
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    pointer-events: none;
+    z-index: 7;
+  }
+`;
+const InvisibleDiv = styled.div`
+  opacity: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+`;
+const paginationDropdownButtonCommonStyles = css`
+  height: 42px;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding-left: 16px;
+  padding-right: 16px;
+  grid-gap: 8px;
+  font-size: 13px;
+  color: neutral-700;
+  cursor: pointer;
+  border-radius: 0;
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  :focus {
+    ${styledFocusCss}
+  }
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  white-space: nowrap;
+`;
+const PaginationDropdownButtonPaginator = styled(DSButtonV3, {
+  name: DSPaginationName,
+  slot: PAGINATOR_SLOTS.PAGINATOR,
+  preserveLegacyDataTestId: true
+})`
+  ${paginationDropdownButtonCommonStyles}
+`;
+export {
+  InvisibleDiv,
+  PaginationDropdownButtonPaginator
+};
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/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, PAGINATOR_SLOTS } from './constants/index.js';\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  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  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPaginator = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PAGINATOR_SLOTS.PAGINATOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,uBAAuB;AAElD,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,oCAAoC,OAAO,YAAY;AAAA,EAClE,MAAM;AAAA,EACN,MAAM,gBAAgB;AAAA,EACtB,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,9 @@
+import * as React from "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/esm/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,YAAY,WAAW;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/esm/{typescript-testing/typescript-paginator-valid.js → parts/DSPaginator/typescript-testing/typescript-testing.js}

@@ -76,4 +76,4 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
     }
   )
 ] });
-//# sourceMappingURL=typescript-paginator-valid.js.map
+//# sourceMappingURL=typescript-testing.js.map

package/dist/esm/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,YAAY,WAAW;ACuFrB,mBAEE,KAFF;AAtFF,SAAS,mBAAmB;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,iCAEE;AAAA,sBAAC,eAAa,GAAG,wBAAwB;AAAA,EACzC,oBAAC,eAAa,GAAG,8BAA8B;AAAA,EAC/C,oBAAC,eAAa,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/esm/parts/DSPerPageSelector/DSPerPageSelector.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
+import { ChevronDown } from "@elliemae/ds-icons";
+import { describe } from "@elliemae/ds-props-helpers";
+import { usePerPageSelector } from "./config/usePerPageSelector.js";
+import { DSPerPageSelectorName, PER_PAGE_SELECTOR_DATA_TESTID } from "./constants/index.js";
+import { DSPerPageSelectorPropTypesSchema } from "./react-desc-prop-types.js";
+import { PaginationDropdownButtonPerPageSelector } from "./styled.js";
+const Header = () => /* @__PURE__ */ jsx(Fragment, { children: "Per Page" });
+const DSPerPageSelector = (props) => {
+  const {
+    propsWithDefault: { pageSize, onPageSizeChange },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    actionRef,
+    btnRef,
+    width,
+    isOpened,
+    options,
+    setIsOpened
+  } = usePerPageSelector(props);
+  const buttonOnClick = useMemo(() => {
+    if (globalAttributes.onClick) return globalAttributes.onClick;
+    return () => setIsOpened((prev) => !prev);
+  }, [globalAttributes.onClick, setIsOpened]);
+  return /* @__PURE__ */ jsx(
+    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__ */ jsxs(
+        PaginationDropdownButtonPerPageSelector,
+        {
+          buttonType: "raw",
+          innerRef: btnRef,
+          "aria-pressed": isOpened,
+          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
+          "data-testid": PER_PAGE_SELECTOR_DATA_TESTID.PER_PAGE_SELECTOR,
+          ...globalAttributes,
+          ...xstyledProps,
+          ...ownerPropsConfig,
+          onClick: buttonOnClick,
+          children: [
+            pageSize,
+            " / page",
+            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
+          ]
+        }
+      )
+    }
+  );
+};
+DSPerPageSelector.displayName = DSPerPageSelectorName;
+const DSPerPageSelectorWithSchema = describe(DSPerPageSelector);
+DSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;
+export {
+  DSPerPageSelector,
+  DSPerPageSelectorWithSchema
+};
+//# sourceMappingURL=DSPerPageSelector.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/DSPerPageSelector.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport 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 { 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 } from './styled.js';\n\nconst Header = () => <>Per Page</>;\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    width,\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  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      <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        {pageSize} / page\n        <ChevronDown color={['brand-primary', '700']} />\n      </PaginationDropdownButtonPerPageSelector>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.displayName = DSPerPageSelectorName;\nconst DSPerPageSelectorWithSchema = describe(DSPerPageSelector);\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUF,wBAwCf,YAxCe;AAVrB,SAAgB,eAAe;AAE/B,SAAS,wBAA8C;AACvD,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB,qCAAqC;AACrE,SAAS,wCAAiE;AAC1E,SAAS,+CAA+C;AAExD,MAAM,SAAS,MAAM,gCAAE,sBAAQ;AAE/B,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,EACF,IAAI,mBAAmB,KAAK;AAC5B,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAC1C,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,8BAA8B;AAAA,UAC1C,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/getOptions.ts"],
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/getOptions.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;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,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD;",
   "names": []

package/dist/esm/parts/DSPerPageSelector/config/usePerPageSelector.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useOwnerProps
+} from "@elliemae/ds-props-helpers";
+import React2, { useEffect, useMemo, useRef, useState } from "react";
+import { DSPerPageSelectorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+import { generateOption, getOptions } from "./getOptions.js";
+const usePerPageSelector = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSPerPageSelectorPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const ownerPropsConfig = useOwnerProps(propsWithDefault);
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = propsWithDefault;
+  const [isOpened, setIsOpened] = useState(false);
+  const options = useMemo(() => {
+    if (perPageOptions) return perPageOptions.map(generateOption);
+    return getOptions(perPageStep, minPerPage, maxPerPage);
+  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
+  const actionRef = useRef({});
+  const btnRef = useRef(null);
+  const width = useMemo(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength * 6 + 90;
+  }, [options]);
+  useEffect(() => {
+    if (isOpened) {
+      actionRef.current.setActiveDescendant(pageSize.toString());
+      actionRef.current.scrollOptionIntoView(pageSize.toString());
+    }
+  }, [isOpened]);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      actionRef,
+      btnRef,
+      width,
+      isOpened,
+      options,
+      setIsOpened
+    }),
+    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, width, isOpened, options]
+  );
+};
+export {
+  usePerPageSelector
+};
+//# sourceMappingURL=usePerPageSelector.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/usePerPageSelector.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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';\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  const width = useMemo(() => {\n    const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n    return maxLength * 6 + 90;\n  }, [options]);\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      width,\n      isOpened,\n      options,\n      setIsOpened,\n    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig, width, isOpened, options],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,SAAS,QAAQ,gBAAgB;AAE5D,SAAkC,kCAAkC,oBAAoB;AACxF,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,kBAAkB;AAEpC,MAAM,qBAAqB,CAAC,kBAA4C;AAI7E,QAAM,mBAAmB,6BAA+D,eAAe,YAAY;AACnH,mBAAiB,kBAAkB,gCAAgC;AAInE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB,uBAIvB,gBAAgB;AAIlB,QAAM,mBAAmB,cAAc,gBAAgB;AAMvD,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAC1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,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,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;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,OAAO,UAAU,OAAO;AAAA,EAC/F;AACF;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPerPageSelectorName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSPerPageSelectorName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,6BAA6B;AAE/B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,qBAAqB;AACxE;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSPaginationName } from "../../../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 = slotObjectToDataTestIds(DSPaginationName, PER_PAGE_SELECTOR_SLOTS);
+export {
+  DSPaginationName,
+  DSPerPageSelectorName,
+  EXAMPLE_CONSTANTS,
+  PER_PAGE_SELECTOR_DATA_TESTID,
+  PER_PAGE_SELECTOR_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPerPageSelector/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\nimport { DSPaginationName } from '../../../constants/index.js';\nexport { DSPaginationName };\n\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAK1B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAAA,EAC/B,OAAO;AAAA,EACP,KAAK;AACP;AAGO,MAAM,0BAA0B;AAAA,EACrC,mBAAmB;AACrB;AAGO,MAAM,gCAAgC,wBAAwB,kBAAkB,uBAAuB;",
+  "names": []
+}