@elliemae/ds-pagination 2.2.1 → 2.3.0-alpha.4

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 (49) hide show
  1. package/cjs/Pagination.js +49 -35
  2. package/cjs/Pagination.js.map +7 -0
  3. package/cjs/PaginationDataTestID.js +37 -9
  4. package/cjs/PaginationDataTestID.js.map +7 -0
  5. package/cjs/hooks/usePaginationSearch.js +48 -20
  6. package/cjs/hooks/usePaginationSearch.js.map +7 -0
  7. package/cjs/index.d.js +27 -2
  8. package/cjs/index.d.js.map +7 -0
  9. package/cjs/index.js +28 -10
  10. package/cjs/index.js.map +7 -0
  11. package/cjs/parts/PageNextButton.js +52 -32
  12. package/cjs/parts/PageNextButton.js.map +7 -0
  13. package/cjs/parts/PagePrevButton.js +51 -31
  14. package/cjs/parts/PagePrevButton.js.map +7 -0
  15. package/cjs/parts/PaginationContent.js +91 -77
  16. package/cjs/parts/PaginationContent.js.map +7 -0
  17. package/cjs/parts/Paginator.js +112 -124
  18. package/cjs/parts/Paginator.js.map +7 -0
  19. package/cjs/parts/PerPageSelector.js +68 -63
  20. package/cjs/parts/PerPageSelector.js.map +7 -0
  21. package/cjs/props.js +63 -34
  22. package/cjs/props.js.map +7 -0
  23. package/cjs/styled.js +112 -47
  24. package/cjs/styled.js.map +7 -0
  25. package/esm/Pagination.js +17 -23
  26. package/esm/Pagination.js.map +7 -0
  27. package/esm/PaginationDataTestID.js +8 -5
  28. package/esm/PaginationDataTestID.js.map +7 -0
  29. package/esm/hooks/usePaginationSearch.js +16 -13
  30. package/esm/hooks/usePaginationSearch.js.map +7 -0
  31. package/esm/index.d.js +2 -1
  32. package/esm/index.d.js.map +7 -0
  33. package/esm/index.js +3 -1
  34. package/esm/index.js.map +7 -0
  35. package/esm/parts/PageNextButton.js +23 -24
  36. package/esm/parts/PageNextButton.js.map +7 -0
  37. package/esm/parts/PagePrevButton.js +22 -23
  38. package/esm/parts/PagePrevButton.js.map +7 -0
  39. package/esm/parts/PaginationContent.js +62 -68
  40. package/esm/parts/PaginationContent.js.map +7 -0
  41. package/esm/parts/Paginator.js +76 -110
  42. package/esm/parts/Paginator.js.map +7 -0
  43. package/esm/parts/PerPageSelector.js +32 -49
  44. package/esm/parts/PerPageSelector.js.map +7 -0
  45. package/esm/props.js +34 -29
  46. package/esm/props.js.map +7 -0
  47. package/esm/styled.js +83 -33
  48. package/esm/styled.js.map +7 -0
  49. package/package.json +7 -7
