@pega/cosmos-react-core 9.0.0-build.27.5 → 9.0.0-build.27.7
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/FormField/FormField.d.ts +3 -1
- package/lib/components/FormField/FormField.d.ts.map +1 -1
- package/lib/components/FormField/FormField.js +12 -5
- package/lib/components/FormField/FormField.js.map +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorBackground.d.ts.map +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorBackground.js +1 -0
- package/lib/components/PageTemplates/GridLayout/EditorBackground.js.map +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorGridItem.d.ts.map +1 -1
- package/lib/components/PageTemplates/GridLayout/EditorGridItem.js +6 -0
- package/lib/components/PageTemplates/GridLayout/EditorGridItem.js.map +1 -1
- package/lib/components/TextArea/TextArea.d.ts +3 -1
- package/lib/components/TextArea/TextArea.d.ts.map +1 -1
- package/lib/components/TextArea/TextArea.js +57 -16
- package/lib/components/TextArea/TextArea.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +6 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +7 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +7 -0
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +6 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/lib/theme/theme.d.ts +54 -0
- package/lib/theme/theme.d.ts.map +1 -1
- package/lib/theme/themeDefinition.json +30 -0
- package/lib/theme/themeOverrides.schema.json +37 -0
- package/lib/theme/themes/orionDarkTheme.json +9 -1
- package/lib/theme/themes/orionTheme.json +9 -1
- package/lib/theme/themes/virgoDarkTheme.json +1 -11
- package/lib/theme/themes/virgoTheme.json +1 -11
- package/package.json +1 -1
|
@@ -70,7 +70,9 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
|
|
|
70
70
|
/** Suppresses announcements for status changes. */
|
|
71
71
|
suppressAnnouncements?: boolean;
|
|
72
72
|
}
|
|
73
|
-
export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & Pick<FormFieldProps, "inline"
|
|
73
|
+
export declare const StyledFormFieldInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<FormControlProps, "status"> & Pick<FormFieldProps, "inline"> & {
|
|
74
|
+
$infoAbove?: boolean;
|
|
75
|
+
}>> & string;
|
|
74
76
|
export declare const StyledLabelRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
75
77
|
inline: boolean;
|
|
76
78
|
}>> & string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmB3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyBD,eAAO,MAAM,mBAAmB;iBACqD,OAAO;YAqC1F,CAAC;AAIH,eAAO,MAAM,cAAc;YAAwB,OAAO;YAUxD,CAAC;AAEH,eAAO,MAAM,eAAe;gBACK,OAAO;wBAAsB,OAAO;YAuEnE,CAAC;;;;AAiVH,wBAA2D"}
|
|
@@ -35,7 +35,7 @@ const StyledClearButton = styled(Button)(({ theme }) => {
|
|
|
35
35
|
`;
|
|
36
36
|
});
|
|
37
37
|
StyledClearButton.defaultProps = defaultThemeProp;
|
|
38
|
-
export const StyledFormFieldInfo = styled.div(({ status, inline, theme }) => {
|
|
38
|
+
export const StyledFormFieldInfo = styled.div(({ status, inline, $infoAbove, theme }) => {
|
|
39
39
|
const { base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }, components: { 'form-field': formField } } = theme;
|
|
40
40
|
const fontSizes = calculateFontSize(fontSize, fontScale);
|
|
41
41
|
const infoFontSize = fontSizes.xxs;
|
|
@@ -52,7 +52,13 @@ export const StyledFormFieldInfo = styled.div(({ status, inline, theme }) => {
|
|
|
52
52
|
`}
|
|
53
53
|
|
|
54
54
|
&:not(:empty) {
|
|
55
|
-
|
|
55
|
+
${$infoAbove
|
|
56
|
+
? css `
|
|
57
|
+
margin-block-end: calc(0.25 * ${spacing});
|
|
58
|
+
`
|
|
59
|
+
: css `
|
|
60
|
+
margin-block-start: calc(0.25 * ${spacing});
|
|
61
|
+
`}
|
|
56
62
|
}
|
|
57
63
|
|
|
58
64
|
${status &&
|
|
@@ -176,6 +182,7 @@ const FormField = forwardRef(function FormField(props, ref) {
|
|
|
176
182
|
const uid = useUID();
|
|
177
183
|
const theme = useTheme();
|
|
178
184
|
const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = theme.components['form-field'].layout === 'inline', onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
|
|
185
|
+
const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';
|
|
179
186
|
const testIds = useTestIds(testId, getFormFieldTestIds);
|
|
180
187
|
const asFieldset = as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');
|
|
181
188
|
const t = useI18n();
|
|
@@ -234,13 +241,13 @@ const FormField = forwardRef(function FormField(props, ref) {
|
|
|
234
241
|
if (actions) {
|
|
235
242
|
content = (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, item: { grow: labelInline ? 1 : undefined }, children: [content, _jsx(Actions, { items: actions, menuAt: 3 })] }));
|
|
236
243
|
}
|
|
237
|
-
let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, inline: labelInline, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
|
|
244
|
+
let infoContent = (_jsxs(Flex, { id: `${id}-info`, "data-testid": testIds.info, status: status, as: StyledFormFieldInfo, container: { alignItems: 'center', gap: 0.5 }, inline: labelInline, "$infoAbove": infoAbove, children: [status && status !== 'pending' && (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { alignSelf: 'start' }, as: StyledStatusIcon, status: status, name: statusIconMap[status] }), _jsx(VisuallyHiddenText, { children: `${t(status)} ` })] })), info] }));
|
|
238
245
|
if (charLimitDisplay) {
|
|
239
246
|
infoContent = (_jsxs(Flex, { container: { justify: infoContent ? 'between' : 'end', gap: 1 }, children: [infoContent, _jsx(Flex, { item: { shrink: 0 }, children: charLimitDisplay })] }));
|
|
240
247
|
}
|
|
241
248
|
if (hasSuggestion) {
|
|
242
249
|
const focusables = getFocusables(consolidatedRef);
|
|
243
|
-
infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
|
|
250
|
+
infoContent = (_jsxs(Flex, { container: { alignItems: 'start', justify: 'between' }, children: [_jsxs(StyledFormFieldInfo, { "data-testid": testIds.info, status: status, id: `${id}-info`, "$infoAbove": infoAbove, children: [t('suggestion_info'), _jsx(VisuallyHiddenText, { "aria-live": 'polite', children: t('suggestion_assist') })] }), _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [_jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionReject, onClick: () => {
|
|
244
251
|
onResolveSuggestion(false);
|
|
245
252
|
focusables[0]?.focus();
|
|
246
253
|
}, "aria-label": `${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`, children: t('no') }), _jsx(StyledSuggestionButton, { "data-testid": testIds.suggestionAccept, onClick: () => {
|
|
@@ -267,7 +274,7 @@ const FormField = forwardRef(function FormField(props, ref) {
|
|
|
267
274
|
alignItems: inline ? 'center' : undefined,
|
|
268
275
|
wrap: isRadioCheck || inline ? 'wrap' : undefined,
|
|
269
276
|
...container
|
|
270
|
-
}, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, content, !asFieldset && labelAfter && labelRow, !readOnly && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
|
|
277
|
+
}, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, !readOnly && infoAbove && infoContent, content, !asFieldset && labelAfter && labelRow, !readOnly && !infoAbove && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
|
|
271
278
|
onClear();
|
|
272
279
|
}, children: t('clear_selection') }))] }));
|
|
273
280
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor,\n type FontSize\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n children: ReactElement | ReactElement[];\n /**\n * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n */\n id?: string;\n /**\n * Determines how the wrapping label should be rendered.\n * @default 'label'\n */\n labelAs?: LabelProps['as'];\n /**\n * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n */\n labelFor?: LabelProps['htmlFor'];\n /**\n * Sets the id of the label.\n * @default undefined\n */\n labelId?: LabelProps['id'];\n /**\n * Visually hides the label region.\n * @default false\n */\n labelHidden?: boolean;\n /**\n * Visually places the label after the input.\n * @default false\n */\n labelAfter?: boolean;\n /**\n * Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n */\n isRadioCheck?: boolean;\n /**\n * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n */\n as?: 'div' | 'fieldset' | ComponentType<any>;\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: boolean;\n /** Optionally utilized by Input or Select. */\n actions?: Action[];\n /** Enables Flex container prop pass through. */\n container?: ExcludeStrict<FlexProps['container'], true>;\n /** Character remaining count. Typically used on Textareas only */\n charLimitDisplay?: ReactNode;\n /** Id of additional describing element. */\n 'aria-describedby'?: string;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: () => void;\n /** Suppresses announcements for status changes. */\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & Pick<FormFieldProps, 'inline'>\n>(({ status, inline, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n const labelFontSize = fontSizes[theme.components.text.primary['font-size'] as FontSize];\n\n return css`\n max-width: max-content;\n font-size: ${infoFontSize};\n word-break: break-word;\n\n ${inline &&\n css`\n padding-inline-start: calc(${labelFontSize} / ${infoFontSize} * 14ch);\n min-width: 100%;\n `}\n\n &:not(:empty) {\n margin-block-start: calc(0.25 * ${spacing});\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { asFieldset: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0*\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n});\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string | null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n const labelInline = inline && !isRadioCheck;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset || Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string | undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() || undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center', gap: 0.5 }}\n inline={labelInline}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo data-testid={testIds.info} status={status} id={`${id}-info`}>\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={`${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={`${t('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n wrap: isRadioCheck || inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset || !labelAfter) && labelRow}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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","sourcesContent":["import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from 'react';\nimport type { FC, ReactNode, ComponentType, ReactElement, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, ExcludeStrict, ForwardProps, OmitStrict, TestIdProp } from '../../types';\nimport Flex, { StyledFlex } from '../Flex';\nimport type { FlexProps } from '../Flex';\nimport Actions from '../Actions';\nimport type { FormControlProps } from '../FormControl';\nimport { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useTheme, useUID } from '../../hooks';\nimport Label, { StyledLabel } from '../Label';\nimport type { LabelProps } from '../Label';\nimport {\n calculateFontSize,\n getHoverColors,\n readableColor,\n getReadableStatusColor,\n type FontSize\n} from '../../styles';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { getFocusables, tryCatch, withTestIds, createClassName } from '../../utils';\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as warnSolidIcon from '../Icon/icons/warn-solid.icon';\nimport * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';\nimport { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';\n\nimport { getFormFieldTestIds } from './FormField.test-ids';\nimport type { elements } from './FormField.test-ids';\n\nregisterIcon(warnSolidIcon, diamondMinusIcon, checkIcon);\n\nexport interface FormFieldProps\n extends OmitStrict<FormControlProps, 'placeholder' | 'value' | 'defaultValue'>,\n TestIdProp<typeof elements> {\n /** Pass a single form control component i.e. Input | TextArea | Select | etc.. */\n children: ReactElement | ReactElement[];\n /**\n * An id is required to connect a FormField's wrapping element, control element and info(aria-describedby) live region.\n * A random id will be generated if none is provided.\n * Since MOST FormControls should possess an id(excl. i.e RadioCheckGroup and others) this can be used.\n * The id prop will be used to generate the following:\n * - FormControl <-> Label association via a Label's htmlFor prop.\n * - FormField's wrapping element id {id}-field.\n * - FormField info element id ${id}-info.\n */\n id?: string;\n /**\n * Determines how the wrapping label should be rendered.\n * @default 'label'\n */\n labelAs?: LabelProps['as'];\n /**\n * Overrides the for attribute on the label. If this is not set it will default to the forms id.\n * @default undefined\n */\n labelFor?: LabelProps['htmlFor'];\n /**\n * Sets the id of the label.\n * @default undefined\n */\n labelId?: LabelProps['id'];\n /**\n * Visually hides the label region.\n * @default false\n */\n labelHidden?: boolean;\n /**\n * Visually places the label after the input.\n * @default false\n */\n labelAfter?: boolean;\n /**\n * Property used to check whether input type is radio to handle styling for RadioCheck\n * @default false\n */\n isRadioCheck?: boolean;\n /**\n * Wrapping HTML element tag. Renders as a fieldset for grouped elements i.e. RadioButtons/CheckboxGroup\n * @default 'div'\n */\n as?: 'div' | 'fieldset' | ComponentType<any>;\n /**\n * Layout field elements inline in a row.\n * @default false\n */\n inline?: boolean;\n /** Optionally utilized by Input or Select. */\n actions?: Action[];\n /** Enables Flex container prop pass through. */\n container?: ExcludeStrict<FlexProps['container'], true>;\n /** Character remaining count. Typically used on Textareas only */\n charLimitDisplay?: ReactNode;\n /** Id of additional describing element. */\n 'aria-describedby'?: string;\n /** Callback invoked when the clear button is clicked. If provided will render the clear button. */\n onClear?: () => void;\n /** Suppresses announcements for status changes. */\n suppressAnnouncements?: boolean;\n}\n\nconst StyledStatusIcon = styled(Icon)<{ status: NonNullable<FormFieldProps['status']> }>(({\n theme,\n status\n}) => {\n return css`\n height: 1em;\n width: 1em;\n color: ${getReadableStatusColor(theme, status)};\n vertical-align: baseline;\n `;\n});\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledClearButton = styled(Button)(({ theme }) => {\n return css`\n margin-block-start: calc(${theme.base.spacing} / 2);\n align-self: start;\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormFieldInfo = styled.div<\n Pick<FormControlProps, 'status'> & Pick<FormFieldProps, 'inline'> & { $infoAbove?: boolean }\n>(({ status, inline, $infoAbove, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing },\n components: { 'form-field': formField }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n const infoFontSize = fontSizes.xxs;\n const labelFontSize = fontSizes[theme.components.text.primary['font-size'] as FontSize];\n\n return css`\n max-width: max-content;\n font-size: ${infoFontSize};\n word-break: break-word;\n\n ${inline &&\n css`\n padding-inline-start: calc(${labelFontSize} / ${infoFontSize} * 14ch);\n min-width: 100%;\n `}\n\n &:not(:empty) {\n ${$infoAbove\n ? css`\n margin-block-end: calc(0.25 * ${spacing});\n `\n : css`\n margin-block-start: calc(0.25 * ${spacing});\n `}\n }\n\n ${status &&\n formField[status] &&\n css`\n color: ${getReadableStatusColor(theme, status)};\n `}\n `;\n});\n\nStyledFormFieldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledLabelRow = styled.div<{ inline: boolean }>(({ inline }) => {\n if (inline) {\n return css`\n flex-shrink: 0;\n width: 14ch;\n ${StyledAdditionalInfo} {\n align-self: center;\n }\n `;\n }\n});\n\nexport const StyledFormField = styled.div<\n FormFieldProps & { asFieldset: boolean; showAdditionalInfo: boolean }\n>(props => {\n const {\n asFieldset,\n showAdditionalInfo,\n disabled,\n required,\n theme: {\n base: {\n palette: { urgent },\n 'disabled-opacity': disabledOpacity,\n spacing,\n 'hit-area': { 'compact-min': hitAreaCompact }\n }\n }\n } = props;\n\n return css`\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n -webkit-user-select: none;\n user-select: none;\n `}\n position: relative;\n border: 0;\n\n &:has(${StyledRadioCheckInput}:only-of-type) {\n ${StyledFormFieldInfo} {\n min-width: 100%;\n }\n }\n\n ${StyledFlex}:has(${StyledRadioCheck}) {\n flex-shrink: 0;\n }\n\n > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {\n &:not(:empty) {\n margin-bottom: calc(0.25 * ${spacing});\n min-height: ${hitAreaCompact};\n }\n }\n\n > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {\n ${required &&\n css`\n &::after {\n content: ${'\"\\\\00a0*\" / \"\"'};\n color: ${urgent};\n }\n `}\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n }\n\n ${asFieldset &&\n showAdditionalInfo &&\n css`\n > ${StyledFlex} > ${StyledLabel} {\n display: block;\n }\n\n > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {\n align-self: flex-start;\n }\n `}\n `;\n});\n\nStyledFormField.defaultProps = defaultThemeProp;\n\nconst StyledSuggestionButton = styled(Button)(({ theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale, 'border-radius': baseRadius, spacing },\n components: {\n 'form-control': { 'border-radius': radius, 'border-width': borderWidth }\n }\n } = theme;\n const { xxs: buttonFontSize } = calculateFontSize(fontSize, fontScale);\n const backgroundColor = getReadableStatusColor(theme, 'pending');\n const hoverColors = getHoverColors(backgroundColor);\n const color = tryCatch(() => readableColor(backgroundColor));\n const borderColor = color ? rgba(color, 0.4) : color;\n\n return css`\n background-color: ${backgroundColor};\n color: ${color};\n font-size: ${buttonFontSize};\n min-width: calc(3 * ${spacing});\n min-height: calc(3 * ${spacing});\n padding: 0 ${spacing};\n border-radius: 0;\n border: none;\n\n &:first-child {\n border-inline-end: ${borderWidth} solid ${borderColor};\n border-end-start-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: calc(2 * ${spacing});\n }\n\n &:last-child {\n border-end-end-radius: calc(${baseRadius} * ${radius});\n margin-inline-start: 0;\n }\n\n &:hover {\n color: ${hoverColors.foreground};\n background-color: ${hoverColors.background};\n }\n\n @media (pointer: coarse) {\n min-height: 2rem;\n }\n `;\n});\n\nStyledSuggestionButton.defaultProps = defaultThemeProp;\n\nconst statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };\n\nconst FormField: FC<FormFieldProps & ForwardProps> = forwardRef(function FormField(\n props: PropsWithoutRef<FormFieldProps>,\n ref: Ref<HTMLElement>\n) {\n const uid = useUID();\n const theme = useTheme();\n const {\n testId,\n children: controlElement,\n id = uid,\n as = 'div',\n label,\n labelAs: labelAsProp = 'label',\n labelFor = id,\n labelId: labelIdProp,\n labelHidden = false,\n labelAfter = false,\n info,\n status,\n suppressAnnouncements,\n isRadioCheck,\n charLimitDisplay,\n required = false,\n disabled = false,\n readOnly = false,\n inline = theme.components['form-field'].layout === 'inline',\n onClear,\n actions,\n container,\n additionalInfo,\n onResolveSuggestion,\n 'aria-describedby': ariaDescribedBy,\n className,\n ...restProps\n } = props;\n\n const infoAbove = theme.components['form-field']['helper-text-position'] === 'above';\n const testIds = useTestIds(testId, getFormFieldTestIds);\n\n const asFieldset =\n as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');\n const t = useI18n();\n const { announceAssertive } = useLiveLog();\n const labelAs = asFieldset ? 'span' : labelAsProp;\n const hasSuggestion = status === 'pending' && !!onResolveSuggestion;\n const consolidatedRef = useConsolidatedRef(ref);\n const labelRef = useRef<HTMLLabelElement | HTMLLegendElement>(null);\n const [labelText, setLabelText] = useState<string | null>(null);\n\n const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;\n const labelInline = inline && !isRadioCheck;\n const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;\n\n const labelContent = (\n <>\n <Label\n data-testid={testIds.label}\n id={labelId}\n as={labelAs}\n htmlFor={labelAs === 'label' ? labelFor : undefined}\n labelHidden={labelHidden}\n onClick={(e: MouseEvent) => {\n if (readOnly) e.preventDefault();\n }}\n inline={inline}\n ref={labelRef}\n >\n {label}\n </Label>\n\n {showAdditionalInfo && labelText && (\n <AdditionalInfo\n data-testid={testIds.additionalInfo}\n heading={additionalInfo.heading}\n contextualLabel={labelText}\n >\n {additionalInfo.content}\n </AdditionalInfo>\n )}\n </>\n );\n\n let labelRow: ReactNode;\n if (!isRadioCheck && !asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n as={StyledLabelRow}\n container={{ justify: labelInline ? 'start' : 'between', alignItems: 'end' }}\n item={{ alignSelf: 'stretch', shrink: labelInline ? 0 : undefined }}\n inline={labelInline}\n >\n {labelContent}\n </Flex>\n );\n } else if (asFieldset && !labelHidden) {\n labelRow = (\n <Flex\n container={{\n alignItems: 'end',\n justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined\n }}\n >\n {labelContent}\n </Flex>\n );\n } else {\n labelRow = labelContent;\n }\n\n useEffect(() => {\n setLabelText(labelRef.current?.textContent ?? null);\n }, [label]);\n\n useEffect(() => {\n if (suppressAnnouncements || (status !== 'error' && status !== 'warning')) return;\n\n let message = t(status);\n\n if (typeof info === 'string') message = `${message} ${info}`;\n\n if (labelRef.current?.textContent) message = `${labelRef.current?.textContent} ${message}`;\n\n announceAssertive({ message, type: status });\n }, [status, info]);\n\n // fieldset or single form control element\n let content: FormFieldProps['children'];\n if (asFieldset || Children.count(controlElement) > 1) {\n content = controlElement;\n } else {\n const controlElementAriaDescribedBy = Children.only(controlElement).props[\n 'aria-describedby'\n ] as string | undefined;\n content = cloneElement(controlElement as ReactElement, {\n 'aria-describedby':\n [controlElementAriaDescribedBy, info && !readOnly ? `${id}-info` : undefined]\n .join(' ')\n .trim() || undefined\n });\n }\n\n if (actions) {\n content = (\n <Flex\n container={{ alignItems: 'center', gap: 0.5 }}\n item={{ grow: labelInline ? 1 : undefined }}\n >\n {content}\n <Actions items={actions} menuAt={3} />\n </Flex>\n );\n }\n\n let infoContent = (\n <Flex\n id={`${id}-info`}\n data-testid={testIds.info}\n status={status}\n as={StyledFormFieldInfo}\n container={{ alignItems: 'center', gap: 0.5 }}\n inline={labelInline}\n $infoAbove={infoAbove}\n >\n {status && status !== 'pending' && (\n <>\n <Flex\n item={{ alignSelf: 'start' }}\n as={StyledStatusIcon}\n status={status}\n name={statusIconMap[status]}\n />\n <VisuallyHiddenText>{`${t(status)} `}</VisuallyHiddenText>\n </>\n )}\n {info}\n </Flex>\n );\n\n if (charLimitDisplay) {\n infoContent = (\n <Flex container={{ justify: infoContent ? 'between' : 'end', gap: 1 }}>\n {infoContent}\n <Flex item={{ shrink: 0 }}>{charLimitDisplay}</Flex>\n </Flex>\n );\n }\n\n if (hasSuggestion) {\n const focusables = getFocusables(consolidatedRef);\n infoContent = (\n <Flex container={{ alignItems: 'start', justify: 'between' }}>\n <StyledFormFieldInfo\n data-testid={testIds.info}\n status={status}\n id={`${id}-info`}\n $infoAbove={infoAbove}\n >\n {t('suggestion_info')}\n <VisuallyHiddenText aria-live='polite'>{t('suggestion_assist')}</VisuallyHiddenText>\n </StyledFormFieldInfo>\n <Flex container={{ wrap: 'nowrap' }}>\n <StyledSuggestionButton\n data-testid={testIds.suggestionReject}\n onClick={() => {\n onResolveSuggestion(false);\n focusables[0]?.focus();\n }}\n aria-label={`${t('no')}, ${t('reject_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('no')}\n </StyledSuggestionButton>\n <StyledSuggestionButton\n data-testid={testIds.suggestionAccept}\n onClick={() => {\n onResolveSuggestion(true);\n focusables[0]?.focus();\n }}\n aria-label={`${t('yes')}, ${t('accept_suggestion_button_a11y')}${labelText ? ` - ${labelText}` : ''}`}\n >\n {t('yes')}\n </StyledSuggestionButton>\n </Flex>\n </Flex>\n );\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n const target = e.target as HTMLElement;\n if (!target.closest('button')) {\n e.preventDefault();\n onResolveSuggestion?.(true);\n }\n }\n };\n\n const descriptionIds = [];\n if (ariaDescribedBy) descriptionIds.push(ariaDescribedBy);\n if (asFieldset && info) descriptionIds.push(`${id}-info`);\n\n return (\n <Flex\n data-testid={testIds.root}\n {...restProps}\n container={{\n direction: inline ? 'row' : 'column',\n alignItems: inline ? 'center' : undefined,\n wrap: isRadioCheck || inline ? 'wrap' : undefined,\n ...container\n }}\n as={StyledFormField}\n asFieldset={asFieldset}\n isRadioCheck={isRadioCheck}\n showAdditionalInfo={showAdditionalInfo}\n id={`${id}-field`}\n forwardedAs={as}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onKeyDown={hasSuggestion ? onKeyDown : undefined}\n aria-describedby={descriptionIds.length ? descriptionIds.join(' ') : undefined}\n aria-labelledby={asFieldset ? labelId : undefined}\n ref={consolidatedRef}\n className={createClassName('form-field', className, { status })}\n >\n {(asFieldset || !labelAfter) && labelRow}\n {!readOnly && infoAbove && infoContent}\n {content}\n {!asFieldset && labelAfter && labelRow}\n {!readOnly && !infoAbove && infoContent}\n {isRadioCheck && onClear && (\n <StyledClearButton\n variant='link'\n onClick={() => {\n onClear();\n }}\n >\n {t('clear_selection')}\n </StyledClearButton>\n )}\n </Flex>\n );\n});\n\nexport default withTestIds(FormField, getFormFieldTestIds);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAuErD,UAAU,qBAAsB,SAAQ,cAAc;IACpD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAyC/C,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -21,6 +21,7 @@ const StyledGridCell = styled.div(({ theme, highlighted, rowHeight }) => {
|
|
|
21
21
|
border: 1px solid ${borderColor};
|
|
22
22
|
background: ${background};
|
|
23
23
|
block-size: ${rowHeight}px;
|
|
24
|
+
border-radius: ${theme.components.card['border-radius']};
|
|
24
25
|
`;
|
|
25
26
|
});
|
|
26
27
|
StyledGridCell.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,OAAO,IAAI,MAAM,YAAY,CAAC;AAE9B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,mBAAmB,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAC/B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAEzE,OAAO,GAAG,CAAA;;0BAEY,WAAW;oBACjB,UAAU;oBACV,SAAS;
|
|
1
|
+
{"version":3,"file":"EditorBackground.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorBackground.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { Layout } from 'react-grid-layout';\nimport { rgba } from 'polished';\n\nimport Grid from '../../Grid';\nimport type { NoChildrenProp } from '../../../types';\nimport { defaultThemeProp } from '../../../theme';\nimport { useI18n } from '../../../hooks';\n\nimport useGridLayoutConfig from './config';\nimport { getArrayFromRange } from './utils';\n\nconst StyledGrid = styled(Grid)`\n position: absolute;\n z-index: -1;\n pointer-events: none;\n inline-size: 100%;\n`;\n\nconst StyledGridCell = styled.div<{ rowHeight: number; highlighted: boolean }>(\n ({ theme, highlighted, rowHeight }) => {\n const {\n base: { palette }\n } = theme;\n const borderColor = palette[highlighted ? 'warn' : 'border-line'];\n const background = highlighted ? rgba(palette.warn, 0.1) : 'transparent';\n\n return css`\n /* stylelint-disable-next-line unit-allowed-list */\n border: 1px solid ${borderColor};\n background: ${background};\n block-size: ${rowHeight}px;\n border-radius: ${theme.components.card['border-radius']};\n `;\n }\n);\nStyledGridCell.defaultProps = defaultThemeProp;\n\ninterface PageBreakProps {\n rowsAbove: number;\n rowHeight: number;\n margin: [number, number];\n containerPadding: [number, number];\n prefix: string;\n}\n\nconst StyledPageBreak = styled.div<PageBreakProps>(\n ({ containerPadding, rowHeight, theme, margin, rowsAbove, prefix }) => {\n const {\n base: { palette }\n } = theme;\n return css`\n position: absolute;\n inset-inline-start: ${containerPadding[0]}px;\n inset-inline-end: ${containerPadding[0]}px;\n inset-block-start: ${containerPadding[1] + rowsAbove * (rowHeight + margin[1])}px;\n /* stylelint-disable-next-line unit-allowed-list */\n margin-block-start: ${-margin[1] / 2 - 1}px;\n /* stylelint-disable-next-line unit-allowed-list */\n border-block-start: 2px dashed ${palette['border-line']};\n\n &::before {\n content: '${prefix}';\n position: absolute;\n font-size: 0.75rem;\n line-height: 1;\n transform: translate(0, -50%);\n background-color: ${palette['app-background']};\n color: ${palette['border-line']};\n padding-inline-end: 0.25rem;\n }\n `;\n }\n);\nStyledPageBreak.defaultProps = defaultThemeProp;\n\ninterface EditorBackgroundProps extends NoChildrenProp {\n layout?: Layout[];\n numColumns: number;\n rowHeight: number;\n rowsPerPage: number | null; // null when not applying auto-fit\n highlighted: boolean;\n}\n\n/**\n * Renders background grid-cells for GridEditor\n * @component\n */\nconst EditorBackground: FC<EditorBackgroundProps> = ({\n layout,\n numColumns,\n rowHeight,\n rowsPerPage,\n highlighted\n}) => {\n const t = useI18n();\n const { margin, containerPadding } = useGridLayoutConfig(true);\n\n const maxYInLayout = layout ? Math.max(...layout.map(item => item.y + item.h)) : 0;\n const maxY = Math.max(maxYInLayout, rowsPerPage || 0);\n const numGridCells = (maxY + 1) * numColumns;\n const cells = getArrayFromRange(0, numGridCells, false);\n\n // rowsPerPage will be null if auto-fit is disabled. Don't show pageBreaks in that case.\n const numPageBreaks = rowsPerPage ? Math.floor(maxY / rowsPerPage) : 0;\n const pageBreaks = getArrayFromRange(0, numPageBreaks, false);\n\n return (\n <StyledGrid container={{ cols: `repeat(${numColumns}, 1fr)`, gap: 2, pad: [0, 2, 2, 2] }}>\n {cells.map(n => (\n <StyledGridCell\n key={n}\n rowHeight={rowHeight}\n // Highlight all cells except the dummy row at the bottom\n highlighted={highlighted && n < numGridCells - numColumns}\n />\n ))}\n {pageBreaks.map(n => (\n <StyledPageBreak\n key={n}\n rowsAbove={(n + 1) * rowsPerPage!}\n rowHeight={rowHeight}\n margin={margin}\n containerPadding={containerPadding}\n prefix={t('page_number', [n + 1])}\n />\n ))}\n </StyledGrid>\n );\n};\n\nexport default EditorBackground;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorGridItem.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAyB,MAAM,OAAO,CAAC;AAKjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,mDAAmD;AACnD,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorGridItem.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAyB,MAAM,OAAO,CAAC;AAKjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAMnD,mDAAmD;AACnD,eAAO,MAAM,qBAAqB,iCAAiC,CAAC;AAoJpE,gDAAgD;AAChD,eAAO,MAAM,YAAY,sGAKvB,CAAC;AAEH,UAAU,mBAAoB,SAAQ,YAAY;IAChD,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7E,qBAAqB,EAAE,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3F;AAED;;;GAGG;AACH,QAAA,MAAM,cAAc,6HAqEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -16,6 +16,7 @@ const StyledWrapper = styled(Flex)(({ theme }) => {
|
|
|
16
16
|
/* To create a new stacking context */
|
|
17
17
|
z-index: 0;
|
|
18
18
|
background-color: ${base.palette['primary-background']};
|
|
19
|
+
border-radius: ${components.card['border-radius']};
|
|
19
20
|
|
|
20
21
|
.${resizeHandleClassName} {
|
|
21
22
|
opacity: 0;
|
|
@@ -31,6 +32,11 @@ const StyledWrapper = styled(Flex)(({ theme }) => {
|
|
|
31
32
|
|
|
32
33
|
&:focus,
|
|
33
34
|
&:hover {
|
|
35
|
+
@media (forced-colors: none) {
|
|
36
|
+
/* Suppress browser default focus ring only when forced colors are not active;
|
|
37
|
+
custom ::after border serves as the indicator */
|
|
38
|
+
outline: none;
|
|
39
|
+
}
|
|
34
40
|
&::after {
|
|
35
41
|
border: 0.125rem solid ${base.palette.interactive};
|
|
36
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorGridItem.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type KeyboardEvent, type ReactElement, type Ref, useCallback } from 'react';\nimport type { CoreProps } from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport type { ForwardProps } from '../../../types';\nimport { getFocusables } from '../../../utils';\nimport { defaultThemeProp } from '../../../theme';\n\nimport { hasNonNullProp } from './utils';\n\n/** CSS Class name for GridEditor resize-handles */\nexport const resizeHandleClassName = 'gridLayoutCustomResizeHandle';\n\n// To appear above the child contents at all times\nconst StyledWrapper = styled(Flex)(({ theme }) => {\n const { base, components } = theme;\n return css`\n position: relative;\n\n /* To create a new stacking context */\n z-index: 0;\n background-color: ${base.palette['primary-background']};\n\n .${resizeHandleClassName} {\n opacity: 0;\n }\n\n /* To mask the child content from getting clicked when dragging a grid item */\n &::after {\n content: '';\n position: absolute;\n z-index: ${base['z-index'].max - 1};\n inset: 0;\n }\n\n &:focus,\n &:hover {\n &::after {\n border: 0.125rem solid ${base.palette.interactive};\n\n /* For widgets where the interactive border might not be visible */\n outline: 0.125rem solid ${components.card.background};\n outline-offset: -0.25rem;\n }\n .${resizeHandleClassName} {\n opacity: 1;\n }\n }\n `;\n});\nStyledWrapper.defaultProps = defaultThemeProp;\n\ntype ResizeAxis = NonNullable<CoreProps['resizeHandles']>[number];\n\nconst axisWiseStyles: Record<ResizeAxis, ReturnType<typeof css>> = {\n n: css`\n inset-block-start: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.625rem;\n border-block-start-width: 0;\n border-inline-start-width: 0.375rem;\n border-inline-end-width: 0.375rem;\n border-block-end-width: 0.875rem;\n cursor: n-resize;\n `,\n s: css`\n inset-block-end: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.625rem;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0.375rem;\n border-inline-end-width: 0.375rem;\n border-block-end-width: 0;\n cursor: s-resize;\n `,\n e: css`\n inset-inline-end: 0;\n inset-block-start: 50%;\n margin-block-start: -0.625rem;\n border-block-start-width: 0.375rem;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0.375rem;\n cursor: e-resize;\n `,\n w: css`\n inset-inline-start: 0;\n inset-block-start: 50%;\n margin-block-start: -0.625rem;\n border-block-start-width: 0.375rem;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0.375rem;\n cursor: w-resize;\n `,\n ne: css`\n inset-block-start: 0;\n inset-inline-end: 0;\n border-block-start-width: 0;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0.875rem;\n cursor: ne-resize;\n `,\n nw: css`\n inset-block-start: 0;\n inset-inline-start: 0;\n border-block-start-width: 0;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0.875rem;\n cursor: nw-resize;\n `,\n sw: css`\n inset-block-end: 0;\n inset-inline-start: 0;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0;\n cursor: sw-resize;\n `,\n se: css`\n inset-block-end: 0;\n inset-inline-end: 0;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0;\n cursor: se-resize;\n `\n};\n\nconst StyledHandle = styled.div<{ axis: ResizeAxis }>(({ theme, axis }) => {\n const { base } = theme;\n return css`\n position: absolute;\n z-index: ${base['z-index'].max};\n inline-size: 1.25rem;\n block-size: 1.25rem;\n border: solid transparent;\n\n /* Using box-shadow instead of background coz the latter will be visible underneath the border as well. */\n /* We still want the 20x20 clickable region, but an 8x8 visible region. */\n box-shadow:\n inset 0.25rem 0.25rem 0 ${base.palette.interactive},\n inset -0.25rem -0.25rem 0 ${base.palette.interactive};\n\n ${axisWiseStyles[axis]}\n `;\n});\nStyledHandle.defaultProps = defaultThemeProp;\n\n/** Custom resize-handle for GridLayoutEditor */\nexport const ResizeHandle = forwardRef((props: any, ref) => {\n const { handleAxis, ...restProps } = props;\n return (\n <StyledHandle ref={ref} axis={handleAxis} className={resizeHandleClassName} {...restProps} />\n );\n});\n\ninterface EditorGridItemProps extends ForwardProps {\n children: ReactElement;\n itemKey: ReactElement['key'];\n itemLabel: string;\n moveItem: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n addOrSubtractItemSize: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n}\n\n/**\n * Wrapper on top of GridItems to provide custom styling etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst EditorGridItem = forwardRef(\n (\n {\n children,\n itemKey,\n itemLabel,\n moveItem,\n addOrSubtractItemSize,\n ...restProps\n }: EditorGridItemProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const handleKeyUp = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, -1);\n else moveItem(itemKey, 0, -1);\n break;\n case 'ArrowDown':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, 1);\n else moveItem(itemKey, 0, 1);\n break;\n case 'ArrowLeft':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, -1, 0);\n else moveItem(itemKey, -1, 0);\n break;\n case 'ArrowRight':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 1, 0);\n else moveItem(itemKey, 1, 0);\n break;\n // Do nothing\n default:\n }\n },\n [addOrSubtractItemSize, itemKey, moveItem]\n );\n\n // To keep the experience smoother, disabling all interactions on the child content of grid items.\n // The CSS `::after` mask prevents interactions through mouse clicks.\n // This method prevents interactions through keyboard navigation.\n // Not doing this from a `useEffect` since some of the child content can render after server calls etc.\n const disableChildrenFocus = useCallback(() => {\n if (!ref) return;\n // In case RGL ever uses a RefCallback instead of a RefObject\n if (!hasNonNullProp(ref, 'current')) return;\n\n const focusables = getFocusables(ref);\n focusables.forEach(elem => {\n elem.tabIndex = -1;\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <StyledWrapper\n container={{ direction: 'column' }}\n ref={ref}\n {...restProps}\n role='listitem'\n tabIndex={0}\n aria-label={itemLabel}\n onKeyUp={handleKeyUp}\n onFocus={disableChildrenFocus}\n >\n {children}\n </StyledWrapper>\n );\n }\n);\n\nexport default EditorGridItem;\n"]}
|
|
1
|
+
{"version":3,"file":"EditorGridItem.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/GridLayout/EditorGridItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, type KeyboardEvent, type ReactElement, type Ref, useCallback } from 'react';\nimport type { CoreProps } from 'react-grid-layout';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../../Flex';\nimport type { ForwardProps } from '../../../types';\nimport { getFocusables } from '../../../utils';\nimport { defaultThemeProp } from '../../../theme';\n\nimport { hasNonNullProp } from './utils';\n\n/** CSS Class name for GridEditor resize-handles */\nexport const resizeHandleClassName = 'gridLayoutCustomResizeHandle';\n\n// To appear above the child contents at all times\nconst StyledWrapper = styled(Flex)(({ theme }) => {\n const { base, components } = theme;\n return css`\n position: relative;\n\n /* To create a new stacking context */\n z-index: 0;\n background-color: ${base.palette['primary-background']};\n border-radius: ${components.card['border-radius']};\n\n .${resizeHandleClassName} {\n opacity: 0;\n }\n\n /* To mask the child content from getting clicked when dragging a grid item */\n &::after {\n content: '';\n position: absolute;\n z-index: ${base['z-index'].max - 1};\n inset: 0;\n }\n\n &:focus,\n &:hover {\n @media (forced-colors: none) {\n /* Suppress browser default focus ring only when forced colors are not active;\n custom ::after border serves as the indicator */\n outline: none;\n }\n &::after {\n border: 0.125rem solid ${base.palette.interactive};\n\n /* For widgets where the interactive border might not be visible */\n outline: 0.125rem solid ${components.card.background};\n outline-offset: -0.25rem;\n }\n .${resizeHandleClassName} {\n opacity: 1;\n }\n }\n `;\n});\nStyledWrapper.defaultProps = defaultThemeProp;\n\ntype ResizeAxis = NonNullable<CoreProps['resizeHandles']>[number];\n\nconst axisWiseStyles: Record<ResizeAxis, ReturnType<typeof css>> = {\n n: css`\n inset-block-start: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.625rem;\n border-block-start-width: 0;\n border-inline-start-width: 0.375rem;\n border-inline-end-width: 0.375rem;\n border-block-end-width: 0.875rem;\n cursor: n-resize;\n `,\n s: css`\n inset-block-end: 0;\n inset-inline-start: 50%;\n margin-inline-start: -0.625rem;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0.375rem;\n border-inline-end-width: 0.375rem;\n border-block-end-width: 0;\n cursor: s-resize;\n `,\n e: css`\n inset-inline-end: 0;\n inset-block-start: 50%;\n margin-block-start: -0.625rem;\n border-block-start-width: 0.375rem;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0.375rem;\n cursor: e-resize;\n `,\n w: css`\n inset-inline-start: 0;\n inset-block-start: 50%;\n margin-block-start: -0.625rem;\n border-block-start-width: 0.375rem;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0.375rem;\n cursor: w-resize;\n `,\n ne: css`\n inset-block-start: 0;\n inset-inline-end: 0;\n border-block-start-width: 0;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0.875rem;\n cursor: ne-resize;\n `,\n nw: css`\n inset-block-start: 0;\n inset-inline-start: 0;\n border-block-start-width: 0;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0.875rem;\n cursor: nw-resize;\n `,\n sw: css`\n inset-block-end: 0;\n inset-inline-start: 0;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0;\n border-inline-end-width: 0.875rem;\n border-block-end-width: 0;\n cursor: sw-resize;\n `,\n se: css`\n inset-block-end: 0;\n inset-inline-end: 0;\n border-block-start-width: 0.875rem;\n border-inline-start-width: 0.875rem;\n border-inline-end-width: 0;\n border-block-end-width: 0;\n cursor: se-resize;\n `\n};\n\nconst StyledHandle = styled.div<{ axis: ResizeAxis }>(({ theme, axis }) => {\n const { base } = theme;\n return css`\n position: absolute;\n z-index: ${base['z-index'].max};\n inline-size: 1.25rem;\n block-size: 1.25rem;\n border: solid transparent;\n\n /* Using box-shadow instead of background coz the latter will be visible underneath the border as well. */\n /* We still want the 20x20 clickable region, but an 8x8 visible region. */\n box-shadow:\n inset 0.25rem 0.25rem 0 ${base.palette.interactive},\n inset -0.25rem -0.25rem 0 ${base.palette.interactive};\n\n ${axisWiseStyles[axis]}\n `;\n});\nStyledHandle.defaultProps = defaultThemeProp;\n\n/** Custom resize-handle for GridLayoutEditor */\nexport const ResizeHandle = forwardRef((props: any, ref) => {\n const { handleAxis, ...restProps } = props;\n return (\n <StyledHandle ref={ref} axis={handleAxis} className={resizeHandleClassName} {...restProps} />\n );\n});\n\ninterface EditorGridItemProps extends ForwardProps {\n children: ReactElement;\n itemKey: ReactElement['key'];\n itemLabel: string;\n moveItem: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n addOrSubtractItemSize: (key: ReactElement['key'], deltaX: number, deltaY: number) => void;\n}\n\n/**\n * Wrapper on top of GridItems to provide custom styling etc.\n * https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles\n */\nconst EditorGridItem = forwardRef(\n (\n {\n children,\n itemKey,\n itemLabel,\n moveItem,\n addOrSubtractItemSize,\n ...restProps\n }: EditorGridItemProps,\n ref: Ref<HTMLDivElement>\n ) => {\n const handleKeyUp = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, -1);\n else moveItem(itemKey, 0, -1);\n break;\n case 'ArrowDown':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 0, 1);\n else moveItem(itemKey, 0, 1);\n break;\n case 'ArrowLeft':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, -1, 0);\n else moveItem(itemKey, -1, 0);\n break;\n case 'ArrowRight':\n if (e.shiftKey) addOrSubtractItemSize(itemKey, 1, 0);\n else moveItem(itemKey, 1, 0);\n break;\n // Do nothing\n default:\n }\n },\n [addOrSubtractItemSize, itemKey, moveItem]\n );\n\n // To keep the experience smoother, disabling all interactions on the child content of grid items.\n // The CSS `::after` mask prevents interactions through mouse clicks.\n // This method prevents interactions through keyboard navigation.\n // Not doing this from a `useEffect` since some of the child content can render after server calls etc.\n const disableChildrenFocus = useCallback(() => {\n if (!ref) return;\n // In case RGL ever uses a RefCallback instead of a RefObject\n if (!hasNonNullProp(ref, 'current')) return;\n\n const focusables = getFocusables(ref);\n focusables.forEach(elem => {\n elem.tabIndex = -1;\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <StyledWrapper\n container={{ direction: 'column' }}\n ref={ref}\n {...restProps}\n role='listitem'\n tabIndex={0}\n aria-label={itemLabel}\n onKeyUp={handleKeyUp}\n onFocus={disableChildrenFocus}\n >\n {children}\n </StyledWrapper>\n );\n }\n);\n\nexport default EditorGridItem;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { FC, ChangeEventHandler } from 'react';
|
|
1
|
+
import type { FC, ChangeEventHandler, FocusEventHandler } from 'react';
|
|
2
2
|
import type { BaseProps, ForwardProps, NoChildrenProp, TestIdProp } from '../../types';
|
|
3
3
|
import type { FormControlProps } from '../FormControl';
|
|
4
4
|
export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {
|
|
@@ -27,6 +27,8 @@ export interface TextAreaProps extends FormControlProps, BaseProps, NoChildrenPr
|
|
|
27
27
|
*/
|
|
28
28
|
hardStop?: boolean;
|
|
29
29
|
onChange?: ChangeEventHandler<HTMLTextAreaElement>;
|
|
30
|
+
onFocus?: FocusEventHandler<HTMLTextAreaElement>;
|
|
31
|
+
onBlur?: FocusEventHandler<HTMLTextAreaElement>;
|
|
30
32
|
}
|
|
31
33
|
declare const _default: FC<TextAreaProps & ForwardProps> & {
|
|
32
34
|
getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,EAAE,EAIF,kBAAkB,EAElB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AASvD,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;IAEnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;IACjD,MAAM,CAAC,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,CAAC;CACjD;;;;AAqLD,wBAAyD"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } 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 { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';
|
|
6
|
+
import { useConsolidatedRef, useElement, useI18n, useTestIds, useUID } from '../../hooks';
|
|
7
7
|
import Text from '../Text';
|
|
8
8
|
import VisuallyHiddenText from '../VisuallyHiddenText';
|
|
9
9
|
import StyledTextArea from './TextArea.styles';
|
|
@@ -13,9 +13,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
|
|
|
13
13
|
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;
|
|
14
14
|
const t = useI18n();
|
|
15
15
|
const testIds = useTestIds(testId, getTextAreaTestIds);
|
|
16
|
-
const [charCount, setCharCount] = useState(
|
|
17
|
-
const
|
|
18
|
-
const
|
|
16
|
+
const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);
|
|
17
|
+
const [focused, setFocused] = useState(false);
|
|
18
|
+
const [textAreaEl, setTextAreaEl] = useElement();
|
|
19
|
+
const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);
|
|
20
|
+
const prevHeightRef = useRef(0);
|
|
21
|
+
const focusTimeoutRef = useRef(NaN);
|
|
19
22
|
const controlProp = {};
|
|
20
23
|
// Conditionally render component as controlled/uncontrolled
|
|
21
24
|
if (hasProp(props, 'value')) {
|
|
@@ -30,25 +33,63 @@ const TextArea = forwardRef(function TextArea(props, ref) {
|
|
|
30
33
|
setCharCount(e.target.value.length);
|
|
31
34
|
}
|
|
32
35
|
}, [onChangeProp, hardStop, maxLength]);
|
|
36
|
+
const recalculateHeight = useCallback(() => {
|
|
37
|
+
if (!textAreaRef.current)
|
|
38
|
+
return;
|
|
39
|
+
textAreaRef.current.style.setProperty('--textarea-height', 'auto');
|
|
40
|
+
// Remove scrollbar width to avoid interference with calculation.
|
|
41
|
+
textAreaRef.current.style.setProperty('scrollbar-width', 'none');
|
|
42
|
+
const scrollHeight = textAreaRef.current.scrollHeight;
|
|
43
|
+
const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
|
|
44
|
+
// Set height to auto then scrollHeight + borderWidth to resize TextArea to content
|
|
45
|
+
textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
|
|
46
|
+
textAreaRef.current.style.removeProperty('scrollbar-width');
|
|
47
|
+
}, []);
|
|
33
48
|
useEffect(() => {
|
|
34
49
|
if (!textAreaRef.current)
|
|
35
50
|
return;
|
|
36
51
|
if (autoResize) {
|
|
37
|
-
|
|
38
|
-
// Remove scrollbar width to avoid interference with calculation.
|
|
39
|
-
textAreaRef.current.style.setProperty('scrollbar-width', 'none');
|
|
40
|
-
const scrollHeight = textAreaRef.current.scrollHeight;
|
|
41
|
-
const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
|
|
42
|
-
// Set height to auto then scrollHeight + borderWidth to resize TextArea to content
|
|
43
|
-
textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
|
|
44
|
-
textAreaRef.current.style.removeProperty('scrollbar-width');
|
|
52
|
+
recalculateHeight();
|
|
45
53
|
}
|
|
46
54
|
else {
|
|
47
55
|
textAreaRef.current.style.removeProperty('--textarea-height');
|
|
48
56
|
}
|
|
49
|
-
}, [value, autoResize]);
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
}, [value, autoResize, recalculateHeight]);
|
|
58
|
+
// Recalculate height when the element becomes visible after being displayed none.
|
|
59
|
+
useEffect(() => {
|
|
60
|
+
if (!textAreaEl || !autoResize)
|
|
61
|
+
return;
|
|
62
|
+
prevHeightRef.current = textAreaEl.offsetHeight;
|
|
63
|
+
const observer = new ResizeObserver(entries => {
|
|
64
|
+
const currentHeight = entries[0].contentRect.height;
|
|
65
|
+
if (prevHeightRef.current === 0 && currentHeight > 0) {
|
|
66
|
+
recalculateHeight();
|
|
67
|
+
}
|
|
68
|
+
prevHeightRef.current = currentHeight;
|
|
69
|
+
});
|
|
70
|
+
observer.observe(textAreaEl);
|
|
71
|
+
return () => observer.disconnect();
|
|
72
|
+
}, [autoResize, recalculateHeight, textAreaEl]);
|
|
73
|
+
useEffect(() => () => {
|
|
74
|
+
clearTimeout(focusTimeoutRef.current);
|
|
75
|
+
}, []);
|
|
76
|
+
const TextAreaControl = (_jsx(StyledFormControl, { "data-testid": testIds.control, ref: textAreaRef, id: id, "aria-describedby":
|
|
77
|
+
// Remove when focused to prevent each change in character count from being announced.
|
|
78
|
+
!focused && displayCharCount && typeof maxLength === 'number'
|
|
79
|
+
? `${id}-charCount`
|
|
80
|
+
: undefined, required: required, disabled: disabled, status: status, readOnly: readOnly, autoResize: autoResize, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!onResolveSuggestion, ...controlProp, ...restProps, onChange: onChange, onFocus: (e) => {
|
|
81
|
+
// Need to delay so screen readers will include the character count in announcement on initial focus.
|
|
82
|
+
// Shorter delays did not seem to work.
|
|
83
|
+
focusTimeoutRef.current = window.setTimeout(() => {
|
|
84
|
+
setFocused(true);
|
|
85
|
+
}, 250);
|
|
86
|
+
restProps.onFocus?.(e);
|
|
87
|
+
}, onBlur: (e) => {
|
|
88
|
+
clearTimeout(focusTimeoutRef.current);
|
|
89
|
+
setFocused(false);
|
|
90
|
+
restProps.onBlur?.(e);
|
|
91
|
+
}, as: StyledTextArea }));
|
|
92
|
+
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' ? (_jsxs(Text, { id: `${id}-charCount`, readOnly: readOnly, variant: 'secondary', children: [maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount, ' ', _jsx(VisuallyHiddenText, { children: t('characters_typed') })] })) : undefined, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: TextAreaControl })) : (TextAreaControl);
|
|
52
93
|
});
|
|
53
94
|
export default withTestIds(TextArea, getTextAreaTestIds);
|
|
54
95
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
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 } 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 { useConsolidatedRef, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea 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 [charCount, setCharCount] = useState(() => value?.length ?? defaultValue?.length ?? 0);\n const textAreaRef = useConsolidatedRef(ref);\n const consolidatedRef = useConsolidatedRef(ref, textAreaRef);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\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 }\n },\n [onChangeProp, hardStop, maxLength]\n );\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize]);\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={consolidatedRef}\n id={id}\n aria-describedby={\n displayCharCount && typeof maxLength === 'number' ? `${id}-charCount` : undefined\n }\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\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 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 id={`${id}-charCount`}\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 <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
|
|
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 {\n FC,\n Ref,\n PropsWithoutRef,\n ChangeEvent,\n ChangeEventHandler,\n FocusEvent,\n FocusEventHandler\n} 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 { useConsolidatedRef, useElement, useI18n, useTestIds, useUID } from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea 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\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n onBlur?: FocusEventHandler<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 [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);\n const [focused, setFocused] = useState(false);\n const [textAreaEl, setTextAreaEl] = useElement<HTMLTextAreaElement>();\n const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);\n const prevHeightRef = useRef(0);\n const focusTimeoutRef = useRef(NaN);\n\n const controlProp: {\n value?: string;\n defaultValue?: string;\n } = {};\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 }\n },\n [onChangeProp, hardStop, maxLength]\n );\n\n const recalculateHeight = useCallback(() => {\n if (!textAreaRef.current) return;\n\n textAreaRef.current.style.setProperty('--textarea-height', 'auto');\n\n // Remove scrollbar width to avoid interference with calculation.\n textAreaRef.current.style.setProperty('scrollbar-width', 'none');\n\n const scrollHeight = textAreaRef.current.scrollHeight;\n const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;\n // Set height to auto then scrollHeight + borderWidth to resize TextArea to content\n textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n }, []);\n\n useEffect(() => {\n if (!textAreaRef.current) return;\n\n if (autoResize) {\n recalculateHeight();\n } else {\n textAreaRef.current.style.removeProperty('--textarea-height');\n }\n }, [value, autoResize, recalculateHeight]);\n\n // Recalculate height when the element becomes visible after being displayed none.\n useEffect(() => {\n if (!textAreaEl || !autoResize) return;\n\n prevHeightRef.current = textAreaEl.offsetHeight;\n\n const observer = new ResizeObserver(entries => {\n const currentHeight = entries[0].contentRect.height;\n if (prevHeightRef.current === 0 && currentHeight > 0) {\n recalculateHeight();\n }\n prevHeightRef.current = currentHeight;\n });\n\n observer.observe(textAreaEl);\n return () => observer.disconnect();\n }, [autoResize, recalculateHeight, textAreaEl]);\n\n useEffect(\n () => () => {\n clearTimeout(focusTimeoutRef.current);\n },\n []\n );\n\n const TextAreaControl = (\n <StyledFormControl\n data-testid={testIds.control}\n ref={textAreaRef}\n id={id}\n aria-describedby={\n // Remove when focused to prevent each change in character count from being announced.\n !focused && displayCharCount && typeof maxLength === 'number'\n ? `${id}-charCount`\n : undefined\n }\n required={required}\n disabled={disabled}\n status={status}\n readOnly={readOnly}\n autoResize={autoResize}\n resizable={autoResize ? false : resizable}\n maxLength={hardStop ? maxLength : undefined}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n {...controlProp}\n {...restProps}\n onChange={onChange}\n onFocus={(e: FocusEvent<HTMLTextAreaElement>) => {\n // Need to delay so screen readers will include the character count in announcement on initial focus.\n // Shorter delays did not seem to work.\n focusTimeoutRef.current = window.setTimeout(() => {\n setFocused(true);\n }, 250);\n\n restProps.onFocus?.(e);\n }}\n onBlur={(e: FocusEvent<HTMLTextAreaElement>) => {\n clearTimeout(focusTimeoutRef.current);\n setFocused(false);\n restProps.onBlur?.(e);\n }}\n as={StyledTextArea}\n />\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 id={`${id}-charCount`} readOnly={readOnly} variant='secondary'>\n {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}{' '}\n <VisuallyHiddenText>{t('characters_typed')}</VisuallyHiddenText>\n </Text>\n ) : undefined\n }\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -1610,6 +1610,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1610
1610
|
default_font_info: string;
|
|
1611
1611
|
custom_font_family: string;
|
|
1612
1612
|
custom_font_family_error: string;
|
|
1613
|
+
helper_text_position_warning: string;
|
|
1613
1614
|
fields_to_highlight: string;
|
|
1614
1615
|
first_field: string;
|
|
1615
1616
|
first_n_fields: string;
|
|
@@ -1759,6 +1760,11 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1759
1760
|
app_info_create_branch: string;
|
|
1760
1761
|
app_info_open_branch: string;
|
|
1761
1762
|
app_info_application_version: string;
|
|
1763
|
+
app_preview_loading: string;
|
|
1764
|
+
app_preview_ready: string;
|
|
1765
|
+
app_preview_failed: string;
|
|
1766
|
+
app_open_preview: string;
|
|
1767
|
+
app_view_errors_in_preview: string;
|
|
1762
1768
|
expression_error_incorrect_data_type: string;
|
|
1763
1769
|
expression_error_with_data_and_object_type: string;
|
|
1764
1770
|
expression_error_with_data_type: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|