npm - @pega/cosmos-react-core - Versions diffs - 3.0.0-dev.15.0 → 3.0.0-dev.17.0 - Mend

@pega/cosmos-react-core 3.0.0-dev.15.0 → 3.0.0-dev.17.0

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

Files changed (475) hide show

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

@@ -14,7 +14,7 @@ import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue
 registerIcon(minusIcon, plusIcon);
 const NumberInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
+    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
     const { locale } = useConfiguration();
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
@@ -26,13 +26,13 @@ const NumberInput = forwardRef((props, ref) => {
             maximumFractionDigits
         });
     }, [locale, unit, showGroupSeparators, maximumFractionDigits]);
-    const onInputChange = useCallback((e) => {
+    const onInputChange = (e) => {
         const inputValue = e.target.value;
         const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);
         if (cleanedInputValue === value)
             return;
         onChange(cleanedInputValue);
-    }, [onChange, decimalSign, value, maximumFractionDigits]);
+    };
     const onKeyDown = (e) => {
         if (readOnly)
             return;
@@ -53,6 +53,11 @@ const NumberInput = forwardRef((props, ref) => {
                     }
                     e.preventDefault();
                 }
+                else if (input.selectionStart !== null &&
+                    !input.value.charAt(input.selectionStart - 1).match(/\d/)) {
+                    onChange(getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits));
+                    e.preventDefault();
+                }
                 break;
             case '-':
                 if (value.startsWith('-'))
@@ -71,8 +76,12 @@ const NumberInput = forwardRef((props, ref) => {
         }
         if (e.type === 'focus')
             onFocus?.(parsableValue);
-        else
+        else {
+            if (parsableValue !== value) {
+                onChange(parsableValue);
+            }
             onBlur?.(parsableValue);
+        }
     };
     const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
     const t = useI18n();
@@ -83,13 +92,22 @@ const NumberInput = forwardRef((props, ref) => {
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
                     if (e.target === containerRef.current)
                         inputRef?.current?.focus();
                 }, children: NumberInputComp }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
