@elliemae/ds-pagination 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/parts/Paginator.js

@@ -1,41 +1,64 @@
-import * as React from "react";
-import React2, { useEffect, useMemo, useRef, useState } 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 { PaginationBoldText, PaginationDropdownButton, PaginationSeparator } from "../styled";
-import { usePaginationSearch } from "../hooks/usePaginationSearch";
-const Paginator = (props) => {
-  const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { Checkmark, ChevronDown } from '@elliemae/ds-icons';
+import { useOnElementResize } from '@elliemae/ds-utilities';
+import Grid from '@elliemae/ds-grid';
+import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
+import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText } from '../styled.js';
+import { usePaginationSearch } from '../hooks/usePaginationSearch.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
+
+const Paginator = props => {
+  var _span2;
+
+  const {
+    pageIndex,
+    pageCount,
+    onPageChange,
+    pageDetails,
+    pageDetailsTitle
+  } = props;
   const [isOpened, setIsOpened] = useState(false);
   const btnRef = useRef(null);
   const pageInfoRef = useRef(null);
-  const { width: btnWidth } = useOnElementResize(btnRef);
-  const { width: txtWidth } = useOnElementResize(pageInfoRef);
+  const {
+    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"
+      type: 'single'
     };
+
     if (pageDetails.length) {
-      option.render = () => /* @__PURE__ */ React2.createElement(Grid, {
-        cols: ["16px", `${txtWidth + 16}px`, "auto"],
+      option.render = () => /*#__PURE__*/_jsx(Grid, {
+        cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
         gutter: "xxs",
         alignItems: "center"
-      }, pageIndex === index ? /* @__PURE__ */ React2.createElement(Checkmark, {
+      }, void 0, pageIndex === index ? /*#__PURE__*/_jsx(Checkmark, {
         size: "s",
-        color: ["brand-primary", "600"]
-      }) : /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("span", null, index + 1), /* @__PURE__ */ React2.createElement("span", {
+        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"
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden'
         }
-      }, pageDetails[index]));
+      }, void 0, pageDetails[index]));
     }
+
     return option;
   }), [pageCount, pageDetails, pageIndex, txtWidth]);
   const actionRef = useRef({});
@@ -43,60 +66,71 @@ const Paginator = (props) => {
     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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, null), /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
