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

package/dist/esm/parts/PerPageSelector.js

@@ -1,88 +0,0 @@
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import memoize from "memoize-one";
-import { range } from "@elliemae/ds-utilities";
-import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
-import { ChevronDown } from "@elliemae/ds-icons";
-import { PaginationDropdownButton } from "../styled";
-const generateOption = (value) => {
-  if (typeof value === "object") {
-    return value;
-  }
-  return {
-    dsId: value.toString(),
-    value,
-    label: value.toString(),
-    type: "single"
-  };
-};
-const getOptions = memoize((step, min, max) => {
-  const options = range(min, max + step, step).map(generateOption);
-  return min === 0 ? options.slice(1, options.length) : options;
-});
-const Header = () => /* @__PURE__ */ jsx(Fragment, { children: "Per Page" });
-const PerPageSelector = (props) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;
-  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, cur?.label?.length ?? 0), 0);
-    return maxLength * 6 + 90;
-  }, [options]);
-  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: [10, 2],
-      startPlacementPreference: "top-start",
-      actionRef,
-      minWidth: width,
-      maxHeight: 300,
-      HeaderComp: Header,
-      children: /* @__PURE__ */ jsx("div", { style: { marginLeft: "32px" }, children: /* @__PURE__ */ jsxs(
-        PaginationDropdownButton,
-        {
-          buttonType: "raw",
-          onClick: () => setIsOpened((prev) => !prev),
-          "aria-pressed": isOpened,
-          innerRef: btnRef,
-          "aria-label": `${pageSize} rows per page. Press to select rows per page`,
-          children: [
-            pageSize,
-            " / page",
-            /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
-          ]
-        }
-      ) })
-    }
-  );
-};
-var PerPageSelector_default = PerPageSelector;
-export {
-  PerPageSelector_default as default
-};
-//# sourceMappingURL=PerPageSelector.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PerPageSelector.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport type { DSPaginationT } from '../react-desc-prop-types';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value: number | Record<string, unknown>) => {\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  };\n};\n\nconst getOptions = memoize((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\nconst Header = () => <>{'Per Page'}</>;\n\nconst PerPageSelector: React.ComponentType<\n  Pick<\n    DSPaginationT.InternalProps,\n    'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n  >\n> = (props) => {\n  const [isOpened, setIsOpened] = useState(false);\n  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\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, (cur?.label as string)?.length ?? 0), 0);\n    return maxLength * 6 + 90;\n  }, [options]);\n\n  return (\n    <DSDropdownMenuV2\n      isOpened={isOpened}\n      options={options}\n      selectedOptions={{ [pageSize.toString()]: true }}\n      onOptionClick={(_, clickedOption) => {\n        onPageSizeChange(clickedOption.value);\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      onClickOutside={() => {\n        setIsOpened(false);\n        btnRef.current?.focus();\n      }}\n      customOffset={[10, 2]}\n      startPlacementPreference=\"top-start\"\n      actionRef={actionRef}\n      minWidth={width}\n      maxHeight={300}\n      HeaderComp={Header}\n    >\n      <div style={{ marginLeft: '32px' }}>\n        <PaginationDropdownButton\n          buttonType=\"raw\"\n          onClick={() => setIsOpened((prev) => !prev)}\n          aria-pressed={isOpened}\n          innerRef={btnRef}\n          aria-label={`${pageSize} rows per page. Press to select rows per page`}\n        >\n          {pageSize} / page\n          <ChevronDown color={['brand-primary', '700']} />\n        </PaginationDropdownButton>\n      </div>\n    </DSDropdownMenuV2>\n  );\n};\n\nexport default PerPageSelector;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC0BF,wBAsDb,YAtDa;AAzBrB,SAAgB,WAAW,SAAS,QAAQ,gBAAgB;AAC5D,OAAO,aAAa;AACpB,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,SAAS,gCAAgC;AAEzC,MAAM,iBAAiB,CAAC,UAA4C;AAClE,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;AAEA,MAAM,aAAa,QAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD,CAAC;AAED,MAAM,SAAS,MAAM,gCAAG,sBAAW;AAEnC,MAAM,kBAKF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,WAAW,IAAI;AAE5F,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,KAAM,KAAK,OAAkB,UAAU,CAAC,GAAG,CAAC;AACpG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,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,yBAAiB,cAAc,KAAK;AACpC,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,IAAI,CAAC;AAAA,MACpB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ,8BAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,UAC1C,gBAAc;AAAA,UACd,UAAU;AAAA,UACV,cAAY,GAAG;AAAA,UAEd;AAAA;AAAA,YAAS;AAAA,YACV,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,0BAAQ;",
-  "names": []
-}

package/dist/types/hooks/usePaginationSearch.d.ts

@@ -1 +0,0 @@
-export declare const usePaginationSearch: (pageCount: number, actionRef: React.MutableRefObject<any>) => React.KeyboardEventHandler;

package/dist/types/parts/PageNextButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { DSPaginationT } from '../react-desc-prop-types';
-export declare const PageNextButton: React.ComponentType<Pick<DSPaginationT.InternalProps, 'onNextPage' | 'canNextPage'>>;

package/dist/types/parts/PagePrevButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { DSPaginationT } from '../react-desc-prop-types';
-export declare const PagePrevButton: React.ComponentType<Pick<DSPaginationT.InternalProps, 'onPreviousPage' | 'canPreviousPage'>>;

package/dist/types/parts/Paginator.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-interface PaginatorPropsT {
-    pageIndex: number;
-    pageCount: number | string;
-    isLoadingPageCount: boolean;
-    onPageChange: (page: number) => void;
-    pageDetails: string[];
-    pageDetailsTitle: string;
-}
-declare const Paginator: React.ComponentType<PaginatorPropsT>;
-export default Paginator;

package/dist/types/parts/PerPageSelector.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { DSPaginationT } from '../react-desc-prop-types';
-declare const PerPageSelector: React.ComponentType<Pick<DSPaginationT.InternalProps, 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'>>;
-export default PerPageSelector;