@@ -1,69 +1,63 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'react';
3
- import Grid from '@elliemae/ds-grid';
4
- import { PaginationContainer, PaginationWrapper, PaginationSeparator } from '../styled.js';
5
- import PerPageSelector from './PerPageSelector.js';
6
- import Paginator from './Paginator.js';
7
- import { PAGINATION_DATA_TESTID } from '../PaginationDataTestID.js';
8
- import { PagePrevButton } from './PagePrevButton.js';
9
- import { PageNextButton } from './PageNextButton.js';
10
- import { jsxs, Fragment } from 'react/jsx-runtime';
11
-
12
- var _PaginationSeparator;
13
- const PaginationContent = _ref => {
14
- let {
15
- pageIndex,
16
- pageSize,
17
- canPreviousPage,
18
- canNextPage,
19
- onPageSizeChange,
20
- onNextPage,
21
- onPreviousPage,
22
- onPageChange,
23
- pageCount,
24
- showPerPageSelector,
25
- pageDetails,
26
- pageDetailsTitle,
27
- perPageOptions,
28
- maxPerPage,
29
- perPageStep,
30
- minPerPage,
31
- width
32
- } = _ref;
33
- return /*#__PURE__*/_jsx(PaginationContainer, {
34
- justifyContent: "center",
35
- alignItems: "center",
36
- width: width,
37
- "data-testid": PAGINATION_DATA_TESTID.CONTAINER
38
- }, void 0, /*#__PURE__*/_jsx(PaginationWrapper, {}, void 0, showPerPageSelector && /*#__PURE__*/jsxs(Fragment, {
39
- children: [/*#__PURE__*/_jsx(PerPageSelector, {
40
- pageSize: pageSize,
41
- onPageSizeChange: onPageSizeChange,
42
- perPageOptions: perPageOptions,
43
- maxPerPage: maxPerPage,
44
- perPageStep: perPageStep,
45
- minPerPage: minPerPage
46
- }), _PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {
47
- mr: 24
48
- }))]
49
- }), /*#__PURE__*/_jsx(Grid, {
50
- cols: ['auto', 'auto', 'auto', 'auto', 'auto'],
51
- mr: "32px",
52
- alignItems: "center"
53
- }, void 0, /*#__PURE__*/_jsx(PagePrevButton, {
54
- canPreviousPage: canPreviousPage,
55
- onPreviousPage: onPreviousPage
56
- }), /*#__PURE__*/_jsx(Paginator, {
57
- pageCount: pageCount,
58
- pageIndex: pageIndex,
59
- onNextPage: onNextPage,
60
- onPageChange: onPageChange,
61
- pageDetails: pageDetails,
62
- pageDetailsTitle: pageDetailsTitle
63
- }), /*#__PURE__*/_jsx(PageNextButton, {
64
- canNextPage: canNextPage,
65
- onNextPage: onNextPage
66
- }))));
1
+ import * as React from "react";
2
+ import React2 from "react";
3
+ import { Grid } from "@elliemae/ds-grid";
4
+ import { PaginationContainer, PaginationSeparator, PaginationWrapper } from "../styled";
5
+ import PerPageSelector from "./PerPageSelector";
6
+ import Paginator from "./Paginator";
7
+ import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
8
+ import { PagePrevButton } from "./PagePrevButton";
9
+ import { PageNextButton } from "./PageNextButton";
10
+ const PaginationContent = ({
11
+ pageIndex,
12
+ pageSize,
13
+ canPreviousPage,
14
+ canNextPage,
15
+ onPageSizeChange,
16
+ onNextPage,
17
+ onPreviousPage,
18
+ onPageChange,
19
+ pageCount,
20
+ showPerPageSelector,
21
+ pageDetails,
22
+ pageDetailsTitle,
23
+ perPageOptions,
24
+ maxPerPage,
25
+ perPageStep,
26
+ minPerPage,
27
+ width
28
+ }) => /* @__PURE__ */ React2.createElement(PaginationContainer, {
29
+ justifyContent: "center",
30
+ alignItems: "center",
31
+ width,
32
+ "data-testid": PAGINATION_DATA_TESTID.CONTAINER
33
+ }, /* @__PURE__ */ React2.createElement(PaginationWrapper, null, showPerPageSelector && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PerPageSelector, {
34
+ pageSize,
35
+ onPageSizeChange,
36
+ perPageOptions,
37
+ maxPerPage,
38
+ perPageStep,
39
+ minPerPage
40
+ }), /* @__PURE__ */ React2.createElement(PaginationSeparator, {
41
+ mr: 24
42
+ })), /* @__PURE__ */ React2.createElement(Grid, {
43
+ cols: ["auto", "auto", "auto", "auto", "auto"],
44
+ mr: "32px",
45
+ alignItems: "center"
46
+ }, /* @__PURE__ */ React2.createElement(PagePrevButton, {
47
+ canPreviousPage,
48
+ onPreviousPage
49
+ }), /* @__PURE__ */ React2.createElement(Paginator, {
50
+ pageCount,
51
+ pageIndex,
52
+ onNextPage,
53
+ onPageChange,
54
+ pageDetails,
55
+ pageDetailsTitle
56
+ }), /* @__PURE__ */ React2.createElement(PageNextButton, {
57
+ canNextPage,
58
+ onNextPage
59
+ }))));
60
+ export {
61
+ PaginationContent
67
62
  };