-    isOpened,
-    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,
-    onKeyDown,
-    minWidth: btnWidth + 23,
-    maxHeight: 300,
-    HeaderComp: () => pageDetailsTitle !== "" ? /* @__PURE__ */ React2.createElement(Grid, {
-      cols: [`${txtWidth + 50}px`, "8px", "auto"]
-    }, /* @__PURE__ */ React2.createElement("span", {
-      style: { marginLeft: "8px" }
-    }, "Page"), /* @__PURE__ */ React2.createElement(PaginationSeparator, {
-      height: "100%"
-    }), /* @__PURE__ */ React2.createElement("span", null, pageDetailsTitle)) : "Page"
-  }, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
-    buttonType: "raw",
-    onClick: () => setIsOpened(true),
-    innerRef: btnRef
-  }, /* @__PURE__ */ React2.createElement("div", {
-    style: { display: "flex", gridGap: "8px", alignItems: "center" }
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["auto", "auto", "auto"],
-    alignItems: "center",
-    gutter: "xxxs",
-    ref: pageInfoRef
-  }, /* @__PURE__ */ React2.createElement(PaginationBoldText, {
-    fontSize: "18px"
-  }, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, {
-    height: "12px",
-    ml: "8px"
-  }), /* @__PURE__ */ React2.createElement(PaginationBoldText, {
-    fontSize: "13px",
-    mr: "8px"
-  }, pageDetails[pageIndex])), /* @__PURE__ */ React2.createElement(ChevronDown, {
-    color: ["brand-primary", "700"]
-  })))), /* @__PURE__ */ React2.createElement(PaginationSeparator, null));
-};
-var Paginator_default = Paginator;
-export {
-  Paginator_default as default
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {})), /*#__PURE__*/_jsx(DSDropdownMenuV2, {
+      isOpened: isOpened,
+      options: options,
+      selectedOptions: {
+        [(pageIndex + 1).toString()]: true
+      },
+      onOptionClick: (_, clickedOption) => {
+        onPageChange(clickedOption.value);
+        setIsOpened(false);
+        btnRef.current.focus();
+      },
+      onClickOutside: () => {
+        setIsOpened(false);
+        btnRef.current.focus();
+      },
+      customOffset: [0, 2],
+      startPlacementPreference: "top-end",
+      actionRef: actionRef,
+      onKeyDown: onKeyDown,
+      minWidth: btnWidth + 23,
+      maxHeight: 300,
+      HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx(Grid, {
+        cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
+      }, void 0, /*#__PURE__*/_jsx("span", {
+        style: {
+          marginLeft: '8px'
+        }
+      }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx(PaginationSeparator, {
+        height: "100%"
+      })), _span2 || (_span2 = /*#__PURE__*/_jsx("span", {}, void 0, pageDetailsTitle))) : 'Page'
+    }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
+      buttonType: "raw",
+      onClick: () => setIsOpened(true),
+      innerRef: btnRef
+    }, void 0, /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        gridGap: '8px',
+        alignItems: 'center'
+      }
+    }, void 0, /*#__PURE__*/jsxs(Grid, {
+      cols: ['auto', 'auto', 'auto'],
+      alignItems: "center",
+      gutter: "xxxs",
+      ref: pageInfoRef,
+      children: [/*#__PURE__*/_jsx(PaginationBoldText, {
+        fontSize: "18px"
+      }, void 0, pageIndex + 1), " / ", pageCount]
+    }), pageDetails.length !== 0 && /*#__PURE__*/jsxs(Fragment, {
+      children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx(PaginationSeparator, {
+        height: "12px",
+        ml: "8px"
+      })), /*#__PURE__*/_jsx(PaginationBoldText, {
+        fontSize: "13px",
+        mr: "8px"
+      }, void 0, pageDetails[pageIndex])]
+    }), /*#__PURE__*/_jsx(ChevronDown, {
+      color: ['brand-primary', '700']
+    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
+  });
 };
-//# sourceMappingURL=Paginator.js.map
+
+export { Paginator as default };

package/esm/parts/PerPageSelector.js

