@elliemae/ds-pagination 2.3.1 → 3.0.0-alpha.3

package/esm/parts/Paginator.js

@@ -1,156 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import { useState, useRef, useMemo, useEffect, useLayoutEffect } from 'react';
-import { Checkmark, ChevronDown } from '@elliemae/ds-icons';
-import { useOnElementResize } from '@elliemae/ds-utilities';
-import Grid from '@elliemae/ds-grid';
-import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
-import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText, InvisibleDetail } from '../styled.js';
-import { usePaginationSearch } from '../hooks/usePaginationSearch.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
-
-const Paginator = props => {
-  var _span2;
-
-  const {
-    pageIndex,
-    pageCount,
-    onPageChange,
-    pageDetails,
-    pageDetailsTitle
-  } = props;
-  const [isOpened, setIsOpened] = useState(false);
-  const btnRef = useRef(null);
-  const pageInfoRef = useRef(null);
-  const {
-    width: btnWidth
-  } = useOnElementResize(btnRef);
-  const {
-    width: txtWidth
-  } = useOnElementResize(pageInfoRef);
-  const options = useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
-    var _span;
-
-    const option = {
-      dsId: (index + 1).toString(),
-      label: (index + 1).toString(),
-      value: index + 1,
-      type: 'single'
-    };
-
-    if (pageDetails !== null && pageDetails !== void 0 && pageDetails.length) {
-      option.render = () => /*#__PURE__*/_jsx(Grid, {
-        cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
-        gutter: "xxs",
-        alignItems: "center"
-      }, void 0, pageIndex === index ? /*#__PURE__*/_jsx(Checkmark, {
-        size: "s",
-        color: ['brand-primary', '600']
-      }) : _div || (_div = /*#__PURE__*/_jsx("div", {})), _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx("span", {
-        style: {
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden'
-        }
-      }, void 0, pageDetails[index]));
-    }
-
-    return option;
-  }), [pageCount, pageDetails, pageIndex, txtWidth]);
-  const actionRef = useRef({});
-  useEffect(() => {
-    if (isOpened) {
-      actionRef.current.setActiveDescendant((pageIndex + 1).toString());
-      actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpened]);
-  const [detailWidth, setDetailWidth] = useState(0);
-  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]);
-  const onKeyDown = usePaginationSearch(pageCount, actionRef);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {})), /*#__PURE__*/_jsx(DSDropdownMenuV2, {
-      isOpened: isOpened,
-      options: options,
-      selectedOptions: {
-        [(pageIndex + 1).toString()]: true
-      },
-      onOptionClick: (_, clickedOption) => {
-        var _btnRef$current;
-
-        onPageChange(clickedOption.value);
-        setIsOpened(false);
-        (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
-      },
-      onClickOutside: () => {
-        var _btnRef$current2;
-
-        setIsOpened(false);
-        (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
-      },
-      customOffset: [-23, 2],
-      startPlacementPreference: "top-start",
-      actionRef: actionRef,
-      onKeyDown: onKeyDown,
-      minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
-      maxHeight: 300,
-      HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx(Grid, {
-        cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
-      }, void 0, /*#__PURE__*/_jsx("span", {
-        style: {
-          marginLeft: '8px'
-        }
-      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx(PaginationSeparator, {
-        height: "100%"
-      })), _span2 || (_span2 = /*#__PURE__*/_jsx("span", {}, void 0, pageDetailsTitle))) : 'Page'
-    }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
-      buttonType: "raw",
-      onClick: () => setIsOpened(prev => !prev),
-      innerRef: btnRef
-    }, void 0, /*#__PURE__*/_jsx(Grid, {
-      gutter: "xxs",
-      alignItems: "center",
-      cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content'] : ['auto', 'min-content']
-    }, void 0, /*#__PURE__*/jsxs(Grid, {
-      alignItems: "center",
-      gutter: "xxxs",
-      ref: pageInfoRef,
-      style: {
-        gridAutoFlow: 'column'
-      },
-      children: [/*#__PURE__*/_jsx(PaginationBoldText, {
-        fontSize: "18px"
-      }, void 0, pageIndex + 1), " / ", pageCount]
-    }), pageDetails.length !== 0 && /*#__PURE__*/jsxs(Fragment, {
-      children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx(PaginationSeparator, {
-        height: "12px",
-        ml: "8px"
-      })), /*#__PURE__*/_jsx(PaginationBoldText, {
-        fontSize: "13px",
-        w: detailWidth,
-        mr: "xxs",
-        display: "grid"
-      }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-        value: pageDetails[pageIndex]
-      }, void 0, pageDetails[pageIndex]), pageDetails.map(pageDetail => /*#__PURE__*/_jsx(InvisibleDetail, {
-        "data-testid": "ds-pagination-invisible-detail-for-width-calc"
-      }, void 0, pageDetail)))]
-    }), /*#__PURE__*/_jsx(ChevronDown, {
-      color: ['brand-primary', '700']
-    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
-  });
-};
-
-export { Paginator as default };

package/esm/parts/PerPageSelector.js

