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

package/cjs/Pagination.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var PaginationContent = require('./parts/PaginationContent.js');
+var props = require('./props.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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$1 => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propTypes);
+  return /*#__PURE__*/jsxRuntime.jsx(PaginationContent.PaginationContent, _objectSpread({}, propsWithDefault));
+};
+
+const DSPaginationWithSchema = dsPropsHelpers.describe(DSPagination).description('DSPagination');
+DSPaginationWithSchema.propTypes = props.propTypes;
+
+exports.DSPagination = DSPagination;
+exports.DSPaginationWithSchema = DSPaginationWithSchema;

package/cjs/PaginationDataTestID.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const PAGINATION_DATA_TESTID = {
+  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
+  NEXT_BUTTON: 'data-table-pagination-next-button',
+  CONTAINER: 'data-table-pagination-container'
+};
+
+exports.PAGINATION_DATA_TESTID = PAGINATION_DATA_TESTID;

package/cjs/hooks/usePaginationSearch.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
+
+const usePaginationSearch = (pageCount, actionRef) => {
+  const [searchValue, setSearchValue] = react.useState('');
+  const [shouldResetSearchValue, setShouldResetSearchValue] = react.useState(true);
+  const timeoutRef = react.useRef(null);
+  react.useEffect(() => {
+    if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {
+      actionRef.current.setActiveDescendant(searchValue);
+      actionRef.current.scrollOptionIntoView(searchValue);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [searchValue]);
+  const onKeyDown = react.useCallback(e => {
+    if (e.code.startsWith('Digit')) {
+      if (shouldResetSearchValue) setSearchValue(e.key);else setSearchValue(prevValue => prevValue + e.key);
+      setShouldResetSearchValue(false);
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        setShouldResetSearchValue(true);
+      }, 1000);
+    }
+  }, [shouldResetSearchValue]);
+  return onKeyDown;
+};
+
+exports.usePaginationSearch = usePaginationSearch;

package/cjs/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Pagination = require('./Pagination.js');
+
+
+
+exports.DSPagination = Pagination.DSPagination;
+exports.DSPaginationWithSchema = Pagination.DSPaginationWithSchema;

package/cjs/parts/PageNextButton.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var PaginationDataTestID = require('../PaginationDataTestID.js');
+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);
+
+const PageNextButton = _ref => {
+  let {
+    onNextPage,
+    canNextPage
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styled.PreviousNextPageButton, {
+    onClick: () => {
+      if (canNextPage) onNextPage();
+    },
+    disabled: !canNextPage,
+    buttonType: "raw",
+    "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.NEXT_BUTTON,
+    HeaderComp: () => 'Page'
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronRight, {
+    color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
+  }));
+};
+
+exports.PageNextButton = PageNextButton;

package/cjs/parts/PagePrevButton.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var PaginationDataTestID = require('../PaginationDataTestID.js');
+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);
+
+const PagePrevButton = _ref => {
+  let {
+    onPreviousPage,
+    canPreviousPage
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styled.PreviousNextPageButton, {
+    onClick: () => {
+      if (canPreviousPage) onPreviousPage();
+    },
+    disabled: !canPreviousPage,
+    buttonType: "raw",
+    "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronLeft, {
+    color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
+  }));
+};
+
+exports.PagePrevButton = PagePrevButton;