-    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
+    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
     const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+    return label ? (_jsx(FormField, { ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default NumberInput;
 //# sourceMappingURL=NumberInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onFocus,\n onBlur,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n },\n [onChange, decimalSign, value, maximumFractionDigits]\n );\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else onBlur?.(parsableValue);\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <Input\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n />\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}
1	+ {"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n KeyboardEvent,\n PropsWithoutRef,\n useCallback,\n useMemo,\n useRef,\n FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n useConfiguration,\n useConsolidatedRef,\n useI18n,\n useInputFormatter,\n useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n getCleanedValue,\n getDecimalSign,\n getDecrementedValue,\n getFormattedValue,\n getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n const uid = useUID();\n const {\n id = uid,\n status,\n label,\n labelHidden,\n info,\n required,\n disabled,\n readOnly,\n value = '',\n onChange,\n onFocus,\n onBlur,\n onResolveSuggestion,\n unit,\n showDecimal = true,\n numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n showGroupSeparators = true,\n min = Number.MIN_SAFE_INTEGER,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n variant,\n 'aria-label': ariaLabel,\n ...restProps\n } = props;\n\n const { locale } = useConfiguration();\n const inputRef = useConsolidatedRef(ref);\n const containerRef = useRef<HTMLElement>(null);\n const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n const formatValue = useCallback(\n number => {\n return getFormattedValue(number, locale, unit, {\n useGrouping: showGroupSeparators,\n maximumFractionDigits\n });\n },\n [locale, unit, showGroupSeparators, maximumFractionDigits]\n );\n\n const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n const inputValue = e.target.value;\n const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n if (cleanedInputValue === value) return;\n onChange(cleanedInputValue);\n };\n\n const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (readOnly) return;\n const input = e.currentTarget;\n switch (e.key) {\n case 'ArrowUp':\n e.preventDefault();\n onChange(getIncrementedValue(value, min, max, step));\n break;\n case 'ArrowDown':\n e.preventDefault();\n onChange(getDecrementedValue(value, min, max, step));\n break;\n case decimalSign:\n if (input.value.includes(decimalSign)) {\n if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n }\n e.preventDefault();\n } else if (\n input.selectionStart !== null &&\n !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n ) {\n onChange(\n getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n );\n e.preventDefault();\n }\n break;\n case '-':\n if (value.startsWith('-')) e.preventDefault();\n break;\n default:\n }\n };\n\n const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n let parsableValue = value;\n\n if (Number.isNaN(parseFloat(value))) {\n parsableValue = '';\n } else if (value?.endsWith('.')) {\n parsableValue = value.slice(0, -1);\n }\n\n if (e.type === 'focus') onFocus?.(parsableValue);\n else {\n if (parsableValue !== value) {\n onChange(parsableValue);\n }\n\n onBlur?.(parsableValue);\n }\n };\n\n const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n const t = useI18n();\n\n const NumberInputComp = (\n <Input\n {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n inputMode='numeric'\n ref={inputRef}\n value={formattedValue}\n onKeyDown={onKeyDown}\n onFocus={onInputFocusEvent}\n onBlur={onInputFocusEvent}\n aria-label={`${ariaLabel \|\| label}. ${unit ? t('measured_in', [unit]) : ''}`}\n maxLength={16}\n />\n );\n\n const onMinusClick = () => {\n onChange?.(getDecrementedValue(value, min, max, step));\n };\n\n const onPlusClick = () => {\n onChange?.(getIncrementedValue(value, min, max, step));\n };\n\n const StepperComp = (\n <Flex\n as={StyledStepperInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n size={formattedValue?.length}\n >\n <Button\n variant='simple'\n icon\n onClick={onMinusClick}\n aria-label={t('number_decrement_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='minus' />\n </Button>\n <Flex\n container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n item={{ grow: 1 }}\n ref={containerRef}\n onClick={(e: MouseEvent) => {\n if (e.target === containerRef.current) inputRef?.current?.focus();\n }}\n >\n {NumberInputComp}\n </Flex>\n <Button\n variant='simple'\n icon\n onClick={onPlusClick}\n aria-label={t('number_increment_value_by', [step])}\n readOnly={readOnly}\n disabled={disabled}\n tabIndex={-1}\n >\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n\n const NumberComp = (\n <Flex\n as={StyledNumberInput}\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {NumberInputComp}\n </Flex>\n );\n\n const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n return label ? (\n <FormField\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default NumberInput;\n"]}

package/lib/components/Number/NumberInput.styles.d.ts CHANGED Viewed

@@ -1,7 +1,11 @@
 interface StyledStepperProps {
     size: number;
 }
-export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & StyledStepperProps, never>;
-declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+} & StyledStepperProps, never>;
+declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 export default StyledNumberInput;
 //# sourceMappingURL=NumberInput.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB,~~2QAkD7B,~~CAAC;AAIH,QAAA,MAAM,iBAAiB,~~sPA8BrB,~~CAAC;AAIH,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAmD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SA+BrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/Number/NumberInput.styles.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../theme';
 import { StyledButton } from '../Button';
 import { StyledFlex } from '../Flex';
 export const StyledStepperInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing, 'border-radius': baseBorderRadius }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
