@pega/cosmos-react-core 5.0.0-dev.10.5 → 5.0.0-dev.11.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/lib/components/Badges/Keyboard.d.ts.map +1 -1
- package/lib/components/Badges/Keyboard.js +10 -10
- package/lib/components/Badges/Keyboard.js.map +1 -1
- package/lib/components/Badges/Status.d.ts.map +1 -1
- package/lib/components/Badges/Status.js +2 -0
- package/lib/components/Badges/Status.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroupList.js +5 -2
- package/lib/components/FieldGroup/FieldGroupList.js.map +1 -1
- package/lib/components/NoValue/NoValue.d.ts.map +1 -1
- package/lib/components/NoValue/NoValue.js +6 -1
- package/lib/components/NoValue/NoValue.js.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.d.ts.map +1 -1
- package/lib/components/RadioCheck/RadioCheck.js +3 -1
- package/lib/components/RadioCheck/RadioCheck.js.map +1 -1
- package/lib/components/TextArea/TextArea.d.ts +1 -1
- package/lib/components/TextArea/TextArea.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.js +16 -8
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/components/TextArea/TextArea.styles.d.ts +1 -0
- package/lib/components/TextArea/TextArea.styles.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.styles.js +32 -4
- package/lib/components/TextArea/TextArea.styles.js.map +1 -1
- package/lib/styles/GlobalStyle.d.ts.map +1 -1
- package/lib/styles/GlobalStyle.js +11 -1
- package/lib/styles/GlobalStyle.js.map +1 -1
- package/lib/utils/focusHeadingOrContainer.d.ts +1 -1
- package/lib/utils/focusHeadingOrContainer.d.ts.map +1 -1
- package/lib/utils/focusHeadingOrContainer.js +1 -1
- package/lib/utils/focusHeadingOrContainer.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Keyboard.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AA0E1F,eAAO,MAAM,cAAc,yGA+B1B,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,KAAK,EACL,cAAc,GAAG,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAClD,CAAC;;;;AAEF,wBAkBE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { defaultThemeProp } from '../../theme';
|
|
@@ -11,25 +11,25 @@ const osxKeyMapper = {
|
|
|
11
11
|
Alt: '⌥',
|
|
12
12
|
Option: '⌥',
|
|
13
13
|
Control: '⌃',
|
|
14
|
-
Return: '
|
|
15
|
-
Enter: '
|
|
16
|
-
Delete: '
|
|
14
|
+
Return: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Return' }), _jsx("span", { "aria-hidden": 'true', children: "\u21B5" })] })),
|
|
15
|
+
Enter: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Enter' }), _jsx("span", { "aria-hidden": 'true', children: "\u21B5" })] })),
|
|
16
|
+
Delete: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Delete' }), _jsx("span", { "aria-hidden": 'true', children: "Del" })] })),
|
|
17
17
|
CommandOrControl: '⌘'
|
|
18
18
|
};
|
|
19
19
|
const windowsKeyMapper = {
|
|
20
20
|
Control: 'Ctrl',
|
|
21
21
|
Alt: 'Alt',
|
|
22
22
|
Option: 'Alt',
|
|
23
|
-
Meta: '
|
|
24
|
-
Command: '
|
|
23
|
+
Meta: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Windows' }), _jsx("span", { "aria-hidden": 'true', children: "\u229E" })] })),
|
|
24
|
+
Command: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Windows' }), _jsx("span", { "aria-hidden": 'true', children: "\u229E" })] })),
|
|
25
25
|
Backspace: 'Backspace',
|
|
26
26
|
CommandOrControl: 'Ctrl'
|
|
27
27
|
};
|
|
28
28
|
const generalKeyMapper = {
|
|
29
|
-
'Page up': '
|
|
30
|
-
'Page down': 'Pg dn
|
|
29
|
+
'Page up': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Page up' }), _jsx("span", { "aria-hidden": 'true', children: "Pg up" })] })),
|
|
30
|
+
'Page down': (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Page down' }), _jsx("span", { "aria-hidden": 'true', children: "Pg dn" })] })),
|
|
31
31
|
Ins: 'Insert',
|
|
32
|
-
Shift: '
|
|
32
|
+
Shift: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": 'Shift' }), _jsx("span", { "aria-hidden": 'true', children: "\u21E7" })] }))
|
|
33
33
|
};
|
|
34
34
|
export const StyledKeyboard = styled.kbd(({ theme: { base, components: { text: { primary }, badges: { keyboard } } } }) => {
|
|
35
35
|
return css `
|
|
@@ -57,7 +57,7 @@ StyledKeyboard.defaultProps = defaultThemeProp;
|
|
|
57
57
|
export default withTestIds(forwardRef(function Keyboard({ testId, keyName, ...restProps }, ref) {
|
|
58
58
|
const { windows: isWindows } = useOS();
|
|
59
59
|
const testIds = useTestIds(testId, getKeyboardTestIds);
|
|
60
|
-
return (_jsx(StyledKeyboard, { "data-testid": testIds.root, ...restProps,
|
|
60
|
+
return (_jsx(StyledKeyboard, { "data-testid": testIds.root, ...restProps, ref: ref, children: (isWindows && windowsKeyMapper[keyName]) ||
|
|
61
61
|
osxKeyMapper[keyName] ||
|
|
62
62
|
generalKeyMapper[keyName] ||
|
|
63
63
|
keyName }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,mBAAmB,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvD,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Keyboard.js","sourceRoot":"","sources":["../../../src/components/Badges/Keyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport useOS from '../../hooks/useOS';\nimport type { NoChildrenProp, RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { useTestIds } from '../../hooks';\nimport { withTestIds } from '../../utils';\n\nimport { getKeyboardTestIds } from './Badges.test-ids';\n\nconst osxKeyMapper: { [key: string]: string | JSX.Element } = {\n Command: '⌘',\n Alt: '⌥',\n Option: '⌥',\n Control: '⌃',\n Return: (\n <>\n <span aria-label='Return' />\n <span aria-hidden='true'>↵</span>\n </>\n ),\n Enter: (\n <>\n <span aria-label='Enter' />\n <span aria-hidden='true'>↵</span>\n </>\n ),\n Delete: (\n <>\n <span aria-label='Delete' />\n <span aria-hidden='true'>Del</span>\n </>\n ),\n CommandOrControl: '⌘'\n};\n\nconst windowsKeyMapper: { [key: string]: string | JSX.Element } = {\n Control: 'Ctrl',\n Alt: 'Alt',\n Option: 'Alt',\n Meta: (\n <>\n <span aria-label='Windows' />\n <span aria-hidden='true'>⊞</span>\n </>\n ),\n Command: (\n <>\n <span aria-label='Windows' />\n <span aria-hidden='true'>⊞</span>\n </>\n ),\n Backspace: 'Backspace',\n CommandOrControl: 'Ctrl'\n};\n\nconst generalKeyMapper: { [key: string]: string | JSX.Element } = {\n 'Page up': (\n <>\n <span aria-label='Page up' />\n <span aria-hidden='true'>Pg up</span>\n </>\n ),\n 'Page down': (\n <>\n <span aria-label='Page down' />\n <span aria-hidden='true'>Pg dn</span>\n </>\n ),\n Ins: 'Insert',\n Shift: (\n <>\n <span aria-label='Shift' />\n <span aria-hidden='true'>⇧</span>\n </>\n )\n};\n\nexport const StyledKeyboard = styled.kbd(\n ({\n theme: {\n base,\n components: {\n text: { primary },\n badges: { keyboard }\n }\n }\n }) => {\n return css`\n background-color: ${keyboard['background-color']};\n color: ${base.palette['foreground-color']};\n display: inline-block;\n position: relative;\n font-family: ${base['font-family']};\n font-weight: ${primary['font-weight']};\n overflow: hidden;\n white-space: nowrap;\n padding: 0.125rem;\n border: 0.0125rem solid ${keyboard['border-color']};\n border-radius: calc(${base['border-radius']} / 4);\n text-transform: capitalize;\n text-align: center;\n min-width: 1.25rem;\n height: 1.25rem;\n text-overflow: ellipsis;\n line-height: 1rem;\n inset-block-start: calc(1.25rem / 4 - 0.125rem);\n `;\n }\n);\nStyledKeyboard.defaultProps = defaultThemeProp;\n\nexport type KeyboardProps = WithAttributes<\n 'kbd',\n NoChildrenProp & TestIdProp & { keyName: string }\n>;\n\nexport default withTestIds(\n forwardRef<RefElement<KeyboardProps>, PropsWithoutRef<KeyboardProps>>(function Keyboard(\n { testId, keyName, ...restProps },\n ref\n ) {\n const { windows: isWindows } = useOS();\n const testIds = useTestIds(testId, getKeyboardTestIds);\n\n return (\n <StyledKeyboard data-testid={testIds.root} {...restProps} ref={ref}>\n {(isWindows && windowsKeyMapper[keyName]) ||\n osxKeyMapper[keyName] ||\n generalKeyMapper[keyName] ||\n keyName}\n </StyledKeyboard>\n );\n }),\n getKeyboardTestIds\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAc,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO1E,MAAM,MAAM,WAAW,GAAG,cAAc,CACtC,MAAM,EACN,UAAU,GAAG;IACX,yFAAyF;IACzF,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAC5D,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB,CACF,CAAC;AAEF,eAAO,MAAM,YAAY,oIA0BvB,CAAC;;;;AAIH,wBAeE"}
|
|
@@ -16,6 +16,8 @@ export const StyledStatus = styled.span(props => {
|
|
|
16
16
|
const shadow = tryCatch(() => rgba(foreground, 0.1));
|
|
17
17
|
const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);
|
|
18
18
|
return css `
|
|
19
|
+
display: inline-block;
|
|
20
|
+
position: relative;
|
|
19
21
|
background-color: ${background};
|
|
20
22
|
border-radius: calc(0.25 * ${borderRadius});
|
|
21
23
|
color: ${foreground};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAYrD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAA+B,KAAK,CAAC,EAAE;IAC5E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Status.js","sourceRoot":"","sources":["../../../src/components/Badges/Status.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAEpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAYrD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAA+B,KAAK,CAAC,EAAE;IAC5E,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC;IAEjD,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACrD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAElG,OAAO,GAAG,CAAA;;;wBAGY,UAAU;iCACD,YAAY;aAChC,UAAU;wCACiB,MAAM;;iBAE7B,QAAQ,CAAC,GAAG;;;2BAGF,OAAO;;;;;GAK/B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,eAAe,WAAW,CACxB,UAAU,CAAwD,SAAS,MAAM,CAC/E,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EACpD,GAAG;IAEH,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAErD,OAAO,CACL,MAAC,YAAY,mBAAc,OAAO,CAAC,IAAI,KAAM,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,aAChF,8CAAmB,QAAQ,GAAQ,EACnC,KAAC,wBAAwB,cAAE,QAAQ,GAA4B,IAClD,CAChB,CAAC;AACJ,CAAC,CAAC,EACF,gBAAgB,CACjB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, ReactText } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { calculateFontSize } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport type { RefElement, WithAttributes, TestIdProp } from '../../types';\nimport { tryCatch, withTestIds } from '../../utils';\nimport { useTestIds } from '../../hooks';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\n\nimport { getStatusTestIds } from './Badges.test-ids';\n\nexport type StatusProps = WithAttributes<\n 'span',\n TestIdProp & {\n /** Determines the color to render the Badge as. This color is derived from the Theme. */\n variant: 'success' | 'urgent' | 'warn' | 'pending' | 'info';\n /** The content of the Badge, transformed to uppercase. */\n children: ReactText;\n }\n>;\n\nexport const StyledStatus = styled.span<Pick<StatusProps, 'variant'>>(props => {\n const { spacing } = props.theme.base;\n const borderRadius = props.theme.base['border-radius'];\n const { status } = props.theme.components.badges;\n\n const { background, foreground } = status[props.variant];\n const shadow = tryCatch(() => rgba(foreground, 0.1));\n const fontSize = calculateFontSize(props.theme.base['font-size'], props.theme.base['font-scale']);\n\n return css`\n display: inline-block;\n position: relative;\n background-color: ${background};\n border-radius: calc(0.25 * ${borderRadius});\n color: ${foreground};\n box-shadow: inset 0 0 0 0.0625rem ${shadow};\n display: inline-block;\n font-size: ${fontSize.xxs};\n font-weight: bold;\n line-height: 1rem;\n padding-inline: calc(${spacing} / 2);\n\n & > :first-child {\n text-transform: uppercase;\n }\n `;\n});\n\nStyledStatus.defaultProps = defaultThemeProp;\n\nexport default withTestIds(\n forwardRef<RefElement<StatusProps>, PropsWithoutRef<StatusProps>>(function Status(\n { testId, variant = 'info', children, ...restProps },\n ref\n ) {\n const testIds = useTestIds(testId, getStatusTestIds);\n\n return (\n <StyledStatus data-testid={testIds.root} {...restProps} variant={variant} ref={ref}>\n <span aria-hidden>{children}</span>\n <StyledVisuallyHiddenText>{children}</StyledVisuallyHiddenText>\n </StyledStatus>\n );\n }),\n getStatusTestIds\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQhD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG;IACtD,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,uBAAuB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAeD,eAAO,MAAM,cAAc,qJAc1B,CAAC;AAaF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsDzE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -18,8 +18,11 @@ const StyledFieldGroupList = styled.div(({ theme }) => css `
|
|
|
18
18
|
StyledFieldGroupList.defaultProps = defaultThemeProp;
|
|
19
19
|
export const StyledListItem = styled(FieldGroup)(({ theme }) => css `
|
|
20
20
|
padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
|
|
22
|
+
&:not(:last-of-type) {
|
|
23
|
+
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
24
|
+
margin-block-end: calc(2 * ${theme.base.spacing});
|
|
25
|
+
}
|
|
23
26
|
|
|
24
27
|
legend {
|
|
25
28
|
margin-block-end: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,UAAU,EAAE,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAG5D,YAAY,CAAC,QAAQ,CAAC,CAAC;AAgBvB,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;4BACqB,KAAK,CAAC,IAAI,CAAC,OAAO;;QAEtC,gBAAgB;;;KAGnB,CACJ,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;iBACU,KAAK,CAAC,IAAI,CAAC,OAAO,eAAe,KAAK,CAAC,IAAI,CAAC,OAAO
|
|
1
|
+
{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../src/components/FieldGroup/FieldGroupList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { ForwardProps } from '../../types';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\n\nimport FieldGroup, { StyledFieldGroup } from './FieldGroup';\nimport type { FieldGroupProps } from './FieldGroup';\n\nregisterIcon(plusIcon);\n\nexport type FieldGroupListItemProps = FieldGroupProps & {\n /** The ID of the field group list item */\n id: string;\n /** Item level onDelete callback. */\n onDelete?: (id: string) => void;\n};\n\nexport interface FieldGroupListProps {\n items: FieldGroupListItemProps[];\n onAdd?: () => void;\n onDelete?: (id: string) => void;\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledFieldGroupList = styled.div(\n ({ theme }) =>\n css`\n margin-block-start: ${theme.base.spacing};\n\n ${StyledFieldGroup} {\n margin-block-start: 0;\n }\n `\n);\n\nStyledFieldGroupList.defaultProps = defaultThemeProp;\n\nexport const StyledListItem = styled(FieldGroup)(\n ({ theme }) =>\n css`\n padding: ${theme.base.spacing} 0 calc(2 * ${theme.base.spacing});\n\n &:not(:last-of-type) {\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n margin-block-end: calc(2 * ${theme.base.spacing});\n }\n\n legend {\n margin-block-end: 0;\n }\n `\n);\n\nStyledListItem.defaultProps = defaultThemeProp;\n\nconst StyledAddButton = styled(Button)(\n ({ theme }) =>\n css`\n margin-top: ${theme.base.spacing};\n `\n);\n\nStyledAddButton.defaultProps = defaultThemeProp;\n\nconst FieldGroupList: FunctionComponent<FieldGroupListProps & ForwardProps> = forwardRef(\n function FieldGroupList(\n { items, onAdd, onDelete, ...restProps }: PropsWithoutRef<FieldGroupListProps>,\n ref: FieldGroupListProps['ref']\n ) {\n const t = useI18n();\n\n return (\n <StyledFieldGroupList ref={ref} {...restProps}>\n {items.map(\n ({\n id,\n children,\n name,\n headingTag,\n onDelete: itemOnDelete,\n ...restItemProps\n }: FieldGroupListItemProps) => {\n return (\n <StyledListItem\n key={id}\n name={name}\n headingTag={headingTag}\n {...restItemProps}\n actions={\n onDelete || itemOnDelete\n ? [\n {\n id: 'delete',\n text: t('delete'),\n icon: 'trash',\n iconOnly: true,\n onClick: () => {\n itemOnDelete?.(id);\n onDelete?.(id);\n }\n }\n ]\n : undefined\n }\n >\n {children}\n </StyledListItem>\n );\n }\n )}\n {onAdd && (\n <StyledAddButton variant='link' onClick={onAdd}>\n <Icon name='plus' /> {t('add')}\n </StyledAddButton>\n )}\n </StyledFieldGroupList>\n );\n }\n);\n\nexport default FieldGroupList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoValue.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NoValue.d.ts","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,OAAO,mBAQZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled from 'styled-components';
|
|
2
3
|
import { useI18n } from '../../hooks';
|
|
3
4
|
import VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';
|
|
5
|
+
const StyledNoValue = styled.span `
|
|
6
|
+
display: inline-block;
|
|
7
|
+
position: relative;
|
|
8
|
+
`;
|
|
4
9
|
const NoValue = () => {
|
|
5
10
|
const t = useI18n();
|
|
6
|
-
return (_jsxs(
|
|
11
|
+
return (_jsxs(StyledNoValue, { children: [_jsx("span", { "aria-hidden": true, children: "\u2013\u2013" }), _jsx(VisuallyHiddenText, { children: t('no_value') })] }));
|
|
7
12
|
};
|
|
8
13
|
export default NoValue;
|
|
9
14
|
//# sourceMappingURL=NoValue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoValue.js","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,kBAAkB,MAAM,0CAA0C,CAAC;AAE1E,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"NoValue.js","sourceRoot":"","sources":["../../../src/components/NoValue/NoValue.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,kBAAkB,MAAM,0CAA0C,CAAC;AAE1E,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGhC,CAAC;AAEF,MAAM,OAAO,GAAG,GAAG,EAAE;IACnB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,CACL,MAAC,aAAa,eACZ,+DAAuC,EACvC,KAAC,kBAAkB,cAAE,CAAC,CAAC,UAAU,CAAC,GAAsB,IAC1C,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { useI18n } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText/VisuallyHiddenText';\n\nconst StyledNoValue = styled.span`\n display: inline-block;\n position: relative;\n`;\n\nconst NoValue = () => {\n const t = useI18n();\n return (\n <StyledNoValue>\n <span aria-hidden>––</span>\n <VisuallyHiddenText>{t('no_value')}</VisuallyHiddenText>\n </StyledNoValue>\n );\n};\n\nexport default NoValue;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EACF,GAAG,EAIH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAuGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKAgEhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EACF,GAAG,EAIH,iBAAiB,EACjB,oBAAoB,EACrB,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM3E,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,cAAc;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,sBAAsB,mJAiDlC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GAuGhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKAgEhC,CAAC;AAIF,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,GAAG,YAAY,CA8FjD,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -211,7 +211,9 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
|
|
|
211
211
|
newRef.current.indeterminate = !!indeterminate;
|
|
212
212
|
}
|
|
213
213
|
}, [newRef, indeterminate, isRadio]);
|
|
214
|
-
return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly
|
|
214
|
+
return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, onMouseDown: (e) => {
|
|
215
|
+
e.preventDefault();
|
|
216
|
+
} }), _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, onClick: (e) => {
|
|
215
217
|
if (readOnly)
|
|
216
218
|
e.preventDefault();
|
|
217
219
|
onClick?.(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type {\n FC,\n Ref,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline */\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n props: PropsWithoutRef<RadioCheckProps>,\n ref: RadioCheckProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n});\n\nexport default RadioCheck;\n"]}
|
|
1
|
+
{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type {\n FC,\n Ref,\n MouseEvent,\n KeyboardEvent,\n PropsWithoutRef,\n MouseEventHandler,\n KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Makes the input non editable and non clickable. The browser defaults to false. */\n readOnly?: FormControlProps['readOnly'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Sets the type of input. */\n type: 'radio' | 'checkbox';\n /** Sets checked prop via onChange when using as controlled component. */\n checked?: boolean;\n /** Initialize checked prop when using as uncontrolled component. */\n defaultChecked?: boolean;\n /**\n * Sets control to an an indeterminate state.\n * @default false\n */\n indeterminate?: boolean;\n /**\n * Controls the styling of the RadioCheck.\n * @default 'simple'\n */\n variant?: 'simple' | 'card';\n /** Callback function for onClick events. */\n onClick?: MouseEventHandler<HTMLInputElement>;\n /** Callback function for onKeyDown events. */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** info like error, success, warning messages */\n info?: FormControlProps['info'];\n /** Ref forwarded to the underlying input. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n props => {\n const {\n theme: {\n base: {\n spacing,\n palette: { 'primary-background': primaryBackground }\n },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n const useBackgroundColor =\n status && formField[status]\n ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n : backgroundColor;\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: ${spacing};\n border: ${borderWidth} solid ${useBorderColor};\n background-color: ${useBackgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline */\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n margin: auto;\n width: 100%;\n height: 100%;\n background-color: ${foreground};\n transform: scale(0.4);\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled || readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n\n ${!(disabled || readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(function RadioCheck(\n props: PropsWithoutRef<RadioCheckProps>,\n ref: RadioCheckProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n indeterminate = false,\n readOnly = false,\n variant = 'simple',\n onClick,\n onKeyDown,\n status,\n info,\n additionalInfo,\n ...restProps\n } = props;\n\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const newRef = useConsolidatedRef(ref);\n\n useEffect(() => {\n if (!isRadio && newRef.current) {\n newRef.current.indeterminate = !!indeterminate;\n }\n }, [newRef, indeterminate, isRadio]);\n\n return (\n <FormField\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n e.preventDefault();\n }}\n />\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n >\n <StyledRadioCheckInput\n {...restProps}\n id={id}\n type={type}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') {\n e.preventDefault();\n }\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n e.preventDefault();\n }\n\n onKeyDown?.(e);\n }}\n ref={newRef}\n />\n </FormField>\n );\n});\n\nexport default RadioCheck;\n"]}
|
|
@@ -7,7 +7,7 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
|
|
|
7
7
|
/** Maximum length of characters that can be input. */
|
|
8
8
|
maxLength?: number;
|
|
9
9
|
/**
|
|
10
|
-
* Allows the user to resize the Text Area.
|
|
10
|
+
* Allows the user to resize the Text Area. This prop is ignored if autoResize is true.
|
|
11
11
|
* @default false
|
|
12
12
|
*/
|
|
13
13
|
resizable?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAqC,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAqC,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAEvF,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAQvD,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU;IAC5F,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;;;;AAoID,wBAAyD"}
|
|
@@ -1,27 +1,34 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useCallback, useState, useEffect } from 'react';
|
|
2
|
+
import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
|
|
3
3
|
import FormField from '../FormField';
|
|
4
4
|
import { StyledFormControl } from '../FormControl';
|
|
5
5
|
import { hasProp, withTestIds } from '../../utils';
|
|
6
|
-
import {
|
|
6
|
+
import { useI18n, useTestIds, useUID } from '../../hooks';
|
|
7
7
|
import Text from '../Text';
|
|
8
|
-
import StyledTextArea from './TextArea.styles';
|
|
8
|
+
import StyledTextArea, { AutoResizeWrapper } from './TextArea.styles';
|
|
9
9
|
import { getTextAreaTestIds } from './TextArea.test-ids';
|
|
10
10
|
const TextArea = forwardRef(function TextArea(props, ref) {
|
|
11
11
|
const uid = useUID();
|
|
12
12
|
const { testId, additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, readOnly = false, label, labelHidden, info, status, resizable = false, autoResize = true, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
|
|
13
13
|
const t = useI18n();
|
|
14
14
|
const testIds = useTestIds(testId, getTextAreaTestIds);
|
|
15
|
-
const
|
|
16
|
-
const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
|
|
15
|
+
const autoResizeRef = useRef(null);
|
|
17
16
|
const [charCount, setCharCount] = useState(0);
|
|
18
17
|
const controlProp = {};
|
|
18
|
+
// Sets the content for the hidden pseudo element that calculates the height of the textarea
|
|
19
|
+
const updateAutoResizeEl = (content) => {
|
|
20
|
+
if (autoResize && autoResizeRef.current) {
|
|
21
|
+
autoResizeRef.current.dataset.textareaContent = content ?? '';
|
|
22
|
+
}
|
|
23
|
+
};
|
|
19
24
|
useEffect(() => {
|
|
20
25
|
if ('value' in props) {
|
|
21
26
|
setCharCount(props.value ? props.value.length : 0);
|
|
27
|
+
updateAutoResizeEl(props.value);
|
|
22
28
|
}
|
|
23
29
|
else if ('defaultValue' in props) {
|
|
24
30
|
setCharCount(props.defaultValue ? props.defaultValue.length : 0);
|
|
31
|
+
updateAutoResizeEl(props.defaultValue);
|
|
25
32
|
}
|
|
26
33
|
}, [props]);
|
|
27
34
|
// Conditionally render component as controlled/uncontrolled
|
|
@@ -35,10 +42,11 @@ const TextArea = forwardRef(function TextArea(props, ref) {
|
|
|
35
42
|
if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {
|
|
36
43
|
onChangeProp?.(e);
|
|
37
44
|
setCharCount(e.target.value.length);
|
|
38
|
-
|
|
45
|
+
updateAutoResizeEl(e.target.value);
|
|
39
46
|
}
|
|
40
|
-
}, [onChangeProp,
|
|
41
|
-
const
|
|
47
|
+
}, [onChangeProp, hardStop, maxLength]);
|
|
48
|
+
const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: ref, id: id, required: required, disabled: disabled, status: status, readOnly: readOnly, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, as: StyledTextArea }));
|
|
49
|
+
const Comp = autoResize ? (_jsx(AutoResizeWrapper, { ref: autoResizeRef, children: TextAreaControl })) : (_jsx("div", { children: TextAreaControl }));
|
|
42
50
|
return label || displayCharCount ? (_jsx(FormField, { testId: testIds, additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, readOnly: readOnly, info: info, status: status, charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { readOnly: readOnly, variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
|
|
43
51
|
});
|
|
44
52
|
export default withTestIds(TextArea, getTextAreaTestIds);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';\nimport type { FC, Ref, PropsWithoutRef, ChangeEvent, ChangeEventHandler } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { hasProp, withTestIds } from '../../utils';\nimport { useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea, { AutoResizeWrapper } from './TextArea.styles';\nimport { getTextAreaTestIds } from './TextArea.test-ids';\n\nexport interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /** Minimum length of characters that can be input. */\n minLength?: number;\n /** Maximum length of characters that can be input. */\n maxLength?: number;\n /**\n * Allows the user to resize the Text Area. This prop is ignored if autoResize is true.\n * @default false\n */\n resizable?: boolean;\n /**\n * Enables the Text Area to resize itself automatically.\n * @default true\n */\n autoResize?: boolean;\n /**\n * Display a live character count in relation to the maxLength.\n * @default false\n */\n displayCharCount?: boolean;\n /**\n * Allow or disallow a value beyond the maxLength.\n * @default true\n */\n hardStop?: boolean;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(function TextArea(\n props: PropsWithoutRef<TextAreaProps>,\n ref: Ref<HTMLTextAreaElement>\n) {\n const uid = useUID();\n const {\n testId,\n additionalInfo,\n id = uid,\n value,\n defaultValue,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n labelHidden,\n info,\n status,\n resizable = false,\n autoResize = true,\n maxLength,\n displayCharCount = false,\n hardStop = true,\n onChange: onChangeProp,\n onResolveSuggestion,\n ...restProps\n } = props;\n const t = useI18n();\n\n const testIds = useTestIds(testId, getTextAreaTestIds);\n const autoResizeRef = useRef<HTMLDivElement>(null);\n const [charCount, setCharCount] = useState(0);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\n\n // Sets the content for the hidden pseudo element that calculates the height of the textarea\n const updateAutoResizeEl = (content?: string) => {\n if (autoResize && autoResizeRef.current) {\n autoResizeRef.current.dataset.textareaContent = content ?? '';\n }\n };\n\n useEffect(() => {\n if ('value' in props) {\n setCharCount(props.value ? props.value.length : 0);\n updateAutoResizeEl(props.value);\n } else if ('defaultValue' in props) {\n setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n updateAutoResizeEl(props.defaultValue);\n }\n }, [props]);\n\n // Conditionally render component as controlled/uncontrolled\n if (hasProp(props, 'value')) {\n controlProp.value = value ?? '';\n } else if (hasProp(props, 'defaultValue')) {\n controlProp.defaultValue = defaultValue ?? '';\n }\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLTextAreaElement>) => {\n if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n updateAutoResizeEl(e.target.value);\n }\n },\n [onChangeProp, hardStop, maxLength]\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={ref}\n id={id}\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n as={StyledTextArea}\n />\n );\n\n const Comp = autoResize ? (\n <AutoResizeWrapper ref={autoResizeRef}>{TextAreaControl}</AutoResizeWrapper>\n ) : (\n <div>{TextAreaControl}</div>\n );\n\n return label || displayCharCount ? (\n <FormField\n testId={testIds}\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n readOnly={readOnly}\n info={info}\n status={status}\n charLimitDisplay={\n displayCharCount && typeof maxLength === 'number' ? (\n <Text\n readOnly={readOnly}\n variant='secondary'\n aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n >\n {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {
|
|
2
2
|
resizable: boolean;
|
|
3
3
|
}, never>;
|
|
4
|
+
export declare const AutoResizeWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
5
|
export default StyledTextArea;
|
|
5
6
|
//# sourceMappingURL=TextArea.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;
|
|
1
|
+
{"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;SAczD,CAAC;AAMH,eAAO,MAAM,iBAAiB,yGAqB5B,CAAC;AAIH,eAAe,cAAc,CAAC"}
|
|
@@ -6,12 +6,40 @@ const StyledTextArea = styled.textarea(({ resizable }) => {
|
|
|
6
6
|
min-height: ${props => props.theme.components['text-area']['min-height']};
|
|
7
7
|
padding: ${props => props.theme.components['text-area'].padding};
|
|
8
8
|
-webkit-appearance: none;
|
|
9
|
-
${
|
|
10
|
-
css `
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
${resizable
|
|
10
|
+
? css `
|
|
11
|
+
resize: vertical;
|
|
12
|
+
`
|
|
13
|
+
: css `
|
|
14
|
+
resize: none;
|
|
15
|
+
`}
|
|
13
16
|
`;
|
|
14
17
|
});
|
|
15
18
|
StyledTextArea.defaultProps = defaultThemeProp;
|
|
19
|
+
// Creates a hidden pseudo element identical in size and content to the textarea element
|
|
20
|
+
// The hidden element mimics the textarea and is used to automatically calculate the necessary height
|
|
21
|
+
export const AutoResizeWrapper = styled.div(({ theme }) => {
|
|
22
|
+
return css `
|
|
23
|
+
display: grid;
|
|
24
|
+
grid-template-columns: minmax(0, 1fr);
|
|
25
|
+
|
|
26
|
+
${StyledTextArea} {
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&::after {
|
|
32
|
+
content: attr(data-textarea-content);
|
|
33
|
+
white-space: pre-wrap;
|
|
34
|
+
overflow-wrap: break-word;
|
|
35
|
+
visibility: hidden;
|
|
36
|
+
border-width: ${theme.components['form-control']['border-width']};
|
|
37
|
+
padding: ${theme.components['text-area'].padding};
|
|
38
|
+
font: inherit;
|
|
39
|
+
grid-area: 1 / 1 / -1 / -1;
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
});
|
|
43
|
+
AutoResizeWrapper.defaultProps = defaultThemeProp;
|
|
16
44
|
export default StyledTextArea;
|
|
17
45
|
//# sourceMappingURL=TextArea.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;MAE7D,CAAC,
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/E,OAAO,GAAG,CAAA;;kBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;eAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;MAE7D,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;SAEF;QACH,CAAC,CAAC,GAAG,CAAA;;SAEF;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,wFAAwF;AACxF,qGAAqG;AACrG,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;;;;MAIN,cAAc;;;;;;;;;;sBAUE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;iBACrD,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;;;GAInD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean }>(({ resizable }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n -webkit-appearance: none;\n ${resizable\n ? css`\n resize: vertical;\n `\n : css`\n resize: none;\n `}\n `;\n});\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\n// Creates a hidden pseudo element identical in size and content to the textarea element\n// The hidden element mimics the textarea and is used to automatically calculate the necessary height\nexport const AutoResizeWrapper = styled.div(({ theme }) => {\n return css`\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n\n ${StyledTextArea} {\n overflow: hidden;\n grid-area: 1 / 1 / -1 / -1;\n }\n\n &::after {\n content: attr(data-textarea-content);\n white-space: pre-wrap;\n overflow-wrap: break-word;\n visibility: hidden;\n border-width: ${theme.components['form-control']['border-width']};\n padding: ${theme.components['text-area'].padding};\n font: inherit;\n grid-area: 1 / 1 / -1 / -1;\n }\n `;\n});\n\nAutoResizeWrapper.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAAyB,YAAY,WAUvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,uMAShC,YAAY,WAgBd,CAAC;;AAEF,
|
|
1
|
+
{"version":3,"file":"GlobalStyle.d.ts","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKtD,eAAO,MAAM,mBAAmB,wDAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAAyB,YAAY,WAUvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,uMAShC,YAAY,WAgBd,CAAC;;AAEF,wBAyGG"}
|
|
@@ -38,7 +38,7 @@ export const createGlobalBodyStyles = ({ base: { 'font-size': baseFontSize, 'fon
|
|
|
38
38
|
`.join('');
|
|
39
39
|
};
|
|
40
40
|
export default createGlobalStyle(({ theme }) => {
|
|
41
|
-
const { base: { 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, palette: { 'foreground-color': foreground, 'scrollbar-track': scrollbarTrack, 'scrollbar-thumb': scrollbarThumb, 'scrollbar-thumb-hover': scrollbarThumbHover }, transparency: { 'transparent-3': transparent } }, components: { 'form-control': { 'background-color': backgroundColor } } } = theme;
|
|
41
|
+
const { base: { 'custom-scrollbar': customScrollbar, 'border-radius': borderRadius, palette: { 'foreground-color': foreground, 'scrollbar-track': scrollbarTrack, 'scrollbar-thumb': scrollbarThumb, 'scrollbar-thumb-hover': scrollbarThumbHover }, shadow: { focus }, transparency: { 'transparent-3': transparent } }, components: { 'form-control': { 'background-color': backgroundColor } } } = theme;
|
|
42
42
|
return css `
|
|
43
43
|
${globalSpacingStyles}
|
|
44
44
|
|
|
@@ -46,6 +46,16 @@ export default createGlobalStyle(({ theme }) => {
|
|
|
46
46
|
overscroll-behavior: none;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
h1:focus-visible,
|
|
50
|
+
h2:focus-visible,
|
|
51
|
+
h3:focus-visible,
|
|
52
|
+
h4:focus-visible,
|
|
53
|
+
h5:focus-visible,
|
|
54
|
+
h6:focus-visible {
|
|
55
|
+
outline: transparent;
|
|
56
|
+
box-shadow: ${focus};
|
|
57
|
+
}
|
|
58
|
+
|
|
49
59
|
::placeholder {
|
|
50
60
|
color: ${mix(transparent, foreground, backgroundColor)};
|
|
51
61
|
opacity: unset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAgB,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;;GAE1B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;;GAE5B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,EACP,kBAAkB,EAAE,UAAU,EAC9B,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EAAE,cAAc,EACjC,uBAAuB,EAAE,mBAAmB,EAC7C,EACD,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB
|
|
1
|
+
{"version":3,"file":"GlobalStyle.js","sourceRoot":"","sources":["../../src/styles/GlobalStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;CAQrC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAgB,EAAE,EAAE;IAC1E,OAAO,GAAG,CAAA;;;;;;wBAMY,KAAK;;GAE1B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EAAE,EACJ,WAAW,EAAE,YAAY,EACzB,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,UAAU,EACzB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,aAAa,EAAE,UAAU,EAC1B,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACP,EAAE,EAAE;IACjB,yBAAyB;IACzB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAEhE,OAAO,GAAG,CAAA;;;;;;mBAMO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAa,CAAC;qBAC7C,UAAU;eAChB,eAAe;qBACT,UAAU;;GAE5B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7C,MAAM,EACJ,IAAI,EAAE,EACJ,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,EACP,kBAAkB,EAAE,UAAU,EAC9B,iBAAiB,EAAE,cAAc,EACjC,iBAAiB,EAAE,cAAc,EACjC,uBAAuB,EAAE,mBAAmB,EAC7C,EACD,MAAM,EAAE,EAAE,KAAK,EAAE,EACjB,YAAY,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC/C,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACxD,EACF,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;MACN,mBAAmB;;;;;;;;;;;;;oBAaL,KAAK;;;;eAIV,GAAG,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC;;;;MAItD,eAAe;QACjB,GAAG,CAAA;;2BAEoB,cAAc,IAAI,cAAc;;;;;;;;;;;;8BAY7B,cAAc;;;;8BAId,cAAc;;;;;;;wCAOJ,YAAY;0CACV,cAAc;;;;0CAId,mBAAmB;;;;;;;;;;;;;;;;;KAiBxD;;MAEC,sBAAsB,CAAC,KAAK,CAAC;;QAE3B,sBAAsB,CAAC,KAAK,CAAC;;;;;;;;;;;;GAYlC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { mix } from 'polished';\nimport { createGlobalStyle, css } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\nimport { calculateFontSize } from './utils';\nimport type { FontSize } from './utils';\n\nexport const globalSpacingStyles = css`\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n`;\n\nexport const createGlobalRootStyles = ({ base: { scale } }: DefaultTheme) => {\n return css`\n :root,\n :host {\n height: 100%;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n font-size: calc(${scale} * 1rem);\n }\n `.join('');\n};\n\nexport const createGlobalBodyStyles = ({\n base: {\n 'font-size': baseFontSize,\n 'font-scale': baseFontScale,\n 'font-family': fontFamily,\n palette: { 'foreground-color': foregroundColor },\n 'line-height': lineHeight\n },\n components: { text }\n}: DefaultTheme) => {\n // Can't call a hook here\n const fontSize = calculateFontSize(baseFontSize, baseFontScale);\n\n return css`\n body,\n :host {\n min-height: 100%;\n margin: 0;\n padding: 0;\n font-size: ${fontSize[text.primary['font-size'] as FontSize]};\n font-family: ${fontFamily};\n color: ${foregroundColor};\n line-height: ${lineHeight};\n }\n `.join('');\n};\n\nexport default createGlobalStyle(({ theme }) => {\n const {\n base: {\n 'custom-scrollbar': customScrollbar,\n 'border-radius': borderRadius,\n palette: {\n 'foreground-color': foreground,\n 'scrollbar-track': scrollbarTrack,\n 'scrollbar-thumb': scrollbarThumb,\n 'scrollbar-thumb-hover': scrollbarThumbHover\n },\n shadow: { focus },\n transparency: { 'transparent-3': transparent }\n },\n components: {\n 'form-control': { 'background-color': backgroundColor }\n }\n } = theme;\n return css`\n ${globalSpacingStyles}\n\n body {\n overscroll-behavior: none;\n }\n\n h1:focus-visible,\n h2:focus-visible,\n h3:focus-visible,\n h4:focus-visible,\n h5:focus-visible,\n h6:focus-visible {\n outline: transparent;\n box-shadow: ${focus};\n }\n\n ::placeholder {\n color: ${mix(transparent, foreground, backgroundColor)};\n opacity: unset;\n }\n\n ${customScrollbar &&\n css`\n * {\n scrollbar-color: ${scrollbarThumb} ${scrollbarTrack};\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: ${scrollbarTrack};\n }\n\n *::-webkit-scrollbar-corner {\n background-color: ${scrollbarTrack};\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${borderRadius});\n box-shadow: inset 0 0 2px 4px ${scrollbarThumb};\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px ${scrollbarThumbHover};\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n ${createGlobalRootStyles(theme)}\n\n ${createGlobalBodyStyles(theme)}\n\n input,\n button,\n select,\n optgroup,\n textarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n `;\n});\n"]}
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* @param label Fallback label to apply to the container if focused.
|
|
5
5
|
* @returns boolean whether the focus was successful or not (eg. element is not visible).
|
|
6
6
|
*/
|
|
7
|
-
declare const focusHeadingOrContainer: (container: ParentNode, label
|
|
7
|
+
declare const focusHeadingOrContainer: (container: ParentNode, label?: string) => boolean;
|
|
8
8
|
export default focusHeadingOrContainer;
|
|
9
9
|
//# sourceMappingURL=focusHeadingOrContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,
|
|
1
|
+
{"version":3,"file":"focusHeadingOrContainer.d.ts","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,QAAA,MAAM,uBAAuB,cAAe,UAAU,UAAU,MAAM,KAAG,OAmCxE,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
|
|
@@ -9,7 +9,7 @@ const focusHeadingOrContainer = (container, label) => {
|
|
|
9
9
|
const target = heading ?? container;
|
|
10
10
|
if (!(target instanceof HTMLElement || target instanceof SVGElement))
|
|
11
11
|
return false;
|
|
12
|
-
if (target === container && !target.hasAttribute('aria-label')) {
|
|
12
|
+
if (target === container && !target.hasAttribute('aria-label') && label) {
|
|
13
13
|
target.setAttribute('aria-label', label);
|
|
14
14
|
target.addEventListener('focusout', () => {
|
|
15
15
|
target.removeAttribute('aria-label');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,
|
|
1
|
+
{"version":3,"file":"focusHeadingOrContainer.js","sourceRoot":"","sources":["../../src/utils/focusHeadingOrContainer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,uBAAuB,GAAG,CAAC,SAAqB,EAAE,KAAc,EAAW,EAAE;IACjF,MAAM,OAAO,GAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAW,CAAC,MAAM,CACpE,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/C,IAAI,CACL,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,IAAI,SAAS,CAAC;IAEpC,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,IAAI,MAAM,YAAY,UAAU,CAAC;QAAE,OAAO,KAAK,CAAC;IAEnF,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,KAAK,EAAE;QACvE,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACvC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IAED,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;QACnC,MAAM,CAAC,KAAK,EAAE,CAAC;KAChB;SAAM;QACL,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,EAAE,CAAC;QACf,MAAM,CAAC,gBAAgB,CACrB,UAAU,EACV,GAAG,EAAE;YACH,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACrC,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;KACH;IACD,OAAO,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC;AAC3C,CAAC,CAAC;AAEF,eAAe,uBAAuB,CAAC","sourcesContent":["/**\n * Focuses the highest level heading element in a container, or the container itself if there are no headings.\n * @param container Node to query for a heading.\n * @param label Fallback label to apply to the container if focused.\n * @returns boolean whether the focus was successful or not (eg. element is not visible).\n */\nconst focusHeadingOrContainer = (container: ParentNode, label?: string): boolean => {\n const heading = (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).reduce<HTMLHeadingElement | null>(\n (el, tag) => el ?? container.querySelector(tag),\n null\n );\n\n const target = heading ?? container;\n\n if (!(target instanceof HTMLElement || target instanceof SVGElement)) return false;\n\n if (target === container && !target.hasAttribute('aria-label') && label) {\n target.setAttribute('aria-label', label);\n target.addEventListener(\n 'focusout',\n () => {\n target.removeAttribute('aria-label');\n },\n { once: true }\n );\n }\n\n if (target.hasAttribute('tabindex')) {\n target.focus();\n } else {\n target.setAttribute('tabindex', '-1');\n target.focus();\n target.addEventListener(\n 'focusout',\n () => {\n target.removeAttribute('tabindex');\n },\n { once: true }\n );\n }\n return document.activeElement === target;\n};\n\nexport default focusHeadingOrContainer;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-core",
|
|
3
|
-
"version": "5.0.0-dev.
|
|
3
|
+
"version": "5.0.0-dev.11.0",
|
|
4
4
|
"description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|