@elliemae/ds-pagination 2.3.0-alpha.8 → 2.3.0-next.2

package/{dist/esm → 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

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -0,0 +1 @@
+export { DSPagination, DSPaginationWithSchema } from './Pagination.js';

package/esm/parts/PageNextButton.js

@@ -0,0 +1,25 @@
+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']
+  }));
+};
+
+export { PageNextButton };

package/esm/parts/PagePrevButton.js

@@ -0,0 +1,24 @@
+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']
+  }));
+};
+
+export { PagePrevButton };

package/esm/parts/PaginationContent.js

@@ -0,0 +1,85 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import Grid from '@elliemae/ds-grid';
+import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _PaginationSeparator;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PaginationContent = props => {
+  const {
+    pageIndex,
+    pageSize,
+    canPreviousPage,
+    canNextPage,
+    onPageSizeChange,
+    onNextPage,
+    onPreviousPage,
+    onPageChange,
+    pageCount,
+    showPerPageSelector,
+    pageDetails,
+    pageDetailsTitle,
+    perPageOptions,
+    maxPerPage,
+    perPageStep,
+    minPerPage,
+    width
+  } = props;
+  const globalAttributes = useGetGlobalAttributes(props);
+  return /*#__PURE__*/jsx(PaginationContainer, _objectSpread(_objectSpread({
+    justifyContent: "center",
+    alignItems: "center",
+    width: width.toString(),
+    "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
+    cols: ['minmax(auto, 80%)']
+  }, globalAttributes), {}, {
+    children: /*#__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, {
+      mr: "32px",
+      alignItems: "center",
+      style: {
+        gridAutoFlow: 'column'
+      }
+    }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
+      canPreviousPage: canPreviousPage,
+      onPreviousPage: onPreviousPage
+    }), /*#__PURE__*/_jsx(Paginator, {
+      pageCount: pageCount,
+      pageIndex: pageIndex,
+      onPageChange: onPageChange,
+      pageDetails: pageDetails,
+      pageDetailsTitle: pageDetailsTitle
+    }), /*#__PURE__*/_jsx(PageNextButton, {
+      canNextPage: canNextPage,
+      onNextPage: onNextPage
+    })))
+  }));
+};
+
+export { PaginationContent };

package/esm/parts/Paginator.js

@@ -0,0 +1,146 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText, InvisibleDetail, PaginationDetail } 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 longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
+  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'
+    };
+
+    if (pageDetails !== null && pageDetails !== void 0 && 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]);
+  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]);
+  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) => {
+        var _btnRef$current;
+
+        onPageChange(clickedOption.value);
+        setIsOpened(false);
+        (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
+      },
+      onClickOutside: () => {
+        var _btnRef$current2;
+
+        setIsOpened(false);
+        (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
+      },
+      customOffset: [0, 2],
+      startPlacementPreference: "top-end",
+      actionRef: actionRef,
+      onKeyDown: onKeyDown,
+      minWidth: btnWidth + 23,
+      maxHeight: 300,
+      HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx(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(prev => !prev),
+      innerRef: btnRef
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      gutter: "xxs",
+      alignItems: "center",
+      cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 70%)', 'min-content'] : ['auto', 'min-content']
+    }, void 0, /*#__PURE__*/jsxs(Grid, {
+      alignItems: "center",
+      gutter: "xxxs",
+      ref: pageInfoRef,
+      style: {
+        gridAutoFlow: 'column'
+      },
+      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"
+      }, void 0, /*#__PURE__*/_jsx(InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx(PaginationDetail, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+        value: pageDetails[pageIndex]
+      }, void 0, pageDetails[pageIndex])))]
+    }), /*#__PURE__*/_jsx(ChevronDown, {
+      color: ['brand-primary', '700']
+    })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
+  });
+};
+
+export { Paginator as default };

package/esm/parts/PerPageSelector.js