package/cjs/parts/PaginationContent.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var Grid = require('@elliemae/ds-grid');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styled = require('../styled.js');
+var PerPageSelector = require('./PerPageSelector.js');
+var Paginator = require('./Paginator.js');
+var PaginationDataTestID = require('../PaginationDataTestID.js');
+var PagePrevButton = require('./PagePrevButton.js');
+var PageNextButton = require('./PageNextButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+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__default["default"](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 = dsPropsHelpers.useGetGlobalAttributes(props);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.PaginationContainer, _objectSpread(_objectSpread({
+    justifyContent: "center",
+    alignItems: "center",
+    width: width.toString(),
+    "data-testid": PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER,
+    cols: ['minmax(auto, 80%)']
+  }, globalAttributes), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](styled.PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/_jsx__default["default"](PerPageSelector, {
+        pageSize: pageSize,
+        onPageSizeChange: onPageSizeChange,
+        perPageOptions: perPageOptions,
+        maxPerPage: maxPerPage,
+        perPageStep: perPageStep,
+        minPerPage: minPerPage
+      }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
+        mr: 24
+      }))]
+    }), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      mr: "32px",
+      alignItems: "center",
+      style: {
+        gridAutoFlow: 'column'
+      }
+    }, void 0, /*#__PURE__*/_jsx__default["default"](PagePrevButton.PagePrevButton, {
+      canPreviousPage: canPreviousPage,
+      onPreviousPage: onPreviousPage
+    }), /*#__PURE__*/_jsx__default["default"](Paginator, {
+      pageCount: pageCount,
+      pageIndex: pageIndex,
+      onPageChange: onPageChange,
+      pageDetails: pageDetails,
+      pageDetailsTitle: pageDetailsTitle
+    }), /*#__PURE__*/_jsx__default["default"](PageNextButton.PageNextButton, {
+      canNextPage: canNextPage,
+      onNextPage: onNextPage
+    })))
+  }));
+};
+
+exports.PaginationContent = PaginationContent;

package/cjs/parts/Paginator.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var react = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var dsUtilities = require('@elliemae/ds-utilities');
+var Grid = require('@elliemae/ds-grid');
+var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
+var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
+var styled = require('../styled.js');
+var usePaginationSearch = require('../hooks/usePaginationSearch.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
+
+const Paginator = props => {
+  var _span2;
+
+  const {
+    pageIndex,
+    pageCount,
+    onPageChange,
+    pageDetails,
+    pageDetailsTitle
+  } = props;
+  const [isOpened, setIsOpened] = react.useState(false);
+  const btnRef = react.useRef(null);
+  const pageInfoRef = react.useRef(null);
+  const longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
+  const {
+    width: btnWidth
+  } = dsUtilities.useOnElementResize(btnRef);
+  const {
+    width: txtWidth
+  } = dsUtilities.useOnElementResize(pageInfoRef);
+  const options = react.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__default["default"](Grid__default["default"], {
+        cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
+        gutter: "xxs",
+        alignItems: "center"
+      }, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
+        size: "s",
+        color: ['brand-primary', '600']
+      }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
+        style: {
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden'
+        }
+      }, void 0, pageDetails[index]));
+    }
+
+    return option;
+  }), [pageCount, pageDetails, pageIndex, txtWidth]);
+  const actionRef = react.useRef({});
+  react.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.usePaginationSearch(pageCount, actionRef);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.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__default["default"](Grid__default["default"], {
+        cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
+      }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
+        style: {
+          marginLeft: '8px'
+        }
+      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
+        height: "100%"
+      })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
+      buttonType: "raw",
+      onClick: () => setIsOpened(prev => !prev),
+      innerRef: btnRef
+    }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      gutter: "xxs",
+      alignItems: "center",
+      cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 70%)', 'min-content'] : ['auto', 'min-content']
+    }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
+      alignItems: "center",
+      gutter: "xxxs",
+      ref: pageInfoRef,
+      style: {
+        gridAutoFlow: 'column'
+      },
+      children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
+        fontSize: "18px"
+      }, void 0, pageIndex + 1), " / ", pageCount]
+    }), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
+        height: "12px",
+        ml: "8px"
+      })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
+        fontSize: "13px"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx__default["default"](styled.PaginationDetail, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+        value: pageDetails[pageIndex]
+      }, void 0, pageDetails[pageIndex])))]
+    }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
+      color: ['brand-primary', '700']
+    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
+  });
+};
+
+module.exports = Paginator;

package/cjs/parts/PerPageSelector.js

@@ -0,0 +1,102 @@
+'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) => {
+      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__default["default"]("div", {
+    style: {
+      marginLeft: '32px'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
+    buttonType: "raw",
+    onClick: () => setIsOpened(prev => !prev),
+    "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

@@ -0,0 +1,53 @@
+'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

@@ -0,0 +1,57 @@
+'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

@@ -0,0 +1,26 @@
+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

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