@elliemae/ds-pagination 3.15.0 → 3.16.0-next.10

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.js";
+import { getOptions } from "./getOptions.js";
+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.js';\nimport { getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\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": []
+}

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

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
+import { ChevronDown } from "@elliemae/ds-icons";
+import { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from "../../react-desc-prop-types.js";
+import { PaginationDropdownButton } from "../../styled.js";
+import { PerPageSelectorName } from "../../DSPaginationDefinitions.js";
+import { usePerPageSelector } from "./usePerPageSelector.js";
+import { PAGINATION_DATA_TESTID } from "../../PaginationDataTestID.js";
+const Header = () => /* @__PURE__ */ jsx(Fragment, { children: "Per Page" });
+const DSPerPageSelector = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(
+    props,
+    perPageSelectorDefaultProps
+  );
+  useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);
+  const { pageSize, onPageSizeChange } = propsWithDefault;
+  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } = usePerPageSelector(propsWithDefault);
+  const buttonOnClick = useMemo(() => {
+    if (globalAttributes.onClick)
+      return globalAttributes.onClick;
+    return () => setIsOpened((prev) => !prev);
+  }, [globalAttributes.onClick, setIsOpened]);
+  return /* @__PURE__ */ jsx(
+    DSDropdownMenuV2,
+    {
+      isOpened,
+      options,
+      selectedOptions: { [pageSize.toString()]: true },
+      onOptionClick: (_, clickedOption) => {
+        onPageSizeChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current?.focus();
+      },
+      customOffset: [-23, 2],
+      startPlacementPreference: "top-start",
+      actionRef,
+      minWidth: width,
+      maxHeight: 300,
+      HeaderComp: Header,
+      children: /* @__PURE__ */ jsxs(
+        PaginationDropdownButton,
+        {
+          buttonType: "raw",
+          innerRef: btnRef,
+          "aria-pressed": isOpened,
+          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
+          "data-testid": PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR,
+          ...globalAttributes,
+          ...xstyledAttributes,
+          onClick: buttonOnClick,
+          children: [
+            pageSize,
+            " / page",
+            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
+          ]
+        }
+      )
+    }
+  );
+};
+DSPerPageSelector.propTypes = DSPerPageSelectorPropTypesSchema;
+DSPerPageSelector.displayName = PerPageSelectorName;
+const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description("Per Page Selector");
+DSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;
+export {
+  DSPerPageSelector,
+  DSPerPageSelectorWithSchema
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginationDropdownButton } from '../../styled.js';\nimport { PerPageSelectorName } from '../../DSPaginationDefinitions.js';\nimport { usePerPageSelector } from './usePerPageSelector.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\n\nconst Header = () => <>{'Per Page'}</>;\n\nexport const DSPerPageSelector: React.ComponentType<DSPaginationT.PerPageSelectorProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PerPageSelectorInternalProps>(\n    props,\n    perPageSelectorDefaultProps,\n  );\n  useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);\n\n  const { pageSize, onPageSizeChange } = propsWithDefault;\n\n  const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } =\n    usePerPageSelector(propsWithDefault);\n\n  const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n    if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n    return () => setIsOpened((prev) => !prev);\n  }, [globalAttributes.onClick, setIsOpened]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[-23, 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      minWidth={width}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <PaginationDropdownButton\n        buttonType=\"raw\"\n        innerRef={btnRef}\n        aria-pressed={isOpened}\n        aria-label={`${pageSize} rows per page. Press to select rows per page`}\n        data-testid={PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR}\n        {...globalAttributes}\n        {...xstyledAttributes}\n        onClick={buttonOnClick}\n      >\n        {pageSize} / page\n        <ChevronDown color={['brand-primary', '700']} />\n      </PaginationDropdownButton>\n    </DSDropdownMenuV2>\n  );\n};\n\nDSPerPageSelector.propTypes = DSPerPageSelectorPropTypesSchema;\nDSPerPageSelector.displayName = PerPageSelectorName;\nexport const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description('Per Page Selector');\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACaF,wBAwCf,YAxCe;AAbrB,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B,wCAAwC;AAC9E,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAIvC,MAAM,SAAS,MAAM,gCAAG,sBAAW;AAE5B,MAAM,oBAA6E,CAAC,UAAU;AACnG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,kCAAkC,mBAAmB;AAEtG,QAAM,EAAE,UAAU,iBAAiB,IAAI;AAEvC,QAAM,EAAE,WAAW,QAAQ,OAAO,UAAU,aAAa,SAAS,kBAAkB,kBAAkB,IACpG,mBAAmB,gBAAgB;AAErC,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,SAAS,SAAS,IAAI,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,KAAK,CAAC;AAAA,MACrB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG;AAAA,UACf,eAAa,uBAAuB;AAAA,UACnC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AACzB,MAAM,8BAA8B,SAAS,iBAAiB,EAAE,YAAY,mBAAmB;AACtG,4BAA4B,YAAY;",
+  "names": []
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { omit } from "lodash";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { generateOption, getOptions } from "./getOptions.js";
+const usePerPageSelector = (props) => {
+  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;
+  const [isOpened, setIsOpened] = useState(false);
+  const options = useMemo(() => {
+    if (perPageOptions)
+      return perPageOptions.map(generateOption);
+    return getOptions(perPageStep, minPerPage, maxPerPage);
+  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
+  const actionRef = useRef({});
+  const btnRef = useRef(null);
+  useEffect(() => {
+    if (isOpened) {
+      actionRef.current.setActiveDescendant(pageSize.toString());
+      actionRef.current.scrollOptionIntoView(pageSize.toString());
+    }
+  }, [isOpened]);
+  const width = useMemo(() => {
+    const maxLength = options.reduce((acc, cur) => Math.max(acc, ("label" in cur ? cur.label : "").length), 0);
+    return maxLength * 6 + 90;
+  }, [options]);
+  const globalAttributes = omit(useGetGlobalAttributes(props), ["shape", "type", "size"]);
+  const xstyledAttributes = useGetXstyledProps(props);
+  return {
+    actionRef,
+    btnRef,
+    width,
+    isOpened,
+    setIsOpened,
+    options,
+    globalAttributes,
+    xstyledAttributes
+  };
+};
+export {
+  usePerPageSelector
+};
+//# sourceMappingURL=usePerPageSelector.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/usePerPageSelector.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { generateOption, getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const usePerPageSelector = (props: DSPaginationT.PerPageSelectorInternalProps) => {\n  const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;\n\n  const [isOpened, setIsOpened] = useState(false);\n\n  const options = useMemo(() => {\n    if (perPageOptions) return perPageOptions.map(generateOption);\n    return getOptions(perPageStep, minPerPage, maxPerPage);\n  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n  const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n  const btnRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (isOpened) {\n      actionRef.current.setActiveDescendant(pageSize.toString());\n      actionRef.current.scrollOptionIntoView(pageSize.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened]);\n\n  const width = useMemo(() => {\n    const maxLength = options.reduce((acc, cur) => Math.max(acc, ('label' in cur ? cur.label : '').length), 0);\n    return maxLength * 6 + 90;\n  }, [options]);\n\n  const globalAttributes = omit(useGetGlobalAttributes(props), ['shape', 'type', 'size']);\n  const xstyledAttributes = useGetXstyledProps(props);\n\n  return {\n    actionRef,\n    btnRef,\n    width,\n    isOpened,\n    setIsOpened,\n    options,\n    globalAttributes,\n    xstyledAttributes,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,YAAY;AACrB,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,gBAAgB,kBAAkB;AAGpC,MAAM,qBAAqB,CAAC,UAAsD;AACvF,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAE1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,mBAAmB,KAAK,uBAAuB,KAAK,GAAG,CAAC,SAAS,QAAQ,MAAM,CAAC;AACtF,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/parts/PaginationContent.js

@@ -1,13 +1,11 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Grid } from "@elliemae/ds-grid";
-import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
-import { PaginationContainer, PaginationSeparator, PaginationWrapper } from "../styled";
-import PerPageSelector from "./PerPageSelector";
-import Paginator from "./Paginator";
-import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
-import { PagePrevButton } from "./PagePrevButton";
-import { PageNextButton } from "./PageNextButton";
+import { DSPaginationContainer } from "./DSPaginationContainer.js";
+import { DSPaginationSeparator } from "../styled.js";
+import { DSPerPageSelector } from "./DSPerPageSelector/index.js";
+import { DSPaginator } from "./DSPaginator/index.js";
+import { DSPagePrevButton } from "./DSPagePrevButton.js";
+import { DSPageNextButton } from "./DSPageNextButton.js";
 const PaginationContent = (props) => {
   const {
     pageIndex,
@@ -28,50 +26,37 @@ const PaginationContent = (props) => {
     perPageStep,
     minPerPage
   } = props;
-  const { rows, wrap, ...globalAttributes } = useGetGlobalAttributes(props);
-  const xstyledProps = useGetXstyledProps(props);
-  return /* @__PURE__ */ jsx(
-    PaginationContainer,
-    {
-      justifyContent: "center",
-      alignItems: "center",
-      "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
-      ...globalAttributes,
-      ...xstyledProps,
-      cols: ["minmax(auto, 80%)"],
-      children: /* @__PURE__ */ jsxs(PaginationWrapper, { children: [
-        showPerPageSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            PerPageSelector,
-            {
-              pageSize,
-              onPageSizeChange,
-              perPageOptions,
-              maxPerPage,
-              perPageStep,
-              minPerPage
-            }
-          ),
-          /* @__PURE__ */ jsx(PaginationSeparator, { mr: 24 })
-        ] }),
-        /* @__PURE__ */ jsxs(Grid, { mr: "32px", alignItems: "center", style: { gridAutoFlow: "column" }, children: [
-          /* @__PURE__ */ jsx(PagePrevButton, { canPreviousPage, onPreviousPage }),
-          /* @__PURE__ */ jsx(
-            Paginator,
-            {
-              pageCount,
-              isLoadingPageCount,
-              pageIndex,
-              onPageChange,
-              pageDetails,
-              pageDetailsTitle
-            }
-          ),
-          /* @__PURE__ */ jsx(PageNextButton, { canNextPage, onNextPage })
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(DSPaginationContainer, { ...props, children: [
+    showPerPageSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        DSPerPageSelector,
+        {
+          pageSize,
+          onPageSizeChange,
+          perPageOptions,
+          maxPerPage,
+          perPageStep,
+          minPerPage
+        }
+      ),
+      /* @__PURE__ */ jsx(DSPaginationSeparator, { mr: 24 })
+    ] }),
+    /* @__PURE__ */ jsx(DSPagePrevButton, { canPreviousPage, onPreviousPage }),
+    /* @__PURE__ */ jsx(DSPaginationSeparator, {}),
+    /* @__PURE__ */ jsx(
+      DSPaginator,
+      {
+        pageCount,
+        isLoadingPageCount,
+        pageIndex,
+        onPageChange,
+        pageDetails,
+        pageDetailsTitle
+      }
+    ),
+    /* @__PURE__ */ jsx(DSPaginationSeparator, {}),
+    /* @__PURE__ */ jsx(DSPageNextButton, { canNextPage, onNextPage })
+  ] });
 };
 export {
   PaginationContent

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PaginationContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { PaginationContainer, PaginationSeparator, PaginationWrapper } from '../styled';\nimport PerPageSelector from './PerPageSelector';\nimport Paginator from './Paginator';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PagePrevButton } from './PagePrevButton';\nimport { PageNextButton } from './PageNextButton';\nimport type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  // eslint-disable-next-line no-unused-vars\n  const { rows, wrap, ...globalAttributes } = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <PaginationContainer\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n      {...globalAttributes}\n      {...xstyledProps}\n      cols={['minmax(auto, 80%)']}\n    >\n      <PaginationWrapper>\n        {showPerPageSelector && (\n          <>\n            <PerPageSelector\n              pageSize={pageSize}\n              onPageSizeChange={onPageSizeChange}\n              perPageOptions={perPageOptions}\n              maxPerPage={maxPerPage}\n              perPageStep={perPageStep}\n              minPerPage={minPerPage}\n            />\n            <PaginationSeparator mr={24} />\n          </>\n        )}\n        <Grid mr=\"32px\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n          <PagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n          <Paginator\n            pageCount={pageCount}\n            isLoadingPageCount={isLoadingPageCount}\n            pageIndex={pageIndex}\n            onPageChange={onPageChange}\n            pageDetails={pageDetails}\n            pageDetailsTitle={pageDetailsTitle}\n          />\n          <PageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n        </Grid>\n      </PaginationWrapper>\n    </PaginationContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACgDb,mBACE,KADF;AA9CV,SAAS,YAAY;AACrB,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,qBAAqB,qBAAqB,yBAAyB;AAC5E,OAAO,qBAAqB;AAC5B,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAGxB,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,QAAM,EAAE,MAAM,SAAS,iBAAiB,IAAI,uBAAuB,KAAK;AACxE,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,eAAa,uBAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,+BAAC,qBACE;AAAA,+BACC,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,uBAAoB,IAAI,IAAI;AAAA,WAC/B;AAAA,QAEF,qBAAC,QAAK,IAAG,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GAClE;AAAA,8BAAC,kBAAe,iBAAkC,gBAAgC;AAAA,UAClF;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,kBAAe,aAA0B,YAAwB;AAAA,WACpE;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSPaginationContainer } from './DSPaginationContainer.js';\nimport { DSPaginationSeparator } from '../styled.js';\nimport { DSPerPageSelector } from './DSPerPageSelector/index.js';\nimport { DSPaginator } from './DSPaginator/index.js';\nimport { DSPagePrevButton } from './DSPagePrevButton.js';\nimport { DSPageNextButton } from './DSPageNextButton.js';\nimport type { DSPaginationT } from '../react-desc-prop-types.js';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n  const {\n    pageIndex,\n    pageSize,\n    canPreviousPage,\n    canNextPage,\n    onPageSizeChange,\n    onNextPage,\n    onPreviousPage,\n    onPageChange,\n    pageCount,\n    isLoadingPageCount,\n    showPerPageSelector,\n    pageDetails,\n    pageDetailsTitle,\n    perPageOptions,\n    maxPerPage,\n    perPageStep,\n    minPerPage,\n  } = props;\n\n  return (\n    <DSPaginationContainer {...props}>\n      {showPerPageSelector && (\n        <>\n          <DSPerPageSelector\n            pageSize={pageSize}\n            onPageSizeChange={onPageSizeChange}\n            perPageOptions={perPageOptions}\n            maxPerPage={maxPerPage}\n            perPageStep={perPageStep}\n            minPerPage={minPerPage}\n          />\n          <DSPaginationSeparator mr={24} />\n        </>\n      )}\n      <DSPagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n      <DSPaginationSeparator />\n\n      <DSPaginator\n        pageCount={pageCount}\n        isLoadingPageCount={isLoadingPageCount}\n        pageIndex={pageIndex}\n        onPageChange={onPageChange}\n        pageDetails={pageDetails}\n        pageDetailsTitle={pageDetailsTitle}\n      />\n      <DSPaginationSeparator />\n\n      <DSPageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n    </DSPaginationContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCf,mBACE,KADF;AAhCR,SAAS,6BAA6B;AACtC,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAG1B,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,qBAAC,yBAAuB,GAAG,OACxB;AAAA,2BACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,yBAAsB,IAAI,IAAI;AAAA,OACjC;AAAA,IAEF,oBAAC,oBAAiB,iBAAkC,gBAAgC;AAAA,IACpF,oBAAC,yBAAsB;AAAA,IAEvB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,yBAAsB;AAAA,IAEvB,oBAAC,oBAAiB,aAA0B,YAAwB;AAAA,KACtE;AAEJ;",
   "names": []
 }

package/dist/esm/parts/index.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { DSPageNextButton, DSPageNextButtonWithSchema } from "./DSPageNextButton.js";
+import { DSPagePrevButton, DSPagePrevButtonWithSchema } from "./DSPagePrevButton.js";
+import { DSPaginationContainer, DSPaginationContainerWithSchema } from "./DSPaginationContainer.js";
+import { DSPerPageSelector, DSPerPageSelectorWithSchema } from "./DSPerPageSelector/index.js";
+import { DSPaginator, DSPaginatorWithSchema } from "./DSPaginator/index.js";
+export {
+  DSPageNextButton,
+  DSPageNextButtonWithSchema,
+  DSPagePrevButton,
+  DSPagePrevButtonWithSchema,
+  DSPaginationContainer,
+  DSPaginationContainerWithSchema,
+  DSPaginator,
+  DSPaginatorWithSchema,
+  DSPerPageSelector,
+  DSPerPageSelectorWithSchema
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSPageNextButton, DSPageNextButtonWithSchema } from './DSPageNextButton.js';\nexport { DSPagePrevButton, DSPagePrevButtonWithSchema } from './DSPagePrevButton.js';\nexport { DSPaginationContainer, DSPaginationContainerWithSchema } from './DSPaginationContainer.js';\nexport { DSPerPageSelector, DSPerPageSelectorWithSchema } from './DSPerPageSelector/index.js';\nexport { DSPaginator, DSPaginatorWithSchema } from './DSPaginator/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB,kCAAkC;AAC7D,SAAS,kBAAkB,kCAAkC;AAC7D,SAAS,uBAAuB,uCAAuC;AACvE,SAAS,mBAAmB,mCAAmC;AAC/D,SAAS,aAAa,6BAA6B;",
+  "names": []
+}

