@elliemae/ds-pagination 2.2.0-alpha.3 → 2.2.0-next.2

package/cjs/styled.js

@@ -1,113 +1,48 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Grid = require('@elliemae/ds-grid');
+var dsButton = require('@elliemae/ds-button');
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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}");
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var styled_exports = {};
-__export(styled_exports, {
-  PaginationBoldText: () => PaginationBoldText,
-  PaginationContainer: () => PaginationContainer,
-  PaginationDropdownButton: () => PaginationDropdownButton,
-  PaginationSeparator: () => PaginationSeparator,
-  PaginationWrapper: () => PaginationWrapper,
-  PreviousNextPageButton: () => PreviousNextPageButton
-});
-var React = __toESM(require("react"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_ds_button = __toESM(require("@elliemae/ds-button"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled_components2 = __toESM(require("@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 = (0, import_styled_components.default)(import_ds_grid.default)`
-  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 = import_styled_components.default.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 32px;
-`;
-const PaginationSeparator = (0, import_styled_components.default)(import_ds_grid.default)`
-  background-color: ${(props) => props.theme.colors.neutral[300]};
-  width: 1px;
-  height: ${(props) => props.height || "30px"};
-`;
-const PaginationBoldText = import_styled_components.default.span`
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  ${import_styled_components2.typography}
-  ${import_styled_components2.space}
-  position: relative;
-`;
-const PaginationDropdownButton = (0, import_styled_components.default)(import_ds_button.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 = (0, import_styled_components.default)(import_ds_button.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}
-  }
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+
+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);"], 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;"]);
+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 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{", "}"], 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:", ";:focus{", "}"], props => props.disabled ? 'not-allowed' : 'pointer', styledFocusCss);
+
+exports.PaginationBoldText = PaginationBoldText;
+exports.PaginationContainer = PaginationContainer;
+exports.PaginationDropdownButton = PaginationDropdownButton;
+exports.PaginationSeparator = PaginationSeparator;
+exports.PaginationWrapper = PaginationWrapper;
+exports.PreviousNextPageButton = PreviousNextPageButton;

package/esm/Pagination.js

@@ -1,21 +1,27 @@
-import * as React from "react";
-import React2 from "react";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { describe } from "react-desc";
-import { PaginationContent } from "./parts/PaginationContent";
-import { propTypes, defaultProps } from "./props";
-const DSPagination = (props) => {
+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 { 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__ */ React2.createElement(PaginationContent, {
-    ...propsWithDefault
-  });
+  return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
 };
-DSPagination.propTypes = propTypes;
-const DSPaginationWithSchema = describe(DSPagination).description("DSPagination");
+
+const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
 DSPaginationWithSchema.propTypes = propTypes;
-export {
-  DSPagination,
-  DSPaginationWithSchema
-};
-//# sourceMappingURL=Pagination.js.map
+
+export { DSPagination, DSPaginationWithSchema };

package/esm/PaginationDataTestID.js

@@ -1,10 +1,7 @@
-import * as React from "react";
 const PAGINATION_DATA_TESTID = {
-  PREVIOUS_BUTTON: "data-table-pagination-prev-button",
-  NEXT_BUTTON: "data-table-pagination-next-button",
-  CONTAINER: "data-table-pagination-container"
+  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
+
+export { PAGINATION_DATA_TESTID };

package/esm/hooks/usePaginationSearch.js

@@ -1,31 +1,28 @@
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
+
 const usePaginationSearch = (pageCount, actionRef) => {
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('');
   const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);
   const timeoutRef = useRef(null);
   useEffect(() => {
-    if (searchValue !== "" && Number.parseInt(searchValue, 10) <= pageCount) {
+    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 = useCallback((e) => {
-    if (e.code.startsWith("Digit")) {
-      if (shouldResetSearchValue)
-        setSearchValue(e.key);
-      else
-        setSearchValue((prevValue) => prevValue + e.key);
+  const onKeyDown = 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);
-      }, 1e3);
+      }, 1000);
     }
   }, [shouldResetSearchValue]);
   return onKeyDown;
 };
-export {
-  usePaginationSearch
-};
-//# sourceMappingURL=usePaginationSearch.js.map
+
+export { usePaginationSearch };

package/esm/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./Pagination";
-//# sourceMappingURL=index.js.map
+export { DSPagination, DSPaginationWithSchema } from './Pagination.js';

package/esm/parts/PageNextButton.js

@@ -1,24 +1,25 @@
-import * as React from "react";
-import React2 from "react";
-import { ChevronRight } from "@elliemae/ds-icons";
-import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
-import { PreviousNextPageButton } from "../styled";
-const PageNextButton = ({
-  onNextPage,
-  canNextPage
-}) => /* @__PURE__ */ React2.createElement(PreviousNextPageButton, {
-  onClick: () => {
-    if (canNextPage)
-      onNextPage();
-  },
-  disabled: !canNextPage,
-  buttonType: "raw",
-  "data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
-  HeaderComp: () => "Page"
-}, /* @__PURE__ */ React2.createElement(ChevronRight, {
-  color: canNextPage ? ["brand-primary", "700"] : ["neutral", "500"]
-}));
-export {
-  PageNextButton
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { ChevronRight } from '@elliemae/ds-icons';
+import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
+import { PreviousNextPageButton } from '../styled.js';
+
+const PageNextButton = _ref => {
+  let {
+    onNextPage,
+    canNextPage
+  } = _ref;
+  return /*#__PURE__*/_jsx(PreviousNextPageButton, {
+    onClick: () => {
+      if (canNextPage) onNextPage();
+    },
+    disabled: !canNextPage,
+    buttonType: "raw",
+    "data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
+    HeaderComp: () => 'Page'
+  }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
+    color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
+  }));
 };
-//# sourceMappingURL=PageNextButton.js.map
+
+export { PageNextButton };

package/esm/parts/PagePrevButton.js

@@ -1,23 +1,24 @@
-import * as React from "react";
-import React2 from "react";
-import { ChevronLeft } from "@elliemae/ds-icons";
-import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
-import { PreviousNextPageButton } from "../styled";
-const PagePrevButton = ({
-  onPreviousPage,
-  canPreviousPage
-}) => /* @__PURE__ */ React2.createElement(PreviousNextPageButton, {
-  onClick: () => {
-    if (canPreviousPage)
-      onPreviousPage();
-  },
-  disabled: !canPreviousPage,
-  buttonType: "raw",
-  "data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
-}, /* @__PURE__ */ React2.createElement(ChevronLeft, {
-  color: canPreviousPage ? ["brand-primary", "700"] : ["neutral", "500"]
-}));
-export {
-  PagePrevButton
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
+import { PreviousNextPageButton } from '../styled.js';
+
+const PagePrevButton = _ref => {
+  let {
+    onPreviousPage,
+    canPreviousPage
+  } = _ref;
+  return /*#__PURE__*/_jsx(PreviousNextPageButton, {
+    onClick: () => {
+      if (canPreviousPage) onPreviousPage();
+    },
+    disabled: !canPreviousPage,
+    buttonType: "raw",
+    "data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
+  }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
+    color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
+  }));
 };
-//# sourceMappingURL=PagePrevButton.js.map
+
+export { PagePrevButton };

package/esm/parts/PaginationContent.js

@@ -1,63 +1,69 @@
-import * as React from "react";
-import React2 from "react";
-import Grid from "@elliemae/ds-grid";
-import { PaginationContainer, PaginationSeparator, PaginationWrapper } from "../styled";
-import PerPageSelector from "./PerPageSelector";
-import Paginator from "./Paginator";
-import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
-import { PagePrevButton } from "./PagePrevButton";
-import { PageNextButton } from "./PageNextButton";
-const PaginationContent = ({
-  pageIndex,
-  pageSize,
-  canPreviousPage,
-  canNextPage,
-  onPageSizeChange,
-  onNextPage,
-  onPreviousPage,
-  onPageChange,
-  pageCount,
-  showPerPageSelector,
-  pageDetails,
-  pageDetailsTitle,
-  perPageOptions,
-  maxPerPage,
-  perPageStep,
-  minPerPage,
-  width
-}) => /* @__PURE__ */ React2.createElement(PaginationContainer, {
-  justifyContent: "center",
-  alignItems: "center",
-  width,
-  "data-testid": PAGINATION_DATA_TESTID.CONTAINER
-}, /* @__PURE__ */ React2.createElement(PaginationWrapper, null, showPerPageSelector && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PerPageSelector, {
-  pageSize,
-  onPageSizeChange,
-  perPageOptions,
-  maxPerPage,
-  perPageStep,
-  minPerPage
-}), /* @__PURE__ */ React2.createElement(PaginationSeparator, {
-  mr: 24
-})), /* @__PURE__ */ React2.createElement(Grid, {
-  cols: ["auto", "auto", "auto", "auto", "auto"],
-  mr: "32px",
-  alignItems: "center"
-}, /* @__PURE__ */ React2.createElement(PagePrevButton, {
-  canPreviousPage,
-  onPreviousPage
-}), /* @__PURE__ */ React2.createElement(Paginator, {
-  pageCount,
-  pageIndex,
-  onNextPage,
-  onPageChange,
-  pageDetails,
-  pageDetailsTitle
-}), /* @__PURE__ */ React2.createElement(PageNextButton, {
-  canNextPage,
-  onNextPage
-}))));
-export {
-  PaginationContent
+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';
+import Paginator from './Paginator.js';
+import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
+import { PagePrevButton } from './PagePrevButton.js';
+import { PageNextButton } from './PageNextButton.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+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
+  }, 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"
+  }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
+    canPreviousPage: canPreviousPage,
+    onPreviousPage: onPreviousPage
+  }), /*#__PURE__*/_jsx(Paginator, {
+    pageCount: pageCount,
+    pageIndex: pageIndex,
+    onNextPage: onNextPage,
+    onPageChange: onPageChange,
+    pageDetails: pageDetails,
+    pageDetailsTitle: pageDetailsTitle
+  }), /*#__PURE__*/_jsx(PageNextButton, {
+    canNextPage: canNextPage,
+    onNextPage: onNextPage
+  }))));
 };
-//# sourceMappingURL=PaginationContent.js.map
+
+export { PaginationContent };