@veeqo/ui 10.2.0 → 10.4.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/README.md +7 -0
- package/dist/components/Choice/Choice.cjs +1 -1
- package/dist/components/Choice/Choice.cjs.map +1 -1
- package/dist/components/Choice/Choice.js +1 -1
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/components/Pagination/Pagination.cjs +6 -7
- package/dist/components/Pagination/Pagination.cjs.map +1 -1
- package/dist/components/Pagination/Pagination.js +6 -7
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/components.cjs +3 -3
- package/dist/components/Pagination/components.cjs.map +1 -1
- package/dist/components/Pagination/components.js +3 -3
- package/dist/components/Pagination/components.js.map +1 -1
- package/dist/components/Pagination/styled.cjs +4 -5
- package/dist/components/Pagination/styled.cjs.map +1 -1
- package/dist/components/Pagination/styled.d.ts +6 -1
- package/dist/components/Pagination/styled.js +4 -5
- package/dist/components/Pagination/styled.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -64,6 +64,13 @@ From this repo run `npm run build:tarball` this will create a tarball file, simi
|
|
|
64
64
|
"@veeqo/ui": "file:../veeqo-ui/veeqo-ui.tgz"
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
+
#### Deploying a beta version
|
|
68
|
+
|
|
69
|
+
1. Update version number to `<next-version>-beta-<attempt_num>`, i.e. 9.0.0-beta-2
|
|
70
|
+
2. Push your branch with the latest changes to Github, including the version number update
|
|
71
|
+
3. Navigate to <https://github.com/veeqo/veeqo-ui/actions/workflows/publish-npm-beta.yml>
|
|
72
|
+
4. Click "Run workflow" and select the branch with your beta version
|
|
73
|
+
|
|
67
74
|
Alternatively you can deploy to npm with a beta version, as long as you are part of our NPM org:
|
|
68
75
|
|
|
69
76
|
- Update version number to `<next-version>-beta-<attempt_num>`, i.e. 9.0.0-beta-2
|
|
@@ -26,7 +26,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
26
26
|
label || hint || error || Badge || Footer ? (React__default.default.createElement(styled.TextLayout, null,
|
|
27
27
|
React__default.default.createElement(Stack.Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
28
28
|
Badge,
|
|
29
|
-
label && (React__default.default.createElement(Text.Text, {
|
|
29
|
+
label && (React__default.default.createElement(Text.Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
30
30
|
(tooltip || tooltipContent) && (React__default.default.createElement(styled.BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
31
31
|
React__default.default.createElement(HelpIcon.HelpIcon, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
|
|
32
32
|
hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text
|
|
1
|
+
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.lightest}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <Text variant=\"error\" className={classNames.error}>\n {error}\n </Text>\n )}\n {Footer}\n </TextLayout>\n ) : null}\n {inputPosition === 'right' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n </RootLayout>\n );\n\n if (bordered) {\n return (\n <BorderedWrapper disabled={disabled} className={className}>\n {contentMarkup}\n </BorderedWrapper>\n );\n }\n\n return (\n <Wrapper disabled={disabled} className={className}>\n {contentMarkup}\n </Wrapper>\n );\n};\n"],"names":["React","RootLayout","InputLayout","AccessoryLayout","TextLayout","Stack","Text","BlockTooltip","HelpIcon","theme","BorderedWrapper","Wrapper"],"mappings":"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"}
|
|
@@ -20,7 +20,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
20
20
|
label || hint || error || Badge || Footer ? (React__default.createElement(TextLayout, null,
|
|
21
21
|
React__default.createElement(Stack, { direction: "horizontal", alignY: "center", spacing: "sm" },
|
|
22
22
|
Badge,
|
|
23
|
-
label && (React__default.createElement(Text, {
|
|
23
|
+
label && (React__default.createElement(Text, { variant: labelVariant, className: classNames.label }, label)),
|
|
24
24
|
(tooltip || tooltipContent) && (React__default.createElement(BlockTooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
25
25
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
|
|
26
26
|
hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text
|
|
1
|
+
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\n\nimport {\n Wrapper,\n BorderedWrapper,\n RootLayout,\n InputLayout,\n AccessoryLayout,\n TextLayout,\n BlockTooltip,\n} from './components/styled';\nimport { HelpIcon } from '../../icons/HelpIcon';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nexport interface ForwardedChoiceProps {\n className?: string;\n disabled?: boolean;\n label?: ReactNode;\n hint?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n error?: ReactNode;\n bordered?: boolean;\n Badge?: ReactNode;\n Accessory?: ReactNode;\n Footer?: ReactNode;\n inputPosition?: 'left' | 'right';\n labelVariant?: TextVariant;\n}\n\nexport interface ChoiceProps extends ForwardedChoiceProps {\n htmlFor: string;\n children: ReactNode;\n}\n\nconst generateClassNames = (prefix?: string): any => ({\n hint: prefix ? 'choice__hint' : undefined,\n label: prefix ? 'choice__label' : undefined,\n tooltip: prefix ? 'choice__tooltip' : undefined,\n error: prefix ? 'choice__error' : undefined,\n});\n\nexport const Choice = ({\n htmlFor,\n className,\n label,\n hint,\n tooltip,\n tooltipContent,\n error,\n bordered,\n Badge,\n Accessory,\n Footer,\n children,\n disabled = false,\n labelVariant = 'body',\n inputPosition = 'left',\n}: ChoiceProps) => {\n const classNames = generateClassNames(className);\n\n const contentMarkup = (\n <RootLayout>\n {inputPosition === 'left' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}\n {label || hint || error || Badge || Footer ? (\n <TextLayout>\n <Stack direction=\"horizontal\" alignY=\"center\" spacing=\"sm\">\n {Badge}\n {label && (\n <Text variant={labelVariant} className={classNames.label}>\n {label}\n </Text>\n )}\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent} className={classNames.tooltip}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n name=\"help\"\n width={theme.sizes.base}\n color={theme.colors.neutral.ink.lightest}\n />\n </BlockTooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <Text variant=\"error\" className={classNames.error}>\n {error}\n </Text>\n )}\n {Footer}\n </TextLayout>\n ) : null}\n {inputPosition === 'right' && (\n <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>\n )}\n </RootLayout>\n );\n\n if (bordered) {\n return (\n <BorderedWrapper disabled={disabled} className={className}>\n {contentMarkup}\n </BorderedWrapper>\n );\n }\n\n return (\n <Wrapper disabled={disabled} className={className}>\n {contentMarkup}\n </Wrapper>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var Stack = require('../Stack/Stack.cjs');
|
|
5
|
-
require('../Stack/types.cjs');
|
|
6
4
|
var styled = require('./styled.cjs');
|
|
7
5
|
var components = require('./components.cjs');
|
|
8
6
|
var usePagination = require('./hooks/usePagination.cjs');
|
|
@@ -10,6 +8,7 @@ var RightArrowIcon = require('../../icons/RightArrowIcon.cjs');
|
|
|
10
8
|
var StartArrowIcon = require('../../icons/StartArrowIcon.cjs');
|
|
11
9
|
var LeftArrowIcon = require('../../icons/LeftArrowIcon.cjs');
|
|
12
10
|
var EndArrowIcon = require('../../icons/EndArrowIcon.cjs');
|
|
11
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
13
12
|
|
|
14
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
14
|
|
|
@@ -35,14 +34,14 @@ const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handle
|
|
|
35
34
|
if (currentPage !== totalPagesCount)
|
|
36
35
|
handleChangePage(totalPagesCount);
|
|
37
36
|
};
|
|
38
|
-
return (React__default.default.createElement(
|
|
39
|
-
React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.default.createElement(StartArrowIcon.StartArrowIcon, null), size: "sm", "aria-label": "go to first page" }),
|
|
40
|
-
React__default.default.createElement(styled.PaginationButton, { onClick: handleDecrement, iconSlot: React__default.default.createElement(LeftArrowIcon.LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1 }),
|
|
37
|
+
return (React__default.default.createElement(FlexRow.FlexRow, { alignItems: "center", gap: "xs", "data-testid": testId, className: e2eClassName },
|
|
38
|
+
React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.default.createElement(StartArrowIcon.StartArrowIcon, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
|
|
39
|
+
React__default.default.createElement(styled.PaginationButton, { onClick: handleDecrement, iconSlot: React__default.default.createElement(LeftArrowIcon.LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
|
|
41
40
|
React__default.default.createElement("form", { onSubmit: handleFormSubmit },
|
|
42
41
|
React__default.default.createElement(styled.PageInput, { "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
|
|
43
42
|
React__default.default.createElement(components.PageCount, { count: totalPagesCount }),
|
|
44
|
-
React__default.default.createElement(styled.PaginationButton, { onClick: handleIncrement, iconSlot: React__default.default.createElement(RightArrowIcon.RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount }),
|
|
45
|
-
React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.default.createElement(EndArrowIcon.EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount })));
|
|
43
|
+
React__default.default.createElement(styled.PaginationButton, { onClick: handleIncrement, iconSlot: React__default.default.createElement(RightArrowIcon.RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
|
|
44
|
+
React__default.default.createElement(styled.PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.default.createElement(EndArrowIcon.EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
|
|
46
45
|
};
|
|
47
46
|
|
|
48
47
|
exports.Pagination = Pagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { StartArrowIcon } from '../../icons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../icons/EndArrowIcon';\nimport { FlexRow } from '../Flex/FlexRow';\n\nexport const Pagination = ({\n testId,\n e2eClassName,\n currentPage,\n totalPagesCount,\n handleChangePage,\n}: PaginationProps) => {\n const {\n pageInputValue,\n handleIncrement,\n handleDecrement,\n handleFormSubmit,\n handleInputChange,\n handleSubmit,\n } = usePagination({\n currentPage,\n totalPagesCount,\n handleChangePage,\n });\n\n /**\n * A function to go back to the first page, provided we aren't already there.\n */\n const handleSkipBack = () => {\n if (currentPage !== 1) handleChangePage(1);\n };\n\n /**\n * A function to go to the last page, provided we aren't already there.\n */\n const handleSkipToEnd = () => {\n if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n };\n\n return (\n <FlexRow alignItems=\"center\" gap=\"xs\" data-testid={testId} className={e2eClassName}>\n <PaginationButton\n onClick={handleSkipBack}\n iconSlot={<StartArrowIcon />}\n size=\"sm\"\n aria-label=\"go to first page\"\n aria-disabled={currentPage <= 1}\n disabled={currentPage <= 1}\n />\n <PaginationButton\n onClick={handleDecrement}\n iconSlot={<LeftArrowIcon />}\n size=\"sm\"\n aria-label=\"go to previous page\"\n aria-disabled={currentPage <= 1}\n disabled={currentPage <= 1}\n />\n\n <form onSubmit={handleFormSubmit}>\n <PageInput\n aria-live=\"polite\"\n aria-label={`page ${currentPage} of ${totalPagesCount}`}\n size=\"sm\"\n type=\"number\"\n value={pageInputValue}\n min=\"1\"\n max={`${totalPagesCount}`}\n onChange={handleInputChange}\n onBlur={handleSubmit}\n />\n </form>\n\n <PageCount count={totalPagesCount} />\n\n <PaginationButton\n onClick={handleIncrement}\n iconSlot={<RightArrowIcon />}\n size=\"sm\"\n aria-label=\"go to next page\"\n aria-disabled={currentPage >= totalPagesCount}\n disabled={currentPage >= totalPagesCount}\n />\n\n <PaginationButton\n onClick={handleSkipToEnd}\n iconSlot={<EndArrowIcon />}\n size=\"sm\"\n aria-label=\"go to last page\"\n aria-disabled={currentPage >= totalPagesCount}\n disabled={currentPage >= totalPagesCount}\n />\n </FlexRow>\n );\n};\n"],"names":["usePagination","React","FlexRow","PaginationButton","StartArrowIcon","LeftArrowIcon","PageInput","PageCount","RightArrowIcon","EndArrowIcon"],"mappings":";;;;;;;;;;;;;;;;AAaa,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAGA,2BAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,eAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAc,aAAA,EAAA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAA;QAChFD,sBAAC,CAAA,aAAA,CAAAE,uBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACG,6BAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,kBAAkB,EACd,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QACFH,sBAAC,CAAA,aAAA,CAAAE,uBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAA,IAAA,CAAG,EAC3B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QAEFJ,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,sBAAA,CAAA,aAAA,CAACK,gBAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,GAAG,eAAe,CAAA,CAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAAL,sBAAA,CAAA,aAAA,CAACM,oBAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCN,sBAAC,CAAA,aAAA,CAAAE,uBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAA,CAAA,aAAA,CAACO,6BAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA;AAEF,QAAAP,sBAAA,CAAA,aAAA,CAACE,uBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEF,sBAAC,CAAA,aAAA,CAAAQ,yBAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA,CACM;AAEd;;;;"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { Stack } from '../Stack/Stack.js';
|
|
3
|
-
import '../Stack/types.js';
|
|
4
2
|
import { PaginationButton, PageInput } from './styled.js';
|
|
5
3
|
import { PageCount } from './components.js';
|
|
6
4
|
import { usePagination } from './hooks/usePagination.js';
|
|
@@ -8,6 +6,7 @@ import { RightArrowIcon } from '../../icons/RightArrowIcon.js';
|
|
|
8
6
|
import { StartArrowIcon } from '../../icons/StartArrowIcon.js';
|
|
9
7
|
import { LeftArrowIcon } from '../../icons/LeftArrowIcon.js';
|
|
10
8
|
import { EndArrowIcon } from '../../icons/EndArrowIcon.js';
|
|
9
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
11
10
|
|
|
12
11
|
const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handleChangePage, }) => {
|
|
13
12
|
const { pageInputValue, handleIncrement, handleDecrement, handleFormSubmit, handleInputChange, handleSubmit, } = usePagination({
|
|
@@ -29,14 +28,14 @@ const Pagination = ({ testId, e2eClassName, currentPage, totalPagesCount, handle
|
|
|
29
28
|
if (currentPage !== totalPagesCount)
|
|
30
29
|
handleChangePage(totalPagesCount);
|
|
31
30
|
};
|
|
32
|
-
return (React__default.createElement(
|
|
33
|
-
React__default.createElement(PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.createElement(StartArrowIcon, null), size: "sm", "aria-label": "go to first page" }),
|
|
34
|
-
React__default.createElement(PaginationButton, { onClick: handleDecrement, iconSlot: React__default.createElement(LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1 }),
|
|
31
|
+
return (React__default.createElement(FlexRow, { alignItems: "center", gap: "xs", "data-testid": testId, className: e2eClassName },
|
|
32
|
+
React__default.createElement(PaginationButton, { onClick: handleSkipBack, iconSlot: React__default.createElement(StartArrowIcon, null), size: "sm", "aria-label": "go to first page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
|
|
33
|
+
React__default.createElement(PaginationButton, { onClick: handleDecrement, iconSlot: React__default.createElement(LeftArrowIcon, null), size: "sm", "aria-label": "go to previous page", "aria-disabled": currentPage <= 1, disabled: currentPage <= 1 }),
|
|
35
34
|
React__default.createElement("form", { onSubmit: handleFormSubmit },
|
|
36
35
|
React__default.createElement(PageInput, { "aria-live": "polite", "aria-label": `page ${currentPage} of ${totalPagesCount}`, size: "sm", type: "number", value: pageInputValue, min: "1", max: `${totalPagesCount}`, onChange: handleInputChange, onBlur: handleSubmit })),
|
|
37
36
|
React__default.createElement(PageCount, { count: totalPagesCount }),
|
|
38
|
-
React__default.createElement(PaginationButton, { onClick: handleIncrement, iconSlot: React__default.createElement(RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount }),
|
|
39
|
-
React__default.createElement(PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.createElement(EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount })));
|
|
37
|
+
React__default.createElement(PaginationButton, { onClick: handleIncrement, iconSlot: React__default.createElement(RightArrowIcon, null), size: "sm", "aria-label": "go to next page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount }),
|
|
38
|
+
React__default.createElement(PaginationButton, { onClick: handleSkipToEnd, iconSlot: React__default.createElement(EndArrowIcon, null), size: "sm", "aria-label": "go to last page", "aria-disabled": currentPage >= totalPagesCount, disabled: currentPage >= totalPagesCount })));
|
|
40
39
|
};
|
|
41
40
|
|
|
42
41
|
export { Pagination };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport {
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport { PaginationProps } from './types';\n\nimport { PageInput, PaginationButton } from './styled';\nimport { PageCount } from './components';\nimport { usePagination } from './hooks/usePagination';\n\nimport { RightArrowIcon } from '../../icons/RightArrowIcon';\nimport { StartArrowIcon } from '../../icons/StartArrowIcon';\nimport { LeftArrowIcon } from '../../icons/LeftArrowIcon';\nimport { EndArrowIcon } from '../../icons/EndArrowIcon';\nimport { FlexRow } from '../Flex/FlexRow';\n\nexport const Pagination = ({\n testId,\n e2eClassName,\n currentPage,\n totalPagesCount,\n handleChangePage,\n}: PaginationProps) => {\n const {\n pageInputValue,\n handleIncrement,\n handleDecrement,\n handleFormSubmit,\n handleInputChange,\n handleSubmit,\n } = usePagination({\n currentPage,\n totalPagesCount,\n handleChangePage,\n });\n\n /**\n * A function to go back to the first page, provided we aren't already there.\n */\n const handleSkipBack = () => {\n if (currentPage !== 1) handleChangePage(1);\n };\n\n /**\n * A function to go to the last page, provided we aren't already there.\n */\n const handleSkipToEnd = () => {\n if (currentPage !== totalPagesCount) handleChangePage(totalPagesCount);\n };\n\n return (\n <FlexRow alignItems=\"center\" gap=\"xs\" data-testid={testId} className={e2eClassName}>\n <PaginationButton\n onClick={handleSkipBack}\n iconSlot={<StartArrowIcon />}\n size=\"sm\"\n aria-label=\"go to first page\"\n aria-disabled={currentPage <= 1}\n disabled={currentPage <= 1}\n />\n <PaginationButton\n onClick={handleDecrement}\n iconSlot={<LeftArrowIcon />}\n size=\"sm\"\n aria-label=\"go to previous page\"\n aria-disabled={currentPage <= 1}\n disabled={currentPage <= 1}\n />\n\n <form onSubmit={handleFormSubmit}>\n <PageInput\n aria-live=\"polite\"\n aria-label={`page ${currentPage} of ${totalPagesCount}`}\n size=\"sm\"\n type=\"number\"\n value={pageInputValue}\n min=\"1\"\n max={`${totalPagesCount}`}\n onChange={handleInputChange}\n onBlur={handleSubmit}\n />\n </form>\n\n <PageCount count={totalPagesCount} />\n\n <PaginationButton\n onClick={handleIncrement}\n iconSlot={<RightArrowIcon />}\n size=\"sm\"\n aria-label=\"go to next page\"\n aria-disabled={currentPage >= totalPagesCount}\n disabled={currentPage >= totalPagesCount}\n />\n\n <PaginationButton\n onClick={handleSkipToEnd}\n iconSlot={<EndArrowIcon />}\n size=\"sm\"\n aria-label=\"go to last page\"\n aria-disabled={currentPage >= totalPagesCount}\n disabled={currentPage >= totalPagesCount}\n />\n </FlexRow>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAaa,MAAA,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GACA,KAAI;AACpB,IAAA,MAAM,EACJ,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,YAAY,GACb,GAAG,aAAa,CAAC;QAChB,WAAW;QACX,eAAe;QACf,gBAAgB;AACjB,KAAA,CAAC;AAEF;;AAEG;IACH,MAAM,cAAc,GAAG,MAAK;QAC1B,IAAI,WAAW,KAAK,CAAC;YAAE,gBAAgB,CAAC,CAAC,CAAC;AAC5C,KAAC;AAED;;AAEG;IACH,MAAM,eAAe,GAAG,MAAK;QAC3B,IAAI,WAAW,KAAK,eAAe;YAAE,gBAAgB,CAAC,eAAe,CAAC;AACxE,KAAC;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,EAAC,EAAA,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAc,aAAA,EAAA,MAAM,EAAE,SAAS,EAAE,YAAY,EAAA;QAChFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,kBAAkB,EACd,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QACFA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,EAC3B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,qBAAqB,EACjB,eAAA,EAAA,WAAW,IAAI,CAAC,EAC/B,QAAQ,EAAE,WAAW,IAAI,CAAC,EAC1B,CAAA;QAEFA,cAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,QAAQ,EAAE,gBAAgB,EAAA;AAC9B,YAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EACE,EAAA,WAAA,EAAA,QAAQ,gBACN,CAAQ,KAAA,EAAA,WAAW,OAAO,eAAe,CAAA,CAAE,EACvD,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,EACrB,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,GAAG,eAAe,CAAA,CAAE,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,MAAM,EAAE,YAAY,GACpB,CACG;AAEP,QAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,eAAe,EAAI,CAAA;QAErCA,cAAC,CAAA,aAAA,CAAA,gBAAgB,EACf,EAAA,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG,EAC5B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA;AAEF,QAAAA,cAAA,CAAA,aAAA,CAAC,gBAAgB,EAAA,EACf,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAG,IAAA,CAAA,EAC1B,IAAI,EAAC,IAAI,EACE,YAAA,EAAA,iBAAiB,EACb,eAAA,EAAA,WAAW,IAAI,eAAe,EAC7C,QAAQ,EAAE,WAAW,IAAI,eAAe,EACxC,CAAA,CACM;AAEd;;;;"}
|
|
@@ -10,9 +10,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
10
10
|
|
|
11
11
|
const PageCount = ({ count }) => (React__default.default.createElement(React__default.default.Fragment, null,
|
|
12
12
|
React__default.default.createElement("div", null,
|
|
13
|
-
React__default.default.createElement(Text.Text, { variant: "
|
|
14
|
-
React__default.default.createElement(styled.PageLimitContainer, {
|
|
15
|
-
React__default.default.createElement(Text.Text, { variant: "
|
|
13
|
+
React__default.default.createElement(Text.Text, { variant: "bodySmallBold", "aria-hidden": true }, "/")),
|
|
14
|
+
React__default.default.createElement(styled.PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
|
|
15
|
+
React__default.default.createElement(Text.Text, { variant: "body" }, count))));
|
|
16
16
|
|
|
17
17
|
exports.PageCount = PageCount;
|
|
18
18
|
//# sourceMappingURL=components.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.cjs","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"
|
|
1
|
+
{"version":3,"file":"components.cjs","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"bodySmallBold\" aria-hidden>\n /\n </Text>\n </div>\n <PageLimitContainer alignItems=\"center\" justifyContent=\"center\" aria-hidden>\n <Text variant=\"body\">{count}</Text>\n </PageLimitContainer>\n </>\n);\n"],"names":["React","Text","PageLimitContainer"],"mappings":";;;;;;;;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,sBAAA,CAAA,aAAA,CAAAA,sBAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,sBAAA,CAAA,aAAA,CAACC,SAAI,EAAC,EAAA,OAAO,EAAC,eAAe,6BAEtB,CACH;IACND,sBAAC,CAAA,aAAA,CAAAE,yBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DF,sBAAC,CAAA,aAAA,CAAAC,SAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ,CAChB,CACpB;;;;"}
|
|
@@ -4,9 +4,9 @@ import { PageLimitContainer } from './styled.js';
|
|
|
4
4
|
|
|
5
5
|
const PageCount = ({ count }) => (React__default.createElement(React__default.Fragment, null,
|
|
6
6
|
React__default.createElement("div", null,
|
|
7
|
-
React__default.createElement(Text, { variant: "
|
|
8
|
-
React__default.createElement(PageLimitContainer, {
|
|
9
|
-
React__default.createElement(Text, { variant: "
|
|
7
|
+
React__default.createElement(Text, { variant: "bodySmallBold", "aria-hidden": true }, "/")),
|
|
8
|
+
React__default.createElement(PageLimitContainer, { alignItems: "center", justifyContent: "center", "aria-hidden": true },
|
|
9
|
+
React__default.createElement(Text, { variant: "body" }, count))));
|
|
10
10
|
|
|
11
11
|
export { PageCount };
|
|
12
12
|
//# sourceMappingURL=components.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"
|
|
1
|
+
{"version":3,"file":"components.js","sources":["../../../src/components/Pagination/components.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from '../Text';\nimport { PageLimitContainer } from './styled';\n\nexport const PageCount = ({ count }: { count: number }) => (\n <>\n <div>\n <Text variant=\"bodySmallBold\" aria-hidden>\n /\n </Text>\n </div>\n <PageLimitContainer alignItems=\"center\" justifyContent=\"center\" aria-hidden>\n <Text variant=\"body\">{count}</Text>\n </PageLimitContainer>\n </>\n);\n"],"names":["React"],"mappings":";;;;AAIa,MAAA,SAAS,GAAG,CAAC,EAAE,KAAK,EAAqB,MACpDA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,IAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,OAAO,EAAC,eAAe,6BAEtB,CACH;IACNA,cAAC,CAAA,aAAA,CAAA,kBAAkB,IAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAA,aAAA,EAAA,IAAA,EAAA;QAC7DA,cAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,OAAO,EAAC,MAAM,EAAE,EAAA,KAAK,CAAQ,CAChB,CACpB;;;;"}
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styled = require('styled-components');
|
|
4
4
|
var index = require('../../theme/index.cjs');
|
|
5
|
-
var
|
|
6
|
-
require('../Stack/types.cjs');
|
|
5
|
+
var FlexRow = require('../Flex/FlexRow/FlexRow.cjs');
|
|
7
6
|
var Button = require('../Button/Button.cjs');
|
|
8
7
|
var index$1 = require('../TextField/index.cjs');
|
|
9
8
|
|
|
@@ -11,9 +10,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
10
|
|
|
12
11
|
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
13
12
|
|
|
14
|
-
const PageLimitContainer = styled__default.default(
|
|
15
|
-
const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${index.theme.colors.neutral.ink.base};width
|
|
16
|
-
const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:
|
|
13
|
+
const PageLimitContainer = styled__default.default(FlexRow.FlexRow).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `box-sizing:border-box;min-width:${index.theme.sizes[10]};height:${index.theme.sizes.lg};padding:0 ${index.theme.sizes[3]};background-color:${index.theme.colors.neutral.grey.light};border:1px solid ${index.theme.colors.neutral.grey.dark};border-radius:${index.theme.sizes.xs};`;
|
|
14
|
+
const PaginationButton = styled__default.default(Button.Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${index.theme.colors.neutral.ink.base};width:${index.theme.sizes.lg};height:${index.theme.sizes.lg};svg{width:${index.theme.sizes.md};height:${index.theme.sizes.md};}`;
|
|
15
|
+
const PageInput = styled__default.default(index$1.TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{min-width:auto;}`;
|
|
17
16
|
|
|
18
17
|
exports.PageInput = PageInput;
|
|
19
18
|
exports.PageLimitContainer = PageLimitContainer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(FlexRow)`\n box-sizing: border-box;\n min-width: ${theme.sizes[10]};\n height: ${theme.sizes.lg};\n padding: 0 ${theme.sizes[3]};\n background-color: ${theme.colors.neutral.grey.light};\n border: 1px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n color: ${theme.colors.neutral.ink.base};\n // TODO: Remove these style overrides when the Button component is updated match the design system\n width: ${theme.sizes.lg};\n height: ${theme.sizes.lg};\n\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n\nexport const PageInput = styled(TextField)`\n &[type='number'] {\n min-width: auto;\n }\n`;\n"],"names":["styled","FlexRow","theme","Button","TextField"],"mappings":";;;;;;;;;;;;AAMa,MAAA,kBAAkB,GAAGA,uBAAM,CAACC,eAAO,CAAC,CAElC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gCAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAClB,QAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CACX,WAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjCA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA;AAGpB,MAAA,gBAAgB,GAAGF,uBAAM,CAACG,aAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnCD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,UAE7BA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE,cAGbA,WAAK,CAAC,KAAK,CAAC,EAAE,WACbA,WAAK,CAAC,KAAK,CAAC,EAAE;MAIf,SAAS,GAAGF,uBAAM,CAACI,iBAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA;;;;;;"}
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const PageLimitContainer: import("styled-components").StyledComponent<
|
|
2
|
+
export declare const PageLimitContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
|
|
3
|
+
alignItems?: import("csstype").Property.AlignItems | undefined;
|
|
4
|
+
justifyContent?: import("csstype").Property.JustifyContent | undefined;
|
|
5
|
+
gap?: keyof import("../../theme/modules/sizes").SizeScale | undefined;
|
|
6
|
+
flexWrap?: import("csstype").Property.FlexWrap | undefined;
|
|
7
|
+
} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
3
8
|
export declare const PaginationButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
4
9
|
children?: import("react").ReactNode;
|
|
5
10
|
variant?: import("../Button/types").ButtonVariant | undefined;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { theme } from '../../theme/index.js';
|
|
3
|
-
import {
|
|
4
|
-
import '../Stack/types.js';
|
|
3
|
+
import { FlexRow } from '../Flex/FlexRow/FlexRow.js';
|
|
5
4
|
import { Button } from '../Button/Button.js';
|
|
6
5
|
import { TextField } from '../TextField/index.js';
|
|
7
6
|
|
|
8
|
-
const PageLimitContainer = styled(
|
|
9
|
-
const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width
|
|
10
|
-
const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{width:
|
|
7
|
+
const PageLimitContainer = styled(FlexRow).withConfig({ displayName: "vui--PageLimitContainer", componentId: "vui--11yg0z2" }) `box-sizing:border-box;min-width:${theme.sizes[10]};height:${theme.sizes.lg};padding:0 ${theme.sizes[3]};background-color:${theme.colors.neutral.grey.light};border:1px solid ${theme.colors.neutral.grey.dark};border-radius:${theme.sizes.xs};`;
|
|
8
|
+
const PaginationButton = styled(Button).withConfig({ displayName: "vui--PaginationButton", componentId: "vui--1xoa6c5" }) `color:${theme.colors.neutral.ink.base};width:${theme.sizes.lg};height:${theme.sizes.lg};svg{width:${theme.sizes.md};height:${theme.sizes.md};}`;
|
|
9
|
+
const PageInput = styled(TextField).withConfig({ displayName: "vui--PageInput", componentId: "vui--vpfeol" }) `&[type='number']{min-width:auto;}`;
|
|
11
10
|
|
|
12
11
|
export { PageInput, PageLimitContainer, PaginationButton };
|
|
13
12
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport {
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../src/components/Pagination/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { FlexRow } from '../Flex/FlexRow';\nimport { Button } from '../Button';\nimport { TextField } from '../TextField';\n\nexport const PageLimitContainer = styled(FlexRow)`\n box-sizing: border-box;\n min-width: ${theme.sizes[10]};\n height: ${theme.sizes.lg};\n padding: 0 ${theme.sizes[3]};\n background-color: ${theme.colors.neutral.grey.light};\n border: 1px solid ${theme.colors.neutral.grey.dark};\n border-radius: ${theme.sizes.xs};\n`;\n\nexport const PaginationButton = styled(Button)`\n color: ${theme.colors.neutral.ink.base};\n // TODO: Remove these style overrides when the Button component is updated match the design system\n width: ${theme.sizes.lg};\n height: ${theme.sizes.lg};\n\n svg {\n width: ${theme.sizes.md};\n height: ${theme.sizes.md};\n }\n`;\n\nexport const PageInput = styled(TextField)`\n &[type='number'] {\n min-width: auto;\n }\n`;\n"],"names":[],"mappings":";;;;;;AAMa,MAAA,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,CAElC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,gCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAClB,QAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACX,WAAA,EAAA,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAC/B,kBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA,eAAA,EACjC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,CAAA;AAGpB,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,MAAA,EACnC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,UAE7B,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE,cAGb,KAAK,CAAC,KAAK,CAAC,EAAE,WACb,KAAK,CAAC,KAAK,CAAC,EAAE;MAIf,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iCAAA;;;;"}
|