package/dist/esm/props.js

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { PropTypes } from "@elliemae/ds-props-helpers";
+const emptyFunc = () => null;
+const propTypes = {
+  pageCount: PropTypes.number.description("How many pages are there"),
+  pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
+  canPreviousPage: PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
+  canNextPage: PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
+  pageSize: PropTypes.number.description("The current page size").defaultValue(10),
+  showPerPageSelector: PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
+  perPageOptions: PropTypes.arrayOf(
+    PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        dsId: PropTypes.string,
+        value: PropTypes.number,
+        label: PropTypes.string,
+        type: PropTypes.oneOf(["single"])
+      })
+    ])
+  ).description("The available options for page size").defaultValue([10]),
+  perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5),
+  minPerPage: PropTypes.number.description("Step for the per page options").defaultValue(0),
+  maxPerPage: PropTypes.number.description("Step for the per page options").defaultValue(100),
+  onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
+  onPreviousPage: PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
+  onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  onNextPage: PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
+  pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
+  width: PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
+};
+const defaultProps = {
+  pageIndex: 1,
+  canPreviousPage: true,
+  canNextPage: true,
+  pageSize: 10,
+  showPerPageSelector: true,
+  perPageOptions: [10],
+  perPageStep: 5,
+  minPerPage: 0,
+  maxPerPage: 100,
+  onPageSizeChange: emptyFunc,
+  onPreviousPage: emptyFunc,
+  onNextPage: emptyFunc,
+  onPageChange: emptyFunc,
+  pageDetails: [],
+  pageDetailsTitle: "",
+  width: "100%"
+};
+export {
+  defaultProps,
+  propTypes
+};
+//# sourceMappingURL=props.js.map

