@hh.ru/magritte-ui-input 7.3.0 → 8.0.0

package/BaseInput.js

@@ -12,7 +12,7 @@ import { useFocus } from './useFocus.js';
 import { useInputAriaProps } from './useInputAriaProps.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"input":"magritte-input___LVTID_7-3-0","label":"magritte-label___YlOQk_7-3-0","elevated":"magritte-elevated___kPcsM_7-3-0","focused":"magritte-focused___dxrHD_7-3-0","invalid":"magritte-invalid___L5MVa_7-3-0","disabled":"magritte-disabled___0NH6E_7-3-0","position-container":"magritte-position-container___kZnvZ_7-3-0","positionContainer":"magritte-position-container___kZnvZ_7-3-0","field":"magritte-field___9S8Tw_7-3-0","hint":"magritte-hint___EFGK0_7-3-0","additional-value":"magritte-additional-value___9Kyap_7-3-0","additionalValue":"magritte-additional-value___9Kyap_7-3-0","label_elevated":"magritte-label_elevated___PVcpC_7-3-0","labelElevated":"magritte-label_elevated___PVcpC_7-3-0","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_7-3-0","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_7-3-0","icon":"magritte-icon___HEDsQ_7-3-0","focus-visible":"magritte-focus-visible___QvCO1_7-3-0","focusVisible":"magritte-focus-visible___QvCO1_7-3-0","right-container":"magritte-right-container___N0B0o_7-3-0","rightContainer":"magritte-right-container___N0B0o_7-3-0","with-icon":"magritte-with-icon___TPBe2_7-3-0","withIcon":"magritte-with-icon___TPBe2_7-3-0","large":"magritte-large___9frRh_7-3-0","small":"magritte-small___iQL4F_7-3-0","autofill-helper":"magritte-autofill-helper___WFjOW_7-3-0","autofillHelper":"magritte-autofill-helper___WFjOW_7-3-0","content-container":"magritte-content-container___s-0kX_7-3-0","contentContainer":"magritte-content-container___s-0kX_7-3-0","rigging-container":"magritte-rigging-container___Up9Lb_7-3-0","riggingContainer":"magritte-rigging-container___Up9Lb_7-3-0","input__mask":"magritte-input__mask___CHda2_7-3-0","inputMask":"magritte-input__mask___CHda2_7-3-0","value-ghost":"magritte-value-ghost___IXNZj_7-3-0","valueGhost":"magritte-value-ghost___IXNZj_7-3-0","hint-container":"magritte-hint-container___rGsD8_7-3-0","hintContainer":"magritte-hint-container___rGsD8_7-3-0","counter":"magritte-counter___Bld3Q_7-3-0","value-container":"magritte-value-container___6ReT7_7-3-0","valueContainer":"magritte-value-container___6ReT7_7-3-0"};