@@ -0,0 +1,95 @@
+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'
+  };
+};
+
+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 [isOpened, setIsOpened] = useState(false);
+  const {
+    pageSize,
+    onPageSizeChange,
+    perPageOptions,
+    maxPerPage,
+    perPageStep,
+    minPerPage
+  } = props;
+  const options = useMemo(() => {
+    if (perPageOptions) return perPageOptions.map(generateOption);
+    return getOptions(perPageStep, minPerPage, maxPerPage);
+  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
+  const actionRef = useRef({});
+  const btnRef = useRef(null);
+  useEffect(() => {
+    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__*/_jsx(DSDropdownMenuV2, {
+    isOpened: isOpened,
+    options: options,
+    selectedOptions: {
+      [pageSize.toString()]: true
+    },
+    onOptionClick: (_, clickedOption) => {
+      var _btnRef$current;
+
+      onPageSizeChange(clickedOption.value);
+      setIsOpened(false);
+      (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
+    },
+    onClickOutside: () => {
+      var _btnRef$current2;
+
+      setIsOpened(false);
+      (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
+    },
+    customOffset: [0, 2],
+    startPlacementPreference: "top-end",
+    actionRef: actionRef,
+    minWidth: width + 25,
+    maxHeight: 300,
+    HeaderComp: () => 'Per Page'
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    style: {
+      marginLeft: '32px'
+    }
+  }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
+    buttonType: "raw",
+    onClick: () => setIsOpened(prev => !prev),
+    "aria-pressed": isOpened,
+    innerRef: btnRef
+  }, void 0, pageSize, " / page", /*#__PURE__*/_jsx(ChevronDown, {
+    color: ['brand-primary', '700']
+  }))));
+};
+
+export { PerPageSelector as default };

package/esm/props.js

@@ -0,0 +1,48 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+
+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%')
+};
+const defaultProps = {
+  pageIndex: 1,
+  canPreviousPage: true,
+  canNextPage: true,
+  pageSize: 10,
+  showPerPageSelector: true,
+  perPageOptions: [10],
+  perPageStep: 5,
+  minPerPage: 0,
+  maxPerPage: 100,
+  onPageSizeChange: emptyFunc,
+  onPreviousPage: emptyFunc,
+  onNextPage: emptyFunc,
+  onPageChange: emptyFunc,
+  pageDetails: [],
+  pageDetailsTitle: '',
+  width: '100%'
+};
+
+export { defaultProps, propTypes };

package/esm/styled.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import Grid from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import styled from 'styled-components';
+import { typography, space } from '@xstyled/styled-components';
+import { css } from '@elliemae/ds-system';
+
+var _templateObject;
+const styledFocusCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ", ";\n    pointer-events: none;\n    z-index: 7;\n  }\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand[700];
+});
+const PaginationContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-mxz59e-0"
+})(["height:42px;max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"]);
+const PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-mxz59e-1"
+})(["display:flex;justify-content:center;align-items:center;"]);
+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 InvisibleDetail = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-mxz59e-4"
+})(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+const PaginationDetail = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-mxz59e-5"
+})(["position:absolute;top:0;left:0;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
+const PaginationDropdownButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-mxz59e-6"
+})(["height:42px;display:grid;grid-auto-flow:column;justify-content:center;align-items:center;position:relative;padding-left:16px;padding-right:16px;grid-gap:8px;font-size:13px;color:", ";cursor:pointer;border-radius:0;font-weight:", ";:focus{", "}white-space:nowrap;"], props => props.theme.colors.neutral[700], props => props.theme.fontWeights.regular, styledFocusCss);
+const PreviousNextPageButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
+  componentId: "sc-mxz59e-7"
+})(["height:42px;display:grid;place-items:center;position:relative;padding-left:8px;padding-right:8px;border-radius:0;cursor:", ";:focus{", "}"], props => props.disabled ? 'not-allowed' : 'pointer', styledFocusCss);
+
+export { InvisibleDetail, PaginationBoldText, PaginationContainer, PaginationDetail, PaginationDropdownButton, PaginationSeparator, PaginationWrapper, PreviousNextPageButton };

package/package.json

