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

package/esm/hooks/usePaginationSearch.js

@@ -1,33 +1,23 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 
-var usePaginationSearch = function usePaginationSearch(pageCount, actionRef) {
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
-
-  var _useState3 = useState(true),
-      _useState4 = _slicedToArray(_useState3, 2),
-      shouldResetSearchValue = _useState4[0],
-      setShouldResetSearchValue = _useState4[1];
-
-  var timeoutRef = useRef(null);
-  useEffect(function () {
+const usePaginationSearch = (pageCount, actionRef) => {
+  const [searchValue, setSearchValue] = useState('');
+  const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);
+  const timeoutRef = useRef(null);
+  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]);
-  var onKeyDown = useCallback(function (e) {
+  const onKeyDown = useCallback(e => {
     if (e.code.startsWith('Digit')) {
-      if (shouldResetSearchValue) setSearchValue(e.key);else setSearchValue(function (prevValue) {
-        return prevValue + e.key;
-      });
+      if (shouldResetSearchValue) setSearchValue(e.key);else setSearchValue(prevValue => prevValue + e.key);
       setShouldResetSearchValue(false);
       clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(function () {
+      timeoutRef.current = setTimeout(() => {
         setShouldResetSearchValue(true);
       }, 1000);
     }
@@ -36,4 +26,3 @@ var usePaginationSearch = function usePaginationSearch(pageCount, actionRef) {
 };
 
 export { usePaginationSearch };
-//# sourceMappingURL=usePaginationSearch.js.map

package/esm/index.d.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=index.d.js.map

package/esm/index.js

@@ -1,24 +1 @@
-export { DSPagination } from './Pagination.js';
-export { DSPaginationSchema } from './props.js';
-import 'react';
-import '@elliemae/ds-props-helpers';
-import 'react-desc';
-import './parts/PaginationContent.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';
-//# sourceMappingURL=index.js.map
+export { DSPagination, DSPaginationWithSchema } from './Pagination.js';

package/esm/parts/PageNextButton.js

@@ -1,30 +1,25 @@
-import React from 'react';
+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';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
-import 'styled-components';
-import 'styled-system';
 
-/* eslint-disable react/prop-types */
-var PageNextButton = function PageNextButton(_ref) {
-  var onNextPage = _ref.onNextPage,
-      canNextPage = _ref.canNextPage;
-  return /*#__PURE__*/React.createElement(PreviousNextPageButton, {
-    onClick: function onClick() {
+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: function HeaderComp() {
-      return 'Page';
-    }
-  }, /*#__PURE__*/React.createElement(ChevronRight, {
+    HeaderComp: () => 'Page'
+  }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
     color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
   }));
 };
 
 export { PageNextButton };
-//# sourceMappingURL=PageNextButton.js.map

package/esm/parts/PagePrevButton.js

@@ -1,27 +1,24 @@
-import React from 'react';
+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';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-button';
-import 'styled-components';
-import 'styled-system';
 
-/* eslint-disable react/prop-types */
-var PagePrevButton = function PagePrevButton(_ref) {
-  var onPreviousPage = _ref.onPreviousPage,
-      canPreviousPage = _ref.canPreviousPage;
-  return /*#__PURE__*/React.createElement(PreviousNextPageButton, {
-    onClick: function onClick() {
+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
-  }, /*#__PURE__*/React.createElement(ChevronLeft, {
+  }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
     color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
   }));
 };
 
 export { PagePrevButton };
-//# sourceMappingURL=PagePrevButton.js.map

package/esm/parts/PaginationContent.js

@@ -1,4 +1,5 @@
-import React from 'react';
+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';
@@ -6,69 +7,63 @@ import Paginator from './Paginator.js';
 import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
 import { PagePrevButton } from './PagePrevButton.js';
 import { PageNextButton } from './PageNextButton.js';
-import '@elliemae/ds-button';
-import 'styled-components';
-import 'styled-system';
-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 '../hooks/usePaginationSearch.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-/* eslint-disable react/prop-types */
-var PaginationContent = function PaginationContent(_ref) {
-  var pageIndex = _ref.pageIndex,
-      pageSize = _ref.pageSize,
-      canPreviousPage = _ref.canPreviousPage,
-      canNextPage = _ref.canNextPage,
-      onPageSizeChange = _ref.onPageSizeChange,
-      onNextPage = _ref.onNextPage,
-      onPreviousPage = _ref.onPreviousPage,
-      onPageChange = _ref.onPageChange,
-      pageCount = _ref.pageCount,
-      showPerPageSelector = _ref.showPerPageSelector,
-      pageDetails = _ref.pageDetails,
-      pageDetailsTitle = _ref.pageDetailsTitle,
-      perPageOptions = _ref.perPageOptions,
-      maxPerPage = _ref.maxPerPage,
-      perPageStep = _ref.perPageStep,
-      minPerPage = _ref.minPerPage,
-      width = _ref.width;
-  return /*#__PURE__*/React.createElement(PaginationContainer, {
+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
-  }, /*#__PURE__*/React.createElement(PaginationWrapper, null, showPerPageSelector && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PerPageSelector, {
-    pageSize: pageSize,
-    onPageSizeChange: onPageSizeChange,
-    perPageOptions: perPageOptions,
-    maxPerPage: maxPerPage,
-    perPageStep: perPageStep,
-    minPerPage: minPerPage
-  }), /*#__PURE__*/React.createElement(PaginationSeparator, {
-    mr: 24
-  })), /*#__PURE__*/React.createElement(Grid, {
+  }, 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"
-  }, /*#__PURE__*/React.createElement(PagePrevButton, {
+  }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
     canPreviousPage: canPreviousPage,
     onPreviousPage: onPreviousPage
-  }), /*#__PURE__*/React.createElement(Paginator, {
+  }), /*#__PURE__*/_jsx(Paginator, {
     pageCount: pageCount,
     pageIndex: pageIndex,
     onNextPage: onNextPage,
     onPageChange: onPageChange,
     pageDetails: pageDetails,
     pageDetailsTitle: pageDetailsTitle
-  }), /*#__PURE__*/React.createElement(PageNextButton, {
+  }), /*#__PURE__*/_jsx(PageNextButton, {
     canNextPage: canNextPage,
     onNextPage: onNextPage
   }))));
 };
 
 export { PaginationContent };
-//# sourceMappingURL=PaginationContent.js.map

package/esm/parts/Paginator.js

@@ -1,135 +1,136 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useRef, useMemo, useEffect } from 'react';
+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 '@elliemae/ds-button';
-import 'styled-components';
-import 'styled-system';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpened = _useState2[0],
-      setIsOpened = _useState2[1];
+const Paginator = props => {
+  var _span2;
 
-  var btnRef = useRef(null);
-  var pageInfoRef = useRef(null);
+  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;
 
-  var _useOnElementResize = useOnElementResize(btnRef),
-      btnWidth = _useOnElementResize.width;
+    const option = {
+      dsId: (index + 1).toString(),
+      label: (index + 1).toString(),
+      value: index + 1,
+      type: 'single'
+    };
 
-  var _useOnElementResize2 = useOnElementResize(pageInfoRef),
-      txtWidth = _useOnElementResize2.width;
-
-  var options = 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.createElement(Grid, {
-            cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
-            gutter: "xxs",
-            alignItems: "center"
-          }, pageIndex === index ? /*#__PURE__*/React.createElement(Checkmark, {
-            size: "s",
-            color: ['brand-primary', '600']
-          }) : /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("span", null, index + 1), /*#__PURE__*/React.createElement("span", {
-            style: {
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
-              overflow: 'hidden'
-            }
-          }, pageDetails[index]));
-        };
-      }
+    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]);
-  var actionRef = useRef({});
-  useEffect(function () {
+    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]);
-  var onKeyDown = usePaginationSearch(pageCount, actionRef);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PaginationSeparator, null), /*#__PURE__*/React.createElement(DSDropdownMenuV2, {
-    isOpened: isOpened,
-    options: options,
-    selectedOptions: _defineProperty({}, (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.createElement(Grid, {
+  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']
-      }, /*#__PURE__*/React.createElement("span", {
+      }, void 0, /*#__PURE__*/_jsx("span", {
         style: {
           marginLeft: '8px'
         }
-      }, "Page"), /*#__PURE__*/React.createElement(PaginationSeparator, {
+      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx(PaginationSeparator, {
         height: "100%"
-      }), /*#__PURE__*/React.createElement("span", null, pageDetailsTitle)) : 'Page';
-    }
-  }, /*#__PURE__*/React.createElement(PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: function onClick() {
-      return setIsOpened(true);
-    },
-    innerRef: btnRef
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      gridGap: '8px',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(Grid, {
-    cols: ['auto', 'auto', 'auto'],
-    alignItems: "center",
-    gutter: "xxxs",
-    ref: pageInfoRef
-  }, /*#__PURE__*/React.createElement(PaginationBoldText, {
-    fontSize: "18px"
-  }, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PaginationSeparator, {
-    height: "12px",
-    ml: "8px"
-  }), /*#__PURE__*/React.createElement(PaginationBoldText, {
-    fontSize: "13px",
-    mr: "8px"
-  }, pageDetails[pageIndex])), /*#__PURE__*/React.createElement(ChevronDown, {
-    color: ['brand-primary', '700']
-  })))), /*#__PURE__*/React.createElement(PaginationSeparator, null));
+      })), _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 };
-//# sourceMappingURL=Paginator.js.map