@elliemae/ds-pagination 3.16.0-next.4 → 3.16.0-next.5

package/dist/esm/index.js

@@ -1,3 +1,41 @@
 import * as React from "react";
-export * from "./Pagination";
+import { DSPaginationSeparator } from "./styled";
+import { DSPaginationStyledPartPropTypesSchema } from "./react-desc-prop-types";
+import { describe } from "@elliemae/ds-props-helpers";
+import { PaginationSeparatorName } from "./DSPaginationDefinitions";
+DSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;
+DSPaginationSeparator.displayName = PaginationSeparatorName;
+const DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator).description("Pagination Separator");
+import { DSPagination, DSPaginationWithSchema } from "./Pagination";
+import {
+  DSPageNextButton,
+  DSPageNextButtonWithSchema,
+  DSPagePrevButton,
+  DSPagePrevButtonWithSchema,
+  DSPaginationContainer,
+  DSPaginationContainerWithSchema,
+  DSPerPageSelector,
+  DSPerPageSelectorWithSchema,
+  DSPaginator,
+  DSPaginatorWithSchema
+} from "./parts";
+import { DSPaginationSeparator as DSPaginationSeparator2 } from "./styled";
+import { PAGINATION_DATA_TESTID } from "./PaginationDataTestID";
+export {
+  DSPageNextButton,
+  DSPageNextButtonWithSchema,
+  DSPagePrevButton,
+  DSPagePrevButtonWithSchema,
+  DSPagination,
+  DSPaginationContainer,
+  DSPaginationContainerWithSchema,
+  DSPaginationSeparator2 as DSPaginationSeparator,
+  DSPaginationSeparatorWithSchema,
+  DSPaginationWithSchema,
+  DSPaginator,
+  DSPaginatorWithSchema,
+  DSPerPageSelector,
+  DSPerPageSelectorWithSchema,
+  PAGINATION_DATA_TESTID
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Pagination';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPaginationSeparator } from './styled';\nimport { DSPaginationStyledPartPropTypesSchema } from './react-desc-prop-types';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { PaginationSeparatorName } from './DSPaginationDefinitions';\n\nDSPaginationSeparator.propTypes = DSPaginationStyledPartPropTypesSchema;\nDSPaginationSeparator.displayName = PaginationSeparatorName;\nconst DSPaginationSeparatorWithSchema = describe(DSPaginationSeparator).description('Pagination Separator');\n\nexport { DSPagination, DSPaginationWithSchema } from './Pagination';\nexport {\n  DSPageNextButton,\n  DSPageNextButtonWithSchema,\n  DSPagePrevButton,\n  DSPagePrevButtonWithSchema,\n  DSPaginationContainer,\n  DSPaginationContainerWithSchema,\n  DSPerPageSelector,\n  DSPerPageSelectorWithSchema,\n  DSPaginator,\n  DSPaginatorWithSchema,\n} from './parts';\n\nexport { DSPaginationSeparator } from './styled';\n\nexport { DSPaginationSeparatorWithSchema };\n\nexport { PAGINATION_DATA_TESTID } from './PaginationDataTestID';\n\nexport type { DSPaginationT } from './react-desc-prop-types';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,6BAA6B;AACtC,SAAS,6CAA6C;AACtD,SAAS,gBAAgB;AACzB,SAAS,+BAA+B;AAExC,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AACpC,MAAM,kCAAkC,SAAS,qBAAqB,EAAE,YAAY,sBAAsB;AAE1G,SAAS,cAAc,8BAA8B;AACrD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAAA,8BAA6B;AAItC,SAAS,8BAA8B;",
+  "names": ["DSPaginationSeparator"]
 }

