@elliemae/ds-pagination 2.3.0-next.3 → 3.0.0-alpha.0

package/cjs/props.js

@@ -1,53 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dsPropsHelpers = require('@elliemae/ds-props-helpers');
-
-const emptyFunc = () => null;
-
-const propTypes = {
-  pageCount: dsPropsHelpers.PropTypes.number.description('How many pages are there'),
-  pageIndex: dsPropsHelpers.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
-  canPreviousPage: dsPropsHelpers.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
-  canNextPage: dsPropsHelpers.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
-  pageSize: dsPropsHelpers.PropTypes.number.description('The current page size').defaultValue(10),
-  showPerPageSelector: dsPropsHelpers.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
-  perPageOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.shape({
-    dsId: dsPropsHelpers.PropTypes.string,
-    value: dsPropsHelpers.PropTypes.number,
-    label: dsPropsHelpers.PropTypes.string,
-    type: dsPropsHelpers.PropTypes.oneOf(['single'])
-  })])).description('The available options for page size').defaultValue([10]),
-  perPageStep: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(5),
-  minPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(0),
-  maxPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(100),
-  onPageSizeChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
-  onPreviousPage: dsPropsHelpers.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
-  onPageChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
-  onNextPage: dsPropsHelpers.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
-  pageDetails: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.string).description('Details to provide for each page').defaultValue([]),
-  pageDetailsTitle: dsPropsHelpers.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
-  width: dsPropsHelpers.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,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var Grid = require('@elliemae/ds-grid');
-var dsButton = require('@elliemae/ds-button');
-var styled = require('styled-components');
-var styledComponents = require('@xstyled/styled-components');
-var dsSystem = require('@elliemae/ds-system');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
-const styledFocusCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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__default["default"](Grid__default["default"]).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__default["default"].div.withConfig({
-  componentId: "sc-mxz59e-1"
-})(["display:flex;justify-content:center;align-items:center;"]);
-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 InvisibleDetail = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-mxz59e-4"
-})(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
-const PaginationDetail = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-mxz59e-5"
-})(["position:absolute;top:0;left:0;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
-const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.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__default["default"](dsButton.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);
-
-exports.InvisibleDetail = InvisibleDetail;
-exports.PaginationBoldText = PaginationBoldText;
-exports.PaginationContainer = PaginationContainer;
-exports.PaginationDetail = PaginationDetail;
-exports.PaginationDropdownButton = PaginationDropdownButton;
-exports.PaginationSeparator = PaginationSeparator;
-exports.PaginationWrapper = PaginationWrapper;
-exports.PreviousNextPageButton = PreviousNextPageButton;

package/esm/Pagination.js

@@ -1,26 +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 { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
-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,85 +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 _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import Grid from '@elliemae/ds-grid';
-import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-var _PaginationSeparator;
-
-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 PaginationContent = props => {
-  const {
-    pageIndex,
-    pageSize,
-    canPreviousPage,
-    canNextPage,
-    onPageSizeChange,
-    onNextPage,
-    onPreviousPage,
-    onPageChange,
-    pageCount,
-    showPerPageSelector,
-    pageDetails,
-    pageDetailsTitle,
-    perPageOptions,
-    maxPerPage,
-    perPageStep,
-    minPerPage,
-    width
-  } = props;
-  const globalAttributes = useGetGlobalAttributes(props);
-  return /*#__PURE__*/jsx(PaginationContainer, _objectSpread(_objectSpread({
-    justifyContent: "center",
-    alignItems: "center",
-    width: width.toString(),
-    "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
-    cols: ['minmax(auto, 80%)']
-  }, globalAttributes), {}, {
-    children: /*#__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, {
-      mr: "32px",
-      alignItems: "center",
-      style: {
-        gridAutoFlow: 'column'
-      }
-    }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
-      canPreviousPage: canPreviousPage,
-      onPreviousPage: onPreviousPage
-    }), /*#__PURE__*/_jsx(Paginator, {
-      pageCount: pageCount,
-      pageIndex: pageIndex,
-      onPageChange: onPageChange,
-      pageDetails: pageDetails,
-      pageDetailsTitle: pageDetailsTitle
-    }), /*#__PURE__*/_jsx(PageNextButton, {
-      canNextPage: canNextPage,
-      onNextPage: onNextPage
-    })))
-  }));
-};
-
-export { PaginationContent };

package/esm/parts/Paginator.js

@@ -1,146 +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.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText, InvisibleDetail, PaginationDetail } 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 longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
-  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 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: [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(prev => !prev),
-      innerRef: btnRef
-    }, void 0, /*#__PURE__*/_jsx(Grid, {
-      gutter: "xxs",
-      alignItems: "center",
-      cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 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"
-      }, void 0, /*#__PURE__*/_jsx(InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx(PaginationDetail, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-        value: pageDetails[pageIndex]
-      }, 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,95 +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) => {
-      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: [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(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 } 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);
-const InvisibleDetail = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-mxz59e-4"
-})(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
-const PaginationDetail = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-mxz59e-5"
-})(["position:absolute;top:0;left:0;width:100%;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/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;