+var styles = {"input":"magritte-input___LVTID_8-0-0","label":"magritte-label___YlOQk_8-0-0","elevated":"magritte-elevated___kPcsM_8-0-0","focused":"magritte-focused___dxrHD_8-0-0","invalid":"magritte-invalid___L5MVa_8-0-0","disabled":"magritte-disabled___0NH6E_8-0-0","position-container":"magritte-position-container___kZnvZ_8-0-0","positionContainer":"magritte-position-container___kZnvZ_8-0-0","field":"magritte-field___9S8Tw_8-0-0","hint":"magritte-hint___EFGK0_8-0-0","additional-value":"magritte-additional-value___9Kyap_8-0-0","additionalValue":"magritte-additional-value___9Kyap_8-0-0","label_elevated":"magritte-label_elevated___PVcpC_8-0-0","labelElevated":"magritte-label_elevated___PVcpC_8-0-0","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_8-0-0","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_8-0-0","icon":"magritte-icon___HEDsQ_8-0-0","focus-visible":"magritte-focus-visible___QvCO1_8-0-0","focusVisible":"magritte-focus-visible___QvCO1_8-0-0","right-container":"magritte-right-container___N0B0o_8-0-0","rightContainer":"magritte-right-container___N0B0o_8-0-0","with-icon":"magritte-with-icon___TPBe2_8-0-0","withIcon":"magritte-with-icon___TPBe2_8-0-0","large":"magritte-large___9frRh_8-0-0","small":"magritte-small___iQL4F_8-0-0","autofill-helper":"magritte-autofill-helper___WFjOW_8-0-0","autofillHelper":"magritte-autofill-helper___WFjOW_8-0-0","content-container":"magritte-content-container___s-0kX_8-0-0","contentContainer":"magritte-content-container___s-0kX_8-0-0","rigging-container":"magritte-rigging-container___Up9Lb_8-0-0","riggingContainer":"magritte-rigging-container___Up9Lb_8-0-0","input__mask":"magritte-input__mask___CHda2_8-0-0","inputMask":"magritte-input__mask___CHda2_8-0-0","value-ghost":"magritte-value-ghost___IXNZj_8-0-0","valueGhost":"magritte-value-ghost___IXNZj_8-0-0","hint-container":"magritte-hint-container___rGsD8_8-0-0","hintContainer":"magritte-hint-container___rGsD8_8-0-0","counter":"magritte-counter___Bld3Q_8-0-0","value-container":"magritte-value-container___6ReT7_8-0-0","valueContainer":"magritte-value-container___6ReT7_8-0-0"};
 
 const matchIconSize = (size, icon) => {
     return icon &&
@@ -21,6 +21,18 @@ const matchIconSize = (size, icon) => {
         ? icon
         : null;
 };
+// В safari при вставке числа и последующем его стирании задваивалась каретка если использовалась groupSize = 0
+// Это происходило только после вставки из буфера
+// каретка возвращалась на место если стриггерить setCaretPosition повторно
+// Запуск сдвига дважды фиксит эту проблему
+const setCaretPosition = (el, position) => {
+    requestAnimationFrame(() => {
+        Selection.setCaretPosition(el, position);
+        requestAnimationFrame(() => {
+            Selection.setCaretPosition(el, position);
+        });
+    });
+};
 const BaseInputForwardRefRenderFunc = ({ onChange, onFocus, onBlur, value, placeholder, disabled = false, postfix, size = 'medium', elevatePlaceholder = false, invalid = false, description, errorMessage, formatter, buttonIcon: _buttonIcon, clearable = false, clearableOnFocus, onButtonClick, buttonDataQa, buttonRef, inputIcon, wrapperRef, fixedPlaceholder, maxLength, hint, showHintAlways = false, ...restProps }, ref) => {
     const wrapperCurrentRef = useRef(null);
     const inputRef = useRef(null);
@@ -35,11 +47,7 @@ const BaseInputForwardRefRenderFunc = ({ onChange, onFocus, onBlur, value, place
         if (inputRef.current && formatter) {
             const caretPosition = Selection.getCaretPosition(inputRef.current);
             const formatResult = formatter(value, newValue, caretPosition || 0);
-            requestAnimationFrame(() => {
-                if (inputRef.current) {
-                    Selection.setCaretPosition(inputRef.current, formatResult.caretPosition);
-                }
-            });
+            setCaretPosition(inputRef.current, formatResult.caretPosition);
             onChange(formatResult.outputValue, event);
             return;
         }
@@ -132,7 +140,10 @@ const BaseInputForwardRefRenderFunc = ({ onChange, onFocus, onBlur, value, place
             [styles.withIcon]: !!inputIcon,
         }), onFocus: clearableOnFocus ? handleWrapperFocus : undefined, onBlur: clearableOnFocus ? handleWrapperBlur : undefined, onClick: onClickWrapper, "data-interactive": true, children: [jsxs("div", { className: styles.positionContainer, children: [jsxs("div", { className: styles.hintContainer, children: [jsx("div", { className: styles.autofillHelper }), jsxs("div", { className: styles.contentContainer, children: [!!InputIconComponent && (jsx("div", { className: styles.icon, children: jsx(InputIconComponent, {}) })), jsx("div", { className: styles.riggingContainer, children: showLabel && (jsx("label", { className: classnames(styles.label, {
                                                 [styles.labelElevated]: placeholderIsElevated,
-                                            }), id: ariaProps['aria-labelledby'], children: placeholder })) }), jsxs("div", { className: styles.valueContainer, children: [jsx("input", { ...restProps, ...ariaProps, maxLength: maxLength, disabled: isComponentDisabled, suppressHydrationWarning: true, className: styles.field, value: currentValue, onInput: changeHandler, onFocus: focusHandler, onBlur: blurHandler, ref: inputRefCallback }), jsx("div", { className: styles.additionalValue, children: jsxs(Text, { Element: "span", typography: size === 'small' ? 'label-3-regular' : 'label-2-regular', children: [jsx("span", { className: styles.valueGhost, children: currentValue }), showFixedPlaceholder && (jsx("span", { className: styles.fixedPlaceholder, children: fixedPlaceholder.slice(value.length) })), showPostfix && (jsxs(Fragment, { children: ['\u00A0', postfix] }))] }) })] })] }), showHint && (jsx("div", { className: styles.hint, ref: hintWrapperRefCallback, "data-qa": "input-hint", children: jsx(Text, { Element: "span", typography: size === 'small' ? 'label-4-regular' : 'label-3-regular', children: jsx("span", { ref: hintRef, children: hint }) }) }))] }), IconComponent && (jsx("div", { className: styles.rightContainer, children: jsx(IconComponent, { padding: 8, initialColor: "secondary", borderRadius: "halfHeight", "data-qa": buttonQaLabel, onMouseDown: (event) => event.preventDefault(), onClick: showClearButton ? clearClickHandler : onButtonClick, disabled: isComponentDisabled, ref: buttonRef }) }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalid })] }));
+                                            }), id: ariaProps['aria-labelledby'], children: placeholder })) }), jsxs("div", { className: styles.valueContainer, children: [jsx("input", { ...restProps, ...ariaProps, maxLength: maxLength, disabled: isComponentDisabled, suppressHydrationWarning: true, className: styles.field, value: currentValue, 
+                                                // maskito требует onInput, (https://maskito.dev/frameworks/react) который работает
+                                                // аналогично onChange
+                                                onInput: changeHandler, onFocus: focusHandler, onBlur: blurHandler, ref: inputRefCallback }), jsx("div", { className: styles.additionalValue, children: jsxs(Text, { Element: "span", typography: size === 'small' ? 'label-3-regular' : 'label-2-regular', children: [jsx("span", { className: styles.valueGhost, children: currentValue }), showFixedPlaceholder && (jsx("span", { className: styles.fixedPlaceholder, children: fixedPlaceholder.slice(value.length) })), showPostfix && (jsxs(Fragment, { children: ['\u00A0', postfix] }))] }) })] })] }), showHint && (jsx("div", { className: styles.hint, ref: hintWrapperRefCallback, "data-qa": "input-hint", children: jsx(Text, { Element: "span", typography: size === 'small' ? 'label-4-regular' : 'label-3-regular', children: jsx("span", { ref: hintRef, children: hint }) }) }))] }), IconComponent && (jsx("div", { className: styles.rightContainer, children: jsx(IconComponent, { padding: 8, initialColor: "secondary", borderRadius: "halfHeight", "data-qa": buttonQaLabel, onMouseDown: (event) => event.preventDefault(), onClick: showClearButton ? clearClickHandler : onButtonClick, disabled: isComponentDisabled, ref: buttonRef }) }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalid })] }));
 };
 const BaseInput = forwardRef(BaseInputForwardRefRenderFunc);
 BaseInput.displayName = 'BaseInput';