package/dist/esm/props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nconst emptyFunc = () => null;\n\nexport const propTypes = {\n  pageCount: PropTypes.number.description('How many pages are there'),\n  pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n  canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n  canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n  pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n  showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n  perPageOptions: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.shape({\n        dsId: PropTypes.string,\n        value: PropTypes.number,\n        label: PropTypes.string,\n        type: PropTypes.oneOf(['single']),\n      }),\n    ]),\n  )\n    .description('The available options for page size')\n    .defaultValue([10]),\n  perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n  minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n  maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n  onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n  onPreviousPage: PropTypes.func\n    .description('Function invoked when the previous button is pressed')\n    .defaultValue(() => null),\n  onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n  onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n  pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n  pageDetailsTitle: PropTypes.string\n    .description('The title of the details (usually a column of your dataset)')\n    .defaultValue(''),\n  width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps = {\n  pageIndex: 1,\n  canPreviousPage: true,\n  canNextPage: true,\n  pageSize: 10,\n  showPerPageSelector: true,\n  perPageOptions: [10],\n  perPageStep: 5,\n  minPerPage: 0,\n  maxPerPage: 100,\n  onPageSizeChange: emptyFunc,\n  onPreviousPage: emptyFunc,\n  onNextPage: emptyFunc,\n  onPageChange: emptyFunc,\n  pageDetails: [],\n  pageDetailsTitle: '',\n  width: '100%',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAG1B,MAAM,YAAY,MAAM;AAEjB,MAAM,YAAY;AAAA,EACvB,WAAW,UAAU,OAAO,YAAY,0BAA0B;AAAA,EAClE,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,iBAAiB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,EAC/G,aAAa,UAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EACvG,UAAU,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,qBAAqB,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,EACtG,gBAAgB,UAAU;AAAA,IACxB,UAAU,UAAU;AAAA,MAClB,UAAU;AAAA,MACV,UAAU,MAAM;AAAA,QACd,MAAM,UAAU;AAAA,QAChB,OAAO,UAAU;AAAA,QACjB,OAAO,UAAU;AAAA,QACjB,MAAM,UAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,MAClC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EACG,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,aAAa,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACzF,YAAY,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACxF,YAAY,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,GAAG;AAAA,EAC1F,kBAAkB,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,UAAU,KACvB,YAAY,sDAAsD,EAClE,aAAa,MAAM,IAAI;AAAA,EAC1B,cAAc,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,YAAY,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,MAAM,IAAI;AAAA,EAC9G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AAAA,EAClB,OAAO,UAAU,IAAI,YAAY,2CAA2C,EAAE,aAAa,MAAM;AACnG;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC,EAAE;AAAA,EACnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,EAClB,OAAO;AACT;",
+  "names": []
+}

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

