@elliemae/ds-pagination 2.3.1 → 3.0.0-alpha.3

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 +106 -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 +77 -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 +53 -45
  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 -163
  59. package/cjs/parts/PerPageSelector.js +0 -110
  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 -156
  70. package/esm/parts/PerPageSelector.js +0 -103
  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,163 +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.map.js');
6
- require('core-js/modules/esnext.iterator.map.js');
7
- require('core-js/modules/esnext.async-iterator.reduce.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.reduce.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 {
41
- width: btnWidth
42
- } = dsUtilities.useOnElementResize(btnRef);
43
- const {
44
- width: txtWidth
45
- } = dsUtilities.useOnElementResize(pageInfoRef);
46
- const options = react.useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
47
- var _span;
48
-
49
- const option = {
50
- dsId: (index + 1).toString(),
51
- label: (index + 1).toString(),
52
- value: index + 1,
53
- type: 'single'
54
- };
55
-
56
- if (pageDetails !== null && pageDetails !== void 0 && pageDetails.length) {
57
- option.render = () => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
58
- cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
59
- gutter: "xxs",
60
- alignItems: "center"
61
- }, void 0, pageIndex === index ? /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
62
- size: "s",
63
- color: ['brand-primary', '600']
64
- }) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx__default["default"]("span", {
65
- style: {
66
- whiteSpace: 'nowrap',
67
- textOverflow: 'ellipsis',
68
- overflow: 'hidden'
69
- }
70
- }, void 0, pageDetails[index]));
71
- }
72
-
73
- return option;
74
- }), [pageCount, pageDetails, pageIndex, txtWidth]);
75
- const actionRef = react.useRef({});
76
- react.useEffect(() => {
77
- if (isOpened) {
78
- actionRef.current.setActiveDescendant((pageIndex + 1).toString());
79
- actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
80
- } // eslint-disable-next-line react-hooks/exhaustive-deps
81
-
82
- }, [isOpened]);
83
- const [detailWidth, setDetailWidth] = react.useState(0);
84
- react.useLayoutEffect(() => {
85
- const invisibleDetails = [...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')];
86
- const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
87
- setDetailWidth(maxWidth);
88
- }, [pageDetails]);
89
- const onKeyDown = usePaginationSearch.usePaginationSearch(pageCount, actionRef);
90
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
91
- children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {})), /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
92
- isOpened: isOpened,
93
- options: options,
94
- selectedOptions: {
95
- [(pageIndex + 1).toString()]: true
96
- },
97
- onOptionClick: (_, clickedOption) => {
98
- var _btnRef$current;
99
-
100
- onPageChange(clickedOption.value);
101
- setIsOpened(false);
102
- (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
103
- },
104
- onClickOutside: () => {
105
- var _btnRef$current2;
106
-
107
- setIsOpened(false);
108
- (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
109
- },
110
- customOffset: [-23, 2],
111
- startPlacementPreference: "top-start",
112
- actionRef: actionRef,
113
- onKeyDown: onKeyDown,
114
- minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
115
- maxHeight: 300,
116
- HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
117
- cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
118
- }, void 0, /*#__PURE__*/_jsx__default["default"]("span", {
119
- style: {
120
- marginLeft: '8px'
121
- }
122
- }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
123
- height: "100%"
124
- })), _span2 || (_span2 = /*#__PURE__*/_jsx__default["default"]("span", {}, void 0, pageDetailsTitle))) : 'Page'
125
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
126
- buttonType: "raw",
127
- onClick: () => setIsOpened(prev => !prev),
128
- innerRef: btnRef
129
- }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
130
- gutter: "xxs",
131
- alignItems: "center",
132
- cols: pageDetails.length !== 0 ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content'] : ['auto', 'min-content']
133
- }, void 0, /*#__PURE__*/jsxRuntime.jsxs(Grid__default["default"], {
134
- alignItems: "center",
135
- gutter: "xxxs",
136
- ref: pageInfoRef,
137
- style: {
138
- gridAutoFlow: 'column'
139
- },
140
- children: [/*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
141
- fontSize: "18px"
142
- }, void 0, pageIndex + 1), " / ", pageCount]
143
- }), pageDetails.length !== 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
144
- children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {
145
- height: "12px",
146
- ml: "8px"
147
- })), /*#__PURE__*/_jsx__default["default"](styled.PaginationBoldText, {
148
- fontSize: "13px",
149
- w: detailWidth,
150
- mr: "xxs",
151
- display: "grid"
152
- }, void 0, /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
153
- value: pageDetails[pageIndex]
154
- }, void 0, pageDetails[pageIndex]), pageDetails.map(pageDetail => /*#__PURE__*/_jsx__default["default"](styled.InvisibleDetail, {
155
- "data-testid": "ds-pagination-invisible-detail-for-width-calc"
156
- }, void 0, pageDetail)))]
157
- }), /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
158
- color: ['brand-primary', '700']
159
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx__default["default"](styled.PaginationSeparator, {}))]
160
- });
161
- };
162
-
163
- module.exports = Paginator;
@@ -1,110 +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
- require('core-js/modules/esnext.async-iterator.reduce.js');
8
- require('core-js/modules/esnext.iterator.constructor.js');
9
- require('core-js/modules/esnext.iterator.reduce.js');
10
- var react = require('react');
11
- var memoize = require('memoize-one');
12
- var dsUtilities = require('@elliemae/ds-utilities');
13
- var dsDropdownmenu = require('@elliemae/ds-dropdownmenu');
14
- var dsIcons = require('@elliemae/ds-icons');
15
- var styled = require('../styled.js');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
20
- var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
21
-
22
- const generateOption = value => {
23
- if (typeof value === 'object') {
24
- return value;
25
- }
26
-
27
- return {
28
- dsId: value.toString(),
29
- value,
30
- label: value.toString(),
31
- type: 'single'
32
- };
33
- };
34
-
35
- const getOptions = memoize__default["default"]((step, min, max) => {
36
- const options = dsUtilities.range(min, max + step, step).map(generateOption);
37
- return min === 0 ? options.slice(1, options.length) : options;
38
- });
39
-
40
- const PerPageSelector = props => {
41
- const [isOpened, setIsOpened] = react.useState(false);
42
- const {
43
- pageSize,
44
- onPageSizeChange,
45
- perPageOptions,
46
- maxPerPage,
47
- perPageStep,
48
- minPerPage
49
- } = props;
50
- const options = react.useMemo(() => {
51
- if (perPageOptions) return perPageOptions.map(generateOption);
52
- return getOptions(perPageStep, minPerPage, maxPerPage);
53
- }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
54
- const actionRef = react.useRef({});
55
- const btnRef = react.useRef(null);
56
- react.useEffect(() => {
57
- if (isOpened) {
58
- actionRef.current.setActiveDescendant(pageSize.toString());
59
- actionRef.current.scrollOptionIntoView(pageSize.toString());
60
- } // eslint-disable-next-line react-hooks/exhaustive-deps
61
-
62
- }, [isOpened]);
63
- const width = react.useMemo(() => {
64
- const maxLength = options.reduce((acc, cur) => {
65
- var _length, _cur$label;
66
-
67
- return Math.max(acc, (_length = cur === null || cur === void 0 ? void 0 : (_cur$label = cur.label) === null || _cur$label === void 0 ? void 0 : _cur$label.length) !== null && _length !== void 0 ? _length : 0);
68
- }, 0);
69
- return maxLength * 6 + 90;
70
- }, [options]);
71
- return /*#__PURE__*/_jsx__default["default"](dsDropdownmenu.DSDropdownMenuV2, {
72
- isOpened: isOpened,
73
- options: options,
74
- selectedOptions: {
75
- [pageSize.toString()]: true
76
- },
77
- onOptionClick: (_, clickedOption) => {
78
- var _btnRef$current;
79
-
80
- onPageSizeChange(clickedOption.value);
81
- setIsOpened(false);
82
- (_btnRef$current = btnRef.current) === null || _btnRef$current === void 0 ? void 0 : _btnRef$current.focus();
83
- },
84
- onClickOutside: () => {
85
- var _btnRef$current2;
86
-
87
- setIsOpened(false);
88
- (_btnRef$current2 = btnRef.current) === null || _btnRef$current2 === void 0 ? void 0 : _btnRef$current2.focus();
89
- },
90
- customOffset: [10, 2],
91
- startPlacementPreference: "top-start",
92
- actionRef: actionRef,
93
- minWidth: width,
94
- maxHeight: 300,
95
- HeaderComp: () => 'Per Page'
96
- }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
97
- style: {
98
- marginLeft: '32px'
99
- }
100
- }, void 0, /*#__PURE__*/_jsx__default["default"](styled.PaginationDropdownButton, {
101
- buttonType: "raw",
102
- onClick: () => setIsOpened(prev => !prev),
103
- "aria-pressed": isOpened,
104
- innerRef: btnRef
105
- }, void 0, pageSize, " / page", /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
106
- color: ['brand-primary', '700']
107
- }))));
108
- };
109
-
110
- 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, styledComponents.sizing, styledComponents.layout);
37
- const InvisibleDetail = /*#__PURE__*/styled__default["default"].div.withConfig({
38
- componentId: "sc-mxz59e-4"
39
- })(["opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;"]);
40
- const PaginationDetail = /*#__PURE__*/styled__default["default"].span.withConfig({
41
- componentId: "sc-mxz59e-5"
42
- })(["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 };