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

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+const SlotPropsAsObj = {
+  dsPaginationRoot: { "aria-label": "just a typescript test" },
+  dsPaginationWrapper: { "aria-label": "just a typescript test" }
+};
+const SlotPropsAsFunctions = {
+  dsPaginationRoot: () => ({ "aria-label": "just a typescript test" }),
+  dsPaginationWrapper: () => ({ "aria-label": "just a typescript test" })
+};
+const EnsureAllSlotsExistInSlotFunctionArguments = SlotPropsAsFunctions;
+//# sourceMappingURL=slot-props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginationContainer/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';\n\nimport type { DSPaginationContainerT } from '../react-desc-prop-types.js';\nimport type { DSPaginationName, PaginationSlots } from '../../../constants/index.js';\n\nconst SlotPropsAsObj: Partial<DSPaginationContainerT.Props> = {\n  dsPaginationRoot: { 'aria-label': 'just a typescript test' },\n  dsPaginationWrapper: { 'aria-label': 'just a typescript test' },\n};\nconst SlotPropsAsFunctions: DSPaginationContainerT.SlotFunctionArguments = {\n  dsPaginationRoot: () => ({ 'aria-label': 'just a typescript test' }),\n  dsPaginationWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n};\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSPaginationName, typeof PaginationSlots>\n> = SlotPropsAsFunctions;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACOvB,MAAM,iBAAwD;AAAA,EAC5D,kBAAkB,EAAE,cAAc,yBAAyB;AAAA,EAC3D,qBAAqB,EAAE,cAAc,yBAAyB;AAChE;AACA,MAAM,uBAAqE;AAAA,EACzE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAClE,qBAAqB,OAAO,EAAE,cAAc,yBAAyB;AACvE;AACA,MAAM,6CAEF;",
+  "names": []
+}

package/dist/esm/parts/DSPaginationSeparator/DSPaginationSeparator.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-props-helpers";
+import { styled, xStyledCommonProps } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSPaginationSeparatorPropTypesSchema } from "./react-desc-prop-types.js";
+import { usePaginationSeparator } from "./config/usePaginationSeparator.js";
+import {
+  PAGINATION_SEPARATOR_SLOTS,
+  DSPaginationName,
+  DSPaginationSeparatorName,
+  PAGINATION_SEPARATOR_DATA_TESTID
+} from "./constants/index.js";
+const StyledDSPaginationSeparator = styled(Grid, {
+  name: DSPaginationName,
+  slot: PAGINATION_SEPARATOR_SLOTS.SEPARATOR
+})`
+  background-color: ${(props) => props.theme.colors.neutral[300]};
+  width: 1px;
+  height: 30px;
+  ${xStyledCommonProps}
+`;
+const DSPaginationSeparator = (props) => {
+  const { xstyledProps, globalAttributes, ownerPropsConfig } = usePaginationSeparator(props);
+  return /* @__PURE__ */ jsx(
+    StyledDSPaginationSeparator,
+    {
+      "data-testid": PAGINATION_SEPARATOR_DATA_TESTID.SEPARATOR,
+      ...globalAttributes,
+      ...xstyledProps,
+      ...ownerPropsConfig
+    }
+  );
+};
+DSPaginationSeparator.displayName = DSPaginationSeparatorName;
+const DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator);
+DSPaginationSeparatorWithSchema.propTypes = DSPaginationSeparatorPropTypesSchema;
+export {
+  DSPaginationSeparator,
+  DSPaginationSeparatorWithSchema,
+  StyledDSPaginationSeparator
+};
+//# sourceMappingURL=DSPaginationSeparator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginationSeparator/DSPaginationSeparator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, type XstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { type DSPaginationSeparatorT, DSPaginationSeparatorPropTypesSchema } from './react-desc-prop-types.js';\nimport { usePaginationSeparator } from './config/usePaginationSeparator.js';\nimport {\n  PAGINATION_SEPARATOR_SLOTS,\n  DSPaginationName,\n  DSPaginationSeparatorName,\n  PAGINATION_SEPARATOR_DATA_TESTID,\n} from './constants/index.js';\n\nexport const StyledDSPaginationSeparator = styled(Grid, {\n  name: DSPaginationName,\n  slot: PAGINATION_SEPARATOR_SLOTS.SEPARATOR,\n})<React.ComponentProps<typeof Grid> & XstyledProps>`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: 30px;\n  ${xStyledCommonProps}\n`;\n\nconst DSPaginationSeparator: React.ComponentType<DSPaginationSeparatorT.Props> = (props) => {\n  const { xstyledProps, globalAttributes, ownerPropsConfig } = usePaginationSeparator(props);\n\n  return (\n    <StyledDSPaginationSeparator\n      data-testid={PAGINATION_SEPARATOR_DATA_TESTID.SEPARATOR}\n      {...globalAttributes}\n      {...xstyledProps}\n      {...ownerPropsConfig}\n    />\n  );\n};\n\nDSPaginationSeparator.displayName = DSPaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator);\nDSPaginationSeparatorWithSchema.propTypes = DSPaginationSeparatorPropTypesSchema;\n\nexport { DSPaginationSeparator, DSPaginationSeparatorWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BnB;AA1BJ,SAAS,gBAAmC;AAC5C,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAsC,4CAA4C;AAClF,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,8BAA8B,OAAO,MAAM;AAAA,EACtD,MAAM;AAAA,EACN,MAAM,2BAA2B;AACnC,CAAC;AAAA,sBACqB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,kBAAkB;AAAA;AAGtB,MAAM,wBAA2E,CAAC,UAAU;AAC1F,QAAM,EAAE,cAAc,kBAAkB,iBAAiB,IAAI,uBAAuB,KAAK;AAEzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iCAAiC;AAAA,MAC7C,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB;AACtE,gCAAgC,YAAY;",
+  "names": []
+}

