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/Number/NumberInput.types.d.ts CHANGED Viewed

@@ -54,7 +54,7 @@ export type NumberProps = NoChildrenProp & TestIdProp & {
      */
     variant?: 'default' | 'stepper';
 };
-export type NumberInputProps = WithAttributes<'input', NumberProps & {
+export type NumberInputProps = WithAttributes<'input', NumberProps & Pick<FormControlProps, 'suggestion'> & {
     /**
      * CurrencyInput input value.
      * Requires an onChange handler to update value.
@@ -66,8 +66,6 @@ export type NumberInputProps = WithAttributes<'input', NumberProps & {
     onFocus?: (value: string) => void;
     /** Callback fired when the component loses focus. */
     onBlur?: (value: string) => void;
-    /** Callback fired when AI suggestion is accepted/rejected */
-    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
     type?: never;
     defaultValue?: never;
 }>;

package/lib/components/Number/NumberInput.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE1F,MAAM,MAAM,WAAW,GAAG,cAAc,GACtC,UAAU,GAAG;IACX,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,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,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAC3C,OAAO,EACP,WAAW,GAAG;~~IACZ~~;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,~~6DAA6D;IAC7D,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC9D,~~IAAI,CAAC,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,~~CACF~~,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAChD,UAAU,EACV,WAAW,GACT,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,GAAG;IACzC,yCAAyC;IACzC,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,kDAAkD;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1D,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACzD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACjD,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1D,8FAA8F;IAC9F,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACtC,+FAA+F;IAC/F,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACpC,2FAA2F;IAC3F,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wHAAwH;IACxH,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACxD,yHAAyH;IACzH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACtD,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B,CACJ,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
1	+ {"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Number/NumberInput.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"~~AAwHA~~,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import type { Ref } from 'react';\n\nimport type { FormControlProps, HandleValue } from '../FormControl';\nimport type { Attributes, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\n\nexport type NumberProps = NoChildrenProp &\n TestIdProp & {\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 /\n Visually hides the label region.\n * @default false\n /\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 /* Makes the component non-editable and non-clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Button when clicked will show additional information /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* Defines unit of the number, like 'kg', 'miles' or '%'. /\n unit?: string;\n /* Determines whether decimal places should be shown. The value is rounded if true.\n * @default true\n /\n showDecimal?: boolean;\n /* Determines the maximum number of decimal places. The value is rounded to the number of places.\n * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n /\n numberOfDecimals?: number;\n /* Determines whether group separators should be shown.\n * @default true\n /\n showGroupSeparators?: boolean;\n /* The minimum value to accept for this input.\n * This value must be less than or equal to the value of the max attribute.\n * @default Number.MIN_SAFE_INTEGER\n /\n min?: number;\n /\n The maximum value to accept for this input.\n * This value must be greater than or equal to the value of the min attribute.\n * @default Number.MAX_SAFE_INTEGER\n /\n max?: number;\n /* A stepping interval to use when using up and down arrows to adjust the value.\n * @default 1\n /\n step?: number;\n /\n Component variation. Might be rendered as regular input or stepper.\n * @default 'default'\n /\n variant?: 'default' \| 'stepper';\n };\n\nexport type NumberInputProps = WithAttributes<\n 'input',\n NumberProps & {\n /\n CurrencyInput input value.\n * Requires an onChange handler to update value.\n /\n value?: string;\n /* Callback fired when input value changes. /\n onChange: (value: string) => void;\n /* Callback fired when the component gets focus. /\n onFocus?: (value: string) => void;\n /* Callback fired when the component loses focus. /\n onBlur?: (value: string) => void;\n ~~/* Callback fired when AI suggestion is accepted/rejected /\n onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n~~ type?: never;\n defaultValue?: never;\n }\n>;\n\nexport type NumberRangeInputProps = WithAttributes<\n 'fieldset',\n NumberProps &\n Pick<Attributes<'input'>, 'placeholder'> & {\n /* Range as a tuple of start and end. /\n value?: { start?: string; end?: string };\n /* Callback for any modifications to the range /\n onChange: (value: { start: string; end: string }) => void;\n /* Callback fired when the component loses focus. /\n onBlur?: (value: { start: string; end: string }) => void;\n /\n The keydown handler for first part of NumberRangeInput.\n * Fired before running default component onKeyDown handler.\n /\n onFromInputKeyDown?: NumberInputProps['onKeyDown'];\n /\n The keydown handler for second part of NumberRangeInput.\n * Fired before running default component onKeyDown handler.\n /\n onToInputKeyDown?: NumberInputProps['onKeyDown'];\n /* Callback fired when the component gets focus. /\n onFocus?: (value: { start: string; end: string }) => void;\n /* Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. /\n fromLabel?: FormControlProps['label'];\n /* Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. /\n toLabel?: FormControlProps['label'];\n /* Placeholder for the first (from) input. Overrides `placeholder` for the first input. /\n fromPlaceholder?: string;\n /* Placeholder for the second (to) input. Overrides `placeholder` for the second input. /\n toPlaceholder?: string;\n /* Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. /\n fromAdditionalInfo?: FormControlProps['additionalInfo'];\n /* Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. /\n toAdditionalInfo?: FormControlProps['additionalInfo'];\n /* Imperative handle /\n handle?: Ref<HandleValue>;\n }\n>;\n\n/* Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}
1	+ {"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAuHA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import type { Ref } from 'react';\n\nimport type { FormControlProps, HandleValue } from '../FormControl';\nimport type { Attributes, NoChildrenProp, TestIdProp, WithAttributes } from '../../types';\n\nexport type NumberProps = NoChildrenProp &\n TestIdProp & {\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 /\n Visually hides the label region.\n * @default false\n /\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 /* Makes the component non-editable and non-clickable. The browser defaults to false. /\n readOnly?: FormControlProps['readOnly'];\n /* Button when clicked will show additional information /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* Defines unit of the number, like 'kg', 'miles' or '%'. /\n unit?: string;\n /* Determines whether decimal places should be shown. The value is rounded if true.\n * @default true\n /\n showDecimal?: boolean;\n /* Determines the maximum number of decimal places. The value is rounded to the number of places.\n * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n /\n numberOfDecimals?: number;\n /* Determines whether group separators should be shown.\n * @default true\n /\n showGroupSeparators?: boolean;\n /* The minimum value to accept for this input.\n * This value must be less than or equal to the value of the max attribute.\n * @default Number.MIN_SAFE_INTEGER\n /\n min?: number;\n /\n The maximum value to accept for this input.\n * This value must be greater than or equal to the value of the min attribute.\n * @default Number.MAX_SAFE_INTEGER\n /\n max?: number;\n /* A stepping interval to use when using up and down arrows to adjust the value.\n * @default 1\n /\n step?: number;\n /\n Component variation. Might be rendered as regular input or stepper.\n * @default 'default'\n /\n variant?: 'default' \| 'stepper';\n };\n\nexport type NumberInputProps = WithAttributes<\n 'input',\n NumberProps &\n Pick<FormControlProps, 'suggestion'> & {\n /\n CurrencyInput input value.\n * Requires an onChange handler to update value.\n /\n value?: string;\n /* Callback fired when input value changes. /\n onChange: (value: string) => void;\n /* Callback fired when the component gets focus. /\n onFocus?: (value: string) => void;\n /* Callback fired when the component loses focus. /\n onBlur?: (value: string) => void;\n type?: never;\n defaultValue?: never;\n }\n>;\n\nexport type NumberRangeInputProps = WithAttributes<\n 'fieldset',\n NumberProps &\n Pick<Attributes<'input'>, 'placeholder'> & {\n /* Range as a tuple of start and end. /\n value?: { start?: string; end?: string };\n /* Callback for any modifications to the range /\n onChange: (value: { start: string; end: string }) => void;\n /* Callback fired when the component loses focus. /\n onBlur?: (value: { start: string; end: string }) => void;\n /\n The keydown handler for first part of NumberRangeInput.\n * Fired before running default component onKeyDown handler.\n /\n onFromInputKeyDown?: NumberInputProps['onKeyDown'];\n /\n The keydown handler for second part of NumberRangeInput.\n * Fired before running default component onKeyDown handler.\n /\n onToInputKeyDown?: NumberInputProps['onKeyDown'];\n /* Callback fired when the component gets focus. /\n onFocus?: (value: { start: string; end: string }) => void;\n /* Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. /\n fromLabel?: FormControlProps['label'];\n /* Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. /\n toLabel?: FormControlProps['label'];\n /* Placeholder for the first (from) input. Overrides `placeholder` for the first input. /\n fromPlaceholder?: string;\n /* Placeholder for the second (to) input. Overrides `placeholder` for the second input. /\n toPlaceholder?: string;\n /* Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. /\n fromAdditionalInfo?: FormControlProps['additionalInfo'];\n /* Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. /\n toAdditionalInfo?: FormControlProps['additionalInfo'];\n /* Imperative handle /\n handle?: Ref<HandleValue>;\n }\n>;\n\n/* Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Phone/PhoneInput.js CHANGED Viewed

@@ -41,7 +41,7 @@ const StyledPhoneInput = styled.div(() => {
 });
 StyledPhoneInput.defaultProps = defaultThemeProp;
 const PhoneInput = forwardRef(function PhoneInput(props, ref) {
-    const { testId, value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, additionalInfo, className, autoComplete = '_off', ...restProps } = props;
+    const { testId, value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, suggestion, additionalInfo, className, autoComplete = '_off', ...restProps } = props;
     const testIds = useTestIds(testId, getPhoneInputTestIds);
     const [selectEl, setSelectEl] = useElement();
     const [inputEl, setInputEl] = useElement();
@@ -77,10 +77,10 @@ const PhoneInput = forwardRef(function PhoneInput(props, ref) {
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
     const Comp = (_jsx(StyledPhoneInput, { "data-testid": testIds.root, as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: _jsxs(_Fragment, { children: [showCountryCode && !readOnly && (_jsxs(_Fragment, { children: [_jsx(Select, { "data-testid": testIds.countryCode, value: countryCode, "aria-label": t('select_country_code'), onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autoComplete: autoComplete && autoComplete.endsWith('tel')
                                 ? autoComplete.replace('tel', 'tel-country-code')
-                                : autoComplete, ref: setSelectEl, hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions }), selectEl && (_jsx(Tooltip, { target: selectEl, describeTarget: false, showDelay: 'none', hideDelay: 'none', children: t('country_code') }))] })), _jsx(Input, { "data-testid": testIds.control, autoComplete: autoComplete && autoComplete.endsWith('tel')
+                                : autoComplete, ref: setSelectEl, hasSuggestion: status === 'pending' && !!suggestion, children: codesOptions }), selectEl && (_jsx(Tooltip, { target: selectEl, describeTarget: false, showDelay: 'none', hideDelay: 'none', children: t('country_code') }))] })), _jsx(Input, { "data-testid": testIds.control, autoComplete: autoComplete && autoComplete.endsWith('tel')
                         ? autoComplete.replace('tel', 'tel-national')
-                        : autoComplete, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, onResolveSuggestion: onResolveSuggestion, className: createClassName('phone-input', className) }), showCountryCode && inputEl && (_jsx(Tooltip, { target: inputEl, describeTarget: false, showDelay: 'none', hideDelay: 'none', children: t('phone_number') }))] }) }));
-    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, onResolveSuggestion: onResolveSuggestion, children: Comp })) : (Comp);
+                        : autoComplete, ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, "aria-label": t('enter_a_number'), onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, suggestion: suggestion, className: createClassName('phone-input', className) }), showCountryCode && inputEl && (_jsx(Tooltip, { target: inputEl, describeTarget: false, showDelay: 'none', hideDelay: 'none', children: t('phone_number') }))] }) }));
+    return label ? (_jsx(FormField, { testId: testIds, as: 'fieldset', additionalInfo: additionalInfo, label: label, labelHidden: labelHidden, id: id, info: info, readOnly: readOnly, status: status, required: required, disabled: disabled, suggestion: suggestion, children: Comp })) : (Comp);
 });
 export default withTestIds(PhoneInput, getPhoneInputTestIds);
 //# sourceMappingURL=PhoneInput.js.map

package/lib/components/Phone/PhoneInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\n\nimport callingCodes from './callingCodes';\nimport {\n convertToCallbackParameter,\n formatPhone,\n formatPhoneNumber,\n getPhoneNumberParts\n} from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\ntype AutoFillTel =\n \| AutoFillBase\n \| `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${OptionalPrefixToken<AutoFillContactKind>}tel`;\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /*\n Display select with countries calling codes\n * @default false\n /\n showCountryCode?: boolean;\n /* Changes lists of countries calling codes /\n callingCodesList?: string[];\n /* Callback fired on input value change /\n onChange?: (value: string) => void;\n /* Callback fired when the component loses focus /\n onBlur?: (value: string) => void;\n /* CCallback fired when the component gets focus /\n onFocus?: (value: string) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLInputElement>;\n /* Flag defining autocompletion behavior. */\n autoComplete?: AutoFillTel;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n ${StyledSelect},\n ${StyledInput} {\n &:focus {\n z-index: 1;\n }\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: ForwardRefForwardPropsComponent<PhoneInputProps> = forwardRef(function PhoneInput(\n props: PropsWithoutRef<PhoneInputProps>,\n ref: PhoneInputProps['ref']\n) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n onResolveSuggestion,\n additionalInfo,\n className,\n autoComplete = '_off',\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n const [selectEl, setSelectEl] = useElement<HTMLSelectElement>();\n const [inputEl, setInputEl] = useElement<HTMLInputElement>();\n\n const t = useI18n();\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref, setInputEl);\n const containerRef = useRef<HTMLDivElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n (number: string) => {\n if (value && readOnly && showCountryCode) {\n const temp = formatPhone(value, { nationalFormat: !readOnly });\n if (temp) return temp;\n }\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode, showCountryCode);\n },\n [readOnly, countryCode, showCountryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <>\n {showCountryCode && !readOnly && (\n <>\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-country-code') as AutoFillTel)\n : autoComplete\n }\n ref={setSelectEl}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n >\n {codesOptions}\n </Select>\n {selectEl && (\n <Tooltip target={selectEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('country_code')}\n </Tooltip>\n )}\n </>\n )}\n <Input\n data-testid={testIds.control}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-national') as AutoFillTel)\n : autoComplete\n }\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n className={createClassName('phone-input', className)}\n />\n {showCountryCode && inputEl && (\n <Tooltip target={inputEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('phone_number')}\n </Tooltip>\n )}\n </>\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n onResolveSuggestion={onResolveSuggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}
1	+ {"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport type { ChangeEvent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n useConsolidatedRef,\n useElement,\n useFocusWithin,\n useI18n,\n useInputFormatter,\n useTestIds\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl } from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport Select, { Option } from '../Select';\nimport Input from '../Input';\nimport { StyledSelect } from '../Select/Select';\nimport Flex from '../Flex';\nimport { withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\n\nimport callingCodes from './callingCodes';\nimport {\n convertToCallbackParameter,\n formatPhone,\n formatPhoneNumber,\n getPhoneNumberParts\n} from './utils';\nimport { getPhoneInputTestIds } from './Phone.test-ids';\n\ntype AutoFillTel =\n \| AutoFillBase\n \| `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${OptionalPrefixToken<AutoFillContactKind>}tel`;\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp, TestIdProp {\n /*\n Display select with countries calling codes\n * @default false\n /\n showCountryCode?: boolean;\n /* Changes lists of countries calling codes /\n callingCodesList?: string[];\n /* Callback fired on input value change /\n onChange?: (value: string) => void;\n /* Callback fired when the component loses focus /\n onBlur?: (value: string) => void;\n /* CCallback fired when the component gets focus /\n onFocus?: (value: string) => void;\n /* Ref for the wrapping element. /\n ref?: Ref<HTMLInputElement>;\n /* Flag defining autocompletion behavior. */\n autoComplete?: AutoFillTel;\n}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n return css`\n border: 0;\n\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n ${StyledSelect},\n ${StyledInput} {\n &:focus {\n z-index: 1;\n }\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: ForwardRefForwardPropsComponent<PhoneInputProps> = forwardRef(function PhoneInput(\n props: PropsWithoutRef<PhoneInputProps>,\n ref: PhoneInputProps['ref']\n) {\n const {\n testId,\n value,\n id,\n label,\n labelHidden,\n info,\n status,\n required,\n readOnly,\n disabled,\n showCountryCode = false,\n callingCodesList = callingCodes,\n onChange,\n onBlur,\n onFocus,\n suggestion,\n additionalInfo,\n className,\n autoComplete = '_off',\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getPhoneInputTestIds);\n const [selectEl, setSelectEl] = useElement<HTMLSelectElement>();\n const [inputEl, setInputEl] = useElement<HTMLInputElement>();\n\n const t = useI18n();\n\n const [countryCode = callingCodesList[0], subscriberNumber = ''] = value\n ? getPhoneNumberParts(value, callingCodesList)\n : [];\n\n const onFocusChange = (focused: boolean) => {\n const callbackParam = convertToCallbackParameter(countryCode, subscriberNumber);\n if (focused) onFocus?.(callbackParam);\n else onBlur?.(callbackParam);\n };\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(convertToCallbackParameter(countryCode, e.target.value));\n };\n\n const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {\n onChange?.(convertToCallbackParameter(e.target.value, subscriberNumber));\n };\n\n const inputRef = useConsolidatedRef<HTMLInputElement>(ref, setInputEl);\n const containerRef = useRef<HTMLDivElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n (number: string) => {\n if (value && readOnly && showCountryCode) {\n const temp = formatPhone(value, { nationalFormat: !readOnly });\n if (temp) return temp;\n }\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode, showCountryCode);\n },\n [readOnly, countryCode, showCountryCode]\n );\n\n const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);\n\n const codesOptions = (\n <>\n {callingCodesList.map(code => (\n <Option key={code} value={code}>\n {code}\n </Option>\n ))}\n </>\n );\n\n const Comp = (\n <StyledPhoneInput\n data-testid={testIds.root}\n as={StyledFormControl}\n forwardedAs={Flex}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n <>\n {showCountryCode && !readOnly && (\n <>\n <Select\n data-testid={testIds.countryCode}\n value={countryCode}\n aria-label={t('select_country_code')}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-country-code') as AutoFillTel)\n : autoComplete\n }\n ref={setSelectEl}\n hasSuggestion={status === 'pending' && !!suggestion}\n >\n {codesOptions}\n </Select>\n {selectEl && (\n <Tooltip target={selectEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('country_code')}\n </Tooltip>\n )}\n </>\n )}\n <Input\n data-testid={testIds.control}\n autoComplete={\n autoComplete && autoComplete.endsWith('tel')\n ? (autoComplete.replace('tel', 'tel-national') as AutoFillTel)\n : autoComplete\n }\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n aria-label={t('enter_a_number')}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n suggestion={suggestion}\n className={createClassName('phone-input', className)}\n />\n {showCountryCode && inputEl && (\n <Tooltip target={inputEl} describeTarget={false} showDelay='none' hideDelay='none'>\n {t('phone_number')}\n </Tooltip>\n )}\n </>\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n testId={testIds}\n as='fieldset'\n additionalInfo={additionalInfo}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n readOnly={readOnly}\n status={status}\n required={required}\n disabled={disabled}\n suggestion={suggestion}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n});\n\nexport default withTestIds(PhoneInput, getPhoneInputTestIds);\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,~~CAuL3D~~,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAetD,QAAA,MAAM,QAAQ,EAAE,+BAA+B,CAAC,aAAa,CAgO3D,CAAC;AAEH,eAAe,QAAQ,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect, useRef } from 'react';
+import { forwardRef, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { getLuminance } from 'polished';
 import Text from '../Text';
@@ -14,14 +14,16 @@ const variantMap = {
     bar: Bar,
     ellipsis: Ellipsis
 };
-const delayDuration = 100;
+const defaultDelayDuration = 100;
 const minVisibleDuration = 1000;
-const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'global', visible: visibleProp = true, focusOnVisible = false, delay = false, onTransitionStartIn, onTransitionEndIn, onTransitionStartOut, onTransitionEndOut, value, message, liveConfig, ...restProps }, ref) {
+const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'global', visible: visibleProp = true, focusOnVisible = false, delay = false, onTransitionStartIn, onTransitionEndIn, onTransitionStartOut, onTransitionEndOut, value, message, liveConfig, offsetContainer, ...restProps }, ref) {
     const t = useI18n();
     const { portalTarget } = useConfiguration();
     const { announcePolite } = useLiveLog();
     const theme = useTheme();
     const progressEl = useConsolidatedRef(ref);
+    const backdropRef = useRef(null);
+    const [indicatorOffsetTop, setIndicatorOffsetTop] = useState();
     // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.
     const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);
     const [nullRender, setNullRender] = useState(!isVisibleState);
@@ -33,6 +35,7 @@ const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'g
     const hasBackdrop = placement === 'global' || placement === 'local';
     const valString = typeof value === 'number' ? `${value}%` : undefined;
     const label = message && valString ? `${message} - ${valString}` : message || valString;
+    const hasOffsetContainer = !!offsetContainer;
     const renderVisible = () => {
         setIsVisibleState(true);
         setNullRender(false);
@@ -44,12 +47,30 @@ const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'g
             setNullRender(true);
         }
     };
+    useLayoutEffect(() => {
+        if (!isVisibleState || nullRender || !backdropRef.current || !offsetContainer?.current) {
+            return;
+        }
+        const backdropRect = backdropRef.current.getBoundingClientRect();
+        const refRect = offsetContainer.current.getBoundingClientRect();
+        const viewportHeight = document.documentElement.clientHeight;
+        // Visible portion of the reference element within the viewport
+        const visibleTop = Math.max(refRect.top, 0);
+        const visibleBottom = Math.min(refRect.bottom, viewportHeight);
+        if (visibleBottom <= visibleTop) {
+            setIndicatorOffsetTop(NaN);
+            return;
+        }
+        // Center of the visible portion, relative to the backdrop
+        setIndicatorOffsetTop((visibleTop + visibleBottom) / 2 - backdropRect.top);
+    }, [isVisibleState, nullRender, offsetContainer]);
     // Handle render and visible state.
     useEffect(() => {
         if (visibleProp) {
             // Capture a timestamp for additional timers.
             timeBeforeVisibleRender.current = Date.now();
             if (delay) {
+                const delayDuration = typeof delay === 'number' ? delay : defaultDelayDuration;
                 delayTimer.current = window.setTimeout(renderVisible, delayDuration);
             }
             else {
@@ -99,23 +120,34 @@ const Progress = forwardRef(function Progress({ variant = 'ring', placement = 'g
         if (!nullRender && isVisibleState) {
             // After a visible render set a timestamp for timers above.
             timeAfterVisibleRender.current = Date.now();
-            if (focusOnVisible)
+            // If there is no offsetContainer focus immediately.
+            // Otherwise wait until a render has applied offset to avoid the indicator being pulled out of view.
+            if ((focusOnVisible && !hasOffsetContainer) || indicatorOffsetTop) {
                 progressEl.current?.focus();
+            }
         }
     },
     // nullRender is the only triggerable dependency. Others values will be captured.
-    [nullRender]);
+    [nullRender, hasOffsetContainer, indicatorOffsetTop]);
     if (nullRender)
         return null;
     const CompVariant = variantMap[variant];
     let indicator = (_jsx(CompVariant, { "aria-label": typeof value !== 'number' && label ? label : t('loading'), as: placement === 'inline' ? 'span' : undefined, ...restProps, placement: placement, value: value, "aria-valuetext": typeof value === 'number' ? label : undefined, ref: progressEl, tabIndex: -1 }));
     if (placement !== 'inline') {
-        indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": true, children: message }))] }));
+        indicator = (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 0.5 }, as: StyledProgress, placement: placement,
+            /*
+              Inline style justification:
+              Highly variable values will generate new classes every time.
+              Not using CSS var since can not conditionally set property, only value.
+              marginTop is used vs logical property since value is based on client rect which is not logical.
+            */
+            style: indicatorOffsetTop ? { marginTop: `${indicatorOffsetTop}px` } : undefined, children: [indicator, message && (_jsx(Text, { as: StyledMessage, variant: 'secondary', "aria-hidden": true, children: message }))] }));
     }
     // generate background variant based on theme text color
     const progressBackdropVariant = getLuminance(theme.base.palette['foreground-color']) > 0.5 ? 'dark' : 'light';
-    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { open: isVisibleState, container: { direction: 'column' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: progressBackdropVariant, alpha: 0.6, onBeforeTransitionIn: onTransitionStartIn, onAfterTransitionIn: onTransitionEndIn, onBeforeTransitionOut: onTransitionStartOut, onAfterTransitionOut: () => {
+    const content = hasBackdrop ? (_jsx(StyledProgressBackdrop, { ref: backdropRef, open: isVisibleState, container: { direction: 'column', justify: indicatorOffsetTop ? 'start' : 'center' }, position: placement === 'global' ? 'fixed' : 'absolute', variant: progressBackdropVariant, alpha: 0.6, onBeforeTransitionIn: onTransitionStartIn, onAfterTransitionIn: onTransitionEndIn, onBeforeTransitionOut: onTransitionStartOut, onAfterTransitionOut: () => {
             setNullRender(true);
+            setIndicatorOffsetTop(undefined);
             onTransitionEndOut?.();
         }, children: indicator })) : (indicator);
     return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { getLuminance } from 'polished';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog, useTheme } from '../../hooks';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst delayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: ForwardRefForwardPropsComponent<ProgressProps> = forwardRef(function Progress(\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionStartIn,\n onTransitionEndIn,\n onTransitionStartOut,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n) {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const theme = useTheme();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' \|\| placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message \|\| valString;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n if (focusOnVisible) progressEl.current?.focus();\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' && label ? label : t('loading')}\n as={placement === 'inline' ? 'span' : undefined}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n // generate background variant based on theme text color\n const progressBackdropVariant =\n getLuminance(theme.base.palette['foreground-color']) > 0.5 ? 'dark' : 'light';\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n open={isVisibleState}\n container={{ direction: 'column' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant={progressBackdropVariant}\n alpha={0.6}\n onBeforeTransitionIn={onTransitionStartIn}\n onAfterTransitionIn={onTransitionEndIn}\n onBeforeTransitionOut={onTransitionStartOut}\n onAfterTransitionOut={() => {\n setNullRender(true);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Progress;\n"]}
1	+ {"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useEffect, useRef, useLayoutEffect } from 'react';\nimport type { PropsWithoutRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { getLuminance } from 'polished';\n\nimport type { ForwardRefForwardPropsComponent } from '../../types';\nimport Text from '../Text';\nimport { useConfiguration, useConsolidatedRef, useI18n, useLiveLog, useTheme } from '../../hooks';\nimport Flex from '../Flex';\n\nimport type { ProgressProps } from './Progress.types';\nimport Bar from './Bar';\nimport Ellipsis from './Ellipsis';\nimport Ring from './Ring';\nimport { StyledMessage, StyledProgress, StyledProgressBackdrop } from './Progress.styles';\n\nconst variantMap = {\n ring: Ring,\n bar: Bar,\n ellipsis: Ellipsis\n} as const;\n\nconst defaultDelayDuration = 100;\nconst minVisibleDuration = 1000;\n\nconst Progress: ForwardRefForwardPropsComponent<ProgressProps> = forwardRef(function Progress(\n {\n variant = 'ring',\n placement = 'global',\n visible: visibleProp = true,\n focusOnVisible = false,\n delay = false,\n onTransitionStartIn,\n onTransitionEndIn,\n onTransitionStartOut,\n onTransitionEndOut,\n value,\n message,\n liveConfig,\n offsetContainer,\n ...restProps\n }: PropsWithoutRef<ProgressProps>,\n ref: ProgressProps['ref']\n) {\n const t = useI18n();\n const { portalTarget } = useConfiguration();\n const { announcePolite } = useLiveLog();\n const theme = useTheme();\n const progressEl = useConsolidatedRef<HTMLDivElement>(ref);\n const backdropRef = useRef<HTMLDivElement>(null);\n const [indicatorOffsetTop, setIndicatorOffsetTop] = useState<number \| undefined>();\n\n // Rendering states. Both are needed due to Backdrop's transition phase where isVisibleState is false but nullRender is true until onAfterTransitionOut.\n const [isVisibleState, setIsVisibleState] = useState(delay ? false : visibleProp);\n const [nullRender, setNullRender] = useState(!isVisibleState);\n\n // Refs for timestamps and timeout ids.\n const timeBeforeVisibleRender = useRef<number>();\n const timeAfterVisibleRender = useRef<number>();\n const delayTimer = useRef<number>();\n const minVisibleTimer = useRef<number>();\n\n const hasBackdrop = placement === 'global' \|\| placement === 'local';\n const valString = typeof value === 'number' ? `${value}%` : undefined;\n const label = message && valString ? `${message} - ${valString}` : message \|\| valString;\n\n const hasOffsetContainer = !!offsetContainer;\n\n const renderVisible = () => {\n setIsVisibleState(true);\n setNullRender(false);\n };\n\n const renderNotVisible = () => {\n setIsVisibleState(false);\n // With a transition, setNullRender needs to be called in Backdrop's onAfterTransitionOut.\n if (!hasBackdrop) {\n setNullRender(true);\n }\n };\n\n useLayoutEffect(() => {\n if (!isVisibleState \|\| nullRender \|\| !backdropRef.current \|\| !offsetContainer?.current) {\n return;\n }\n\n const backdropRect = backdropRef.current.getBoundingClientRect();\n const refRect = offsetContainer.current.getBoundingClientRect();\n const viewportHeight = document.documentElement.clientHeight;\n\n // Visible portion of the reference element within the viewport\n const visibleTop = Math.max(refRect.top, 0);\n const visibleBottom = Math.min(refRect.bottom, viewportHeight);\n\n if (visibleBottom <= visibleTop) {\n setIndicatorOffsetTop(NaN);\n return;\n }\n\n // Center of the visible portion, relative to the backdrop\n setIndicatorOffsetTop((visibleTop + visibleBottom) / 2 - backdropRect.top);\n }, [isVisibleState, nullRender, offsetContainer]);\n\n // Handle render and visible state.\n useEffect(\n () => {\n if (visibleProp) {\n // Capture a timestamp for additional timers.\n timeBeforeVisibleRender.current = Date.now();\n\n if (delay) {\n const delayDuration = typeof delay === 'number' ? delay : defaultDelayDuration;\n delayTimer.current = window.setTimeout(renderVisible, delayDuration);\n } else {\n renderVisible();\n }\n } else if (\n // A timer was started to render visible either avoid it or render null.\n delayTimer.current !== undefined\n ) {\n // If a timeout has started to render visible, clear it.\n clearTimeout(delayTimer.current);\n\n // If the indicator has already rendered visible.\n if (timeAfterVisibleRender.current !== undefined) {\n const timeElapsedSinceLastVisibleRender = Date.now() - timeAfterVisibleRender.current;\n\n // If the indicator has been visible for long enough we can remove it.\n if (timeElapsedSinceLastVisibleRender >= minVisibleDuration) {\n renderNotVisible();\n } else {\n // Hold off removing until we hit the minimum visible time.\n minVisibleTimer.current = window.setTimeout(\n renderNotVisible,\n minVisibleDuration - timeElapsedSinceLastVisibleRender\n );\n }\n } else {\n renderNotVisible();\n }\n } else {\n renderNotVisible();\n }\n },\n // visibleProp is the only triggerable dependency. Others values will be captured.\n [visibleProp]\n );\n\n // Live announcement\n useEffect(\n () => {\n if (liveConfig?.contextualLabel && isVisibleState) {\n announcePolite({\n message: `${liveConfig.contextualLabel}, ${label ?? t('loading')}`,\n type: 'status'\n });\n }\n },\n // isVisibleState is the only triggerable dependency. Others values will be captured.\n [isVisibleState]\n );\n\n // Auto focusing and render timestamping.\n useEffect(\n () => {\n if (!nullRender && isVisibleState) {\n // After a visible render set a timestamp for timers above.\n timeAfterVisibleRender.current = Date.now();\n\n // If there is no offsetContainer focus immediately.\n // Otherwise wait until a render has applied offset to avoid the indicator being pulled out of view.\n if ((focusOnVisible && !hasOffsetContainer) \|\| indicatorOffsetTop) {\n progressEl.current?.focus();\n }\n }\n },\n // nullRender is the only triggerable dependency. Others values will be captured.\n [nullRender, hasOffsetContainer, indicatorOffsetTop]\n );\n\n if (nullRender) return null;\n\n const CompVariant = variantMap[variant];\n\n let indicator = (\n <CompVariant\n aria-label={typeof value !== 'number' && label ? label : t('loading')}\n as={placement === 'inline' ? 'span' : undefined}\n {...restProps}\n placement={placement}\n value={value}\n aria-valuetext={typeof value === 'number' ? label : undefined}\n ref={progressEl}\n tabIndex={-1}\n />\n );\n\n if (placement !== 'inline') {\n indicator = (\n <Flex\n container={{ direction: 'column', alignItems: 'center', gap: 0.5 }}\n as={StyledProgress}\n placement={placement}\n /\n Inline style justification:\n Highly variable values will generate new classes every time.\n Not using CSS var since can not conditionally set property, only value.\n marginTop is used vs logical property since value is based on client rect which is not logical.\n /\n style={indicatorOffsetTop ? { marginTop: `${indicatorOffsetTop}px` } : undefined}\n >\n {indicator}\n {message && (\n <Text as={StyledMessage} variant='secondary' aria-hidden>\n {message}\n </Text>\n )}\n </Flex>\n );\n }\n\n // generate background variant based on theme text color\n const progressBackdropVariant =\n getLuminance(theme.base.palette['foreground-color']) > 0.5 ? 'dark' : 'light';\n\n const content = hasBackdrop ? (\n <StyledProgressBackdrop\n ref={backdropRef}\n open={isVisibleState}\n container={{ direction: 'column', justify: indicatorOffsetTop ? 'start' : 'center' }}\n position={placement === 'global' ? 'fixed' : 'absolute'}\n variant={progressBackdropVariant}\n alpha={0.6}\n onBeforeTransitionIn={onTransitionStartIn}\n onAfterTransitionIn={onTransitionEndIn}\n onBeforeTransitionOut={onTransitionStartOut}\n onAfterTransitionOut={() => {\n setNullRender(true);\n setIndicatorOffsetTop(undefined);\n onTransitionEndOut?.();\n }}\n >\n {indicator}\n </StyledProgressBackdrop>\n ) : (\n indicator\n );\n\n return placement === 'global' && portalTarget ? createPortal(content, portalTarget) : content;\n});\n\nexport default Progress;\n"]}

package/lib/components/Progress/Progress.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { Ref, RefObject } from 'react';
 import type { BaseProps, NoChildrenProp } from '../../types';
 import type { BackdropProps } from '../Backdrop/Backdrop';
 export interface ProgressProps extends BaseProps, NoChildrenProp {
@@ -40,11 +40,11 @@ export interface ProgressProps extends BaseProps, NoChildrenProp {
      */
     focusOnVisible?: boolean;
     /**
-     * If true, the indicator will not render as visible until 1sec after the visible prop is set to true.
-     * This is a best estimate to avoid visual flicker where progress is resolved within 1sec.
+     * If true, render is delayed to avoid unwanted flickering.
+     * Pass a number to customize the delay.
      * @default false
      */
-    delay?: boolean;
+    delay?: boolean | number;
     /** Called when the css transition starts on the way in. */
     onTransitionStartIn?: BackdropProps['onBeforeTransitionIn'];
     /** Called when the css transition starts on the way out. */
@@ -58,6 +58,12 @@ export interface ProgressProps extends BaseProps, NoChildrenProp {
         /** Distinguishes the source of the update on the page. */
         contextualLabel: string;
     };
+    /**
+     * For use with "local" placement only.
+     * Reference to the relative container element for the locally placed backdrop.
+     * Enables dynamic offset of the visual indicator.
+     */
+    offsetContainer?: RefObject<Element>;
     /** Ref to the visual indicator element, currently a role of progressbar. */
     ref?: Ref<HTMLDivElement>;
 }

package/lib/components/Progress/Progress.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;~~AAEjC~~,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;~~IAChB~~,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzD,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,sEAAsE;IACtE,UAAU,CAAC,EAAE;QACX,0DAA0D;QAC1D,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,4EAA4E;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
1	+ {"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC5D,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC9D,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzD,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,sEAAsE;IACtE,UAAU,CAAC,EAAE;QACX,0DAA0D;QAC1D,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IACrC,4EAA4E;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/Progress/Progress.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\nimport type { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ProgressProps extends BaseProps, NoChildrenProp {\n /*\n Determines which variant should be rendered.\n * @default 'ring'\n /\n variant?: 'ring' \| 'bar' \| 'ellipsis';\n /\n Minimum possible value.\n * @default 0\n /\n minValue?: number;\n /\n Maximum possible value.\n * @default 100\n /\n maxValue?: number;\n /* Current progress value within the range specified, or the default range of 0-100. /\n value?: number;\n /* Provides a message to the user along with the component. /\n message?: string;\n /\n Determines the placement of the component.\n * @default 'global'\n /\n placement?: 'global' \| 'local' \| 'block' \| 'inline';\n /\n When true, fade in occurs when component mounts.\n * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n * This is technically not the same as unmounting via parent.\n * Applicable for all placements but the fade effect is only applicable to 'global' \| 'local' placement.\n * @default true\n /\n visible?: boolean;\n /\n If true, upon visible render the indicator element will take focus.\n * @default false\n /\n focusOnVisible?: boolean;\n /\n If true, ~~the indicator will not~~ render as ~~visible~~ ~~until~~ ~~1sec~~ ~~after~~ ~~the visible prop is set to true~~.\n * ~~This~~ is a ~~best~~ ~~estimate~~ to ~~avoid~~ ~~visual~~ ~~flicker where progress is resolved within 1sec~~.\n * @default false\n /\n delay?: boolean;\n /* Called when the css transition starts on the way in. /\n onTransitionStartIn?: BackdropProps['onBeforeTransitionIn'];\n /* Called when the css transition starts on the way out. /\n onTransitionStartOut?: BackdropProps['onBeforeTransitionOut'];\n /* Called when the css transition ends on the way in. /\n onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n /* Called when the css transition ends on the way out...A good time to unmount! /\n onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n /* Triggers live announcement on show and value or message change. /\n liveConfig?: {\n /* Distinguishes the source of the update on the page. /\n contextualLabel: string;\n };\n /* Ref to the visual indicator element, currently a role of progressbar. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"Progress.types.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref, RefObject } from 'react';\n\nimport type { BaseProps, NoChildrenProp } from '../../types';\nimport type { BackdropProps } from '../Backdrop/Backdrop';\n\nexport interface ProgressProps extends BaseProps, NoChildrenProp {\n /*\n Determines which variant should be rendered.\n * @default 'ring'\n /\n variant?: 'ring' \| 'bar' \| 'ellipsis';\n /\n Minimum possible value.\n * @default 0\n /\n minValue?: number;\n /\n Maximum possible value.\n * @default 100\n /\n maxValue?: number;\n /* Current progress value within the range specified, or the default range of 0-100. /\n value?: number;\n /* Provides a message to the user along with the component. /\n message?: string;\n /\n Determines the placement of the component.\n * @default 'global'\n /\n placement?: 'global' \| 'local' \| 'block' \| 'inline';\n /\n When true, fade in occurs when component mounts.\n * When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM.\n * This is technically not the same as unmounting via parent.\n * Applicable for all placements but the fade effect is only applicable to 'global' \| 'local' placement.\n * @default true\n /\n visible?: boolean;\n /\n If true, upon visible render the indicator element will take focus.\n * @default false\n /\n focusOnVisible?: boolean;\n /\n If true, render is delayed to avoid unwanted flickering.\n * Pass a number to customize the delay.\n * @default false\n /\n delay?: boolean \| number;\n /* Called when the css transition starts on the way in. /\n onTransitionStartIn?: BackdropProps['onBeforeTransitionIn'];\n /* Called when the css transition starts on the way out. /\n onTransitionStartOut?: BackdropProps['onBeforeTransitionOut'];\n /* Called when the css transition ends on the way in. /\n onTransitionEndIn?: BackdropProps['onAfterTransitionIn'];\n /* Called when the css transition ends on the way out...A good time to unmount! /\n onTransitionEndOut?: BackdropProps['onAfterTransitionOut'];\n /* Triggers live announcement on show and value or message change. /\n liveConfig?: {\n /* Distinguishes the source of the update on the page. /\n contextualLabel: string;\n };\n /\n For use with \"local\" placement only.\n * Reference to the relative container element for the locally placed backdrop.\n * Enables dynamic offset of the visual indicator.\n /\n offsetContainer?: RefObject<Element>;\n /* Ref to the visual indicator element, currently a role of progressbar. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

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

@@ -3,7 +3,7 @@ import type { FormFieldProps } from '../FormField';
 import type { FormControlProps } from '../FormControl';
 import type { NoChildrenProp, WithAttributes, TestIdProp } from '../../types';
 import type { elements } from '../FormField/FormField.test-ids';
-export type RadioCheckProps = WithAttributes<'input', NoChildrenProp & TestIdProp<typeof elements> & {
+export type RadioCheckProps = WithAttributes<'input', NoChildrenProp & TestIdProp<typeof elements> & Pick<FormControlProps, 'suggestion'> & {
     /** Pass a string or a fragment with an Icon and string. */
     label?: FormControlProps['label'];
     /** Set visual state based on a validation state. */
@@ -39,7 +39,9 @@ export declare const StyledPseudoRadioCheck: import("styled-components/dist/type
     $labelEmpty?: boolean;
 }>> & string;
 export declare const StyledRadioCheckInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const StyledRadioCheck: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<RadioCheckProps, "disabled" | "readOnly">>> & string;
+export declare const StyledRadioCheck: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<RadioCheckProps, "disabled" | "readOnly"> & {
+    hasSuggestion?: boolean;
+}>> & string;
 export declare const StyledRadioCheckCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, Pick<RadioCheckProps, "disabled" | "readOnly" | "status">>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RadioCheckProps, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
     getTestIds: (testIdProp?: TestIdProp["testId"]) => import("../../types").TestIdsRecord<readonly ["control", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;

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

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
+import { hideVisually, mix, rgba } from 'polished';
 import FormField, { StyledFormFieldInfo } from '../FormField';
 import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
@@ -124,38 +124,74 @@ export const StyledRadioCheckInput = styled.input(({ theme, disabled, readOnly }
   `;
 });
 StyledRadioCheckInput.defaultProps = defaultThemeProp;
-export const StyledRadioCheck = styled.div(({ theme, disabled, readOnly }) => {
-    const { base, components: { 'radio-check': { label: { color: labelColor, 'font-weight': labelFontWeight } }, 'form-control': { ':hover': { 'border-color': hoverBorderColor } } } } = theme;
+export const StyledRadioCheck = styled.div(({ theme, disabled, readOnly, hasSuggestion }) => {
+    const { base, components: { 'radio-check': { label: { color: labelColor, 'font-weight': labelFontWeight } }, 'form-control': { ':hover': { 'border-color': hoverBorderColor }, 'border-radius': radius, 'background-color': background }, 'form-field': formField } } = theme;
     const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
+    const suggestionBorderColor = getReadableStatusColor(theme, 'pending');
     return css `
-      > ${StyledLabel} {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        font-weight: ${labelFontWeight};
-        word-break: break-word;
-        font-size: ${fontSize.s};
-        color: ${labelColor};
-        margin: 0;
-        min-height: ${base['hit-area']['mouse-min']};
-        @media (pointer: coarse) {
-          min-height: ${base['hit-area']['finger-min']};
-        }
-      }
+    > ${StyledLabel} {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-weight: ${labelFontWeight};
+      word-break: break-word;
+      font-size: ${fontSize.s};
+      color: ${labelColor};
+      margin: 0;
+      min-height: ${base['hit-area']['mouse-min']};
-      > ${StyledFormFieldInfo} {
-        margin: 0;
-        padding-inline-start: calc(${base.spacing} / 4);
+      @media (pointer: coarse) {
+        min-height: ${base['hit-area']['finger-min']};
       }
+    }
-      ${!(disabled || readOnly) &&
+    > ${StyledFormFieldInfo} {
+      margin: 0;
+      padding-inline-start: calc(${base.spacing} / 4);
+    }
+    ${!(disabled || readOnly) &&
         css `
-        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {
-          border-color: ${hoverBorderColor};
+      &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {
+        border-color: ${hoverBorderColor};
+      }
+      ${hasSuggestion &&
+            css `
+        > ${StyledRadioCheckInput}:not(:focus) {
+          &:checked + ${StyledLabel} {
+            &:not(:hover) ${StyledPseudoRadioCheck} {
+              background-color: ${suggestionBorderColor};
+              border-color: ${suggestionBorderColor};
+              &::after {
+                border-color: ${mix(0.1, formField.pending['status-color'], base.palette['primary-background'])};
+              }
+            }
+            &:hover ${StyledPseudoRadioCheck} {
+              background-color: ${suggestionBorderColor};
+              border-color: ${suggestionBorderColor};
+              box-shadow: 0 0 0 0.125rem ${rgba(suggestionBorderColor, 0.2)};
+            }
+          }
+          &:not(:checked) + ${StyledLabel} {
+            ${StyledPseudoRadioCheck} {
+              border-color: ${suggestionBorderColor};
+              border-inline-start-width: calc(${base['border-radius']} * ${radius});
+              background-color: ${mix(0.1, formField.pending['status-color'], base.palette['primary-background'])};
+            }
+            &:hover ${StyledPseudoRadioCheck} {
+              background-color: ${background};
+              box-shadow: 0 0 0 0.125rem ${rgba(suggestionBorderColor, 0.2)};
+            }
+          }
         }
       `}
-    `;
+    `}
+  `;
 });
 StyledRadioCheck.defaultProps = defaultThemeProp;
 export const StyledRadioCheckCard = styled.label(({ theme, disabled, readOnly, status }) => {
@@ -206,7 +242,7 @@ StyledRadioCheckCard.defaultProps = defaultThemeProp;
 const RadioCheck = forwardRef(function RadioCheck(props, ref) {
     const uid = useUID();
     const t = useI18n();
-    const { testId, type, id = uid, label, 'aria-labelledby': ariaLabelledBy, required = false, disabled = false, readOnly = false, indeterminate = false, checked, defaultChecked, variant = 'simple', onClick, onKeyDown, onChange, status, info, additionalInfo, ariaDescribedby, suppressAnnouncements, className, ...restProps } = props;
+    const { testId, type, id = uid, label, 'aria-labelledby': ariaLabelledBy, required = false, disabled = false, readOnly = false, indeterminate = false, checked, defaultChecked, variant = 'simple', onClick, onKeyDown, onChange, status, info, additionalInfo, ariaDescribedby, suppressAnnouncements, className, suggestion, ...restProps } = props;
     const testIds = useTestIds(testId, getRadioCheckTestIds);
     const isRadio = type === 'radio';
     const card = variant === 'card';
@@ -234,7 +270,7 @@ const RadioCheck = forwardRef(function RadioCheck(props, ref) {
         };
     }, []);
     const labelEmpty = label === null || label === undefined || label === '';
-    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, "$labelEmpty": labelEmpty }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card || ariaLabelledBy ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, suppressAnnouncements: suppressAnnouncements, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
+    return (_jsx(FormField, { testId: testIds, as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly, "$labelEmpty": labelEmpty }), label, readOnly && _jsx(HiddenText, { id: readonlyDescId, children: t('read_only') })] }), labelAs: card || ariaLabelledBy ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, info: info, isRadioCheck: true, inline: true, labelAfter: true, additionalInfo: additionalInfo, suppressAnnouncements: suppressAnnouncements, suggestion: suggestion, hasSuggestion: status === 'pending' && !!suggestion, children: _jsx(StyledRadioCheckInput, { "data-testid": testIds.control, ...restProps, className: createClassName('radio-check', className, {
                 variant,
                 type
             }), id: id, "aria-labelledby": ariaLabelledBy, type: type, required: required, checked: checked, defaultChecked: defaultChecked, "aria-describedby": readOnly ? `${ariaDescribedby} ${readonlyDescId}` : ariaDescribedby, disabled: disabled, readOnly: readOnly, onChange: onChange, onClick: (e) => {