package/dist/esm/parts/DSPageNextButton.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { omit } from "lodash";
+import { ChevronRight } from "@elliemae/ds-icons";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes
+} from "@elliemae/ds-props-helpers";
+import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
+import { PreviousNextPageButton } from "../styled";
+import { pageNextButtonDefaultProps, DSPageNextButtonPropTypesSchema } from "../react-desc-prop-types";
+import { PageNextButtonName } from "../DSPaginationDefinitions";
+const DSPageNextButton = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    props,
+    pageNextButtonDefaultProps
+  );
+  useValidateTypescriptPropTypes(propsWithDefault, DSPageNextButtonPropTypesSchema, PageNextButtonName);
+  const { canNextPage, onNextPage } = propsWithDefault;
+  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), "shape", "size", "type");
+  const xstyledAttributes = useGetXstyledProps(propsWithDefault);
+  return /* @__PURE__ */ jsx(
+    PreviousNextPageButton,
+    {
+      disabled: !canNextPage,
+      buttonType: "raw",
+      "data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
+      "aria-label": "Go to next page",
+      ...globalAttributes,
+      ...xstyledAttributes,
+      onClick: () => {
+        if (canNextPage)
+          onNextPage();
+      },
+      children: /* @__PURE__ */ jsx(ChevronRight, { color: canNextPage ? ["brand-primary", "700"] : ["neutral", "500"] })
+    }
+  );
+};
+DSPageNextButton.propTypes = DSPageNextButtonPropTypesSchema;
+DSPageNextButton.displayName = PageNextButtonName;
+const DSPageNextButtonWithSchema = describe(DSPageNextButton).description("Per Page Selector");
+DSPageNextButtonWithSchema.propTypes = DSPageNextButtonPropTypesSchema;
+export {
+  DSPageNextButton,
+  DSPageNextButtonWithSchema
+};
+//# sourceMappingURL=DSPageNextButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DSPageNextButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { omit } from 'lodash';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { pageNextButtonDefaultProps, DSPageNextButtonPropTypesSchema } from '../react-desc-prop-types';\nimport { PageNextButtonName } from '../DSPaginationDefinitions';\nimport type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const DSPageNextButton: React.ComponentType<DSPaginationT.PageNextButtonProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PageNextButtonInternalProps>(\n    props,\n    pageNextButtonDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPageNextButtonPropTypesSchema, PageNextButtonName);\n\n  const { canNextPage, onNextPage } = propsWithDefault;\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'shape', 'size', 'type');\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <PreviousNextPageButton\n      disabled={!canNextPage}\n      buttonType=\"raw\"\n      data-testid={PAGINATION_DATA_TESTID.NEXT_BUTTON}\n      aria-label=\"Go to next page\"\n      {...globalAttributes}\n      {...xstyledAttributes}\n      onClick={() => {\n        if (canNextPage) onNextPage();\n      }}\n    >\n      <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </PreviousNextPageButton>\n  );\n};\n\nDSPageNextButton.propTypes = DSPageNextButtonPropTypesSchema;\nDSPageNextButton.displayName = PageNextButtonName;\nexport const DSPageNextButtonWithSchema = describe(DSPageNextButton).description('Per Page Selector');\nDSPageNextButtonWithSchema.propTypes = DSPageNextButtonPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwCjB;AAtCN,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B,uCAAuC;AAC5E,SAAS,0BAA0B;AAG5B,MAAM,mBAA2E,CAAC,UAAU;AACjG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,iCAAiC,kBAAkB;AAEpG,QAAM,EAAE,aAAa,WAAW,IAAI;AACpC,QAAM,mBAAmB,KAAK,uBAAuB,gBAAgB,GAAG,SAAS,QAAQ,MAAM;AAC/F,QAAM,oBAAoB,mBAAmB,gBAAgB;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC;AAAA,MACX,YAAW;AAAA,MACX,eAAa,uBAAuB;AAAA,MACpC,cAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,SAAS,MAAM;AACb,YAAI;AAAa,qBAAW;AAAA,MAC9B;AAAA,MAEA,8BAAC,gBAAa,OAAO,cAAc,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,EACpF;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AACxB,MAAM,6BAA6B,SAAS,gBAAgB,EAAE,YAAY,mBAAmB;AACpG,2BAA2B,YAAY;",
+  "names": []
+}