package/dist/esm/parts/DSPaginationSeparator/config/usePaginationSeparator.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import React2 from "react";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useOwnerProps
+} from "@elliemae/ds-props-helpers";
+import {
+  DSPaginationSeparatorPropTypesSchema,
+  defaultProps
+} from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const usePaginationSeparator = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    propsFromUser,
+    defaultProps
+  );
+  useValidateProps(propsWithDefault, DSPaginationSeparatorPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(
+    propsWithDefault
+  );
+  const ownerPropsConfig = useOwnerProps(propsWithDefault);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig
+    }),
+    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig]
+  );
+};
+export {
+  usePaginationSeparator
+};
+//# sourceMappingURL=usePaginationSeparator.js.map

package/dist/esm/parts/DSPaginationSeparator/config/usePaginationSeparator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginationSeparator/config/usePaginationSeparator.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\n\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport {\n  type DSPaginationSeparatorT,\n  DSPaginationSeparatorPropTypesSchema,\n  defaultProps,\n} from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const usePaginationSeparator = (propsFromUser: DSPaginationSeparatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationSeparatorT.InternalProps>(\n    propsFromUser,\n    defaultProps,\n  );\n  useValidateProps(propsWithDefault, DSPaginationSeparatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginationSeparatorT.InternalProps, HTMLDivElement, DSGridT.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  // const instanceUid = React.useMemo(() => `ds-pagination-separator-${uid(5)}`, []);\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    }),\n    [propsWithDefault, xstyledProps, globalAttributes, ownerPropsConfig],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAE1B,MAAM,yBAAyB,CAAC,kBAAgD;AAIrF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,mBAAiB,kBAAkB,oCAAoC;AAIvE,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,mBAAmB,cAAc,gBAAgB;AAYvD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,kBAAkB,gBAAgB;AAAA,EACrE;AACF;",
+  "names": ["React"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginationSeparator/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 DSPaginationSeparatorT } from '../react-desc-prop-types.js';\nimport { DSPaginationSeparatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginationSeparatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginationSeparatorT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginationSeparatorName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,iCAAiC;AAEnC,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,yBAAyB;AAC5E;",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSPaginationName } from "../../../constants/index.js";
+const DSPaginationSeparatorName = "DSPaginationSeparator";
+const PAGINATION_SEPARATOR_SLOTS = {
+  SEPARATOR: "separator"
+};
+const PAGINATION_SEPARATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATION_SEPARATOR_SLOTS);
+export {
+  DSPaginationName,
+  DSPaginationSeparatorName,
+  PAGINATION_SEPARATOR_DATA_TESTID,
+  PAGINATION_SEPARATOR_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginationSeparator/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\nexport const DSPaginationSeparatorName = 'DSPaginationSeparator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATION_SEPARATOR_SLOTS = {\n  SEPARATOR: 'separator',\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 PAGINATION_SEPARATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATION_SEPARATOR_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,4BAA4B;AAGlC,MAAM,6BAA6B;AAAA,EACxC,WAAW;AACb;AAGO,MAAM,mCAAmC,wBAAwB,kBAAkB,0BAA0B;",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { DSPaginationSeparator, DSPaginationSeparatorWithSchema } from "./DSPaginationSeparator.js";
+import {
+  DSPaginationSeparatorName,
+  PAGINATION_SEPARATOR_DATA_TESTID,
+  PAGINATION_SEPARATOR_SLOTS
+} from "./constants/index.js";
+export {
+  DSPaginationSeparator,
+  DSPaginationSeparatorName,
+  DSPaginationSeparatorWithSchema,
+  PAGINATION_SEPARATOR_DATA_TESTID,
+  PAGINATION_SEPARATOR_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginationSeparator/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPaginationSeparator, DSPaginationSeparatorWithSchema } from './DSPaginationSeparator.js';\nexport {\n  DSPaginationSeparatorName,\n  PAGINATION_SEPARATOR_DATA_TESTID,\n  PAGINATION_SEPARATOR_SLOTS,\n} from './constants/index.js';\nexport type { DSPaginationSeparatorT } from './react-desc-prop-types.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,uBAAuB,uCAAuC;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { getPropsPerSlotPropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import { DSPaginationName, PAGINATION_SEPARATOR_SLOTS } from "./constants/index.js";
+const defaultProps = {};
+const DSPaginationSeparatorPropTypes = {
+  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATION_SEPARATOR_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes
+};
+const DSPaginationSeparatorPropTypesSchema = DSPaginationSeparatorPropTypes;
+export {
+  DSPaginationSeparatorPropTypes,
+  DSPaginationSeparatorPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginationSeparator/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { getPropsPerSlotPropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSPaginationName, PAGINATION_SEPARATOR_SLOTS } from './constants/index.js';\n\nexport declare namespace DSPaginationSeparatorT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSPaginationName, typeof PAGINATION_SEPARATOR_SLOTS> {}\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSPaginationSeparatorT.DefaultProps = {};\n\nexport const DSPaginationSeparatorPropTypes: DSPropTypesSchema<DSPaginationSeparatorT.Props> = {\n  ...getPropsPerSlotPropTypes(DSPaginationName, PAGINATION_SEPARATOR_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSPaginationSeparatorPropTypesSchema =\n  DSPaginationSeparatorPropTypes as unknown as ValidationMap<DSPaginationSeparatorT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,0BAA0B,2BAA2B,wBAAwB;AAEtF,SAAS,kBAAkB,kCAAkC;AAwBtD,MAAM,eAAoD,CAAC;AAE3D,MAAM,iCAAkF;AAAA,EAC7F,GAAG,yBAAyB,kBAAkB,0BAA0B;AAAA,EACxE,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,uCACX;",
+  "names": []
+}

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

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu-v2";
+import { Grid } from "@elliemae/ds-grid";
+import { ChevronDown } from "@elliemae/ds-icons";
+import { describe } from "@elliemae/ds-props-helpers";
+import { DSTypography } from "@elliemae/ds-typography";
+import { DSPaginationSeparator } from "../DSPaginationSeparator/index.js";
+import { createPaginatorHeader } from "./config/createPaginatorHeader.js";
+import { usePaginator } from "./config/usePaginator.js";
+import { DSPaginatorName, PAGINATOR_DATA_TESTID } from "./constants/index.js";
+import { DSPaginatorPropTypesSchema } from "./react-desc-prop-types.js";
+import { PaginationDropdownButtonPaginator, InvisibleDiv } from "./styled.js";
+const DSPaginator = (props) => {
+  const {
+    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },
+    xstyledProps,
+    globalAttributes,
+    ownerPropsConfig,
+    btnRef,
+    btnWidth,
+    pageInfoWidth,
+    options,
+    isOpened,
+    setIsOpened,
+    detailWidth,
+    actionRef,
+    onKeyDown
+  } = usePaginator(props);
+  const Header = useMemo(
+    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig }),
+    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig]
+  );
+  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(
+          PaginationDropdownButtonPaginator,
+          {
+            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": PAGINATOR_DATA_TESTID.PAGINATOR,
+            ...globalAttributes,
+            ...xstyledProps,
+            ...ownerPropsConfig,
+            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", ...ownerPropsConfig }),
+                /* @__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 = DSPaginatorName;
+const DSPaginatorWithSchema = describe(DSPaginator);
+DSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;
+export {
+  DSPaginator,
+  DSPaginatorWithSchema
+};
+//# sourceMappingURL=DSPaginator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/DSPaginator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSDropdownMenuV2, type DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSPaginationSeparator } from '../DSPaginationSeparator/index.js';\nimport { createPaginatorHeader } from './config/createPaginatorHeader.js';\nimport { usePaginator } from './config/usePaginator.js';\nimport { DSPaginatorName, PAGINATOR_DATA_TESTID } from './constants/index.js';\nimport { DSPaginatorPropTypesSchema, type DSPaginatorT } from './react-desc-prop-types.js';\nimport { PaginationDropdownButtonPaginator, InvisibleDiv } from './styled.js';\n\nconst DSPaginator: React.ComponentType<DSPaginatorT.Props> = (props) => {\n  const {\n    propsWithDefault: { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle },\n    xstyledProps,\n    globalAttributes,\n    ownerPropsConfig,\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    setIsOpened,\n    detailWidth,\n    actionRef,\n    onKeyDown,\n  } = usePaginator(props);\n\n  const Header = useMemo(\n    () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig }),\n    [pageDetailsTitle, pageInfoWidth, ownerPropsConfig],\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      <PaginationDropdownButtonPaginator\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={PAGINATOR_DATA_TESTID.PAGINATOR}\n        {...globalAttributes}\n        {...xstyledProps}\n        {...ownerPropsConfig}\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\" {...ownerPropsConfig} />\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      </PaginationDropdownButtonPaginator>\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 = DSPaginatorName;\nconst DSPaginatorWithSchema = describe(DSPaginator);\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n\nexport { DSPaginator, DSPaginatorWithSchema };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/parts/DSPaginator/{createPaginatorHeader.js → config/createPaginatorHeader.js}

@@ -1,13 +1,17 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Grid } from "@elliemae/ds-grid";
-import { DSPaginationSeparator } from "../../styled.js";
-const createPaginatorHeader = ({ pageDetailsTitle, pageInfoWidth }) => {
+import { DSPaginationSeparator } from "../../DSPaginationSeparator/index.js";
+const createPaginatorHeader = ({
+  pageDetailsTitle,
+  pageInfoWidth,
+  ownerPropsConfig
+}) => {
   const Comp = () => {
     if (pageDetailsTitle === "") return /* @__PURE__ */ jsx(Fragment, { children: "Page" });
     return /* @__PURE__ */ jsxs(Grid, { cols: [`${pageInfoWidth + 50}px`, "8px", "auto"], children: [
       /* @__PURE__ */ jsx("span", { style: { marginLeft: "8px" }, children: "Page" }),
-      /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "100%" }),
+      /* @__PURE__ */ jsx(DSPaginationSeparator, { height: "100%", ...ownerPropsConfig }),
       /* @__PURE__ */ jsx("span", { children: pageDetailsTitle })
     ] });
   };

package/dist/esm/parts/DSPaginator/config/createPaginatorHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/createPaginatorHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPaginationSeparator } from '../../DSPaginationSeparator/index.js';\n\ninterface PaginatorHeaderOptions {\n  pageDetailsTitle: string;\n  pageInfoWidth: number;\n  ownerPropsConfig: Record<string, unknown>;\n}\n\nexport const createPaginatorHeader = ({\n  pageDetailsTitle,\n  pageInfoWidth,\n  ownerPropsConfig,\n}: PaginatorHeaderOptions) => {\n  const Comp = () => {\n    if (pageDetailsTitle === '') return <>Page</>;\n\n    return (\n      <Grid cols={[`${pageInfoWidth + 50}px`, '8px', 'auto']}>\n        <span style={{ marginLeft: '8px' }}>Page</span>\n        <DSPaginationSeparator height=\"100%\" {...ownerPropsConfig} />\n        <span>{pageDetailsTitle}</span>\n      </Grid>\n    );\n  };\n  return Comp;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBiB,wBAGlC,YAHkC;AAfxC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AAQ/B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAA8B;AAC5B,QAAM,OAAO,MAAM;AACjB,QAAI,qBAAqB,GAAI,QAAO,gCAAE,kBAAI;AAE1C,WACE,qBAAC,QAAK,MAAM,CAAC,GAAG,gBAAgB,EAAE,MAAM,OAAO,MAAM,GACnD;AAAA,0BAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,MACxC,oBAAC,yBAAsB,QAAO,QAAQ,GAAG,kBAAkB;AAAA,MAC3D,oBAAC,UAAM,4BAAiB;AAAA,OAC1B;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "names": []
+}

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/getOptions.tsx"],
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/getOptions.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\ninterface OptionWithDetailsT {\n  pageInfoWidth: number;\n  pageIndex: number;\n  index: number;\n  pageDetails: string[] | readonly string[];\n}\n\nconst OptionWithDetails = (props: OptionWithDetailsT) => {\n  const Comp = () => {\n    const { pageInfoWidth, pageIndex, index, pageDetails } = props;\n    return (\n      <Grid cols={['16px', `${pageInfoWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n        {pageIndex - 1 === index ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}\n        <span>{index + 1}</span>\n        <span\n          style={{\n            whiteSpace: 'nowrap',\n            textOverflow: 'ellipsis',\n            overflow: 'hidden',\n          }}\n        >\n          {pageDetails[index]}\n        </span>\n      </Grid>\n    );\n  };\n  return Comp;\n};\n\nexport const getOptions = (args: {\n  pageCount: number | string;\n  pageIndex: number;\n  pageDetails: string[] | readonly string[];\n  pageInfoWidth: number;\n}): DSDropdownMenuT.ItemSingleOptions[] => {\n  const { pageCount, pageIndex, pageDetails, pageInfoWidth } = args;\n\n  const amountOfPages = typeof pageCount === 'string' ? pageIndex + 1 : pageCount;\n\n  const options = new Array(amountOfPages).fill(0).map((_, index) => {\n    const option: DSDropdownMenuT.ItemSingleOptions = {\n      dsId: (index + 1).toString(),\n      label: (index + 1).toString(),\n      value: index + 1,\n      type: 'single',\n    };\n    if (pageDetails?.length) {\n      option.render = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails });\n    }\n    return option;\n  });\n  return options;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACgBjB,SAC6B,KAD7B;AAfN,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,YAAY,IAAI;AACzD,WACE,qBAAC,QAAK,MAAM,CAAC,QAAQ,GAAG,gBAAgB,EAAE,MAAM,MAAM,GAAG,QAAO,OAAM,YAAW,UAC9E;AAAA,kBAAY,MAAM,QAAQ,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI;AAAA,MAC1F,oBAAC,UAAM,kBAAQ,GAAE;AAAA,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,UAAU;AAAA,UACZ;AAAA,UAEC,sBAAY,KAAK;AAAA;AAAA,MACpB;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,CAAC,SAKgB;AACzC,QAAM,EAAE,WAAW,WAAW,aAAa,cAAc,IAAI;AAE7D,QAAM,gBAAgB,OAAO,cAAc,WAAW,YAAY,IAAI;AAEtE,QAAM,UAAU,IAAI,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACjE,UAAM,SAA4C;AAAA,MAChD,OAAO,QAAQ,GAAG,SAAS;AAAA,MAC3B,QAAQ,QAAQ,GAAG,SAAS;AAAA,MAC5B,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA,IACR;AACA,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,kBAAkB,EAAE,eAAe,WAAW,OAAO,YAAY,CAAC;AAAA,IACpF;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;",
   "names": []

package/dist/esm/parts/DSPaginator/{useOnElementOnResize.js.map → config/useOnElementOnResize.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/useOnElementOnResize.tsx"],
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/useOnElementOnResize.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,WAAW,QAAQ,eAAe;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
   "names": []

package/dist/esm/parts/DSPaginator/{usePaginationSearch.js.map → config/usePaginationSearch.js.map}

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/usePaginationSearch.tsx"],
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/usePaginationSearch.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const usePaginationSearch = (\n  pageCount: string | number,\n  actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>,\n): React.KeyboardEventHandler => {\n  const [searchValue, setSearchValue] = useState('');\n  const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);\n\n  const timeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (typeof pageCount === 'string') return;\n\n    if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {\n      actionRef.current.setActiveDescendant(searchValue);\n      actionRef.current.scrollOptionIntoView(searchValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchValue]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code.startsWith('Digit')) {\n        if (shouldResetSearchValue) setSearchValue(e.key);\n        else setSearchValue((prevValue) => prevValue + e.key);\n\n        setShouldResetSearchValue(false);\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        timeoutRef.current = setTimeout(() => {\n          setShouldResetSearchValue(true);\n        }, 1000);\n      }\n    },\n    [shouldResetSearchValue],\n  );\n\n  return onKeyDown;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAElD,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,IAAI;AAEzE,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,QAAI,OAAO,cAAc,SAAU;AAEnC,QAAI,gBAAgB,MAAM,OAAO,SAAS,aAAa,EAAE,KAAK,WAAW;AACvE,gBAAU,QAAQ,oBAAoB,WAAW;AACjD,gBAAU,QAAQ,qBAAqB,WAAW;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,KAAK,WAAW,OAAO,GAAG;AAC9B,YAAI,uBAAwB,gBAAe,EAAE,GAAG;AAAA,YAC3C,gBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,kCAA0B,KAAK;AAC/B,YAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,mBAAW,UAAU,WAAW,MAAM;AACpC,oCAA0B,IAAI;AAAA,QAChC,GAAG,GAAI;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,SAAO;AACT;",
   "names": []

package/dist/esm/parts/DSPaginator/{usePaginator.js → config/usePaginator.js}

@@ -1,11 +1,25 @@
 import * as React from "react";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
-import { usePaginationSearch } from "./usePaginationSearch.js";
-import { getOptions } from "./getOptions.js";
+import {
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useOwnerProps
+} from "@elliemae/ds-props-helpers";
+import React2, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DSPaginatorPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
 import { useOnElementResize } from "./useOnElementOnResize.js";
-const usePaginator = (props) => {
-  const { pageIndex, pageCount, pageDetails } = props;
+import { getOptions } from "./getOptions.js";
+import { usePaginationSearch } from "./usePaginationSearch.js";
+const usePaginator = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(
+    propsWithDefault
+  );
+  const ownerPropsConfig = useOwnerProps(propsWithDefault);
+  const { pageIndex, pageCount, pageDetails } = propsWithDefault;
   const [isOpened, setIsOpened] = useState(false);
   const [detailWidth, setDetailWidth] = useState(0);
   const [pageInfoWidth, setPageInfoWidth] = useState(0);
@@ -17,8 +31,6 @@ const usePaginator = (props) => {
     [pageCount, pageIndex, pageDetails, pageInfoWidth]
   );
   const onKeyDown = usePaginationSearch(pageCount, actionRef);
-  const globalAttributes = useGetGlobalAttributes(props);
-  const xstyledAttributes = useGetXstyledProps(props);
   useEffect(() => {
     if (isOpened) {
       actionRef.current.setActiveDescendant(pageIndex.toString());
@@ -38,20 +50,38 @@ const usePaginator = (props) => {
       return btnWidth - 56;
     });
   }, [btnWidth, detailWidth]);
-  return {
-    btnRef,
-    btnWidth,
-    pageInfoWidth,
-    options,
-    isOpened,
-    setIsOpened,
-    detailWidth,
-    setDetailWidth,
-    globalAttributes,
-    xstyledAttributes,
-    actionRef,
-    onKeyDown
-  };
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      btnRef,
+      btnWidth,
+      pageInfoWidth,
+      options,
+      isOpened,
+      detailWidth,
+      actionRef,
+      setIsOpened,
+      onKeyDown
+    }),
+    [
+      propsWithDefault,
+      xstyledProps,
+      globalAttributes,
+      ownerPropsConfig,
+      btnRef,
+      btnWidth,
+      pageInfoWidth,
+      options,
+      isOpened,
+      detailWidth,
+      actionRef,
+      setIsOpened,
+      onKeyDown
+    ]
+  );
 };
 export {
   usePaginator

package/dist/esm/parts/DSPaginator/config/usePaginator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/usePaginator.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useOwnerProps,\n} from '@elliemae/ds-props-helpers';\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport { type DSPaginatorT, DSPaginatorPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useOnElementResize } from './useOnElementOnResize.js';\nimport { getOptions } from './getOptions.js';\nimport { usePaginationSearch } from './usePaginationSearch.js';\n\nexport const usePaginator = (propsFromUser: DSPaginatorT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginatorT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSPaginatorPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES\n  // =============================================================================\n  const globalAttributes = useGetGlobalAttributes<DSPaginatorT.InternalProps, HTMLButtonElement, DSButtonV3T.Props>(\n    propsWithDefault,\n  );\n  // =============================================================================\n  // OWNER PROPS\n  // =============================================================================\n  const ownerPropsConfig = useOwnerProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { pageIndex, pageCount, pageDetails } = propsWithDefault;\n\n  const [isOpened, setIsOpened] = useState(false);\n  const [detailWidth, setDetailWidth] = useState(0);\n  const [pageInfoWidth, setPageInfoWidth] = useState(0);\n\n  const btnRef = useRef<HTMLButtonElement>(null);\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n  const { width: btnWidth } = useOnElementResize(btnRef);\n\n  const options = useMemo(\n    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),\n    [pageCount, pageIndex, pageDetails, pageInfoWidth],\n  );\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n  const onKeyDown = usePaginationSearch(pageCount, actionRef);\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageIndex.toString());\n      actionRef.current.scrollOptionIntoView(pageIndex.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  useLayoutEffect(() => {\n    const invisibleDetails = [\n      ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n    ] as HTMLDivElement[];\n    const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n    setDetailWidth(maxWidth);\n  }, [pageDetails]);\n\n  useEffect(() => {\n    setPageInfoWidth(() => {\n      // Here we get the size of the page info\n      // Inside of the button, we have the page info, the chevron, separators, page details and padding\n      // We substract the detailWidth if present, and the padding + chevron + separators in each case\n      if (detailWidth) return btnWidth - detailWidth - 89;\n      return btnWidth - 56;\n    });\n  }, [btnWidth, detailWidth]);\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      setIsOpened,\n      onKeyDown,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      globalAttributes,\n      ownerPropsConfig,\n      btnRef,\n      btnWidth,\n      pageInfoWidth,\n      options,\n      isOpened,\n      detailWidth,\n      actionRef,\n      setIsOpened,\n      onKeyDown,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,UAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AAG7E,SAA4B,4BAA4B,oBAAoB;AAC5E,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAE7B,MAAM,eAAe,CAAC,kBAAsC;AAIjE,QAAM,mBAAmB,6BAAyD,eAAe,YAAY;AAC7G,mBAAiB,kBAAkB,0BAA0B;AAI7D,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,mBAAmB;AAAA,IACvB;AAAA,EACF;AAIA,QAAM,mBAAmB,cAAc,gBAAgB;AAKvD,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAErD,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAKA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAC1D,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI,YAAa,QAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,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,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/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 DSPaginatorT } from '../react-desc-prop-types.js';\nimport { DSPaginatorName } from '../constants/index.js';\n\nexport const useValidateProps = (\n  props: DSPaginatorT.InternalProps,\n  propTypes: ValidationMap<DSPaginatorT.Props>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSPaginatorName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,eAAe;AAClE;",
+  "names": []
+}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+import { DSPaginationName } from "../../../constants/index.js";
+const DSPaginatorName = "DSPaginator";
+const PAGINATOR_SLOTS = {
+  PAGINATOR: "paginator"
+};
+const PAGINATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS);
+export {
+  DSPaginationName,
+  DSPaginatorName,
+  PAGINATOR_DATA_TESTID,
+  PAGINATOR_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/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\nexport const DSPaginatorName = 'DSPaginator';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATOR_SLOTS = {\n  PAGINATOR: 'paginator',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const PAGINATOR_DATA_TESTID = slotObjectToDataTestIds(DSPaginationName, PAGINATOR_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AACxC,SAAS,wBAAwB;AAG1B,MAAM,kBAAkB;AAGxB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AACb;AAGO,MAAM,wBAAwB,wBAAwB,kBAAkB,eAAe;",
+  "names": []
+}