@@ -1,5 +1,28 @@
 import * as React from "react";
-import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+const perPageSelectorDefaultProps = {
+  pageSize: 10,
+  onPageSizeChange: () => null,
+  perPageStep: 5,
+  minPerPage: 0,
+  maxPerPage: 100
+};
+const pagePrevButtonDefaultProps = {
+  canPreviousPage: true,
+  onPreviousPage: () => null
+};
+const pageNextButtonDefaultProps = {
+  canNextPage: true,
+  onNextPage: () => null
+};
+const paginatorDefaultProps = {
+  pageCount: 0,
+  isLoadingPageCount: false,
+  pageIndex: 1,
+  onPageChange: () => null,
+  pageDetails: [],
+  pageDetailsTitle: ""
+};
 const defaultProps = {
   pageCount: 0,
   pageIndex: 1,
@@ -8,7 +31,6 @@ const defaultProps = {
   canNextPage: true,
   pageSize: 10,
   showPerPageSelector: true,
-  perPageOptions: [10],
   perPageStep: 5,
   minPerPage: 0,
   maxPerPage: 100,
@@ -32,17 +54,7 @@ const DSPaginationPropTypes = {
   onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
   onNextPage: PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
   showPerPageSelector: PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
-  perPageOptions: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.shape({
-        dsId: PropTypes.string,
-        value: PropTypes.number,
-        label: PropTypes.string,
-        type: PropTypes.oneOf(["single"])
-      })
-    ])
-  ).description("The available options for page size").defaultValue([10]),
+  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).description("The available options for page size").defaultValue([10]),
   minPerPage: PropTypes.number.description("Min for the per page options").defaultValue(0),
   maxPerPage: PropTypes.number.description("Max for the per page options").defaultValue(100),
   perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5),