package/dist/esm/parts/DSPagePrevButton.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { omit } from "lodash";
+import { ChevronLeft } from "@elliemae/ds-icons";
+import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
+import { PreviousNextPageButton } from "../styled";
+import { pagePrevButtonDefaultProps, DSPagePrevButtonPropTypesSchema } from "../react-desc-prop-types";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault,
+  useValidateTypescriptPropTypes
+} from "@elliemae/ds-props-helpers";
+import { PagePrevButtonName } from "../DSPaginationDefinitions";
+const DSPagePrevButton = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    props,
+    pagePrevButtonDefaultProps
+  );
+  useValidateTypescriptPropTypes(propsWithDefault, DSPagePrevButtonPropTypesSchema, PagePrevButtonName);
+  const { canPreviousPage, onPreviousPage } = propsWithDefault;
+  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), "shape", "size", "type");
+  const xstyledAttributes = useGetXstyledProps(propsWithDefault);
+  return /* @__PURE__ */ jsx(
+    PreviousNextPageButton,
+    {
+      disabled: !canPreviousPage,
+      buttonType: "raw",
+      "data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON,
+      "aria-label": "Go to previous page",
+      ...globalAttributes,
+      ...xstyledAttributes,
+      onClick: () => {
+        if (canPreviousPage)
+          onPreviousPage();
+      },
+      children: /* @__PURE__ */ jsx(ChevronLeft, { color: canPreviousPage ? ["brand-primary", "700"] : ["neutral", "500"] })
+    }
+  );
+};
+DSPagePrevButton.propTypes = DSPagePrevButtonPropTypesSchema;
+DSPagePrevButton.displayName = PagePrevButtonName;
+const DSPagePrevButtonWithSchema = describe(DSPagePrevButton).description("Per Page Selector");
+DSPagePrevButtonWithSchema.propTypes = DSPagePrevButtonPropTypesSchema;
+export {
+  DSPagePrevButton,
+  DSPagePrevButtonWithSchema
+};
+//# sourceMappingURL=DSPagePrevButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DSPagePrevButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { omit } from 'lodash';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { pagePrevButtonDefaultProps, DSPagePrevButtonPropTypesSchema } from '../react-desc-prop-types';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { PagePrevButtonName } from '../DSPaginationDefinitions';\nimport type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const DSPagePrevButton: React.ComponentType<DSPaginationT.PagePrevButtonProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PagePrevButtonInternalProps>(\n    props,\n    pagePrevButtonDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPagePrevButtonPropTypesSchema, PagePrevButtonName);\n\n  const { canPreviousPage, onPreviousPage } = propsWithDefault;\n  const globalAttributes = omit(useGetGlobalAttributes(propsWithDefault), 'shape', 'size', 'type');\n  const xstyledAttributes = useGetXstyledProps(propsWithDefault);\n\n  return (\n    <PreviousNextPageButton\n      disabled={!canPreviousPage}\n      buttonType=\"raw\"\n      data-testid={PAGINATION_DATA_TESTID.PREVIOUS_BUTTON}\n      aria-label=\"Go to previous page\"\n      {...globalAttributes}\n      {...xstyledAttributes}\n      onClick={() => {\n        if (canPreviousPage) onPreviousPage();\n      }}\n    >\n      <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n    </PreviousNextPageButton>\n  );\n};\n\nDSPagePrevButton.propTypes = DSPagePrevButtonPropTypesSchema;\nDSPagePrevButton.displayName = PagePrevButtonName;\nexport const DSPagePrevButtonWithSchema = describe(DSPagePrevButton).description('Per Page Selector');\nDSPagePrevButtonWithSchema.propTypes = DSPagePrevButtonPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACwCjB;AAtCN,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B,uCAAuC;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAG5B,MAAM,mBAA2E,CAAC,UAAU;AACjG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,iCAAiC,kBAAkB;AAEpG,QAAM,EAAE,iBAAiB,eAAe,IAAI;AAC5C,QAAM,mBAAmB,KAAK,uBAAuB,gBAAgB,GAAG,SAAS,QAAQ,MAAM;AAC/F,QAAM,oBAAoB,mBAAmB,gBAAgB;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,CAAC;AAAA,MACX,YAAW;AAAA,MACX,eAAa,uBAAuB;AAAA,MACpC,cAAW;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,SAAS,MAAM;AACb,YAAI;AAAiB,yBAAe;AAAA,MACtC;AAAA,MAEA,8BAAC,eAAY,OAAO,kBAAkB,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AAAA,EACvF;AAEJ;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AACxB,MAAM,6BAA6B,SAAS,gBAAgB,EAAE,YAAY,mBAAmB;AACpG,2BAA2B,YAAY;",
+  "names": []
+}

