@elliemae/ds-pagination 3.0.0-next.1 → 3.0.0-next.13

package/cjs/parts/PerPageSelector.js

@@ -1,98 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var memoize = require('memoize-one');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
-var dsIcons = require('@elliemae/ds-icons');
-var styled = require('../styled.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
-
-const generateOption = value => {
-  if (typeof value === 'object') {
-    return value;
-  }
-
-  return {
-    dsId: value.toString(),
-    value,
-    label: value.toString(),
-    type: 'single'
-  };
-};
-
-const getOptions = memoize__default["default"]((step, min, max) => {
-  const options = dsUtilities.range(min, max + step, step).map(generateOption);
-  return min === 0 ? options.slice(1, options.length) : options;
-});
-
-const PerPageSelector = props => {
-  const [isOpened, setIsOpened] = react.useState(false);
-  const {
-    pageSize,
-    onPageSizeChange,
-    perPageOptions,
-    maxPerPage,
-    perPageStep,
-    minPerPage
-  } = props;
-  const options = react.useMemo(() => {
-    if (perPageOptions) return perPageOptions.map(generateOption);
-    return getOptions(perPageStep, minPerPage, maxPerPage);
-  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
-  const actionRef = react.useRef({});
-  const btnRef = react.useRef(null);
-  react.useEffect(() => {
-    if (isOpened) {
-      actionRef.current.setActiveDescendant(pageSize.toString());
-      actionRef.current.scrollOptionIntoView(pageSize.toString());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [isOpened]);
-  const {
-    width
-  } = dsUtilities.useOnElementResize(btnRef);
-  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: {
-      [pageSize.toString()]: true
-    },
-    onOptionClick: (_, clickedOption) => {
-      onPageSizeChange(clickedOption.value);
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    onClickOutside: () => {
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    customOffset: [0, 2],
-    startPlacementPreference: "top-end",
-    actionRef: actionRef,
-    minWidth: width + 25,
-    maxHeight: 300,
-    HeaderComp: () => 'Per Page'
-  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
-    style: {
-      marginLeft: '32px'
-    }
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: () => setIsOpened(true),
-    "aria-pressed": isOpened,
-    innerRef: btnRef
-  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
-    color: ['brand-primary', '700']
-  }))));
-};
-
-module.exports = PerPageSelector;

package/cjs/props.js

@@ -1,53 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-const emptyFunc = () => null;
-
-const propTypes = {
-  pageCount: reactDesc.PropTypes.number.description('How many pages are there'),
-  pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
-  canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
-  canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
-  pageSize: reactDesc.PropTypes.number.description('The current page size').defaultValue(10),
-  showPerPageSelector: reactDesc.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
-  perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.shape({
-    dsId: reactDesc.PropTypes.string,
-    value: reactDesc.PropTypes.number,
-    label: reactDesc.PropTypes.string,
-    type: reactDesc.PropTypes.oneOf(['single'])
-  })])).description('The available options for page size').defaultValue([10]),
-  perPageStep: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(5),
-  minPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(0),
-  maxPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(100),
-  onPageSizeChange: reactDesc.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
-  onPreviousPage: reactDesc.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
-  onPageChange: reactDesc.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
-  onNextPage: reactDesc.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
-  pageDetails: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Details to provide for each page').defaultValue([]),
-  pageDetailsTitle: reactDesc.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
-  width: reactDesc.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%'
-};
-
-exports.defaultProps = defaultProps;
-exports.propTypes = propTypes;

package/cjs/styled.js