68
-
69
- export { PaginationContent };
63
+ //# sourceMappingURL=PaginationContent.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PaginationContent.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaginationContainer, PaginationSeparator, PaginationWrapper } from '../styled';\nimport PerPageSelector from './PerPageSelector';\nimport Paginator from './Paginator';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PagePrevButton } from './PagePrevButton';\nimport { PageNextButton } from './PageNextButton';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PaginationContent: React.ComponentType<DSPaginationProps> = ({\n pageIndex,\n pageSize,\n canPreviousPage,\n canNextPage,\n onPageSizeChange,\n onNextPage,\n onPreviousPage,\n onPageChange,\n pageCount,\n showPerPageSelector,\n pageDetails,\n pageDetailsTitle,\n perPageOptions,\n maxPerPage,\n perPageStep,\n minPerPage,\n width,\n}) => (\n <PaginationContainer\n justifyContent=\"center\"\n alignItems=\"center\"\n width={width}\n data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n >\n <PaginationWrapper>\n {showPerPageSelector && (\n <>\n <PerPageSelector\n pageSize={pageSize}\n onPageSizeChange={onPageSizeChange}\n perPageOptions={perPageOptions}\n maxPerPage={maxPerPage}\n perPageStep={perPageStep}\n minPerPage={minPerPage}\n />\n <PaginationSeparator mr={24} />\n </>\n )}\n <Grid cols={['auto', 'auto', 'auto', 'auto', 'auto']} mr=\"32px\" alignItems=\"center\">\n <PagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n <Paginator\n pageCount={pageCount}\n pageIndex={pageIndex}\n onNextPage={onNextPage}\n onPageChange={onPageChange}\n pageDetails={pageDetails}\n pageDetailsTitle={pageDetailsTitle}\n />\n <PageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n </Grid>\n </PaginationWrapper>\n </PaginationContainer>\n);\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,oBAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC,qBAAD;AAAA,EACE,gBAAe;AAAA,EACf,YAAW;AAAA,EACX;AAAA,EACA,eAAa,uBAAuB;AAAA,GAEpC,qCAAC,mBAAD,MACG,uBACC,4DACE,qCAAC,iBAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IAEF,qCAAC,qBAAD;AAAA,EAAqB,IAAI;AAAA,KAG7B,qCAAC,MAAD;AAAA,EAAM,MAAM,CAAC,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,EAAS,IAAG;AAAA,EAAO,YAAW;AAAA,GACzE,qCAAC,gBAAD;AAAA,EAAgB;AAAA,EAAkC;AAAA,IAClD,qCAAC,WAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IAEF,qCAAC,gBAAD;AAAA,EAAgB;AAAA,EAA0B;AAAA;",
6
+ "names": []
7
+ }
@@ -1,64 +1,41 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
- import 'core-js/modules/esnext.async-iterator.map.js';
4
- import 'core-js/modules/esnext.iterator.map.js';
5
- import { useState, useRef, useMemo, useEffect } from 'react';
6
- import { Checkmark, ChevronDown } from '@elliemae/ds-icons';
7
- import { useOnElementResize } from '@elliemae/ds-utilities';
8
- import Grid from '@elliemae/ds-grid';
9
- import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
10
- import { PaginationSeparator, PaginationDropdownButton, PaginationBoldText } from '../styled.js';
11
- import { usePaginationSearch } from '../hooks/usePaginationSearch.js';
12
- import { jsxs, Fragment } from 'react/jsx-runtime';
13
-
14
- var _div, _PaginationSeparator, _PaginationSeparator2, _PaginationSeparator3, _PaginationSeparator4;
15
-
16
- const Paginator = props => {
17
- var _span2;
18
-
19
- const {
20
- pageIndex,
21
- pageCount,
22
- onPageChange,
23
- pageDetails,
24
- pageDetailsTitle
25
- } = props;
1
+ import * as React from "react";
2
+ import React2, { useEffect, useMemo, useRef, useState } from "react";
3
+ import { Checkmark, ChevronDown } from "@elliemae/ds-icons";
4
+ import { useOnElementResize } from "@elliemae/ds-utilities";
5
+ import { Grid } from "@elliemae/ds-grid";
6
+ import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
7
+ import { PaginationBoldText, PaginationDropdownButton, PaginationSeparator } from "../styled";
8
+ import { usePaginationSearch } from "../hooks/usePaginationSearch";
9
+ const Paginator = (props) => {
10
+ const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
26
11
  const [isOpened, setIsOpened] = useState(false);
27
12
  const btnRef = useRef(null);
28
13
  const pageInfoRef = useRef(null);
29
- const {
30
- width: btnWidth
31
- } = useOnElementResize(btnRef);
32
- const {
33
- width: txtWidth
34
- } = useOnElementResize(pageInfoRef);
14
+ const { width: btnWidth } = useOnElementResize(btnRef);
15
+ const { width: txtWidth } = useOnElementResize(pageInfoRef);
35
16
  const options = useMemo(() => new Array(pageCount).fill(0).map((_, index) => {
36
- var _span;
37
-
38
17
  const option = {
39
18
  dsId: (index + 1).toString(),
40
19
  label: (index + 1).toString(),
41
20
  value: index + 1,
42
- type: 'single'
21
+ type: "single"
43
22
  };
44
-
45
23
  if (pageDetails.length) {
46
- option.render = () => /*#__PURE__*/_jsx(Grid, {
47
- cols: ['16px', "".concat(txtWidth + 16, "px"), 'auto'],
24
+ option.render = () => /* @__PURE__ */ React2.createElement(Grid, {
25
+ cols: ["16px", `${txtWidth + 16}px`, "auto"],
48
26
  gutter: "xxs",
49
27
  alignItems: "center"
50
- }, void 0, pageIndex === index ? /*#__PURE__*/_jsx(Checkmark, {
28
+ }, pageIndex === index ? /* @__PURE__ */ React2.createElement(Checkmark, {
51
29
  size: "s",
52
- color: ['brand-primary', '600']
53
- }) : _div || (_div = /*#__PURE__*/_jsx("div", {})), _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, index + 1)), /*#__PURE__*/_jsx("span", {
30
+ color: ["brand-primary", "600"]
31
+ }) : /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement("span", null, index + 1), /* @__PURE__ */ React2.createElement("span", {
54
32
  style: {
55
- whiteSpace: 'nowrap',
56
- textOverflow: 'ellipsis',
57
- overflow: 'hidden'
33
+ whiteSpace: "nowrap",
34
+ textOverflow: "ellipsis",
35
+ overflow: "hidden"
58
36
  }
59
- }, void 0, pageDetails[index]));
37
+ }, pageDetails[index]));
60
38
  }
61
-
62
39
  return option;
63
40
  }), [pageCount, pageDetails, pageIndex, txtWidth]);