@@ -1,58 +1,55 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./styled": {
-      "import": "./dist/esm/styled.js",
-      "require": "./dist/cjs/styled.js"
+      "import": "./esm/styled.js",
+      "require": "./cjs/styled.js"
     },
     "./props": {
-      "import": "./dist/esm/props.js",
-      "require": "./dist/cjs/props.js"
+      "import": "./esm/props.js",
+      "require": "./cjs/props.js"
     },
     "./parts/PerPageSelector": {
-      "import": "./dist/esm/parts/PerPageSelector.js",
-      "require": "./dist/cjs/parts/PerPageSelector.js"
+      "import": "./esm/parts/PerPageSelector.js",
+      "require": "./cjs/parts/PerPageSelector.js"
     },
     "./parts/Paginator": {
-      "import": "./dist/esm/parts/Paginator.js",
-      "require": "./dist/cjs/parts/Paginator.js"
+      "import": "./esm/parts/Paginator.js",
+      "require": "./cjs/parts/Paginator.js"
     },
     "./parts/PaginationContent": {
-      "import": "./dist/esm/parts/PaginationContent.js",
-      "require": "./dist/cjs/parts/PaginationContent.js"
+      "import": "./esm/parts/PaginationContent.js",
+      "require": "./cjs/parts/PaginationContent.js"
     },
     "./parts/PagePrevButton": {
-      "import": "./dist/esm/parts/PagePrevButton.js",
-      "require": "./dist/cjs/parts/PagePrevButton.js"
+      "import": "./esm/parts/PagePrevButton.js",
+      "require": "./cjs/parts/PagePrevButton.js"
     },
     "./parts/PageNextButton": {
-      "import": "./dist/esm/parts/PageNextButton.js",
-      "require": "./dist/cjs/parts/PageNextButton.js"
+      "import": "./esm/parts/PageNextButton.js",
+      "require": "./cjs/parts/PageNextButton.js"
     },
     "./PaginationDataTestID": {
-      "import": "./dist/esm/PaginationDataTestID.js",
-      "require": "./dist/cjs/PaginationDataTestID.js"
+      "import": "./esm/PaginationDataTestID.js",
+      "require": "./cjs/PaginationDataTestID.js"
     },
     "./Pagination": {
-      "import": "./dist/esm/Pagination.js",
-      "require": "./dist/cjs/Pagination.js"
+      "import": "./esm/Pagination.js",
+      "require": "./cjs/Pagination.js"
     },
     "./hooks/usePaginationSearch": {
-      "import": "./dist/esm/hooks/usePaginationSearch.js",
-      "require": "./dist/cjs/hooks/usePaginationSearch.js"
+      "import": "./esm/hooks/usePaginationSearch.js",
+      "require": "./cjs/hooks/usePaginationSearch.js"
     }
   },
   "sideEffects": [
@@ -64,17 +61,25 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.8",
-    "@elliemae/ds-dropdownmenu": "2.3.0-alpha.8",
-    "@elliemae/ds-grid": "2.3.0-alpha.8",
-    "@elliemae/ds-icons": "2.3.0-alpha.8",
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.8",
-    "@elliemae/ds-utilities": "2.3.0-alpha.8",
+    "@elliemae/ds-button": "2.3.0-next.2",
+    "@elliemae/ds-dropdownmenu": "2.3.0-next.2",
+    "@elliemae/ds-grid": "2.3.0-next.2",
+    "@elliemae/ds-icons": "2.3.0-next.2",
+    "@elliemae/ds-props-helpers": "2.3.0-next.2",
+    "@elliemae/ds-system": "2.3.0-next.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.2",
+    "@elliemae/ds-utilities": "2.3.0-next.2",
     "memoize-one": "~5.1.1",
     "react-desc": "~4.1.3"
   },
@@ -91,12 +96,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/Pagination.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DSPaginationProps } from './index.d';
+declare const DSPagination: React.ComponentType<DSPaginationProps>;
+declare const DSPaginationWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSPaginationProps>;
+export { DSPagination, DSPaginationWithSchema };