@elliemae/ds-pagination 3.36.0-rc.0 → 3.37.0-next.0
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 +0 -1
- package/dist/cjs/Pagination.js.map +2 -2
- package/dist/cjs/parts/DSPageNextButton.js +1 -3
- package/dist/cjs/parts/DSPageNextButton.js.map +2 -2
- package/dist/cjs/parts/DSPagePrevButton.js +1 -3
- package/dist/cjs/parts/DSPagePrevButton.js.map +2 -2
- package/dist/cjs/parts/DSPaginationContainer.js +0 -1
- package/dist/cjs/parts/DSPaginationContainer.js.map +2 -2
- package/dist/cjs/parts/DSPaginator/createPaginatorHeader.js +1 -2
- package/dist/cjs/parts/DSPaginator/createPaginatorHeader.js.map +1 -1
- package/dist/cjs/parts/DSPaginator/getOptions.js.map +1 -1
- package/dist/cjs/parts/DSPaginator/index.js +1 -3
- package/dist/cjs/parts/DSPaginator/index.js.map +2 -2
- package/dist/cjs/parts/DSPaginator/usePaginationSearch.js +4 -8
- package/dist/cjs/parts/DSPaginator/usePaginationSearch.js.map +1 -1
- package/dist/cjs/parts/DSPaginator/usePaginator.js +1 -2
- package/dist/cjs/parts/DSPaginator/usePaginator.js.map +1 -1
- package/dist/cjs/parts/DSPerPageSelector/index.js +1 -3
- package/dist/cjs/parts/DSPerPageSelector/index.js.map +2 -2
- package/dist/cjs/parts/DSPerPageSelector/usePerPageSelector.js +1 -2
- package/dist/cjs/parts/DSPerPageSelector/usePerPageSelector.js.map +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/Pagination.js +0 -1
- package/dist/esm/Pagination.js.map +2 -2
- package/dist/esm/parts/DSPageNextButton.js +1 -3
- package/dist/esm/parts/DSPageNextButton.js.map +2 -2
- package/dist/esm/parts/DSPagePrevButton.js +1 -3
- package/dist/esm/parts/DSPagePrevButton.js.map +2 -2
- package/dist/esm/parts/DSPaginationContainer.js +0 -1
- package/dist/esm/parts/DSPaginationContainer.js.map +2 -2
- package/dist/esm/parts/DSPaginator/createPaginatorHeader.js +1 -2
- package/dist/esm/parts/DSPaginator/createPaginatorHeader.js.map +1 -1
- package/dist/esm/parts/DSPaginator/getOptions.js.map +1 -1
- package/dist/esm/parts/DSPaginator/index.js +1 -3
- package/dist/esm/parts/DSPaginator/index.js.map +2 -2
- package/dist/esm/parts/DSPaginator/usePaginationSearch.js +4 -8
- package/dist/esm/parts/DSPaginator/usePaginationSearch.js.map +1 -1
- package/dist/esm/parts/DSPaginator/usePaginator.js +1 -2
- package/dist/esm/parts/DSPaginator/usePaginator.js.map +1 -1
- package/dist/esm/parts/DSPerPageSelector/index.js +1 -3
- package/dist/esm/parts/DSPerPageSelector/index.js.map +2 -2
- package/dist/esm/parts/DSPerPageSelector/usePerPageSelector.js +1 -2
- package/dist/esm/parts/DSPerPageSelector/usePerPageSelector.js.map +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/parts/DSPaginator/usePaginationSearch.d.ts +1 -2
- package/dist/types/parts/DSPaginator/usePaginator.d.ts +105 -105
- package/dist/types/parts/DSPerPageSelector/usePerPageSelector.d.ts +105 -105
- package/package.json +11 -11
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/getOptions.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\n\ninterface OptionWithDetailsT {\n pageInfoWidth: number;\n pageIndex: number;\n index: number;\n pageDetails: string[] | readonly string[];\n}\n\nconst OptionWithDetails = (props: OptionWithDetailsT) => {\n const Comp = () => {\n const { pageInfoWidth, pageIndex, index, pageDetails } = props;\n return (\n <Grid cols={['16px', `${pageInfoWidth + 16}px`, 'auto']} gutter=\"xxs\" alignItems=\"center\">\n {pageIndex - 1 === 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 Comp;\n};\n\nexport const getOptions = (args: {\n pageCount: number | string;\n pageIndex: number;\n pageDetails: string[] | readonly string[];\n pageInfoWidth: number;\n}): DSDropdownMenuT.ItemSingleOptions[] => {\n const { pageCount, pageIndex, pageDetails, pageInfoWidth } = args;\n\n const amountOfPages = typeof pageCount === 'string' ? pageIndex + 1 : pageCount;\n\n const options = new Array(amountOfPages).fill(0).map((_, index) => {\n const option: DSDropdownMenuT.ItemSingleOptions = {\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 = OptionWithDetails({ pageInfoWidth, pageIndex, index, pageDetails });\n }\n return option;\n });\n return options;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgBjB,SAC6B,KAD7B;AAfN,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,YAAY,IAAI;AACzD,WACE,qBAAC,QAAK,MAAM,CAAC,QAAQ,GAAG,gBAAgB,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgBjB,SAC6B,KAD7B;AAfN,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAU1B,MAAM,oBAAoB,CAAC,UAA8B;AACvD,QAAM,OAAO,MAAM;AACjB,UAAM,EAAE,eAAe,WAAW,OAAO,YAAY,IAAI;AACzD,WACE,qBAAC,QAAK,MAAM,CAAC,QAAQ,GAAG,gBAAgB,EAAE,MAAM,MAAM,GAAG,QAAO,OAAM,YAAW,UAC9E;AAAA,kBAAY,MAAM,QAAQ,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI;AAAA,MAC1F,oBAAC,UAAM,kBAAQ,GAAE;AAAA,MACjB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,UAAU;AAAA,UACZ;AAAA,UAEC,sBAAY,KAAK;AAAA;AAAA,MACpB;AAAA,OACF;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,CAAC,SAKgB;AACzC,QAAM,EAAE,WAAW,WAAW,aAAa,cAAc,IAAI;AAE7D,QAAM,gBAAgB,OAAO,cAAc,WAAW,YAAY,IAAI;AAEtE,QAAM,UAAU,IAAI,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AACjE,UAAM,SAA4C;AAAA,MAChD,OAAO,QAAQ,GAAG,SAAS;AAAA,MAC3B,QAAQ,QAAQ,GAAG,SAAS;AAAA,MAC5B,OAAO,QAAQ;AAAA,MACf,MAAM;AAAA,IACR;AACA,QAAI,aAAa,QAAQ;AACvB,aAAO,SAAS,kBAAkB,EAAE,eAAe,WAAW,OAAO,YAAY,CAAC;AAAA,IACpF;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,8 +38,7 @@ const DSPaginator = (props) => {
|
|
|
38
38
|
[pageDetailsTitle, pageInfoWidth]
|
|
39
39
|
);
|
|
40
40
|
const buttonOnClick = useMemo(() => {
|
|
41
|
-
if (globalAttributes.onClick)
|
|
42
|
-
return globalAttributes.onClick;
|
|
41
|
+
if (globalAttributes.onClick) return globalAttributes.onClick;
|
|
43
42
|
return () => setIsOpened((prev) => !prev);
|
|
44
43
|
}, [globalAttributes.onClick, setIsOpened]);
|
|
45
44
|
return /* @__PURE__ */ jsxs(
|
|
@@ -107,7 +106,6 @@ const DSPaginator = (props) => {
|
|
|
107
106
|
}
|
|
108
107
|
);
|
|
109
108
|
};
|
|
110
|
-
DSPaginator.propTypes = DSPaginatorPropTypesSchema;
|
|
111
109
|
DSPaginator.displayName = PaginatorName;
|
|
112
110
|
const DSPaginatorWithSchema = describe(DSPaginator).description("Per Page Selector");
|
|
113
111
|
DSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled.js';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginatorName } from '../../DSPaginationDefinitions.js';\nimport { usePaginator } from './usePaginator.js';\nimport { createPaginatorHeader } from './createPaginatorHeader.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const DSPaginator: React.ComponentType<DSPaginationT.PaginatorProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PaginatorInternalProps>(\n props,\n paginatorDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefault, DSPaginatorPropTypesSchema, PaginatorName);\n\n const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;\n\n const {\n btnRef,\n btnWidth,\n pageInfoWidth,\n options,\n isOpened,\n setIsOpened,\n detailWidth,\n globalAttributes,\n xstyledAttributes,\n actionRef,\n onKeyDown,\n } = usePaginator(propsWithDefault);\n\n const Header = useMemo(\n () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth }),\n [pageDetailsTitle, pageInfoWidth],\n );\n\n const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n return () => setIsOpened((prev) => !prev);\n }, [globalAttributes.onClick, setIsOpened]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageIndex.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\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={Header}\n >\n <PaginationDropdownButton\n buttonType=\"raw\"\n disabled={isLoadingPageCount}\n innerRef={btnRef}\n aria-pressed={isOpened}\n aria-label={`Page ${pageIndex} out of ${pageCount}, ${\n pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : '\\b\\b'\n }. Press to change the current page`}\n data-testid={PAGINATION_DATA_TESTID.PAGINATOR}\n {...globalAttributes}\n {...xstyledAttributes}\n onClick={buttonOnClick}\n >\n <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n <DSTypography fontSize=\"18px\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n {pageIndex}\n </DSTypography>\n / {pageCount}\n {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n {pageDetails.length !== 0 && (\n <>\n <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" />\n <DSTypography\n fontSize=\"13px\"\n w={detailWidth}\n mr=\"xxs\"\n variant=\"b1\"\n as=\"span\"\n fontWeight=\"semibold\"\n textAlign=\"start\"\n >\n {pageDetails[pageIndex - 1]}\n </DSTypography>\n </>\n )}\n <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} />\n </Grid>\n </PaginationDropdownButton>\n {/* We calculate the length of the longest detail here (this is as per specs) */}\n <Grid style={{ position: 'relative' }}>\n {pageDetails.map((pageDetail) => (\n <InvisibleDiv data-testid=\"ds-pagination-invisible-detail-for-width-calc\" key={pageDetail}>\n <DSTypography fontSize=\"13px\" mr=\"xxs\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n {pageDetail}\n </DSTypography>\n </InvisibleDiv>\n ))}\n </Grid>\n </DSDropdownMenuV2>\n );\n};\n\nDSPaginator.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuFb,SAME,UANF,KAME,YANF;AAtFV,SAAgB,eAAe;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,wCAAwC;AACjD,SAAS,cAAc,0BAA0B,6BAA6B;AAC9E,SAAS,uBAAuB,kCAAkC;AAClE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAIhC,MAAM,cAAiE,CAAC,UAAU;AACvF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,4BAA4B,aAAa;AAE1F,QAAM,EAAE,WAAW,WAAW,oBAAoB,cAAc,aAAa,iBAAiB,IAAI;AAElG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,gBAAgB;AAEjC,QAAM,SAAS;AAAA,IACb,MAAM,sBAAsB,EAAE,kBAAkB,cAAc,CAAC;AAAA,IAC/D,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useMemo } from 'react';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled.js';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginatorName } from '../../DSPaginationDefinitions.js';\nimport { usePaginator } from './usePaginator.js';\nimport { createPaginatorHeader } from './createPaginatorHeader.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\n\nexport const DSPaginator: React.ComponentType<DSPaginationT.PaginatorProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PaginatorInternalProps>(\n props,\n paginatorDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefault, DSPaginatorPropTypesSchema, PaginatorName);\n\n const { pageIndex, pageCount, isLoadingPageCount, onPageChange, pageDetails, pageDetailsTitle } = propsWithDefault;\n\n const {\n btnRef,\n btnWidth,\n pageInfoWidth,\n options,\n isOpened,\n setIsOpened,\n detailWidth,\n globalAttributes,\n xstyledAttributes,\n actionRef,\n onKeyDown,\n } = usePaginator(propsWithDefault);\n\n const Header = useMemo(\n () => createPaginatorHeader({ pageDetailsTitle, pageInfoWidth }),\n [pageDetailsTitle, pageInfoWidth],\n );\n\n const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n return () => setIsOpened((prev) => !prev);\n }, [globalAttributes.onClick, setIsOpened]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageIndex.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\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={Header}\n >\n <PaginationDropdownButton\n buttonType=\"raw\"\n disabled={isLoadingPageCount}\n innerRef={btnRef}\n aria-pressed={isOpened}\n aria-label={`Page ${pageIndex} out of ${pageCount}, ${\n pageDetails.length !== 0 ? pageDetails[pageIndex - 1] : '\\b\\b'\n }. Press to change the current page`}\n data-testid={PAGINATION_DATA_TESTID.PAGINATOR}\n {...globalAttributes}\n {...xstyledAttributes}\n onClick={buttonOnClick}\n >\n <Grid gutter=\"xxxs\" alignItems=\"center\" style={{ gridAutoFlow: 'column' }}>\n <DSTypography fontSize=\"18px\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n {pageIndex}\n </DSTypography>\n / {pageCount}\n {isLoadingPageCount && <DSCircularIndeterminateIndicator ml=\"xxxs\" mr=\"xxxs\" size=\"xs\" />}\n {pageDetails.length !== 0 && (\n <>\n <DSPaginationSeparator height=\"12px\" ml=\"12px\" mr=\"xxxs\" />\n <DSTypography\n fontSize=\"13px\"\n w={detailWidth}\n mr=\"xxs\"\n variant=\"b1\"\n as=\"span\"\n fontWeight=\"semibold\"\n textAlign=\"start\"\n >\n {pageDetails[pageIndex - 1]}\n </DSTypography>\n </>\n )}\n <ChevronDown ml=\"xxxs\" color={['brand-primary', '700']} />\n </Grid>\n </PaginationDropdownButton>\n {/* We calculate the length of the longest detail here (this is as per specs) */}\n <Grid style={{ position: 'relative' }}>\n {pageDetails.map((pageDetail) => (\n <InvisibleDiv data-testid=\"ds-pagination-invisible-detail-for-width-calc\" key={pageDetail}>\n <DSTypography fontSize=\"13px\" mr=\"xxs\" variant=\"b1\" as=\"span\" fontWeight=\"semibold\" textAlign=\"start\">\n {pageDetail}\n </DSTypography>\n </InvisibleDiv>\n ))}\n </Grid>\n </DSDropdownMenuV2>\n );\n};\n\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuFb,SAME,UANF,KAME,YANF;AAtFV,SAAgB,eAAe;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,YAAY;AACrB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,wCAAwC;AACjD,SAAS,cAAc,0BAA0B,6BAA6B;AAC9E,SAAS,uBAAuB,kCAAkC;AAClE,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AAIhC,MAAM,cAAiE,CAAC,UAAU;AACvF,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,4BAA4B,aAAa;AAE1F,QAAM,EAAE,WAAW,WAAW,oBAAoB,cAAc,aAAa,iBAAiB,IAAI;AAElG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,gBAAgB;AAEjC,QAAM,SAAS;AAAA,IACb,MAAM,sBAAsB,EAAE,kBAAkB,cAAc,CAAC;AAAA,IAC/D,CAAC,kBAAkB,aAAa;AAAA,EAClC;AAEA,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,UAAU,SAAS,CAAC,GAAG,KAAK;AAAA,MAChD,eAAe,CAAC,GAAG,kBAAkB;AACnC,qBAAc,cAAoD,KAAe;AACjF,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,KAAK,CAAC;AAAA,MACrB,0BAAyB;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UAAU,YAAY,WAAW,IAAI,WAAW,KAAK,UAAU,SAAS,EAAE,SAAS,IAAI;AAAA,MACvF,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,UAAU;AAAA,YACV,UAAU;AAAA,YACV,gBAAc;AAAA,YACd,cAAY,QAAQ,SAAS,WAAW,SAAS,KAC/C,YAAY,WAAW,IAAI,YAAY,YAAY,CAAC,IAAI,MAC1D;AAAA,YACA,eAAa,uBAAuB;AAAA,YACnC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,SAAS;AAAA,YAET,+BAAC,QAAK,QAAO,QAAO,YAAW,UAAS,OAAO,EAAE,cAAc,SAAS,GACtE;AAAA,kCAAC,gBAAa,UAAS,QAAO,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAClF,qBACH;AAAA,cAAe;AAAA,cACZ;AAAA,cACF,sBAAsB,oBAAC,oCAAiC,IAAG,QAAO,IAAG,QAAO,MAAK,MAAK;AAAA,cACtF,YAAY,WAAW,KACtB,iCACE;AAAA,oCAAC,yBAAsB,QAAO,QAAO,IAAG,QAAO,IAAG,QAAO;AAAA,gBACzD;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAS;AAAA,oBACT,GAAG;AAAA,oBACH,IAAG;AAAA,oBACH,SAAQ;AAAA,oBACR,IAAG;AAAA,oBACH,YAAW;AAAA,oBACX,WAAU;AAAA,oBAET,sBAAY,YAAY,CAAC;AAAA;AAAA,gBAC5B;AAAA,iBACF;AAAA,cAEF,oBAAC,eAAY,IAAG,QAAO,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA,eAC1D;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,QAAK,OAAO,EAAE,UAAU,WAAW,GACjC,sBAAY,IAAI,CAAC,eAChB,oBAAC,gBAAa,eAAY,iDACxB,8BAAC,gBAAa,UAAS,QAAO,IAAG,OAAM,SAAQ,MAAK,IAAG,QAAO,YAAW,YAAW,WAAU,SAC3F,sBACH,KAH6E,UAI/E,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,YAAY,cAAc;AACnB,MAAM,wBAAwB,SAAS,WAAW,EAAE,YAAY,mBAAmB;AAC1F,sBAAsB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,8 +5,7 @@ const usePaginationSearch = (pageCount, actionRef) => {
|
|
|
5
5
|
const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);
|
|
6
6
|
const timeoutRef = useRef();
|
|
7
7
|
useEffect(() => {
|
|
8
|
-
if (typeof pageCount === "string")
|
|
9
|
-
return;
|
|
8
|
+
if (typeof pageCount === "string") return;
|
|
10
9
|
if (searchValue !== "" && Number.parseInt(searchValue, 10) <= pageCount) {
|
|
11
10
|
actionRef.current.setActiveDescendant(searchValue);
|
|
12
11
|
actionRef.current.scrollOptionIntoView(searchValue);
|
|
@@ -15,13 +14,10 @@ const usePaginationSearch = (pageCount, actionRef) => {
|
|
|
15
14
|
const onKeyDown = useCallback(
|
|
16
15
|
(e) => {
|
|
17
16
|
if (e.code.startsWith("Digit")) {
|
|
18
|
-
if (shouldResetSearchValue)
|
|
19
|
-
|
|
20
|
-
else
|
|
21
|
-
setSearchValue((prevValue) => prevValue + e.key);
|
|
17
|
+
if (shouldResetSearchValue) setSearchValue(e.key);
|
|
18
|
+
else setSearchValue((prevValue) => prevValue + e.key);
|
|
22
19
|
setShouldResetSearchValue(false);
|
|
23
|
-
if (timeoutRef.current)
|
|
24
|
-
clearTimeout(timeoutRef.current);
|
|
20
|
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
|
|
25
21
|
timeoutRef.current = setTimeout(() => {
|
|
26
22
|
setShouldResetSearchValue(true);
|
|
27
23
|
}, 1e3);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/usePaginationSearch.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const usePaginationSearch = (\n pageCount: string | number,\n actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>,\n): React.KeyboardEventHandler => {\n const [searchValue, setSearchValue] = useState('');\n const [shouldResetSearchValue, setShouldResetSearchValue] = useState(true);\n\n const timeoutRef = useRef<NodeJS.Timeout>();\n\n useEffect(() => {\n if (typeof pageCount === 'string') return;\n\n if (searchValue !== '' && Number.parseInt(searchValue, 10) <= pageCount) {\n actionRef.current.setActiveDescendant(searchValue);\n actionRef.current.scrollOptionIntoView(searchValue);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [searchValue]);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code.startsWith('Digit')) {\n if (shouldResetSearchValue) setSearchValue(e.key);\n else setSearchValue((prevValue) => prevValue + e.key);\n\n setShouldResetSearchValue(false);\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n setShouldResetSearchValue(true);\n }, 1000);\n }\n },\n [shouldResetSearchValue],\n );\n\n return onKeyDown;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAElD,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,IAAI;AAEzE,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,QAAI,OAAO,cAAc;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAElD,MAAM,sBAAsB,CACjC,WACA,cAC+B;AAC/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,IAAI;AAEzE,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,QAAI,OAAO,cAAc,SAAU;AAEnC,QAAI,gBAAgB,MAAM,OAAO,SAAS,aAAa,EAAE,KAAK,WAAW;AACvE,gBAAU,QAAQ,oBAAoB,WAAW;AACjD,gBAAU,QAAQ,qBAAqB,WAAW;AAAA,IACpD;AAAA,EAEF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,KAAK,WAAW,OAAO,GAAG;AAC9B,YAAI,uBAAwB,gBAAe,EAAE,GAAG;AAAA,YAC3C,gBAAe,CAAC,cAAc,YAAY,EAAE,GAAG;AAEpD,kCAA0B,KAAK;AAC/B,YAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,mBAAW,UAAU,WAAW,MAAM;AACpC,oCAA0B,IAAI;AAAA,QAChC,GAAG,GAAI;AAAA,MACT;AAAA,IACF;AAAA,IACA,CAAC,sBAAsB;AAAA,EACzB;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,8 +34,7 @@ const usePaginator = (props) => {
|
|
|
34
34
|
}, [pageDetails]);
|
|
35
35
|
useEffect(() => {
|
|
36
36
|
setPageInfoWidth(() => {
|
|
37
|
-
if (detailWidth)
|
|
38
|
-
return btnWidth - detailWidth - 89;
|
|
37
|
+
if (detailWidth) return btnWidth - detailWidth - 89;
|
|
39
38
|
return btnWidth - 56;
|
|
40
39
|
});
|
|
41
40
|
}, [btnWidth, detailWidth]);
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPaginator/usePaginator.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { usePaginationSearch } from './usePaginationSearch.js';\nimport { getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\n\nexport const usePaginator = (props: DSPaginationT.PaginatorInternalProps) => {\n const { pageIndex, pageCount, pageDetails } = props;\n\n const [isOpened, setIsOpened] = useState(false);\n const [detailWidth, setDetailWidth] = useState(0);\n const [pageInfoWidth, setPageInfoWidth] = useState(0);\n\n const btnRef = useRef<HTMLButtonElement>(null);\n const actionRef = useRef<Record<string, (dsId: string) => void>>({});\n\n const { width: btnWidth } = useOnElementResize(btnRef);\n\n const options = useMemo(\n () => getOptions({ pageCount, pageIndex, pageDetails, pageInfoWidth }),\n [pageCount, pageIndex, pageDetails, pageInfoWidth],\n );\n\n const onKeyDown = usePaginationSearch(pageCount, actionRef);\n\n const globalAttributes = useGetGlobalAttributes<\n DSPaginationT.PaginatorInternalProps,\n HTMLButtonElement,\n DSButtonV2T.Props\n >(props);\n const xstyledAttributes = useGetXstyledProps(props);\n\n useEffect(() => {\n if (isOpened) {\n actionRef.current.setActiveDescendant(pageIndex.toString());\n actionRef.current.scrollOptionIntoView(pageIndex.toString());\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpened]);\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 useEffect(() => {\n setPageInfoWidth(() => {\n // Here we get the size of the page info\n // Inside of the button, we have the page info, the chevron, separators, page details and padding\n // We substract the detailWidth if present, and the padding + chevron + separators in each case\n if (detailWidth) return btnWidth - detailWidth - 89;\n return btnWidth - 56;\n });\n }, [btnWidth, detailWidth]);\n\n return {\n btnRef,\n btnWidth,\n pageInfoWidth,\n options,\n isOpened,\n setIsOpened,\n detailWidth,\n setDetailWidth,\n globalAttributes,\n xstyledAttributes,\n actionRef,\n onKeyDown,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AACtE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAIpB,MAAM,eAAe,CAAC,UAAgD;AAC3E,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAErD,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,QAAM,mBAAmB,uBAIvB,KAAK;AACP,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iBAAiB,SAAS,QAAQ,gBAAgB;AACtE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAIpB,MAAM,eAAe,CAAC,UAAgD;AAC3E,QAAM,EAAE,WAAW,WAAW,YAAY,IAAI;AAE9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAEpD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,YAAY,OAA+C,CAAC,CAAC;AAEnE,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,MAAM;AAErD,QAAM,UAAU;AAAA,IACd,MAAM,WAAW,EAAE,WAAW,WAAW,aAAa,cAAc,CAAC;AAAA,IACrE,CAAC,WAAW,WAAW,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,YAAY,oBAAoB,WAAW,SAAS;AAE1D,QAAM,mBAAmB,uBAIvB,KAAK;AACP,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,UAAU,SAAS,CAAC;AAC1D,gBAAU,QAAQ,qBAAqB,UAAU,SAAS,CAAC;AAAA,IAC7D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,kBAAgB,MAAM;AACpB,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,KAAK,iBAAiB,+DAA+D;AAAA,IACnG;AACA,UAAM,WAAW,iBAAiB,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,sBAAsB,EAAE,KAAK,GAAG,CAAC;AAC1G,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,qBAAiB,MAAM;AAIrB,UAAI,YAAa,QAAO,WAAW,cAAc;AACjD,aAAO,WAAW;AAAA,IACpB,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -19,8 +19,7 @@ const DSPerPageSelector = (props) => {
|
|
|
19
19
|
const { pageSize, onPageSizeChange } = propsWithDefault;
|
|
20
20
|
const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } = usePerPageSelector(propsWithDefault);
|
|
21
21
|
const buttonOnClick = useMemo(() => {
|
|
22
|
-
if (globalAttributes.onClick)
|
|
23
|
-
return globalAttributes.onClick;
|
|
22
|
+
if (globalAttributes.onClick) return globalAttributes.onClick;
|
|
24
23
|
return () => setIsOpened((prev) => !prev);
|
|
25
24
|
}, [globalAttributes.onClick, setIsOpened]);
|
|
26
25
|
return /* @__PURE__ */ jsx(
|
|
@@ -65,7 +64,6 @@ const DSPerPageSelector = (props) => {
|
|
|
65
64
|
}
|
|
66
65
|
);
|
|
67
66
|
};
|
|
68
|
-
DSPerPageSelector.propTypes = DSPerPageSelectorPropTypesSchema;
|
|
69
67
|
DSPerPageSelector.displayName = PerPageSelectorName;
|
|
70
68
|
const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description("Per Page Selector");
|
|
71
69
|
DSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginationDropdownButton } from '../../styled.js';\nimport { PerPageSelectorName } from '../../DSPaginationDefinitions.js';\nimport { usePerPageSelector } from './usePerPageSelector.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\n\nconst Header = () => <>{'Per Page'}</>;\n\nexport const DSPerPageSelector: React.ComponentType<DSPaginationT.PerPageSelectorProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PerPageSelectorInternalProps>(\n props,\n perPageSelectorDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);\n\n const { pageSize, onPageSizeChange } = propsWithDefault;\n\n const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } =\n usePerPageSelector(propsWithDefault);\n\n const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n return () => setIsOpened((prev) => !prev);\n }, [globalAttributes.onClick, setIsOpened]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\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 minWidth={width}\n maxHeight={300}\n HeaderComp={Header}\n >\n <PaginationDropdownButton\n buttonType=\"raw\"\n innerRef={btnRef}\n aria-pressed={isOpened}\n aria-label={`${pageSize} rows per page. Press to select rows per page`}\n data-testid={PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR}\n {...globalAttributes}\n {...xstyledAttributes}\n onClick={buttonOnClick}\n >\n {pageSize} / page\n <ChevronDown color={['brand-primary', '700']} />\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n );\n};\n\nDSPerPageSelector.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACaF,wBAwCf,YAxCe;AAbrB,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B,wCAAwC;AAC9E,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAIvC,MAAM,SAAS,MAAM,gCAAG,sBAAW;AAE5B,MAAM,oBAA6E,CAAC,UAAU;AACnG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,kCAAkC,mBAAmB;AAEtG,QAAM,EAAE,UAAU,iBAAiB,IAAI;AAEvC,QAAM,EAAE,WAAW,QAAQ,OAAO,UAAU,aAAa,SAAS,kBAAkB,kBAAkB,IACpG,mBAAmB,gBAAgB;AAErC,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu-v2';\nimport { DSDropdownMenuV2 } from '@elliemae/ds-dropdownmenu-v2';\nimport { ChevronDown } from '@elliemae/ds-icons';\nimport { perPageSelectorDefaultProps, DSPerPageSelectorPropTypesSchema } from '../../react-desc-prop-types.js';\nimport { PaginationDropdownButton } from '../../styled.js';\nimport { PerPageSelectorName } from '../../DSPaginationDefinitions.js';\nimport { usePerPageSelector } from './usePerPageSelector.js';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonT } from '@elliemae/ds-button-v2';\n\nconst Header = () => <>{'Per Page'}</>;\n\nexport const DSPerPageSelector: React.ComponentType<DSPaginationT.PerPageSelectorProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSPaginationT.PerPageSelectorInternalProps>(\n props,\n perPageSelectorDefaultProps,\n );\n useValidateTypescriptPropTypes(propsWithDefault, DSPerPageSelectorPropTypesSchema, PerPageSelectorName);\n\n const { pageSize, onPageSizeChange } = propsWithDefault;\n\n const { actionRef, btnRef, width, isOpened, setIsOpened, options, globalAttributes, xstyledAttributes } =\n usePerPageSelector(propsWithDefault);\n\n const buttonOnClick: DSButtonT.Props['onClick'] = useMemo(() => {\n if (globalAttributes.onClick) return globalAttributes.onClick as DSButtonT.Props['onClick'];\n return () => setIsOpened((prev) => !prev);\n }, [globalAttributes.onClick, setIsOpened]);\n\n return (\n <DSDropdownMenuV2\n isOpened={isOpened}\n options={options}\n selectedOptions={{ [pageSize.toString()]: true }}\n onOptionClick={(_, clickedOption) => {\n onPageSizeChange((clickedOption as DSDropdownMenuT.ItemSingleOptions).value as number);\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 minWidth={width}\n maxHeight={300}\n HeaderComp={Header}\n >\n <PaginationDropdownButton\n buttonType=\"raw\"\n innerRef={btnRef}\n aria-pressed={isOpened}\n aria-label={`${pageSize} rows per page. Press to select rows per page`}\n data-testid={PAGINATION_DATA_TESTID.PER_PAGE_SELECTOR}\n {...globalAttributes}\n {...xstyledAttributes}\n onClick={buttonOnClick}\n >\n {pageSize} / page\n <ChevronDown color={['brand-primary', '700']} />\n </PaginationDropdownButton>\n </DSDropdownMenuV2>\n );\n};\n\nDSPerPageSelector.displayName = PerPageSelectorName;\nexport const DSPerPageSelectorWithSchema = describe(DSPerPageSelector).description('Per Page Selector');\nDSPerPageSelectorWithSchema.propTypes = DSPerPageSelectorPropTypesSchema;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACaF,wBAwCf,YAxCe;AAbrB,SAAgB,eAAe;AAC/B,SAAS,UAAU,8BAA8B,sCAAsC;AAEvF,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B,wCAAwC;AAC9E,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAIvC,MAAM,SAAS,MAAM,gCAAG,sBAAW;AAE5B,MAAM,oBAA6E,CAAC,UAAU;AACnG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,iCAA+B,kBAAkB,kCAAkC,mBAAmB;AAEtG,QAAM,EAAE,UAAU,iBAAiB,IAAI;AAEvC,QAAM,EAAE,WAAW,QAAQ,OAAO,UAAU,aAAa,SAAS,kBAAkB,kBAAkB,IACpG,mBAAmB,gBAAgB;AAErC,QAAM,gBAA4C,QAAQ,MAAM;AAC9D,QAAI,iBAAiB,QAAS,QAAO,iBAAiB;AACtD,WAAO,MAAM,YAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC1C,GAAG,CAAC,iBAAiB,SAAS,WAAW,CAAC;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,EAAE,CAAC,SAAS,SAAS,CAAC,GAAG,KAAK;AAAA,MAC/C,eAAe,CAAC,GAAG,kBAAkB;AACnC,yBAAkB,cAAoD,KAAe;AACrF,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,KAAK,CAAC;AAAA,MACrB,0BAAyB;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,MACX,YAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,UAAU;AAAA,UACV,gBAAc;AAAA,UACd,cAAY,GAAG,QAAQ;AAAA,UACvB,eAAa,uBAAuB;AAAA,UACnC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UAER;AAAA;AAAA,YAAS;AAAA,YACV,oBAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA;AAAA,MAChD;AAAA;AAAA,EACF;AAEJ;AAEA,kBAAkB,cAAc;AACzB,MAAM,8BAA8B,SAAS,iBAAiB,EAAE,YAAY,mBAAmB;AACtG,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,8 +6,7 @@ const usePerPageSelector = (props) => {
|
|
|
6
6
|
const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;
|
|
7
7
|
const [isOpened, setIsOpened] = useState(false);
|
|
8
8
|
const options = useMemo(() => {
|
|
9
|
-
if (perPageOptions)
|
|
10
|
-
return perPageOptions.map(generateOption);
|
|
9
|
+
if (perPageOptions) return perPageOptions.map(generateOption);
|
|
11
10
|
return getOptions(perPageStep, minPerPage, maxPerPage);
|
|
12
11
|
}, [maxPerPage, minPerPage, perPageOptions, perPageStep]);
|
|
13
12
|
const actionRef = useRef({});
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/usePerPageSelector.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { generateOption, getOptions } from './getOptions.js';\nimport type { DSPaginationT } from '../../react-desc-prop-types.js';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\n\nexport const usePerPageSelector = (props: DSPaginationT.PerPageSelectorInternalProps) => {\n const { pageSize, perPageOptions, perPageStep, minPerPage, maxPerPage } = props;\n\n const [isOpened, setIsOpened] = useState(false);\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, ('label' in cur ? cur.label : '').length), 0);\n return maxLength * 6 + 90;\n }, [options]);\n\n const globalAttributes = useGetGlobalAttributes<\n DSPaginationT.PerPageSelectorInternalProps,\n HTMLButtonElement,\n DSButtonV2T.Props\n >(props);\n const xstyledAttributes = useGetXstyledProps(props);\n\n return {\n actionRef,\n btnRef,\n width,\n isOpened,\n setIsOpened,\n options,\n globalAttributes,\n xstyledAttributes,\n };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,gBAAgB,kBAAkB;AAIpC,MAAM,qBAAqB,CAAC,UAAsD;AACvF,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAE1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AACrD,SAAS,wBAAwB,0BAA0B;AAC3D,SAAS,gBAAgB,kBAAkB;AAIpC,MAAM,qBAAqB,CAAC,UAAsD;AACvF,QAAM,EAAE,UAAU,gBAAgB,aAAa,YAAY,WAAW,IAAI;AAE1E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,eAAgB,QAAO,eAAe,IAAI,cAAc;AAC5D,WAAO,WAAW,aAAa,YAAY,UAAU;AAAA,EACvD,GAAG,CAAC,YAAY,YAAY,gBAAgB,WAAW,CAAC;AAExD,QAAM,YAAY,OAA+C,CAAC,CAAC;AACnE,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,gBAAU,QAAQ,oBAAoB,SAAS,SAAS,CAAC;AACzD,gBAAU,QAAQ,qBAAqB,SAAS,SAAS,CAAC;AAAA,IAC5D;AAAA,EAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,QAAQ,KAAK,IAAI,MAAM,WAAW,MAAM,IAAI,QAAQ,IAAI,MAAM,GAAG,CAAC;AACzG,WAAO,YAAY,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,mBAAmB,uBAIvB,KAAK;AACP,QAAM,oBAAoB,mBAAmB,KAAK;AAElD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\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 StyledPaginationContainer = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n height: 42px;\n max-width: 100%;\n align-items: center;\n justify-content: center;\n box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n position: relative;\n ${xStyledCommonProps}\n`;\n\nexport const StyledPaginationWrapper = styled.div`\n display: grid;\n grid-auto-flow: column;\n justify-content: center;\n align-items: center;\n`;\n\nexport const DSPaginationSeparator = styled(Grid)<React.ComponentProps<typeof Grid> & XstyledProps>`\n background-color: ${(props) => props.theme.colors.neutral[300]};\n width: 1px;\n height: 30px;\n ${xStyledCommonProps}\n`;\n\nexport const InvisibleDiv = styled.div`\n opacity: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n position: absolute;\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: 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"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,QAAQ,WAAW;AAIhD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,QAAQ,WAAW;AAIhD,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,4BAA4B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhD,kBAAkB;AAAA;AAGf,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvC,MAAM,wBAAwB,OAAO,IAAI;AAAA,sBAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,IAG5D,kBAAkB;AAAA;AAGf,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,2BAA2B,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAcxC,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQb,MAAM,yBAAyB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3C,CAAC,UAAW,MAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA,MAE7D,cAAc;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const usePaginationSearch: (pageCount: string | number, actionRef: import("react").MutableRefObject<Record<string, (dsId: string) => void>>) => React.KeyboardEventHandler;
|
|
1
|
+
export declare const usePaginationSearch: (pageCount: string | number, actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>) => React.KeyboardEventHandler;
|
|
@@ -10,55 +10,82 @@ export declare const usePaginator: (props: DSPaginationT.PaginatorInternalProps)
|
|
|
10
10
|
setIsOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
|
|
11
11
|
detailWidth: number;
|
|
12
12
|
setDetailWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
13
|
-
globalAttributes: Partial<Pick<DSButtonV2T.Props, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "
|
|
13
|
+
globalAttributes: Partial<Pick<DSButtonV2T.Props, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "suppressHydrationWarning" | "className" | "color" | "height" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "width" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "download" | "hrefLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dateTime" | "open" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "size" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "start" | "selected" | "async" | "defer" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "wrap" | "default" | "kind" | "srcLang" | "poster"> & Omit<{
|
|
14
|
+
cite?: string | undefined;
|
|
15
|
+
data?: string | undefined;
|
|
16
|
+
form?: string | undefined;
|
|
17
|
+
label?: string | undefined;
|
|
18
|
+
slot?: string | undefined;
|
|
19
|
+
span?: number | undefined;
|
|
20
|
+
style?: import("react").CSSProperties | undefined;
|
|
21
|
+
summary?: string | undefined;
|
|
22
|
+
title?: string | undefined;
|
|
23
|
+
pattern?: string | undefined;
|
|
24
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
25
|
+
className?: string | undefined;
|
|
26
|
+
color?: string | undefined;
|
|
27
|
+
height?: string | number | undefined;
|
|
28
|
+
id?: string | undefined;
|
|
29
|
+
lang?: string | undefined;
|
|
30
|
+
max?: string | number | undefined;
|
|
31
|
+
media?: string | undefined;
|
|
32
|
+
method?: string | undefined;
|
|
33
|
+
min?: string | number | undefined;
|
|
14
34
|
name?: string | undefined;
|
|
35
|
+
target?: string | undefined;
|
|
36
|
+
type?: string | undefined;
|
|
37
|
+
width?: string | number | undefined;
|
|
38
|
+
role?: import("react").AriaRole | undefined;
|
|
39
|
+
tabIndex?: 0 | -1 | undefined;
|
|
40
|
+
crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
|
|
41
|
+
href?: string | undefined;
|
|
15
42
|
"aria-activedescendant"?: string | undefined;
|
|
16
|
-
"aria-atomic"?: boolean | "true" | "false" | undefined;
|
|
43
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
17
44
|
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
18
45
|
"aria-braillelabel"?: string | undefined;
|
|
19
46
|
"aria-brailleroledescription"?: string | undefined;
|
|
20
|
-
"aria-busy"?: boolean | "true" | "false" | undefined;
|
|
47
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
21
48
|
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
22
49
|
"aria-colcount"?: number | undefined;
|
|
23
50
|
"aria-colindex"?: number | undefined;
|
|
24
51
|
"aria-colindextext"?: string | undefined;
|
|
25
52
|
"aria-colspan"?: number | undefined;
|
|
26
53
|
"aria-controls"?: string | undefined;
|
|
27
|
-
"aria-current"?: boolean | "time" | "
|
|
54
|
+
"aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
|
|
28
55
|
"aria-describedby"?: string | undefined;
|
|
29
56
|
"aria-description"?: string | undefined;
|
|
30
57
|
"aria-details"?: string | undefined;
|
|
31
|
-
"aria-disabled"?: boolean | "true" | "false" | undefined;
|
|
58
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
32
59
|
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
33
60
|
"aria-errormessage"?: string | undefined;
|
|
34
|
-
"aria-expanded"?: boolean | "true" | "false" | undefined;
|
|
61
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
35
62
|
"aria-flowto"?: string | undefined;
|
|
36
|
-
"aria-grabbed"?: boolean | "true" | "false" | undefined;
|
|
63
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
37
64
|
"aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
|
|
38
|
-
"aria-hidden"?: boolean | "true" | "false" | undefined;
|
|
65
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
39
66
|
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
40
67
|
"aria-keyshortcuts"?: string | undefined;
|
|
41
68
|
"aria-label"?: string | undefined;
|
|
42
69
|
"aria-labelledby"?: string | undefined;
|
|
43
70
|
"aria-level"?: number | undefined;
|
|
44
71
|
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
45
|
-
"aria-modal"?: boolean | "true" | "false" | undefined;
|
|
46
|
-
"aria-multiline"?: boolean | "true" | "false" | undefined;
|
|
47
|
-
"aria-multiselectable"?: boolean | "true" | "false" | undefined;
|
|
72
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
73
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
74
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
48
75
|
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
49
76
|
"aria-owns"?: string | undefined;
|
|
50
77
|
"aria-placeholder"?: string | undefined;
|
|
51
78
|
"aria-posinset"?: number | undefined;
|
|
52
79
|
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
53
|
-
"aria-readonly"?: boolean | "true" | "false" | undefined;
|
|
80
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
54
81
|
"aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
55
|
-
"aria-required"?: boolean | "true" | "false" | undefined;
|
|
82
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
56
83
|
"aria-roledescription"?: string | undefined;
|
|
57
84
|
"aria-rowcount"?: number | undefined;
|
|
58
85
|
"aria-rowindex"?: number | undefined;
|
|
59
86
|
"aria-rowindextext"?: string | undefined;
|
|
60
87
|
"aria-rowspan"?: number | undefined;
|
|
61
|
-
"aria-selected"?: boolean | "true" | "false" | undefined;
|
|
88
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
62
89
|
"aria-setsize"?: number | undefined;
|
|
63
90
|
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
64
91
|
"aria-valuemax"?: number | undefined;
|
|
@@ -226,31 +253,23 @@ export declare const usePaginator: (props: DSPaginationT.PaginatorInternalProps)
|
|
|
226
253
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
|
|
227
254
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
228
255
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
|
|
229
|
-
|
|
230
|
-
|
|
256
|
+
classID?: string | undefined;
|
|
257
|
+
useMap?: string | undefined;
|
|
258
|
+
wmode?: string | undefined;
|
|
231
259
|
defaultChecked?: boolean | undefined;
|
|
232
260
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
233
261
|
suppressContentEditableWarning?: boolean | undefined;
|
|
234
|
-
suppressHydrationWarning?: boolean | undefined;
|
|
235
262
|
accessKey?: string | undefined;
|
|
236
263
|
autoFocus?: boolean | undefined;
|
|
237
|
-
|
|
238
|
-
contentEditable?: boolean | "true" | "false" | "inherit" | "plaintext-only" | undefined;
|
|
264
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
239
265
|
contextMenu?: string | undefined;
|
|
240
266
|
dir?: string | undefined;
|
|
241
|
-
draggable?: boolean | "true" | "false" | undefined;
|
|
267
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
242
268
|
hidden?: boolean | undefined;
|
|
243
|
-
id?: string | undefined;
|
|
244
|
-
lang?: string | undefined;
|
|
245
269
|
nonce?: string | undefined;
|
|
246
|
-
|
|
247
|
-
spellCheck?: boolean | "true" | "false" | undefined;
|
|
248
|
-
style?: import("react").CSSProperties | undefined;
|
|
249
|
-
tabIndex?: 0 | -1 | undefined;
|
|
250
|
-
title?: string | undefined;
|
|
270
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
251
271
|
translate?: "yes" | "no" | undefined;
|
|
252
272
|
radioGroup?: string | undefined;
|
|
253
|
-
role?: import("react").AriaRole | undefined;
|
|
254
273
|
about?: string | undefined;
|
|
255
274
|
content?: string | undefined;
|
|
256
275
|
datatype?: string | undefined;
|
|
@@ -265,7 +284,6 @@ export declare const usePaginator: (props: DSPaginationT.PaginatorInternalProps)
|
|
|
265
284
|
autoCapitalize?: string | undefined;
|
|
266
285
|
autoCorrect?: string | undefined;
|
|
267
286
|
autoSave?: string | undefined;
|
|
268
|
-
color?: string | undefined;
|
|
269
287
|
itemProp?: string | undefined;
|
|
270
288
|
itemScope?: boolean | undefined;
|
|
271
289
|
itemType?: string | undefined;
|
|
@@ -276,104 +294,86 @@ export declare const usePaginator: (props: DSPaginationT.PaginatorInternalProps)
|
|
|
276
294
|
unselectable?: "on" | "off" | undefined;
|
|
277
295
|
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
278
296
|
is?: string | undefined;
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
action?: string | undefined;
|
|
282
|
-
allowFullScreen?: boolean | undefined;
|
|
283
|
-
allowTransparency?: boolean | undefined;
|
|
297
|
+
download?: any;
|
|
298
|
+
hrefLang?: string | undefined;
|
|
284
299
|
alt?: string | undefined;
|
|
285
|
-
|
|
286
|
-
|
|
300
|
+
coords?: string | undefined;
|
|
301
|
+
shape?: string | undefined;
|
|
287
302
|
autoPlay?: boolean | undefined;
|
|
288
|
-
capture?: boolean | "user" | "environment" | undefined;
|
|
289
|
-
cellPadding?: string | number | undefined;
|
|
290
|
-
cellSpacing?: string | number | undefined;
|
|
291
|
-
charSet?: string | undefined;
|
|
292
|
-
challenge?: string | undefined;
|
|
293
|
-
checked?: boolean | undefined;
|
|
294
|
-
cite?: string | undefined;
|
|
295
|
-
classID?: string | undefined;
|
|
296
|
-
cols?: number | undefined;
|
|
297
|
-
colSpan?: number | undefined;
|
|
298
303
|
controls?: boolean | undefined;
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
304
|
+
loop?: boolean | undefined;
|
|
305
|
+
mediaGroup?: string | undefined;
|
|
306
|
+
muted?: boolean | undefined;
|
|
307
|
+
playsInline?: boolean | undefined;
|
|
308
|
+
preload?: string | undefined;
|
|
309
|
+
src?: string | undefined;
|
|
305
310
|
disabled?: boolean | undefined;
|
|
306
|
-
download?: any;
|
|
307
|
-
encType?: string | undefined;
|
|
308
311
|
formAction?: string | undefined;
|
|
309
312
|
formEncType?: string | undefined;
|
|
310
313
|
formMethod?: string | undefined;
|
|
311
314
|
formNoValidate?: boolean | undefined;
|
|
312
315
|
formTarget?: string | undefined;
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
integrity?: string | undefined;
|
|
322
|
-
keyParams?: string | undefined;
|
|
323
|
-
keyType?: string | undefined;
|
|
324
|
-
kind?: string | undefined;
|
|
325
|
-
label?: string | undefined;
|
|
326
|
-
loop?: boolean | undefined;
|
|
327
|
-
low?: number | undefined;
|
|
316
|
+
value?: string | number | readonly string[] | undefined;
|
|
317
|
+
dateTime?: string | undefined;
|
|
318
|
+
open?: boolean | undefined;
|
|
319
|
+
acceptCharset?: string | undefined;
|
|
320
|
+
action?: string | undefined;
|
|
321
|
+
autoComplete?: string | undefined;
|
|
322
|
+
encType?: string | undefined;
|
|
323
|
+
noValidate?: boolean | undefined;
|
|
328
324
|
manifest?: string | undefined;
|
|
325
|
+
allowFullScreen?: boolean | undefined;
|
|
326
|
+
allowTransparency?: boolean | undefined;
|
|
327
|
+
frameBorder?: string | number | undefined;
|
|
329
328
|
marginHeight?: number | undefined;
|
|
330
329
|
marginWidth?: number | undefined;
|
|
331
|
-
|
|
330
|
+
sandbox?: string | undefined;
|
|
331
|
+
scrolling?: string | undefined;
|
|
332
|
+
seamless?: boolean | undefined;
|
|
333
|
+
srcDoc?: string | undefined;
|
|
334
|
+
sizes?: string | undefined;
|
|
335
|
+
srcSet?: string | undefined;
|
|
336
|
+
accept?: string | undefined;
|
|
337
|
+
capture?: boolean | "user" | "environment" | undefined;
|
|
338
|
+
checked?: boolean | undefined;
|
|
339
|
+
list?: string | undefined;
|
|
332
340
|
maxLength?: number | undefined;
|
|
333
|
-
media?: string | undefined;
|
|
334
|
-
mediaGroup?: string | undefined;
|
|
335
|
-
method?: string | undefined;
|
|
336
|
-
min?: string | number | undefined;
|
|
337
341
|
minLength?: number | undefined;
|
|
338
342
|
multiple?: boolean | undefined;
|
|
339
|
-
muted?: boolean | undefined;
|
|
340
|
-
noValidate?: boolean | undefined;
|
|
341
|
-
open?: boolean | undefined;
|
|
342
|
-
optimum?: number | undefined;
|
|
343
|
-
pattern?: string | undefined;
|
|
344
343
|
placeholder?: string | undefined;
|
|
345
|
-
playsInline?: boolean | undefined;
|
|
346
|
-
poster?: string | undefined;
|
|
347
|
-
preload?: string | undefined;
|
|
348
344
|
readOnly?: boolean | undefined;
|
|
349
345
|
required?: boolean | undefined;
|
|
346
|
+
size?: number | undefined;
|
|
347
|
+
step?: string | number | undefined;
|
|
348
|
+
challenge?: string | undefined;
|
|
349
|
+
keyType?: string | undefined;
|
|
350
|
+
keyParams?: string | undefined;
|
|
351
|
+
htmlFor?: string | undefined;
|
|
352
|
+
integrity?: string | undefined;
|
|
353
|
+
charSet?: string | undefined;
|
|
354
|
+
httpEquiv?: string | undefined;
|
|
355
|
+
high?: number | undefined;
|
|
356
|
+
low?: number | undefined;
|
|
357
|
+
optimum?: number | undefined;
|
|
350
358
|
reversed?: boolean | undefined;
|
|
351
|
-
|
|
359
|
+
start?: number | undefined;
|
|
360
|
+
selected?: boolean | undefined;
|
|
361
|
+
async?: boolean | undefined;
|
|
362
|
+
defer?: boolean | undefined;
|
|
363
|
+
scoped?: boolean | undefined;
|
|
364
|
+
cellPadding?: string | number | undefined;
|
|
365
|
+
cellSpacing?: string | number | undefined;
|
|
366
|
+
colSpan?: number | undefined;
|
|
367
|
+
headers?: string | undefined;
|
|
352
368
|
rowSpan?: number | undefined;
|
|
353
|
-
sandbox?: string | undefined;
|
|
354
369
|
scope?: string | undefined;
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
seamless?: boolean | undefined;
|
|
358
|
-
selected?: boolean | undefined;
|
|
359
|
-
shape?: string | undefined;
|
|
360
|
-
size?: number | undefined;
|
|
361
|
-
sizes?: string | undefined;
|
|
362
|
-
span?: number | undefined;
|
|
363
|
-
src?: string | undefined;
|
|
364
|
-
srcDoc?: string | undefined;
|
|
365
|
-
srcLang?: string | undefined;
|
|
366
|
-
srcSet?: string | undefined;
|
|
367
|
-
start?: number | undefined;
|
|
368
|
-
step?: string | number | undefined;
|
|
369
|
-
summary?: string | undefined;
|
|
370
|
-
target?: string | undefined;
|
|
371
|
-
type?: string | undefined;
|
|
372
|
-
useMap?: string | undefined;
|
|
373
|
-
value?: string | number | readonly string[] | undefined;
|
|
374
|
-
width?: string | number | undefined;
|
|
375
|
-
wmode?: string | undefined;
|
|
370
|
+
cols?: number | undefined;
|
|
371
|
+
rows?: number | undefined;
|
|
376
372
|
wrap?: string | undefined;
|
|
373
|
+
default?: boolean | undefined;
|
|
374
|
+
kind?: string | undefined;
|
|
375
|
+
srcLang?: string | undefined;
|
|
376
|
+
poster?: string | undefined;
|
|
377
377
|
}, keyof DSButtonV2T.Props>>;
|
|
378
378
|
xstyledAttributes: import("@elliemae/ds-props-helpers").XstyledProps;
|
|
379
379
|
actionRef: import("react").MutableRefObject<Record<string, (dsId: string) => void>>;
|