npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.3.2 → 10.0.0-build.4.1 - Mend

@pega/cosmos-react-core 10.0.0-build.3.2 → 10.0.0-build.4.1

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 (82) hide show

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":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,SAAS,EAAE,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC5F,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,UAAU,MAAM,eAAe,CAAC;AAGvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAuC7D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAE9C,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE;IACnC,MAAM,EACJ,UAAU,EAAE,EACV,aAAa,EAAE,EACb,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,cAAc,EAAE,WAAW,EAC3B,cAAc,EAAE,WAAW,EAC5B,EACF,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,iBAAiB,GAAG,WAAW,CAAC;IACpC,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QAC/C,iBAAiB,GAAG,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,GAAG,CAAA;;;;aAIC,IAAI;cACH,IAAI;yBACO,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;cACpC,WAAW,UAAU,iBAAiB;wBAC5B,eAAe;;;eAGxB,SAAS;gBACR,SAAS;;;;;;;GAOtB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClF,MAAM,EACJ,IAAI,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,EAC3C,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,gBAAgB,EAAE,EACpE,YAAY,EAAE,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,EAC9D,EACD,aAAa,EAAE,EACb,IAAI,EACJ,UAAU,EAAE,EACV,kBAAkB,EAAE,sBAAsB,EAC1C,cAAc,EAAE,kBAAkB,EACnC,EACF,EACD,QAAQ,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAC1C,cAAc,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EACjD,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,sBAAsB,CAAC;IACpF,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAElE,MAAM,WAAW,GAAG,KAAK,WAAW,IAAI,sBAAsB,EAAE,CAAC;IACjE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;MACN,YAAY;;;;aAIL,IAAI;cACH,IAAI;;MAEZ,CAAC,QAAQ;QACX,GAAG,CAAA;gBACS,WAAW;sBACL,MAAM;wBACJ,gBAAgB;;KAEnC;;QAEG,WAAW;;QAEX,WAAW;;QAEX,WAAW;;QAEX,WAAW;sBACG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB;0BACrC,eAAe;;;;;;;sBAOnB,WAAW,qBAAqB,WAAW;uBAC1C,WAAW;;;sBAGZ,WAAW;;;;;oBAKb,IAAI;qBACH,IAAI;uBACF,WAAW;qBACb,IAAI,iBAAiB,UAAU;;;yBAG3B,WAAW;gCACJ,gBAAgB,MAAM,WAAW;;;6CAGpB,WAAW;;;;UAI9C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;qCACwB,UAAU;sCACT,UAAU;;;;uCAIT,WAAW;;;;;;;4BAOtB,UAAU;;;GAGnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChC,MAAM,EACJ,IAAI,EACJ,UAAU,EAAE,EACV,aAAa,EAAE,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAC7D,EACD,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC/C,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,OAAO,GAAG,CAAA;UACJ,WAAW;;;;uBAIE,eAAe;;qBAEjB,QAAQ,CAAC,CAAC;iBACd,UAAU;;sBAEL,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;;wBAG3B,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;UAI5C,mBAAmB;;qCAEQ,IAAI,CAAC,OAAO;;;QAGzC,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACzB,GAAG,CAAA;iCACwB,WAAW,UAAU,sBAAsB;0BAClD,gBAAgB;;OAEnC;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAE9C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC1C,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAClC,UAAU,EAAE,EACV,IAAI,EACJ,aAAa,EAAE,EAAE,KAAK,EAAE,EACxB,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,EAC/C,EACF,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,cAAc,GAClB,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAEvF,OAAO,GAAG,CAAA;;;wBAGY,IAAI,CAAC,UAAU;qBAClB,IAAI,CAAC,eAAe,CAAC;8BACZ,cAAc;eAC7B,OAAO;;MAEhB,QAAQ;QACV,GAAG,CAAA;;KAEF;MACC,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;QACzB,GAAG,CAAA;;wBAEiB,gBAAgB;;UAE9B,WAAW,IAAI,sBAAsB;0BACrB,gBAAgB;;;;;sBAKpB,MAAM,CAAC,KAAK;;;KAG7B;YACO,WAAW;;;eAGR,KAAK,CAAC,KAAK;qBACL,KAAK,CAAC,aAAa,CAAC;;;;QAIjC,mBAAmB;;mCAEQ,OAAO;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CAAC,KAAK,EAAE,GAAG;IAC5B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EACJ,MAAM,EACN,IAAI,EACJ,EAAE,GAAG,GAAG,EACR,KAAK,EACL,iBAAiB,EAAE,cAAc,EACjC,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,cAAc,EACd,OAAO,GAAG,QAAQ,EAClB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;IACjC,MAAM,IAAI,GAAG,OAAO,KAAK,MAAM,CAAC;IAChC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,MAAM,EAAE,CAAC;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC,aAAa,CAAC;IACrF,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvC,gGAAgG;IAChG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC;QAE7C,IAAI,OAAO,EAAE,QAAQ,CAAC,WAAW,EAAE,KAAK,OAAO;YAAE,OAAO;QAExD,MAAM,EAAE,GAAG,IAAI,eAAe,EAAE,CAAC;QAEjC,OAAO,CAAC,gBAAgB,CACtB,WAAW,EACX,CAAC,CAAC,EAAE;YACF,IAAI,QAAQ,CAAC,OAAO,KAAK,gBAAgB,EAAE,EAAE,CAAC;gBAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,EACD,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,EAAE,CACtB,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,KAAK,EAAE,CAAC;QACb,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,CAAC;IAEzE,OAAO,CACL,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,EAClD,KAAK,EACH,8BACE,KAAC,sBAAsB,IACrB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,iBAAiB,EACrB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,iBACL,UAAU,GACvB,EACD,KAAK,EACL,QAAQ,IAAI,KAAC,UAAU,IAAC,EAAE,EAAE,cAAc,YAAG,CAAC,CAAC,WAAW,CAAC,GAAc,IACzE,EAEL,OAAO,EAAE,IAAI,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACnD,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,YAAY,QACZ,MAAM,QACN,UAAU,QACV,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,YAE5C,KAAC,qBAAqB,mBACP,OAAO,CAAC,OAAO,KACxB,SAAS,EACb,SAAS,EAAE,eAAe,CAAC,aAAa,EAAE,SAAS,EAAE;gBACnD,OAAO;gBACP,IAAI;aACL,CAAC,EACF,EAAE,EAAE,EAAE,qBACW,cAAc,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,sBACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,cAAc,EAAE,CAAC,CAAC,CAAC,eAAe,EACrF,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAA+B,EAAE,EAAE;gBAC3C,IAAI,QAAQ;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACjC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,CAAC,CAAkC,EAAE,EAAE;gBAChD,IAAI,IAAI,KAAK,UAAU,IAAI,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBACzE,IAAI,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC;oBAAE,CAAC,CAAC,cAAc,EAAE,CAAC;gBAChF,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC,EACD,GAAG,EAAE,QAAQ,GACb,GACQ,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC,UAAU,EAAE,oBAAoB,CAAC,CAAC","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, getReadableStatusColor } 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<\n Pick<RadioCheckProps, 'readOnly' \| 'status'> & { $labelEmpty?: boolean }\n>(({ theme, status, $labelEmpty }) => {\n const {\n components: {\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n } = theme;\n\n let statusBorderColor = borderColor;\n if (status === 'error' \|\| status === 'warning') {\n statusBorderColor = getReadableStatusColor(theme, status);\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: ${$labelEmpty ? '0' : '1ch'};\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\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(({ theme, disabled, readOnly }) => {\n const {\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 } = theme;\n\n const backgroundColor = 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: ${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 ({ theme, disabled, readOnly }) => {\n const {\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 } = theme;\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>(({ theme, disabled, readOnly, status }) => {\n const {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n } = theme;\n\n const useBorderColor =\n status === 'error' ? getReadableStatusColor(theme, 'error') : 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\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 'aria-labelledby': ariaLabelledBy,\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 const labelEmpty = label === null \|\| label === undefined \|\| label === '';\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n $labelEmpty={labelEmpty}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card \|\| ariaLabelledBy ? '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 aria-labelledby={ariaLabelledBy}\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, mix, rgba } 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, getReadableStatusColor } 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 Pick<FormControlProps, 'suggestion'> & {\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<\n Pick<RadioCheckProps, 'readOnly' \| 'status'> & { $labelEmpty?: boolean }\n>(({ theme, status, $labelEmpty }) => {\n const {\n components: {\n 'radio-check': {\n size,\n 'touch-size': touchSize,\n 'background-color': backgroundColor,\n 'border-color': borderColor,\n 'border-width': borderWidth\n }\n }\n } = theme;\n\n let statusBorderColor = borderColor;\n if (status === 'error' \|\| status === 'warning') {\n statusBorderColor = getReadableStatusColor(theme, status);\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: ${$labelEmpty ? '0' : '1ch'};\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\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(({ theme, disabled, readOnly }) => {\n const {\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 } = theme;\n\n const backgroundColor = 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: ${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<\n Pick<RadioCheckProps, 'disabled' \| 'readOnly'> & { hasSuggestion?: boolean }\n>(({ theme, disabled, readOnly, hasSuggestion }) => {\n const {\n base,\n components: {\n 'radio-check': {\n label: { color: labelColor, 'font-weight': labelFontWeight }\n },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor },\n 'border-radius': radius,\n 'background-color': background\n },\n 'form-field': formField\n }\n } = theme;\n\n const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n const suggestionBorderColor = getReadableStatusColor(theme, 'pending');\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 ${hasSuggestion &&\n css`\n > ${StyledRadioCheckInput}:not(:focus) {\n &:checked + ${StyledLabel} {\n &:not(:hover) ${StyledPseudoRadioCheck} {\n background-color: ${suggestionBorderColor};\n border-color: ${suggestionBorderColor};\n\n &::after {\n border-color: ${mix(\n 0.1,\n formField.pending['status-color'],\n base.palette['primary-background']\n )};\n }\n }\n\n &:hover ${StyledPseudoRadioCheck} {\n background-color: ${suggestionBorderColor};\n border-color: ${suggestionBorderColor};\n box-shadow: 0 0 0 0.125rem ${rgba(suggestionBorderColor, 0.2)};\n }\n }\n\n &:not(:checked) + ${StyledLabel} {\n ${StyledPseudoRadioCheck} {\n border-color: ${suggestionBorderColor};\n border-inline-start-width: calc(${base['border-radius']} * ${radius});\n background-color: ${mix(\n 0.1,\n formField.pending['status-color'],\n base.palette['primary-background']\n )};\n }\n\n &:hover ${StyledPseudoRadioCheck} {\n background-color: ${background};\n box-shadow: 0 0 0 0.125rem ${rgba(suggestionBorderColor, 0.2)};\n }\n }\n }\n `}\n `}\n `;\n});\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n Pick<RadioCheckProps, 'disabled' \| 'readOnly' \| 'status'>\n>(({ theme, disabled, readOnly, status }) => {\n const {\n base: { palette, shadow, spacing },\n components: {\n card,\n 'radio-check': { label },\n 'form-control': {\n ':hover': { 'border-color': hoverBorderColor }\n }\n }\n } = theme;\n\n const useBorderColor =\n status === 'error' ? getReadableStatusColor(theme, 'error') : 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\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 'aria-labelledby': ariaLabelledBy,\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 suggestion,\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 const labelEmpty = label === null \|\| label === undefined \|\| label === '';\n\n return (\n <FormField\n testId={testIds}\n as={card ? StyledRadioCheckCard : StyledRadioCheck}\n label={\n <>\n <StyledPseudoRadioCheck\n status={status}\n as={StyledFormControl}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n $labelEmpty={labelEmpty}\n />\n {label}\n {readOnly && <HiddenText id={readonlyDescId}>{t('read_only')}</HiddenText>}\n </>\n }\n labelAs={card \|\| ariaLabelledBy ? '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 suggestion={suggestion}\n hasSuggestion={status === 'pending' && !!suggestion}\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 aria-labelledby={ariaLabelledBy}\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/RadioCheckGroup/RadioCheckGroup.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { FormFieldProps } from '../FormField';
 import type { FormControlProps } from '../FormControl';
 import type { RadioCheckProps } from '../RadioCheck';
 import type { elements } from '../FormField/FormField.test-ids';