@@ -1,103 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import { useState, useMemo, useRef, useEffect } 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.js';
-
-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 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());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpened]);
-  const width = useMemo(() => {
-    const maxLength = options.reduce((acc, cur) => {
-      var _length, _cur$label;
-
-      return Math.max(acc, (_length = cur === null || cur === void 0 ? void 0 : (_cur$label = cur.label) === null || _cur$label === void 0 ? void 0 : _cur$label.length) !== null && _length !== void 0 ? _length : 0);
-    }, 0);
-    return maxLength * 6 + 90;
-  }, [options]);
-  return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: {
-      [pageSize.toString()]: true
-    },
-    onOptionClick: (_, clickedOption) => {
-      var _btnRef$current;
-
-      onPageSizeChange(clickedOption.value);
-      setIsOpened(false);
-      (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
-    },
-    onClickOutside: () => {
-      var _btnRef$current2;
-
-      setIsOpened(false);
-      (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
-    },
-    customOffset: [10, 2],
-    startPlacementPreference: "top-start",
-    actionRef: actionRef,
-    minWidth: width,
-    maxHeight: 300,
-    HeaderComp: () => 'Per Page'
-  }, void 0, /*#__PURE__*/_jsx("div", {
-    style: {
-      marginLeft: '32px'
-    }
-  }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: () => setIsOpened(prev => !prev),
-    "aria-pressed": isOpened,
-    innerRef: btnRef
-  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx(ChevronDown, {
-    color: ['brand-primary', '700']
-  }))));
-};
-
-export { PerPageSelector as default };

package/esm/props.js

@@ -1,48 +0,0 @@
-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 };

package/esm/styled.js

@@ -1,40 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import Grid from '@elliemae/ds-grid';
-import { DSButtonV2 } from '@elliemae/ds-button';
-import styled from 'styled-components';
-import { typography, space, sizing, layout } from '@xstyled/styled-components';
-import { css } from '@elliemae/ds-system';
-
-var _templateObject;
-const styledFocusCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.brand[700];
-});
-const PaginationContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-mxz59e-0"
-})(["height:42px;max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"]);
-const PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-mxz59e-1"
-})(["display:flex;justify-content:center;align-items:center;"]);
-const PaginationSeparator = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-mxz59e-2"
-})(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
-const PaginationBoldText = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-mxz59e-3"
-})(["font-weight:", ";", " ", " ", " ", " position:relative;"], props => props.theme.fontWeights.semibold, typography, space, sizing, layout);
-const InvisibleDetail = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-mxz59e-4"
-})(["opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;"]);
-const PaginationDetail = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-mxz59e-5"
-})(["text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
-const PaginationDropdownButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-mxz59e-6"
-})(["height:42px;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}white-space:nowrap;"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
-const PreviousNextPageButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-mxz59e-7"
-})(["height:42px;display:grid;place-items:center;position:relative;padding-left:8px;padding-right:8px;border-radius:0;cursor:", ";:focus{", "}"], props => props.disabled ? 'not-allowed' : 'pointer', styledFocusCss);
-
-export { InvisibleDetail, PaginationBoldText, PaginationContainer, PaginationDetail, PaginationDropdownButton, PaginationSeparator, PaginationWrapper, PreviousNextPageButton };

package/types/Pagination.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from './index.d';
-declare const DSPagination: React.ComponentType<DSPaginationProps>;
-declare const DSPaginationWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSPaginationProps>;
-export { DSPagination, DSPaginationWithSchema };

package/types/PaginationDataTestID.d.ts

@@ -1,5 +0,0 @@
-export declare const PAGINATION_DATA_TESTID: {
-    PREVIOUS_BUTTON: string;
-    NEXT_BUTTON: string;
-    CONTAINER: string;
-};

package/types/hooks/usePaginationSearch.d.ts

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

package/types/index.d.ts

@@ -1 +0,0 @@
-export * from './Pagination';

package/types/parts/PageNextButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PageNextButton: React.ComponentType<Required<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>>>;

package/types/parts/PagePrevButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PagePrevButton: React.ComponentType<Required<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>>>;

package/types/parts/PaginationContent.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PaginationContent: React.ComponentType<Required<DSPaginationProps>>;

package/types/parts/Paginator.d.ts

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

package/types/parts/PerPageSelector.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-declare const PerPageSelector: React.ComponentType<Required<Pick<DSPaginationProps, 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'>>>;
-export default PerPageSelector;

package/types/props.d.ts

@@ -1,20 +0,0 @@
-import { WeakValidationMap } from 'react';
-export declare const propTypes: WeakValidationMap<unknown>;
-export declare const defaultProps: {
-    pageIndex: number;
-    canPreviousPage: boolean;
-    canNextPage: boolean;
-    pageSize: number;
-    showPerPageSelector: boolean;
-    perPageOptions: number[];
-    perPageStep: number;
-    minPerPage: number;
-    maxPerPage: number;
-    onPageSizeChange: () => null;
-    onPreviousPage: () => null;
-    onNextPage: () => null;
-    onPageChange: () => null;
-    pageDetails: never[];
-    pageDetailsTitle: string;
-    width: string;
-};

package/types/styled.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { TypographyProps, SpaceProps, SizingProps, LayoutProps } from '@xstyled/styled-components';
-export declare const PaginationContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationBoldText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TypographyProps<import("@xstyled/system").Theme> & SpaceProps<import("@xstyled/system").Theme> & SizingProps<import("@xstyled/system").Theme> & LayoutProps<import("@xstyled/system").Theme>, never>;
-export declare const InvisibleDetail: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationDetail: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const PaginationDropdownButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
-export declare const PreviousNextPageButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;