@elliemae/ds-pagination 2.0.0-next.13 → 2.0.0-rc.12

package/cjs/Pagination.js

@@ -25,12 +25,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSPagination = props$1 => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props$1, props.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, DSPaginationWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, props.propTypes);
   return /*#__PURE__*/jsxRuntime.jsx(PaginationContent.PaginationContent, _objectSpread({}, propsWithDefault));
 };
 
 const DSPaginationWithSchema = reactDesc.describe(DSPagination).description('DSPagination');
-DSPaginationWithSchema.propTypes = props.DSPaginationSchema;
+DSPaginationWithSchema.propTypes = props.propTypes;
 
-exports.DSPaginationSchema = props.DSPaginationSchema;
 exports.DSPagination = DSPagination;
+exports.DSPaginationWithSchema = DSPaginationWithSchema;

package/cjs/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Pagination = require('./Pagination.js');
-var props = require('./props.js');
 
 
 
 exports.DSPagination = Pagination.DSPagination;
-exports.DSPaginationSchema = props.DSPaginationSchema;
+exports.DSPaginationWithSchema = Pagination.DSPaginationWithSchema;

package/cjs/parts/Paginator.js

@@ -93,6 +93,7 @@ const Paginator = props => {
         setIsOpened(false);
         btnRef.current.focus();
       },
+      customOffset: [0, 2],
       startPlacementPreference: "top-end",
       actionRef: actionRef,
       onKeyDown: onKeyDown,

package/cjs/parts/PerPageSelector.js

@@ -16,12 +16,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
 
-const generateOption = value => ({
-  dsId: value.toString(),
-  value,
-  label: value.toString(),
-  type: 'single'
-});
+const generateOption = value => {
+  if (typeof value === 'object') {
+    return value;
+  }
+
+  return {
+    dsId: value.toString(),
+    value,
+    label: value.toString(),
+    type: 'single'
+  };
+};
 
 const getOptions = memoize__default["default"]((step, min, max) => {
   const options = dsUtilities.range(min, max + step, step).map(generateOption);
@@ -69,10 +75,12 @@ const PerPageSelector = props => {
       setIsOpened(false);
       btnRef.current.focus();
     },
+    customOffset: [0, 2],
     startPlacementPreference: "top-end",
     actionRef: actionRef,
     minWidth: width + 25,
-    maxHeight: 300
+    maxHeight: 300,
+    HeaderComp: () => 'Per Page'
   }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       marginLeft: '32px'

package/cjs/props.js

@@ -6,14 +6,19 @@ var reactDesc = require('react-desc');
 
 const emptyFunc = () => null;
 
-const DSPaginationSchema = {
+const propTypes = {
   pageCount: reactDesc.PropTypes.number.description('How many pages are there'),
   pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
   canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
   canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
   pageSize: reactDesc.PropTypes.number.description('The current page size').defaultValue(10),
   showPerPageSelector: reactDesc.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
-  perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('The available options for page size').defaultValue([10]),
+  perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.shape({
+    dsId: reactDesc.PropTypes.string,
+    value: reactDesc.PropTypes.number,
+    label: reactDesc.PropTypes.string,
+    type: reactDesc.PropTypes.oneOf(['single'])
+  })])).description('The available options for page size').defaultValue([10]),
   perPageStep: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(5),
   minPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(0),
   maxPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(100),
@@ -44,5 +49,5 @@ const defaultProps = {
   width: '100%'
 };
 
-exports.DSPaginationSchema = DSPaginationSchema;
 exports.defaultProps = defaultProps;
+exports.propTypes = propTypes;

package/esm/Pagination.js

@@ -8,8 +8,7 @@ import 'react';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { describe } from 'react-desc';
 import { PaginationContent } from './parts/PaginationContent.js';
-import { DSPaginationSchema, defaultProps } from './props.js';
-export { DSPaginationSchema } from './props.js';
+import { 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -18,11 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSPagination = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSPaginationWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
 };
 
 const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
-DSPaginationWithSchema.propTypes = DSPaginationSchema;
+DSPaginationWithSchema.propTypes = propTypes;
 
-export { DSPagination };
+export { DSPagination, DSPaginationWithSchema };

package/esm/index.js

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

package/esm/parts/Paginator.js

@@ -86,6 +86,7 @@ const Paginator = props => {
         setIsOpened(false);
         btnRef.current.focus();
       },
+      customOffset: [0, 2],
       startPlacementPreference: "top-end",
       actionRef: actionRef,
       onKeyDown: onKeyDown,

package/esm/parts/PerPageSelector.js

@@ -9,12 +9,18 @@ import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
 import { ChevronDown } from '@elliemae/ds-icons';
 import { PaginationDropdownButton } from '../styled.js';
 
-const generateOption = value => ({
-  dsId: value.toString(),
-  value,
-  label: value.toString(),
-  type: 'single'
-});
+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);
@@ -62,10 +68,12 @@ const PerPageSelector = props => {
       setIsOpened(false);
       btnRef.current.focus();
     },