-export type RadioCheckGroupProps = WithAttributes<'fieldset', TestIdProp<typeof elements> & {
+export type RadioCheckGroupProps = WithAttributes<'fieldset', TestIdProp<typeof elements> & Pick<FormControlProps, 'suggestion'> & {
     /** Accepts Checkboxes or RadioButtons as children. */
     children?: ReactElement | ReactElement[];
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG;~~IAC5B~~,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,~~CACF~~,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;~~AAqNH~~,wBAAuE"}
1	+ {"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,GAAG,EAEH,YAAY,EACZ,WAAW,EAEZ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAc,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAUrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAMhE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAC/C,UAAU,EACV,UAAU,CAAC,OAAO,QAAQ,CAAC,GACzB,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC,GAAG;IACrC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,mGAAmG;IACnG,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC;IACnD,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB,CACJ,CAAC;AAEF,eAAO,MAAM,qBAAqB,+OA8BhC,CAAC;;;;AAuNH,wBAAuE"}

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

@@ -93,7 +93,7 @@ const StyledCardGrid = styled.div(({ theme, renderInline, autoStack, childCount
 StyledCardGrid.defaultProps = defaultThemeProp;
 const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
     const uid = useUID();
-    const { testId, children, name = uid, disabled = false, required = false, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', arrowNavigation = true, onClear, ...restProps } = props;
+    const { testId, children, name = uid, disabled = false, required = false, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', arrowNavigation = true, onClear, suggestion, ...restProps } = props;
     const testIds = useTestIds(testId, getRadioCheckGroupTestIds);
     const [optionsEl, setOptionsEl] = useElement();
     const [renderInline, setRenderInline] = useState(inline);
@@ -155,7 +155,7 @@ const RadioCheckGroup = forwardRef(function RadioCheckGroup(props, ref) {
             });
         });
     }, [children, name, disabled, readOnly, variant, onChange]);
-    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, isRadioCheck: true, onClear: onClear,
+    return (_jsx(FormField, { testId: testIds, as: StyledRadioCheckGroup, ref: containerRef, name: name, disabled: disabled, required: required, ...restProps, inline: false, suggestion: suggestion, isRadioCheck: true, onClear: onClear,
         // Prevents blur when any input within the group is actively focused.
         onMouseDown: (e) => {
             restProps.onMouseDown?.(e);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children?: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n\n ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(() => {\n if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n });\n });\n }, [children, name, disabled, readOnly, variant, onChange]);\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n );\n })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}