+    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
     return css `
     &:focus-within:not([disabled]) {
       border-color: ${focusBorderColor};
@@ -22,6 +22,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
       min-width: 1ch;
       border: 0;
       padding: 0;
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }
@@ -44,7 +45,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
 });
 StyledStepperInput.defaultProps = defaultThemeProp;
 const StyledNumberInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
+    const { theme: { base: { spacing, palette }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
     return css `
     padding: 0 calc(0.5 * ${spacing});
     &:focus-within:not([disabled]) {
@@ -54,6 +55,7 @@ const StyledNumberInput = styled(StyledFormControl)(props => {
     ${StyledInput} {
       border: 0;
       padding: 0 calc(0.5 * ${spacing});
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,~~EACpD~~,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI~~;;;;;;;;MAQb~~,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,~~EACjB~~,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;;;;;~~MAK/B~~,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n const {\n theme: {\n base: { spacing, 'border-radius': baseBorderRadius },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth,\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n },\n size\n } = props;\n return css`\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledFlex} {\n overflow: auto;\n margin-inline-start: ${spacing};\n margin-inline-end: ${spacing};\n }\n ${StyledInput} {\n width: ${size}ch;\n min-width: 1ch;\n border: 0;\n padding: 0;\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n > ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n margin-inline-start: auto;\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n const {\n theme: {\n base: { spacing },\n components: {\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n\n return css`\n padding: 0 calc(0.5 * ${spacing});\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledInput} {\n border: 0;\n padding: 0 calc(0.5 * ${spacing});\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
1	+ {"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;0BAIO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;0BACX,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n const {\n theme: {\n base: { spacing, 'border-radius': baseBorderRadius, palette },\n components: {\n input: { height },\n 'form-control': {\n 'border-radius': formBorderRadius,\n 'foreground-color': fgColor,\n 'border-width': borderWidth,\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n },\n size\n } = props;\n return css`\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledFlex} {\n overflow: auto;\n margin-inline-start: ${spacing};\n margin-inline-end: ${spacing};\n }\n ${StyledInput} {\n width: ${size}ch;\n min-width: 1ch;\n border: 0;\n padding: 0;\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n > ${StyledButton} {\n border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n margin-inline-start: auto;\n border: 0;\n &:enabled {\n color: ${fgColor};\n }\n min-height: calc(${height} - 2 * ${borderWidth});\n height: calc(${height} - 2 * ${borderWidth});\n }\n `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n const {\n theme: {\n base: { spacing, palette },\n components: {\n 'form-control': {\n ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n }\n }\n }\n } = props;\n\n return css`\n padding: 0 calc(0.5 * ${spacing});\n &:focus-within:not([disabled]) {\n border-color: ${focusBorderColor};\n box-shadow: ${shadow};\n }\n ${StyledInput} {\n border: 0;\n padding: 0 calc(0.5 * ${spacing});\n background-color: ${palette['primary-background']};\n &:focus:not([disabled]) {\n box-shadow: none;\n }\n }\n ${StyledText} {\n padding: 0 calc(0.5 * ${spacing});\n white-space: nowrap;\n }\n `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}

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

@@ -39,6 +39,8 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
     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'];
     /** Defines unit of the number, like 'kg', 'miles' or '%'. */
     unit?: string;
     /**

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,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;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;;;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,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;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;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;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;;;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,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;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,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;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;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}

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":"~~AAqFA~~,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps extends BaseProps, NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* 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 /* Placeholder text. The browser defaults to an empty string. /\n placeholder?: string;\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the component 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 /\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 /* Defines unit of the number, like 'kg', 'miles' or '%'. /\n unit?: string;\n /\n \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 /* Ref for the wrapping element. /\n ref?: Ref<HTMLInputElement>;\n /* Optional manual override for generated aria label /\n 'aria-label'?: string;\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":"AAuFA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps extends BaseProps, NoChildrenProp {\n /*\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* 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 /* Placeholder text. The browser defaults to an empty string. /\n placeholder?: string;\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the component 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 /\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 /* Defines unit of the number, like 'kg', 'miles' or '%'. /\n unit?: string;\n /\n \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 /* Ref for the wrapping element. /\n ref?: Ref<HTMLInputElement>;\n /* Optional manual override for generated aria label /\n 'aria-label'?: string;\n}\n\n/* Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Number/utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAMzF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,~~CAUR~~;AAYD,eAAO,MAAM,iBAAiB,UACrB,MAAM,UACL,MAAM,uGAOX,KACD,wBAAwB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC/E,~~WAoCF~~,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,GAAG,MAAM,CAMzF;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAQR;AAYD,eAAO,MAAM,iBAAiB,UACrB,MAAM,UACL,MAAM,uGAOX,KACD,wBAAwB,EACxB,UAAU,GAAG,aAAa,GAAG,uBAAuB,GAAG,uBAAuB,CAC/E,WAqCF,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAEjF;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,UAI5F"}

package/lib/components/Number/utils.js CHANGED Viewed

@@ -13,10 +13,6 @@ export function getCleanedValue(value, decimalSign, maximumFractionDigits) {
     let rawValue = value.replace(new RegExp(`[^${decimalSign}\\d-]+`, 'gu'), '');
     if (decimalSign && decimalSign !== '.')
         rawValue = rawValue.replace(decimalSign, '.');
-    if (rawValue.startsWith('.'))
-        rawValue = `0${value}`;
-    if (rawValue.startsWith('-.'))
-        rawValue = `-0${value.substring(1)}`;
     const match = rawValue.match(new RegExp(`-?\\d*(\\.\\d{0,${maximumFractionDigits}})?`));
     if (match && match.length > 0) {
         rawValue = match[0];
@@ -39,7 +35,7 @@ export const getFormattedValue = (value, locale, unit, { notation = 'standard',
     const formatter = new Intl.NumberFormat(locale, {
         notation,
         useGrouping,
-        minimumFractionDigits,
+        minimumFractionDigits: minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),
         maximumFractionDigits,
         style: isUnit ? 'unit' : undefined,
         unit: isUnit ? unit : undefined

package/lib/components/Number/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,UAAU,cAAc,CAAC,MAAc,EAAE,OAAkC;IAC/E,OAAO,CACL,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;SACnC,aAAa,CAAC,GAAG,CAAC;SAClB,MAAM,CAAC,CAAC,IAAqC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAC9F,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3D,OAAO,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,KAAa,EACb,WAAmB,EACnB,qBAA6B;IAE7B,IAAI,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,KAAK,WAAW,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,IAAI,WAAW,IAAI,WAAW,KAAK,GAAG;QAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IACtF,~~IAAI,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC;QAAE,QAAQ,GAAG,IAAI,KAAK,EAAE,CAAC;IACrD,IAAI,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;QAAE,QAAQ,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACpE,~~MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,mBAAmB,qBAAqB,KAAK,CAAC,CAAC,CAAC;IACxF,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;QAC7B,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;KACrB;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE;IACnC,IAAI;QACF,kCAAkC;QAClC,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,CAAC;KACb;IAAC,MAAM;QACN,OAAO,KAAK,CAAC;KACd;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAa,EACb,MAAc,EACd,IAAa,EACb,EACE,QAAQ,GAAG,UAAU,EACrB,WAAW,GAAG,KAAK,EACnB,qBAAqB,EACrB,qBAAqB,KAInB,EAAE,EACN,EAAE;IACF,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAsB,CAAC;IAEzE,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QAC9C,QAAQ;QACR,WAAW;QACX,qBAAqB;~~QACrB~~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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(locale: string, options?: Intl.NumberFormatOptions): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value \|\| ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n ~~if (rawValue.startsWith('.')) rawValue = `0${value}`;\n if (rawValue.startsWith('-.')) rawValue = `-0${value.substring(1)}`;\n~~ const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' \| 'useGrouping' \| 'maximumFractionDigits' \| 'minimumFractionDigits'\n > = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits,\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined\n });\n\n let formatted = value;\n\n if (value && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = Number(endsWithDot ? `${value}1` : value);\n formatted =\n formatter.formatToParts(valueNumber).reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(value.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = value.startsWith('-') ? `- ${unit}` : unit;\n }\n return formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) \|\| (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number \| bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getDecimalSign(locale: string, options?: Intl.NumberFormatOptions): string {\n return (\n new Intl.NumberFormat(locale, options)\n .formatToParts(0.1)\n .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value \|\| ''\n );\n}\n\nexport function getFraction(value: string) {\n const decPos = value.indexOf('.');\n const substrLength = decPos === -1 ? value.length : decPos;\n return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n value: string,\n decimalSign: string,\n maximumFractionDigits: number\n): string {\n let rawValue = value.replace(new RegExp(`[^${decimalSign}\\\\d-]+`, 'gu'), '');\n if (decimalSign && decimalSign !== '.') rawValue = rawValue.replace(decimalSign, '.');\n const match = rawValue.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n if (match && match.length > 0) {\n rawValue = match[0];\n }\n return rawValue;\n}\n\nconst isValidUnit = (unit: string) => {\n try {\n // eslint-disable-next-line no-new\n new Intl.NumberFormat(undefined, { style: 'unit', unit });\n return true;\n } catch {\n return false;\n }\n};\n\nexport const getFormattedValue = (\n value: string,\n locale: string,\n unit?: string,\n {\n notation = 'standard',\n useGrouping = false,\n maximumFractionDigits,\n minimumFractionDigits\n }: Pick<\n Intl.NumberFormatOptions,\n 'notation' \| 'useGrouping' \| 'maximumFractionDigits' \| 'minimumFractionDigits'\n > = {}\n) => {\n const isUnit = unit ? isValidUnit(unit) : false;\n const [integer, fractionPart] = value.split('.', 2) as [string, string?];\n\n const formatter = new Intl.NumberFormat(locale, {\n notation,\n useGrouping,\n minimumFractionDigits:\n minimumFractionDigits ?? Math.min(maximumFractionDigits ?? 0, fractionPart?.length ?? 0),\n maximumFractionDigits,\n style: isUnit ? 'unit' : undefined,\n unit: isUnit ? unit : undefined\n });\n\n let formatted = value;\n\n if (value && !Number.isNaN(parseFloat(integer))) {\n const endsWithDot = fractionPart === '';\n const valueNumber = Number(endsWithDot ? `${value}1` : value);\n formatted =\n formatter.formatToParts(valueNumber).reduce((result, { type, value: part }) => {\n if (type === 'fraction' && endsWithDot) return result;\n return result + part;\n }, '') + (!isUnit && unit ? `\\u00a0${unit}` : '');\n } else if (unit) {\n if (isUnit)\n formatted = formatter\n .formatToParts(value.startsWith('-') ? -1 : 1)\n .reduce(\n (result, { type, value: part }) =>\n ['unit', 'minusSign'].includes(type) ? result + part : result,\n ''\n );\n else formatted = value.startsWith('-') ? `- ${unit}` : unit;\n }\n return formatted;\n};\n\nexport function isValueInRange(value: number, min?: number, max?: number): boolean {\n return !((min !== undefined && value < min) \|\| (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).plus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (min !== undefined && newValue.toNumber() < min) {\n return min.toString();\n }\n return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n const numberValue = parseFloat(value) \|\| 0;\n const newValue = new BigNumber(numberValue).minus(step);\n if (isValueInRange(newValue.toNumber(), min, max)) {\n return newValue.toFixed();\n }\n if (max !== undefined && newValue.toNumber() > max) {\n return max.toString();\n }\n return value;\n}\n\ninterface NumberFormatOptions {\n locale: string;\n options?: Intl.NumberFormatOptions;\n}\n\nexport function formatNumber(value: number \| bigint, { locale, options }: NumberFormatOptions) {\n const formatter = new Intl.NumberFormat(locale, options);\n\n return formatter.format(value);\n}\n"]}

package/lib/components/Phone/PhoneInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,~~CA+GjE~~,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAKf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,aAAa,CAAC;AAEzF,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAUrE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,SAAS,EAAE,cAAc;IAClF;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAwBD,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CA2HjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -31,7 +31,7 @@ const StyledPhoneInput = styled.div(() => {
 });
 StyledPhoneInput.defaultProps = defaultThemeProp;
 const PhoneInput = forwardRef((props, ref) => {
-    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, ...restProps } = props;
+    const { value, id, label, labelHidden, info, status, required, readOnly, disabled, showCountryCode = false, callingCodesList = callingCodes, onChange, onBlur, onFocus, onResolveSuggestion, ...restProps } = props;
     const [countryCode = callingCodesList[0], subscriberNumber = ''] = value
         ? getPhoneNumberParts(value, callingCodesList)
         : [];
@@ -56,8 +56,17 @@ const PhoneInput = forwardRef((props, ref) => {
     }, [countryCode]);
     const formatted = useInputFormatter(inputRef, subscriberNumber, formatter);
     const codesOptions = (_jsx(_Fragment, { children: callingCodesList.map(code => (_jsx(Option, { value: code, children: code }, code))) }));
-    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-country-code', children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-national' })] }));
-    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+    const Comp = (_jsxs(StyledPhoneInput, { as: StyledFormControl, forwardedAs: Flex, container: { alignItems: 'center', wrap: 'nowrap' }, ref: containerRef, status: status, readOnly: readOnly, disabled: disabled, children: [showCountryCode && (_jsx(Select, { value: countryCode, onChange: onSelectChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-country-code', hasSuggestion: status === 'pending' && !!onResolveSuggestion, children: codesOptions })), _jsx(Input, { ...restProps, inputMode: 'tel', ref: inputRef, value: formatted, onChange: onInputChange, required: required, status: status, readOnly: readOnly, disabled: disabled, autocomplete: 'tel-national', hasSuggestion: status === 'pending' && !!onResolveSuggestion })] }));
+    return label ? (_jsx(FormField, { as: 'fieldset', labelAs: 'legend', ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default PhoneInput;
 //# 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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~~YAE9B~~,YAAY,GACN,CACV,EACD,KAAC,KAAK,OACA,SAAS,EACb,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,cAAc,~~GAC3B~~,IACe,CACpB,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,KACZ,~~EAAE,~~KAAK,~~EAAE,~~WAAW,EAAE,~~EAAE,EAAE,~~IAAI,~~EAAE,~~MAAM,~~EAAE,~~QAAQ,~~EAAE,~~QAAQ,~~EAAE~~,~~YAE/D~~,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } 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';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\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}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n const { start, end } = useDirection();\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n ${`border-top-${end}-radius`}: 0;\n ${`border-bottom-${end}-radius`}: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n ${`border-top-${start}-radius`}: 0;\n ${`border-bottom-${start}-radius`}: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n const {\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 ...restProps\n } = props;\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);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [countryCode]\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 as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && (\n <Select\n value={countryCode}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-country-code'\n >\n {codesOptions}\n </Select>\n )}\n <Input\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-national'\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{ label, labelHidden, id, info, status, required, disabled }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default PhoneInput;\n"]}
1	+ {"version":3,"file":"PhoneInput.js","sourceRoot":"","sources":["../../../src/components/Phone/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,MAAM,EACP,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAClG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAsB7F,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAA8B,GAAG,EAAE;IACpE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,OAAO,GAAG,CAAA;;QAEJ,YAAY;;;QAGZ,cAAc,GAAG,SAAS;QAC1B,iBAAiB,GAAG,SAAS;;;QAG7B,YAAY,MAAM,WAAW;QAC7B,cAAc,KAAK,SAAS;QAC5B,iBAAiB,KAAK,SAAS;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,UAAU,GAAsD,UAAU,CAC9E,CAAC,KAAuC,EAAE,GAA2B,EAAE,EAAE;IACvE,MAAM,EACJ,KAAK,EACL,EAAE,EACF,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,gBAAgB,GAAG,YAAY,EAC/B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,mBAAmB,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,WAAW,GAAG,gBAAgB,CAAC,CAAC,CAAC,EAAE,gBAAgB,GAAG,EAAE,CAAC,GAAG,KAAK;QACtE,CAAC,CAAC,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,CAAC;QAC9C,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,aAAa,GAAG,CAAC,OAAgB,EAAE,EAAE;QACzC,MAAM,aAAa,GAAG,0BAA0B,CAAC,WAAW,EAAE,gBAAgB,CAAC,CAAC;QAChF,IAAI,OAAO;YAAE,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC;;YACjC,MAAM,EAAE,CAAC,aAAa,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAgC,EAAE,EAAE;QACzD,QAAQ,EAAE,CAAC,0BAA0B,CAAC,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAiC,EAAE,EAAE;QAC3D,QAAQ,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,kBAAkB,CAAmB,GAAG,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC/C,cAAc,CAAC,CAAC,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAG,WAAW,CAC3B,MAAM,CAAC,EAAE;QACP,OAAO,iBAAiB,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC;IACpE,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAE3E,MAAM,YAAY,GAAG,CACnB,4BACG,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC5B,KAAC,MAAM,IAAY,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACD,CACJ,CAAC;IAEF,MAAM,IAAI,GAAG,CACX,MAAC,gBAAgB,IACf,EAAE,EAAE,iBAAiB,EACrB,WAAW,EAAE,IAAW,EACxB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,EACnD,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,aAEjB,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,kBAAkB,EAC/B,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,YAE3D,YAAY,GACN,CACV,EACD,KAAC,KAAK,OACA,SAAS,EACb,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,cAAc,EAC3B,aAAa,EAAE,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,mBAAmB,GAC5D,IACe,CACpB,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,IACR,EAAE,EAAC,UAAU,EACb,OAAO,EAAC,QAAQ,KACZ;YACF,KAAK;YACL,WAAW;YACX,EAAE;YACF,IAAI;YACJ,MAAM;YACN,QAAQ;YACR,QAAQ;YACR,mBAAmB;SACpB,YAEA,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import {\n ChangeEvent,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n Ref,\n useCallback,\n useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useDirection, useFocusWithin, useInputFormatter } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp, PropsWithDefaults } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } 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';\n\nimport callingCodes from './callingCodes';\nimport { convertToCallbackParameter, formatPhoneNumber, getPhoneNumberParts } from './utils';\n\nexport interface PhoneInputProps extends FormControlProps, BaseProps, NoChildrenProp {\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}\n\ntype PhoneInputPropsWithDefaults = PropsWithDefaults<PhoneInputProps>;\n\nconst StyledPhoneInput = styled.div<PhoneInputPropsWithDefaults>(() => {\n const { start, end } = useDirection();\n return css`\n border: 0;\n > ${StyledSelect} {\n max-width: max-content;\n border-inline-end: none;\n ${`border-top-${end}-radius`}: 0;\n ${`border-bottom-${end}-radius`}: 0;\n }\n\n > ${StyledSelect} + ${StyledInput} {\n ${`border-top-${start}-radius`}: 0;\n ${`border-bottom-${start}-radius`}: 0;\n }\n `;\n});\n\nStyledPhoneInput.defaultProps = defaultThemeProp;\n\nconst PhoneInput: FunctionComponent<PhoneInputProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<PhoneInputProps>, ref: PhoneInputProps['ref']) => {\n const {\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 ...restProps\n } = props;\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);\n const containerRef = useRef<HTMLElement>(null);\n useFocusWithin([containerRef], onFocusChange);\n\n const formatter = useCallback(\n number => {\n return formatPhoneNumber(number.replace(/\\D+/g, ''), countryCode);\n },\n [countryCode]\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 as={StyledFormControl}\n forwardedAs={Flex as any}\n container={{ alignItems: 'center', wrap: 'nowrap' }}\n ref={containerRef}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n >\n {showCountryCode && (\n <Select\n value={countryCode}\n onChange={onSelectChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-country-code'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n >\n {codesOptions}\n </Select>\n )}\n <Input\n {...restProps}\n inputMode='tel'\n ref={inputRef}\n value={formatted}\n onChange={onInputChange}\n required={required}\n status={status}\n readOnly={readOnly}\n disabled={disabled}\n autocomplete='tel-national'\n hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n />\n </StyledPhoneInput>\n );\n\n return label ? (\n <FormField\n as='fieldset'\n labelAs='legend'\n {...{\n label,\n labelHidden,\n id,\n info,\n status,\n required,\n disabled,\n onResolveSuggestion\n }}\n >\n {Comp}\n </FormField>\n ) : (\n Comp\n );\n }\n);\n\nexport default PhoneInput;\n"]}

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

@@ -39,6 +39,11 @@ export interface SearchInputProps extends NoChildrenProp {
     advancedSearchLink?: OmitStrict<LinkProps, 'children'>;
     /** Aria label for search input, used by screen readers. */
     searchInputAriaLabel?: string;
+    /**
+     * Boolean for determining for whether the search results will render in a popover.
+     * @default true
+     */
+    resultsPopover?: boolean;
 }
 declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
 export default SearchInput;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;~~AAe1C~~,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;~~CAC/B~~;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CA2MnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAUlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,OAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAkB1C,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEpG,oBAAY,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAEtF,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,yEAAyE;IACzE,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;IAChC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,UAAU,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;IACvD,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -10,11 +10,11 @@ import Menu from '../Menu';
 import Link from '../Link';
 import Text from '../Text';
 import { createStringMatcher } from '../../utils';
-import { StyledCancelButton, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchTextInput } from './SearchInput.styles';
+import { StyledCancelButton, StyledFiltersPopover, StyledResultsPopover, StyledSearchButton, StyledSearchFilterText, StyledSearchInput, StyledSearchMenu, StyledSearchResultsContainer, StyledSearchTextInput } from './SearchInput.styles';
 registerIcon(searchIcon);
 const SearchInput = forwardRef((props, ref) => {
     const t = useI18n();
-    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, ...restProps } = props;
+    const { value = '', defaultFilter, filters, onFilterChange, searchResults, recentSearches, loading, advancedSearchLink, placeholder = t('search_placeholder_default'), onSearchChange, onSearchSubmit, searchInputAriaLabel, resultsPopover = true, ...restProps } = props;
     const inputRef = useConsolidatedRef(ref);
     const filterRef = useRef(null);
     const searchResultsRef = useRef(null);
@@ -57,6 +57,7 @@ const SearchInput = forwardRef((props, ref) => {
         }
         setSearchResultItems(items);
     }, [searchResults, recentSearches, searchMenuOpen, hasSearchResults, hasRecentSearches, value]);
+    const searchMenu = (_jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }));
     return (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: true, as: StyledSearchInput, hasFilters: hasFilters, children: [_jsxs(Flex, { as: StyledSearchButton, ref: filterRef, forwardedAs: hasFilters ? undefined : 'div', container: {
                             justify: 'center',
                             alignItems: 'center',
@@ -68,6 +69,8 @@ const SearchInput = forwardRef((props, ref) => {
                             else {
                                 inputRef.current?.focus();
                             }
+                        }, onBlur: () => {
+                            setFilterMenuOpen(false);
                         }, decoupled: hasFilters, "aria-label": hasFilters ? t('select_search_filter') : undefined, children: [_jsx(Icon, { name: 'search' }), selectedFilter && _jsx(StyledSearchFilterText, { children: selectedFilter }), hasFilters && _jsx(Icon, { name: 'arrow-micro-down' })] }), _jsx(StyledSearchTextInput, { ref: inputRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: value, onChange: (e) => onSearchChange?.(e.target.value), onKeyDown: onKeyDown, onFocus: () => setSearchMenuOpen(true), decoupled: hasFilters, onBlur: () => {
                             setDownPressed(false);
                             if (!advancedSearchLink) {
@@ -75,7 +78,7 @@ const SearchInput = forwardRef((props, ref) => {
                             }
                         } }), value && (_jsx(StyledCancelButton, { icon: true, onClick: () => {
                             onSearchChange?.('');
-                        }, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), (searchResultItems || loading) && (_jsx(Popover, { target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
+                        }, variant: 'text', tabIndex: -1, children: _jsx(Icon, { name: 'times' }) }))] }), resultsPopover && (searchResultItems || loading) && (_jsx(Popover, { as: StyledResultsPopover, target: inputRef.current, show: searchMenuOpen, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
@@ -85,12 +88,19 @@ const SearchInput = forwardRef((props, ref) => {
                     sameWidth
                 ], onBlur: () => {
                     setSearchMenuOpen(false);
-                }, ref: searchResultsRef, children: _jsx(Menu, { as: StyledSearchMenu, header: recentSearches && !value ? (_jsx(Text, { variant: 'secondary', children: t('recent_searches') })) : undefined, mode: 'action', items: searchResultItems ?? [], loading: hasRecentSearches && !value ? false : loading, footer: advancedSearchLink ? (_jsx(Link, { ...advancedSearchLink, children: t('advanced_search') })) : undefined, accent: hasSearchResults ? createStringMatcher(value, undefined, 'gi') : undefined, focusControlEl: (downPressed && inputRef.current) || undefined, focusElOnClose: true }) })), hasFilters ? (_jsx(Popover, { target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
+                }, ref: searchResultsRef, children: searchMenu })), !resultsPopover && (searchResultItems || loading) && (_jsx(StyledSearchResultsContainer, { children: searchMenu })), hasFilters ? (_jsx(Popover, { as: StyledFiltersPopover, target: filterRef.current, show: filterMenuOpen, placement: 'bottom-start', modifiers: [
                     {
                         name: 'flip',
                         options: {
                             fallbackPlacements: ['top-start']
                         }
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            mainAxis: false,
+                            altAxis: true
+                        }
                     }
                 ], children: _jsx(Menu, { mode: 'single-select', items: completeFilters.map(filter => ({
                         primary: filter,