@elliemae/ds-pagination 1.60.0 → 2.0.0-alpha.13

package/cjs/parts/Paginator.js

@@ -1,144 +1,143 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.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 styled = require('../styled.js');
-var hooks_usePaginationSearch = require('../hooks/usePaginationSearch.js');
-require('@elliemae/ds-button');
-require('styled-components');
-require('styled-system');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-var Paginator = function Paginator(props) {
-  var pageIndex = props.pageIndex,
-      pageCount = props.pageCount,
-      onPageChange = props.onPageChange,
-      pageDetails = props.pageDetails,
-      pageDetailsTitle = props.pageDetailsTitle;
+var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isOpened = _useState2[0],
-      setIsOpened = _useState2[1];
+const Paginator = props => {
+  var _span2;
 
-  var btnRef = React.useRef(null);
-  var pageInfoRef = React.useRef(null);
+  const {
+    pageIndex,
+    pageCount,
+    onPageChange,
+    pageDetails,
+    pageDetailsTitle
+  } = props;
+  const [isOpened, setIsOpened] = react.useState(false);
+  const btnRef = react.useRef(null);
+  const pageInfoRef = react.useRef(null);
+  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;
 
-  var _useOnElementResize = dsUtilities.useOnElementResize(btnRef),
-      btnWidth = _useOnElementResize.width;
+    const option = {
+      dsId: (index + 1).toString(),
+      label: (index + 1).toString(),
+      value: index + 1,
+      type: 'single'
+    };
 
-  var _useOnElementResize2 = dsUtilities.useOnElementResize(pageInfoRef),
-      txtWidth = _useOnElementResize2.width;
-
-  var options = React.useMemo(function () {
-    return new Array(pageCount).fill(0).map(function (_, index) {
-      var option = {
-        dsId: (index + 1).toString(),
-        label: (index + 1).toString(),
-        value: index + 1,
-        type: 'single'
-      };
-
-      if (pageDetails.length) {
-        option.render = function () {
-          return /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
-            cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
-            gutter: "xxs",
-            alignItems: "center"
-          }, pageIndex === index ? /*#__PURE__*/React__default['default'].createElement(dsIcons.Checkmark, {
-            size: "s",
-            color: ['brand-primary', '600']
-          }) : /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("span", null, index + 1), /*#__PURE__*/React__default['default'].createElement("span", {
-            style: {
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden'
-            }
-          }, pageDetails[index]));
-        };
-      }
+    if (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]);
-  var actionRef = React.useRef({});
-  React.useEffect(function () {
+    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]);
-  var onKeyDown = hooks_usePaginationSearch.usePaginationSearch(pageCount, actionRef);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(styled.PaginationSeparator, null), /*#__PURE__*/React__default['default'].createElement(dsDropdownmenu.DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: _defineProperty__default['default']({}, (pageIndex + 1).toString(), true),
-    onOptionClick: function onOptionClick(_, clickedOption) {
-      onPageChange(clickedOption.value);
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    onClickOutside: function onClickOutside() {
-      setIsOpened(false);
-      btnRef.current.focus();
-    },
-    startPlacementPreference: "top-end",
-    actionRef: actionRef,
-    onKeyDown: onKeyDown,
-    minWidth: btnWidth + 23,
-    maxHeight: 300,
-    HeaderComp: function HeaderComp() {
-      return pageDetailsTitle !== '' ? /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+  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) => {
+        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__default["default"](Grid__default["default"], {
         cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
-      }, /*#__PURE__*/React__default['default'].createElement("span", {
+      }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
         style: {
           marginLeft: '8px'
         }
-      }, "Page"), /*#__PURE__*/React__default['default'].createElement(styled.PaginationSeparator, {
+      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
         height: "100%"
-      }), /*#__PURE__*/React__default['default'].createElement("span", null, pageDetailsTitle)) : 'Page';
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(styled.PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: function onClick() {
-      return setIsOpened(true);
-    },
-    innerRef: btnRef
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    style: {
-      display: 'flex',
-      gridGap: '8px',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
-    cols: ['auto', 'auto', 'auto'],
-    alignItems: "center",
-    gutter: "xxxs",
-    ref: pageInfoRef
-  }, /*#__PURE__*/React__default['default'].createElement(styled.PaginationBoldText, {
-    fontSize: "18px"
-  }, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(styled.PaginationSeparator, {
-    height: "12px",
-    ml: "8px"
-  }), /*#__PURE__*/React__default['default'].createElement(styled.PaginationBoldText, {
-    fontSize: "13px",
-    mr: "8px"
-  }, pageDetails[pageIndex])), /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronDown, {
-    color: ['brand-primary', '700']
-  })))), /*#__PURE__*/React__default['default'].createElement(styled.PaginationSeparator, null));
+      })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
+    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
+      buttonType: "raw",
+      onClick: () => setIsOpened(true),
+      innerRef: btnRef
+    }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
+      style: {
+        display: 'flex',
+        gridGap: '8px',
+        alignItems: 'center'
+      }
+    }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
+      cols: ['auto', 'auto', 'auto'],
+      alignItems: "center",
+      gutter: "xxxs",
+      ref: pageInfoRef,
+      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",
+        mr: "8px"
+      }, 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;
-//# sourceMappingURL=Paginator.js.map