1	+ {"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, Children, cloneElement, useState, useEffect, useRef, useMemo } from 'react';\nimport type {\n Ref,\n PropsWithoutRef,\n ReactElement,\n ChangeEvent,\n MouseEvent as ReactMouseEvent\n} from 'react';\nimport styled, { css, type DefaultTheme } from 'styled-components';\n\nimport type { RefElement, TestIdProp, WithAttributes } from '../../types';\nimport FormField from '../FormField';\nimport type { FormFieldProps } from '../FormField';\nimport { StyledFormField, StyledFormFieldInfo } from '../FormField/FormField';\nimport type { FormControlProps } from '../FormControl';\nimport type { RadioCheckProps } from '../RadioCheck';\nimport Flex from '../Flex';\nimport { defaultThemeProp } from '../../theme';\nimport { useArrows, useConsolidatedRef, useElement, useTestIds, useUID } from '../../hooks';\nimport {\n StyledImageContainer,\n StyledSelectionCard,\n StyledSelectionCardInline\n} from '../SelectionCard/SelectionCard.styles';\nimport { getActiveElement, withTestIds } from '../../utils';\nimport type { elements } from '../FormField/FormField.test-ids';\nimport { StyledRadioCheck } from '../RadioCheck/RadioCheck';\nimport EmptyState, { StyledEmptyState } from '../EmptyState';\n\nimport { getRadioCheckGroupTestIds } from './RadioCheckGroup.test-ids';\n\nexport type RadioCheckGroupProps = WithAttributes<\n 'fieldset',\n TestIdProp<typeof elements> &\n Pick<FormControlProps, 'suggestion'> & {\n /** Accepts Checkboxes or RadioButtons as children. /\n children?: ReactElement \| ReactElement[];\n /\n Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n * Additionally, onChange can be passed to individual children.\n * Both handlers will be called, child followed by group.\n /\n onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n /* Callback invoked when the clear button is clicked. If provided will render the clear button. /\n onClear?: FormFieldProps['onClear'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /\n Layout field elements inline in a row.\n * @default false\n /\n inline?: FormFieldProps['inline'];\n /* Used to toggle the auto stacking feature of an inlined group.\n * @default true\n /\n autoStack?: boolean;\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /\n Controls the styling of the child RadioChecks.\n * @default 'simple'\n /\n variant?: RadioCheckProps['variant'] \| 'card-grid';\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /\n Enables arrow key navigation between options in the group.\n * Disable for checkbox groups where each option is independently selectable.\n * @default true\n /\n arrowNavigation?: boolean;\n /* Ref forwarded to the wrapping element. /\n ref?: Ref<HTMLElement>;\n }\n>;\n\nexport const StyledRadioCheckGroup = styled.fieldset(({ theme }) => {\n return css`\n container-type: inline-size;\n flex-wrap: nowrap;\n\n &[disabled] {\n > ${StyledFormField} {\n opacity: unset;\n }\n }\n\n ${StyledSelectionCard} {\n max-width: 100%;\n }\n\n ${StyledSelectionCardInline} ${StyledImageContainer} {\n / To enlarge the image containers to the size of the biggest one /\n min-height: 100%;\n }\n\n ${StyledRadioCheck} > ${StyledFormFieldInfo} {\n display: none;\n }\n\n ${StyledEmptyState} {\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: ${theme.components.card['border-radius']};\n padding: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledRadioCheckGroup.defaultProps = defaultThemeProp;\n\nconst getCardGridColumns = (cardWidth: string) => css`\n @container (min-width: calc(2 * ${cardWidth})) {\n grid-template-columns: repeat(2, 1fr);\n }\n\n @container (min-width: calc(3 * ${cardWidth})) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n @container (min-width: calc(4 * ${cardWidth})) {\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nconst getCardGridContainerStyles = (theme: DefaultTheme) => {\n const defaultCardWidth = theme.base['content-width'].sm;\n const inlineImageCardWidth = theme.base['content-width'].md;\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n\n ${getCardGridColumns(defaultCardWidth)}\n\n &:has(${StyledSelectionCardInline}) {\n ${getCardGridColumns(inlineImageCardWidth)}\n }\n `;\n};\n\nconst StyledCardGrid = styled.div<{\n renderInline: boolean;\n autoStack: boolean;\n childCount: number;\n}>(({ theme, renderInline, autoStack, childCount }) => {\n if (!renderInline) {\n return css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: minmax(min-content, max-content);\n grid-auto-rows: 1fr;\n `;\n }\n\n return autoStack\n ? getCardGridContainerStyles(theme)\n : css`\n display: grid;\n gap: ${theme.base.spacing};\n grid-template-columns: repeat(${childCount}, 1fr);\n grid-auto-rows: 1fr;\n `;\n});\n\nStyledCardGrid.defaultProps = defaultThemeProp;\n\nconst RadioCheckGroup = forwardRef<\n RefElement<RadioCheckGroupProps>,\n PropsWithoutRef<RadioCheckGroupProps>\n>(function RadioCheckGroup(props, ref) {\n const uid = useUID();\n const {\n testId,\n children,\n name = uid,\n disabled = false,\n required = false,\n onChange,\n readOnly,\n inline = false,\n autoStack = true,\n variant = 'simple',\n arrowNavigation = true,\n onClear,\n suggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getRadioCheckGroupTestIds);\n const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n\n const [renderInline, setRenderInline] = useState(inline);\n const renderInlineRef = useRef(inline);\n const minInlineWidth = useRef(0);\n const containerRef = useConsolidatedRef(ref);\n const skipRef = useRef<HTMLElement>(null);\n\n useArrows(\n arrowNavigation ? containerRef : skipRef,\n {\n selector: '[data-main-focus]',\n cycle: false,\n dir: 'both'\n },\n [children]\n );\n\n useEffect(() => {\n setRenderInline(inline);\n if (inline && optionsEl && optionsEl.lastChild && autoStack) {\n const intersectionObserver = new IntersectionObserver(\n entries => {\n if (entries[0].intersectionRatio < 1) {\n if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n renderInlineRef.current = false;\n setRenderInline(false);\n }\n },\n { root: optionsEl, threshold: 1 }\n );\n\n const resizeObserver = new ResizeObserver(entries => {\n if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n renderInlineRef.current = true;\n setRenderInline(true);\n }\n });\n\n intersectionObserver.observe(optionsEl.lastChild as Element);\n resizeObserver.observe(optionsEl);\n\n return () => {\n intersectionObserver.disconnect();\n resizeObserver.disconnect();\n };\n }\n }, [optionsEl, inline, autoStack]);\n\n const mapChildren = useMemo(() => {\n if (!children \|\| Children.toArray(children).filter(Boolean).length === 0) return;\n\n return Children.map(children, child => {\n if (!child) return null;\n return cloneElement(child, {\n name,\n status: restProps.status,\n disabled: disabled \|\| child.props.disabled,\n readOnly: readOnly \|\| child.props.readOnly,\n variant: variant === 'card-grid' ? 'card' : variant,\n suppressAnnouncements: true,\n onChange: onChange\n ? (e: ChangeEvent<HTMLInputElement>) => {\n if (!(readOnly \|\| child.props.readOnly)) {\n child.props.onChange?.(e);\n onChange(e);\n }\n }\n : child.props.onChange\n });\n });\n }, [children, name, disabled, readOnly, variant, onChange]);\n\n return (\n <FormField\n testId={testIds}\n as={StyledRadioCheckGroup}\n ref={containerRef}\n name={name}\n disabled={disabled}\n required={required}\n {...restProps}\n inline={false}\n suggestion={suggestion}\n isRadioCheck\n onClear={onClear}\n // Prevents blur when any input within the group is actively focused.\n onMouseDown={(e: ReactMouseEvent<HTMLFieldSetElement>) => {\n restProps.onMouseDown?.(e);\n\n if (!containerRef.current) return;\n\n if (!containerRef.current.contains(getActiveElement())) return;\n\n if (!(e.target instanceof Element) \|\| !e.target.closest('label')) return;\n\n e.preventDefault();\n }}\n >\n {(() => {\n if (!mapChildren) {\n return <EmptyState variant='bordered' />;\n }\n\n return variant === 'card-grid' ? (\n <StyledCardGrid\n ref={setOptionsEl}\n renderInline={renderInline}\n autoStack={autoStack}\n childCount={Children.count(children)}\n >\n {mapChildren}\n </StyledCardGrid>\n ) : (\n <Flex\n ref={setOptionsEl}\n container={{\n direction: renderInline ? 'row' : 'column',\n colGap: renderInline ? 1.5 : 2,\n rowGap: variant === 'card' ? 1 : 0,\n wrap: 'wrap'\n }}\n >\n {mapChildren}\n </Flex>\n );\n })()}\n </FormField>\n );\n});\n\nexport default withTestIds(RadioCheckGroup, getRadioCheckGroupTestIds);\n"]}