package/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../src/BaseInput.tsx"],"sourcesContent":["import {\n    InputHTMLAttributes,\n    forwardRef,\n    ForwardedRef,\n    useCallback,\n    useId,\n    useRef,\n    useState,\n    useEffect,\n    RefCallback,\n    MouseEventHandler,\n    ChangeEvent,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { CrossOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { IconWrapperComponentSize16, IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon/src/iconTypes';\nimport { BaseInputProps, InputSize } from '@hh.ru/magritte-ui-input/types';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './input.less';\n\nconst matchIconSize = (size: InputSize, icon: IconWrapperComponentSize16 | IconWrapperComponentSize24 | undefined) => {\n    return icon &&\n        (((size === 'medium' || size === 'large') && (icon as IconWrapperComponentSize24)._size === 24) ||\n            (size === 'small' && (icon as IconWrapperComponentSize16)._size === 16))\n        ? icon\n        : null;\n};\n\nconst BaseInputForwardRefRenderFunc = (\n    {\n        onChange,\n        onFocus,\n        onBlur,\n        value,\n        placeholder,\n        disabled = false,\n        postfix,\n        size = 'medium',\n        elevatePlaceholder = false,\n        invalid = false,\n        description,\n        errorMessage,\n        formatter,\n        buttonIcon: _buttonIcon,\n        clearable = false,\n        clearableOnFocus,\n        onButtonClick,\n        buttonDataQa,\n        buttonRef,\n        inputIcon,\n        wrapperRef,\n        fixedPlaceholder,\n        maxLength,\n        hint,\n        showHintAlways = false,\n        ...restProps\n    }: BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputProps>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const wrapperCurrentRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isActionVisible, setActionVisible] = useState(false);\n    const inputRefCallback = useMultipleRefs(ref, inputRef);\n    const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);\n    const descriptionId = useId();\n    const labelId = useId();\n    const hintRef = useRef<HTMLDivElement>(null);\n    const hintMaxWidthRef = useRef<{ width: number; text: string } | null>(null);\n    const change = useCallback(\n        (newValue: string, event: ChangeEvent<HTMLInputElement>) => {\n            if (inputRef.current && formatter) {\n                const caretPosition = Selection.getCaretPosition(inputRef.current);\n                const formatResult = formatter(value, newValue, caretPosition || 0);\n                requestAnimationFrame(() => {\n                    if (inputRef.current) {\n                        Selection.setCaretPosition(inputRef.current, formatResult.caretPosition);\n                    }\n                });\n                onChange(formatResult.outputValue, event);\n                return;\n            }\n            onChange(newValue, event);\n        },\n        [formatter, onChange, value, inputRef]\n    );\n\n    const clearClickHandler = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n            onChange('');\n            inputRef.current && inputRef.current.focus();\n            onButtonClick?.(event);\n        },\n        [onChange, inputRef, onButtonClick]\n    );\n\n    const forceDisabled = useDisabled();\n    const isComponentDisabled = forceDisabled || !!disabled;\n\n    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);\n    const placeholderCanBeElevated = size === 'large' && !!elevatePlaceholder && !!placeholder;\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const currentValue = formatter?.('', value, 0).formattedValue || value;\n    const buttonQaLabel = buttonDataQa || `input-${clearable ? 'clearable-' : ''}button`;\n    const ariaProps = useInputAriaProps({\n        invalid,\n        hasDescription: !!description,\n        hasPlaceholder: !!placeholder,\n        descriptionId,\n        labelId,\n    });\n\n    const handleWrapperFocus = () => {\n        setActionVisible(true);\n    };\n\n    const handleWrapperBlur = () => {\n        requestAnimationFrame(() => {\n            if (!wrapperCurrentRef.current?.contains(document.activeElement)) {\n                setActionVisible(false);\n            }\n        });\n    };\n\n    const onClickWrapper: MouseEventHandler = (e) => {\n        if (!isEventFromInteractiveComponent(e)) {\n            inputRef.current?.focus();\n        }\n    };\n\n    const focusedOrFilled = isFocused || value !== '';\n    const placeholderIsElevated = focusedOrFilled && placeholderCanBeElevated;\n    const showPostfix = !!postfix && (placeholderIsElevated || value !== '');\n    const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;\n    const showLabel = placeholderCanBeElevated || (value === '' && !showFixedPlaceholder);\n\n    const InputIconComponent = matchIconSize(size, inputIcon);\n    const showClearButton = value.length > 0 && (clearable || (!!clearableOnFocus && isActionVisible));\n    const showHint = !!hint && (showHintAlways || value.length > 0);\n    const buttonIcon = matchIconSize(size, _buttonIcon);\n    let IconComponent = buttonIcon;\n    if (showClearButton) {\n        IconComponent = size === 'small' ? CrossOutlinedSize16 : CrossOutlinedSize24;\n    }\n\n    const hintWrapperRefCallback: RefCallback<HTMLDivElement> = useCallback(\n        (element) => {\n            if (element && hintRef.current) {\n                const text = hintRef.current.innerText;\n                if (text.length > 30) {\n                    let maxWidth;\n                    if (text !== hintMaxWidthRef.current?.text) {\n                        const newText = text.slice(0, 30);\n                        hintRef.current.innerText = newText;\n                        maxWidth = hintRef.current.offsetWidth;\n                        hintRef.current.innerText = text;\n                        hintMaxWidthRef.current = {\n                            width: maxWidth,\n                            text,\n                        };\n                    } else {\n                        maxWidth = hintMaxWidthRef.current.width;\n                    }\n\n                    element.style.maxWidth = `${maxWidth}px`;\n                }\n            }\n        },\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n        [hint]\n    );\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    return (\n        <div\n            ref={wrapperRefCallback}\n            className={classnames(styles.input, {\n                [styles.focused]: isFocused,\n                [styles.focusVisible]: isFocusVisible,\n                [styles.disabled]: isComponentDisabled,\n                [styles.large]: size === 'large',\n                [styles.small]: size === 'small',\n                [styles.elevated]: placeholderCanBeElevated,\n                [styles.invalid]: !!invalid,\n                [styles.withIcon]: !!inputIcon,\n            })}\n            onFocus={clearableOnFocus ? handleWrapperFocus : undefined}\n            onBlur={clearableOnFocus ? handleWrapperBlur : undefined}\n            onClick={onClickWrapper}\n            data-interactive={true}\n        >\n            <div className={styles.positionContainer}>\n                <div className={styles.hintContainer}>\n                    <div className={styles.autofillHelper} />\n                    <div className={styles.contentContainer}>\n                        {!!InputIconComponent && (\n                            <div className={styles.icon}>\n                                <InputIconComponent />\n                            </div>\n                        )}\n                        <div className={styles.riggingContainer}>\n                            {showLabel && (\n                                <label\n                                    className={classnames(styles.label, {\n                                        [styles.labelElevated]: placeholderIsElevated,\n                                    })}\n                                    id={ariaProps['aria-labelledby']}\n                                >\n                                    {placeholder}\n                                </label>\n                            )}\n                        </div>\n                        <div className={styles.valueContainer}>\n                            <input\n                                {...restProps}\n                                {...ariaProps}\n                                maxLength={maxLength}\n                                disabled={isComponentDisabled}\n                                suppressHydrationWarning\n                                className={styles.field}\n                                value={currentValue}\n                                onInput={changeHandler} // maskito требует onInput, (https://maskito.dev/frameworks/react) который работает аналогично onChange\n                                onFocus={focusHandler}\n                                onBlur={blurHandler}\n                                ref={inputRefCallback}\n                            />\n                            <div className={styles.additionalValue}>\n                                <Text\n                                    Element=\"span\"\n                                    typography={size === 'small' ? 'label-3-regular' : 'label-2-regular'}\n                                >\n                                    <span className={styles.valueGhost}>{currentValue}</span>\n                                    {showFixedPlaceholder && (\n                                        <span className={styles.fixedPlaceholder}>\n                                            {fixedPlaceholder.slice(value.length)}\n                                        </span>\n                                    )}\n                                    {showPostfix && (\n                                        <>\n                                            {'\\u00A0'}\n                                            {postfix}\n                                        </>\n                                    )}\n                                </Text>\n                            </div>\n                        </div>\n                    </div>\n                    {showHint && (\n                        <div className={styles.hint} ref={hintWrapperRefCallback} data-qa=\"input-hint\">\n                            <Text Element=\"span\" typography={size === 'small' ? 'label-4-regular' : 'label-3-regular'}>\n                                <span ref={hintRef}>{hint}</span>\n                            </Text>\n                        </div>\n                    )}\n                </div>\n                {IconComponent && (\n                    <div className={styles.rightContainer}>\n                        <IconComponent\n                            padding={8}\n                            initialColor=\"secondary\"\n                            borderRadius=\"halfHeight\"\n                            data-qa={buttonQaLabel}\n                            onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n                            onClick={showClearButton ? clearClickHandler : (onButtonClick as () => void)}\n                            disabled={isComponentDisabled}\n                            ref={buttonRef}\n                        />\n                    </div>\n                )}\n            </div>\n            <FormHelper\n                description={description}\n                errorMessage={errorMessage}\n                descriptionId={ariaProps['aria-describedby']}\n                disabled={isComponentDisabled}\n                invalid={invalid}\n            />\n        </div>\n    );\n};\n\nconst BaseInput = forwardRef(BaseInputForwardRefRenderFunc);\n\nBaseInput.displayName = 'BaseInput';\n\nexport { BaseInput };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,aAAa,GAAG,CAAC,IAAe,EAAE,IAAyE,KAAI;AACjH,IAAA,OAAO,IAAI;AACP,SAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,OAAO,KAAM,IAAmC,CAAC,KAAK,KAAK,EAAE;aACzF,IAAI,KAAK,OAAO,IAAK,IAAmC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;AAC5E,UAAE,IAAI;UACJ,IAAI,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,CAClC,EACI,QAAQ,EACR,OAAO,EACP,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,kBAAkB,GAAG,KAAK,EAC1B,OAAO,GAAG,KAAK,EACf,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EAAE,WAAW,EACvB,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,IAAI,EACJ,cAAc,GAAG,KAAK,EACtB,GAAG,SAAS,EACqE,EACrF,GAAmC,KACnC;AACA,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,eAAe,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;AAC1E,IAAA,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;AAC9B,IAAA,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;AACxB,IAAA,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAC7C,IAAA,MAAM,eAAe,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;IAC7E,MAAM,MAAM,GAAG,WAAW,CACtB,CAAC,QAAgB,EAAE,KAAoC,KAAI;AACvD,QAAA,IAAI,QAAQ,CAAC,OAAO,IAAI,SAAS,EAAE;YAC/B,MAAM,aAAa,GAAG,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACnE,YAAA,MAAM,YAAY,GAAG,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,IAAI,CAAC,CAAC,CAAC;YACpE,qBAAqB,CAAC,MAAK;AACvB,gBAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;oBAClB,SAAS,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,aAAa,CAAC,CAAC;iBAC5E;AACL,aAAC,CAAC,CAAC;AACH,YAAA,QAAQ,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;YAC1C,OAAO;SACV;AACD,QAAA,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;KAC7B,EACD,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CACzC,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,KAAsD,KAAI;QACvD,QAAQ,CAAC,EAAE,CAAC,CAAC;QACb,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;AAC7C,QAAA,aAAa,GAAG,KAAK,CAAC,CAAC;KAC1B,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CACtC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,mBAAmB,GAAG,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC;AAExD,IAAA,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AAClG,IAAA,MAAM,wBAAwB,GAAG,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,WAAW,CAAC;IAC3F,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,YAAY,GAAG,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,KAAK,CAAC;AACvE,IAAA,MAAM,aAAa,GAAG,YAAY,IAAI,SAAS,SAAS,GAAG,YAAY,GAAG,EAAE,QAAQ,CAAC;IACrF,MAAM,SAAS,GAAG,iBAAiB,CAAC;QAChC,OAAO;QACP,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,cAAc,EAAE,CAAC,CAAC,WAAW;QAC7B,aAAa;QACb,OAAO;AACV,KAAA,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,MAAK;QAC5B,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,MAAK;QAC3B,qBAAqB,CAAC,MAAK;AACvB,YAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;gBAC9D,gBAAgB,CAAC,KAAK,CAAC,CAAC;aAC3B;AACL,SAAC,CAAC,CAAC;AACP,KAAC,CAAC;AAEF,IAAA,MAAM,cAAc,GAAsB,CAAC,CAAC,KAAI;AAC5C,QAAA,IAAI,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE;AACrC,YAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAC7B;AACL,KAAC,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,SAAS,IAAI,KAAK,KAAK,EAAE,CAAC;AAClD,IAAA,MAAM,qBAAqB,GAAG,eAAe,IAAI,wBAAwB,CAAC;AAC1E,IAAA,MAAM,WAAW,GAAG,CAAC,CAAC,OAAO,KAAK,qBAAqB,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC;AACzE,IAAA,MAAM,oBAAoB,GAAG,eAAe,IAAI,CAAC,CAAC,gBAAgB,CAAC;AACnE,IAAA,MAAM,SAAS,GAAG,wBAAwB,KAAK,KAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAEtF,MAAM,kBAAkB,GAAG,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAC1D,IAAA,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,SAAS,KAAK,CAAC,CAAC,gBAAgB,IAAI,eAAe,CAAC,CAAC,CAAC;AACnG,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,KAAK,cAAc,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACpD,IAAI,aAAa,GAAG,UAAU,CAAC;IAC/B,IAAI,eAAe,EAAE;AACjB,QAAA,aAAa,GAAG,IAAI,KAAK,OAAO,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;KAChF;AAED,IAAA,MAAM,sBAAsB,GAAgC,WAAW,CACnE,CAAC,OAAO,KAAI;AACR,QAAA,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,EAAE;AAC5B,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC;AACvC,YAAA,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EAAE;AAClB,gBAAA,IAAI,QAAQ,CAAC;gBACb,IAAI,IAAI,KAAK,eAAe,CAAC,OAAO,EAAE,IAAI,EAAE;oBACxC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAClC,oBAAA,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;AACpC,oBAAA,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC;AACvC,oBAAA,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;oBACjC,eAAe,CAAC,OAAO,GAAG;AACtB,wBAAA,KAAK,EAAE,QAAQ;wBACf,IAAI;qBACP,CAAC;iBACL;qBAAM;AACH,oBAAA,QAAQ,GAAG,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC;iBAC5C;gBAED,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAG,EAAA,QAAQ,IAAI,CAAC;aAC5C;SACJ;KACJ;;IAED,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AAClB,YAAA,eAAe,CAAC,SAAS,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC;SACtF;AACL,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEhB,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS;AAC3B,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,cAAc;AACrC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,mBAAmB;AACtC,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,KAAK,OAAO;AAChC,YAAA,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,KAAK,OAAO;AAChC,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,wBAAwB;AAC3C,YAAA,CAAC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO;AAC3B,YAAA,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,gBAAgB,GAAG,kBAAkB,GAAG,SAAS,EAC1D,MAAM,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,SAAS,EACxD,OAAO,EAAE,cAAc,EAAA,kBAAA,EACL,IAAI,EAEtB,QAAA,EAAA,CAAAA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAA,QAAA,EAAA,CACpCA,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAChC,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,GAAI,EACzCD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAAA,CAClC,CAAC,CAAC,kBAAkB,KACjBC,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EACvB,QAAA,EAAAA,GAAA,CAAC,kBAAkB,EAAG,EAAA,CAAA,EAAA,CACpB,CACT,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EAClC,SAAS,KACNA,eACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE;AAChC,gDAAA,CAAC,MAAM,CAAC,aAAa,GAAG,qBAAqB;AAChD,6CAAA,CAAC,EACF,EAAE,EAAE,SAAS,CAAC,iBAAiB,CAAC,EAAA,QAAA,EAE/B,WAAW,EAAA,CACR,CACX,EAAA,CACC,EACND,IAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EACjC,QAAA,EAAA,CAAAC,GAAA,CAAA,OAAA,EAAA,EAAA,GACQ,SAAS,EAAA,GACT,SAAS,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,mBAAmB,EAC7B,wBAAwB,EACxB,IAAA,EAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,gBAAgB,EACvB,CAAA,EACFA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,eAAe,EAAA,QAAA,EAClCD,IAAC,CAAA,IAAI,EACD,EAAA,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,EAAA,QAAA,EAAA,CAEpEC,cAAM,SAAS,EAAE,MAAM,CAAC,UAAU,EAAA,QAAA,EAAG,YAAY,EAAA,CAAQ,EACxD,oBAAoB,KACjBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,EAAA,QAAA,EACnC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAA,CAClC,CACV,EACA,WAAW,KACRD,IAAA,CAAAE,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,QAAQ,EACR,OAAO,CACT,EAAA,CAAA,CACN,CACE,EAAA,CAAA,EAAA,CACL,CACJ,EAAA,CAAA,CAAA,EAAA,CACJ,EACL,QAAQ,KACLD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,sBAAsB,EAAA,SAAA,EAAU,YAAY,EAAA,QAAA,EAC1EA,IAAC,IAAI,EAAA,EAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,iBAAiB,GAAG,iBAAiB,EAAA,QAAA,EACrFA,GAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,OAAO,EAAG,QAAA,EAAA,IAAI,EAAQ,CAAA,EAAA,CAC9B,EACL,CAAA,CACT,CACC,EAAA,CAAA,EACL,aAAa,KACVA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,cAAc,EACjC,QAAA,EAAAA,GAAA,CAAC,aAAa,EACV,EAAA,OAAO,EAAE,CAAC,EACV,YAAY,EAAC,WAAW,EACxB,YAAY,EAAC,YAAY,EAAA,SAAA,EAChB,aAAa,EACtB,WAAW,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,EAC9C,OAAO,EAAE,eAAe,GAAG,iBAAiB,GAAI,aAA4B,EAC5E,QAAQ,EAAE,mBAAmB,EAC7B,GAAG,EAAE,SAAS,EAChB,CAAA,EAAA,CACA,CACT,CAAA,EAAA,CACC,EACNA,GAAA,CAAC,UAAU,EAAA,EACP,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,SAAS,CAAC,kBAAkB,CAAC,EAC5C,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,OAAO,EAClB,CAAA,CAAA,EAAA,CACA,EACR;AACN,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,UAAU,CAAC,6BAA6B,EAAE;AAE5D,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}
+{"version":3,"file":"BaseInput.js","sources":["../src/BaseInput.tsx"],"sourcesContent":["import {\n    InputHTMLAttributes,\n    forwardRef,\n    ForwardedRef,\n    useCallback,\n    useId,\n    useRef,\n    useState,\n    useEffect,\n    RefCallback,\n    MouseEventHandler,\n    ChangeEvent,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';\nimport { Selection } from '@hh.ru/magritte-common-text-selection';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { CrossOutlinedSize16, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { IconWrapperComponentSize16, IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon/src/iconTypes';\nimport { BaseInputProps, InputSize } from '@hh.ru/magritte-ui-input/types';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { useInputAriaProps } from '@hh.ru/magritte-ui-input/useInputAriaProps';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './input.less';\n\nconst matchIconSize = (size: InputSize, icon: IconWrapperComponentSize16 | IconWrapperComponentSize24 | undefined) => {\n    return icon &&\n        (((size === 'medium' || size === 'large') && (icon as IconWrapperComponentSize24)._size === 24) ||\n            (size === 'small' && (icon as IconWrapperComponentSize16)._size === 16))\n        ? icon\n        : null;\n};\n\n// В safari при вставке числа и последующем его стирании задваивалась каретка если использовалась groupSize = 0\n// Это происходило только после вставки из буфера\n// каретка возвращалась на место если стриггерить setCaretPosition повторно\n// Запуск сдвига дважды фиксит эту проблему\nconst setCaretPosition = (el: HTMLInputElement, position: number) => {\n    requestAnimationFrame(() => {\n        Selection.setCaretPosition(el, position);\n        requestAnimationFrame(() => {\n            Selection.setCaretPosition(el, position);\n        });\n    });\n};\n\nconst BaseInputForwardRefRenderFunc = (\n    {\n        onChange,\n        onFocus,\n        onBlur,\n        value,\n        placeholder,\n        disabled = false,\n        postfix,\n        size = 'medium',\n        elevatePlaceholder = false,\n        invalid = false,\n        description,\n        errorMessage,\n        formatter,\n        buttonIcon: _buttonIcon,\n        clearable = false,\n        clearableOnFocus,\n        onButtonClick,\n        buttonDataQa,\n        buttonRef,\n        inputIcon,\n        wrapperRef,\n        fixedPlaceholder,\n        maxLength,\n        hint,\n        showHintAlways = false,\n        ...restProps\n    }: BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof BaseInputProps>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const wrapperCurrentRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [isActionVisible, setActionVisible] = useState(false);\n    const inputRefCallback = useMultipleRefs(ref, inputRef);\n    const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);\n    const descriptionId = useId();\n    const labelId = useId();\n    const hintRef = useRef<HTMLDivElement>(null);\n    const hintMaxWidthRef = useRef<{ width: number; text: string } | null>(null);\n    const change = useCallback(\n        (newValue: string, event: ChangeEvent<HTMLInputElement>) => {\n            if (inputRef.current && formatter) {\n                const caretPosition = Selection.getCaretPosition(inputRef.current);\n                const formatResult = formatter(value, newValue, caretPosition || 0);\n                setCaretPosition(inputRef.current, formatResult.caretPosition);\n                onChange(formatResult.outputValue, event);\n                return;\n            }\n            onChange(newValue, event);\n        },\n        [formatter, onChange, value, inputRef]\n    );\n\n    const clearClickHandler = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n            onChange('');\n            inputRef.current && inputRef.current.focus();\n            onButtonClick?.(event);\n        },\n        [onChange, inputRef, onButtonClick]\n    );\n\n    const forceDisabled = useDisabled();\n    const isComponentDisabled = forceDisabled || !!disabled;\n\n    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);\n    const placeholderCanBeElevated = size === 'large' && !!elevatePlaceholder && !!placeholder;\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const currentValue = formatter?.('', value, 0).formattedValue || value;\n    const buttonQaLabel = buttonDataQa || `input-${clearable ? 'clearable-' : ''}button`;\n    const ariaProps = useInputAriaProps({\n        invalid,\n        hasDescription: !!description,\n        hasPlaceholder: !!placeholder,\n        descriptionId,\n        labelId,\n    });\n\n    const handleWrapperFocus = () => {\n        setActionVisible(true);\n    };\n\n    const handleWrapperBlur = () => {\n        requestAnimationFrame(() => {\n            if (!wrapperCurrentRef.current?.contains(document.activeElement)) {\n                setActionVisible(false);\n            }\n        });\n    };\n\n    const onClickWrapper: MouseEventHandler = (e) => {\n        if (!isEventFromInteractiveComponent(e)) {\n            inputRef.current?.focus();\n        }\n    };\n\n    const focusedOrFilled = isFocused || value !== '';\n    const placeholderIsElevated = focusedOrFilled && placeholderCanBeElevated;\n    const showPostfix = !!postfix && (placeholderIsElevated || value !== '');\n    const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;\n    const showLabel = placeholderCanBeElevated || (value === '' && !showFixedPlaceholder);\n\n    const InputIconComponent = matchIconSize(size, inputIcon);\n    const showClearButton = value.length > 0 && (clearable || (!!clearableOnFocus && isActionVisible));\n    const showHint = !!hint && (showHintAlways || value.length > 0);\n    const buttonIcon = matchIconSize(size, _buttonIcon);\n    let IconComponent = buttonIcon;\n    if (showClearButton) {\n        IconComponent = size === 'small' ? CrossOutlinedSize16 : CrossOutlinedSize24;\n    }\n\n    const hintWrapperRefCallback: RefCallback<HTMLDivElement> = useCallback(\n        (element) => {\n            if (element && hintRef.current) {\n                const text = hintRef.current.innerText;\n                if (text.length > 30) {\n                    let maxWidth;\n                    if (text !== hintMaxWidthRef.current?.text) {\n                        const newText = text.slice(0, 30);\n                        hintRef.current.innerText = newText;\n                        maxWidth = hintRef.current.offsetWidth;\n                        hintRef.current.innerText = text;\n                        hintMaxWidthRef.current = {\n                            width: maxWidth,\n                            text,\n                        };\n                    } else {\n                        maxWidth = hintMaxWidthRef.current.width;\n                    }\n\n                    element.style.maxWidth = `${maxWidth}px`;\n                }\n            }\n        },\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n        [hint]\n    );\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    return (\n        <div\n            ref={wrapperRefCallback}\n            className={classnames(styles.input, {\n                [styles.focused]: isFocused,\n                [styles.focusVisible]: isFocusVisible,\n                [styles.disabled]: isComponentDisabled,\n                [styles.large]: size === 'large',\n                [styles.small]: size === 'small',\n                [styles.elevated]: placeholderCanBeElevated,\n                [styles.invalid]: !!invalid,\n                [styles.withIcon]: !!inputIcon,\n            })}\n            onFocus={clearableOnFocus ? handleWrapperFocus : undefined}\n            onBlur={clearableOnFocus ? handleWrapperBlur : undefined}\n            onClick={onClickWrapper}\n            data-interactive={true}\n        >\n            <div className={styles.positionContainer}>\n                <div className={styles.hintContainer}>\n                    <div className={styles.autofillHelper} />\n                    <div className={styles.contentContainer}>\n                        {!!InputIconComponent && (\n                            <div className={styles.icon}>\n                                <InputIconComponent />\n                            </div>\n                        )}\n                        <div className={styles.riggingContainer}>\n                            {showLabel && (\n                                <label\n                                    className={classnames(styles.label, {\n                                        [styles.labelElevated]: placeholderIsElevated,\n                                    })}\n                                    id={ariaProps['aria-labelledby']}\n                                >\n                                    {placeholder}\n                                </label>\n                            )}\n                        </div>\n                        <div className={styles.valueContainer}>\n                            <input\n                                {...restProps}\n                                {...ariaProps}\n                                maxLength={maxLength}\n                                disabled={isComponentDisabled}\n                                suppressHydrationWarning\n                                className={styles.field}\n                                value={currentValue}\n                                // maskito требует onInput, (https://maskito.dev/frameworks/react) который работает\n                                // аналогично onChange\n                                onInput={changeHandler}\n                                onFocus={focusHandler}\n                                onBlur={blurHandler}\n                                ref={inputRefCallback}\n                            />\n                            <div className={styles.additionalValue}>\n                                <Text\n                                    Element=\"span\"\n                                    typography={size === 'small' ? 'label-3-regular' : 'label-2-regular'}\n                                >\n                                    <span className={styles.valueGhost}>{currentValue}</span>\n                                    {showFixedPlaceholder && (\n                                        <span className={styles.fixedPlaceholder}>\n                                            {fixedPlaceholder.slice(value.length)}\n                                        </span>\n                                    )}\n                                    {showPostfix && (\n                                        <>\n                                            {'\\u00A0'}\n                                            {postfix}\n                                        </>\n                                    )}\n                                </Text>\n                            </div>\n                        </div>\n                    </div>\n                    {showHint && (\n                        <div className={styles.hint} ref={hintWrapperRefCallback} data-qa=\"input-hint\">\n                            <Text Element=\"span\" typography={size === 'small' ? 'label-4-regular' : 'label-3-regular'}>\n                                <span ref={hintRef}>{hint}</span>\n                            </Text>\n                        </div>\n                    )}\n                </div>\n                {IconComponent && (\n                    <div className={styles.rightContainer}>\n                        <IconComponent\n                            padding={8}\n                            initialColor=\"secondary\"\n                            borderRadius=\"halfHeight\"\n                            data-qa={buttonQaLabel}\n                            onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n                            onClick={showClearButton ? clearClickHandler : (onButtonClick as () => void)}\n                            disabled={isComponentDisabled}\n                            ref={buttonRef}\n                        />\n                    </div>\n                )}\n            </div>\n            <FormHelper\n                description={description}\n                errorMessage={errorMessage}\n                descriptionId={ariaProps['aria-describedby']}\n                disabled={isComponentDisabled}\n                invalid={invalid}\n            />\n        </div>\n    );\n};\n\nconst BaseInput = forwardRef(BaseInputForwardRefRenderFunc);\n\nBaseInput.displayName = 'BaseInput';\n\nexport { BaseInput };\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/DateTimeInput.js

@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-form-helper';
 import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';
-import './index.esm-DRF_TuWt.js';
+import './index.esm-BbHYsWD7.js';
 
 const DateTimeInput = forwardRef(({ dateMask, timeMask, timeRounding, onButtonClick, hideMask, size, ...props }, ref) => {
     const maskedInputRef = useDateTimeMask(dateMask, timeMask, timeRounding);

package/NumberInput.js

@@ -16,11 +16,20 @@ import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';
 
-const NumberInput = forwardRef(({ groupSeparator = defaults.groupSeparator, decimalMark = defaults.decimalMark, groupSize = defaults.groupSize, decimalLength = defaults.decimalLength, allowNegative = defaults.allowNegative, ...restProps }, ref) => {
+const NumberInput = forwardRef(({ groupSeparator = defaults.groupSeparator, decimalMark = defaults.decimalMark, groupSize = defaults.groupSize, decimalLength = defaults.decimalLength, allowNegative = defaults.allowNegative, maxLength, ...restProps }, ref) => {
     const numberFormatter = useMemo(() => {
-        return numberFormatterFactory({ groupSeparator, decimalMark, groupSize, decimalLength, allowNegative });
-    }, [groupSeparator, decimalMark, groupSize, decimalLength, allowNegative]);
-    return jsx(Input, { ...restProps, inputMode: "decimal", formatter: numberFormatter, ref: ref });
+        return numberFormatterFactory({
+            groupSeparator,
+            decimalMark,
+            groupSize,
+            decimalLength,
+            allowNegative,
+            maxLength,
+        });
+    }, [groupSeparator, decimalMark, groupSize, decimalLength, allowNegative, maxLength]);
+    // нужно учесть наличие groupSeparator в строке
+    const maxLen = !maxLength || groupSize === 0 ? maxLength : maxLength + Math.ceil(maxLength / groupSize) - 1;
+    return jsx(Input, { ...restProps, maxLength: maxLen, inputMode: "decimal", formatter: numberFormatter, ref: ref });
 });
 NumberInput.displayName = 'NumberInput';
 

package/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../src/NumberInput.tsx"],"sourcesContent":["import { forwardRef, useMemo, InputHTMLAttributes } from 'react';\n\nimport { defaults } from '@hh.ru/magritte-common-number-formatter';\nimport { Input } from '@hh.ru/magritte-ui-input/Input';\nimport { numberFormatterFactory } from '@hh.ru/magritte-ui-input/numberFormatter';\nimport { ControlledNumberInputProps } from '@hh.ru/magritte-ui-input/types';\n\nexport const NumberInput = forwardRef<\n    HTMLInputElement,\n    ControlledNumberInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledNumberInputProps>\n>(\n    (\n        {\n            groupSeparator = defaults.groupSeparator,\n            decimalMark = defaults.decimalMark,\n            groupSize = defaults.groupSize,\n            decimalLength = defaults.decimalLength,\n            allowNegative = defaults.allowNegative,\n            ...restProps\n        },\n        ref\n    ) => {\n        const numberFormatter = useMemo(() => {\n            return numberFormatterFactory({ groupSeparator, decimalMark, groupSize, decimalLength, allowNegative });\n        }, [groupSeparator, decimalMark, groupSize, decimalLength, allowNegative]);\n\n        return <Input {...restProps} inputMode=\"decimal\" formatter={numberFormatter} ref={ref} />;\n    }\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;MAOa,WAAW,GAAG,UAAU,CAIjC,CACI,EACI,cAAc,GAAG,QAAQ,CAAC,cAAc,EACxC,WAAW,GAAG,QAAQ,CAAC,WAAW,EAClC,SAAS,GAAG,QAAQ,CAAC,SAAS,EAC9B,aAAa,GAAG,QAAQ,CAAC,aAAa,EACtC,aAAa,GAAG,QAAQ,CAAC,aAAa,EACtC,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACjC,QAAA,OAAO,sBAAsB,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;AAC5G,KAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;AAE3E,IAAA,OAAOA,IAAC,KAAK,EAAA,EAAA,GAAK,SAAS,EAAE,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AAC9F,CAAC,EACH;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
+{"version":3,"file":"NumberInput.js","sources":["../src/NumberInput.tsx"],"sourcesContent":["import { forwardRef, useMemo, InputHTMLAttributes } from 'react';\n\nimport { defaults } from '@hh.ru/magritte-common-number-formatter';\nimport { Input } from '@hh.ru/magritte-ui-input/Input';\nimport { numberFormatterFactory } from '@hh.ru/magritte-ui-input/numberFormatter';\nimport { ControlledNumberInputProps } from '@hh.ru/magritte-ui-input/types';\n\nexport const NumberInput = forwardRef<\n    HTMLInputElement,\n    ControlledNumberInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ControlledNumberInputProps>\n>(\n    (\n        {\n            groupSeparator = defaults.groupSeparator,\n            decimalMark = defaults.decimalMark,\n            groupSize = defaults.groupSize,\n            decimalLength = defaults.decimalLength,\n            allowNegative = defaults.allowNegative,\n            maxLength,\n            ...restProps\n        },\n        ref\n    ) => {\n        const numberFormatter = useMemo(() => {\n            return numberFormatterFactory({\n                groupSeparator,\n                decimalMark,\n                groupSize,\n                decimalLength,\n                allowNegative,\n                maxLength,\n            });\n        }, [groupSeparator, decimalMark, groupSize, decimalLength, allowNegative, maxLength]);\n\n        // нужно учесть наличие groupSeparator в строке\n        const maxLen = !maxLength || groupSize === 0 ? maxLength : maxLength + Math.ceil(maxLength / groupSize) - 1;\n\n        return <Input {...restProps} maxLength={maxLen} inputMode=\"decimal\" formatter={numberFormatter} ref={ref} />;\n    }\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;MAOa,WAAW,GAAG,UAAU,CAIjC,CACI,EACI,cAAc,GAAG,QAAQ,CAAC,cAAc,EACxC,WAAW,GAAG,QAAQ,CAAC,WAAW,EAClC,SAAS,GAAG,QAAQ,CAAC,SAAS,EAC9B,aAAa,GAAG,QAAQ,CAAC,aAAa,EACtC,aAAa,GAAG,QAAQ,CAAC,aAAa,EACtC,SAAS,EACT,GAAG,SAAS,EACf,EACD,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAK;AACjC,QAAA,OAAO,sBAAsB,CAAC;YAC1B,cAAc;YACd,WAAW;YACX,SAAS;YACT,aAAa;YACb,aAAa;YACb,SAAS;AACZ,SAAA,CAAC,CAAC;AACP,KAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;;IAGtF,MAAM,MAAM,GAAG,CAAC,SAAS,IAAI,SAAS,KAAK,CAAC,GAAG,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;IAE5G,OAAOA,GAAA,CAAC,KAAK,EAAK,EAAA,GAAA,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAC;AACjH,CAAC,EACH;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/UncontrolledDateTimeInput.js

@@ -15,7 +15,7 @@ import './useFocus.js';
 import './useInputAriaProps.js';
 import '@hh.ru/magritte-ui-typography';
 import './useDateTimeMask.js';
-import './index.esm-DRF_TuWt.js';
+import './index.esm-BbHYsWD7.js';
 
 const UncontrolledDateTimeInput = forwardRef(({ value, onChange, ...restProps }, ref) => {
     const [currentValue, changeHandler] = useUncontrolledInput(value, onChange);