@@ -1,48 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Grid = require('@elliemae/ds-grid');
-var dsButton = require('@elliemae/ds-button');
-var styled = require('styled-components');
-var styledComponents = require('@xstyled/styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
-
-const styledFocusCss = _ref => {
-  let {
-    theme
-  } = _ref;
-  return "\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 ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: 7;\n}");
-};
-
-const PaginationContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-mxz59e-0"
-})(["padding:0 ", ";height:42px;width:", ";max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"], props => props.theme.space.xs, props => sizeToCss(props.width) || '100%');
-const PaginationWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-mxz59e-1"
-})(["display:flex;justify-content:center;align-items:center;margin:0 32px;"]);
-const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-mxz59e-2"
-})(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
-const PaginationBoldText = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-mxz59e-3"
-})(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space);
-const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
-  componentId: "sc-mxz59e-4"
-})(["height:42px;display:flex;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{", "}"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
-const PreviousNextPageButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
-  componentId: "sc-mxz59e-5"
-})(["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);
-
-exports.PaginationBoldText = PaginationBoldText;
-exports.PaginationContainer = PaginationContainer;
-exports.PaginationDropdownButton = PaginationDropdownButton;
-exports.PaginationSeparator = PaginationSeparator;
-exports.PaginationWrapper = PaginationWrapper;
-exports.PreviousNextPageButton = PreviousNextPageButton;

package/esm/Pagination.js

@@ -1,27 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-import { describe } from 'react-desc';
-import { PaginationContent } from './parts/PaginationContent.js';
-import { propTypes, defaultProps } from './props.js';
-import { jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSPagination = props => {
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
-  return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
-};
-
-const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
-DSPaginationWithSchema.propTypes = propTypes;
-
-export { DSPagination, DSPaginationWithSchema };

package/esm/PaginationDataTestID.js

@@ -1,7 +0,0 @@
-const PAGINATION_DATA_TESTID = {
-  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
-  NEXT_BUTTON: 'data-table-pagination-next-button',
-  CONTAINER: 'data-table-pagination-container'
-};
-
-export { PAGINATION_DATA_TESTID };

package/esm/index.d.js

@@ -1 +0,0 @@
-

package/esm/index.js

@@ -1 +0,0 @@
-export { DSPagination, DSPaginationWithSchema } from './Pagination.js';

package/esm/parts/PageNextButton.js

@@ -1,25 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { ChevronRight } from '@elliemae/ds-icons';
-import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
-import { PreviousNextPageButton } from '../styled.js';
-
-const PageNextButton = _ref => {
-  let {
-    onNextPage,
-    canNextPage
-  } = _ref;
-  return /*#__PURE__*/_jsx(PreviousNextPageButton, {
-    onClick: () => {
-      if (canNextPage) onNextPage();
-    },
-    disabled: !canNextPage,
-    buttonType: "raw",
-    "data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
-    HeaderComp: () => 'Page'
-  }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
-    color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
-  }));
-};
-
-export { PageNextButton };

package/esm/parts/PagePrevButton.js

@@ -1,24 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { ChevronLeft } from '@elliemae/ds-icons';
-import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
-import { PreviousNextPageButton } from '../styled.js';
-
-const PagePrevButton = _ref => {
-  let {
-    onPreviousPage,
-    canPreviousPage
-  } = _ref;
-  return /*#__PURE__*/_jsx(PreviousNextPageButton, {
-    onClick: () => {
-      if (canPreviousPage) onPreviousPage();
-    },
-    disabled: !canPreviousPage,
-    buttonType: "raw",
-    "data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
-  }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
-    color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
-  }));
-};
-
-export { PagePrevButton };

package/esm/parts/PaginationContent.js