package/dist/esm/parts/DSPaginationContainer.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { omit } from "lodash";
+import { describe, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
+import { StyledPaginationContainer, StyledPaginationWrapper } from "../styled";
+import { DSPaginationContainerPropTypesSchema } from "../react-desc-prop-types";
+import { PaginationContainerName } from "../DSPaginationDefinitions";
+const DSPaginationContainer = (props) => {
+  const globalAttributes = omit(useGetGlobalAttributes(props), ["rows", "wrap"]);
+  const xstyledProps = useGetXstyledProps(props);
+  return /* @__PURE__ */ jsx(
+    StyledPaginationContainer,
+    {
+      "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
+      ...globalAttributes,
+      ...xstyledProps,
+      cols: ["minmax(auto, 80%)"],
+      children: /* @__PURE__ */ jsx(StyledPaginationWrapper, { children: props.children })
+    }
+  );
+};
+DSPaginationContainer.propTypes = DSPaginationContainerPropTypesSchema;
+DSPaginationContainer.displayName = PaginationContainerName;
+const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description("Per Page Selector");
+DSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;
+export {
+  DSPaginationContainer,
+  DSPaginationContainerWithSchema
+};
+//# sourceMappingURL=DSPaginationContainer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DSPaginationContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { describe, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { StyledPaginationContainer, StyledPaginationWrapper } from '../styled';\nimport { DSPaginationContainerPropTypesSchema } from '../react-desc-prop-types';\nimport { PaginationContainerName } from '../DSPaginationDefinitions';\nimport type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const DSPaginationContainer: React.ComponentType<DSPaginationT.ContainerProps> = (props) => {\n  const globalAttributes = omit(useGetGlobalAttributes(props), ['rows', 'wrap']);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <StyledPaginationContainer\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      cols={['minmax(auto, 80%)']}\n    >\n      <StyledPaginationWrapper>{props.children}</StyledPaginationWrapper>\n    </StyledPaginationContainer>\n  );\n};\n\nDSPaginationContainer.propTypes = DSPaginationContainerPropTypesSchema;\nDSPaginationContainer.displayName = PaginationContainerName;\nexport const DSPaginationContainerWithSchema = describe(DSPaginationContainer).description('Per Page Selector');\nDSPaginationContainerWithSchema.propTypes = DSPaginationContainerPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoBjB;AAnBN,SAAS,YAAY;AACrB,SAAS,UAAU,wBAAwB,0BAA0B;AACrE,SAAS,8BAA8B;AACvC,SAAS,2BAA2B,+BAA+B;AACnE,SAAS,4CAA4C;AACrD,SAAS,+BAA+B;AAGjC,MAAM,wBAA2E,CAAC,UAAU;AACjG,QAAM,mBAAmB,KAAK,uBAAuB,KAAK,GAAG,CAAC,QAAQ,MAAM,CAAC;AAC7E,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,8BAAC,2BAAyB,gBAAM,UAAS;AAAA;AAAA,EAC3C;AAEJ;AAEA,sBAAsB,YAAY;AAClC,sBAAsB,cAAc;AAC7B,MAAM,kCAAkC,SAAS,qBAAqB,EAAE,YAAY,mBAAmB;AAC9G,gCAAgC,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { DSPaginationSeparator } from "../../styled";
+const createPaginatorHeader = ({ pageDetailsTitle, pageInfoWidth }) => {
+  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("span", { children: pageDetailsTitle })
+    ] });
+  };
+  return Comp;
+};
+export {
+  createPaginatorHeader
+};
+//# sourceMappingURL=createPaginatorHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/createPaginatorHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSPaginationSeparator } from '../../styled';\n\ninterface PaginatorHeaderOptions {\n  pageDetailsTitle: string;\n  pageInfoWidth: number;\n}\n\nexport const createPaginatorHeader = ({ pageDetailsTitle, pageInfoWidth }: 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%\" />\n        <span>{pageDetailsTitle}</span>\n      </Grid>\n    );\n  };\n  return Comp;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWiB,wBAGlC,YAHkC;AAVxC,SAAS,YAAY;AACrB,SAAS,6BAA6B;AAO/B,MAAM,wBAAwB,CAAC,EAAE,kBAAkB,cAAc,MAA8B;AACpG,QAAM,OAAO,MAAM;AACjB,QAAI,qBAAqB;AAAI,aAAO,gCAAE,kBAAI;AAE1C,WACE,qBAAC,QAAK,MAAM,CAAC,GAAG,gBAAgB,QAAQ,OAAO,MAAM,GACnD;AAAA,0BAAC,UAAK,OAAO,EAAE,YAAY,MAAM,GAAG,kBAAI;AAAA,MACxC,oBAAC,yBAAsB,QAAO,QAAO;AAAA,MACrC,oBAAC,UAAM,4BAAiB;AAAA,OAC1B;AAAA,EAEJ;AACA,SAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { Checkmark } from "@elliemae/ds-icons";
+const OptionWithDetails = (props) => {
+  const Comp = () => {
+    const { pageInfoWidth, pageIndex, index, pageDetails } = props;
+    return /* @__PURE__ */ jsxs(Grid, { cols: ["16px", `${pageInfoWidth + 16}px`, "auto"], gutter: "xxs", alignItems: "center", children: [
+      pageIndex - 1 === index ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx("span", { children: index + 1 }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          },
+          children: pageDetails[index]
+        }
+      )
+    ] });
+  };
+  return Comp;
+};
+const getOptions = (args) => {
+  const { pageCount, pageIndex, pageDetails, pageInfoWidth } = args;
+  const amountOfPages = typeof pageCount === "string" ? pageIndex + 1 : pageCount;
+  const options = new Array(amountOfPages).fill(0).map((_, index) => {
+    const option = {
+      dsId: (index + 1).toString(),
+      label: (index + 1).toString(),
+      value: index + 1,
+      type: "single"
+    };
+    if (pageDetails?.length) {
+      option.render = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails });
+    }
+    return option;
+  });
+  return options;
+};
+export {
+  getOptions
+};
+//# sourceMappingURL=getOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/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';\n\ninterface OptionWithDetailsT {\n  pageInfoWidth: number;\n  pageIndex: number;\n  index: number;\n  pageDetails: 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[];\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,QAAQ,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;AAAA;AAAA,MACf;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/index.js

