@elliemae/ds-pagination 2.3.0-rc.1 → 3.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/dist/cjs/Pagination.js +61 -0
  2. package/dist/cjs/Pagination.js.map +7 -0
  3. package/dist/cjs/PaginationDataTestID.js +39 -0
  4. package/dist/cjs/PaginationDataTestID.js.map +7 -0
  5. package/dist/cjs/hooks/usePaginationSearch.js +60 -0
  6. package/dist/cjs/hooks/usePaginationSearch.js.map +7 -0
  7. package/dist/cjs/index.d.js +27 -0
  8. package/dist/cjs/index.d.js.map +7 -0
  9. package/dist/cjs/index.js +28 -0
  10. package/dist/cjs/index.js.map +7 -0
  11. package/dist/cjs/parts/PageNextButton.js +53 -0
  12. package/dist/cjs/parts/PageNextButton.js.map +7 -0
  13. package/dist/cjs/parts/PagePrevButton.js +49 -0
  14. package/dist/cjs/parts/PagePrevButton.js.map +7 -0
  15. package/dist/cjs/parts/PaginationContent.js +111 -0
  16. package/dist/cjs/parts/PaginationContent.js.map +7 -0
  17. package/dist/cjs/parts/Paginator.js +148 -0
  18. package/dist/cjs/parts/Paginator.js.map +7 -0
  19. package/dist/cjs/parts/PerPageSelector.js +103 -0
  20. package/dist/cjs/parts/PerPageSelector.js.map +7 -0
  21. package/dist/cjs/props.js +82 -0
  22. package/dist/cjs/props.js.map +7 -0
  23. package/dist/cjs/styled.js +130 -0
  24. package/dist/cjs/styled.js.map +7 -0
  25. package/dist/esm/Pagination.js +34 -0
  26. package/dist/esm/Pagination.js.map +7 -0
  27. package/dist/esm/PaginationDataTestID.js +10 -0
  28. package/dist/esm/PaginationDataTestID.js.map +7 -0
  29. package/{esm → dist/esm}/hooks/usePaginationSearch.js +16 -13
  30. package/dist/esm/hooks/usePaginationSearch.js.map +7 -0
  31. package/dist/esm/index.d.js +2 -0
  32. package/dist/esm/index.d.js.map +7 -0
  33. package/dist/esm/index.js +3 -0
  34. package/dist/esm/index.js.map +7 -0
  35. package/dist/esm/parts/PageNextButton.js +24 -0
  36. package/dist/esm/parts/PageNextButton.js.map +7 -0
  37. package/dist/esm/parts/PagePrevButton.js +20 -0
  38. package/dist/esm/parts/PagePrevButton.js.map +7 -0
  39. package/dist/esm/parts/PaginationContent.js +84 -0
  40. package/dist/esm/parts/PaginationContent.js.map +7 -0
  41. package/dist/esm/parts/Paginator.js +124 -0
  42. package/dist/esm/parts/Paginator.js.map +7 -0
  43. package/dist/esm/parts/PerPageSelector.js +74 -0
  44. package/dist/esm/parts/PerPageSelector.js.map +7 -0
  45. package/dist/esm/props.js +53 -0
  46. package/dist/esm/props.js.map +7 -0
  47. package/dist/esm/styled.js +106 -0
  48. package/dist/esm/styled.js.map +7 -0
  49. package/package.json +51 -41
  50. package/cjs/Pagination.js +0 -35
  51. package/cjs/PaginationDataTestID.js +0 -11
  52. package/cjs/hooks/usePaginationSearch.js +0 -32
  53. package/cjs/index.d.js +0 -2
  54. package/cjs/index.js +0 -10
  55. package/cjs/parts/PageNextButton.js +0 -33
  56. package/cjs/parts/PagePrevButton.js +0 -32
  57. package/cjs/parts/PaginationContent.js +0 -95
  58. package/cjs/parts/Paginator.js +0 -153
  59. package/cjs/parts/PerPageSelector.js +0 -102
  60. package/cjs/props.js +0 -53
  61. package/cjs/styled.js +0 -57
  62. package/esm/Pagination.js +0 -26
  63. package/esm/PaginationDataTestID.js +0 -7
  64. package/esm/index.d.js +0 -1
  65. package/esm/index.js +0 -1
  66. package/esm/parts/PageNextButton.js +0 -25
  67. package/esm/parts/PagePrevButton.js +0 -24
  68. package/esm/parts/PaginationContent.js +0 -85
  69. package/esm/parts/Paginator.js +0 -146
  70. package/esm/parts/PerPageSelector.js +0 -95
  71. package/esm/props.js +0 -48
  72. package/esm/styled.js +0 -40
  73. package/types/Pagination.d.ts +0 -5
  74. package/types/PaginationDataTestID.d.ts +0 -5
  75. package/types/hooks/usePaginationSearch.d.ts +0 -1
  76. package/types/index.d.ts +0 -1
  77. package/types/parts/PageNextButton.d.ts +0 -3
  78. package/types/parts/PagePrevButton.d.ts +0 -3
  79. package/types/parts/PaginationContent.d.ts +0 -3
  80. package/types/parts/Paginator.d.ts +0 -10
  81. package/types/parts/PerPageSelector.d.ts +0 -4
  82. package/types/props.d.ts +0 -20
  83. package/types/styled.d.ts +0 -10