64
41
  const actionRef = useRef({});
@@ -66,71 +43,60 @@ const Paginator = props => {
66
43
  if (isOpened) {
67
44
  actionRef.current.setActiveDescendant((pageIndex + 1).toString());
68
45
  actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
69
- } // eslint-disable-next-line react-hooks/exhaustive-deps
70
-
46
+ }
71
47
  }, [isOpened]);
72
48
  const onKeyDown = usePaginationSearch(pageCount, actionRef);
73
- return /*#__PURE__*/jsxs(Fragment, {
74
- children: [_PaginationSeparator || (_PaginationSeparator = /*#__PURE__*/_jsx(PaginationSeparator, {})), /*#__PURE__*/_jsx(DSDropdownMenuV2, {
75
- isOpened: isOpened,
76
- options: options,
77
- selectedOptions: {
78
- [(pageIndex + 1).toString()]: true
79
- },
80
- onOptionClick: (_, clickedOption) => {
81
- onPageChange(clickedOption.value);
82
- setIsOpened(false);
83
- btnRef.current.focus();
84
- },
85
- onClickOutside: () => {
86
- setIsOpened(false);
87
- btnRef.current.focus();
88
- },
89
- customOffset: [0, 2],
90
- startPlacementPreference: "top-end",
91
- actionRef: actionRef,
92
- onKeyDown: onKeyDown,
93
- minWidth: btnWidth + 23,
94
- maxHeight: 300,
95
- HeaderComp: () => pageDetailsTitle !== '' ? /*#__PURE__*/_jsx(Grid, {
96
- cols: ["".concat(txtWidth + 50, "px"), '8px', 'auto']
97
- }, void 0, /*#__PURE__*/_jsx("span", {
98
- style: {
99
- marginLeft: '8px'
100
- }
101
- }, void 0, "Page"), _PaginationSeparator2 || (_PaginationSeparator2 = /*#__PURE__*/_jsx(PaginationSeparator, {
102
- height: "100%"
103
- })), _span2 || (_span2 = /*#__PURE__*/_jsx("span", {}, void 0, pageDetailsTitle))) : 'Page'
104
- }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
105
- buttonType: "raw",
106
- onClick: () => setIsOpened(true),
107
- innerRef: btnRef
108
- }, void 0, /*#__PURE__*/_jsx("div", {
109
- style: {
110
- display: 'flex',
111
- gridGap: '8px',
112
- alignItems: 'center'
113
- }
114
- }, void 0, /*#__PURE__*/jsxs(Grid, {
115
- cols: ['auto', 'auto', 'auto'],
116
- alignItems: "center",
117
- gutter: "xxxs",
118
- ref: pageInfoRef,
119
- children: [/*#__PURE__*/_jsx(PaginationBoldText, {
120
- fontSize: "18px"
121
- }, void 0, pageIndex + 1), " / ", pageCount]
122
- }), pageDetails.length !== 0 && /*#__PURE__*/jsxs(Fragment, {
123
- children: [_PaginationSeparator3 || (_PaginationSeparator3 = /*#__PURE__*/_jsx(PaginationSeparator, {
124
- height: "12px",
125
- ml: "8px"
126
- })), /*#__PURE__*/_jsx(PaginationBoldText, {
127
- fontSize: "13px",
128
- mr: "8px"
129
- }, void 0, pageDetails[pageIndex])]
130
- }), /*#__PURE__*/_jsx(ChevronDown, {
131
- color: ['brand-primary', '700']
132
- })))), _PaginationSeparator4 || (_PaginationSeparator4 = /*#__PURE__*/_jsx(PaginationSeparator, {}))]
133
- });
49
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, null), /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
50
+ isOpened,
51
+ options,
52
+ selectedOptions: { [(pageIndex + 1).toString()]: true },
53
+ onOptionClick: (_, clickedOption) => {
54
+ onPageChange(clickedOption.value);
55
+ setIsOpened(false);
56
+ btnRef.current.focus();
57
+ },
58
+ onClickOutside: () => {
59
+ setIsOpened(false);
60
+ btnRef.current.focus();
61
+ },
62
+ customOffset: [0, 2],
63
+ startPlacementPreference: "top-end",
64
+ actionRef,
65
+ onKeyDown,
66
+ minWidth: btnWidth + 23,
67
+ maxHeight: 300,
68
+ HeaderComp: () => pageDetailsTitle !== "" ? /* @__PURE__ */ React2.createElement(Grid, {
69
+ cols: [`${txtWidth + 50}px`, "8px", "auto"]
70
+ }, /* @__PURE__ */ React2.createElement("span", {
71
+ style: { marginLeft: "8px" }
72
+ }, "Page"), /* @__PURE__ */ React2.createElement(PaginationSeparator, {
73
+ height: "100%"
74
+ }), /* @__PURE__ */ React2.createElement("span", null, pageDetailsTitle)) : "Page"
75
+ }, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
76
+ buttonType: "raw",
77
+ onClick: () => setIsOpened(true),
78
+ innerRef: btnRef
79
+ }, /* @__PURE__ */ React2.createElement("div", {
80
+ style: { display: "flex", gridGap: "8px", alignItems: "center" }
81
+ }, /* @__PURE__ */ React2.createElement(Grid, {
82
+ cols: ["auto", "auto", "auto"],
83
+ alignItems: "center",
84
+ gutter: "xxxs",
85
+ ref: pageInfoRef
86
+ }, /* @__PURE__ */ React2.createElement(PaginationBoldText, {
87
+ fontSize: "18px"
88
+ }, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, {
89
+ height: "12px",
90
+ ml: "8px"
91
+ }), /* @__PURE__ */ React2.createElement(PaginationBoldText, {
92
+ fontSize: "13px",
93
+ mr: "8px"
94
+ }, pageDetails[pageIndex])), /* @__PURE__ */ React2.createElement(ChevronDown, {
95
+ color: ["brand-primary", "700"]
96
+ })))), /* @__PURE__ */ React2.createElement(PaginationSeparator, null));
97
+ };
98
+ var Paginator_default = Paginator;
99
+ export {
100
+ Paginator_default as default
134
101
  };