package/lib/components/Select/Select.d.ts CHANGED Viewed

@@ -1,13 +1,11 @@
 import type { Ref, ReactNode, ChangeEventHandler } from 'react';
 import type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';
 import type { FormControlProps } from '../FormControl';
-export interface SelectProps extends BaseProps, TestIdProp {
+export interface SelectProps extends BaseProps, TestIdProp, Pick<FormControlProps, 'suggestion'> {
     /** Pass Options components as children to render the options of the Select list. */
     children: ReactNode;
     /** Called when an Option is chosen within the list. */
     onChange?: ChangeEventHandler<HTMLSelectElement>;
-    /** Callback fired when AI suggestion is accepted/rejected */
-    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.
@@ -44,6 +42,7 @@ export interface SelectProps extends BaseProps, TestIdProp {
 export declare const StyledSelect: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, {
     hasStatus: boolean;
     readOnly: boolean;
+    hasSuggestion?: boolean;
 }>> & string;
 declare const _default: ForwardRefForwardPropsComponent<SelectProps> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,GAAG,EACH,SAAS,EACT,kBAAkB,EAGnB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGlG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,UAAU;~~IACxD~~,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD~~,6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D~~;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;eACZ,OAAO;cACR,OAAO;~~YAgEjB~~,CAAC;;;;AA4FH,wBAAqD"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,GAAG,EACH,SAAS,EACT,kBAAkB,EAGnB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,+BAA+B,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGlG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE,YAAY,CAAC;IAC9F,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;eACZ,OAAO;cACR,OAAO;oBACD,OAAO;YAyEvB,CAAC;;;;AA4FH,wBAAqD"}

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { mix } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import FormField from '../FormField';
-import { StyledFormControl } from '../FormControl';
+import FormControl from '../FormControl';
 import { useDirection, useI18n, useTestIds, useUID } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { withTestIds } from '../../utils';
@@ -12,8 +12,8 @@ import { getSelectTestIds } from './Select.test-ids';
 const getSelectArrowSvg = (color) =>
 // cspell:disable-next-line
 `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E")`;
-export const StyledSelect = styled.select(({ theme, readOnly, hasStatus }) => {
-    const { base, components: { 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor }, select, icon } } = theme;
+export const StyledSelect = styled.select(({ theme, readOnly, hasStatus, hasSuggestion }) => {
+    const { base, components: { 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor, 'border-radius': radius }, select, icon } } = theme;
     const { rtl } = useDirection();
     return css `
     appearance: none;
@@ -32,6 +32,11 @@ export const StyledSelect = styled.select(({ theme, readOnly, hasStatus }) => {
     border-width: ${select['border-width']};
     border-radius: calc(${base['border-radius']} * ${select['border-radius']});
+    ${hasSuggestion &&
+        css `
+      border-inline-start-width: calc(${base['border-radius']} * ${radius});
+    `}
     @media (forced-colors: active) {
       background-image: ${getSelectArrowSvg('CanvasText')};
     }
@@ -72,9 +77,9 @@ StyledSelect.defaultProps = defaultThemeProp;
 const Select = forwardRef(function Select(props, ref) {
     const uid = useUID();
     const t = useI18n();
-    const { testId, additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, onResolveSuggestion, ...restProps } = props;
+    const { testId, additionalInfo, children, id = uid, label, labelHidden, info, status, required = false, disabled = false, readOnly = false, actions, suggestion, ...restProps } = props;
     const testIds = useTestIds(testId, getSelectTestIds);
-    const Comp = (_jsx(StyledFormControl, { "data-testid": testIds.control, autoComplete: '_off', ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!onResolveSuggestion, id: id, hasStatus: !!status, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
+    const Comp = (_jsx(FormControl, { "data-testid": testIds.control, autoComplete: '_off', ...restProps, as: StyledSelect, hasSuggestion: status === 'pending' && !!suggestion, id: id, hasStatus: !!status, status: status, required: required, disabled: disabled, label: label, readOnly: readOnly, ref: ref, onMouseDown: readOnly
             ? (e) => {
                 e.preventDefault();
             }
@@ -85,7 +90,7 @@ const Select = forwardRef(function Select(props, ref) {
                     e.preventDefault();
             }
             : undefined, children: children }));
-    return label ? (_jsx(FormField, { testId: testIds, label: _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] }), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, actions: actions, onResolveSuggestion: onResolveSuggestion, additionalInfo: additionalInfo, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { testId: testIds, label: _jsxs(_Fragment, { children: [label, readOnly && _jsx(VisuallyHiddenText, { children: ` ${t('read_only')}` })] }), labelHidden: labelHidden, id: id, info: info, status: status, required: required, disabled: disabled, readOnly: readOnly, actions: actions, suggestion: suggestion, additionalInfo: additionalInfo, children: Comp })) : (Comp);
 });
 export default withTestIds(Select, getSelectTestIds);
 //# sourceMappingURL=Select.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n ReactNode,\n ChangeEventHandler,\n MouseEvent,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nconst getSelectArrowSvg = (color: string) =>\n // cspell:disable-next-line\n `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E\")`;\n\nexport interface SelectProps extends BaseProps, TestIdProp {\n /** Pass Options components as children to render the options of the Select list. /\n children: ReactNode;\n /* Called when an Option is chosen within the list. /\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: FormControlProps['value'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass an array of Action objects to append button(s) inline with the Select. /\n actions?: Action[];\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* A ref to the select element. /\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{\n hasStatus: boolean;\n readOnly: boolean;\n}>(({ theme, readOnly, hasStatus }) => {\n const {\n base,\n components: {\n 'form-control': { 'foreground-color': fg, 'background-color': backgroundColor },\n select,\n icon\n }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 ${base.spacing});\n background-image: ${getSelectArrowSvg(fg)};\n background-repeat: no-repeat;\n background-size: ${icon.size.s} ${icon.size.s};\n background-position: ${rtl ? '0.375rem' : 'calc(100% - 0.375rem)'} 50%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n @media (forced-colors: active) {\n background-image: ${getSelectArrowSvg('CanvasText')};\n }\n\n ${readOnly &&\n css`\n background-image: none;\n `}\n\n ${!hasStatus &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &:has(option[value='']:checked, option:not([value]):checked) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n\n & option {\n color: ${fg};\n\n &[value=''],\n &:not([value]) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n props: PropsWithoutRef<SelectProps>,\n ref: SelectProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n additionalInfo,\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n onResolveSuggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSelectTestIds);\n\n const Comp = (\n <StyledFormControl\n data-testid={testIds.control}\n autoComplete='_off'\n {...restProps}\n as={StyledSelect}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n id={id}\n hasStatus={!!status}\n status={status}\n required={required}\n disabled={disabled}\n label={label}\n readOnly={readOnly}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </StyledFormControl>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n actions={actions}\n onResolveSuggestion={onResolveSuggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}
1	+ {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type {\n PropsWithoutRef,\n Ref,\n ReactNode,\n ChangeEventHandler,\n MouseEvent,\n KeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { mix } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport type { Action, BaseProps, ForwardRefForwardPropsComponent, TestIdProp } from '../../types';\nimport FormField from '../FormField';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { useDirection, useI18n, useTestIds, useUID } from '../../hooks';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { withTestIds } from '../../utils';\n\nimport { getSelectTestIds } from './Select.test-ids';\n\nconst getSelectArrowSvg = (color: string) =>\n // cspell:disable-next-line\n `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${encodeURIComponent(color)}'%3E%3Cpath d='M21 8v2.75l-8.5 6.5-8.5-6.5V8l8.5 6.5z'/%3E%3C/svg%3E\")`;\n\nexport interface SelectProps extends BaseProps, TestIdProp, Pick<FormControlProps, 'suggestion'> {\n /** Pass Options components as children to render the options of the Select list. /\n children: ReactNode;\n /* Called when an Option is chosen within the list. /\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /\n Creates a controlled input and sets the value. Requires an onChange handler to update value.\n * value + onChange is the recommended method per React team.\n /\n value?: FormControlProps['value'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass an array of Action objects to append button(s) inline with the Select. /\n actions?: Action[];\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* A ref to the select element. /\n ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{\n hasStatus: boolean;\n readOnly: boolean;\n hasSuggestion?: boolean;\n}>(({ theme, readOnly, hasStatus, hasSuggestion }) => {\n const {\n base,\n components: {\n 'form-control': {\n 'foreground-color': fg,\n 'background-color': backgroundColor,\n 'border-radius': radius\n },\n select,\n icon\n }\n } = theme;\n const { rtl } = useDirection();\n\n return css`\n appearance: none;\n -webkit-appearance: none;\n overflow-x: hidden;\n text-overflow: ellipsis;\n width: 100%;\n height: ${select.height};\n min-height: ${base['hit-area']['mouse-min']};\n padding-inline-start: ${select.padding};\n padding-inline-end: calc(4 ${base.spacing});\n background-image: ${getSelectArrowSvg(fg)};\n background-repeat: no-repeat;\n background-size: ${icon.size.s} ${icon.size.s};\n background-position: ${rtl ? '0.375rem' : 'calc(100% - 0.375rem)'} 50%;\n border-width: ${select['border-width']};\n border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n ${hasSuggestion &&\n css`\n border-inline-start-width: calc(${base['border-radius']} * ${radius});\n `}\n\n @media (forced-colors: active) {\n background-image: ${getSelectArrowSvg('CanvasText')};\n }\n\n ${readOnly &&\n css`\n background-image: none;\n `}\n\n ${!hasStatus &&\n css`\n border-color: ${select['border-color']};\n `}\n\n &:has(option[value='']:checked, option:not([value]):checked) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n\n & option {\n color: ${fg};\n\n &[value=''],\n &:not([value]) {\n color: ${mix(base.transparency['transparent-3'], fg, backgroundColor)};\n }\n }\n\n &::-ms-expand {\n display: none;\n }\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: ForwardRefForwardPropsComponent<SelectProps> = forwardRef(function Select(\n props: PropsWithoutRef<SelectProps>,\n ref: SelectProps['ref']\n) {\n const uid = useUID();\n const t = useI18n();\n\n const {\n testId,\n additionalInfo,\n children,\n id = uid,\n label,\n labelHidden,\n info,\n status,\n required = false,\n disabled = false,\n readOnly = false,\n actions,\n suggestion,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getSelectTestIds);\n\n const Comp = (\n <FormControl\n data-testid={testIds.control}\n autoComplete='_off'\n {...restProps}\n as={StyledSelect}\n hasSuggestion={status === 'pending' && !!suggestion}\n id={id}\n hasStatus={!!status}\n status={status}\n required={required}\n disabled={disabled}\n label={label}\n readOnly={readOnly}\n ref={ref}\n onMouseDown={\n readOnly\n ? (e: MouseEvent<HTMLSelectElement>) => {\n e.preventDefault();\n }\n : undefined\n }\n onKeyDown={\n readOnly\n ? (e: KeyboardEvent) => {\n // TODO: Consideration is needed for key modifiers, e.g. \"ctrl p\"\n if (!['Escape', 'Tab', 'Space'].includes(e.key)) e.preventDefault();\n }\n : undefined\n }\n >\n {children}\n </FormControl>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{` ${t('read_only')}`}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={info}\n status={status}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n actions={actions}\n suggestion={suggestion}\n additionalInfo={additionalInfo}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(Select, getSelectTestIds);\n"]}

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

@@ -11,7 +11,7 @@ import { getTextAreaTestIds } from './TextArea.test-ids';
 const warnCharCount = 30;
 const TextArea = forwardRef(function TextArea(props, ref) {
     const uid = useUID();
-    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;
+    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, suggestion, ...restProps } = props;
     const t = useI18n();
     const testIds = useTestIds(testId, getTextAreaTestIds);
     const [charCount, setCharCount] = useState(value?.length ?? defaultValue?.length ?? 0);
@@ -113,7 +113,7 @@ const TextArea = forwardRef(function TextArea(props, ref) {
         // Remove when focused to prevent each change in character count from being announced.
         !focused && displayCharCount && typeof maxLength === 'number'
             ? `${id}-charCount`
-            : 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) => {
+            : undefined, required: required, disabled: disabled, status: status, readOnly: readOnly, autoResize: autoResize, resizable: autoResize ? false : resizable, maxLength: hardStop ? maxLength : undefined, hasSuggestion: status === 'pending' && !!suggestion, ...controlProp, ...restProps, onChange: onChange, onFocus: (e) => {
             // Need to delay so screen readers will include the character count in announcement on initial focus.
             // Shorter delays did not seem to work.
             focusTimeoutRef.current = window.setTimeout(() => {
@@ -125,7 +125,7 @@ const TextArea = forwardRef(function TextArea(props, ref) {
             setFocused(false);
             restProps.onBlur?.(e);
         }, as: StyledTextArea }));
-    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);
+    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, suggestion: suggestion, children: TextAreaControl })) : (TextAreaControl);
 });
 export default withTestIds(TextArea, getTextAreaTestIds);
 //# sourceMappingURL=TextArea.js.map

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, 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"]}
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 suggestion,\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' && !!suggestion}\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 suggestion={suggestion}\n >\n {TextAreaControl}\n </FormField>\n ) : (\n TextAreaControl\n );\n});\n\nexport default withTestIds(TextArea, getTextAreaTestIds);\n"]}

package/lib/hooks/useI18n.d.ts CHANGED Viewed

@@ -528,7 +528,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     full_width: string;
     accept_suggestion_button_a11y: string;
     reject_suggestion_button_a11y: string;
-    suggestion_info: string;
+    suggestion_previous_value: string;
+    suggestion_suggested_value: string;
+    suggestion_clear: string;
     suggestion_assist: string;
     country_code: string;
     phone_number: string;
@@ -1428,6 +1430,16 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
     condition_builder_comparator_on_or_before: string;
     condition_builder_logical_and: string;
     condition_builder_logical_or: string;
+    condition_builder_unexpected_words_or_characters: string;
+    condition_builder_unexpected_token_at_the_beginning: string;
+    condition_builder_unexpected_token_at_the_end: string;
+    condition_builder_unexpected_token_after_previous_token: string;
+    condition_builder_mismatched_parentheses: string;
+    condition_builder_undefined_condition_in_logical_string: string;
+    condition_builder_undefined_conditions_in_logical_string: string;
+    condition_builder_unused_condition_in_logical_string: string;
+    condition_builder_unused_conditions_in_logical_string: string;
+    condition_builder_please_provide_a_logic_expression: string;
     dev_mode: string;
     expand_navigation: string;
     collapse_navigation: string;

package/lib/hooks/useI18n.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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"}
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"}

package/lib/i18n/default.d.ts CHANGED Viewed

@@ -524,7 +524,9 @@ declare const _default: {
     full_width: string;
     accept_suggestion_button_a11y: string;
     reject_suggestion_button_a11y: string;
-    suggestion_info: string;
+    suggestion_previous_value: string;
+    suggestion_suggested_value: string;
+    suggestion_clear: string;
     suggestion_assist: string;
     country_code: string;
     phone_number: string;
@@ -1424,6 +1426,16 @@ declare const _default: {
     condition_builder_comparator_on_or_before: string;
     condition_builder_logical_and: string;
     condition_builder_logical_or: string;
+    condition_builder_unexpected_words_or_characters: string;
+    condition_builder_unexpected_token_at_the_beginning: string;
+    condition_builder_unexpected_token_at_the_end: string;
+    condition_builder_unexpected_token_after_previous_token: string;
+    condition_builder_mismatched_parentheses: string;
+    condition_builder_undefined_condition_in_logical_string: string;
+    condition_builder_undefined_conditions_in_logical_string: string;
+    condition_builder_unused_condition_in_logical_string: string;
+    condition_builder_unused_conditions_in_logical_string: string;
+    condition_builder_please_provide_a_logic_expression: string;
     dev_mode: string;
     expand_navigation: string;
     collapse_navigation: string;

package/lib/i18n/default.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuvDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyPxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;;;IAWpC,oCAAoC;;;;;;IAOpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAhtE3C~~,~~wBAgwEE~~"}
1	+ {"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuwDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyPxB,6CAA6C;;;;;;;;;;;;;;IAgB7C,6CAA6C;;;;;;;;IAS7C,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwGzC,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,wCAAwC;;IAGxC,oCAAoC;;;;;;;;;;IAWpC,oCAAoC;;;;;;IAOpC,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;IAQ7C,uCAAuC;;;;;;;;IAUvC,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAhuE3C,wBAgxEE"}