@@ -0,0 +1,118 @@
+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";
+import { DSTypography } from "@elliemae/ds-typography";
+import { DSCircularIndeterminateIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from "../../styled";
+import { paginatorDefaultProps, DSPaginatorPropTypesSchema } from "../../react-desc-prop-types";
+import { PaginatorName } from "../../DSPaginationDefinitions";
+import { usePaginator } from "./usePaginator";
+import { createPaginatorHeader } from "./createPaginatorHeader";
+import { PAGINATION_DATA_TESTID } from "../../PaginationDataTestID";
+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: "12px",
+                    variant: "b1",
+                    as: "span",
+                    fontWeight: "semibold",
+                    textAlign: "start",
+                    children: pageDetails[pageIndex - 1]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDown, { 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.propTypes = DSPaginatorPropTypesSchema;
+DSPaginator.displayName = PaginatorName;
+const DSPaginatorWithSchema = describe(DSPaginator).description("Per Page Selector");
+DSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;
+export {
+  DSPaginator,
+  DSPaginatorWithSchema
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types';\nimport { PaginatorName } from '../../DSPaginationDefinitions';\nimport { usePaginator } from './usePaginator';\nimport { createPaginatorHeader } from './createPaginatorHeader';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\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=\"12px\"\n                variant=\"b1\"\n                as=\"span\"\n                fontWeight=\"semibold\"\n                textAlign=\"start\"\n              >\n                {pageDetails[pageIndex - 1]}\n              </DSTypography>\n            </>\n          )}\n          <ChevronDown 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.propTypes = DSPaginatorPropTypesSchema;\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuFb,SAME,UANF,KAME,YANF;AAtFV,SAAgB,eAAe;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,wCAAwC;AACjD,SAAS,cAAc,0BAA0B,6BAA6B;AAC9E,SAAS,uBAAuB,kCAAkC;AAClE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAIhC,MAAM,cAAiE,CAAC,UAAU;AACvF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,4BAA4B,aAAa;AAE1F,QAAM,EAAE,WAAW,WAAW,oBAAoB,cAAc,aAAa,iBAAiB,IAAI;AAElG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,gBAAgB;AAEjC,QAAM,SAAS;AAAA,IACb,MAAM,sBAAsB,EAAE,kBAAkB,cAAc,CAAC;AAAA,IAC/D,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB;AAAS,aAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,UAAU,SAAS,IAAI,KAAK;AAAA,MAChD,eAAe,CAAC,GAAG,kBAAkB;AACnC,qBAAc,cAAoD,KAAe;AACjF,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;AAAA,MACA,UAAU,YAAY,WAAW,IAAI,WAAW,KAAK,UAAU,SAAS,EAAE,SAAS,IAAI;AAAA,MACvF,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,UAAU;AAAA,YACV,UAAU;AAAA,YACV,gBAAc;AAAA,YACd,cAAY,QAAQ,oBAAoB,cACtC,YAAY,WAAW,IAAI,YAAY,YAAY,KAAK;AAAA,YAE1D,eAAa,uBAAuB;AAAA,YACnC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,SAAS;AAAA,YAET,+BAAC,QAAK,QAAO,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GACtE;AAAA,kCAAC,gBAAa,UAAS,QAAO,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAClF,qBACH;AAAA,cAAe;AAAA,cACZ;AAAA,cACF,sBAAsB,oBAAC,oCAAiC,IAAG,QAAO,IAAG,QAAO,MAAK,MAAK;AAAA,cACtF,YAAY,WAAW,KACtB,iCACE;AAAA,oCAAC,yBAAsB,QAAO,QAAO,IAAG,QAAO,IAAG,QAAO;AAAA,gBACzD;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAS;AAAA,oBACT,GAAG;AAAA,oBACH,IAAG;AAAA,oBACH,SAAQ;AAAA,oBACR,IAAG;AAAA,oBACH,YAAW;AAAA,oBACX,WAAU;AAAA,oBAET,sBAAY,YAAY;AAAA;AAAA,gBAC3B;AAAA,iBACF;AAAA,cAEF,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,eAChD;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,QAAK,OAAO,EAAE,UAAU,WAAW,GACjC,sBAAY,IAAI,CAAC,eAChB,oBAAC,gBAAa,eAAY,iDACxB,8BAAC,gBAAa,UAAS,QAAO,IAAG,OAAM,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAC3F,sBACH,KAH6E,UAI/E,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,mBAAmB;AAC1F,sBAAsB,YAAY;",
+  "names": []
+}

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

@@ -3,8 +3,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 const usePaginationSearch = (pageCount, actionRef) => {
   const [searchValue, setSearchValue] = useState("");
   const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);
-  const timeoutRef = useRef(null);
+  const timeoutRef = useRef();
   useEffect(() => {
+    if (typeof pageCount === "string")
+      return;
     if (searchValue !== "" && Number.parseInt(searchValue, 10) <= pageCount) {
       actionRef.current.setActiveDescendant(searchValue);
       actionRef.current.scrollOptionIntoView(searchValue);
@@ -18,7 +20,8 @@ const usePaginationSearch = (pageCount, actionRef) => {
         else
           setSearchValue((prevValue) => prevValue + e.key);
         setShouldResetSearchValue(false);
-        clearTimeout(timeoutRef.current);
+        if (timeoutRef.current)
+          clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => {
           setShouldResetSearchValue(true);
         }, 1e3);

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/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;AAAU;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;AAAwB,yBAAe,EAAE,GAAG;AAAA;AAC3C,yBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,kCAA0B,KAAK;AAC/B,YAAI,WAAW;AAAS,uBAAa,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

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { omit } from "lodash";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { useOnElementResize } from "@elliemae/ds-utilities";
+import { usePaginationSearch } from "./usePaginationSearch";
+import { getOptions } from "./getOptions";
+const usePaginator = (props) => {
+  const { pageIndex, pageCount, pageDetails } = props;
+  const [isOpened, setIsOpened] = useState(false);
+  const [detailWidth, setDetailWidth] = useState(0);
+  const [pageInfoWidth, setPageInfoWidth] = useState(0);
+  const btnRef = useRef(null);
+  const actionRef = useRef({});
+  const { width: btnWidth } = useOnElementResize(btnRef);
+  const options = useMemo(
+    () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),
+    [pageCount, pageIndex, pageDetails, pageInfoWidth]
+  );
+  const onKeyDown = usePaginationSearch(pageCount, actionRef);
+  const globalAttributes = omit(useGetGlobalAttributes(props), ["shape", "type", "size"]);
+  const xstyledAttributes = useGetXstyledProps(props);
+  useEffect(() => {
+    if (isOpened) {
+      actionRef.current.setActiveDescendant(pageIndex.toString());
+      actionRef.current.scrollOptionIntoView(pageIndex.toString());
+    }
+  }, [isOpened]);
+  useLayoutEffect(() => {
+    const invisibleDetails = [
+      ...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')
+    ];
+    const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
+    setDetailWidth(maxWidth);
+  }, [pageDetails]);
+  useEffect(() => {
+    setPageInfoWidth(() => {
+      if (detailWidth)
+        return btnWidth - detailWidth - 89;
+      return btnWidth - 56;
+    });
+  }, [btnWidth, detailWidth]);
+  return {
+    btnRef,
+    btnWidth,
+    pageInfoWidth,
+    options,
+    isOpened,
+    setIsOpened,
+    detailWidth,
+    setDetailWidth,
+    globalAttributes,
+    xstyledAttributes,
+    actionRef,
+    onKeyDown
+  };
+};
+export {
+  usePaginator
+};
+//# sourceMappingURL=usePaginator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/usePaginator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { usePaginationSearch } from './usePaginationSearch';\nimport { getOptions } from './getOptions';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\n\nexport const usePaginator = (props: DSPaginationT.PaginatorInternalProps) => {\n  const { pageIndex, pageCount, pageDetails } = props;\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  const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n  const globalAttributes = omit(useGetGlobalAttributes(props), ['shape', 'type', 'size']);\n  const xstyledAttributes = useGetXstyledProps(props);\n\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 {\n    btnRef,\n    btnWidth,\n    pageInfoWidth,\n    options,\n    isOpened,\n    setIsOpened,\n    detailWidth,\n    setDetailWidth,\n    globalAttributes,\n    xstyledAttributes,\n    actionRef,\n    onKeyDown,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AACtE,SAAS,YAAY;AACrB,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAGpB,MAAM,eAAe,CAAC,UAAgD;AAC3E,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;AAEA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,QAAM,mBAAmB,KAAK,uBAAuB,KAAK,GAAG,CAAC,SAAS,QAAQ,MAAM,CAAC;AACtF,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,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;AAAa,eAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { range } from "@elliemae/ds-utilities";
+const generateOption = (value) => {
+  if (typeof value === "object") {
+    return value;
+  }
+  return {
+    dsId: value.toString(),
+    value,
+    label: value.toString(),
+    type: "single"
+  };
+};
+const getOptions = (step, min, max) => {
+  const options = range(min, max + step, step).map(generateOption);
+  return min === 0 ? options.slice(1, options.length) : options;
+};
+export {
+  generateOption,
+  getOptions
+};
+//# sourceMappingURL=getOptions.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/getOptions.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { range } from '@elliemae/ds-utilities';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\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": []
+}