@@ -1,31 +1,44 @@
-import * as React from "react";
-import React2, { useEffect, useMemo, useRef, useState } 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";
-const generateOption = (value) => {
-  if (typeof value === "object") {
+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"
+    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 PerPageSelector = props => {
   const [isOpened, setIsOpened] = useState(false);
-  const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;
+  const {
+    pageSize,
+    onPageSizeChange,
+    perPageOptions,
+    maxPerPage,
+    perPageStep,
+    minPerPage
+  } = props;
   const options = useMemo(() => {
-    if (perPageOptions)
-      return perPageOptions.map(generateOption);
+    if (perPageOptions) return perPageOptions.map(generateOption);
     return getOptions(perPageStep, minPerPage, maxPerPage);
   }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
   const actionRef = useRef({});
@@ -34,13 +47,18 @@ const PerPageSelector = (props) => {
     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__ */ React2.createElement(DSDropdownMenuV2, {
-    isOpened,
-    options,
-    selectedOptions: { [pageSize.toString()]: true },
+  const {
+    width
+  } = useOnElementResize(btnRef);
+  return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
+    isOpened: isOpened,
+    options: options,
+    selectedOptions: {
+      [pageSize.toString()]: true
+    },
     onOptionClick: (_, clickedOption) => {
       onPageSizeChange(clickedOption.value);
       setIsOpened(false);
@@ -52,23 +70,22 @@ const PerPageSelector = (props) => {
     },
     customOffset: [0, 2],
     startPlacementPreference: "top-end",
-    actionRef,
+    actionRef: actionRef,
     minWidth: width + 25,
     maxHeight: 300,
-    HeaderComp: () => "Per Page"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    style: { marginLeft: "32px" }
-  }, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
+    HeaderComp: () => 'Per Page'
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    style: {
+      marginLeft: '32px'
+    }
+  }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
     buttonType: "raw",
     onClick: () => setIsOpened(true),
     "aria-pressed": isOpened,
     innerRef: btnRef
-  }, pageSize, " / page", /* @__PURE__ */ React2.createElement(ChevronDown, {
-    color: ["brand-primary", "700"]
+  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx(ChevronDown, {
+    color: ['brand-primary', '700']
   }))));
 };
-var PerPageSelector_default = PerPageSelector;
-export {
-  PerPageSelector_default as default
-};
-//# sourceMappingURL=PerPageSelector.js.map
+
+export { PerPageSelector as default };

package/esm/props.js

@@ -1,32 +1,30 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const emptyFunc = () => null;
+
 const propTypes = {
-  pageCount: PropTypes.number.description("How many pages are there"),
-  pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
-  canPreviousPage: PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
-  canNextPage: PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
-  pageSize: PropTypes.number.description("The current page size").defaultValue(10),
-  showPerPageSelector: PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
-  perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.shape({
-      dsId: PropTypes.string,
-      value: PropTypes.number,
-      label: PropTypes.string,
-      type: PropTypes.oneOf(["single"])
-    })
-  ])).description("The available options for page size").defaultValue([10]),
-  perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5),
-  minPerPage: PropTypes.number.description("Step for the per page options").defaultValue(0),
-  maxPerPage: PropTypes.number.description("Step for the per page options").defaultValue(100),
-  onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
-  onPreviousPage: PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
-  onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
-  onNextPage: PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
-  pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
-  pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
-  width: PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
+  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,
@@ -43,11 +41,8 @@ const defaultProps = {
   onNextPage: emptyFunc,
   onPageChange: emptyFunc,
   pageDetails: [],
-  pageDetailsTitle: "",
-  width: "100%"
+  pageDetailsTitle: '',
+  width: '100%'
 };
-export {
-  defaultProps,
-  propTypes
-};
-//# sourceMappingURL=props.js.map
+
+export { defaultProps, propTypes };

package/esm/styled.js