@@ -1,153 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- require('core-js/modules/web.dom-collections.iterator.js');
5
- require('core-js/modules/esnext.async-iterator.reduce.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.reduce.js');
8
- require('core-js/modules/esnext.async-iterator.map.js');
9
- require('core-js/modules/esnext.iterator.map.js');
10
- var react = require('react');
11
- var dsIcons = require('@elliemae/ds-icons');
12
- var dsUtilities = require('@elliemae/ds-utilities');
13
- var Grid = require('@elliemae/ds-grid');
14
- var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
15
- var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
16
- var styled = require('../styled.js');
17
- var usePaginationSearch = require('../hooks/usePaginationSearch.js');
18
- var jsxRuntime = require('react/jsx-runtime');
19
-
20
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
-
22
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
23
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
24
-
25
- var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
26
-
27
- const Paginator = props => {
28
- var _span2;
29
-
30
- const {
31
- pageIndex,
32
- pageCount,
33
- onPageChange,
34
- pageDetails,
35
- pageDetailsTitle
36
- } = props;
37
- const [isOpened, setIsOpened] = react.useState(false);
38
- const btnRef = react.useRef(null);
39
- const pageInfoRef = react.useRef(null);
40
- const longestPageDetail = pageDetails.reduce((acc, cur) => acc.length > cur.length ? acc : cur, '');
41
- const {
42
- width: btnWidth
43
- } = dsUtilities.useOnElementResize(btnRef);
44
- const {
45
- width: txtWidth
46
- } = dsUtilities.useOnElementResize(pageInfoRef);
47
- const options = react.useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
48
- var _span;
49
-
50
- const option = {
51
- dsId: (index + 1).toString(),
52
- label: (index + 1).toString(),
53
- value: index + 1,
54
- type: 'single'
55
- };
56
-
57
- if (pageDetails !== null && pageDetails !== void 0 && pageDetails.length) {
58
- option.render = () => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
59
- cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
60
- gutter: "xxs",
61
- alignItems: "center"
62
- }, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
63
- size: "s",
64
- color: ['brand-primary', '600']
65
- }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
66
- style: {
67
- whiteSpace: 'nowrap',
68
- textOverflow: 'ellipsis',
69
- overflow: 'hidden'
70
- }
71
- }, void 0, pageDetails[index]));
72
- }
73
-
74
- return option;
75
- }), [pageCount, pageDetails, pageIndex, txtWidth]);
76
- const actionRef = react.useRef({});
77
- react.useEffect(() => {
78
- if (isOpened) {
79
- actionRef.current.setActiveDescendant((pageIndex + 1).toString());
80
- actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
81
- } // eslint-disable-next-line react-hooks/exhaustive-deps
82
-
83
- }, [isOpened]);
84
- const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
85
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
86
- children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
87
- isOpened: isOpened,
88
- options: options,
89
- selectedOptions: {
90
- [(pageIndex + 1).toString()]: true
91
- },
92
- onOptionClick: (_, clickedOption) => {
93
- var _btnRef$current;
94
-
95
- onPageChange(clickedOption.value);
96
- setIsOpened(false);
97
- (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
98
- },
99
- onClickOutside: () => {
100
- var _btnRef$current2;
101
-
102
- setIsOpened(false);
103
- (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
104
- },
105
- customOffset: [0, 2],
106
- startPlacementPreference: "top-end",
107
- actionRef: actionRef,
108
- onKeyDown: onKeyDown,
109
- minWidth: btnWidth + 23,
110
- maxHeight: 300,
111
- HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
112
- cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
113
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
114
- style: {
115
- marginLeft: '8px'
116
- }
117
- }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
118
- height: "100%"
119
- })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
120
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
121
- buttonType: "raw",
122
- onClick: () => setIsOpened(prev => !prev),
123
- innerRef: btnRef
124
- }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
125
- gutter: "xxs",
126
- alignItems: "center",
127
- cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(100px, 70%)', 'min-content'] : ['auto', 'min-content']
128
- }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
129
- alignItems: "center",
130
- gutter: "xxxs",
131
- ref: pageInfoRef,
132
- style: {
133
- gridAutoFlow: 'column'
134
- },
135
- children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
136
- fontSize: "18px"
137
- }, void 0, pageIndex + 1), " / ", pageCount]
138
- }), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
139
- children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
140
- height: "12px",
141
- ml: "8px"
142
- })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
143
- fontSize: "13px"
144
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {}, void 0, longestPageDetail), /*#__PURE__*/_jsx__default["default"](styled.PaginationDetail, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
145
- value: pageDetails[pageIndex]
146
- }, void 0, pageDetails[pageIndex])))]
147
- }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
148
- color: ['brand-primary', '700']
149
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
150
- });
151
- };
152
-
153
- module.exports = Paginator;
@@ -1,102 +0,0 @@
1
- 'use strict';
2
-
3
- var _jsx = require('@babel/runtime/helpers/jsx');
4
- require('core-js/modules/esnext.async-iterator.map.js');
5
- require('core-js/modules/esnext.iterator.map.js');
6
- require('core-js/modules/web.dom-collections.iterator.js');
7
- var react = require('react');
8
- var memoize = require('memoize-one');
9
- var dsUtilities = require('@elliemae/ds-utilities');
10
- var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
11
- var dsIcons = require('@elliemae/ds-icons');
12
- var styled = require('../styled.js');
13
-
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
-
16
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
17
- var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
18
-
19
- const generateOption = value => {
20
- if (typeof value === 'object') {
21
- return value;
22
- }
23
-
24
- return {
25
- dsId: value.toString(),
26
- value,
27
- label: value.toString(),
28
- type: 'single'
29
- };
30
- };
31
-
32
- const getOptions = memoize__default["default"]((step, min, max) => {
33
- const options = dsUtilities.range(min, max + step, step).map(generateOption);
34
- return min === 0 ? options.slice(1, options.length) : options;
35
- });
36
-
37
- const PerPageSelector = props => {
38
- const [isOpened, setIsOpened] = react.useState(false);
39
- const {
40
- pageSize,
41
- onPageSizeChange,
42
- perPageOptions,
43
- maxPerPage,
44
- perPageStep,
45
- minPerPage
46
- } = props;
47
- const options = react.useMemo(() => {
48
- if (perPageOptions) return perPageOptions.map(generateOption);
49
- return getOptions(perPageStep, minPerPage, maxPerPage);
50
- }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
51
- const actionRef = react.useRef({});
52
- const btnRef = react.useRef(null);
53
- react.useEffect(() => {
54
- if (isOpened) {
55
- actionRef.current.setActiveDescendant(pageSize.toString());
56
- actionRef.current.scrollOptionIntoView(pageSize.toString());
57
- } // eslint-disable-next-line react-hooks/exhaustive-deps
58
-
59
- }, [isOpened]);
60
- const {
61
- width
62
- } = dsUtilities.useOnElementResize(btnRef);
63
- return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
64
- isOpened: isOpened,
65
- options: options,
66
- selectedOptions: {
67
- [pageSize.toString()]: true
68
- },
69
- onOptionClick: (_, clickedOption) => {
70
- var _btnRef$current;
71
-
72
- onPageSizeChange(clickedOption.value);
73
- setIsOpened(false);
74
- (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
75
- },
76
- onClickOutside: () => {
77
- var _btnRef$current2;
78
-
79
- setIsOpened(false);
80
- (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
81
- },
82
- customOffset: [0, 2],
83
- startPlacementPreference: "top-end",
84
- actionRef: actionRef,
85
- minWidth: width + 25,
86
- maxHeight: 300,
87
- HeaderComp: () => 'Per Page'
88
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
89
- style: {
90
- marginLeft: '32px'
91
- }
92
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
93
- buttonType: "raw",
94
- onClick: () => setIsOpened(prev => !prev),
95
- "aria-pressed": isOpened,
96
- innerRef: btnRef
97
- }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
98
- color: ['brand-primary', '700']
99
- }))));
100
- };
101
-
102
- module.exports = PerPageSelector;
package/cjs/props.js DELETED
@@ -1,53 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var dsPropsHelpers = require('@elliemae/ds-props-helpers');
6
-
7
- const emptyFunc = () => null;
8
-
9
- const propTypes = {
10
- pageCount: dsPropsHelpers.PropTypes.number.description('How many pages are there'),
11
- pageIndex: dsPropsHelpers.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
12
- canPreviousPage: dsPropsHelpers.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
13
- canNextPage: dsPropsHelpers.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
14
- pageSize: dsPropsHelpers.PropTypes.number.description('The current page size').defaultValue(10),
15
- showPerPageSelector: dsPropsHelpers.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
16
- perPageOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.number, dsPropsHelpers.PropTypes.shape({
17
- dsId: dsPropsHelpers.PropTypes.string,
18
- value: dsPropsHelpers.PropTypes.number,
19
- label: dsPropsHelpers.PropTypes.string,
20
- type: dsPropsHelpers.PropTypes.oneOf(['single'])
21
- })])).description('The available options for page size').defaultValue([10]),
22
- perPageStep: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(5),
23
- minPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(0),
24
- maxPerPage: dsPropsHelpers.PropTypes.number.description('Step for the per page options').defaultValue(100),
25
- onPageSizeChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
26
- onPreviousPage: dsPropsHelpers.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
27
- onPageChange: dsPropsHelpers.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
28
- onNextPage: dsPropsHelpers.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
29
- pageDetails: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.string).description('Details to provide for each page').defaultValue([]),
30
- pageDetailsTitle: dsPropsHelpers.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
31
- width: dsPropsHelpers.PropTypes.any.description('Width for the container of the pagination').defaultValue('100%')
32
- };
33
- const defaultProps = {
34
- pageIndex: 1,
35
- canPreviousPage: true,
36
- canNextPage: true,
37
- pageSize: 10,
38
- showPerPageSelector: true,
39
- perPageOptions: [10],
40
- perPageStep: 5,
41
- minPerPage: 0,
42
- maxPerPage: 100,
43
- onPageSizeChange: emptyFunc,
44
- onPreviousPage: emptyFunc,
45
- onNextPage: emptyFunc,
46
- onPageChange: emptyFunc,
47
- pageDetails: [],
48
- pageDetailsTitle: '',
49
- width: '100%'
50
- };
51
-
52
- exports.defaultProps = defaultProps;
53
- exports.propTypes = propTypes;
package/cjs/styled.js DELETED
@@ -1,57 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
- var Grid = require('@elliemae/ds-grid');
7
- var dsButton = require('@elliemae/ds-button');
8
- var styled = require('styled-components');
9
- var styledComponents = require('@xstyled/styled-components');
10
- var dsSystem = require('@elliemae/ds-system');
11
-
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
-
14
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
15
- var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
16
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
17
-
18
- var _templateObject;
19
- const styledFocusCss = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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 => {
20
- let {
21
- theme
22
- } = _ref;
23
- return theme.colors.brand[700];
24
- });
25
- const PaginationContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
26
- componentId: "sc-mxz59e-0"
27
- })(["height:42px;max-width:100%;align-items:center;box-shadow:0 -1px 3px 0 rgba(0,0,0,0.5);"]);
28
- const PaginationWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
29
- componentId: "sc-mxz59e-1"
30
- })(["display:flex;justify-content:center;align-items:center;"]);
31
- const PaginationSeparator = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
32
- componentId: "sc-mxz59e-2"
33
- })(["background-color:", ";width:1px;height:", ";"], props => props.theme.colors.neutral[300], props => props.height || '30px');
34
- const PaginationBoldText = /*#__PURE__*/styled__default["default"].span.withConfig({
35
- componentId: "sc-mxz59e-3"
36
- })(["font-weight:", ";", " ", " position:relative;"], props => props.theme.fontWeights.semibold, styledComponents.typography, styledComponents.space);
37
- const InvisibleDetail = /*#__PURE__*/styled__default["default"].div.withConfig({
38
- componentId: "sc-mxz59e-4"
39
- })(["opacity:0;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
40
- const PaginationDetail = /*#__PURE__*/styled__default["default"].span.withConfig({
41
- componentId: "sc-mxz59e-5"
42
- })(["position:absolute;top:0;left:0;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
43
- const PaginationDropdownButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
44
- componentId: "sc-mxz59e-6"
45
- })(["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);
46
- const PreviousNextPageButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
47
- componentId: "sc-mxz59e-7"
48
- })(["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);
49
-
50
- exports.InvisibleDetail = InvisibleDetail;
51
- exports.PaginationBoldText = PaginationBoldText;
52
- exports.PaginationContainer = PaginationContainer;
53
- exports.PaginationDetail = PaginationDetail;
54
- exports.PaginationDropdownButton = PaginationDropdownButton;
55
- exports.PaginationSeparator = PaginationSeparator;
56
- exports.PaginationWrapper = PaginationWrapper;
57
- exports.PreviousNextPageButton = PreviousNextPageButton;
package/esm/Pagination.js DELETED
@@ -1,26 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import 'react';
8
- import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
9
- import { PaginationContent } from './parts/PaginationContent.js';
10
- import { propTypes, defaultProps } from './props.js';
11
- import { jsx } from 'react/jsx-runtime';
12
-
13
- 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; }
14
-
15
- 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; }
16
-
17
- const DSPagination = props => {
18
- const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
19
- useValidateTypescriptPropTypes(propsWithDefault, propTypes);
20
- return /*#__PURE__*/jsx(PaginationContent, _objectSpread({}, propsWithDefault));
21
- };
22
-
23
- const DSPaginationWithSchema = describe(DSPagination).description('DSPagination');
24
- DSPaginationWithSchema.propTypes = propTypes;
25
-
26
- export { DSPagination, DSPaginationWithSchema };
@@ -1,7 +0,0 @@
1
- const PAGINATION_DATA_TESTID = {
2
- PREVIOUS_BUTTON: 'data-table-pagination-prev-button',
3
- NEXT_BUTTON: 'data-table-pagination-next-button',
4
- CONTAINER: 'data-table-pagination-container'
5
- };
6
-
7
- export { PAGINATION_DATA_TESTID };
package/esm/index.d.js DELETED
@@ -1 +0,0 @@
1
-
package/esm/index.js DELETED
@@ -1 +0,0 @@
1
- export { DSPagination, DSPaginationWithSchema } from './Pagination.js';
@@ -1,25 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { ChevronRight } from '@elliemae/ds-icons';
4
- import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
5
- import { PreviousNextPageButton } from '../styled.js';
6
-
7
- const PageNextButton = _ref => {
8
- let {
9
- onNextPage,
10
- canNextPage
11
- } = _ref;
12
- return /*#__PURE__*/_jsx(PreviousNextPageButton, {
13
- onClick: () => {
14
- if (canNextPage) onNextPage();
15
- },
16
- disabled: !canNextPage,
17
- buttonType: "raw",
18
- "data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
19
- HeaderComp: () => 'Page'
20
- }, void 0, /*#__PURE__*/_jsx(ChevronRight, {
21
- color: canNextPage ? ['brand-primary', '700'] : ['neutral', '500']
22
- }));
23
- };
24
-
25
- export { PageNextButton };
@@ -1,24 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import { ChevronLeft } from '@elliemae/ds-icons';
4
- import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
5
- import { PreviousNextPageButton } from '../styled.js';
6
-
7
- const PagePrevButton = _ref => {
8
- let {
9
- onPreviousPage,
10
- canPreviousPage
11
- } = _ref;
12
- return /*#__PURE__*/_jsx(PreviousNextPageButton, {
13
- onClick: () => {
14
- if (canPreviousPage) onPreviousPage();
15
- },
16
- disabled: !canPreviousPage,
17
- buttonType: "raw",
18
- "data-testid": PAGINATION_DATA_TESTID.PREVIOUS_BUTTON
19
- }, void 0, /*#__PURE__*/_jsx(ChevronLeft, {
20
- color: canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']
21
- }));
22
- };
23
-
24
- export { PagePrevButton };
@@ -1,85 +0,0 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
3
- import 'core-js/modules/esnext.iterator.filter.js';
4
- import 'core-js/modules/esnext.async-iterator.for-each.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
- import _jsx from '@babel/runtime/helpers/esm/jsx';
8
- import 'react';
9
- import Grid from '@elliemae/ds-grid';
10
- import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
11
- import { PaginationContainer, PaginationWrapper, PaginationSeparator } from '../styled.js';
12
- import PerPageSelector from './PerPageSelector.js';
13
- import Paginator from './Paginator.js';
14
- import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
15
- import { PagePrevButton } from './PagePrevButton.js';
16
- import { PageNextButton } from './PageNextButton.js';
17
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
18
-
19
- var _PaginationSeparator;
20
-
21
- 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; }
22
-
23
- 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; }
24
- const PaginationContent = props => {
25
- const {
26
- pageIndex,
27
- pageSize,
28
- canPreviousPage,
29
- canNextPage,
30
- onPageSizeChange,
31
- onNextPage,
32
- onPreviousPage,
33
- onPageChange,
34
- pageCount,
35
- showPerPageSelector,
36
- pageDetails,
37
- pageDetailsTitle,
38
- perPageOptions,
39
- maxPerPage,
40
- perPageStep,
41
- minPerPage,
42
- width
43
- } = props;
44
- const globalAttributes = useGetGlobalAttributes(props);
45
- return /*#__PURE__*/jsx(PaginationContainer, _objectSpread(_objectSpread({
46
- justifyContent: "center",
47
- alignItems: "center",
48
- width: width.toString(),
49
- "data-testid": PAGINATION_DATA_TESTID.CONTAINER,
50
- cols: ['minmax(auto, 80%)']
51
- }, globalAttributes), {}, {
52
- children: /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxs(Fragment, {
53
- children: [/*#__PURE__*/_jsx(PerPageSelector, {
54
- pageSize: pageSize,
55
- onPageSizeChange: onPageSizeChange,
56
- perPageOptions: perPageOptions,
57
- maxPerPage: maxPerPage,
58
- perPageStep: perPageStep,
59
- minPerPage: minPerPage
60
- }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {
61
- mr: 24
62
- }))]
63
- }), /*#__PURE__*/_jsx(Grid, {
64
- mr: "32px",
65
- alignItems: "center",
66
- style: {
67
- gridAutoFlow: 'column'
68
- }
69
- }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
70
- canPreviousPage: canPreviousPage,
71
- onPreviousPage: onPreviousPage
72
- }), /*#__PURE__*/_jsx(Paginator, {
73
- pageCount: pageCount,
74
- pageIndex: pageIndex,
75
- onPageChange: onPageChange,
76
- pageDetails: pageDetails,
77
- pageDetailsTitle: pageDetailsTitle
78
- }), /*#__PURE__*/_jsx(PageNextButton, {
79
- canNextPage: canNextPage,
80
- onNextPage: onNextPage
81
- })))
82
- }));
83
- };
84
-
85
- export { PaginationContent };