135
-
136
- export { Paginator as default };
102
+ //# sourceMappingURL=Paginator.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Paginator.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { Checkmark, ChevronDown } from '@elliemae/ds-icons';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { PaginationBoldText, PaginationDropdownButton, PaginationSeparator } from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\nimport { DSPaginationProps } from '../index.d';\n\nconst Paginator: React.ComponentType<DSPaginationProps> = (props) => {\n const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n\n const btnRef = useRef(null);\n const pageInfoRef = useRef(null);\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n const { width: txtWidth } = useOnElementResize(pageInfoRef);\n\n const options = useMemo(\n () =>\n new Array(pageCount).fill(0).map((_, index) => {\n const option: Record<string, unknown> = {\n dsId: (index + 1).toString(),\n label: (index + 1).toString(),\n value: index + 1,\n type: 'single',\n };\n if (pageDetails.length) {\n option.render = () => (\n <Grid cols={['16px', `${txtWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n {pageIndex === index ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}\n <span>{index + 1}</span>\n <span\n style={{\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }}\n >\n {pageDetails[index]}\n </span>\n </Grid>\n );\n }\n return option;\n }),\n [pageCount, pageDetails, pageIndex, txtWidth],\n );\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant((pageIndex + 1).toString());\n actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n return (\n <>\n <PaginationSeparator />\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [(pageIndex + 1).toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current.focus();\n }}\n customOffset={[0, 2]}\n startPlacementPreference=\"top-end\"\n actionRef={actionRef}\n onKeyDown={onKeyDown}\n minWidth={btnWidth + 23}\n maxHeight={300}\n HeaderComp={() =>\n pageDetailsTitle !== '' ? (\n <Grid cols={[`${txtWidth + 50}px`, '8px', 'auto']}>\n <span style={{ marginLeft: '8px' }}>Page</span>\n <PaginationSeparator height=\"100%\" />\n <span>{pageDetailsTitle}</span>\n </Grid>\n ) : (\n 'Page'\n )\n }\n >\n <PaginationDropdownButton buttonType=\"raw\" onClick={() => setIsOpened(true)} innerRef={btnRef}>\n <div style={{ display: 'flex', gridGap: '8px', alignItems: 'center' }}>\n <Grid cols={['auto', 'auto', 'auto']} alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef}>\n <PaginationBoldText fontSize=\"18px\">{pageIndex + 1}</PaginationBoldText> / {pageCount}\n </Grid>\n {pageDetails.length !== 0 && (\n <>\n <PaginationSeparator height=\"12px\" ml=\"8px\" />\n <PaginationBoldText fontSize=\"13px\" mr=\"8px\">\n {pageDetails[pageIndex]}\n </PaginationBoldText>\n </>\n )}\n <ChevronDown color={['brand-primary', '700']} />\n </div>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,44 +1,31 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/esnext.async-iterator.map.js';
3
- import 'core-js/modules/esnext.iterator.map.js';
4
- import 'core-js/modules/web.dom-collections.iterator.js';
5
- import { useState, useMemo, useRef, useEffect } from 'react';
6
- import memoize from 'memoize-one';
7
- import { range, useOnElementResize } from '@elliemae/ds-utilities';
8
- import { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';
9
- import { ChevronDown } from '@elliemae/ds-icons';
10
- import { PaginationDropdownButton } from '../styled.js';
11
-
12
- const generateOption = value => {
13
- if (typeof value === 'object') {
1
+ import * as React from "react";
2
+ import React2, { useEffect, useMemo, useRef, useState } from "react";
3
+ import memoize from "memoize-one";
4
+ import { range, useOnElementResize } from "@elliemae/ds-utilities";
5
+ import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
6
+ import { ChevronDown } from "@elliemae/ds-icons";
7
+ import { PaginationDropdownButton } from "../styled";
8
+ const generateOption = (value) => {
9
+ if (typeof value === "object") {
14
10
  return value;
15
11
  }
16
-
17
12
  return {
18
13
  dsId: value.toString(),
19
14
  value,
20
15
  label: value.toString(),
21
- type: 'single'
16
+ type: "single"
22
17
  };
23
18
  };
24
-
25
19
  const getOptions = memoize((step, min, max) => {
26
20
  const options = range(min, max + step, step).map(generateOption);
27
21
  return min === 0 ? options.slice(1, options.length) : options;
28
22
  });
29
-
30
- const PerPageSelector = props => {
23
+ const PerPageSelector = (props) => {
31
24
  const [isOpened, setIsOpened] = useState(false);
32
- const {
33
- pageSize,
34
- onPageSizeChange,
35
- perPageOptions,
36
- maxPerPage,
37
- perPageStep,
38
- minPerPage
39
- } = props;
25
+ const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;
40
26
  const options = useMemo(() => {
41
- if (perPageOptions) return perPageOptions.map(generateOption);
27
+ if (perPageOptions)
28
+ return perPageOptions.map(generateOption);
42
29
  return getOptions(perPageStep, minPerPage, maxPerPage);
43
30
  }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
44
31
  const actionRef = useRef({});
@@ -47,18 +34,13 @@ const PerPageSelector = props => {
47
34
  if (isOpened) {
48
35
  actionRef.current.setActiveDescendant(pageSize.toString());
49
36
  actionRef.current.scrollOptionIntoView(pageSize.toString());
50
- } // eslint-disable-next-line react-hooks/exhaustive-deps
51
-
37
+ }
52
38
  }, [isOpened]);
53
- const {
54
- width
55
- } = useOnElementResize(btnRef);
56
- return /*#__PURE__*/_jsx(DSDropdownMenuV2, {
57
- isOpened: isOpened,
58
- options: options,
59
- selectedOptions: {
60
- [pageSize.toString()]: true
61
- },
39
+ const { width } = useOnElementResize(btnRef);
40
+ return /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
41
+ isOpened,
42
+ options,
43
+ selectedOptions: { [pageSize.toString()]: true },
62
44
  onOptionClick: (_, clickedOption) => {
63
45
  onPageSizeChange(clickedOption.value);
64
46
  setIsOpened(false);
@@ -70,22 +52,23 @@ const PerPageSelector = props => {
70
52
  },
71
53
  customOffset: [0, 2],
72
54
  startPlacementPreference: "top-end",
73
- actionRef: actionRef,
55
+ actionRef,
74
56
  minWidth: width + 25,
75
57
  maxHeight: 300,
76
- HeaderComp: () => 'Per Page'
77
- }, void 0, /*#__PURE__*/_jsx("div", {
78
- style: {
79
- marginLeft: '32px'
80
- }
81
- }, void 0, /*#__PURE__*/_jsx(PaginationDropdownButton, {
58
+ HeaderComp: () => "Per Page"
59
+ }, /* @__PURE__ */ React2.createElement("div", {
60
+ style: { marginLeft: "32px" }
61
+ }, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
82
62
  buttonType: "raw",
83
63
  onClick: () => setIsOpened(true),
84
64
  "aria-pressed": isOpened,
85
65
  innerRef: btnRef
86
- }, void 0, pageSize, " / page", /*#__PURE__*/_jsx(ChevronDown, {
87
- color: ['brand-primary', '700']
66
+ }, pageSize, " / page", /* @__PURE__ */ React2.createElement(ChevronDown, {
67
+ color: ["brand-primary", "700"]
88
68
  }))));
89
69
  };
90
-
91
- export { PerPageSelector as default };
70
+ var PerPageSelector_default = PerPageSelector;
71
+ export {
72
+ PerPageSelector_default as default
73
+ };
74
+ //# sourceMappingURL=PerPageSelector.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PerPageSelector.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range, useOnElementResize } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSPaginationProps } from '../index.d';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value) => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n };\n};\n\nconst getOptions = memoize((step, min, max) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n});\n\nconst PerPageSelector: React.ComponentType<\n Pick<\n DSPaginationProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\n> = (props) => {\n const [isOpened, setIsOpened] = useState(false);\n const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n const options = useMemo(() => {\n if (perPageOptions) return perPageOptions.map(generateOption);\n return getOptions(perPageStep, minPerPage, maxPerPage);\n }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n const btnRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageSize.toString());\n actionRef.current.scrollOptionIntoView(pageSize.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const { width } = useOnElementResize(btnRef);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current.focus();\n }}\n customOffset={[0, 2]}\n startPlacementPreference=\"top-end\"\n actionRef={actionRef}\n minWidth={width + 25}\n maxHeight={300}\n HeaderComp={() => 'Per Page'}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened(true)}\n aria-pressed={isOpened}\n innerRef={btnRef}\n >\n {pageSize} / page\n <ChevronDown color={['brand-primary', '700']} />\n </PaginationDropdownButton>\n </div>\n </DSDropdownMenuV2>\n );\n};\n\nexport default PerPageSelector;\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,iBAAiB,CAAC,UAAU;AAChC,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM;AAAA;AAAA;AAIV,MAAM,aAAa,QAAQ,CAAC,MAAM,KAAK,QAAQ;AAC7C,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI;AACjD,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,UAAU;AAAA;AAGxD,MAAM,kBAKF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,eAAe,SAAS;AACzC,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI;AAC9C,WAAO,WAAW,aAAa,YAAY;AAAA,KAC1C,CAAC,YAAY,YAAY,gBAAgB;AAE5C,QAAM,YAAY,OAA+C;AACjE,QAAM,SAAS,OAA0B;AAEzC,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS;AAC/C,gBAAU,QAAQ,qBAAqB,SAAS;AAAA;AAAA,KAGjD,CAAC;AAEJ,QAAM,EAAE,UAAU,mBAAmB;AAErC,SACE,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAG,SAAS,aAAa;AAAA,IAC1C,eAAe,CAAC,GAAG,kBAAkB;AACnC,uBAAiB,cAAc;AAC/B,kBAAY;AACZ,aAAO,QAAQ;AAAA;AAAA,IAEjB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,QAAQ;AAAA;AAAA,IAEjB,cAAc,CAAC,GAAG;AAAA,IAClB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,YAAY;AAAA,KACxB,qCAAC,0BAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAS,MAAM,YAAY;AAAA,IAC3B,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,qCAAC,aAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAOhD,IAAO,0BAAQ;",
6
+ "names": []
7
+ }
package/esm/props.js CHANGED
@@ -1,30 +1,32 @@
1
- import { PropTypes } from 'react-desc';
2
-
1
+ import * as React from "react";
2
+ import { PropTypes } from "react-desc";
3
3
  const emptyFunc = () => null;
4
-
5
4
  const propTypes = {
6
- pageCount: PropTypes.number.description('How many pages are there'),
7
- pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
8
- canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
9
- canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
10
- pageSize: PropTypes.number.description('The current page size').defaultValue(10),
11
- showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
12
- perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
13
- dsId: PropTypes.string,
14
- value: PropTypes.number,
15
- label: PropTypes.string,
16
- type: PropTypes.oneOf(['single'])
17
- })])).description('The available options for page size').defaultValue([10]),
18
- perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),
19
- minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),
20
- maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),
21
- onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
22
- onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
23
- onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
24
- onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
25
- pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),
26
- pageDetailsTitle: PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue(''),
27
- width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%')
5
+ pageCount: PropTypes.number.description("How many pages are there"),
6
+ pageIndex: PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
7
+ canPreviousPage: PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
8
+ canNextPage: PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
9
+ pageSize: PropTypes.number.description("The current page size").defaultValue(10),
10
+ showPerPageSelector: PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
11
+ perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([
12
+ PropTypes.number,
13
+ PropTypes.shape({
14
+ dsId: PropTypes.string,
15
+ value: PropTypes.number,
16
+ label: PropTypes.string,
17
+ type: PropTypes.oneOf(["single"])
18
+ })
19
+ ])).description("The available options for page size").defaultValue([10]),
20
+ perPageStep: PropTypes.number.description("Step for the per page options").defaultValue(5),
21
+ minPerPage: PropTypes.number.description("Step for the per page options").defaultValue(0),
22
+ maxPerPage: PropTypes.number.description("Step for the per page options").defaultValue(100),
23
+ onPageSizeChange: PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
24
+ onPreviousPage: PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
25
+ onPageChange: PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
26
+ onNextPage: PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
27
+ pageDetails: PropTypes.arrayOf(PropTypes.string).description("Details to provide for each page").defaultValue([]),
28
+ pageDetailsTitle: PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
29
+ width: PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
28
30
  };