@@ -1,84 +1,34 @@
-import * as React from "react";
-import Grid from "@elliemae/ds-grid";
-import { DSButtonV2 } from "@elliemae/ds-button";
-import styled from "styled-components";
-import { space, typography } from "@xstyled/styled-components";
-const sizeToCss = (size) => typeof size === "number" && !Number.isNaN(size) ? `${size}px` : size;
-const styledFocusCss = ({ theme }) => `
-&:after {
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 2px solid ${theme.colors.brand[700]};
-  pointer-events: none;
-  z-index: 7;
-}`;
-const PaginationContainer = styled(Grid)`
-  padding: 0 ${(props) => props.theme.space.xs};
-  height: 42px;
-  width: ${(props) => sizeToCss(props.width) || "100%"};
-  max-width: 100%;
-  align-items: center;
-  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);
-`;
-const PaginationWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 32px;
-`;
-const PaginationSeparator = styled(Grid)`
-  background-color: ${(props) => props.theme.colors.neutral[300]};
-  width: 1px;
-  height: ${(props) => props.height || "30px"};
-`;
-const PaginationBoldText = styled.span`
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  ${typography}
-  ${space}
-  position: relative;
-`;
-const PaginationDropdownButton = styled(DSButtonV2)`
-  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: ${(props) => props.theme.colors.neutral[700]};
-  cursor: pointer;
-  border-radius: 0;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  :focus {
-    ${styledFocusCss}
-  }
-`;
-const PreviousNextPageButton = styled(DSButtonV2)`
-  height: 42px;
-  display: grid;
-  place-items: center;
-  position: relative;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 0;
-  cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
-  :focus {
-    ${styledFocusCss}
-  }
-`;
-export {
-  PaginationBoldText,
-  PaginationContainer,
-  PaginationDropdownButton,
-  PaginationSeparator,
-  PaginationWrapper,
-  PreviousNextPageButton
+import Grid from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import styled from 'styled-components';
+import { typography, space } from '@xstyled/styled-components';
+
+const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
+
+const styledFocusCss = _ref => {
+  let {
+    theme
+  } = _ref;
+  return "\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: 7;\n}");
 };
-//# sourceMappingURL=styled.js.map
+
+const PaginationContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-mxz59e-0"
+})(["padding:0 ", ";height:42px;width:", ";max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"], props => props.theme.space.xs, props => sizeToCss(props.width) || '100%');
+const PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-mxz59e-1"
+})(["display:flex;justify-content:center;align-items:center;margin:0 32px;"]);
+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 PaginationDropdownButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-mxz59e-4"
+})(["height:42px;display:flex;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
+const PreviousNextPageButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-mxz59e-5"
+})(["height:42px;display:grid;place-items:center;position:relative;padding-left:8px;padding-right:8px;border-radius:0;cursor:", ";:focus{", "}"], props => props.disabled ? 'not-allowed' : 'pointer', styledFocusCss);
+
+export { PaginationBoldText, PaginationContainer, PaginationDropdownButton, PaginationSeparator, PaginationWrapper, PreviousNextPageButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-beta.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "module": "./esm/index.js",
@@ -72,12 +72,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.2",
-    "@elliemae/ds-dropdownmenu": "2.2.0-alpha.2",
-    "@elliemae/ds-grid": "2.2.0-alpha.2",
-    "@elliemae/ds-icons": "2.2.0-alpha.2",
-    "@elliemae/ds-props-helpers": "2.2.0-alpha.2",
-    "@elliemae/ds-utilities": "2.2.0-alpha.2",
+    "@elliemae/ds-button": "2.2.0-beta.0",
+    "@elliemae/ds-dropdownmenu": "2.2.0-beta.0",
+    "@elliemae/ds-grid": "2.2.0-beta.0",
+    "@elliemae/ds-icons": "2.2.0-beta.0",
+    "@elliemae/ds-props-helpers": "2.2.0-beta.0",
+    "@elliemae/ds-utilities": "2.2.0-beta.0",
     "memoize-one": "~5.1.1",
     "react-desc": "~4.1.3"
   },

package/cjs/Pagination.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/Pagination.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { describe } from 'react-desc';\nimport { PaginationContent } from './parts/PaginationContent';\nimport { propTypes, defaultProps } from './props';\nimport { DSPaginationProps } from './index.d';\n\nconst DSPagination: React.ComponentType<DSPaginationProps> = (props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = propTypes;\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = propTypes;\n\nexport { DSPagination, DSPaginationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,8BAA6E;AAC7E,wBAAyB;AACzB,+BAAkC;AAClC,mBAAwC;AAGxC,MAAM,eAAuD,CAAC,UAAU;AACtE,QAAM,mBAAmB,0DAA6B,OAAO;AAC7D,8DAA+B,kBAAkB;AAEjD,SAAO,mDAAC,4CAAD;AAAA,OAAuB;AAAA;AAAA;AAGhC,aAAa,YAAY;AACzB,MAAM,yBAAyB,gCAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
-  "names": []
-}

package/cjs/PaginationDataTestID.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/PaginationDataTestID.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const PAGINATION_DATA_TESTID = {\n  PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n  NEXT_BUTTON: 'data-table-pagination-next-button',\n  CONTAINER: 'data-table-pagination-container',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AAAA;",
-  "names": []
-}

package/cjs/hooks/usePaginationSearch.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/hooks/usePaginationSearch.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const usePaginationSearch = (\n  pageCount: number,\n  actionRef: React.MutableRefObject<any>,\n): React.KeyboardEventHandler => {\n  const [searchValue, setSearchValue] = useState('');\n  const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);\n\n  const timeoutRef = useRef<NodeJS.Timeout>(null);\n\n  useEffect(() => {\n    if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {\n      actionRef.current.setActiveDescendant(searchValue);\n      actionRef.current.scrollOptionIntoView(searchValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchValue]);\n\n  const onKeyDown = useCallback(\n    (e) => {\n      if (e.code.startsWith('Digit')) {\n        if (shouldResetSearchValue) setSearchValue(e.key);\n        else setSearchValue((prevValue) => prevValue + e.key);\n\n        setShouldResetSearchValue(false);\n        clearTimeout(timeoutRef.current);\n        timeoutRef.current = setTimeout(() => {\n          setShouldResetSearchValue(true);\n        }, 1000);\n      }\n    },\n    [shouldResetSearchValue],\n  );\n\n  return onKeyDown;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyD;AAElD,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAC/C,QAAM,CAAC,wBAAwB,6BAA6B,2BAAS;AAErE,QAAM,aAAa,yBAAuB;AAE1C,8BAAU,MAAM;AACd,QAAI,gBAAgB,MAAM,OAAO,SAAS,aAAa,OAAO,WAAW;AACvE,gBAAU,QAAQ,oBAAoB;AACtC,gBAAU,QAAQ,qBAAqB;AAAA;AAAA,KAGxC,CAAC;AAEJ,QAAM,YAAY,8BAChB,CAAC,MAAM;AACL,QAAI,EAAE,KAAK,WAAW,UAAU;AAC9B,UAAI;AAAwB,uBAAe,EAAE;AAAA;AACxC,uBAAe,CAAC,cAAc,YAAY,EAAE;AAEjD,gCAA0B;AAC1B,mBAAa,WAAW;AACxB,iBAAW,UAAU,WAAW,MAAM;AACpC,kCAA0B;AAAA,SACzB;AAAA;AAAA,KAGP,CAAC;AAGH,SAAO;AAAA;",
-  "names": []
-}

package/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export interface DSPaginationProps {\n  pageCount: number;\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n  width?: any;\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
-  "names": []
-}

package/cjs/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './Pagination';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,wBAAc;",
-  "names": []
-}

package/cjs/parts/PageNextButton.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/parts/PageNextButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PageNextButton: React.ComponentType<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>> = ({\n  onNextPage,\n  canNextPage,\n}) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canNextPage) onNextPage();\n    }}\n    disabled={!canNextPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.NEXT_BUTTON}\n    HeaderComp={() => 'Page'}\n  >\n    <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA6B;AAC7B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,MAEA,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAa;AAAA;AAAA,EAEnB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,EACpC,YAAY,MAAM;AAAA,GAElB,mDAAC,8BAAD;AAAA,EAAc,OAAO,cAAc,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
-  "names": []
-}

package/cjs/parts/PagePrevButton.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/parts/PagePrevButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PagePrevButton: React.ComponentType<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>> = ({\n  onPreviousPage,\n  canPreviousPage,\n}) => (\n  <PreviousNextPageButton\n    onClick={() => {\n      if (canPreviousPage) onPreviousPage();\n    }}\n    disabled={!canPreviousPage}\n    buttonType=\"raw\"\n    data-testid={PAGINATION_DATA_TESTID.PREVIOUS_BUTTON}\n  >\n    <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n  </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkB;AAClB,sBAA4B;AAC5B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAAqG,CAAC;AAAA,EACjH;AAAA,EACA;AAAA,MAEA,mDAAC,sCAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAiB;AAAA;AAAA,EAEvB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,mDAAuB;AAAA,GAEpC,mDAAC,6BAAD;AAAA,EAAa,OAAO,kBAAkB,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
-  "names": []
-}