npm - @pega/cosmos-react-core - Versions diffs - 8.21.7 → 8.21.8 - Mend

@pega/cosmos-react-core 8.21.7 → 8.21.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/lib/components/RadioCheck/RadioCheck.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAK5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;CACjE,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA6ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GA0GhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;~~AAoIF~~,wBAA6D"}
1	+ {"version":3,"file":"RadioCheck.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAA8C,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAK5F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAc,UAAU,EAAE,MAAM,aAAa,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAIhE,MAAM,MAAM,eAAe,GAAG,cAAc,CAC1C,OAAO,EACP,cAAc,GACZ,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC5B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,iDAAiD;IACjD,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;CACjE,CACJ,CAAC;AAEF,eAAO,MAAM,sBAAsB,mJA6ClC,CAAC;AAIF,eAAO,MAAM,qBAAqB,2GA0GhC,CAAC;AAIH,eAAO,MAAM,gBAAgB,qJAkD5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kKA+DhC,CAAC;;;;AAmIF,wBAA6D"}

package/lib/components/RadioCheck/RadioCheck.js CHANGED Viewed

@@ -232,7 +232,7 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
             ac.abort();
         };
     }, []);
-    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, onMouseDown: (e) => e.preventDefault() }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, suppressAnnouncements: suppressAnnouncements, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
+    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, suppressAnnouncements: suppressAnnouncements, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
                 variant,
                 type
             }), id: id, type: type, required: required, checked: checked, defaultChecked: defaultChecked, "aria-describedby": readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby, disabled: disabled, readOnly: readOnly, onChange: onChange, onClick: (e) => {

package/lib/components/RadioCheck/RadioCheck.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, getActiveElement, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n 'input',\n NoChildrenProp &\n TestIdProp<typeof elements> & {\n /** Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Sets the type of input. /\n type: 'radio' \| 'checkbox';\n /\n Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n /\n indeterminate?: boolean;\n /* Sets checked prop via onChange when using as controlled component. /\n checked?: boolean;\n /* Initialize checked prop when using as uncontrolled component. /\n defaultChecked?: boolean;\n /\n Controls the styling of the RadioCheck.\n * @default 'simple'\n /\n variant?: 'simple' \| 'card';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* info like error, success, warning messages /\n info?: FormControlProps['info'];\n /* Callback invoked when this particular radio button is selected. /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* Pass a string used as input's aria-describedby. /\n ariaDescribedby?: string;\n /* Suppresses announcements for status changes. /\n suppressAnnouncements?: FormFieldProps['suppressAnnouncements'];\n }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' \| 'status'>>(\n props => {\n const {\n theme: {\n base: { spacing },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n let statusBorderColor = borderColor;\n if (status === 'error' \|\| status === 'warning') {\n statusBorderColor = formField[status]['status-color'];\n }\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: calc(0.5 ${spacing});\n border: ${borderWidth} solid ${statusBorderColor};\n background-color: ${backgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline /\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n content: '';\n position: absolute;\n inset: 0;\n margin: auto;\n width: calc(${size} 0.3);\n height: calc(${size} * 0.3);\n border-radius: ${radioRadius};\n border: calc(${size} * 0.2) solid ${foreground};\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' \| 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled \|\| readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' \| 'readOnly' \| 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n ${!(disabled \|\| readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n function RadioCheck(props, ref) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n readOnly = false,\n indeterminate = false,\n checked,\n defaultChecked,\n variant = 'simple',\n onClick,\n onKeyDown,\n onChange,\n status,\n info,\n additionalInfo,\n ariaDescribedby,\n suppressAnnouncements,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckTestIds);\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const inputRef = useConsolidatedRef(ref);\n const readonlyDescId = useUID();\n\n useEffect(() => {\n if (!isRadio && inputRef.current) inputRef.current.indeterminate = !!indeterminate;\n }, [inputRef, indeterminate, isRadio]);\n\n // Prevents blur when a user mouse clicks the label to select an input that is actively focused.\n useEffect(() => {\n if (!inputRef.current) return;\n\n const labelEl = inputRef.current.nextSibling;\n\n if (labelEl?.nodeName.toUpperCase() !== 'LABEL') return;\n\n const ac = new AbortController();\n\n labelEl.addEventListener(\n 'mousedown',\n e => {\n if (inputRef.current === getActiveElement()) {\n e.preventDefault();\n }\n },\n { signal: ac.signal }\n );\n\n return () => {\n ac.abort();\n };\n }, []);\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n suppressAnnouncements={suppressAnnouncements}\n >\n <StyledRadioCheckInput\n data-testid={testIds.control}\n {...restProps}\n className={createClassName('radio-check', className, {\n variant,\n type\n })}\n id={id}\n type={type}\n required={required}\n checked={checked}\n defaultChecked={defaultChecked}\n aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n onKeyDown?.(e);\n }}\n ref={inputRef}\n />\n </FormField>\n );\n }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}
1	+ {"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { MouseEvent, KeyboardEvent, PropsWithoutRef, ChangeEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { createClassName, getActiveElement, tryCatch, withTestIds } from '../../utils';\nimport type { NoChildrenProp, WithAttributes, RefElement, TestIdProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize, readableColor } from '../../styles';\nimport HiddenText from '../HiddenText';\nimport type { elements } from '../FormField/FormField.test-ids';\n\nimport { getRadioCheckTestIds } from './RadioCheck.test-ids';\n\nexport type RadioCheckProps = WithAttributes<\n 'input',\n NoChildrenProp &\n TestIdProp<typeof elements> & {\n /** Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Sets the type of input. /\n type: 'radio' \| 'checkbox';\n /\n Sets control to an [indeterminate state](https://css-tricks.com/almanac/selectors/i/indeterminate/#indeterminate-checkboxes).\n * @default false\n /\n indeterminate?: boolean;\n /* Sets checked prop via onChange when using as controlled component. /\n checked?: boolean;\n /* Initialize checked prop when using as uncontrolled component. /\n defaultChecked?: boolean;\n /\n Controls the styling of the RadioCheck.\n * @default 'simple'\n /\n variant?: 'simple' \| 'card';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* info like error, success, warning messages /\n info?: FormControlProps['info'];\n /* Callback invoked when this particular radio button is selected. /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* Pass a string used as input's aria-describedby. /\n ariaDescribedby?: string;\n /* Suppresses announcements for status changes. /\n suppressAnnouncements?: FormFieldProps['suppressAnnouncements'];\n }\n>;\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' \| 'status'>>(\n props => {\n const {\n theme: {\n base: { spacing },\n components: {\n 'form-field': formField,\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n },\n status\n } = props;\n\n let statusBorderColor = borderColor;\n if (status === 'error' \|\| status === 'warning') {\n statusBorderColor = formField[status]['status-color'];\n }\n\n return css`\n display: flex;\n flex-shrink: 0;\n position: relative;\n width: ${size};\n height: ${size};\n margin-inline-end: calc(0.5 ${spacing});\n border: ${borderWidth} solid ${statusBorderColor};\n background-color: ${backgroundColor};\n\n @media (pointer: coarse) {\n width: ${touchSize};\n height: ${touchSize};\n }\n\n &::after {\n content: '';\n display: none;\n }\n `;\n }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n const {\n disabled,\n theme: {\n base: { 'border-radius': baseBorderRadius },\n components: {\n 'form-control': {\n ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n ':read-only': { 'background-color': readOnlyBackgroundColor }\n },\n 'radio-check': {\n size,\n ':checked': {\n 'background-color': checkedBackgroundColor,\n 'border-color': checkedBorderColor\n }\n },\n checkbox: { 'border-radius': checkRadius },\n 'radio-button': { 'border-radius': radioRadius }\n }\n }\n } = props;\n\n const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n const foreground = tryCatch(() => readableColor(backgroundColor));\n\n const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n const { ltr } = useDirection();\n\n return css`\n ${hideVisually}\n margin: 0;\n\n /* Sets rect size for JAWS focus outline /\n width: ${size};\n height: ${size};\n\n ${!disabled &&\n css`\n &:focus ${prcSelector} {\n box-shadow: ${shadow};\n border-color: ${focusBorderColor};\n }\n `}\n &:checked\n ${prcSelector},\n &:checked:disabled\n ${prcSelector},\n &[type='checkbox']:indeterminate\n ${prcSelector},\n &[type='checkbox']:indeterminate:disabled\n ${prcSelector} {\n border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n background-color: ${backgroundColor};\n\n &::after {\n display: block;\n }\n }\n\n &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n border-radius: ${radioRadius};\n }\n\n &[type='radio'] ${prcSelector}::after {\n content: '';\n position: absolute;\n inset: 0;\n margin: auto;\n width: calc(${size} 0.3);\n height: calc(${size} * 0.3);\n border-radius: ${radioRadius};\n border: calc(${size} * 0.2) solid ${foreground};\n }\n\n &[type='checkbox'] ${prcSelector} {\n border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n }\n\n &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n &::after {\n width: 40%;\n height: 75%;\n ${ltr\n ? css`\n transform: rotate(45deg) translate(50%, -30%);\n `\n : css`\n transform: rotate(45deg) translate(-50%, 30%);\n `}\n border-right: 0.15em solid ${foreground};\n border-bottom: 0.15em solid ${foreground};\n }\n }\n\n &[type='checkbox']:indeterminate ${prcSelector} {\n display: flex;\n\n &::after {\n width: 90%;\n height: 0.15em;\n margin: auto;\n background-color: ${foreground};\n }\n }\n `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' \| 'readOnly'>>(\n props => {\n const {\n disabled,\n readOnly,\n theme: {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n } = props;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n return css`\n > ${StyledLabel} {\n cursor: pointer;\n display: flex;\n align-items: center;\n font-weight: ${labelFontWeight};\n word-break: break-word;\n font-size: ${fontSize.s};\n color: ${labelColor};\n margin: 0;\n min-height: ${base['hit-area']['mouse-min']};\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${base.spacing} / 4);\n }\n\n ${!(disabled \|\| readOnly) &&\n css`\n &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n `}\n `;\n }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' \| 'readOnly' \| 'status'>\n>(\n ({\n disabled,\n readOnly,\n status,\n theme: {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'form-field': formField,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n }\n }) => {\n const useBorderColor =\n status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n return css`\n min-width: min-content;\n cursor: pointer;\n background-color: ${card.background};\n border-radius: ${card['border-radius']};\n border: 0.0625rem solid ${useBorderColor};\n padding: ${spacing};\n\n ${disabled &&\n css`\n cursor: not-allowed;\n `}\n ${!(disabled \|\| readOnly) &&\n css`\n :hover:not(:focus-within) {\n border-color: ${hoverBorderColor};\n\n ${StyledLabel} ${StyledPseudoRadioCheck} {\n border-color: ${hoverBorderColor};\n }\n }\n\n :focus-within {\n box-shadow: ${shadow.focus};\n border-color: transparent;\n }\n `}\n > ${StyledLabel} {\n display: flex;\n align-items: center;\n color: ${label.color};\n font-weight: ${label['font-weight']};\n margin: 0;\n }\n\n > ${StyledFormFieldInfo} {\n margin: 0;\n padding-inline-start: calc(${spacing} / 4);\n }\n `;\n }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck = forwardRef<RefElement<RadioCheckProps>, PropsWithoutRef<RadioCheckProps>>(\n function RadioCheck(props, ref) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n type,\n id = uid,\n label,\n required = false,\n disabled = false,\n readOnly = false,\n indeterminate = false,\n checked,\n defaultChecked,\n variant = 'simple',\n onClick,\n onKeyDown,\n onChange,\n status,\n info,\n additionalInfo,\n ariaDescribedby,\n suppressAnnouncements,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckTestIds);\n const isRadio = type === 'radio';\n const card = variant === 'card';\n const inputRef = useConsolidatedRef(ref);\n const readonlyDescId = useUID();\n\n useEffect(() => {\n if (!isRadio && inputRef.current) inputRef.current.indeterminate = !!indeterminate;\n }, [inputRef, indeterminate, isRadio]);\n\n // Prevents blur when a user mouse clicks the label to select an input that is actively focused.\n useEffect(() => {\n if (!inputRef.current) return;\n\n const labelEl = inputRef.current.nextSibling;\n\n if (labelEl?.nodeName.toUpperCase() !== 'LABEL') return;\n\n const ac = new AbortController();\n\n labelEl.addEventListener(\n 'mousedown',\n e => {\n if (inputRef.current === getActiveElement()) {\n e.preventDefault();\n }\n },\n { signal: ac.signal }\n );\n\n return () => {\n ac.abort();\n };\n }, []);\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n isRadio={isRadio}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card ? 'div' : undefined}\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n info={info}\n isRadioCheck\n inline\n labelAfter\n additionalInfo={additionalInfo}\n suppressAnnouncements={suppressAnnouncements}\n >\n <StyledRadioCheckInput\n data-testid={testIds.control}\n {...restProps}\n className={createClassName('radio-check', className, {\n variant,\n type\n })}\n id={id}\n type={type}\n required={required}\n checked={checked}\n defaultChecked={defaultChecked}\n aria-describedby={readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onClick={(e: MouseEvent<HTMLInputElement>) => {\n if (readOnly) e.preventDefault();\n onClick?.(e);\n }}\n onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n if (type === 'checkbox' && readOnly && e.key === ' ') e.preventDefault();\n if (type === 'radio' && readOnly && e.key.includes('Arrow')) e.preventDefault();\n onKeyDown?.(e);\n }}\n ref={inputRef}\n />\n </FormField>\n );\n }\n);\n\nexport default withTestIds(RadioCheck, getRadioCheckTestIds);\n"]}

package/lib/components/TextArea/TextArea.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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;AAgBvD,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;;;;~~AAwMD~~,wBAAyD"}
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;AAgBvD,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;;;;AA+ND,wBAAyD"}

package/lib/components/TextArea/TextArea.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useState, useEffect, useRef } from 'react';
+import { forwardRef, useCallback, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import FormField from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { hasProp, withTestIds } from '../../utils';
 import { useConsolidatedRef, useElement, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Text from '../Text';
 import VisuallyHiddenText from '../VisuallyHiddenText';
-import StyledTextArea from './TextArea.styles';
+import StyledTextArea, { textAreaMaxHeight } from './TextArea.styles';
 import { getTextAreaTestIds } from './TextArea.test-ids';
 const warnCharCount = 30;
 const TextArea = forwardRef(function TextArea(props, ref) {
@@ -19,6 +19,7 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const [textAreaEl, setTextAreaEl] = useElement();
     const textAreaRef = useConsolidatedRef(ref, setTextAreaEl);
     const prevHeightRef = useRef(0);
+    const heightPxRef = useRef(0);
     const focusTimeoutRef = useRef(NaN);
     const { announceAssertive } = useLiveLog();
     const controlProp = {};
@@ -53,6 +54,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
     const recalculateHeight = useCallback(() => {
         if (!textAreaRef.current)
             return;
+        const baseHeightPx = heightPxRef.current;
+        const currentHeight = parseFloat(getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height'));
+        textAreaRef.current.style.marginBlockEnd =
+            currentHeight > baseHeightPx
+                ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`
+                : '0';
         textAreaRef.current.style.setProperty('--textarea-height', 'auto');
         // Remove scrollbar width to avoid interference with calculation.
         textAreaRef.current.style.setProperty('scrollbar-width', 'none');
@@ -60,8 +67,14 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const borderWidth = textAreaRef.current.offsetHeight - textAreaRef.current.clientHeight;
         // Set height to auto then scrollHeight + borderWidth to resize TextArea to content
         textAreaRef.current.style.setProperty('--textarea-height', `${scrollHeight + borderWidth}px`);
+        textAreaRef.current.style.removeProperty('margin-block-end');
         textAreaRef.current.style.removeProperty('scrollbar-width');
     }, []);
+    useLayoutEffect(() => {
+        if (!textAreaRef.current)
+            return;
+        heightPxRef.current = textAreaRef.current.offsetHeight;
+    }, [textAreaEl]);
     useEffect(() => {
         if (!textAreaRef.current)
             return;
@@ -80,6 +93,12 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         const observer = new ResizeObserver(entries => {
             const currentHeight = entries[0].contentRect.height;
             if (prevHeightRef.current === 0 && currentHeight > 0) {
+                const textareaHeight = getComputedStyle(textAreaEl)
+                    .getPropertyValue('--textarea-height')
+                    .trim();
+                if (!textareaHeight || textareaHeight === 'auto' || textareaHeight === 'unset') {
+                    heightPxRef.current = textAreaEl.offsetHeight;
+                }
                 recalculateHeight();
             }
             prevHeightRef.current = currentHeight;

package/lib/components/TextArea/TextArea.js.map CHANGED Viewed

	@@ -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, 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 {\n useConsolidatedRef,\n useElement,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} 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 warnCharCount = 30;\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 const { announceAssertive } = useLiveLog();\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 (maxLength !== undefined) {\n if (e.target.value.length >= maxLength) {\n announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });\n } else if (maxLength > warnCharCount) {\n const prevCharsRemaining = maxLength - charCount;\n const charsRemaining = maxLength - e.target.value.length;\n\n if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {\n announceAssertive({\n message: t('text_area_characters_remaining', [`${warnCharCount}`]),\n type: 'warning'\n });\n }\n }\n }\n\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]\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"]}
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, useLayoutEffect } 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 {\n useConsolidatedRef,\n useElement,\n useI18n,\n useLiveLog,\n useTestIds,\n useUID\n} from '../../hooks';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nimport StyledTextArea, { textAreaMaxHeight } 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 warnCharCount = 30;\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 heightPxRef = useRef(0);\n const focusTimeoutRef = useRef(NaN);\n const { announceAssertive } = useLiveLog();\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 (maxLength !== undefined) {\n if (e.target.value.length >= maxLength) {\n announceAssertive({ message: t('text_area_character_limit'), type: 'warning' });\n } else if (maxLength > warnCharCount) {\n const prevCharsRemaining = maxLength - charCount;\n const charsRemaining = maxLength - e.target.value.length;\n\n if (charsRemaining < warnCharCount && prevCharsRemaining >= warnCharCount) {\n announceAssertive({\n message: t('text_area_characters_remaining', [`${warnCharCount}`]),\n type: 'warning'\n });\n }\n }\n }\n\n if (!hardStop \|\| maxLength === undefined \|\| e.target.value.length <= maxLength) {\n onChangeProp?.(e);\n setCharCount(e.target.value.length);\n }\n },\n [onChangeProp, charCount, hardStop, maxLength, announceAssertive, t]\n );\n\n const recalculateHeight = useCallback(() => {\n if (!textAreaRef.current) return;\n\n const baseHeightPx = heightPxRef.current;\n const currentHeight = parseFloat(\n getComputedStyle(textAreaRef.current).getPropertyValue('--textarea-height')\n );\n textAreaRef.current.style.marginBlockEnd =\n currentHeight > baseHeightPx\n ? `calc(min(${textAreaMaxHeight}, ${currentHeight}px) - ${baseHeightPx}px)`\n : '0';\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('margin-block-end');\n\n textAreaRef.current.style.removeProperty('scrollbar-width');\n }, []);\n\n useLayoutEffect(() => {\n if (!textAreaRef.current) return;\n heightPxRef.current = textAreaRef.current.offsetHeight;\n }, [textAreaEl]);\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 const textareaHeight = getComputedStyle(textAreaEl)\n .getPropertyValue('--textarea-height')\n .trim();\n if (!textareaHeight \|\| textareaHeight === 'auto' \|\| textareaHeight === 'unset') {\n heightPxRef.current = textAreaEl.offsetHeight;\n }\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/components/TextArea/TextArea.styles.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export declare const textAreaMaxHeight = "90vh";
 declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, {
     resizable: boolean;
     autoResize: boolean;

package/lib/components/TextArea/TextArea.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;SAuB/E,CAAC;AAIF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"TextArea.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,SAAS,CAAC;AAExC,QAAA,MAAM,cAAc;eAAgC,OAAO;gBAAc,OAAO;SAuB/E,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/lib/components/TextArea/TextArea.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
+export const textAreaMaxHeight = '90vh';
 const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
     return css `
       width: 100%;
@@ -18,7 +19,7 @@ const StyledTextArea = styled.textarea(({ resizable, autoResize }) => {
         : css `
             resize: none;
             overflow: auto;
-            max-height: 90vh;
+            max-height: ${textAreaMaxHeight};
           `}
     `;
 });

package/lib/components/TextArea/TextArea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA~~;;;;WAIF~~;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n max-height: ~~90vh~~;\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}
1	+ {"version":3,"file":"TextArea.styles.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAExC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CACpC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE;IAC5B,OAAO,GAAG,CAAA;;oBAEM,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;iBAC7D,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO;;QAE7D,UAAU;QACZ,GAAG,CAAA;;OAEF;QACC,SAAS;QACT,CAAC,CAAC,GAAG,CAAA;;;WAGF;QACH,CAAC,CAAC,GAAG,CAAA;;;0BAGa,iBAAiB;WAChC;KACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,eAAe,cAAc,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\n\nexport const textAreaMaxHeight = '90vh';\n\nconst StyledTextArea = styled.textarea<{ resizable: boolean; autoResize: boolean }>(\n ({ resizable, autoResize }) => {\n return css`\n width: 100%;\n min-height: ${props => props.theme.components['text-area']['min-height']};\n padding: ${props => props.theme.components['text-area'].padding};\n appearance: none;\n ${autoResize &&\n css`\n height: var(--textarea-height, auto);\n `}\n ${resizable\n ? css`\n resize: vertical;\n overflow: hidden;\n `\n : css`\n resize: none;\n overflow: auto;\n max-height: ${textAreaMaxHeight};\n `}\n `;\n }\n);\n\nStyledTextArea.defaultProps = defaultThemeProp;\n\nexport default StyledTextArea;\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-core",
-  "version": "8.21.7",
+  "version": "8.21.8",
   "description": "Cosmos is a visual design system and UI component collection. Its goal is to empower application developers in their pursuit to create engaging and rewarding user experiences.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Pegasystems",