@elliemae/ds-pagination 3.0.0-alpha.2 → 3.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/parts/Paginator.js +7 -7
- package/dist/cjs/parts/Paginator.js.map +2 -2
- package/dist/cjs/parts/PerPageSelector.js +7 -4
- package/dist/cjs/parts/PerPageSelector.js.map +2 -2
- package/dist/esm/parts/Paginator.js +7 -7
- package/dist/esm/parts/Paginator.js.map +2 -2
- package/dist/esm/parts/PerPageSelector.js +8 -5
- package/dist/esm/parts/PerPageSelector.js.map +2 -2
- package/package.json +8 -8
|
@@ -99,11 +99,11 @@ const Paginator = (props) => {
|
|
|
99
99
|
setIsOpened(false);
|
|
100
100
|
btnRef.current?.focus();
|
|
101
101
|
},
|
|
102
|
-
customOffset: [
|
|
103
|
-
startPlacementPreference: "top-
|
|
102
|
+
customOffset: [-23, 2],
|
|
103
|
+
startPlacementPreference: "top-start",
|
|
104
104
|
actionRef,
|
|
105
105
|
onKeyDown,
|
|
106
|
-
minWidth: btnWidth + 23,
|
|
106
|
+
minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
|
|
107
107
|
maxHeight: 300,
|
|
108
108
|
HeaderComp: () => pageDetailsTitle !== "" ? /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
109
109
|
cols: [`${txtWidth + 50}px`, "8px", "auto"]
|
|
@@ -137,11 +137,11 @@ const Paginator = (props) => {
|
|
|
137
137
|
display: "grid"
|
|
138
138
|
}, /* @__PURE__ */ import_react.default.createElement(import_ds_truncated_tooltip_text.SimpleTruncatedTooltipText, {
|
|
139
139
|
value: pageDetails[pageIndex]
|
|
140
|
-
}, pageDetails[pageIndex])
|
|
141
|
-
color: ["brand-primary", "700"]
|
|
142
|
-
}), pageDetails.map((pageDetail) => /* @__PURE__ */ import_react.default.createElement(import_styled.InvisibleDetail, {
|
|
140
|
+
}, pageDetails[pageIndex]), pageDetails.map((pageDetail) => /* @__PURE__ */ import_react.default.createElement(import_styled.InvisibleDetail, {
|
|
143
141
|
"data-testid": "ds-pagination-invisible-detail-for-width-calc"
|
|
144
|
-
}, pageDetail))))
|
|
142
|
+
}, pageDetail)))), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ChevronDown, {
|
|
143
|
+
color: ["brand-primary", "700"]
|
|
144
|
+
})))), /* @__PURE__ */ import_react.default.createElement(import_styled.PaginationSeparator, null));
|
|
145
145
|
};
|
|
146
146
|
var Paginator_default = Paginator;
|
|
147
147
|
module.exports = __toCommonJS(Paginator_exports);
|
|
@@ -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 {\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={[
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA6E;AAC7E,sBAAuC;AACvC,0BAAmC;AACnC,qBAAqB;AACrB,6BAAiC;AACjC,uCAA2C;AAC3C,oBAMO;AACP,iCAAoC;AAUpC,MAAM,YAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,WAAW,WAAW,cAAc,aAAa,qBAAqB;AAE9E,QAAM,CAAC,UAAU,eAAe,2BAAS;AAEzC,QAAM,SAAS,yBAA0B;AACzC,QAAM,cAAc,yBAAuB;AAE3C,QAAM,EAAE,OAAO,aAAa,4CAAmB;AAC/C,QAAM,EAAE,OAAO,aAAa,4CAAmB;AAE/C,QAAM,UAAU,0BACd,MACE,IAAI,MAAM,WAAW,KAAK,GAAG,IAAI,CAAC,GAAG,UAAU;AAC7C,UAAM,SAAkC;AAAA,MACtC,MAAO,SAAQ,GAAG;AAAA,MAClB,OAAQ,SAAQ,GAAG;AAAA,MACnB,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA;AAER,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,MACd,mDAAC,qBAAD;AAAA,QAAM,MAAM,CAAC,QAAQ,GAAG,WAAW,QAAQ;AAAA,QAAS,QAAO;AAAA,QAAM,YAAW;AAAA,SACzE,cAAc,QAAQ,mDAAC,2BAAD;AAAA,QAAW,MAAK;AAAA,QAAI,OAAO,CAAC,iBAAiB;AAAA,WAAa,mDAAC,OAAD,OACjF,mDAAC,QAAD,MAAO,QAAQ,IACf,mDAAC,QAAD;AAAA,QACE,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,UAAU;AAAA;AAAA,SAGX,YAAY;AAAA;AAKrB,WAAO;AAAA,MAEX,CAAC,WAAW,aAAa,WAAW;AAGtC,QAAM,YAAY,yBAA+C;AAEjE,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAqB,aAAY,GAAG;AACtD,gBAAU,QAAQ,qBAAsB,aAAY,GAAG;AAAA;AAAA,KAGxD,CAAC;AAEJ,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAE/C,oCAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB;AAAA;AAEpC,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,wBAAwB,QAAQ;AACzG,mBAAe;AAAA,KACd,CAAC;AAEJ,QAAM,YAAY,oDAAoB,WAAW;AAEjD,SACE,wFACE,mDAAC,mCAAD,OACA,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAI,aAAY,GAAG,aAAa;AAAA,IACjD,eAAe,CAAC,GAAG,kBAAkB;AACnC,mBAAa,cAAc;AAC3B,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,cAAc,CAAC,
|
|
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 {\n InvisibleDetail,\n PaginationBoldText,\n PaginationDetail,\n PaginationDropdownButton,\n PaginationSeparator,\n} from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\n\ninterface PaginatorPropsT {\n pageIndex: number;\n pageCount: number;\n onPageChange: (page: number) => void;\n pageDetails: string[];\n pageDetailsTitle: string;\n}\n\nconst Paginator: React.ComponentType<PaginatorPropsT> = (props) => {\n const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const pageInfoRef = useRef<HTMLDivElement>(null);\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n const { width: txtWidth } = useOnElementResize(pageInfoRef);\n\n const options = useMemo(\n () =>\n new Array(pageCount).fill(0).map((_, index) => {\n const option: Record<string, unknown> = {\n dsId: (index + 1).toString(),\n label: (index + 1).toString(),\n value: index + 1,\n type: 'single',\n };\n if (pageDetails?.length) {\n option.render = () => (\n <Grid cols={['16px', `${txtWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n {pageIndex === index ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}\n <span>{index + 1}</span>\n <span\n style={{\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }}\n >\n {pageDetails[index]}\n </span>\n </Grid>\n );\n }\n return option;\n }),\n [pageCount, pageDetails, pageIndex, txtWidth],\n );\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant((pageIndex + 1).toString());\n actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const [detailWidth, setDetailWidth] = useState(0);\n\n useLayoutEffect(() => {\n const invisibleDetails = [\n ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n ] as HTMLDivElement[];\n const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n setDetailWidth(maxWidth);\n }, [pageDetails]);\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n return (\n <>\n <PaginationSeparator />\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [(pageIndex + 1).toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n customOffset={[-23, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n onKeyDown={onKeyDown}\n minWidth={pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90}\n maxHeight={300}\n HeaderComp={() =>\n pageDetailsTitle !== '' ? (\n <Grid cols={[`${txtWidth + 50}px`, '8px', 'auto']}>\n <span style={{ marginLeft: '8px' }}>Page</span>\n <PaginationSeparator height=\"100%\" />\n <span>{pageDetailsTitle}</span>\n </Grid>\n ) : (\n 'Page'\n )\n }\n >\n <PaginationDropdownButton buttonType=\"raw\" onClick={() => setIsOpened((prev) => !prev)} innerRef={btnRef}>\n <Grid\n gutter=\"xxs\"\n alignItems=\"center\"\n cols={\n pageDetails.length !== 0\n ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content']\n : ['auto', 'min-content']\n }\n >\n <Grid alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef} style={{ gridAutoFlow: 'column' }}>\n <PaginationBoldText fontSize=\"18px\">{pageIndex + 1}</PaginationBoldText> / {pageCount}\n </Grid>\n {pageDetails.length !== 0 && (\n <>\n <PaginationSeparator height=\"12px\" ml=\"8px\" />\n <PaginationBoldText fontSize=\"13px\" w={detailWidth} mr=\"xxs\" display=\"grid\">\n <SimpleTruncatedTooltipText value={pageDetails[pageIndex]}>\n {pageDetails[pageIndex]}\n </SimpleTruncatedTooltipText>\n {pageDetails.map((pageDetail) => (\n <InvisibleDetail data-testid=\"ds-pagination-invisible-detail-for-width-calc\">\n {pageDetail}\n </InvisibleDetail>\n ))}\n </PaginationBoldText>\n </>\n )}\n <ChevronDown color={['brand-primary', '700']} />\n </Grid>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA6E;AAC7E,sBAAuC;AACvC,0BAAmC;AACnC,qBAAqB;AACrB,6BAAiC;AACjC,uCAA2C;AAC3C,oBAMO;AACP,iCAAoC;AAUpC,MAAM,YAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,WAAW,WAAW,cAAc,aAAa,qBAAqB;AAE9E,QAAM,CAAC,UAAU,eAAe,2BAAS;AAEzC,QAAM,SAAS,yBAA0B;AACzC,QAAM,cAAc,yBAAuB;AAE3C,QAAM,EAAE,OAAO,aAAa,4CAAmB;AAC/C,QAAM,EAAE,OAAO,aAAa,4CAAmB;AAE/C,QAAM,UAAU,0BACd,MACE,IAAI,MAAM,WAAW,KAAK,GAAG,IAAI,CAAC,GAAG,UAAU;AAC7C,UAAM,SAAkC;AAAA,MACtC,MAAO,SAAQ,GAAG;AAAA,MAClB,OAAQ,SAAQ,GAAG;AAAA,MACnB,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA;AAER,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,MACd,mDAAC,qBAAD;AAAA,QAAM,MAAM,CAAC,QAAQ,GAAG,WAAW,QAAQ;AAAA,QAAS,QAAO;AAAA,QAAM,YAAW;AAAA,SACzE,cAAc,QAAQ,mDAAC,2BAAD;AAAA,QAAW,MAAK;AAAA,QAAI,OAAO,CAAC,iBAAiB;AAAA,WAAa,mDAAC,OAAD,OACjF,mDAAC,QAAD,MAAO,QAAQ,IACf,mDAAC,QAAD;AAAA,QACE,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,UAAU;AAAA;AAAA,SAGX,YAAY;AAAA;AAKrB,WAAO;AAAA,MAEX,CAAC,WAAW,aAAa,WAAW;AAGtC,QAAM,YAAY,yBAA+C;AAEjE,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAqB,aAAY,GAAG;AACtD,gBAAU,QAAQ,qBAAsB,aAAY,GAAG;AAAA;AAAA,KAGxD,CAAC;AAEJ,QAAM,CAAC,aAAa,kBAAkB,2BAAS;AAE/C,oCAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB;AAAA;AAEpC,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,wBAAwB,QAAQ;AACzG,mBAAe;AAAA,KACd,CAAC;AAEJ,QAAM,YAAY,oDAAoB,WAAW;AAEjD,SACE,wFACE,mDAAC,mCAAD,OACA,mDAAC,yCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAI,aAAY,GAAG,aAAa;AAAA,IACjD,eAAe,CAAC,GAAG,kBAAkB;AACnC,mBAAa,cAAc;AAC3B,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,cAAc,CAAC,KAAK;AAAA,IACpB,0BAAyB;AAAA,IACzB;AAAA,IACA;AAAA,IACA,UAAU,YAAY,WAAW,IAAI,WAAW,KAAK,UAAU,WAAW,SAAS,IAAI;AAAA,IACvF,WAAW;AAAA,IACX,YAAY,MACV,qBAAqB,KACnB,mDAAC,qBAAD;AAAA,MAAM,MAAM,CAAC,GAAG,WAAW,QAAQ,OAAO;AAAA,OACxC,mDAAC,QAAD;AAAA,MAAM,OAAO,EAAE,YAAY;AAAA,OAAS,SACpC,mDAAC,mCAAD;AAAA,MAAqB,QAAO;AAAA,QAC5B,mDAAC,QAAD,MAAO,qBAGT;AAAA,KAIJ,mDAAC,wCAAD;AAAA,IAA0B,YAAW;AAAA,IAAM,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC;AAAA,IAAO,UAAU;AAAA,KAChG,mDAAC,qBAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,MACE,YAAY,WAAW,IACnB,CAAC,QAAQ,eAAe,oBAAoB,iBAC5C,CAAC,QAAQ;AAAA,KAGf,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAS,QAAO;AAAA,IAAO,KAAK;AAAA,IAAa,OAAO,EAAE,cAAc;AAAA,KAC/E,mDAAC,kCAAD;AAAA,IAAoB,UAAS;AAAA,KAAQ,YAAY,IAAuB,OAAI,YAE7E,YAAY,WAAW,KACtB,wFACE,mDAAC,mCAAD;AAAA,IAAqB,QAAO;AAAA,IAAO,IAAG;AAAA,MACtC,mDAAC,kCAAD;AAAA,IAAoB,UAAS;AAAA,IAAO,GAAG;AAAA,IAAa,IAAG;AAAA,IAAM,SAAQ;AAAA,KACnE,mDAAC,6DAAD;AAAA,IAA4B,OAAO,YAAY;AAAA,KAC5C,YAAY,aAEd,YAAY,IAAI,CAAC,eAChB,mDAAC,+BAAD;AAAA,IAAiB,eAAY;AAAA,KAC1B,gBAMX,mDAAC,6BAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA,SAI5C,mDAAC,mCAAD;AAAA;AAKN,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -67,7 +67,10 @@ const PerPageSelector = (props) => {
|
|
|
67
67
|
actionRef.current.scrollOptionIntoView(pageSize.toString());
|
|
68
68
|
}
|
|
69
69
|
}, [isOpened]);
|
|
70
|
-
const
|
|
70
|
+
const width = (0, import_react.useMemo)(() => {
|
|
71
|
+
const maxLength = options.reduce((acc, cur) => Math.max(acc, cur?.label?.length ?? 0), 0);
|
|
72
|
+
return maxLength * 6 + 90;
|
|
73
|
+
}, [options]);
|
|
71
74
|
return /* @__PURE__ */ import_react.default.createElement(import_ds_dropdownmenu.DSDropdownMenuV2, {
|
|
72
75
|
isOpened,
|
|
73
76
|
options,
|
|
@@ -81,10 +84,10 @@ const PerPageSelector = (props) => {
|
|
|
81
84
|
setIsOpened(false);
|
|
82
85
|
btnRef.current?.focus();
|
|
83
86
|
},
|
|
84
|
-
customOffset: [
|
|
85
|
-
startPlacementPreference: "top-
|
|
87
|
+
customOffset: [10, 2],
|
|
88
|
+
startPlacementPreference: "top-start",
|
|
86
89
|
actionRef,
|
|
87
|
-
minWidth: width
|
|
90
|
+
minWidth: width,
|
|
88
91
|
maxHeight: 300,
|
|
89
92
|
HeaderComp: () => "Per Page"
|
|
90
93
|
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4D;AAC5D,yBAAoB;AACpB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSPaginationProps } from '../index.d';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value: number | Record<string, unknown>) => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n };\n};\n\nconst getOptions = memoize((step: number, min: number, max: number) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n});\n\nconst PerPageSelector: React.ComponentType<\n Required<\n Pick<\n DSPaginationProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\n >\n> = (props) => {\n const [isOpened, setIsOpened] = useState(false);\n const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n const options = useMemo(() => {\n if (perPageOptions) return perPageOptions.map(generateOption);\n return getOptions(perPageStep, minPerPage, maxPerPage);\n }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n const btnRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageSize.toString());\n actionRef.current.scrollOptionIntoView(pageSize.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const width = useMemo(() => {\n const maxLength = options.reduce((acc, cur) => Math.max(acc, (cur?.label as string)?.length ?? 0), 0);\n return maxLength * 6 + 90;\n }, [options]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n customOffset={[10, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n minWidth={width}\n maxHeight={300}\n HeaderComp={() => 'Per Page'}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened((prev) => !prev)}\n aria-pressed={isOpened}\n innerRef={btnRef}\n >\n {pageSize} / page\n <ChevronDown color={['brand-primary', '700']} />\n </PaginationDropdownButton>\n </div>\n </DSDropdownMenuV2>\n );\n};\n\nexport default PerPageSelector;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA4D;AAC5D,yBAAoB;AACpB,0BAAsB;AACtB,6BAAiC;AACjC,sBAA4B;AAE5B,oBAAyC;AAEzC,MAAM,iBAAiB,CAAC,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;AAET,SAAO;AAAA,IACL,MAAM,MAAM;AAAA,IACZ;AAAA,IACA,OAAO,MAAM;AAAA,IACb,MAAM;AAAA;AAAA;AAIV,MAAM,aAAa,gCAAQ,CAAC,MAAc,KAAa,QAAgB;AACrE,QAAM,UAAU,+BAAM,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,2BAAS;AACzC,QAAM,EAAE,UAAU,kBAAkB,gBAAgB,YAAY,aAAa,eAAe;AAE5F,QAAM,UAAU,0BAAQ,MAAM;AAC5B,QAAI;AAAgB,aAAO,eAAe,IAAI;AAC9C,WAAO,WAAW,aAAa,YAAY;AAAA,KAC1C,CAAC,YAAY,YAAY,gBAAgB;AAE5C,QAAM,YAAY,yBAA+C;AACjE,QAAM,SAAS,yBAA0B;AAEzC,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS;AAC/C,gBAAU,QAAQ,qBAAqB,SAAS;AAAA;AAAA,KAGjD,CAAC;AAEJ,QAAM,QAAQ,0BAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAM,KAAK,OAAkB,UAAU,IAAI;AACnG,WAAO,YAAY,IAAI;AAAA,KACtB,CAAC;AAEJ,SACE,mDAAC,yCAAD;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,IAAI;AAAA,IACnB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY,MAAM;AAAA,KAElB,mDAAC,OAAD;AAAA,IAAK,OAAO,EAAE,YAAY;AAAA,KACxB,mDAAC,wCAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAS,MAAM,YAAY,CAAC,SAAS,CAAC;AAAA,IACtC,gBAAc;AAAA,IACd,UAAU;AAAA,KAET,UAAS,WACV,mDAAC,6BAAD;AAAA,IAAa,OAAO,CAAC,iBAAiB;AAAA;AAAA;AAOhD,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -73,11 +73,11 @@ const Paginator = (props) => {
|
|
|
73
73
|
setIsOpened(false);
|
|
74
74
|
btnRef.current?.focus();
|
|
75
75
|
},
|
|
76
|
-
customOffset: [
|
|
77
|
-
startPlacementPreference: "top-
|
|
76
|
+
customOffset: [-23, 2],
|
|
77
|
+
startPlacementPreference: "top-start",
|
|
78
78
|
actionRef,
|
|
79
79
|
onKeyDown,
|
|
80
|
-
minWidth: btnWidth + 23,
|
|
80
|
+
minWidth: pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90,
|
|
81
81
|
maxHeight: 300,
|
|
82
82
|
HeaderComp: () => pageDetailsTitle !== "" ? /* @__PURE__ */ React2.createElement(Grid, {
|
|
83
83
|
cols: [`${txtWidth + 50}px`, "8px", "auto"]
|
|
@@ -111,11 +111,11 @@ const Paginator = (props) => {
|
|
|
111
111
|
display: "grid"
|
|
112
112
|
}, /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
113
113
|
value: pageDetails[pageIndex]
|
|
114
|
-
}, pageDetails[pageIndex])
|
|
115
|
-
color: ["brand-primary", "700"]
|
|
116
|
-
}), pageDetails.map((pageDetail) => /* @__PURE__ */ React2.createElement(InvisibleDetail, {
|
|
114
|
+
}, pageDetails[pageIndex]), pageDetails.map((pageDetail) => /* @__PURE__ */ React2.createElement(InvisibleDetail, {
|
|
117
115
|
"data-testid": "ds-pagination-invisible-detail-for-width-calc"
|
|
118
|
-
}, pageDetail))))
|
|
116
|
+
}, pageDetail)))), /* @__PURE__ */ React2.createElement(ChevronDown, {
|
|
117
|
+
color: ["brand-primary", "700"]
|
|
118
|
+
})))), /* @__PURE__ */ React2.createElement(PaginationSeparator, null));
|
|
119
119
|
};
|
|
120
120
|
var Paginator_default = Paginator;
|
|
121
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, 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={[
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAUA,MAAM,YAAkD,CAAC,UAAU;AACjE,QAAM,EAAE,WAAW,WAAW,cAAc,aAAa,qBAAqB;AAE9E,QAAM,CAAC,UAAU,eAAe,SAAS;AAEzC,QAAM,SAAS,OAA0B;AACzC,QAAM,cAAc,OAAuB;AAE3C,QAAM,EAAE,OAAO,aAAa,mBAAmB;AAC/C,QAAM,EAAE,OAAO,aAAa,mBAAmB;AAE/C,QAAM,UAAU,QACd,MACE,IAAI,MAAM,WAAW,KAAK,GAAG,IAAI,CAAC,GAAG,UAAU;AAC7C,UAAM,SAAkC;AAAA,MACtC,MAAO,SAAQ,GAAG;AAAA,MAClB,OAAQ,SAAQ,GAAG;AAAA,MACnB,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA;AAER,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,MACd,qCAAC,MAAD;AAAA,QAAM,MAAM,CAAC,QAAQ,GAAG,WAAW,QAAQ;AAAA,QAAS,QAAO;AAAA,QAAM,YAAW;AAAA,SACzE,cAAc,QAAQ,qCAAC,WAAD;AAAA,QAAW,MAAK;AAAA,QAAI,OAAO,CAAC,iBAAiB;AAAA,WAAa,qCAAC,OAAD,OACjF,qCAAC,QAAD,MAAO,QAAQ,IACf,qCAAC,QAAD;AAAA,QACE,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,cAAc;AAAA,UACd,UAAU;AAAA;AAAA,SAGX,YAAY;AAAA;AAKrB,WAAO;AAAA,MAEX,CAAC,WAAW,aAAa,WAAW;AAGtC,QAAM,YAAY,OAA+C;AAEjE,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAqB,aAAY,GAAG;AACtD,gBAAU,QAAQ,qBAAsB,aAAY,GAAG;AAAA;AAAA,KAGxD,CAAC;AAEJ,QAAM,CAAC,aAAa,kBAAkB,SAAS;AAE/C,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB;AAAA;AAEpC,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,wBAAwB,QAAQ;AACzG,mBAAe;AAAA,KACd,CAAC;AAEJ,QAAM,YAAY,oBAAoB,WAAW;AAEjD,SACE,4DACE,qCAAC,qBAAD,OACA,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,iBAAiB,GAAI,aAAY,GAAG,aAAa;AAAA,IACjD,eAAe,CAAC,GAAG,kBAAkB;AACnC,mBAAa,cAAc;AAC3B,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,gBAAgB,MAAM;AACpB,kBAAY;AACZ,aAAO,SAAS;AAAA;AAAA,IAElB,cAAc,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Checkmark, ChevronDown } from '@elliemae/ds-icons';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport {\n InvisibleDetail,\n PaginationBoldText,\n PaginationDetail,\n PaginationDropdownButton,\n PaginationSeparator,\n} from '../styled';\nimport { usePaginationSearch } from '../hooks/usePaginationSearch';\n\ninterface PaginatorPropsT {\n pageIndex: number;\n pageCount: number;\n onPageChange: (page: number) => void;\n pageDetails: string[];\n pageDetailsTitle: string;\n}\n\nconst Paginator: React.ComponentType<PaginatorPropsT> = (props) => {\n const { pageIndex, pageCount, onPageChange, pageDetails, pageDetailsTitle } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const pageInfoRef = useRef<HTMLDivElement>(null);\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n const { width: txtWidth } = useOnElementResize(pageInfoRef);\n\n const options = useMemo(\n () =>\n new Array(pageCount).fill(0).map((_, index) => {\n const option: Record<string, unknown> = {\n dsId: (index + 1).toString(),\n label: (index + 1).toString(),\n value: index + 1,\n type: 'single',\n };\n if (pageDetails?.length) {\n option.render = () => (\n <Grid cols={['16px', `${txtWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n {pageIndex === index ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}\n <span>{index + 1}</span>\n <span\n style={{\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n }}\n >\n {pageDetails[index]}\n </span>\n </Grid>\n );\n }\n return option;\n }),\n [pageCount, pageDetails, pageIndex, txtWidth],\n );\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant((pageIndex + 1).toString());\n actionRef.current.scrollOptionIntoView((pageIndex + 1).toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const [detailWidth, setDetailWidth] = useState(0);\n\n useLayoutEffect(() => {\n const invisibleDetails = [\n ...document.body.querySelectorAll('[data-testid=\"ds-pagination-invisible-detail-for-width-calc\"]'),\n ] as HTMLDivElement[];\n const maxWidth = invisibleDetails.reduce((acc, cur) => Math.max(acc, cur.getBoundingClientRect().width), 0);\n setDetailWidth(maxWidth);\n }, [pageDetails]);\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n return (\n <>\n <PaginationSeparator />\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [(pageIndex + 1).toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n customOffset={[-23, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n onKeyDown={onKeyDown}\n minWidth={pageDetails.length !== 0 ? btnWidth + 23 : pageCount.toString().length * 6 + 90}\n maxHeight={300}\n HeaderComp={() =>\n pageDetailsTitle !== '' ? (\n <Grid cols={[`${txtWidth + 50}px`, '8px', 'auto']}>\n <span style={{ marginLeft: '8px' }}>Page</span>\n <PaginationSeparator height=\"100%\" />\n <span>{pageDetailsTitle}</span>\n </Grid>\n ) : (\n 'Page'\n )\n }\n >\n <PaginationDropdownButton buttonType=\"raw\" onClick={() => setIsOpened((prev) => !prev)} innerRef={btnRef}>\n <Grid\n gutter=\"xxs\"\n alignItems=\"center\"\n cols={\n pageDetails.length !== 0\n ? ['auto', 'min-content', 'minmax(0px, 70%)', 'min-content']\n : ['auto', 'min-content']\n }\n >\n <Grid alignItems=\"center\" gutter=\"xxxs\" ref={pageInfoRef} style={{ gridAutoFlow: 'column' }}>\n <PaginationBoldText fontSize=\"18px\">{pageIndex + 1}</PaginationBoldText> / {pageCount}\n </Grid>\n {pageDetails.length !== 0 && (\n <>\n <PaginationSeparator height=\"12px\" ml=\"8px\" />\n <PaginationBoldText fontSize=\"13px\" w={detailWidth} mr=\"xxs\" display=\"grid\">\n <SimpleTruncatedTooltipText value={pageDetails[pageIndex]}>\n {pageDetails[pageIndex]}\n </SimpleTruncatedTooltipText>\n {pageDetails.map((pageDetail) => (\n <InvisibleDetail data-testid=\"ds-pagination-invisible-detail-for-width-calc\">\n {pageDetail}\n </InvisibleDetail>\n ))}\n </PaginationBoldText>\n </>\n )}\n <ChevronDown color={['brand-primary', '700']} />\n </Grid>\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n <PaginationSeparator />\n </>\n );\n};\n\nexport default Paginator;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2, { useEffect, useMemo, useRef, useState } from "react";
|
|
3
3
|
import memoize from "memoize-one";
|
|
4
|
-
import { range
|
|
4
|
+
import { range } from "@elliemae/ds-utilities";
|
|
5
5
|
import { DSDropdownMenuV2 } from "@elliemae/ds-dropdownmenu";
|
|
6
6
|
import { ChevronDown } from "@elliemae/ds-icons";
|
|
7
7
|
import { PaginationDropdownButton } from "../styled";
|
|
@@ -36,7 +36,10 @@ const PerPageSelector = (props) => {
|
|
|
36
36
|
actionRef.current.scrollOptionIntoView(pageSize.toString());
|
|
37
37
|
}
|
|
38
38
|
}, [isOpened]);
|
|
39
|
-
const
|
|
39
|
+
const width = useMemo(() => {
|
|
40
|
+
const maxLength = options.reduce((acc, cur) => Math.max(acc, cur?.label?.length ?? 0), 0);
|
|
41
|
+
return maxLength * 6 + 90;
|
|
42
|
+
}, [options]);
|
|
40
43
|
return /* @__PURE__ */ React2.createElement(DSDropdownMenuV2, {
|
|
41
44
|
isOpened,
|
|
42
45
|
options,
|
|
@@ -50,10 +53,10 @@ const PerPageSelector = (props) => {
|
|
|
50
53
|
setIsOpened(false);
|
|
51
54
|
btnRef.current?.focus();
|
|
52
55
|
},
|
|
53
|
-
customOffset: [
|
|
54
|
-
startPlacementPreference: "top-
|
|
56
|
+
customOffset: [10, 2],
|
|
57
|
+
startPlacementPreference: "top-start",
|
|
55
58
|
actionRef,
|
|
56
|
-
minWidth: width
|
|
59
|
+
minWidth: width,
|
|
57
60
|
maxHeight: 300,
|
|
58
61
|
HeaderComp: () => "Per Page"
|
|
59
62
|
}, /* @__PURE__ */ React2.createElement("div", {
|
|
@@ -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
|
|
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,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport memoize from 'memoize-one';\nimport { range } from '@elliemae/ds-utilities';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { DSPaginationProps } from '../index.d';\nimport { PaginationDropdownButton } from '../styled';\n\nconst generateOption = (value: number | Record<string, unknown>) => {\n if (typeof value === 'object') {\n return value;\n }\n return {\n dsId: value.toString(),\n value,\n label: value.toString(),\n type: 'single',\n };\n};\n\nconst getOptions = memoize((step: number, min: number, max: number) => {\n const options = range(min, max + step, step).map(generateOption);\n return min === 0 ? options.slice(1, options.length) : options;\n});\n\nconst PerPageSelector: React.ComponentType<\n Required<\n Pick<\n DSPaginationProps,\n 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'\n >\n >\n> = (props) => {\n const [isOpened, setIsOpened] = useState(false);\n const { pageSize, onPageSizeChange, perPageOptions, maxPerPage, perPageStep, minPerPage } = props;\n\n const options = useMemo(() => {\n if (perPageOptions) return perPageOptions.map(generateOption);\n return getOptions(perPageStep, minPerPage, maxPerPage);\n }, [maxPerPage, minPerPage, perPageOptions, perPageStep]);\n\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n const btnRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageSize.toString());\n actionRef.current.scrollOptionIntoView(pageSize.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\n\n const width = useMemo(() => {\n const maxLength = options.reduce((acc, cur) => Math.max(acc, (cur?.label as string)?.length ?? 0), 0);\n return maxLength * 6 + 90;\n }, [options]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange(clickedOption.value);\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n onClickOutside={() => {\n setIsOpened(false);\n btnRef.current?.focus();\n }}\n customOffset={[10, 2]}\n startPlacementPreference=\"top-start\"\n actionRef={actionRef}\n minWidth={width}\n maxHeight={300}\n HeaderComp={() => 'Per Page'}\n >\n <div style={{ marginLeft: '32px' }}>\n <PaginationDropdownButton\n buttonType=\"raw\"\n onClick={() => setIsOpened((prev) => !prev)}\n aria-pressed={isOpened}\n innerRef={btnRef}\n >\n {pageSize} / page\n <ChevronDown color={['brand-primary', '700']} />\n </PaginationDropdownButton>\n </div>\n </DSDropdownMenuV2>\n );\n};\n\nexport default PerPageSelector;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,iBAAiB,CAAC,UAA4C;AAClE,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA;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,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAM,KAAK,OAAkB,UAAU,IAAI;AACnG,WAAO,YAAY,IAAI;AAAA,KACtB,CAAC;AAEJ,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,IAAI;AAAA,IACnB,0BAAyB;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,IACV,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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pagination",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pagination",
|
|
6
6
|
"files": [
|
|
@@ -75,13 +75,13 @@
|
|
|
75
75
|
"indent": 4
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@elliemae/ds-button": "3.0.0-alpha.
|
|
79
|
-
"@elliemae/ds-dropdownmenu": "3.0.0-alpha.
|
|
80
|
-
"@elliemae/ds-grid": "3.0.0-alpha.
|
|
81
|
-
"@elliemae/ds-icons": "3.0.0-alpha.
|
|
82
|
-
"@elliemae/ds-props-helpers": "3.0.0-alpha.
|
|
83
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.
|
|
84
|
-
"@elliemae/ds-utilities": "3.0.0-alpha.
|
|
78
|
+
"@elliemae/ds-button": "3.0.0-alpha.3",
|
|
79
|
+
"@elliemae/ds-dropdownmenu": "3.0.0-alpha.3",
|
|
80
|
+
"@elliemae/ds-grid": "3.0.0-alpha.3",
|
|
81
|
+
"@elliemae/ds-icons": "3.0.0-alpha.3",
|
|
82
|
+
"@elliemae/ds-props-helpers": "3.0.0-alpha.3",
|
|
83
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.3",
|
|
84
|
+
"@elliemae/ds-utilities": "3.0.0-alpha.3",
|
|
85
85
|
"memoize-one": "~5.1.1",
|
|
86
86
|
"react-desc": "~4.1.3"
|
|
87
87
|
},
|