@elliemae/ds-pagination 3.14.0-rc.0 → 3.14.0-rc.2
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 +5 -5
- package/dist/cjs/Pagination.js.map +2 -2
- package/dist/cjs/parts/PageNextButton.js +0 -1
- package/dist/cjs/parts/PageNextButton.js.map +2 -2
- package/dist/cjs/parts/PagePrevButton.js.map +1 -1
- package/dist/cjs/parts/PaginationContent.js +7 -5
- package/dist/cjs/parts/PaginationContent.js.map +2 -2
- package/dist/cjs/parts/Paginator.js +14 -10
- package/dist/cjs/parts/Paginator.js.map +2 -2
- package/dist/cjs/parts/PerPageSelector.js +2 -1
- package/dist/cjs/parts/PerPageSelector.js.map +2 -2
- package/dist/cjs/{props.js → react-desc-prop-types.js} +40 -34
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled.js +5 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/Pagination.js +4 -4
- package/dist/esm/Pagination.js.map +2 -2
- package/dist/esm/parts/PageNextButton.js +0 -1
- package/dist/esm/parts/PageNextButton.js.map +2 -2
- package/dist/esm/parts/PagePrevButton.js.map +1 -1
- package/dist/esm/parts/PaginationContent.js +8 -6
- package/dist/esm/parts/PaginationContent.js.map +2 -2
- package/dist/esm/parts/Paginator.js +15 -16
- package/dist/esm/parts/Paginator.js.map +2 -2
- package/dist/esm/parts/PerPageSelector.js +3 -2
- package/dist/esm/parts/PerPageSelector.js.map +2 -2
- package/dist/esm/{props.js → react-desc-prop-types.js} +38 -32
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled.js +6 -5
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/Pagination.d.ts +3 -3
- package/dist/types/parts/PageNextButton.d.ts +2 -2
- package/dist/types/parts/PagePrevButton.d.ts +2 -2
- package/dist/types/parts/PaginationContent.d.ts +2 -2
- package/dist/types/parts/Paginator.d.ts +2 -1
- package/dist/types/parts/PerPageSelector.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +35 -0
- package/dist/types/styled.d.ts +10 -0
- package/package.json +9 -8
- package/dist/cjs/index.d.js +0 -24
- package/dist/cjs/index.d.js.map +0 -7
- package/dist/cjs/props.js.map +0 -7
- package/dist/esm/index.d.js +0 -2
- package/dist/esm/index.d.js.map +0 -7
- package/dist/esm/props.js.map +0 -7
- package/dist/types/props.d.ts +0 -20
package/dist/cjs/Pagination.js
CHANGED
|
@@ -32,15 +32,15 @@ var React = __toESM(require("react"));
|
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
34
|
var import_PaginationContent = require("./parts/PaginationContent");
|
|
35
|
-
var import_props = require("./props");
|
|
36
35
|
var import_DSPaginationDefinitions = require("./DSPaginationDefinitions");
|
|
36
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
37
37
|
const DSPagination = (props) => {
|
|
38
|
-
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props,
|
|
39
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault,
|
|
38
|
+
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
39
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSPaginationPropTypesSchema, import_DSPaginationDefinitions.DSPaginationName);
|
|
40
40
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PaginationContent.PaginationContent, { ...propsWithDefault });
|
|
41
41
|
};
|
|
42
|
-
DSPagination.propTypes =
|
|
42
|
+
DSPagination.propTypes = import_react_desc_prop_types.DSPaginationPropTypesSchema;
|
|
43
43
|
DSPagination.displayName = import_DSPaginationDefinitions.DSPaginationName;
|
|
44
44
|
const DSPaginationWithSchema = (0, import_ds_utilities.describe)(DSPagination).description("DSPagination");
|
|
45
|
-
DSPaginationWithSchema.propTypes =
|
|
45
|
+
DSPaginationWithSchema.propTypes = import_react_desc_prop_types.DSPaginationPropTypesSchema;
|
|
46
46
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Pagination.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { PaginationContent } from './parts/PaginationContent';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWd;AAVT,0BAAuF;AACvF,+BAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { PaginationContent } from './parts/PaginationContent';\nimport { DSPaginationName } from './DSPaginationDefinitions';\nimport type { DSPaginationT } from './react-desc-prop-types';\nimport { defaultProps, DSPaginationPropTypesSchema } from './react-desc-prop-types';\n\nconst DSPagination: React.ComponentType<DSPaginationT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSPaginationPropTypesSchema, DSPaginationName);\n\n return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = DSPaginationPropTypesSchema;\nDSPagination.displayName = DSPaginationName;\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = DSPaginationPropTypesSchema;\n\nexport { DSPagination, DSPaginationWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWd;AAVT,0BAAuF;AACvF,+BAAkC;AAClC,qCAAiC;AAEjC,mCAA0D;AAE1D,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,uBAAmB,kDAA0D,OAAO,yCAAY;AACtG,0DAA+B,kBAAkB,0DAA6B,+CAAgB;AAE9F,SAAO,4CAAC,8CAAmB,GAAG,kBAAkB;AAClD;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY,EAAE,YAAY,cAAc;AAChF,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,7 +45,6 @@ const PageNextButton = ({
|
|
|
45
45
|
disabled: !canNextPage,
|
|
46
46
|
buttonType: "raw",
|
|
47
47
|
"data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.NEXT_BUTTON,
|
|
48
|
-
HeaderComp: () => "Page",
|
|
49
48
|
"aria-label": "Go to next page",
|
|
50
49
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronRight, { color: canNextPage ? ["brand-primary", "700"] : ["neutral", "500"] })
|
|
51
50
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PageNextButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* 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 type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PageNextButton: React.ComponentType<Pick<DSPaginationT.InternalProps, '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 aria-label=\"Go to next page\"\n >\n <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AAlBJ,sBAA6B;AAC7B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAAuG,CAAC;AAAA,EACnH;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,MAAM;AACb,UAAI;AAAa,mBAAW;AAAA,IAC9B;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAW;AAAA,IACX,eAAa,mDAAuB;AAAA,IACpC,cAAW;AAAA,IAEX,sDAAC,gCAAa,OAAO,cAAc,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AACpF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PagePrevButton.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 type {
|
|
4
|
+
"sourcesContent": ["/* 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 type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PagePrevButton: React.ComponentType<\n Pick<DSPaginationT.InternalProps, '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 aria-label=\"Go to previous page\"\n >\n <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBnB;AAjBJ,sBAA4B;AAC5B,kCAAuC;AACvC,oBAAuC;AAGhC,MAAM,iBAET,CAAC,EAAE,gBAAgB,gBAAgB,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,MAAM;AACb,UAAI;AAAiB,uBAAe;AAAA,IACtC;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAW;AAAA,IACX,eAAa,mDAAuB;AAAA,IACpC,cAAW;AAAA,IAEX,sDAAC,+BAAY,OAAO,kBAAkB,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AACvF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -48,25 +48,26 @@ const PaginationContent = (props) => {
|
|
|
48
48
|
onPreviousPage,
|
|
49
49
|
onPageChange,
|
|
50
50
|
pageCount,
|
|
51
|
+
isLoadingPageCount,
|
|
51
52
|
showPerPageSelector,
|
|
52
53
|
pageDetails,
|
|
53
54
|
pageDetailsTitle,
|
|
54
55
|
perPageOptions,
|
|
55
56
|
maxPerPage,
|
|
56
57
|
perPageStep,
|
|
57
|
-
minPerPage
|
|
58
|
-
width
|
|
58
|
+
minPerPage
|
|
59
59
|
} = props;
|
|
60
|
-
const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(props);
|
|
60
|
+
const { rows, wrap, ...globalAttributes } = (0, import_ds_utilities.useGetGlobalAttributes)(props);
|
|
61
|
+
const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(props);
|
|
61
62
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
63
|
import_styled.PaginationContainer,
|
|
63
64
|
{
|
|
64
65
|
justifyContent: "center",
|
|
65
66
|
alignItems: "center",
|
|
66
|
-
width: width.toString(),
|
|
67
67
|
"data-testid": import_PaginationDataTestID.PAGINATION_DATA_TESTID.CONTAINER,
|
|
68
|
-
cols: ["minmax(auto, 80%)"],
|
|
69
68
|
...globalAttributes,
|
|
69
|
+
...xstyledProps,
|
|
70
|
+
cols: ["minmax(auto, 80%)"],
|
|
70
71
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.PaginationWrapper, { children: [
|
|
71
72
|
showPerPageSelector && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
72
73
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -88,6 +89,7 @@ const PaginationContent = (props) => {
|
|
|
88
89
|
import_Paginator.default,
|
|
89
90
|
{
|
|
90
91
|
pageCount,
|
|
92
|
+
isLoadingPageCount,
|
|
91
93
|
pageIndex,
|
|
92
94
|
onPageChange,
|
|
93
95
|
pageDetails,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PaginationContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useGetGlobalAttributes, useGetXstyledProps } 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 type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PaginationContent: React.ComponentType<DSPaginationT.InternalProps> = (props) => {\n const {\n pageIndex,\n pageSize,\n canPreviousPage,\n canNextPage,\n onPageSizeChange,\n onNextPage,\n onPreviousPage,\n onPageChange,\n pageCount,\n isLoadingPageCount,\n showPerPageSelector,\n pageDetails,\n pageDetailsTitle,\n perPageOptions,\n maxPerPage,\n perPageStep,\n minPerPage,\n } = props;\n\n // eslint-disable-next-line no-unused-vars\n const { rows, wrap, ...globalAttributes } = useGetGlobalAttributes(props);\n const xstyledProps = useGetXstyledProps(props);\n\n return (\n <PaginationContainer\n justifyContent=\"center\"\n alignItems=\"center\"\n data-testid={PAGINATION_DATA_TESTID.CONTAINER}\n {...globalAttributes}\n {...xstyledProps}\n cols={['minmax(auto, 80%)']}\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 isLoadingPageCount={isLoadingPageCount}\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDb;AA9CV,qBAAqB;AACrB,0BAA2D;AAC3D,oBAA4E;AAC5E,6BAA4B;AAC5B,uBAAsB;AACtB,kCAAuC;AACvC,4BAA+B;AAC/B,4BAA+B;AAGxB,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,EACF,IAAI;AAGJ,QAAM,EAAE,MAAM,SAAS,iBAAiB,QAAI,4CAAuB,KAAK;AACxE,QAAM,mBAAe,wCAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,eAAa,mDAAuB;AAAA,MACnC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,mBAAmB;AAAA,MAE1B,uDAAC,mCACE;AAAA,+BACC,4EACE;AAAA;AAAA,YAAC,uBAAAA;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UACA,4CAAC,qCAAoB,IAAI,IAAI;AAAA,WAC/B;AAAA,QAEF,6CAAC,uBAAK,IAAG,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GAClE;AAAA,sDAAC,wCAAe,iBAAkC,gBAAgC;AAAA,UAClF;AAAA,YAAC,iBAAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UACA,4CAAC,wCAAe,aAA0B,YAAwB;AAAA,WACpE;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["PerPageSelector", "Paginator"]
|
|
7
7
|
}
|
|
@@ -35,17 +35,18 @@ var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
|
35
35
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
36
|
var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
|
|
37
37
|
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
38
|
+
var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
|
|
38
39
|
var import_styled = require("../styled");
|
|
39
40
|
var import_usePaginationSearch = require("../hooks/usePaginationSearch");
|
|
40
41
|
const Paginator = (props) => {
|
|
41
|
-
const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
|
|
42
|
+
const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = props;
|
|
42
43
|
const [isOpened, setIsOpened] = (0, import_react.useState)(false);
|
|
43
44
|
const btnRef = (0, import_react.useRef)(null);
|
|
44
45
|
const pageInfoRef = (0, import_react.useRef)(null);
|
|
45
46
|
const { width: btnWidth } = (0, import_ds_utilities.useOnElementResize)(btnRef);
|
|
46
47
|
const { width: txtWidth } = (0, import_ds_utilities.useOnElementResize)(pageInfoRef);
|
|
47
48
|
const options = (0, import_react.useMemo)(
|
|
48
|
-
() => new Array(pageCount).fill(0).map((_, index) => {
|
|
49
|
+
() => new Array(typeof pageCount === "string" ? pageIndex + 1 : pageCount).fill(0).map((_, index) => {
|
|
49
50
|
const option = {
|
|
50
51
|
dsId: (index + 1).toString(),
|
|
51
52
|
label: (index + 1).toString(),
|
|
@@ -121,6 +122,7 @@ const Paginator = (props) => {
|
|
|
121
122
|
import_styled.PaginationDropdownButton,
|
|
122
123
|
{
|
|
123
124
|
buttonType: "raw",
|
|
125
|
+
disabled: isLoadingPageCount,
|
|
124
126
|
onClick: () => setIsOpened((prev) => !prev),
|
|
125
127
|
innerRef: btnRef,
|
|
126
128
|
"aria-label": `Page ${pageIndex + 1} out of ${pageCount}, ${pageDetails.length !== 0 ? pageDetails[pageIndex] : "\b\b"}. Press to change the current page`,
|
|
@@ -136,14 +138,16 @@ const Paginator = (props) => {
|
|
|
136
138
|
" / ",
|
|
137
139
|
pageCount
|
|
138
140
|
] }),
|
|
139
|
-
|
|
140
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
141
|
-
|
|
142
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
141
|
+
isLoadingPageCount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularIndeterminateIndicator, { size: "xs" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
142
|
+
pageDetails.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PaginationSeparator, { height: "12px", ml: "8px" }),
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.PaginationBoldText, { fontSize: "13px", w: detailWidth, mr: "xxs", display: "grid", children: [
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, { value: pageDetails[pageIndex], children: pageDetails[pageIndex] }),
|
|
146
|
+
pageDetails.map((pageDetail) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.InvisibleDetail, { "data-testid": "ds-pagination-invisible-detail-for-width-calc", children: pageDetail }))
|
|
147
|
+
] })
|
|
148
|
+
] }),
|
|
149
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"] })
|
|
150
|
+
] })
|
|
147
151
|
]
|
|
148
152
|
}
|
|
149
153
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Paginator.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* 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 { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDetail, PaginationBoldText, PaginationDropdownButton, PaginationSeparator } from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\n\ninterface PaginatorPropsT {\n pageIndex: number;\n pageCount: number | string;\n isLoadingPageCount: boolean;\n onPageChange: (page: number) => void;\n pageDetails: string[];\n pageDetailsTitle: string;\n}\n\nconst Paginator: React.ComponentType<PaginatorPropsT> = (props) => {\n const { pageIndex, pageCount, isLoadingPageCount, 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(typeof pageCount === 'string' ? pageIndex + 1 : 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\n buttonType=\"raw\"\n disabled={isLoadingPageCount}\n onClick={() => setIsOpened((prev) => !prev)}\n innerRef={btnRef}\n aria-label={`Page ${pageIndex + 1} out of ${pageCount}, ${\n pageDetails.length !== 0 ? pageDetails[pageIndex] : '\\b\\b'\n }. Press to change the current page`}\n >\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 {isLoadingPageCount ? (\n <DSCircularIndeterminateIndicator size=\"xs\" />\n ) : (\n <>\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 </>\n )}\n </Grid>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,6 +50,7 @@ const getOptions = (0, import_memoize_one.default)((step, min, max) => {
|
|
|
50
50
|
const options = (0, import_ds_utilities.range)(min, max + step, step).map(generateOption);
|
|
51
51
|
return min === 0 ? options.slice(1, options.length) : options;
|
|
52
52
|
});
|
|
53
|
+
const Header = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Per Page" });
|
|
53
54
|
const PerPageSelector = (props) => {
|
|
54
55
|
const [isOpened, setIsOpened] = (0, import_react.useState)(false);
|
|
55
56
|
const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;
|
|
@@ -90,7 +91,7 @@ const PerPageSelector = (props) => {
|
|
|
90
91
|
actionRef,
|
|
91
92
|
minWidth: width,
|
|
92
93
|
maxHeight: 300,
|
|
93
|
-
HeaderComp:
|
|
94
|
+
HeaderComp: Header,
|
|
94
95
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginLeft: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
95
96
|
import_styled.PaginationDropdownButton,
|
|
96
97
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/PerPageSelector.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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 type {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 type { DSPaginationT } from '../react-desc-prop-types';\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 Header = () => <>{'Per Page'}</>;\n\nconst PerPageSelector: React.ComponentType<\n Pick<\n DSPaginationT.InternalProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\n> = (props) => {\n const [isOpened, setIsOpened] = useState(false);\n const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n const options = useMemo(() => {\n if (perPageOptions) return perPageOptions.map(generateOption);\n return getOptions(perPageStep, minPerPage, maxPerPage);\n }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n const btnRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageSize.toString());\n actionRef.current.scrollOptionIntoView(pageSize.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const width = 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={Header}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened((prev) => !prev)}\n aria-pressed={isOpened}\n innerRef={btnRef}\n aria-label={`${pageSize} rows per page. Press to select rows per page`}\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BF;AAzBrB,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,iBAAa,mBAAAA,SAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,cAAU,2BAAM,KAAK,MAAM,MAAM,IAAI,EAAE,IAAI,cAAc;AAC/D,SAAO,QAAQ,IAAI,QAAQ,MAAM,GAAG,QAAQ,MAAM,IAAI;AACxD,CAAC;AAED,MAAM,SAAS,MAAM,2EAAG,sBAAW;AAEnC,MAAM,kBAKF,CAAC,UAAU;AACb,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,WAAW,IAAI;AAE5F,QAAM,cAAU,sBAAQ,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,gBAAY,qBAA+C,CAAC,CAAC;AACnE,QAAM,aAAS,qBAA0B,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,YAAQ,sBAAQ,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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,IAAI,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAiB,cAAc,KAAK;AACpC,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,gBAAgB,MAAM;AACpB,oBAAY,KAAK;AACjB,eAAO,SAAS,MAAM;AAAA,MACxB;AAAA,MACA,cAAc,CAAC,IAAI,CAAC;AAAA,MACpB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ,sDAAC,SAAI,OAAO,EAAE,YAAY,OAAO,GAC/B;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,UAC1C,gBAAc;AAAA,UACd,UAAU;AAAA,UACV,cAAY,GAAG;AAAA,UAEd;AAAA;AAAA,YAAS;AAAA,YACV,4CAAC,+BAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": ["memoize"]
|
|
7
7
|
}
|
|
@@ -22,21 +22,46 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
22
22
|
mod
|
|
23
23
|
));
|
|
24
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
-
var
|
|
26
|
-
__export(
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
var react_desc_prop_types_exports = {};
|
|
26
|
+
__export(react_desc_prop_types_exports, {
|
|
27
|
+
DSPaginationPropTypes: () => DSPaginationPropTypes,
|
|
28
|
+
DSPaginationPropTypesSchema: () => DSPaginationPropTypesSchema,
|
|
29
|
+
defaultProps: () => defaultProps
|
|
29
30
|
});
|
|
30
|
-
module.exports = __toCommonJS(
|
|
31
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
31
32
|
var React = __toESM(require("react"));
|
|
32
33
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
const defaultProps = {
|
|
35
|
+
pageCount: 0,
|
|
36
|
+
pageIndex: 1,
|
|
37
|
+
isLoadingPageCount: false,
|
|
38
|
+
canPreviousPage: true,
|
|
39
|
+
canNextPage: true,
|
|
40
|
+
pageSize: 10,
|
|
41
|
+
showPerPageSelector: true,
|
|
42
|
+
perPageOptions: [10],
|
|
43
|
+
perPageStep: 5,
|
|
44
|
+
minPerPage: 0,
|
|
45
|
+
maxPerPage: 100,
|
|
46
|
+
onPageSizeChange: () => null,
|
|
47
|
+
onPreviousPage: () => null,
|
|
48
|
+
onNextPage: () => null,
|
|
49
|
+
onPageChange: () => null,
|
|
50
|
+
pageDetails: [],
|
|
51
|
+
pageDetailsTitle: "",
|
|
52
|
+
width: "100%"
|
|
53
|
+
};
|
|
54
|
+
const DSPaginationPropTypes = {
|
|
55
|
+
...import_ds_utilities.globalAttributesPropTypes,
|
|
56
|
+
...import_ds_utilities.xstyledPropTypes,
|
|
36
57
|
pageIndex: import_ds_utilities.PropTypes.number.description("Index of the current page, starting from 1").defaultValue(1),
|
|
58
|
+
pageCount: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.string, import_ds_utilities.PropTypes.number]).description("How many pages are there"),
|
|
59
|
+
pageSize: import_ds_utilities.PropTypes.number.description("The current page size").defaultValue(10),
|
|
37
60
|
canPreviousPage: import_ds_utilities.PropTypes.bool.description("Whether the previous button is disabled or not").defaultValue(true),
|
|
38
61
|
canNextPage: import_ds_utilities.PropTypes.bool.description("Whether the next button is disabled or not").defaultValue(true),
|
|
39
|
-
|
|
62
|
+
onPreviousPage: import_ds_utilities.PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
|
|
63
|
+
onPageChange: import_ds_utilities.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
|
|
64
|
+
onNextPage: import_ds_utilities.PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
|
|
40
65
|
showPerPageSelector: import_ds_utilities.PropTypes.bool.description("Whether to show the page selector").defaultValue(true),
|
|
41
66
|
perPageOptions: import_ds_utilities.PropTypes.arrayOf(
|
|
42
67
|
import_ds_utilities.PropTypes.oneOfType([
|
|
@@ -49,33 +74,14 @@ const propTypes = {
|
|
|
49
74
|
})
|
|
50
75
|
])
|
|
51
76
|
).description("The available options for page size").defaultValue([10]),
|
|
77
|
+
minPerPage: import_ds_utilities.PropTypes.number.description("Min for the per page options").defaultValue(0),
|
|
78
|
+
maxPerPage: import_ds_utilities.PropTypes.number.description("Max for the per page options").defaultValue(100),
|
|
52
79
|
perPageStep: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(5),
|
|
53
|
-
minPerPage: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(0),
|
|
54
|
-
maxPerPage: import_ds_utilities.PropTypes.number.description("Step for the per page options").defaultValue(100),
|
|
55
80
|
onPageSizeChange: import_ds_utilities.PropTypes.func.description("Function invoked when the page size changes").defaultValue(() => null),
|
|
56
|
-
onPreviousPage: import_ds_utilities.PropTypes.func.description("Function invoked when the previous button is pressed").defaultValue(() => null),
|
|
57
|
-
onPageChange: import_ds_utilities.PropTypes.func.description("Function invoked when the page changes").defaultValue(() => null),
|
|
58
|
-
onNextPage: import_ds_utilities.PropTypes.func.description("Function invoked when next button is pressed").defaultValue(() => null),
|
|
59
81
|
pageDetails: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.string).description("Details to provide for each page").defaultValue([]),
|
|
60
82
|
pageDetailsTitle: import_ds_utilities.PropTypes.string.description("The title of the details (usually a column of your dataset)").defaultValue(""),
|
|
61
|
-
width: import_ds_utilities.PropTypes.any.description("Width for the container of the pagination").defaultValue("100%")
|
|
62
|
-
|
|
63
|
-
const defaultProps = {
|
|
64
|
-
pageIndex: 1,
|
|
65
|
-
canPreviousPage: true,
|
|
66
|
-
canNextPage: true,
|
|
67
|
-
pageSize: 10,
|
|
68
|
-
showPerPageSelector: true,
|
|
69
|
-
perPageOptions: [10],
|
|
70
|
-
perPageStep: 5,
|
|
71
|
-
minPerPage: 0,
|
|
72
|
-
maxPerPage: 100,
|
|
73
|
-
onPageSizeChange: emptyFunc,
|
|
74
|
-
onPreviousPage: emptyFunc,
|
|
75
|
-
onNextPage: emptyFunc,
|
|
76
|
-
onPageChange: emptyFunc,
|
|
77
|
-
pageDetails: [],
|
|
78
|
-
pageDetailsTitle: "",
|
|
79
|
-
width: "100%"
|
|
83
|
+
width: import_ds_utilities.PropTypes.any.description("Width for the container of the pagination").defaultValue("100%"),
|
|
84
|
+
isLoadingPageCount: import_ds_utilities.PropTypes.bool.description("Whether the page count is loading or not").defaultValue(false)
|
|
80
85
|
};
|
|
81
|
-
|
|
86
|
+
const DSPaginationPropTypesSchema = DSPaginationPropTypes;
|
|
87
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-utilities';\n\nexport namespace DSPaginationT {\n export interface DefaultProps {\n pageCount: number | string;\n isLoadingPageCount: boolean;\n pageIndex: number;\n canPreviousPage: boolean;\n canNextPage: boolean;\n pageSize: number;\n showPerPageSelector: boolean;\n perPageOptions: (number | Record<string, unknown>)[];\n perPageStep: number;\n minPerPage: number;\n maxPerPage: number;\n onPageSizeChange: (pageSize: number) => void;\n onPreviousPage: () => void;\n onNextPage: () => void;\n onPageChange: (page: number) => void;\n pageDetails: string[];\n pageDetailsTitle: string;\n width: string | number;\n }\n export interface OptionalProps {}\n export interface RequiredProps {}\n\n export interface Props\n extends Partial<DefaultProps>,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n RequiredProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSPaginationT.DefaultProps = {\n pageCount: 0,\n pageIndex: 1,\n isLoadingPageCount: false,\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: () => null,\n onPreviousPage: () => null,\n onNextPage: () => null,\n onPageChange: () => null,\n pageDetails: [],\n pageDetailsTitle: '',\n width: '100%',\n};\n\nexport const DSPaginationPropTypes: DSPropTypesSchema<DSPaginationT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\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 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 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 minPerPage: PropTypes.number.description('Min for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Max for the per page options').defaultValue(100),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').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 isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading or not').defaultValue(false),\n};\n\nexport const DSPaginationPropTypesSchema = DSPaginationPropTypes as unknown as WeakValidationMap<DSPaginationT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAuE;AA2ChE,MAAM,eAA2C;AAAA,EACtD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,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,MAAM;AAAA,EACxB,gBAAgB,MAAM;AAAA,EACtB,YAAY,MAAM;AAAA,EAClB,cAAc,MAAM;AAAA,EACpB,aAAa,CAAC;AAAA,EACd,kBAAkB;AAAA,EAClB,OAAO;AACT;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,WAAW,8BAAU,OAAO,YAAY,4CAA4C,EAAE,aAAa,CAAC;AAAA,EACpG,WAAW,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC,EAAE,YAAY,0BAA0B;AAAA,EAC3G,UAAU,8BAAU,OAAO,YAAY,uBAAuB,EAAE,aAAa,EAAE;AAAA,EAC/E,iBAAiB,8BAAU,KAAK,YAAY,gDAAgD,EAAE,aAAa,IAAI;AAAA,EAC/G,aAAa,8BAAU,KAAK,YAAY,4CAA4C,EAAE,aAAa,IAAI;AAAA,EACvG,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,qBAAqB,8BAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,IAAI;AAAA,EACtG,gBAAgB,8BAAU;AAAA,IACxB,8BAAU,UAAU;AAAA,MAClB,8BAAU;AAAA,MACV,8BAAU,MAAM;AAAA,QACd,MAAM,8BAAU;AAAA,QAChB,OAAO,8BAAU;AAAA,QACjB,OAAO,8BAAU;AAAA,QACjB,MAAM,8BAAU,MAAM,CAAC,QAAQ,CAAC;AAAA,MAClC,CAAC;AAAA,IACH,CAAC;AAAA,EACH,EACG,YAAY,qCAAqC,EACjD,aAAa,CAAC,EAAE,CAAC;AAAA,EACpB,YAAY,8BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,CAAC;AAAA,EACvF,YAAY,8BAAU,OAAO,YAAY,8BAA8B,EAAE,aAAa,GAAG;AAAA,EACzF,aAAa,8BAAU,OAAO,YAAY,+BAA+B,EAAE,aAAa,CAAC;AAAA,EACzF,kBAAkB,8BAAU,KAAK,YAAY,6CAA6C,EAAE,aAAa,MAAM,IAAI;AAAA,EACnH,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;AAAA,EACjG,oBAAoB,8BAAU,KAAK,YAAY,0CAA0C,EAAE,aAAa,KAAK;AAC/G;AAEO,MAAM,8BAA8B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -58,6 +58,7 @@ const PaginationContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
58
58
|
align-items: center;
|
|
59
59
|
box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);
|
|
60
60
|
position: relative;
|
|
61
|
+
${import_ds_system.xStyledCommonProps}
|
|
61
62
|
`;
|
|
62
63
|
const PaginationWrapper = import_ds_system.styled.div`
|
|
63
64
|
display: flex;
|
|
@@ -71,11 +72,8 @@ const PaginationSeparator = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
71
72
|
`;
|
|
72
73
|
const PaginationBoldText = import_ds_system.styled.span`
|
|
73
74
|
font-weight: ${(props) => props.theme.fontWeights.semibold};
|
|
74
|
-
${import_ds_system.typography}
|
|
75
|
-
${import_ds_system.space}
|
|
76
|
-
${import_ds_system.sizing}
|
|
77
|
-
${import_ds_system.layout}
|
|
78
75
|
position: relative;
|
|
76
|
+
${import_ds_system.xStyledCommonProps}
|
|
79
77
|
`;
|
|
80
78
|
const InvisibleDetail = import_ds_system.styled.div`
|
|
81
79
|
opacity: 0;
|
|
@@ -108,6 +106,9 @@ const PaginationDropdownButton = (0, import_ds_system.styled)(import_ds_button.D
|
|
|
108
106
|
:focus {
|
|
109
107
|
${styledFocusCss}
|
|
110
108
|
}
|
|
109
|
+
&[aria-disabled='true'] {
|
|
110
|
+
cursor: not-allowed;
|
|
111
|
+
}
|
|
111
112
|
white-space: nowrap;
|
|
112
113
|
`;
|
|
113
114
|
const PreviousNextPageButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2)`
|
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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAA2B;
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-utilities';\nimport type {} from '@xstyled/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)<React.ComponentProps<typeof Grid> & XstyledProps>`\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 ${xStyledCommonProps}\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`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n position: relative;\n ${xStyledCommonProps}\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 &[aria-disabled='true'] {\n cursor: not-allowed;\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,uBAAgD;AAIhD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,0BAAsB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM1C;AAAA;AAGG,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,0BAAsB,yBAAO,mBAAI;AAAA,sBACxB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,qBAAqB,wBAAO;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,IAEhD;AAAA;AAGG,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,+BAA2B,yBAAO,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;AAAA;AAAA;AAAA;AAQC,MAAM,6BAAyB,yBAAO,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
|
@@ -2,17 +2,17 @@ import * as React from "react";
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-utilities";
|
|
4
4
|
import { PaginationContent } from "./parts/PaginationContent";
|
|
5
|
-
import { propTypes, defaultProps } from "./props";
|
|
6
5
|
import { DSPaginationName } from "./DSPaginationDefinitions";
|
|
6
|
+
import { defaultProps, DSPaginationPropTypesSchema } from "./react-desc-prop-types";
|
|
7
7
|
const DSPagination = (props) => {
|
|
8
8
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
9
|
-
useValidateTypescriptPropTypes(propsWithDefault,
|
|
9
|
+
useValidateTypescriptPropTypes(propsWithDefault, DSPaginationPropTypesSchema, DSPaginationName);
|
|
10
10
|
return /* @__PURE__ */ jsx(PaginationContent, { ...propsWithDefault });
|
|
11
11
|
};
|
|
12
|
-
DSPagination.propTypes =
|
|
12
|
+
DSPagination.propTypes = DSPaginationPropTypesSchema;
|
|
13
13
|
DSPagination.displayName = DSPaginationName;
|
|
14
14
|
const DSPaginationWithSchema = describe(DSPagination).description("DSPagination");
|
|
15
|
-
DSPaginationWithSchema.propTypes =
|
|
15
|
+
DSPaginationWithSchema.propTypes = DSPaginationPropTypesSchema;
|
|
16
16
|
export {
|
|
17
17
|
DSPagination,
|
|
18
18
|
DSPaginationWithSchema
|
|
@@ -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-utilities';\nimport { PaginationContent } from './parts/PaginationContent';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACWd;AAVT,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,yBAAyB;AAClC,SAAS,
|
|
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 { DSPaginationName } from './DSPaginationDefinitions';\nimport type { DSPaginationT } from './react-desc-prop-types';\nimport { defaultProps, DSPaginationPropTypesSchema } from './react-desc-prop-types';\n\nconst DSPagination: React.ComponentType<DSPaginationT.Props> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSPaginationPropTypesSchema, DSPaginationName);\n\n return <PaginationContent {...propsWithDefault} />;\n};\n\nDSPagination.propTypes = DSPaginationPropTypesSchema;\nDSPagination.displayName = DSPaginationName;\nconst DSPaginationWithSchema = describe(DSPagination).description('DSPagination');\nDSPaginationWithSchema.propTypes = DSPaginationPropTypesSchema;\n\nexport { DSPagination, DSPaginationWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWd;AAVT,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AAEjC,SAAS,cAAc,mCAAmC;AAE1D,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,mBAAmB,6BAA0D,OAAO,YAAY;AACtG,iCAA+B,kBAAkB,6BAA6B,gBAAgB;AAE9F,SAAO,oBAAC,qBAAmB,GAAG,kBAAkB;AAClD;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY,EAAE,YAAY,cAAc;AAChF,uBAAuB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,6 @@ const PageNextButton = ({
|
|
|
16
16
|
disabled: !canNextPage,
|
|
17
17
|
buttonType: "raw",
|
|
18
18
|
"data-testid": PAGINATION_DATA_TESTID.NEXT_BUTTON,
|
|
19
|
-
HeaderComp: () => "Page",
|
|
20
19
|
"aria-label": "Go to next page",
|
|
21
20
|
children: /* @__PURE__ */ jsx(ChevronRight, { color: canNextPage ? ["brand-primary", "700"] : ["neutral", "500"] })
|
|
22
21
|
}
|
|
@@ -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 type {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
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 type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PageNextButton: React.ComponentType<Pick<DSPaginationT.InternalProps, '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 aria-label=\"Go to next page\"\n >\n <ChevronRight color={canNextPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoBnB;AAlBJ,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAGhC,MAAM,iBAAuG,CAAC;AAAA,EACnH;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,MAAM;AACb,UAAI;AAAa,mBAAW;AAAA,IAC9B;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAW;AAAA,IACX,eAAa,uBAAuB;AAAA,IACpC,cAAW;AAAA,IAEX,8BAAC,gBAAa,OAAO,cAAc,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AACpF;",
|
|
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/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 type {
|
|
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 type { DSPaginationT } from '../react-desc-prop-types';\n\nexport const PagePrevButton: React.ComponentType<\n Pick<DSPaginationT.InternalProps, '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 aria-label=\"Go to previous page\"\n >\n <ChevronLeft color={canPreviousPage ? ['brand-primary', '700'] : ['neutral', '500']} />\n </PreviousNextPageButton>\n);\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACmBnB;AAjBJ,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AAGhC,MAAM,iBAET,CAAC,EAAE,gBAAgB,gBAAgB,MACrC;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,MAAM;AACb,UAAI;AAAiB,uBAAe;AAAA,IACtC;AAAA,IACA,UAAU,CAAC;AAAA,IACX,YAAW;AAAA,IACX,eAAa,uBAAuB;AAAA,IACpC,cAAW;AAAA,IAEX,8BAAC,eAAY,OAAO,kBAAkB,CAAC,iBAAiB,KAAK,IAAI,CAAC,WAAW,KAAK,GAAG;AAAA;AACvF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|