@@ -53,9 +65,71 @@ const DSPaginationPropTypes = {
   isLoadingPageCount: PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false)
 };
 const DSPaginationPropTypesSchema = DSPaginationPropTypes;
+const DSPerPageSelectorPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  pageSize: PropTypes.number.description("The current page size").defaultValue(10),
+  onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
+  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.object])).description("The available options for page size").defaultValue([10]),
+  minPerPage: PropTypes.number.description("Min for the per page options").defaultValue(0),
+  maxPerPage: PropTypes.number.description("Max for the per page options").defaultValue(100),
+  perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5)
+};
+const DSPerPageSelectorPropTypesSchema = DSPerPageSelectorPropTypes;
+const DSPagePrevButtonPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  canPreviousPage: PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
+  onPreviousPage: PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null)
+};
+const DSPagePrevButtonPropTypesSchema = DSPagePrevButtonPropTypes;
+const DSPageNextButtonPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  canNextPage: PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
+  onNextPage: PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null)
+};
+const DSPageNextButtonPropTypesSchema = DSPageNextButtonPropTypes;
+const DSPaginatorPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
+  pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("How many pages are there"),
+  onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
+  isLoadingPageCount: PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false),
+  pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
+  pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue("")
+};
+const DSPaginatorPropTypesSchema = DSPaginatorPropTypes;
+const DSPaginationContainerPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes
+};
+const DSPaginationContainerPropTypesSchema = DSPaginationContainerPropTypes;
+const DSPaginationStyledPartPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes
+};
+const DSPaginationStyledPartPropTypesSchema = DSPaginationStyledPartPropTypes;
 export {
+  DSPageNextButtonPropTypes,
+  DSPageNextButtonPropTypesSchema,
+  DSPagePrevButtonPropTypes,
+  DSPagePrevButtonPropTypesSchema,
+  DSPaginationContainerPropTypes,
+  DSPaginationContainerPropTypesSchema,
   DSPaginationPropTypes,
   DSPaginationPropTypesSchema,
-  defaultProps
+  DSPaginationStyledPartPropTypes,
+  DSPaginationStyledPartPropTypesSchema,
+  DSPaginatorPropTypes,
+  DSPaginatorPropTypesSchema,
+  DSPerPageSelectorPropTypes,
+  DSPerPageSelectorPropTypesSchema,
+  defaultProps,
+  pageNextButtonDefaultProps,
+  pagePrevButtonDefaultProps,
+  paginatorDefaultProps,
+  perPageSelectorDefaultProps
 };
 //# sourceMappingURL=react-desc-prop-types.js.map