package/cjs/parts/PerPageSelector.js

@@ -1,100 +1,98 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
+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');
-require('@elliemae/ds-grid');
-require('@elliemae/ds-button');
-require('styled-components');
-require('styled-system');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
 
-var generateOption = function generateOption(value) {
+const generateOption = value => {
+  if (typeof value === 'object') {
+    return value;
+  }
+
   return {
     dsId: value.toString(),
-    value: value,
+    value,
     label: value.toString(),
     type: 'single'
   };
 };
 
-var getOptions = memoize__default['default'](function (step, min, max) {
-  var options = dsUtilities.range(min, max + step, step).map(generateOption);
+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;
 });
 
-var PerPageSelector = function PerPageSelector(props) {
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isOpened = _useState2[0],
-      setIsOpened = _useState2[1];
-
-  var pageSize = props.pageSize,
-      onPageSizeChange = props.onPageSizeChange,
-      perPageOptions = props.perPageOptions,
-      maxPerPage = props.maxPerPage,
-      perPageStep = props.perPageStep,
-      minPerPage = props.minPerPage;
-  var options = React.useMemo(function () {
+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]);
-  var actionRef = React.useRef({});
-  var btnRef = React.useRef(null);
-  React.useEffect(function () {
+  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]);
-
-  var _useOnElementResize = dsUtilities.useOnElementResize(btnRef),
-      width = _useOnElementResize.width;
-
-  return /*#__PURE__*/React__default['default'].createElement(dsDropdownmenu.DSDropdownMenuV2, {
+  const {
+    width
+  } = dsUtilities.useOnElementResize(btnRef);
+  return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
     isOpened: isOpened,
     options: options,
-    selectedOptions: _defineProperty__default['default']({}, pageSize.toString(), true),
-    onOptionClick: function onOptionClick(_, clickedOption) {
+    selectedOptions: {
+      [pageSize.toString()]: true
+    },
+    onOptionClick: (_, clickedOption) => {
       onPageSizeChange(clickedOption.value);
       setIsOpened(false);
       btnRef.current.focus();
     },
-    onClickOutside: function onClickOutside() {
+    onClickOutside: () => {
       setIsOpened(false);
       btnRef.current.focus();
     },
+    customOffset: [0, 2],
     startPlacementPreference: "top-end",
     actionRef: actionRef,
     minWidth: width + 25,
-    maxHeight: 300
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    maxHeight: 300,
+    HeaderComp: () => 'Per Page'
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       marginLeft: '32px'
     }
-  }, /*#__PURE__*/React__default['default'].createElement(styled.PaginationDropdownButton, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
     buttonType: "raw",
-    onClick: function onClick() {
-      return setIsOpened(true);
-    },
+    onClick: () => setIsOpened(true),
     "aria-pressed": isOpened,
     innerRef: btnRef
-  }, pageSize, " / page", /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronDown, {
+  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
     color: ['brand-primary', '700']
   }))));
 };
 
 module.exports = PerPageSelector;
-//# sourceMappingURL=PerPageSelector.js.map

package/cjs/props.js