@@ -1,69 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import Grid from '@elliemae/ds-grid';
-import { PaginationContainer, PaginationWrapper, PaginationSeparator } from '../styled.js';
-import PerPageSelector from './PerPageSelector.js';
-import Paginator from './Paginator.js';
-import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
-import { PagePrevButton } from './PagePrevButton.js';
-import { PageNextButton } from './PageNextButton.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _PaginationSeparator;
-const PaginationContent = _ref => {
-  let {
-    pageIndex,
-    pageSize,
-    canPreviousPage,
-    canNextPage,
-    onPageSizeChange,
-    onNextPage,
-    onPreviousPage,
-    onPageChange,
-    pageCount,
-    showPerPageSelector,
-    pageDetails,
-    pageDetailsTitle,
-    perPageOptions,
-    maxPerPage,
-    perPageStep,
-    minPerPage,
-    width
-  } = _ref;
-  return /*#__PURE__*/_jsx(PaginationContainer, {
-    justifyContent: "center",
-    alignItems: "center",
-    width: width,
-    "data-testid": PAGINATION_DATA_TESTID.CONTAINER
-  }, void 0, /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(PerPageSelector, {
-      pageSize: pageSize,
-      onPageSizeChange: onPageSizeChange,
-      perPageOptions: perPageOptions,
-      maxPerPage: maxPerPage,
-      perPageStep: perPageStep,
-      minPerPage: minPerPage
-    }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {
-      mr: 24
-    }))]
-  }), /*#__PURE__*/_jsx(Grid, {
-    cols: ['auto', 'auto', 'auto', 'auto', 'auto'],
-    mr: "32px",
-    alignItems: "center"
-  }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
-    canPreviousPage: canPreviousPage,
-    onPreviousPage: onPreviousPage
-  }), /*#__PURE__*/_jsx(Paginator, {
-    pageCount: pageCount,
-    pageIndex: pageIndex,
-    onNextPage: onNextPage,
-    onPageChange: onPageChange,
-    pageDetails: pageDetails,
-    pageDetailsTitle: pageDetailsTitle
-  }), /*#__PURE__*/_jsx(PageNextButton, {
-    canNextPage: canNextPage,
-    onNextPage: onNextPage
-  }))));
-};
-
-export { PaginationContent };

package/esm/parts/Paginator.js

@@ -1,136 +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 { useState, useRef, useMemo, useEffect } 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 { PaginationSeparator, PaginationDropdownButton, PaginationBoldText } 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.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 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) => {
-        onPageChange(clickedOption.value);
-        setIsOpened(false);
-        btnRef.current.focus();
-      },
-      onClickOutside: () => {
-        setIsOpened(false);
-        btnRef.current.focus();
-      },
-      customOffset: [0, 2],
-      startPlacementPreference: "top-end",
-      actionRef: actionRef,
-      onKeyDown: onKeyDown,
-      minWidth: btnWidth + 23,
-      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(true),
-      innerRef: btnRef
-    }, void 0, /*#__PURE__*/_jsx("div", {
-      style: {
-        display: 'flex',
-        gridGap: '8px',
-        alignItems: 'center'
-      }
-    }, void 0, /*#__PURE__*/jsxs(Grid, {
-      cols: ['auto', 'auto', 'auto'],
-      alignItems: "center",
-      gutter: "xxxs",
-      ref: pageInfoRef,
-      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",
-        mr: "8px"
-      }, void 0, pageDetails[pageIndex])]
-    }), /*#__PURE__*/_jsx(ChevronDown, {
-      color: ['brand-primary', '700']
-    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
-  });
-};
-
-export { Paginator as default };

package/esm/parts/PerPageSelector.js

@@ -1,91 +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 { useState, useMemo, useRef, useEffect } from 'react';
-import memoize from 'memoize-one';
-import { range, useOnElementResize } 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
-  } = useOnElementResize(btnRef);
-  return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: {
-      [pageSize.toString()]: true
-    },
-    onOptionClick: (_, clickedOption) => {
-      onPageSizeChange(clickedOption.value);
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    onClickOutside: () => {
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    customOffset: [0, 2],
-    startPlacementPreference: "top-end",
-    actionRef: actionRef,
-    minWidth: width + 25,
-    maxHeight: 300,
-    HeaderComp: () => 'Per Page'
-  }, void 0, /*#__PURE__*/_jsx("div", {
-    style: {
-      marginLeft: '32px'
-    }
-  }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: () => setIsOpened(true),
-    "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 'react-desc';
-
-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 };