@veeqo/ui 15.6.0 → 15.7.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/components/Alerts/MiniAlert/types.d.ts +4 -2
- package/dist/components/Checkbox/Checkbox.module.scss.cjs +2 -2
- package/dist/components/Checkbox/Checkbox.module.scss.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.scss.js +2 -2
- package/dist/components/Checkbox/Checkbox.module.scss.js.map +1 -1
- package/dist/components/Choice/Choice.cjs +3 -1
- package/dist/components/Choice/Choice.cjs.map +1 -1
- package/dist/components/Choice/Choice.js +3 -1
- package/dist/components/Choice/Choice.js.map +1 -1
- package/dist/components/Choice/Choice.module.scss.cjs +2 -2
- package/dist/components/Choice/Choice.module.scss.cjs.map +1 -1
- package/dist/components/Choice/Choice.module.scss.js +2 -2
- package/dist/components/Choice/Choice.module.scss.js.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js +1 -0
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs +1 -0
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js +1 -0
- package/dist/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +1 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +1 -0
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs +1 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js +1 -0
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map +1 -1
- package/dist/components/Radio/Radio.cjs +2 -2
- package/dist/components/Radio/Radio.cjs.map +1 -1
- package/dist/components/Radio/Radio.d.ts +8 -0
- package/dist/components/Radio/Radio.js +2 -2
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Radio/Radio.module.scss.cjs +2 -2
- package/dist/components/Radio/Radio.module.scss.cjs.map +1 -1
- package/dist/components/Radio/Radio.module.scss.js +2 -2
- package/dist/components/Radio/Radio.module.scss.js.map +1 -1
- package/dist/hoc/withLabels/withLabels.cjs +2 -5
- package/dist/hoc/withLabels/withLabels.cjs.map +1 -1
- package/dist/hoc/withLabels/withLabels.js +2 -5
- package/dist/hoc/withLabels/withLabels.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { BaseAlertProps, MiniAlertVariants } from '../types';
|
|
3
3
|
export type { MiniAlertVariants } from '../types';
|
|
4
|
-
export type MiniAlertProps = React.HTMLAttributes<HTMLDivElement> & Omit<BaseAlertProps, 'variant'> & {
|
|
4
|
+
export type MiniAlertProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & Omit<BaseAlertProps, 'variant' | 'title'> & {
|
|
5
|
+
/** Alert heading content — accepts string or ReactNode. Wrapped in a `<Text>` component with standard styling */
|
|
6
|
+
title?: React.ReactNode;
|
|
5
7
|
/** Visual style variant */
|
|
6
8
|
variant?: MiniAlertVariants;
|
|
7
|
-
/** Replaces the default title text with custom content
|
|
9
|
+
/** Replaces the default title text with custom content. Renders raw without a `<Text>` wrapper for full control over markup */
|
|
8
10
|
titleSlot?: React.ReactNode;
|
|
9
11
|
/** Override the icon colour */
|
|
10
12
|
customIconColour?: string;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"input":"
|
|
5
|
+
___$insertStyle("._input_naeof_1 {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_naeof_1:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_naeof_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_naeof_1:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_naeof_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n}\n._input_naeof_1:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_naeof_1:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
|
|
6
|
+
var styles = {"input":"_input_naeof_1"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Checkbox.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--colors-secondary-blue-base);\n border-color: var(--colors-secondary-blue-base);\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--colors-secondary-blue-base);\n border-color: var(--colors-secondary-blue-base);\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.module.scss.cjs","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,khFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"input":"
|
|
3
|
+
insertStyle("._input_naeof_1 {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition: box-shadow 0.1s, background-color 0.1s;\n}\n._input_naeof_1:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_naeof_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_naeof_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_naeof_1:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n}\n._input_naeof_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n}\n._input_naeof_1:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n}\n._input_naeof_1:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n}");
|
|
4
|
+
var styles = {"input":"_input_naeof_1"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Checkbox.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-lightest);\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--colors-secondary-blue-base);\n border-color: var(--colors-secondary-blue-base);\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--colors-secondary-blue-base);\n border-color: var(--colors-secondary-blue-base);\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Checkbox.module.scss.js","sources":["../../../src/components/Checkbox/Checkbox.module.scss"],"sourcesContent":[".input {\n appearance: none;\n width: 18px;\n height: 18px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-lightest));\n border-radius: var(--radius-base);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n box-shadow 0.1s,\n background-color 0.1s;\n\n &:checked {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:indeterminate {\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>\");\n background-repeat: no-repeat;\n background-size: var(--sizes-4);\n background-position: center;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-grey-base);\n color: var(--colors-neutral-ink-light);\n cursor: default;\n }\n\n &:checked:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>\");\n }\n\n &:indeterminate:disabled {\n background-image: url(\"data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>\");\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,khFAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -8,6 +8,7 @@ var index = require('../../theme/index.cjs');
|
|
|
8
8
|
var Tooltip = require('../Tooltip/Tooltip.cjs');
|
|
9
9
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
10
10
|
var Text = require('../Text/Text.cjs');
|
|
11
|
+
var MiniAlert = require('../Alerts/MiniAlert/MiniAlert.cjs');
|
|
11
12
|
var Choice_module = require('./Choice.module.scss.cjs');
|
|
12
13
|
|
|
13
14
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -30,6 +31,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
30
31
|
Choice_module.wrapper,
|
|
31
32
|
bordered && Choice_module.bordered,
|
|
32
33
|
disabled && Choice_module.disabled,
|
|
34
|
+
error && Choice_module.error,
|
|
33
35
|
className,
|
|
34
36
|
]);
|
|
35
37
|
const contentMarkup = (React__default.default.createElement("div", { className: Choice_module['root-layout'] },
|
|
@@ -42,7 +44,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
42
44
|
(tooltip || tooltipContent) && (React__default.default.createElement(Tooltip.Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
43
45
|
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", name: "help", width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.lightest })))),
|
|
44
46
|
hint && (React__default.default.createElement(Text.Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
45
|
-
error && (React__default.default.createElement(
|
|
47
|
+
error && (React__default.default.createElement(MiniAlert.MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
|
|
46
48
|
Footer)) : null,
|
|
47
49
|
inputPosition === 'right' && React__default.default.createElement("div", { className: inputLayoutClass }, children)));
|
|
48
50
|
return (React__default.default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nimport styles from './Choice.module.scss';\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 inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\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 <Tooltip 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 </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <
|
|
1
|
+
{"version":3,"file":"Choice.cjs","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\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 inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\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 <Tooltip 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 </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <MiniAlert \n variant=\"error\" \n title={error}\n className={classNames.error}\n isBold={false}\n role=\"alert\"\n />\n )}\n {Footer}\n </div>\n ) : null}\n {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n </div>\n );\n\n return (\n <label htmlFor={htmlFor} className={wrapperClass}>\n {contentMarkup}\n </label>\n );\n};\n"],"names":["styles","buildClassnames","React","Stack","Text","Tooltip","HelpIcon","theme","MiniAlert"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ import { theme } from '../../theme/index.js';
|
|
|
6
6
|
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
7
7
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
8
8
|
import { Text } from '../Text/Text.js';
|
|
9
|
+
import { MiniAlert } from '../Alerts/MiniAlert/MiniAlert.js';
|
|
9
10
|
import styles from './Choice.module.scss.js';
|
|
10
11
|
|
|
11
12
|
const generateClassNames = (prefix) => ({
|
|
@@ -24,6 +25,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
24
25
|
styles.wrapper,
|
|
25
26
|
bordered && styles.bordered,
|
|
26
27
|
disabled && styles.disabled,
|
|
28
|
+
error && styles.error,
|
|
27
29
|
className,
|
|
28
30
|
]);
|
|
29
31
|
const contentMarkup = (React__default.createElement("div", { className: styles['root-layout'] },
|
|
@@ -36,7 +38,7 @@ const Choice = ({ htmlFor, className, label, hint, tooltip, tooltipContent, erro
|
|
|
36
38
|
(tooltip || tooltipContent) && (React__default.createElement(Tooltip, { text: tooltip, content: tooltipContent, className: classNames.tooltip },
|
|
37
39
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", name: "help", width: theme.sizes.base, color: theme.colors.neutral.ink.lightest })))),
|
|
38
40
|
hint && (React__default.createElement(Text, { id: `hint-${htmlFor}`, variant: "hintText", className: classNames.hint }, hint)),
|
|
39
|
-
error && (React__default.createElement(
|
|
41
|
+
error && (React__default.createElement(MiniAlert, { variant: "error", title: error, className: classNames.error, isBold: false, role: "alert" })),
|
|
40
42
|
Footer)) : null,
|
|
41
43
|
inputPosition === 'right' && React__default.createElement("div", { className: inputLayoutClass }, children)));
|
|
42
44
|
return (React__default.createElement("label", { htmlFor: htmlFor, className: wrapperClass }, contentMarkup));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\n\nimport styles from './Choice.module.scss';\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 inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\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 <Tooltip 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 </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <
|
|
1
|
+
{"version":3,"file":"Choice.js","sources":["../../../src/components/Choice/Choice.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { buildClassnames } from '../../utils';\nimport { Stack } from '../Stack';\nimport { theme } from '../../theme';\nimport { Tooltip } from '../Tooltip';\nimport { HelpIcon } from '../../icons';\nimport { Text } from '../Text';\nimport { TextVariant } from '../Text/types';\nimport { MiniAlert } from '../Alerts/MiniAlert';\n\nimport styles from './Choice.module.scss';\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 inputLayoutClass = [\n styles['input-layout'],\n Accessory ? styles['align-center'] : styles['align-top'],\n ].join(' ');\n\n const wrapperClass = buildClassnames([\n styles.wrapper,\n bordered && styles.bordered,\n disabled && styles.disabled,\n error && styles.error,\n className,\n ]);\n\n const contentMarkup = (\n <div className={styles['root-layout']}>\n {inputPosition === 'left' && <div className={inputLayoutClass}>{children}</div>}\n {Accessory && <div className={styles['accessory-layout']}>{Accessory}</div>}\n {label || hint || error || Badge || Footer ? (\n <div className={styles['text-layout']}>\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 <Tooltip 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 </Tooltip>\n )}\n </Stack>\n {hint && (\n <Text id={`hint-${htmlFor}`} variant=\"hintText\" className={classNames.hint}>\n {hint}\n </Text>\n )}\n {error && (\n <MiniAlert \n variant=\"error\" \n title={error}\n className={classNames.error}\n isBold={false}\n role=\"alert\"\n />\n )}\n {Footer}\n </div>\n ) : null}\n {inputPosition === 'right' && <div className={inputLayoutClass}>{children}</div>}\n </div>\n );\n\n return (\n <label htmlFor={htmlFor} className={wrapperClass}>\n {contentMarkup}\n </label>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"wrapper":"
|
|
5
|
+
___$insertStyle("._wrapper_416ft_1 {\n box-sizing: border-box;\n}\n._wrapper_416ft_1:hover {\n cursor: pointer;\n}\n._wrapper_416ft_1._disabled_416ft_7:hover {\n cursor: default;\n}\n\n._error_416ft_11 {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n /* Bordered error state */\n}\n._error_416ft_11._bordered_416ft_17 {\n border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_416ft_17 {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n}\n._bordered_416ft_17:not(._disabled_416ft_7):hover {\n border-color: var(--colors-secondary-blue-base);\n}\n._bordered_416ft_17:not(._error_416ft_11):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_416ft_35 {\n display: flex;\n align-items: center;\n}\n._root-layout_416ft_35 > * + * {\n margin-left: var(--sizes-base);\n}\n\n._input-layout_416ft_43 {\n align-self: stretch;\n display: flex;\n}\n._input-layout_416ft_43._align-top_416ft_47 {\n align-items: flex-start;\n}\n._input-layout_416ft_43._align-center_416ft_50 {\n align-items: center;\n}\n\n._accessory-layout_416ft_54 {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n._text-layout_416ft_60 {\n flex: 1;\n}\n._text-layout_416ft_60 > span {\n display: block;\n}\n._text-layout_416ft_60 > * + * {\n margin-top: var(--sizes-sm);\n}");
|
|
6
|
+
var styles = {"wrapper":"_wrapper_416ft_1","disabled":"_disabled_416ft_7","error":"_error_416ft_11","bordered":"_bordered_416ft_17","root-layout":"_root-layout_416ft_35","input-layout":"_input-layout_416ft_43","align-top":"_align-top_416ft_47","align-center":"_align-center_416ft_50","accessory-layout":"_accessory-layout_416ft_54","text-layout":"_text-layout_416ft_60"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Choice.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.module.scss.cjs","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.bordered {\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Choice.module.scss.cjs","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,qiDAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"wrapper":"
|
|
3
|
+
insertStyle("._wrapper_416ft_1 {\n box-sizing: border-box;\n}\n._wrapper_416ft_1:hover {\n cursor: pointer;\n}\n._wrapper_416ft_1._disabled_416ft_7:hover {\n cursor: default;\n}\n\n._error_416ft_11 {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n /* Bordered error state */\n}\n._error_416ft_11._bordered_416ft_17 {\n border-color: var(--colors-secondary-red-base);\n}\n\n._bordered_416ft_17 {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n}\n._bordered_416ft_17:not(._disabled_416ft_7):hover {\n border-color: var(--colors-secondary-blue-base);\n}\n._bordered_416ft_17:not(._error_416ft_11):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n}\n\n._root-layout_416ft_35 {\n display: flex;\n align-items: center;\n}\n._root-layout_416ft_35 > * + * {\n margin-left: var(--sizes-base);\n}\n\n._input-layout_416ft_43 {\n align-self: stretch;\n display: flex;\n}\n._input-layout_416ft_43._align-top_416ft_47 {\n align-items: flex-start;\n}\n._input-layout_416ft_43._align-center_416ft_50 {\n align-items: center;\n}\n\n._accessory-layout_416ft_54 {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n._text-layout_416ft_60 {\n flex: 1;\n}\n._text-layout_416ft_60 > span {\n display: block;\n}\n._text-layout_416ft_60 > * + * {\n margin-top: var(--sizes-sm);\n}");
|
|
4
|
+
var styles = {"wrapper":"_wrapper_416ft_1","disabled":"_disabled_416ft_7","error":"_error_416ft_11","bordered":"_bordered_416ft_17","root-layout":"_root-layout_416ft_35","input-layout":"_input-layout_416ft_43","align-top":"_align-top_416ft_47","align-center":"_align-center_416ft_50","accessory-layout":"_accessory-layout_416ft_54","text-layout":"_text-layout_416ft_60"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Choice.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Choice.module.scss.js","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.bordered {\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Choice.module.scss.js","sources":["../../../src/components/Choice/Choice.module.scss"],"sourcesContent":[".wrapper {\n box-sizing: border-box;\n\n &:hover {\n cursor: pointer;\n }\n\n &.disabled:hover {\n cursor: default;\n }\n}\n\n.error {\n --choice-error-border: var(--colors-secondary-red-base);\n --choice-error-focus: var(--colors-secondary-red-light);\n --choice-error-bg: var(--colors-secondary-red-base);\n\n /* Bordered error state */\n &.bordered {\n border-color: var(--colors-secondary-red-base);\n }\n}\n\n.bordered {\n display: block;\n border: 2px solid var(--colors-neutral-grey-dark);\n border-radius: var(--radius-md);\n padding: var(--sizes-base) var(--sizes-3);\n background-color: white;\n\n &:not(.disabled):hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:not(.error):has(input:checked) {\n border-color: var(--colors-secondary-blue-base);\n }\n}\n\n.root-layout {\n display: flex;\n align-items: center;\n\n & > * + * {\n margin-left: var(--sizes-base);\n }\n}\n\n.input-layout {\n align-self: stretch;\n display: flex;\n\n &.align-top {\n align-items: flex-start;\n }\n\n &.align-center {\n align-items: center;\n }\n}\n\n.accessory-layout {\n align-self: center;\n display: flex;\n align-items: center;\n}\n\n.text-layout {\n flex: 1;\n\n & > span {\n display: block;\n }\n\n & > * + * {\n margin-top: var(--sizes-sm);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,qiDAAA;;;;;"}
|
|
@@ -15,6 +15,7 @@ require('framer-motion');
|
|
|
15
15
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
16
16
|
require('react-dom');
|
|
17
17
|
require('../../../../Text/Text.cjs');
|
|
18
|
+
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
18
19
|
require('../../../../Radio/Radio.cjs');
|
|
19
20
|
var useExpandableCell = require('./hooks/useExpandableCell.cjs');
|
|
20
21
|
var BodyCell_module = require('./BodyCell.module.scss.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["usePinnedColumnStyles","useExpandableCell","buildClassnames","styles","useMemo","SELECTION_COLUMN_ID","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAGC,mCAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAGC,+BAAe,CAAC;AACxC,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAGC,aAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAKC,6BAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEC,qCAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErCC,qBAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
|
|
@@ -13,6 +13,7 @@ import 'framer-motion';
|
|
|
13
13
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
14
14
|
import 'react-dom';
|
|
15
15
|
import '../../../../Text/Text.js';
|
|
16
|
+
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
16
17
|
import '../../../../Radio/Radio.js';
|
|
17
18
|
import { useExpandableCell } from './hooks/useExpandableCell.js';
|
|
18
19
|
import styles from './BodyCell.module.scss.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { Cell, flexRender } from '@tanstack/react-table';\nimport { SELECTION_COLUMN_ID } from '../../../constants';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { useExpandableCell } from './hooks';\nimport styles from './BodyCell.module.scss';\n\ntype ColumnCellProps = {\n /**\n * Cell within the TanStack Table instance.\n */\n cell: Cell<any, any>;\n\n /**\n * ARIA roles for the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether row selection is enabled.\n */\n enableRowSelection: boolean;\n\n /**\n * Whether row expanding is enabled for the grid.\n */\n enableExpanding: boolean;\n};\n\n/**\n * Renders a cell element, and its content, for a given column and row, within the grid body.\n */\nexport const BodyCell = ({\n cell,\n ariaRoles,\n enableRowSelection,\n enableExpanding,\n}: ColumnCellProps) => {\n const { justifyContent, textAlign, rowHeader, generateDataTestId } = cell.column.columnDef.meta!;\n const CellElement = rowHeader ? 'th' : 'td';\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({ column: cell.column });\n\n const { expandButtonProps, contentMarginLeft } = useExpandableCell({\n cell,\n enableExpanding,\n enableRowSelection,\n });\n\n const bodyCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n ]);\n\n const cellContext = cell.getContext();\n const cellTestId = useMemo(\n () => (generateDataTestId ? generateDataTestId(cellContext.row.original) : undefined),\n [generateDataTestId, cellContext.row.original],\n );\n\n const isSelectionCol = enableRowSelection && cell.column.id === SELECTION_COLUMN_ID;\n\n // Capture shift key state for range selection in selection column.\n const captureShiftKeyForSelection = isSelectionCol\n ? (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => {\n if ('key' in e && e.key !== ' ') return;\n\n const { row, table } = cell.getContext();\n if (!row.getCanSelect()) return;\n\n const { rangeSelectionState } = table.options.meta || {};\n if (rangeSelectionState) rangeSelectionState.isShiftKeyPressed = e.shiftKey;\n }\n : undefined;\n\n return (\n <CellElement\n className={bodyCellClassname}\n aria-colindex={cell.column.getIndex() + 1}\n scope={rowHeader ? 'row' : undefined}\n role={rowHeader ? 'rowheader' : ariaRoles.cell}\n style={pinnedCellStyles}\n data-testid={cellTestId}\n >\n <CellContent\n contentStyle={\n {\n marginLeft: contentMarginLeft,\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n expandButtonProps={expandButtonProps}\n onMouseDown={captureShiftKeyForSelection}\n onKeyDown={captureShiftKeyForSelection}\n >\n {flexRender(cell.column.columnDef.cell, cellContext)}\n </CellContent>\n </CellElement>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoCA;;AAEG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,eAAe,GACC,KAAI;AACpB,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAChG,MAAM,WAAW,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI;AAE3C,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AAEhG,IAAA,MAAM,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,iBAAiB,CAAC;QACjE,IAAI;QACJ,eAAe;QACf,kBAAkB;AACnB,KAAA,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC;AACxC,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;AACjB,KAAA,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE;AACrC,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO,kBAAkB,GAAG,kBAAkB,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,EACrF,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAC/C;IAED,MAAM,cAAc,GAAG,kBAAkB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,mBAAmB;;IAGnF,MAAM,2BAA2B,GAAG;AAClC,UAAE,CAAC,CAAyE,KAAI;YAC5E,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;gBAAE;YAEjC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;gBAAE;YAEzB,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,IAAI,EAAE;AACxD,YAAA,IAAI,mBAAmB;AAAE,gBAAA,mBAAmB,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;QAC7E;UACA,SAAS;IAEb,QACEA,6BAAC,WAAW,EAAA,EACV,SAAS,EAAE,iBAAiB,mBACb,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,SAAS,EACpC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC,IAAI,EAC9C,KAAK,EAAE,gBAAgB,EAAA,aAAA,EACV,UAAU,EAAA;QAEvBA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;AACE,gBAAA,UAAU,EAAE,iBAAiB;gBAC7B,cAAc;gBACd,SAAS;aACa,EAE1B,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,2BAA2B,EACxC,SAAS,EAAE,2BAA2B,EAAA,EAErC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,CACxC,CACF;AAElB;;;;"}
|
|
@@ -12,6 +12,7 @@ require('framer-motion');
|
|
|
12
12
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
13
13
|
require('react-dom');
|
|
14
14
|
require('../../../../Text/Text.cjs');
|
|
15
|
+
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
15
16
|
require('../../../../Radio/Radio.cjs');
|
|
16
17
|
var CellContent = require('../../CellContent/CellContent.cjs');
|
|
17
18
|
var BodyCell_module = require('../BodyCell/BodyCell.module.scss.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingBodyCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","styles","React","CellContent","Skeleton","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAGC,+BAAe,CAAC;AAC3C,QAAAC,eAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
|
|
@@ -10,6 +10,7 @@ import 'framer-motion';
|
|
|
10
10
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
11
11
|
import 'react-dom';
|
|
12
12
|
import '../../../../Text/Text.js';
|
|
13
|
+
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
13
14
|
import '../../../../Radio/Radio.js';
|
|
14
15
|
import { CellContent } from '../../CellContent/CellContent.js';
|
|
15
16
|
import styles from '../BodyCell/BodyCell.module.scss.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoadingBodyCell.js","sources":["../../../../../../src/components/DataGrid/components/Body/LoadingBody/LoadingBodyCell.tsx"],"sourcesContent":["import React from 'react';\nimport { Column } from '@tanstack/react-table';\n\nimport { Skeleton } from '../../../../Skeleton';\nimport { buildClassnames } from '../../../../../utils';\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { CellContent } from '../../CellContent';\nimport { theme } from '../../../../../theme';\n\nimport styles from '../BodyCell/BodyCell.module.scss';\n\ntype LoadingBodyCellProps = {\n /**\n * The TanStack Table column instance.\n */\n column: Column<any, any>;\n};\n\n/**\n * A cell component for the DataGrid that displays a skeleton loader.\n */\nexport const LoadingBodyCell = ({ column }: LoadingBodyCellProps) => {\n const { justifyContent, textAlign } = column.columnDef.meta!;\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column,\n });\n\n const loadingCellClassname = buildClassnames([\n styles.bodyCell,\n pinnedCellClassName,\n 'data-grid-cell',\n 'data-grid-cell-loading',\n ]);\n\n return (\n <td\n className={loadingCellClassname}\n style={pinnedCellStyles}\n aria-colindex={column.getIndex() + 1}\n >\n <CellContent\n contentStyle={\n {\n justifyContent,\n textAlign,\n } as React.CSSProperties\n }\n >\n <Skeleton width=\"75%\" height={theme.sizes[3]} />\n </CellContent>\n </td>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAkBA;;AAEG;MACU,eAAe,GAAG,CAAC,EAAE,MAAM,EAAwB,KAAI;IAClE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,CAAC,IAAK;AAC5D,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM;AACP,KAAA,CAAC;IAEF,MAAM,oBAAoB,GAAG,eAAe,CAAC;AAC3C,QAAA,MAAM,CAAC,QAAQ;QACf,mBAAmB;QACnB,gBAAgB;QAChB,wBAAwB;AACzB,KAAA,CAAC;AAEF,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,oBAAoB,EAC/B,KAAK,EAAE,gBAAgB,mBACR,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAA;QAEpCA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,YAAY,EACV;gBACE,cAAc;gBACd,SAAS;AACa,aAAA,EAAA;AAG1B,YAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,CACpC,CACX;AAET;;;;"}
|
|
@@ -16,6 +16,7 @@ require('framer-motion');
|
|
|
16
16
|
require('../../../Tooltip/components/TooltipPopover.cjs');
|
|
17
17
|
require('react-dom');
|
|
18
18
|
require('../../../Text/Text.cjs');
|
|
19
|
+
require('../../../Flex/FlexRow/FlexRow.cjs');
|
|
19
20
|
require('../../../Radio/Radio.cjs');
|
|
20
21
|
|
|
21
22
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement | null>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement | null>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement | null>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement | null>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -14,6 +14,7 @@ import 'framer-motion';
|
|
|
14
14
|
import '../../../Tooltip/components/TooltipPopover.js';
|
|
15
15
|
import 'react-dom';
|
|
16
16
|
import '../../../Text/Text.js';
|
|
17
|
+
import '../../../Flex/FlexRow/FlexRow.js';
|
|
17
18
|
import '../../../Radio/Radio.js';
|
|
18
19
|
|
|
19
20
|
const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement | null>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement | null>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n /**\n * Reference to be used for the outer container element.\n */\n containerRef?: RefObject<HTMLDivElement | null>;\n\n /**\n * Reference to be used for the table element.\n */\n tableRef?: RefObject<HTMLTableElement | null>;\n\n /**\n * Border mode.\n */\n borderMode: BorderMode;\n\n /**\n * Additional container styles.\n */\n containerStyles?: CSSProperties;\n\n /**\n * ARIA roles used in the grid.\n */\n ariaRoles: AriaRoles;\n\n /**\n * Whether resizeable columns are enabled or not.\n */\n enableResizeableColumns: boolean;\n\n /**\n * Density of the grid.\n */\n density: keyof SizeScale;\n\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * Child elements (table contents).\n */\n children: ReactNode;\n };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n containerRef,\n tableRef,\n borderMode,\n containerStyles,\n ariaRoles,\n enableResizeableColumns,\n density,\n table,\n children,\n id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition || scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\n } as CSSProperties\n }\n aria-colcount={table.getFlatHeaders().length}\n aria-rowcount={table.getRowCount()}\n aria-label={ariaLabel}\n >\n {children}\n </table>\n </Container>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
|
|
@@ -14,6 +14,7 @@ require('framer-motion');
|
|
|
14
14
|
require('../../../../Tooltip/components/TooltipPopover.cjs');
|
|
15
15
|
require('react-dom');
|
|
16
16
|
require('../../../../Text/Text.cjs');
|
|
17
|
+
require('../../../../Flex/FlexRow/FlexRow.cjs');
|
|
17
18
|
require('../../../../Radio/Radio.cjs');
|
|
18
19
|
var Resizer = require('../Resizer/Resizer.cjs');
|
|
19
20
|
var HeaderCell_module = require('./HeaderCell.module.scss.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","styles","flexRender","React","SortIcon","Resizer"],"mappings":"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"}
|
|
@@ -12,6 +12,7 @@ import 'framer-motion';
|
|
|
12
12
|
import '../../../../Tooltip/components/TooltipPopover.js';
|
|
13
13
|
import 'react-dom';
|
|
14
14
|
import '../../../../Text/Text.js';
|
|
15
|
+
import '../../../../Flex/FlexRow/FlexRow.js';
|
|
15
16
|
import '../../../../Radio/Radio.js';
|
|
16
17
|
import { Resizer } from '../Resizer/Resizer.js';
|
|
17
18
|
import styles from './HeaderCell.module.scss.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport styles from './HeaderCell.module.scss';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n /**\n * The TanStack Table instance.\n */\n table: Table<any>;\n\n /**\n * The Header within the TanStack Table instance.\n */\n header: Header<any, any>;\n\n /**\n * The index of this header in the grid.\n */\n index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n const headerRenderer = header.column.columnDef.header;\n\n const sortable = table.options.enableSorting && header.column.getCanSort();\n const isSorted = header.column.getIsSorted();\n const ariaSort = getAriaSort(isSorted);\n\n const resizeable =\n table.options.enableColumnResizing &&\n header.column.getCanResize() &&\n !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n column: header.column,\n });\n\n const headerCellClassname = buildClassnames([\n styles.headerCell,\n pinnedCellClassName,\n 'data-grid-header-cell',\n ]);\n\n const HeaderContents = flexRender(headerRenderer, header.getContext());\n const HeaderContentComponent = sortable ? 'button' : 'div';\n const headerContentClassname = buildClassnames([\n sortable ? styles.clickableHeaderContent : styles.headerContent,\n 'data-grid-header-content',\n ]);\n const headerContentProps = {\n justifyContent,\n textAlign,\n } as CSSProperties;\n\n return (\n <th\n className={headerCellClassname}\n role=\"columnheader\"\n scope=\"col\"\n aria-colindex={index + 1}\n aria-label={getAriaLabel?.()}\n style={pinnedCellStyles}\n aria-sort={ariaSort}\n >\n {/* Header content */}\n <HeaderContentComponent\n className={headerContentClassname}\n style={headerContentProps}\n onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n >\n {/* If we've been given just text to render, apply styles for text overflow */}\n {typeof headerRenderer === 'string' ? (\n <span className={styles.headerOverflow}>{HeaderContents}</span>\n ) : (\n HeaderContents\n )}\n\n {sortable && <SortIcon isSorted={isSorted} />}\n </HeaderContentComponent>\n\n {/* Column resizer */}\n {resizeable && (\n <Resizer\n getIsResizing={header.column.getIsResizing}\n getResizeHandler={header.getResizeHandler()}\n resetSize={header.column.resetSize}\n deltaOffset={\n table.options.columnResizeMode === 'onChange'\n ? null\n : table.getState().columnSizingInfo.deltaOffset\n }\n />\n )}\n </th>\n );\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -9,13 +9,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
9
9
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
11
11
|
|
|
12
|
-
const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
|
|
12
|
+
const Radio = React.forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, error, ...otherProps }, ref) => {
|
|
13
13
|
const handleChange = React.useCallback((e) => {
|
|
14
14
|
onChange(e.currentTarget.checked, value);
|
|
15
15
|
}, [onChange, value]);
|
|
16
16
|
const componentId = React.useMemo(() => id !== null && id !== void 0 ? id : generateId.generateId('radio'), [id]);
|
|
17
17
|
const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
|
|
18
|
-
return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
|
|
18
|
+
return (React__default.default.createElement(Choice.Choice, { htmlFor: componentId, disabled: disabled, hint: hint, error: error, ...otherProps },
|
|
19
19
|
React__default.default.createElement("input", { className: Radio_module.input, id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
|
|
20
20
|
children));
|
|
21
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","styles"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Radio.cjs","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n /** Unique identifier for the radio input */\n id?: string;\n /** Additional CSS class name */\n className?: string;\n /** Whether the radio is selected */\n checked: boolean;\n /** The value associated with this radio option */\n value?: RadioValue;\n /** Whether the radio is disabled and non-interactive */\n disabled?: boolean;\n /** Name attribute for grouping related radio inputs */\n name?: string;\n /** Callback fired when the radio selection changes */\n onChange: (checked: boolean, value?: RadioValue) => void;\n /** Content rendered inside the radio input element */\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n error,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} error={error} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["forwardRef","useCallback","useMemo","generateId","React","Choice","styles"],"mappings":";;;;;;;;;;;AA2BO,MAAM,KAAK,GAAGA,gBAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAGC,aAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAIC,qBAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEC,qCAACC,aAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,EAAA;AACxF,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAEE,YAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
|
|
@@ -2,13 +2,21 @@ import React, { AriaAttributes, ReactNode } from 'react';
|
|
|
2
2
|
import { ForwardedChoiceProps } from '../Choice';
|
|
3
3
|
type RadioValue = string | number;
|
|
4
4
|
export interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {
|
|
5
|
+
/** Unique identifier for the radio input */
|
|
5
6
|
id?: string;
|
|
7
|
+
/** Additional CSS class name */
|
|
6
8
|
className?: string;
|
|
9
|
+
/** Whether the radio is selected */
|
|
7
10
|
checked: boolean;
|
|
11
|
+
/** The value associated with this radio option */
|
|
8
12
|
value?: RadioValue;
|
|
13
|
+
/** Whether the radio is disabled and non-interactive */
|
|
9
14
|
disabled?: boolean;
|
|
15
|
+
/** Name attribute for grouping related radio inputs */
|
|
10
16
|
name?: string;
|
|
17
|
+
/** Callback fired when the radio selection changes */
|
|
11
18
|
onChange: (checked: boolean, value?: RadioValue) => void;
|
|
19
|
+
/** Content rendered inside the radio input element */
|
|
12
20
|
children?: ReactNode;
|
|
13
21
|
}
|
|
14
22
|
export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -3,13 +3,13 @@ import { Choice } from '../Choice/Choice.js';
|
|
|
3
3
|
import { generateId } from '../../utils/generateId.js';
|
|
4
4
|
import styles from './Radio.module.scss.js';
|
|
5
5
|
|
|
6
|
-
const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, ...otherProps }, ref) => {
|
|
6
|
+
const Radio = forwardRef(({ checked, value, name, hint, disabled, onChange, id, children, 'aria-label': ariaLabel, error, ...otherProps }, ref) => {
|
|
7
7
|
const handleChange = useCallback((e) => {
|
|
8
8
|
onChange(e.currentTarget.checked, value);
|
|
9
9
|
}, [onChange, value]);
|
|
10
10
|
const componentId = useMemo(() => id !== null && id !== void 0 ? id : generateId('radio'), [id]);
|
|
11
11
|
const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;
|
|
12
|
-
return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, ...otherProps },
|
|
12
|
+
return (React__default.createElement(Choice, { htmlFor: componentId, disabled: disabled, hint: hint, error: error, ...otherProps },
|
|
13
13
|
React__default.createElement("input", { className: styles.input, id: componentId, type: "radio", checked: checked, value: value, name: name, disabled: disabled, onChange: handleChange, ref: ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }),
|
|
14
14
|
children));
|
|
15
15
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n id?: string;\n className?: string;\n checked: boolean;\n value?: RadioValue;\n disabled?: boolean;\n name?: string;\n onChange: (checked: boolean, value?: RadioValue) => void;\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { AriaAttributes, ReactNode, forwardRef, useCallback, useMemo } from 'react';\nimport { Choice, ForwardedChoiceProps } from '../Choice';\nimport { generateId } from '../../utils/generateId';\n\nimport styles from './Radio.module.scss';\n\ntype RadioValue = string | number;\n\nexport interface RadioProps extends ForwardedChoiceProps, Pick<AriaAttributes, 'aria-label'> {\n /** Unique identifier for the radio input */\n id?: string;\n /** Additional CSS class name */\n className?: string;\n /** Whether the radio is selected */\n checked: boolean;\n /** The value associated with this radio option */\n value?: RadioValue;\n /** Whether the radio is disabled and non-interactive */\n disabled?: boolean;\n /** Name attribute for grouping related radio inputs */\n name?: string;\n /** Callback fired when the radio selection changes */\n onChange: (checked: boolean, value?: RadioValue) => void;\n /** Content rendered inside the radio input element */\n children?: ReactNode;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n checked,\n value,\n name,\n hint,\n disabled,\n onChange,\n id,\n children,\n 'aria-label': ariaLabel,\n error,\n ...otherProps\n }: RadioProps,\n ref,\n ) => {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange(e.currentTarget.checked, value);\n },\n [onChange, value],\n );\n\n const componentId = useMemo(() => id ?? generateId('radio'), [id]);\n const ariaDescribedBy = hint ? `hint-${componentId}` : undefined;\n\n return (\n <Choice htmlFor={componentId} disabled={disabled} hint={hint} error={error} {...otherProps}>\n <input\n className={styles.input}\n id={componentId}\n type=\"radio\"\n checked={checked}\n value={value}\n name={name}\n disabled={disabled}\n onChange={handleChange}\n ref={ref}\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedBy}\n />\n {children}\n </Choice>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;AA2BO,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,OAAO,EACP,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,GAAG,UAAU,EACF,EACb,GAAG,KACD;AACF,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAsC,KAAI;QACzC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAC1C,IAAA,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB;IAED,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,GAAI,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AAClE,IAAA,MAAM,eAAe,GAAG,IAAI,GAAG,CAAA,KAAA,EAAQ,WAAW,CAAA,CAAE,GAAG,SAAS;IAEhE,QACEA,6BAAC,MAAM,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAM,UAAU,EAAA;AACxF,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,EAAE,EAAE,WAAW,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,GAAG,gBACI,SAAS,EAAA,kBAAA,EACH,eAAe,EAAA,CACjC;QACD,QAAQ,CACF;AAEb,CAAC;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"input":"
|
|
5
|
+
___$insertStyle("._input_17v2n_1 {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n}\n._input_17v2n_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_17v2n_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n}\n._input_17v2n_1:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n}");
|
|
6
|
+
var styles = {"input":"_input_17v2n_1"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Radio.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-light);\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--colors-secondary-blue-base);\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Radio.module.scss.cjs","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"input":"
|
|
3
|
+
insertStyle("._input_17v2n_1 {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n transition: box-shadow 0.1s;\n}\n._input_17v2n_1:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:checked::before {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n}\n._input_17v2n_1:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n}\n._input_17v2n_1:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n}\n._input_17v2n_1:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n}\n._input_17v2n_1:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n}");
|
|
4
|
+
var styles = {"input":"_input_17v2n_1"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Radio.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--colors-neutral-ink-light);\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--colors-secondary-blue-base);\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:active {\n border-color: var(--colors-secondary-blue-base);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--colors-secondary-blue-light);\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"Radio.module.scss.js","sources":["../../../src/components/Radio/Radio.module.scss"],"sourcesContent":[".input {\n appearance: none;\n box-sizing: border-box;\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n margin: 3px;\n background-color: transparent;\n border: 2px solid var(--choice-error-border, var(--colors-neutral-ink-light));\n border-radius: 50%;\n outline: none;\n cursor: pointer;\n\n transition: box-shadow 0.1s;\n\n &:checked {\n position: relative;\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:checked::before {\n content: '';\n width: 10px;\n height: 10px;\n position: absolute;\n top: 2px;\n left: 2px;\n background-color: var(--choice-error-bg, var(--colors-secondary-blue-base));\n border-radius: 50%;\n }\n\n &:hover {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:active {\n border-color: var(--choice-error-border, var(--colors-secondary-blue-base));\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--sizes-xs) var(--choice-error-focus, var(--colors-secondary-blue-light));\n outline: 0;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--colors-neutral-grey-base);\n border-color: var(--colors-neutral-ink-lightest);\n cursor: default;\n }\n\n &:disabled::before {\n background-color: var(--colors-neutral-ink-light);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,00CAAA;AACA,aAAA,CAAA,OAAA,CAAA,gBAAA;;;;"}
|
|
@@ -28,11 +28,8 @@ const withLabels = (Component) => {
|
|
|
28
28
|
React__default.default.createElement(HelpIcon.ReactComponent, { "data-testid": "tooltip-help", width: index.theme.sizes.base, height: index.theme.sizes.base, color: index.theme.colors.neutral.ink.light })))),
|
|
29
29
|
hint && (React__default.default.createElement(Text.Text, { variant: "hintText", as: "span", className: withLabels_module.hint, id: `${componentId}-hint` }, hint)),
|
|
30
30
|
React__default.default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
31
|
-
error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
32
|
-
|
|
33
|
-
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
34
|
-
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
35
|
-
disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
31
|
+
error && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
|
|
32
|
+
disabledMessage && (React__default.default.createElement(MiniAlert.MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
|
|
36
33
|
});
|
|
37
34
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
38
35
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n
|
|
1
|
+
{"version":3,"file":"withLabels.cjs","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n title={error}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={disabledMessage}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["forwardRef","useId","React","FlexCol","styles","FlexRow","Text","BlockTooltip","HelpIcon","theme","MiniAlert"],"mappings":";;;;;;;;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAGA,gBAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEC,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,qCAACC,eAAO,EAAA,EAAC,SAAS,EAAEC,iBAAM,CAAC,SAAS,EAAA;AAClC,YAAAF,sBAAA,CAAA,aAAA,CAACG,eAAO,EAAA,IAAA;AACN,gBAAAH,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBJ,sBAAA,CAAA,aAAA,CAACK,yBAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAL,sBAAA,CAAA,aAAA,CAACM,uBAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHP,sBAAA,CAAA,aAAA,CAACI,SAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEF,iBAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDF,sBAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,sBAAA,CAAA,aAAA,CAACQ,mBAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdR,sBAAA,CAAA,aAAA,CAACQ,mBAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
|
|
@@ -22,11 +22,8 @@ const withLabels = (Component) => {
|
|
|
22
22
|
React__default.createElement(HelpIcon, { "data-testid": "tooltip-help", width: theme.sizes.base, height: theme.sizes.base, color: theme.colors.neutral.ink.light })))),
|
|
23
23
|
hint && (React__default.createElement(Text, { variant: "hintText", as: "span", className: labelStyles.hint, id: `${componentId}-hint` }, hint)),
|
|
24
24
|
React__default.createElement(Component, { ref: ref, id: componentId, hasError: !!error, disabled: !!disabledMessage, disabledMessage: disabledMessage, ...otherProps }),
|
|
25
|
-
error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert",
|
|
26
|
-
|
|
27
|
-
// Use both with typeof to get correct sizing for strings and support JSX errors.
|
|
28
|
-
title: typeof error === 'string' ? error : undefined, titleSlot: typeof error !== 'string' ? error : undefined })),
|
|
29
|
-
disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: typeof disabledMessage === 'string' ? disabledMessage : undefined, titleSlot: typeof disabledMessage !== 'string' ? disabledMessage : undefined }))));
|
|
25
|
+
error && (React__default.createElement(MiniAlert, { id: `${componentId}-error`, variant: "error", isBold: false, role: "alert", title: error })),
|
|
26
|
+
disabledMessage && (React__default.createElement(MiniAlert, { id: `${componentId}-disabled`, isBold: false, title: disabledMessage }))));
|
|
30
27
|
});
|
|
31
28
|
ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;
|
|
32
29
|
return ComponentWithLabels;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n
|
|
1
|
+
{"version":3,"file":"withLabels.js","sources":["../../../src/hoc/withLabels/withLabels.tsx"],"sourcesContent":["import React, { ComponentType, forwardRef, ReactNode } from 'react';\n\nimport { FlexCol } from '../../components/Flex/FlexCol';\nimport { FlexRow } from '../../components/Flex/FlexRow';\nimport { MiniAlert } from '../../components/Alerts/MiniAlert';\nimport { Text } from '../../components/Text';\nimport { useId } from '../../hooks/useId';\nimport { HelpIcon } from '../../icons';\nimport { theme } from '../../theme';\n\nimport { BlockTooltip } from './BlockTooltip';\nimport styles from './withLabels.module.scss';\n\nexport interface WithLabelsProps {\n id?: string;\n label?: ReactNode;\n hint?: ReactNode;\n error?: ReactNode;\n disabledMessage?: ReactNode;\n tooltip?: string;\n tooltipContent?: ReactNode;\n}\n\n// eslint-disable-next-line @typescript-eslint/comma-dangle -- comma is required so TS knows this is a generic, not JSX\nexport const withLabels = <P, R = unknown>(Component: ComponentType<P>) => {\n const ComponentWithLabels = forwardRef<R, P & WithLabelsProps>(\n ({ label, hint, error, disabledMessage, tooltip, tooltipContent, id, ...otherProps }, ref) => {\n const componentId = useId({ id, prefix: Component.name });\n\n if (!label)\n return (\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n );\n\n return (\n <FlexCol className={styles.rootStack}>\n <FlexRow>\n <Text variant=\"inputLabel\" id={`${componentId}-label`} htmlFor={componentId}>\n {label}\n </Text>\n {(tooltip || tooltipContent) && (\n <BlockTooltip text={tooltip} content={tooltipContent}>\n <HelpIcon\n data-testid=\"tooltip-help\"\n width={theme.sizes.base}\n height={theme.sizes.base}\n color={theme.colors.neutral.ink.light}\n />\n </BlockTooltip>\n )}\n </FlexRow>\n {hint && (\n <Text variant=\"hintText\" as=\"span\" className={styles.hint} id={`${componentId}-hint`}>\n {hint}\n </Text>\n )}\n <Component\n ref={ref}\n id={componentId}\n hasError={!!error}\n disabled={!!disabledMessage}\n disabledMessage={disabledMessage}\n {...(otherProps as P)}\n />\n {error && (\n <MiniAlert\n id={`${componentId}-error`}\n variant=\"error\"\n isBold={false}\n role=\"alert\"\n title={error}\n />\n )}\n {disabledMessage && (\n <MiniAlert\n id={`${componentId}-disabled`}\n isBold={false}\n title={disabledMessage}\n />\n )}\n </FlexCol>\n );\n },\n );\n\n ComponentWithLabels.displayName = `withLabels(${Component.displayName || Component.name || 'Component'})`;\n\n return ComponentWithLabels;\n};\n"],"names":["React","styles"],"mappings":";;;;;;;;;;;AAuBA;AACO,MAAM,UAAU,GAAG,CAAiB,SAA2B,KAAI;IACxE,MAAM,mBAAmB,GAAG,UAAU,CACpC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,KAAI;AAC3F,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;AAEzD,QAAA,IAAI,CAAC,KAAK;AACR,YAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;QAGN,QACEA,6BAAC,OAAO,EAAA,EAAC,SAAS,EAAEC,WAAM,CAAC,SAAS,EAAA;AAClC,YAAAD,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,IAAA;AACN,gBAAAA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,YAAY,EAAC,EAAE,EAAE,CAAA,EAAG,WAAW,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAA,EACxE,KAAK,CACD;AACN,gBAAA,CAAC,OAAO,IAAI,cAAc,MACzBA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAA;AAClD,oBAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,EAAA,aAAA,EACK,cAAc,EAC1B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,EAAA,CACrC,CACW,CAChB,CACO;YACT,IAAI,KACHA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAEC,WAAM,CAAC,IAAI,EAAE,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,KAAA,CAAO,EAAA,EACjF,IAAI,CACA,CACR;YACDD,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,eAAe,EAC3B,eAAe,EAAE,eAAe,EAAA,GAC3B,UAAgB,EAAA,CACrB;YACD,KAAK,KACJA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,MAAA,CAAQ,EAC1B,OAAO,EAAC,OAAO,EACf,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EAAA,CACZ,CACH;YACA,eAAe,KACdA,cAAA,CAAA,aAAA,CAAC,SAAS,IACR,EAAE,EAAE,CAAA,EAAG,WAAW,CAAA,SAAA,CAAW,EAC7B,MAAM,EAAE,KAAK,EACb,KAAK,EAAE,eAAe,EAAA,CACtB,CACH,CACO;AAEd,IAAA,CAAC,CACF;AAED,IAAA,mBAAmB,CAAC,WAAW,GAAG,CAAA,WAAA,EAAc,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG;AAEzG,IAAA,OAAO,mBAAmB;AAC5B;;;;"}
|