@elliemae/ds-pagination 3.16.0-next.6 → 3.16.0-next.8
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.
|
@@ -119,7 +119,7 @@ const DSPaginator = (props) => {
|
|
|
119
119
|
{
|
|
120
120
|
fontSize: "13px",
|
|
121
121
|
w: detailWidth,
|
|
122
|
-
mr: "
|
|
122
|
+
mr: "xxs",
|
|
123
123
|
variant: "b1",
|
|
124
124
|
as: "span",
|
|
125
125
|
fontWeight: "semibold",
|
|
@@ -128,7 +128,7 @@ const DSPaginator = (props) => {
|
|
|
128
128
|
}
|
|
129
129
|
)
|
|
130
130
|
] }),
|
|
131
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: ["brand-primary", "700"] })
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"] })
|
|
132
132
|
] })
|
|
133
133
|
}
|
|
134
134
|
),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/DSPaginator/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* 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';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types';\nimport { PaginatorName } from '../../DSPaginationDefinitions';\nimport { usePaginator } from './usePaginator';\nimport { createPaginatorHeader } from './createPaginatorHeader';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\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=\"
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* 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';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types';\nimport { PaginatorName } from '../../DSPaginationDefinitions';\nimport { usePaginator } from './usePaginator';\nimport { createPaginatorHeader } from './createPaginatorHeader';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\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.propTypes = DSPaginatorPropTypesSchema;\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -89,7 +89,7 @@ const DSPaginator = (props) => {
|
|
|
89
89
|
{
|
|
90
90
|
fontSize: "13px",
|
|
91
91
|
w: detailWidth,
|
|
92
|
-
mr: "
|
|
92
|
+
mr: "xxs",
|
|
93
93
|
variant: "b1",
|
|
94
94
|
as: "span",
|
|
95
95
|
fontWeight: "semibold",
|
|
@@ -98,7 +98,7 @@ const DSPaginator = (props) => {
|
|
|
98
98
|
}
|
|
99
99
|
)
|
|
100
100
|
] }),
|
|
101
|
-
/* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "700"] })
|
|
101
|
+
/* @__PURE__ */ jsx(ChevronDown, { ml: "xxxs", color: ["brand-primary", "700"] })
|
|
102
102
|
] })
|
|
103
103
|
}
|
|
104
104
|
),
|
|
@@ -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';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types';\nimport { PaginatorName } from '../../DSPaginationDefinitions';\nimport { usePaginator } from './usePaginator';\nimport { createPaginatorHeader } from './createPaginatorHeader';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\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=\"
|
|
5
|
-
"mappings": "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
|
|
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';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { InvisibleDiv, PaginationDropdownButton, DSPaginationSeparator } from '../../styled';\nimport { paginatorDefaultProps, DSPaginatorPropTypesSchema } from '../../react-desc-prop-types';\nimport { PaginatorName } from '../../DSPaginationDefinitions';\nimport { usePaginator } from './usePaginator';\nimport { createPaginatorHeader } from './createPaginatorHeader';\nimport { PAGINATION_DATA_TESTID } from '../../PaginationDataTestID';\nimport type { DSDropdownMenuT } from '@elliemae/ds-dropdownmenu';\nimport type { DSPaginationT } from '../../react-desc-prop-types';\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.propTypes = DSPaginatorPropTypesSchema;\nDSPaginator.displayName = PaginatorName;\nexport const DSPaginatorWithSchema = describe(DSPaginator).description('Per Page Selector');\nDSPaginatorWithSchema.propTypes = DSPaginatorPropTypesSchema;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-pagination",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Pagination",
|
|
6
6
|
"files": [
|
|
@@ -77,15 +77,15 @@
|
|
|
77
77
|
"dependencies": {
|
|
78
78
|
"@xstyled/system": "~3.7.0",
|
|
79
79
|
"@xstyled/util": "~3.7.0",
|
|
80
|
-
"@elliemae/ds-
|
|
81
|
-
"@elliemae/ds-
|
|
82
|
-
"@elliemae/ds-dropdownmenu": "3.16.0-next.
|
|
83
|
-
"@elliemae/ds-grid": "3.16.0-next.
|
|
84
|
-
"@elliemae/ds-
|
|
85
|
-
"@elliemae/ds-
|
|
86
|
-
"@elliemae/ds-system": "3.16.0-next.
|
|
87
|
-
"@elliemae/ds-
|
|
88
|
-
"@elliemae/ds-
|
|
80
|
+
"@elliemae/ds-circular-progress-indicator": "3.16.0-next.8",
|
|
81
|
+
"@elliemae/ds-button-v2": "3.16.0-next.8",
|
|
82
|
+
"@elliemae/ds-dropdownmenu": "3.16.0-next.8",
|
|
83
|
+
"@elliemae/ds-grid": "3.16.0-next.8",
|
|
84
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.8",
|
|
85
|
+
"@elliemae/ds-icons": "3.16.0-next.8",
|
|
86
|
+
"@elliemae/ds-system": "3.16.0-next.8",
|
|
87
|
+
"@elliemae/ds-utilities": "3.16.0-next.8",
|
|
88
|
+
"@elliemae/ds-typography": "3.16.0-next.8"
|
|
89
89
|
},
|
|
90
90
|
"devDependencies": {
|
|
91
91
|
"@testing-library/jest-dom": "~5.16.5",
|