@elliemae/ds-pagination 3.0.0-next.9 → 3.0.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.
- package/dist/cjs/Pagination.js +14 -20
- package/dist/cjs/Pagination.js.map +2 -2
- package/dist/cjs/PaginationDataTestID.js +9 -16
- package/dist/cjs/PaginationDataTestID.js.map +1 -1
- package/dist/cjs/hooks/usePaginationSearch.js +9 -16
- package/dist/cjs/hooks/usePaginationSearch.js.map +1 -1
- package/dist/cjs/index.d.js +9 -16
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/index.js +11 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/PageNextButton.js +9 -16
- package/dist/cjs/parts/PageNextButton.js.map +1 -1
- package/dist/cjs/parts/PagePrevButton.js +9 -16
- package/dist/cjs/parts/PagePrevButton.js.map +1 -1
- package/dist/cjs/parts/PaginationContent.js +11 -18
- package/dist/cjs/parts/PaginationContent.js.map +2 -2
- package/dist/cjs/parts/Paginator.js +9 -16
- package/dist/cjs/parts/Paginator.js.map +1 -1
- package/dist/cjs/parts/PerPageSelector.js +9 -16
- package/dist/cjs/parts/PerPageSelector.js.map +1 -1
- package/dist/cjs/props.js +33 -40
- package/dist/cjs/props.js.map +2 -2
- package/dist/cjs/styled.js +10 -16
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/Pagination.js +2 -1
- package/dist/esm/Pagination.js.map +2 -2
- package/dist/esm/PaginationDataTestID.js.map +1 -1
- package/dist/esm/hooks/usePaginationSearch.js.map +1 -1
- package/dist/esm/parts/PageNextButton.js.map +1 -1
- package/dist/esm/parts/PagePrevButton.js.map +1 -1
- package/dist/esm/parts/PaginationContent.js +1 -1
- package/dist/esm/parts/PaginationContent.js.map +2 -2
- package/dist/esm/parts/Paginator.js.map +1 -1
- package/dist/esm/parts/PerPageSelector.js.map +1 -1
- package/dist/esm/props.js +1 -1
- package/dist/esm/props.js.map +2 -2
- package/dist/esm/styled.js +1 -0
- package/dist/esm/styled.js.map +2 -2
- package/package.json +16 -16
|
@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
10
|
};
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
for (let key of __getOwnPropNames(
|
|
15
|
-
if (!__hasOwnProp.call(
|
|
16
|
-
__defProp(
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
16
|
}
|
|
18
|
-
return
|
|
17
|
+
return to;
|
|
19
18
|
};
|
|
20
|
-
var __toESM = (
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
21
|
var PerPageSelector_exports = {};
|
|
29
22
|
__export(PerPageSelector_exports, {
|
|
30
23
|
default: () => PerPageSelector_default
|
|
31
24
|
});
|
|
25
|
+
module.exports = __toCommonJS(PerPageSelector_exports);
|
|
32
26
|
var React = __toESM(require("react"));
|
|
33
27
|
var import_react = __toESM(require("react"));
|
|
34
28
|
var import_memoize_one = __toESM(require("memoize-one"));
|
|
@@ -102,5 +96,4 @@ const PerPageSelector = (props) => {
|
|
|
102
96
|
}))));
|
|
103
97
|
};
|
|
104
98
|
var PerPageSelector_default = PerPageSelector;
|
|
105
|
-
module.exports = __toCommonJS(PerPageSelector_exports);
|
|
106
99
|
//# sourceMappingURL=PerPageSelector.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PerPageSelector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range } 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: number | Record<string, unknown>) => {\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: number, min: number, max: number) => {\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 Required<\n Pick<\n DSPaginationProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\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 = useMemo(() => {\n const maxLength = options.reduce((acc, cur) => Math.max(acc, (cur?.label as string)?.length ?? 0), 0);\n return maxLength * 6 + 90;\n }, [options]);\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={[10, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n minWidth={width}\n maxHeight={300}\n HeaderComp={() => 'Per Page'}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened((prev) => !prev)}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4D;AAC5D,yBAAoB;AACpB,0BAAsB;AACtB,6BAAiC;AACjC,sBAA4B;AAE5B,oBAAyC;AAEzC,MAAM,iBAAiB,CAAC,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEA,MAAM,aAAa,gCAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,+BAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD,CAAC;AAED,MAAM,kBAOF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,eAAe,2BAAS,KAAK;AAC9C,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,0BAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,yBAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,yBAA0B,IAAI;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,0BAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAM,KAAK,OAAkB,UAAU,CAAC,GAAG,CAAC;AACpG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,iBAAiB,GAAG,SAAS,SAAS,IAAI,KAAK;AAAA,IAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,uBAAiB,cAAc,KAAK;AACpC,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,gBAAgB,MAAM;AACpB,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,cAAc,CAAC,IAAI,CAAC;AAAA,IACpB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,mDAAC;AAAA,IAAI,OAAO,EAAE,YAAY,OAAO;AAAA,KAC/B,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,IAC1C,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,mDAAC;AAAA,IAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAChD,CACF,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/props.js
CHANGED
|
@@ -4,61 +4,55 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
10
|
};
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
for (let key of __getOwnPropNames(
|
|
15
|
-
if (!__hasOwnProp.call(
|
|
16
|
-
__defProp(
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
16
|
}
|
|
18
|
-
return
|
|
17
|
+
return to;
|
|
19
18
|
};
|
|
20
|
-
var __toESM = (
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
21
|
var props_exports = {};
|
|
29
22
|
__export(props_exports, {
|
|
30
23
|
defaultProps: () => defaultProps,
|
|
31
24
|
propTypes: () => propTypes
|
|
32
25
|
});
|
|
26
|
+
module.exports = __toCommonJS(props_exports);
|
|
33
27
|
var React = __toESM(require("react"));
|
|
34
|
-
var
|
|
28
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
29
|
const emptyFunc = () => null;
|
|
36
30
|
const propTypes = {
|
|
37
|
-
pageCount:
|
|
38
|
-
pageIndex:
|
|
39
|
-
canPreviousPage:
|
|
40
|
-
canNextPage:
|
|
41
|
-
pageSize:
|
|
42
|
-
showPerPageSelector:
|
|
43
|
-
perPageOptions:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
dsId:
|
|
47
|
-
value:
|
|
48
|
-
label:
|
|
49
|
-
type:
|
|
31
|
+
pageCount: import_ds_utilities.PropTypes.number.description("How many pages are there"),
|
|
32
|
+
pageIndex: import_ds_utilities.PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
|
|
33
|
+
canPreviousPage: import_ds_utilities.PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
|
|
34
|
+
canNextPage: import_ds_utilities.PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
|
|
35
|
+
pageSize: import_ds_utilities.PropTypes.number.description("The current page size").defaultValue(10),
|
|
36
|
+
showPerPageSelector: import_ds_utilities.PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
|
|
37
|
+
perPageOptions: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.oneOfType([
|
|
38
|
+
import_ds_utilities.PropTypes.number,
|
|
39
|
+
import_ds_utilities.PropTypes.shape({
|
|
40
|
+
dsId: import_ds_utilities.PropTypes.string,
|
|
41
|
+
value: import_ds_utilities.PropTypes.number,
|
|
42
|
+
label: import_ds_utilities.PropTypes.string,
|
|
43
|
+
type: import_ds_utilities.PropTypes.oneOf(["single"])
|
|
50
44
|
})
|
|
51
45
|
])).description("The available options for page size").defaultValue([10]),
|
|
52
|
-
perPageStep:
|
|
53
|
-
minPerPage:
|
|
54
|
-
maxPerPage:
|
|
55
|
-
onPageSizeChange:
|
|
56
|
-
onPreviousPage:
|
|
57
|
-
onPageChange:
|
|
58
|
-
onNextPage:
|
|
59
|
-
pageDetails:
|
|
60
|
-
pageDetailsTitle:
|
|
61
|
-
width:
|
|
46
|
+
perPageStep: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(5),
|
|
47
|
+
minPerPage: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(0),
|
|
48
|
+
maxPerPage: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(100),
|
|
49
|
+
onPageSizeChange: import_ds_utilities.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
|
|
50
|
+
onPreviousPage: import_ds_utilities.PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
|
|
51
|
+
onPageChange: import_ds_utilities.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
|
|
52
|
+
onNextPage: import_ds_utilities.PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
|
|
53
|
+
pageDetails: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.string).description("Details to provide for each page").defaultValue([]),
|
|
54
|
+
pageDetailsTitle: import_ds_utilities.PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
|
|
55
|
+
width: import_ds_utilities.PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
|
|
62
56
|
};
|
|
63
57
|
const defaultProps = {
|
|
64
58
|
pageIndex: 1,
|
|
@@ -78,5 +72,4 @@ const defaultProps = {
|
|
|
78
72
|
pageDetailsTitle: "",
|
|
79
73
|
width: "100%"
|
|
80
74
|
};
|
|
81
|
-
module.exports = __toCommonJS(props_exports);
|
|
82
75
|
//# sourceMappingURL=props.js.map
|
package/dist/cjs/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nconst emptyFunc = () => 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} as WeakValidationMap<unknown>;\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAG1B,MAAM,YAAY,MAAM;AAEjB,MAAM,YAAY;AAAA,EACvB,WAAW,8BAAU,OAAO,YAAY,0BAA0B;AAAA,EAClE,WAAW,8BAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,iBAAiB,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,EAC/G,aAAa,8BAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EACvG,UAAU,8BAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,qBAAqB,8BAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,EACtG,gBAAgB,8BAAU,QACxB,8BAAU,UAAU;AAAA,IAClB,8BAAU;AAAA,IACV,8BAAU,MAAM;AAAA,MACd,MAAM,8BAAU;AAAA,MAChB,OAAO,8BAAU;AAAA,MACjB,OAAO,8BAAU;AAAA,MACjB,MAAM,8BAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,IAClC,CAAC;AAAA,EACH,CAAC,CACH,EACG,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,aAAa,8BAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACzF,YAAY,8BAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACxF,YAAY,8BAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,GAAG;AAAA,EAC1F,kBAAkB,8BAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,8BAAU,KACvB,YAAY,sDAAsD,EAClE,aAAa,MAAM,IAAI;AAAA,EAC1B,cAAc,8BAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,YAAY,8BAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,MAAM,IAAI;AAAA,EAC9G,aAAa,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,8BAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AAAA,EAClB,OAAO,8BAAU,IAAI,YAAY,2CAA2C,EAAE,aAAa,MAAM;AACnG;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC,EAAE;AAAA,EACnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,EAClB,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
5
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
7
|
var __export = (target, all) => {
|
|
9
8
|
for (var name in all)
|
|
10
9
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
10
|
};
|
|
12
|
-
var
|
|
13
|
-
if (
|
|
14
|
-
for (let key of __getOwnPropNames(
|
|
15
|
-
if (!__hasOwnProp.call(
|
|
16
|
-
__defProp(
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
16
|
}
|
|
18
|
-
return
|
|
17
|
+
return to;
|
|
19
18
|
};
|
|
20
|
-
var __toESM = (
|
|
21
|
-
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
21
|
var styled_exports = {};
|
|
29
22
|
__export(styled_exports, {
|
|
30
23
|
InvisibleDetail: () => InvisibleDetail,
|
|
@@ -36,6 +29,7 @@ __export(styled_exports, {
|
|
|
36
29
|
PaginationWrapper: () => PaginationWrapper,
|
|
37
30
|
PreviousNextPageButton: () => PreviousNextPageButton
|
|
38
31
|
});
|
|
32
|
+
module.exports = __toCommonJS(styled_exports);
|
|
39
33
|
var React = __toESM(require("react"));
|
|
40
34
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
41
35
|
var import_ds_button = require("@elliemae/ds-button");
|
|
@@ -61,6 +55,7 @@ const PaginationContainer = (0, import_styled_components.default)(import_ds_grid
|
|
|
61
55
|
max-width: 100%;
|
|
62
56
|
align-items: center;
|
|
63
57
|
box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);
|
|
58
|
+
position: relative;
|
|
64
59
|
`;
|
|
65
60
|
const PaginationWrapper = import_styled_components.default.div`
|
|
66
61
|
display: flex;
|
|
@@ -126,5 +121,4 @@ const PreviousNextPageButton = (0, import_styled_components.default)(import_ds_b
|
|
|
126
121
|
${styledFocusCss}
|
|
127
122
|
}
|
|
128
123
|
`;
|
|
129
|
-
module.exports = __toCommonJS(styled_exports);
|
|
130
124
|
//# sourceMappingURL=styled.js.map
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport {\n space,\n typography,\n TypographyProps,\n SpaceProps,\n sizing,\n SizingProps,\n layout,\n LayoutProps,\n} from '@xstyled/styled-components';\nimport { css } from '@elliemae/ds-system';\n\nconst styledFocusCss = css`\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 ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nexport const PaginationContainer = styled(Grid)`\n height: 42px;\n max-width: 100%;\n align-items: center;\n box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n`;\n\nexport const PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral[300]};\n width: 1px;\n height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps & SpaceProps & SizingProps & LayoutProps>`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n ${typography}\n ${space}\n ${sizing}\n ${layout}\n position: relative;\n`;\n\nexport const InvisibleDetail = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\n`;\n\nexport const PaginationDetail = styled.span`\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding-left: 16px;\n padding-right: 16px;\n grid-gap: 8px;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n cursor: pointer;\n border-radius: 0;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n :focus {\n ${styledFocusCss}\n }\n white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n place-items: center;\n position: relative;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n :focus {\n ${styledFocusCss}\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport {\n space,\n typography,\n TypographyProps,\n SpaceProps,\n sizing,\n SizingProps,\n layout,\n LayoutProps,\n} from '@xstyled/styled-components';\nimport { css } from '@elliemae/ds-system';\n\nconst styledFocusCss = css`\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 ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nexport const PaginationContainer = styled(Grid)`\n height: 42px;\n max-width: 100%;\n align-items: center;\n box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n position: relative;\n`;\n\nexport const PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral[300]};\n width: 1px;\n height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps & SpaceProps & SizingProps & LayoutProps>`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n ${typography}\n ${space}\n ${sizing}\n ${layout}\n position: relative;\n`;\n\nexport const InvisibleDetail = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\n`;\n\nexport const PaginationDetail = styled.span`\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding-left: 16px;\n padding-right: 16px;\n grid-gap: 8px;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n cursor: pointer;\n border-radius: 0;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n :focus {\n ${styledFocusCss}\n }\n white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n place-items: center;\n position: relative;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n :focus {\n ${styledFocusCss}\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA2B;AAC3B,+BAAmB;AACnB,gCASO;AACP,uBAAoB;AAEpB,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,sBAAsB,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,oBAAoB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,sBAAsB,sCAAO,mBAAI;AAAA,sBACxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,qBAAqB,iCAAO;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,mBAAmB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,2BAA2B,sCAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,MAE9C;AAAA;AAAA;AAAA;AAKC,MAAM,yBAAyB,sCAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB;AAAA;AAAA,MAEnD;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Pagination.js
CHANGED
|
@@ -16,7 +16,7 @@ var __spreadValues = (a, b) => {
|
|
|
16
16
|
};
|
|
17
17
|
import * as React from "react";
|
|
18
18
|
import React2 from "react";
|
|
19
|
-
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-
|
|
19
|
+
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
20
20
|
import { PaginationContent } from "./parts/PaginationContent";
|
|
21
21
|
import { propTypes, defaultProps } from "./props";
|
|
22
22
|
const DSPagination = (props) => {
|
|
@@ -25,6 +25,7 @@ const DSPagination = (props) => {
|
|
|
25
25
|
return /* @__PURE__ */ React2.createElement(PaginationContent, __spreadValues({}, propsWithDefault));
|
|
26
26
|
};
|
|
27
27
|
DSPagination.propTypes = propTypes;
|
|
28
|
+
DSPagination.displayName = "DSPagination";
|
|
28
29
|
const DSPaginationWithSchema = describe(DSPagination).description("DSPagination");
|
|
29
30
|
DSPaginationWithSchema.propTypes = propTypes;
|
|
30
31
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Pagination.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAGA,MAAM,eAAuD,CAAC,UAAU;AACtE,QAAM,mBAAmB,6BAA6B,OAAO;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { PaginationContent } from './parts/PaginationContent';\nimport { propTypes, defaultProps } from './props';\nimport { DSPaginationProps } from './index.d';\n\nconst DSPagination: React.ComponentType<DSPaginationProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = propTypes;\nDSPagination.displayName = 'DSPagination';\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = propTypes;\n\nexport { DSPagination, DSPaginationWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAGA,MAAM,eAAuD,CAAC,UAAU;AACtE,QAAM,mBAAmB,6BAA6B,OAAO,YAAY;AACzE,iCAA+B,kBAAkB,SAAS;AAE1D,SAAO,qCAAC,sCAAsB,iBAAkB;AAClD;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY,EAAE,YAAY,cAAc;AAChF,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PaginationDataTestID.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const PAGINATION_DATA_TESTID = {\n PREVIOUS_BUTTON: 'data-table-pagination-prev-button',\n NEXT_BUTTON: 'data-table-pagination-next-button',\n CONTAINER: 'data-table-pagination-container',\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,yBAAyB;AAAA,EACpC,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,WAAW;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/usePaginationSearch.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const usePaginationSearch = (\n pageCount: number,\n actionRef: React.MutableRefObject<any>,\n): React.KeyboardEventHandler => {\n const [searchValue, setSearchValue] = useState('');\n const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);\n\n const timeoutRef = useRef<NodeJS.Timeout>(null);\n\n useEffect(() => {\n if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {\n actionRef.current.setActiveDescendant(searchValue);\n actionRef.current.scrollOptionIntoView(searchValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [searchValue]);\n\n const onKeyDown = useCallback(\n (e) => {\n if (e.code.startsWith('Digit')) {\n if (shouldResetSearchValue) setSearchValue(e.key);\n else setSearchValue((prevValue) => prevValue + e.key);\n\n setShouldResetSearchValue(false);\n clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n setShouldResetSearchValue(true);\n }, 1000);\n }\n },\n [shouldResetSearchValue],\n );\n\n return onKeyDown;\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AAEO,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,kBAAkB,SAAS;
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;AACjD,QAAM,CAAC,wBAAwB,6BAA6B,SAAS,IAAI;AAEzE,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,gBAAgB,MAAM,OAAO,SAAS,aAAa,EAAE,KAAK,WAAW;AACvE,gBAAU,QAAQ,oBAAoB,WAAW;AACjD,gBAAU,QAAQ,qBAAqB,WAAW;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY,YAChB,CAAC,MAAM;AACL,QAAI,EAAE,KAAK,WAAW,OAAO,GAAG;AAC9B,UAAI;AAAwB,uBAAe,EAAE,GAAG;AAAA;AAC3C,uBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,gCAA0B,KAAK;AAC/B,mBAAa,WAAW,OAAO;AAC/B,iBAAW,UAAU,WAAW,MAAM;AACpC,kCAA0B,IAAI;AAAA,MAChC,GAAG,GAAI;AAAA,IACT;AAAA,EACF,GACA,CAAC,sBAAsB,CACzB;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PageNextButton.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PageNextButton: React.ComponentType<Required<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>>> = ({\n onNextPage,\n canNextPage,\n}) => (\n <PreviousNextPageButton\n onClick={() => {\n if (canNextPage) onNextPage();\n }}\n disabled={!canNextPage}\n buttonType=\"raw\"\n data-testid={PAGINATION_DATA_TESTID.NEXT_BUTTON}\n HeaderComp={() => 'Page'}\n >\n <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,iBAAuG,CAAC;AAAA,EACnH;AAAA,EACA;AAAA,MAEA,qCAAC
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,iBAAuG,CAAC;AAAA,EACnH;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC,SAAS,MAAM;AACb,QAAI;AAAa,iBAAW;AAAA,EAC9B;AAAA,EACA,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,uBAAuB;AAAA,EACpC,YAAY,MAAM;AAAA,GAElB,qCAAC;AAAA,EAAa,OAAO,cAAc,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK;AAAA,CAAG,CACpF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PagePrevButton.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { PAGINATION_DATA_TESTID } from '../PaginationDataTestID';\nimport { PreviousNextPageButton } from '../styled';\nimport { DSPaginationProps } from '../index.d';\n\nexport const PagePrevButton: React.ComponentType<\n Required<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>>\n> = ({ onPreviousPage, canPreviousPage }) => (\n <PreviousNextPageButton\n onClick={() => {\n if (canPreviousPage) onPreviousPage();\n }}\n disabled={!canPreviousPage}\n buttonType=\"raw\"\n data-testid={PAGINATION_DATA_TESTID.PREVIOUS_BUTTON}\n >\n <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,iBAET,CAAC,EAAE,gBAAgB,sBACrB,qCAAC
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,iBAET,CAAC,EAAE,gBAAgB,sBACrB,qCAAC;AAAA,EACC,SAAS,MAAM;AACb,QAAI;AAAiB,qBAAe;AAAA,EACtC;AAAA,EACA,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,uBAAuB;AAAA,GAEpC,qCAAC;AAAA,EAAY,OAAO,kBAAkB,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK;AAAA,CAAG,CACvF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
import * as React from "react";
|
|
18
18
|
import React2 from "react";
|
|
19
19
|
import { Grid } from "@elliemae/ds-grid";
|
|
20
|
-
import { useGetGlobalAttributes } from "@elliemae/ds-
|
|
20
|
+
import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
|
|
21
21
|
import { PaginationContainer, PaginationSeparator, PaginationWrapper } from "../styled";
|
|
22
22
|
import PerPageSelector from "./PerPageSelector";
|
|
23
23
|
import Paginator from "./Paginator";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 { useGetGlobalAttributes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,uBAAuB;
|
|
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 { useGetGlobalAttributes } from '@elliemae/ds-utilities';\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<Required<DSPaginationProps>> = (props) => {\n const {\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 } = props;\n\n const globalAttributes = useGetGlobalAttributes(props);\n\n return (\n <PaginationContainer\n justifyContent=\"center\"\n alignItems=\"center\"\n width={width.toString()}\n data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n cols={['minmax(auto, 80%)']}\n {...globalAttributes}\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 mr=\"32px\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n <PagePrevButton canPreviousPage={canPreviousPage} onPreviousPage={onPreviousPage} />\n <Paginator\n pageCount={pageCount}\n pageIndex={pageIndex}\n onPageChange={onPageChange}\n pageDetails={pageDetails}\n pageDetailsTitle={pageDetailsTitle}\n />\n <PageNextButton canNextPage={canNextPage} onNextPage={onNextPage} />\n </Grid>\n </PaginationWrapper>\n </PaginationContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,oBAAsE,CAAC,UAAU;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,uBAAuB,KAAK;AAErD,SACE,qCAAC;AAAA,IACC,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAO,MAAM,SAAS;AAAA,IACtB,eAAa,uBAAuB;AAAA,IACpC,MAAM,CAAC,mBAAmB;AAAA,KACtB,mBAEJ,qCAAC,yBACE,uBACC,4DACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,GACF,GACA,qCAAC;AAAA,IAAoB,IAAI;AAAA,GAAI,CAC/B,GAEF,qCAAC;AAAA,IAAK,IAAG;AAAA,IAAO,YAAW;AAAA,IAAS,OAAO,EAAE,cAAc,SAAS;AAAA,KAClE,qCAAC;AAAA,IAAe;AAAA,IAAkC;AAAA,GAAgC,GAClF,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,GACF,GACA,qCAAC;AAAA,IAAe;AAAA,IAA0B;AAAA,GAAwB,CACpE,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Paginator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useLayoutEffect, 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 { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n InvisibleDetail,\n PaginationBoldText,\n PaginationDetail,\n PaginationDropdownButton,\n PaginationSeparator,\n} from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\n\ninterface PaginatorPropsT {\n pageIndex: number;\n pageCount: number;\n onPageChange: (page: number) => void;\n pageDetails: string[];\n pageDetailsTitle: string;\n}\n\nconst Paginator: React.ComponentType<PaginatorPropsT> = (props) => {\n const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const pageInfoRef = useRef<HTMLDivElement>(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 [detailWidth, setDetailWidth] = useState(0);\n\n useLayoutEffect(() => {\n const invisibleDetails = [\n ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n ] as HTMLDivElement[];\n const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n setDetailWidth(maxWidth);\n }, [pageDetails]);\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={[-23, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n onKeyDown={onKeyDown}\n minWidth={pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90}\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((prev) => !prev)} innerRef={btnRef}>\n <Grid\n gutter=\"xxs\"\n alignItems=\"center\"\n cols={\n pageDetails.length !== 0\n ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content']\n : ['auto', 'min-content']\n }\n >\n <Grid alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef} style={{ gridAutoFlow: 'column' }}>\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\" w={detailWidth} mr=\"xxs\" display=\"grid\">\n <SimpleTruncatedTooltipText value={pageDetails[pageIndex]}>\n {pageDetails[pageIndex]}\n </SimpleTruncatedTooltipText>\n {pageDetails.map((pageDetail) => (\n <InvisibleDetail data-testid=\"ds-pagination-invisible-detail-for-width-calc\">\n {pageDetail}\n </InvisibleDetail>\n ))}\n </PaginationBoldText>\n </>\n )}\n <ChevronDown color={['brand-primary', '700']} />\n </Grid>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAUA,MAAM,YAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,WAAW,WAAW,cAAc,aAAa,qBAAqB;AAE9E,QAAM,CAAC,UAAU,eAAe,SAAS;
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAUA,MAAM,YAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,WAAW,WAAW,cAAc,aAAa,qBAAqB;AAE9E,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAE9C,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,cAAc,OAAuB,IAAI;AAE/C,QAAM,EAAE,OAAO,aAAa,mBAAmB,MAAM;AACrD,QAAM,EAAE,OAAO,aAAa,mBAAmB,WAAW;AAE1D,QAAM,UAAU,QACd,MACE,IAAI,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAC7C,UAAM,SAAkC;AAAA,MACtC,MAAO,SAAQ,GAAG,SAAS;AAAA,MAC3B,OAAQ,SAAQ,GAAG,SAAS;AAAA,MAC5B,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA,IACR;AACA,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,MACd,qCAAC;AAAA,QAAK,MAAM,CAAC,QAAQ,GAAG,WAAW,QAAQ,MAAM;AAAA,QAAG,QAAO;AAAA,QAAM,YAAW;AAAA,SACzE,cAAc,QAAQ,qCAAC;AAAA,QAAU,MAAK;AAAA,QAAI,OAAO,CAAC,iBAAiB,KAAK;AAAA,OAAG,IAAK,qCAAC,WAAI,GACtF,qCAAC,cAAM,QAAQ,CAAE,GACjB,qCAAC;AAAA,QACC,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,UAAU;AAAA,QACZ;AAAA,SAEC,YAAY,MACf,CACF;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,CAAC,GACH,CAAC,WAAW,aAAa,WAAW,QAAQ,CAC9C;AAEA,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAqB,aAAY,GAAG,SAAS,CAAC;AAChE,gBAAU,QAAQ,qBAAsB,aAAY,GAAG,SAAS,CAAC;AAAA,IACnE;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;AAEhD,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,SACE,4DACE,qCAAC,yBAAoB,GACrB,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,iBAAiB,GAAI,aAAY,GAAG,SAAS,IAAI,KAAK;AAAA,IACtD,eAAe,CAAC,GAAG,kBAAkB;AACnC,mBAAa,cAAc,KAAK;AAChC,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,gBAAgB,MAAM;AACpB,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,cAAc,CAAC,KAAK,CAAC;AAAA,IACrB,0BAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,UAAU,YAAY,WAAW,IAAI,WAAW,KAAK,UAAU,SAAS,EAAE,SAAS,IAAI;AAAA,IACvF,WAAW;AAAA,IACX,YAAY,MACV,qBAAqB,KACnB,qCAAC;AAAA,MAAK,MAAM,CAAC,GAAG,WAAW,QAAQ,OAAO,MAAM;AAAA,OAC9C,qCAAC;AAAA,MAAK,OAAO,EAAE,YAAY,MAAM;AAAA,OAAG,MAAI,GACxC,qCAAC;AAAA,MAAoB,QAAO;AAAA,KAAO,GACnC,qCAAC,cAAM,gBAAiB,CAC1B,IAEA;AAAA,KAIJ,qCAAC;AAAA,IAAyB,YAAW;AAAA,IAAM,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,IAAG,UAAU;AAAA,KAChG,qCAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,MACE,YAAY,WAAW,IACnB,CAAC,QAAQ,eAAe,oBAAoB,aAAa,IACzD,CAAC,QAAQ,aAAa;AAAA,KAG5B,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,QAAO;AAAA,IAAO,KAAK;AAAA,IAAa,OAAO,EAAE,cAAc,SAAS;AAAA,KACxF,qCAAC;AAAA,IAAmB,UAAS;AAAA,KAAQ,YAAY,CAAE,GAAqB,OAAI,SAC9E,GACC,YAAY,WAAW,KACtB,4DACE,qCAAC;AAAA,IAAoB,QAAO;AAAA,IAAO,IAAG;AAAA,GAAM,GAC5C,qCAAC;AAAA,IAAmB,UAAS;AAAA,IAAO,GAAG;AAAA,IAAa,IAAG;AAAA,IAAM,SAAQ;AAAA,KACnE,qCAAC;AAAA,IAA2B,OAAO,YAAY;AAAA,KAC5C,YAAY,UACf,GACC,YAAY,IAAI,CAAC,eAChB,qCAAC;AAAA,IAAgB,eAAY;AAAA,KAC1B,UACH,CACD,CACH,CACF,GAEF,qCAAC;AAAA,IAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAChD,CACF,CACF,GACA,qCAAC,yBAAoB,CACvB;AAEJ;AAEA,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PerPageSelector.tsx"],
|
|
4
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 } 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: number | Record<string, unknown>) => {\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: number, min: number, max: number) => {\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 Required<\n Pick<\n DSPaginationProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\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 = useMemo(() => {\n const maxLength = options.reduce((acc, cur) => Math.max(acc, (cur?.label as string)?.length ?? 0), 0);\n return maxLength * 6 + 90;\n }, [options]);\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={[10, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n minWidth={width}\n maxHeight={300}\n HeaderComp={() => 'Per Page'}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened((prev) => !prev)}\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,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,iBAAiB,CAAC,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM;AAAA,EACR;AACF;AAEA,MAAM,aAAa,QAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD,CAAC;AAED,MAAM,kBAOF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAM,KAAK,OAAkB,UAAU,CAAC,GAAG,CAAC;AACpG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA,iBAAiB,GAAG,SAAS,SAAS,IAAI,KAAK;AAAA,IAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,uBAAiB,cAAc,KAAK;AACpC,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,gBAAgB,MAAM;AACpB,kBAAY,KAAK;AACjB,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,cAAc,CAAC,IAAI,CAAC;AAAA,IACpB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,qCAAC;AAAA,IAAI,OAAO,EAAE,YAAY,OAAO;AAAA,KAC/B,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,IAC1C,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,qCAAC;AAAA,IAAY,OAAO,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAChD,CACF,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/props.js
CHANGED
package/dist/esm/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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 '@elliemae/ds-
|
|
5
|
-
"mappings": "AAAA;ACAA;AAGA,MAAM,YAAY,MAAM;AAEjB,MAAM,YAAY;AAAA,EACvB,WAAW,UAAU,OAAO,YAAY;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { WeakValidationMap } from 'react';\n\nconst emptyFunc = () => 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} as WeakValidationMap<unknown>;\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;AAGA,MAAM,YAAY,MAAM;AAEjB,MAAM,YAAY;AAAA,EACvB,WAAW,UAAU,OAAO,YAAY,0BAA0B;AAAA,EAClE,WAAW,UAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,iBAAiB,UAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,EAC/G,aAAa,UAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EACvG,UAAU,UAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,qBAAqB,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,EACtG,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,QAAQ,CAAC;AAAA,IAClC,CAAC;AAAA,EACH,CAAC,CACH,EACG,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,aAAa,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACzF,YAAY,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACxF,YAAY,UAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,GAAG;AAAA,EAC1F,kBAAkB,UAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,gBAAgB,UAAU,KACvB,YAAY,sDAAsD,EAClE,aAAa,MAAM,IAAI;AAAA,EAC1B,cAAc,UAAU,KAAK,YAAY,wCAAwC,EAAE,aAAa,MAAM,IAAI;AAAA,EAC1G,YAAY,UAAU,KAAK,YAAY,8CAA8C,EAAE,aAAa,MAAM,IAAI;AAAA,EAC9G,aAAa,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,kCAAkC,EAAE,aAAa,CAAC,CAAC;AAAA,EAChH,kBAAkB,UAAU,OACzB,YAAY,6DAA6D,EACzE,aAAa,EAAE;AAAA,EAClB,OAAO,UAAU,IAAI,YAAY,2CAA2C,EAAE,aAAa,MAAM;AACnG;AAEO,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,qBAAqB;AAAA,EACrB,gBAAgB,CAAC,EAAE;AAAA,EACnB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,EAClB,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport {\n space,\n typography,\n TypographyProps,\n SpaceProps,\n sizing,\n SizingProps,\n layout,\n LayoutProps,\n} from '@xstyled/styled-components';\nimport { css } from '@elliemae/ds-system';\n\nconst styledFocusCss = css`\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 ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nexport const PaginationContainer = styled(Grid)`\n height: 42px;\n max-width: 100%;\n align-items: center;\n box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n`;\n\nexport const PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral[300]};\n width: 1px;\n height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps & SpaceProps & SizingProps & LayoutProps>`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n ${typography}\n ${space}\n ${sizing}\n ${layout}\n position: relative;\n`;\n\nexport const InvisibleDetail = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\n`;\n\nexport const PaginationDetail = styled.span`\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding-left: 16px;\n padding-right: 16px;\n grid-gap: 8px;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n cursor: pointer;\n border-radius: 0;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n :focus {\n ${styledFocusCss}\n }\n white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n place-items: center;\n position: relative;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n :focus {\n ${styledFocusCss}\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport {\n space,\n typography,\n TypographyProps,\n SpaceProps,\n sizing,\n SizingProps,\n layout,\n LayoutProps,\n} from '@xstyled/styled-components';\nimport { css } from '@elliemae/ds-system';\n\nconst styledFocusCss = css`\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 ${({ theme }) => theme.colors.brand[700]};\n pointer-events: none;\n z-index: 7;\n }\n`;\n\nexport const PaginationContainer = styled(Grid)`\n height: 42px;\n max-width: 100%;\n align-items: center;\n box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n position: relative;\n`;\n\nexport const PaginationWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n background-color: ${(props) => props.theme.colors.neutral[300]};\n width: 1px;\n height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps & SpaceProps & SizingProps & LayoutProps>`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n ${typography}\n ${space}\n ${sizing}\n ${layout}\n position: relative;\n`;\n\nexport const InvisibleDetail = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\n`;\n\nexport const PaginationDetail = styled.span`\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n position: relative;\n padding-left: 16px;\n padding-right: 16px;\n grid-gap: 8px;\n font-size: 13px;\n color: ${(props) => props.theme.colors.neutral[700]};\n cursor: pointer;\n border-radius: 0;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n :focus {\n ${styledFocusCss}\n }\n white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n height: 42px;\n display: grid;\n place-items: center;\n position: relative;\n padding-left: 8px;\n padding-right: 8px;\n border-radius: 0;\n cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n :focus {\n ${styledFocusCss}\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,sBAAsB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,sBAAsB,OAAO,IAAI;AAAA,sBACxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,qBAAqB,OAAO;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,2BAA2B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,MAE9C;AAAA;AAAA;AAAA;AAKC,MAAM,yBAAyB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB;AAAA;AAAA,MAEnD;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|