+    customOffset: [0, 2],
     startPlacementPreference: "top-end",
     actionRef: actionRef,
     minWidth: width + 25,
-    maxHeight: 300
+    maxHeight: 300,
+    HeaderComp: () => 'Per Page'
   }, void 0, /*#__PURE__*/_jsx("div", {
     style: {
       marginLeft: '32px'

package/esm/props.js

@@ -2,14 +2,19 @@ import { PropTypes } from 'react-desc';
 
 const emptyFunc = () => null;
 
-const DSPaginationSchema = {
+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.number).description('The available options for page size').defaultValue([10]),
+  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),
@@ -40,4 +45,4 @@ const defaultProps = {
   width: '100%'
 };
 
-export { DSPaginationSchema, defaultProps };
+export { defaultProps, propTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "2.0.0-next.13",
+  "version": "2.0.0-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "module": "./esm/index.js",
@@ -72,21 +72,25 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-dropdownmenu": "2.0.0-next.13",
-    "@elliemae/ds-grid": "2.0.0-next.13",
-    "@elliemae/ds-icons": "2.0.0-next.13",
-    "@elliemae/ds-props-helpers": "2.0.0-next.13",
-    "@elliemae/ds-utilities": "2.0.0-next.13",
+    "@elliemae/ds-button": "2.0.0-rc.12",
+    "@elliemae/ds-dropdownmenu": "2.0.0-rc.12",
+    "@elliemae/ds-grid": "2.0.0-rc.12",
+    "@elliemae/ds-icons": "2.0.0-rc.12",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.12",
+    "@elliemae/ds-utilities": "2.0.0-rc.12",
+    "memoize-one": "~5.1.1",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.3",
+    "styled-system": "~5.1.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",

package/types/Pagination.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DSPaginationSchema } from './props';
 import { DSPaginationProps } from './index.d';
 declare const DSPagination: React.ComponentType<DSPaginationProps>;
-export { DSPagination, DSPaginationSchema };
+declare const DSPaginationWithSchema: any;
+export { DSPagination, DSPaginationWithSchema };

package/types/props.d.ts

@@ -1,21 +1,59 @@
-export declare const DSPaginationSchema: {
-    pageCount: any;
-    pageIndex: any;
-    canPreviousPage: any;
-    canNextPage: any;
-    pageSize: any;
-    showPerPageSelector: any;
-    perPageOptions: any;
-    perPageStep: any;
-    minPerPage: any;
-    maxPerPage: any;
-    onPageSizeChange: any;
-    onPreviousPage: any;
-    onPageChange: any;
-    onNextPage: any;
-    pageDetails: any;
-    pageDetailsTitle: any;
-    width: any;
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const propTypes: {
+    pageCount: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    pageIndex: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    canPreviousPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    canNextPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    pageSize: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    showPerPageSelector: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    perPageOptions: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    perPageStep: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    minPerPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    maxPerPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onPageSizeChange: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onPreviousPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onPageChange: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onNextPage: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    pageDetails: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    pageDetailsTitle: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    width: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };
 export declare const defaultProps: {
     pageIndex: number;

package/types/styled.d.ts

@@ -1,47 +1,7 @@
 /// <reference types="react" />
-export declare const PaginationContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const PaginationWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PaginationSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const PaginationBoldText: import("styled-components").StyledComponent<"span", any, any, never>;
-export declare const PaginationDropdownButton: import("styled-components").StyledComponent<{
-    (props: import("@elliemae/ds-button/types/v2/DSButtonV2Types").DSButtonPropsT): JSX.Element;
-    propTypes: {
-        id: any;
-        buttonType: any;
-        size: any;
-        disabled: any;
-        onClick: any;
-        onKeyDown: any;
-        onBlur: any;
-        onFocus: any;
-        className: any;
-        tabIndex: any;
-        innerRef: any;
-        'aria-label': any;
-        'aria-pressed': any;
-        'data-testid': any;
-        role: any;
-        children: any;
-    };
-}, any, {}, never>;
-export declare const PreviousNextPageButton: import("styled-components").StyledComponent<{
-    (props: import("@elliemae/ds-button/types/v2/DSButtonV2Types").DSButtonPropsT): JSX.Element;
-    propTypes: {
-        id: any;
-        buttonType: any;
-        size: any;
-        disabled: any;
-        onClick: any;
-        onKeyDown: any;
-        onBlur: any;
-        onFocus: any;
-        className: any;
-        tabIndex: any;
-        innerRef: any;
-        'aria-label': any;
-        'aria-pressed': any;
-        'data-testid': any;
-        role: any;
-        children: any;
-    };
-}, any, {}, never>;
+export declare const PaginationContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationSeparator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const PaginationBoldText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, any, never>;
+export declare const PaginationDropdownButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;
+export declare const PreviousNextPageButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;