@@ -4,38 +4,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var emptyFunc = function emptyFunc() {
-  return null;
-};
+const emptyFunc = () => null;
 
-var DSPaginationSchema = {
+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.number).description('The available options for page size').defaultValue([10]),
+  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(function () {
-    return null;
-  }),
-  onPreviousPage: reactDesc.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(function () {
-    return null;
-  }),
-  onPageChange: reactDesc.PropTypes.func.description('Function invoked when the page changes').defaultValue(function () {
-    return null;
-  }),
-  onNextPage: reactDesc.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(function () {
-    return null;
-  }),
+  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%')
 };
-var defaultProps = {
+const defaultProps = {
   pageIndex: 1,
   canPreviousPage: true,
   canNextPage: true,
@@ -54,6 +49,5 @@ var defaultProps = {
   width: '100%'
 };
 
-exports.DSPaginationSchema = DSPaginationSchema;
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=props.js.map
+exports.propTypes = propTypes;

package/cjs/styled.js

@@ -12,47 +12,33 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var sizeToCss = function sizeToCss(size) {
-  return typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
-};
+const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
 
-var styledFocusCss = function styledFocusCss(_ref) {
-  var theme = _ref.theme;
+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}");
 };
 
-var PaginationContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+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);"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return sizeToCss(props.width) || '100%';
-});
-var PaginationWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["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;"]);
-var PaginationSeparator = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-mxz59e-2"
-})(["background-color:", ";width:1px;height:", ";"], function (props) {
-  return props.theme.colors.neutral[300];
-}, function (props) {
-  return props.height || '30px';
-});
-var PaginationBoldText = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["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;"], function (props) {
-  return props.theme.fontWeights.semibold;
-}, styledSystem.typography, styledSystem.space);
-var PaginationDropdownButton = /*#__PURE__*/styled__default['default'](dsButton.DSButtonV2).withConfig({
+})(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledSystem.typography, styledSystem.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{", "}"], function (props) {
-  return props.theme.colors.neutral[700];
-}, function (props) {
-  return props.theme.fontWeights.regular;
-}, styledFocusCss);
-var PreviousNextPageButton = /*#__PURE__*/styled__default['default'](dsButton.DSButtonV2).withConfig({
+})(["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:pointer;:focus{", "}"], styledFocusCss);
+})(["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;
@@ -60,4 +46,3 @@ exports.PaginationDropdownButton = PaginationDropdownButton;
 exports.PaginationSeparator = PaginationSeparator;
 exports.PaginationWrapper = PaginationWrapper;
 exports.PreviousNextPageButton = PreviousNextPageButton;
-//# sourceMappingURL=styled.js.map

package/esm/Pagination.js

@@ -1,36 +1,27 @@
-import React from 'react';
+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 { DSPaginationSchema, defaultProps } from './props.js';
-export { DSPaginationSchema } from './props.js';
-import '@elliemae/ds-grid';
-import './styled.js';
-import '@elliemae/ds-button';
-import 'styled-components';
-import 'styled-system';
-import './parts/PerPageSelector.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'memoize-one';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-dropdownmenu';
-import '@elliemae/ds-icons';
-import './parts/Paginator.js';
-import './hooks/usePaginationSearch.js';
-import './PaginationDataTestID.js';
-import './parts/PagePrevButton.js';
-import './parts/PageNextButton.js';
+import { propTypes, defaultProps } from './props.js';
+import { jsx } from 'react/jsx-runtime';
 
-var DSPagination = function DSPagination(props) {
-  var propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSPaginationWithSchema.toTypescript());
-  return /*#__PURE__*/React.createElement(PaginationContent, propsWithDefault);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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));
 };
 
-DSPagination.propTypes = DSPaginationSchema;
-var DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
-DSPaginationWithSchema.propTypes = DSPaginationSchema;
+const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
+DSPaginationWithSchema.propTypes = propTypes;
 
-export { DSPagination };
-//# sourceMappingURL=Pagination.js.map
+export { DSPagination, DSPaginationWithSchema };

package/esm/PaginationDataTestID.js

@@ -1,8 +1,7 @@
-var PAGINATION_DATA_TESTID = {
+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 };
-//# sourceMappingURL=PaginationDataTestID.js.map