@elliemae/ds-pagination 3.0.0-alpha.0 → 3.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Pagination.js +16 -5
- package/dist/cjs/Pagination.js.map +2 -2
- package/dist/cjs/index.d.js.map +1 -1
- package/dist/cjs/parts/PageNextButton.js.map +2 -2
- package/dist/cjs/parts/PagePrevButton.js +1 -4
- package/dist/cjs/parts/PagePrevButton.js.map +2 -2
- package/dist/cjs/parts/PaginationContent.js +69 -50
- package/dist/cjs/parts/PaginationContent.js.map +2 -2
- package/dist/cjs/parts/Paginator.js +28 -11
- package/dist/cjs/parts/Paginator.js.map +2 -2
- package/dist/cjs/parts/PerPageSelector.js +3 -3
- package/dist/cjs/parts/PerPageSelector.js.map +2 -2
- package/dist/cjs/props.js +24 -24
- package/dist/cjs/props.js.map +2 -2
- package/dist/cjs/styled.js +35 -18
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/Pagination.js +18 -5
- package/dist/esm/Pagination.js.map +2 -2
- package/dist/esm/parts/PageNextButton.js.map +2 -2
- package/dist/esm/parts/PagePrevButton.js +1 -4
- package/dist/esm/parts/PagePrevButton.js.map +2 -2
- package/dist/esm/parts/PaginationContent.js +71 -50
- package/dist/esm/parts/PaginationContent.js.map +2 -2
- package/dist/esm/parts/Paginator.js +35 -13
- package/dist/esm/parts/Paginator.js.map +2 -2
- package/dist/esm/parts/PerPageSelector.js +3 -3
- package/dist/esm/parts/PerPageSelector.js.map +2 -2
- package/dist/esm/props.js +1 -1
- package/dist/esm/props.js.map +2 -2
- package/dist/esm/styled.js +41 -19
- package/dist/esm/styled.js.map +2 -2
- package/package.json +9 -7
- package/dist/types/Pagination.d.ts +0 -5
- package/dist/types/PaginationDataTestID.d.ts +0 -5
- package/dist/types/hooks/usePaginationSearch.d.ts +0 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/parts/PageNextButton.d.ts +0 -3
- package/dist/types/parts/PagePrevButton.d.ts +0 -3
- package/dist/types/parts/PaginationContent.d.ts +0 -3
- package/dist/types/parts/Paginator.d.ts +0 -4
- package/dist/types/parts/PerPageSelector.d.ts +0 -4
- package/dist/types/props.d.ts +0 -75
package/dist/cjs/styled.js
CHANGED
|
@@ -27,8 +27,10 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
27
27
|
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
28
|
var styled_exports = {};
|
|
29
29
|
__export(styled_exports, {
|
|
30
|
+
InvisibleDetail: () => InvisibleDetail,
|
|
30
31
|
PaginationBoldText: () => PaginationBoldText,
|
|
31
32
|
PaginationContainer: () => PaginationContainer,
|
|
33
|
+
PaginationDetail: () => PaginationDetail,
|
|
32
34
|
PaginationDropdownButton: () => PaginationDropdownButton,
|
|
33
35
|
PaginationSeparator: () => PaginationSeparator,
|
|
34
36
|
PaginationWrapper: () => PaginationWrapper,
|
|
@@ -39,24 +41,23 @@ var import_ds_grid = require("@elliemae/ds-grid");
|
|
|
39
41
|
var import_ds_button = require("@elliemae/ds-button");
|
|
40
42
|
var import_styled_components = __toESM(require("styled-components"));
|
|
41
43
|
var import_styled_components2 = require("@xstyled/styled-components");
|
|
42
|
-
|
|
43
|
-
const styledFocusCss =
|
|
44
|
-
&:after {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
44
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
45
|
+
const styledFocusCss = import_ds_system.css`
|
|
46
|
+
&:after {
|
|
47
|
+
display: block;
|
|
48
|
+
content: ' ';
|
|
49
|
+
position: absolute;
|
|
50
|
+
top: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
right: 0;
|
|
53
|
+
bottom: 0;
|
|
54
|
+
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
55
|
+
pointer-events: none;
|
|
56
|
+
z-index: 7;
|
|
57
|
+
}
|
|
58
|
+
`;
|
|
56
59
|
const PaginationContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
57
|
-
padding: 0 ${(props) => props.theme.space.xs};
|
|
58
60
|
height: 42px;
|
|
59
|
-
width: ${(props) => sizeToCss(props.width) || "100%"};
|
|
60
61
|
max-width: 100%;
|
|
61
62
|
align-items: center;
|
|
62
63
|
box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);
|
|
@@ -65,7 +66,6 @@ const PaginationWrapper = import_styled_components.default.div`
|
|
|
65
66
|
display: flex;
|
|
66
67
|
justify-content: center;
|
|
67
68
|
align-items: center;
|
|
68
|
-
margin: 0 32px;
|
|
69
69
|
`;
|
|
70
70
|
const PaginationSeparator = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
71
71
|
background-color: ${(props) => props.theme.colors.neutral[300]};
|
|
@@ -76,11 +76,27 @@ const PaginationBoldText = import_styled_components.default.span`
|
|
|
76
76
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
77
77
|
${import_styled_components2.typography}
|
|
78
78
|
${import_styled_components2.space}
|
|
79
|
+
${import_styled_components2.sizing}
|
|
80
|
+
${import_styled_components2.layout}
|
|
79
81
|
position: relative;
|
|
80
82
|
`;
|
|
83
|
+
const InvisibleDetail = import_styled_components.default.div`
|
|
84
|
+
opacity: 0;
|
|
85
|
+
white-space: nowrap;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
text-overflow: ellipsis;
|
|
88
|
+
position: absolute;
|
|
89
|
+
`;
|
|
90
|
+
const PaginationDetail = import_styled_components.default.span`
|
|
91
|
+
text-align: left;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
text-overflow: ellipsis;
|
|
95
|
+
`;
|
|
81
96
|
const PaginationDropdownButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
82
97
|
height: 42px;
|
|
83
|
-
display:
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-auto-flow: column;
|
|
84
100
|
justify-content: center;
|
|
85
101
|
align-items: center;
|
|
86
102
|
position: relative;
|
|
@@ -95,6 +111,7 @@ const PaginationDropdownButton = (0, import_styled_components.default)(import_ds
|
|
|
95
111
|
:focus {
|
|
96
112
|
${styledFocusCss}
|
|
97
113
|
}
|
|
114
|
+
white-space: nowrap;
|
|
98
115
|
`;
|
|
99
116
|
const PreviousNextPageButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
|
|
100
117
|
height: 42px;
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA2B;AAC3B,+BAAmB;AACnB,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,oBAAoB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,sBAAsB,sCAAO;AAAA,sBACpB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWpC,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQjC,CAAC,UAAW,MAAM,WAAW,gBAAgB;AAAA;AAAA,MAEnD;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Pagination.js
CHANGED
|
@@ -1,15 +1,28 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
18
|
import React2 from "react";
|
|
3
|
-
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
4
|
-
import { describe } from "react-desc";
|
|
19
|
+
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
|
5
20
|
import { PaginationContent } from "./parts/PaginationContent";
|
|
6
21
|
import { propTypes, defaultProps } from "./props";
|
|
7
22
|
const DSPagination = (props) => {
|
|
8
23
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
9
24
|
useValidateTypescriptPropTypes(propsWithDefault, propTypes);
|
|
10
|
-
return /* @__PURE__ */ React2.createElement(PaginationContent, {
|
|
11
|
-
...propsWithDefault
|
|
12
|
-
});
|
|
25
|
+
return /* @__PURE__ */ React2.createElement(PaginationContent, __spreadValues({}, propsWithDefault));
|
|
13
26
|
};
|
|
14
27
|
DSPagination.propTypes = propTypes;
|
|
15
28
|
const DSPaginationWithSchema = describe(DSPagination).description("DSPagination");
|
|
@@ -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 { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\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;\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;AAC7D,iCAA+B,kBAAkB;AAEjD,SAAO,qCAAC,mBAAD,mBAAuB;AAAA;AAGhC,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS,cAAc,YAAY;AAClE,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PageNextButton.tsx"],
|
|
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<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,
|
|
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,wBAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAa;AAAA;AAAA,EAEnB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,uBAAuB;AAAA,EACpC,YAAY,MAAM;AAAA,GAElB,qCAAC,cAAD;AAAA,EAAc,OAAO,cAAc,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,10 +3,7 @@ import React2 from "react";
|
|
|
3
3
|
import { ChevronLeft } from "@elliemae/ds-icons";
|
|
4
4
|
import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
|
|
5
5
|
import { PreviousNextPageButton } from "../styled";
|
|
6
|
-
const PagePrevButton = ({
|
|
7
|
-
onPreviousPage,
|
|
8
|
-
canPreviousPage
|
|
9
|
-
}) => /* @__PURE__ */ React2.createElement(PreviousNextPageButton, {
|
|
6
|
+
const PagePrevButton = ({ onPreviousPage, canPreviousPage }) => /* @__PURE__ */ React2.createElement(PreviousNextPageButton, {
|
|
10
7
|
onClick: () => {
|
|
11
8
|
if (canPreviousPage)
|
|
12
9
|
onPreviousPage();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PagePrevButton.tsx"],
|
|
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<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,
|
|
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,wBAAD;AAAA,EACE,SAAS,MAAM;AACb,QAAI;AAAiB;AAAA;AAAA,EAEvB,UAAU,CAAC;AAAA,EACX,YAAW;AAAA,EACX,eAAa,uBAAuB;AAAA,GAEpC,qCAAC,aAAD;AAAA,EAAa,OAAO,kBAAkB,CAAC,iBAAiB,SAAS,CAAC,WAAW;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,62 +1,83 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
1
17
|
import * as React from "react";
|
|
2
18
|
import React2 from "react";
|
|
3
19
|
import { Grid } from "@elliemae/ds-grid";
|
|
20
|
+
import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
4
21
|
import { PaginationContainer, PaginationSeparator, PaginationWrapper } from "../styled";
|
|
5
22
|
import PerPageSelector from "./PerPageSelector";
|
|
6
23
|
import Paginator from "./Paginator";
|
|
7
24
|
import { PAGINATION_DATA_TESTID } from "../PaginationDataTestID";
|
|
8
25
|
import { PagePrevButton } from "./PagePrevButton";
|
|
9
26
|
import { PageNextButton } from "./PageNextButton";
|
|
10
|
-
const PaginationContent = ({
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}, /* @__PURE__ */ React2.createElement(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
})
|
|
27
|
+
const PaginationContent = (props) => {
|
|
28
|
+
const {
|
|
29
|
+
pageIndex,
|
|
30
|
+
pageSize,
|
|
31
|
+
canPreviousPage,
|
|
32
|
+
canNextPage,
|
|
33
|
+
onPageSizeChange,
|
|
34
|
+
onNextPage,
|
|
35
|
+
onPreviousPage,
|
|
36
|
+
onPageChange,
|
|
37
|
+
pageCount,
|
|
38
|
+
showPerPageSelector,
|
|
39
|
+
pageDetails,
|
|
40
|
+
pageDetailsTitle,
|
|
41
|
+
perPageOptions,
|
|
42
|
+
maxPerPage,
|
|
43
|
+
perPageStep,
|
|
44
|
+
minPerPage,
|
|
45
|
+
width
|
|
46
|
+
} = props;
|
|
47
|
+
const globalAttributes = useGetGlobalAttributes(props);
|
|
48
|
+
return /* @__PURE__ */ React2.createElement(PaginationContainer, __spreadValues({
|
|
49
|
+
justifyContent: "center",
|
|
50
|
+
alignItems: "center",
|
|
51
|
+
width: width.toString(),
|
|
52
|
+
"data-testid": PAGINATION_DATA_TESTID.CONTAINER,
|
|
53
|
+
cols: ["minmax(auto, 80%)"]
|
|
54
|
+
}, globalAttributes), /* @__PURE__ */ React2.createElement(PaginationWrapper, null, showPerPageSelector && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PerPageSelector, {
|
|
55
|
+
pageSize,
|
|
56
|
+
onPageSizeChange,
|
|
57
|
+
perPageOptions,
|
|
58
|
+
maxPerPage,
|
|
59
|
+
perPageStep,
|
|
60
|
+
minPerPage
|
|
61
|
+
}), /* @__PURE__ */ React2.createElement(PaginationSeparator, {
|
|
62
|
+
mr: 24
|
|
63
|
+
})), /* @__PURE__ */ React2.createElement(Grid, {
|
|
64
|
+
mr: "32px",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
style: { gridAutoFlow: "column" }
|
|
67
|
+
}, /* @__PURE__ */ React2.createElement(PagePrevButton, {
|
|
68
|
+
canPreviousPage,
|
|
69
|
+
onPreviousPage
|
|
70
|
+
}), /* @__PURE__ */ React2.createElement(Paginator, {
|
|
71
|
+
pageCount,
|
|
72
|
+
pageIndex,
|
|
73
|
+
onPageChange,
|
|
74
|
+
pageDetails,
|
|
75
|
+
pageDetailsTitle
|
|
76
|
+
}), /* @__PURE__ */ React2.createElement(PageNextButton, {
|
|
77
|
+
canNextPage,
|
|
78
|
+
onNextPage
|
|
79
|
+
}))));
|
|
80
|
+
};
|
|
60
81
|
export {
|
|
61
82
|
PaginationContent
|
|
62
83
|
};
|
|
@@ -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 { 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
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,
|
|
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-props-helpers';\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;AAEhD,SACE,qCAAC,qBAAD;AAAA,IACE,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAO,MAAM;AAAA,IACb,eAAa,uBAAuB;AAAA,IACpC,MAAM,CAAC;AAAA,KACH,mBAEJ,qCAAC,mBAAD,MACG,uBACC,4DACE,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,qCAAC,qBAAD;AAAA,IAAqB,IAAI;AAAA,OAG7B,qCAAC,MAAD;AAAA,IAAM,IAAG;AAAA,IAAO,YAAW;AAAA,IAAS,OAAO,EAAE,cAAc;AAAA,KACzD,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAAkC;AAAA,MAClD,qCAAC,WAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,qCAAC,gBAAD;AAAA,IAAgB;AAAA,IAA0B;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React2, { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import React2, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import { Checkmark, ChevronDown } from "@elliemae/ds-icons";
|
|
4
4
|
import { useOnElementResize } from "@elliemae/ds-utilities";
|
|
5
5
|
import { Grid } from "@elliemae/ds-grid";
|
|
6
6
|
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
|
|
7
|
-
import {
|
|
7
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
8
|
+
import {
|
|
9
|
+
InvisibleDetail,
|
|
10
|
+
PaginationBoldText,
|
|
11
|
+
PaginationDropdownButton,
|
|
12
|
+
PaginationSeparator
|
|
13
|
+
} from "../styled";
|
|
8
14
|
import { usePaginationSearch } from "../hooks/usePaginationSearch";
|
|
9
15
|
const Paginator = (props) => {
|
|
10
16
|
const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
|
|
@@ -20,7 +26,7 @@ const Paginator = (props) => {
|
|
|
20
26
|
value: index + 1,
|
|
21
27
|
type: "single"
|
|
22
28
|
};
|
|
23
|
-
if (pageDetails
|
|
29
|
+
if (pageDetails?.length) {
|
|
24
30
|
option.render = () => /* @__PURE__ */ React2.createElement(Grid, {
|
|
25
31
|
cols: ["16px", `${txtWidth + 16}px`, "auto"],
|
|
26
32
|
gutter: "xxs",
|
|
@@ -45,6 +51,14 @@ const Paginator = (props) => {
|
|
|
45
51
|
actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());
|
|
46
52
|
}
|
|
47
53
|
}, [isOpened]);
|
|
54
|
+
const [detailWidth, setDetailWidth] = useState(0);
|
|
55
|
+
useLayoutEffect(() => {
|
|
56
|
+
const invisibleDetails = [
|
|
57
|
+
...document.body.querySelectorAll('[data-testid="ds-pagination-invisible-detail-for-width-calc"]')
|
|
58
|
+
];
|
|
59
|
+
const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);
|
|
60
|
+
setDetailWidth(maxWidth);
|
|
61
|
+
}, [pageDetails]);
|
|
48
62
|
const onKeyDown = usePaginationSearch(pageCount, actionRef);
|
|
49
63
|
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, null), /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
|
|
50
64
|
isOpened,
|
|
@@ -53,11 +67,11 @@ const Paginator = (props) => {
|
|
|
53
67
|
onOptionClick: (_, clickedOption) => {
|
|
54
68
|
onPageChange(clickedOption.value);
|
|
55
69
|
setIsOpened(false);
|
|
56
|
-
btnRef.current
|
|
70
|
+
btnRef.current?.focus();
|
|
57
71
|
},
|
|
58
72
|
onClickOutside: () => {
|
|
59
73
|
setIsOpened(false);
|
|
60
|
-
btnRef.current
|
|
74
|
+
btnRef.current?.focus();
|
|
61
75
|
},
|
|
62
76
|
customOffset: [0, 2],
|
|
63
77
|
startPlacementPreference: "top-end",
|
|
@@ -74,15 +88,17 @@ const Paginator = (props) => {
|
|
|
74
88
|
}), /* @__PURE__ */ React2.createElement("span", null, pageDetailsTitle)) : "Page"
|
|
75
89
|
}, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
|
|
76
90
|
buttonType: "raw",
|
|
77
|
-
onClick: () => setIsOpened(
|
|
91
|
+
onClick: () => setIsOpened((prev) => !prev),
|
|
78
92
|
innerRef: btnRef
|
|
79
|
-
}, /* @__PURE__ */ React2.createElement("div", {
|
|
80
|
-
style: { display: "flex", gridGap: "8px", alignItems: "center" }
|
|
81
93
|
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
82
|
-
|
|
94
|
+
gutter: "xxs",
|
|
95
|
+
alignItems: "center",
|
|
96
|
+
cols: pageDetails.length !== 0 ? ["auto", "min-content", "minmax(0px, 70%)", "min-content"] : ["auto", "min-content"]
|
|
97
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
83
98
|
alignItems: "center",
|
|
84
99
|
gutter: "xxxs",
|
|
85
|
-
ref: pageInfoRef
|
|
100
|
+
ref: pageInfoRef,
|
|
101
|
+
style: { gridAutoFlow: "column" }
|
|
86
102
|
}, /* @__PURE__ */ React2.createElement(PaginationBoldText, {
|
|
87
103
|
fontSize: "18px"
|
|
88
104
|
}, pageIndex + 1), " / ", pageCount), pageDetails.length !== 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PaginationSeparator, {
|
|
@@ -90,10 +106,16 @@ const Paginator = (props) => {
|
|
|
90
106
|
ml: "8px"
|
|
91
107
|
}), /* @__PURE__ */ React2.createElement(PaginationBoldText, {
|
|
92
108
|
fontSize: "13px",
|
|
93
|
-
|
|
94
|
-
|
|
109
|
+
w: detailWidth,
|
|
110
|
+
mr: "xxs",
|
|
111
|
+
display: "grid"
|
|
112
|
+
}, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
113
|
+
value: pageDetails[pageIndex]
|
|
114
|
+
}, pageDetails[pageIndex]))), /* @__PURE__ */ React2.createElement(ChevronDown, {
|
|
95
115
|
color: ["brand-primary", "700"]
|
|
96
|
-
})
|
|
116
|
+
}), pageDetails.map((pageDetail) => /* @__PURE__ */ React2.createElement(InvisibleDetail, {
|
|
117
|
+
"data-testid": "ds-pagination-invisible-detail-for-width-calc"
|
|
118
|
+
}, pageDetail))))), /* @__PURE__ */ React2.createElement(PaginationSeparator, null));
|
|
97
119
|
};
|
|
98
120
|
var Paginator_default = Paginator;
|
|
99
121
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;
|
|
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={[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((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 </PaginationBoldText>\n </>\n )}\n <ChevronDown color={['brand-primary', '700']} />\n {pageDetails.map((pageDetail) => (\n <InvisibleDetail data-testid=\"ds-pagination-invisible-detail-for-width-calc\">\n {pageDetail}\n </InvisibleDetail>\n ))}\n </Grid>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -44,11 +44,11 @@ const PerPageSelector = (props) => {
|
|
|
44
44
|
onOptionClick: (_, clickedOption) => {
|
|
45
45
|
onPageSizeChange(clickedOption.value);
|
|
46
46
|
setIsOpened(false);
|
|
47
|
-
btnRef.current
|
|
47
|
+
btnRef.current?.focus();
|
|
48
48
|
},
|
|
49
49
|
onClickOutside: () => {
|
|
50
50
|
setIsOpened(false);
|
|
51
|
-
btnRef.current
|
|
51
|
+
btnRef.current?.focus();
|
|
52
52
|
},
|
|
53
53
|
customOffset: [0, 2],
|
|
54
54
|
startPlacementPreference: "top-end",
|
|
@@ -60,7 +60,7 @@ const PerPageSelector = (props) => {
|
|
|
60
60
|
style: { marginLeft: "32px" }
|
|
61
61
|
}, /* @__PURE__ */ React2.createElement(PaginationDropdownButton, {
|
|
62
62
|
buttonType: "raw",
|
|
63
|
-
onClick: () => setIsOpened(
|
|
63
|
+
onClick: () => setIsOpened((prev) => !prev),
|
|
64
64
|
"aria-pressed": isOpened,
|
|
65
65
|
innerRef: btnRef
|
|
66
66
|
}, pageSize, " / page", /* @__PURE__ */ React2.createElement(ChevronDown, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
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
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,iBAAiB,CAAC,
|
|
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: 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 } = 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((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;AAET,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM;AAAA;AAAA;AAIV,MAAM,aAAa,QAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI;AACjD,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,UAAU;AAAA;AAGxD,MAAM,kBAOF,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,SAAS;AAAA;AAAA,IAElB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,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,CAAC,SAAS,CAAC;AAAA,IACtC,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,qCAAC,aAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAOhD,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 '
|
|
5
|
-
"mappings": "AAAA;ACAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-props-helpers';\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;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
6
|
"names": []
|
|
7
7
|
}
|