29
31
  const defaultProps = {
30
32
  pageIndex: 1,
@@ -41,8 +43,11 @@ const defaultProps = {
41
43
  onNextPage: emptyFunc,
42
44
  onPageChange: emptyFunc,
43
45
  pageDetails: [],
44
- pageDetailsTitle: '',
45
- width: '100%'
46
+ pageDetailsTitle: "",
47
+ width: "100%"
46
48
  };
47
-
48
- export { defaultProps, propTypes };
49
+ export {
50
+ defaultProps,
51
+ propTypes
52
+ };
53
+ //# sourceMappingURL=props.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nconst emptyFunc = (): void => null;\n\nexport const propTypes = {\n pageCount: PropTypes.number.description('How many pages are there'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n width: PropTypes.any.description('Width for the container of the pagination').defaultValue('100%'),\n};\n\nexport const defaultProps = {\n pageIndex: 1,\n canPreviousPage: true,\n canNextPage: true,\n pageSize: 10,\n showPerPageSelector: true,\n perPageOptions: [10],\n perPageStep: 5,\n minPerPage: 0,\n maxPerPage: 100,\n onPageSizeChange: emptyFunc,\n onPreviousPage: emptyFunc,\n onNextPage: emptyFunc,\n onPageChange: emptyFunc,\n pageDetails: [],\n pageDetailsTitle: '',\n width: '100%',\n};\n"],
5
+ "mappings": "AAAA;ACAA;AAEA,MAAM,YAAY,MAAY;AAEvB,MAAM,YAAY;AAAA,EACvB,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,WAAW,UAAU,OAAO,YAAY,8CAA8C,aAAa;AAAA,EACnG,iBAAiB,UAAU,KAAK,YAAY,kDAAkD,aAAa;AAAA,EAC3G,aAAa,UAAU,KAAK,YAAY,8CAA8C,aAAa;AAAA,EACnG,UAAU,UAAU,OAAO,YAAY,yBAAyB,aAAa;AAAA,EAC7E,qBAAqB,UAAU,KAAK,YAAY,qCAAqC,aAAa;AAAA,EAClG,gBAAgB,UAAU,QACxB,UAAU,UAAU;AAAA,IAClB,UAAU;AAAA,IACV,UAAU,MAAM;AAAA,MACd,MAAM,UAAU;AAAA,MAChB,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,MACjB,MAAM,UAAU,MAAM,CAAC;AAAA;AAAA,MAI1B,YAAY,uCACZ,aAAa,CAAC;AAAA,EACjB,aAAa,UAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACxF,YAAY,UAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,YAAY,UAAU,OAAO,YAAY,iCAAiC,aAAa;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,+CAA+C,aAAa,MAAM;AAAA,EAC/G,gBAAgB,UAAU,KACvB,YAAY,wDACZ,aAAa,MAAM;AAAA,EACtB,cAAc,UAAU,KAAK,YAAY,0CAA0C,aAAa,MAAM;AAAA,EACtG,YAAY,UAAU,KAAK,YAAY,gDAAgD,aAAa,MAAM;AAAA,EAC1G,aAAa,UAAU,QAAQ,UAAU,QAAQ,YAAY,oCAAoC,aAAa;AAAA,EAC9G,kBAAkB,UAAU,OACzB,YAAY,+DACZ,aAAa;AAAA,EAChB,OAAO,UAAU,IAAI,YAAY,6CAA6C,aAAa;AAAA;AAGtF,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC;AAAA,EACjB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,OAAO;AAAA;",
6
+ "names": []
7
+ }