@hh.ru/magritte-ui-input 9.4.50 → 9.4.52

package/BaseInput.d.ts

@@ -1,4 +1,4 @@
 import { InputHTMLAttributes } from 'react';
-import { BaseInputProps } from '@hh.ru/magritte-ui-input/types';
-declare const BaseInput: import("react").ForwardRefExoticComponent<(BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "hint" | "showHintAlways" | "clearable" | "clearableOnFocus" | "buttonIcon" | "buttonIconAriaLabel" | "onButtonClick" | "inputIcon" | "fixedPlaceholder" | "invalid" | "placeholder" | "postfix" | "onFocus" | "onBlur" | "description" | "errorMessage" | "disabled" | "formatter" | "buttonDataQa" | "buttonRef" | "wrapperRef" | "maxLength" | "size" | "elevatePlaceholder" | "onChange" | "value">) & import("react").RefAttributes<HTMLInputElement>>;
+import { BaseInputProps } from './types';
+declare const BaseInput: import("react").ForwardRefExoticComponent<(BaseInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "buttonDataQa" | "buttonIcon" | "buttonIconAriaLabel" | "buttonRef" | "clearable" | "clearableOnFocus" | "description" | "disabled" | "elevatePlaceholder" | "errorMessage" | "fixedPlaceholder" | "formatter" | "hint" | "inputIcon" | "invalid" | "maxLength" | "onBlur" | "onButtonClick" | "onChange" | "onFocus" | "placeholder" | "postfix" | "showHintAlways" | "size" | "value" | "wrapperRef">) & import("react").RefAttributes<HTMLInputElement>>;
 export { BaseInput };

package/BaseInput.js

@@ -13,144 +13,255 @@ import { useFocus } from './useFocus.js';
 import { useInputAriaProps } from './useInputAriaProps.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"input":"magritte-input___LVTID_9-4-50","label":"magritte-label___YlOQk_9-4-50","elevated":"magritte-elevated___kPcsM_9-4-50","focused":"magritte-focused___dxrHD_9-4-50","invalid":"magritte-invalid___L5MVa_9-4-50","disabled":"magritte-disabled___0NH6E_9-4-50","position-container":"magritte-position-container___kZnvZ_9-4-50","positionContainer":"magritte-position-container___kZnvZ_9-4-50","field":"magritte-field___9S8Tw_9-4-50","hint":"magritte-hint___EFGK0_9-4-50","additional-value":"magritte-additional-value___9Kyap_9-4-50","additionalValue":"magritte-additional-value___9Kyap_9-4-50","label_elevated":"magritte-label_elevated___PVcpC_9-4-50","labelElevated":"magritte-label_elevated___PVcpC_9-4-50","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_9-4-50","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_9-4-50","icon":"magritte-icon___HEDsQ_9-4-50","focus-visible":"magritte-focus-visible___QvCO1_9-4-50","focusVisible":"magritte-focus-visible___QvCO1_9-4-50","right-container":"magritte-right-container___N0B0o_9-4-50","rightContainer":"magritte-right-container___N0B0o_9-4-50","with-icon":"magritte-with-icon___TPBe2_9-4-50","withIcon":"magritte-with-icon___TPBe2_9-4-50","large":"magritte-large___9frRh_9-4-50","small":"magritte-small___iQL4F_9-4-50","autofill-helper":"magritte-autofill-helper___WFjOW_9-4-50","autofillHelper":"magritte-autofill-helper___WFjOW_9-4-50","content-container":"magritte-content-container___s-0kX_9-4-50","contentContainer":"magritte-content-container___s-0kX_9-4-50","rigging-container":"magritte-rigging-container___Up9Lb_9-4-50","riggingContainer":"magritte-rigging-container___Up9Lb_9-4-50","input__mask":"magritte-input__mask___CHda2_9-4-50","inputMask":"magritte-input__mask___CHda2_9-4-50","value-ghost":"magritte-value-ghost___IXNZj_9-4-50","valueGhost":"magritte-value-ghost___IXNZj_9-4-50","hint-container":"magritte-hint-container___rGsD8_9-4-50","hintContainer":"magritte-hint-container___rGsD8_9-4-50","counter":"magritte-counter___Bld3Q_9-4-50","value-container":"magritte-value-container___6ReT7_9-4-50","valueContainer":"magritte-value-container___6ReT7_9-4-50"};
+var styles = {"input":"magritte-input___LVTID_9-4-52","label":"magritte-label___YlOQk_9-4-52","elevated":"magritte-elevated___kPcsM_9-4-52","focused":"magritte-focused___dxrHD_9-4-52","invalid":"magritte-invalid___L5MVa_9-4-52","disabled":"magritte-disabled___0NH6E_9-4-52","position-container":"magritte-position-container___kZnvZ_9-4-52","positionContainer":"magritte-position-container___kZnvZ_9-4-52","field":"magritte-field___9S8Tw_9-4-52","hint":"magritte-hint___EFGK0_9-4-52","additional-value":"magritte-additional-value___9Kyap_9-4-52","additionalValue":"magritte-additional-value___9Kyap_9-4-52","label_elevated":"magritte-label_elevated___PVcpC_9-4-52","labelElevated":"magritte-label_elevated___PVcpC_9-4-52","fixed-placeholder":"magritte-fixed-placeholder___PYJIH_9-4-52","fixedPlaceholder":"magritte-fixed-placeholder___PYJIH_9-4-52","icon":"magritte-icon___HEDsQ_9-4-52","focus-visible":"magritte-focus-visible___QvCO1_9-4-52","focusVisible":"magritte-focus-visible___QvCO1_9-4-52","right-container":"magritte-right-container___N0B0o_9-4-52","rightContainer":"magritte-right-container___N0B0o_9-4-52","with-icon":"magritte-with-icon___TPBe2_9-4-52","withIcon":"magritte-with-icon___TPBe2_9-4-52","large":"magritte-large___9frRh_9-4-52","small":"magritte-small___iQL4F_9-4-52","autofill-helper":"magritte-autofill-helper___WFjOW_9-4-52","autofillHelper":"magritte-autofill-helper___WFjOW_9-4-52","content-container":"magritte-content-container___s-0kX_9-4-52","contentContainer":"magritte-content-container___s-0kX_9-4-52","rigging-container":"magritte-rigging-container___Up9Lb_9-4-52","riggingContainer":"magritte-rigging-container___Up9Lb_9-4-52","input__mask":"magritte-input__mask___CHda2_9-4-52","inputMask":"magritte-input__mask___CHda2_9-4-52","value-ghost":"magritte-value-ghost___IXNZj_9-4-52","valueGhost":"magritte-value-ghost___IXNZj_9-4-52","hint-container":"magritte-hint-container___rGsD8_9-4-52","hintContainer":"magritte-hint-container___rGsD8_9-4-52","counter":"magritte-counter___Bld3Q_9-4-52","value-container":"magritte-value-container___6ReT7_9-4-52","valueContainer":"magritte-value-container___6ReT7_9-4-52"};
 
 const matchIconSize = (size, icon) => {
-    return icon &&
-        (((size === 'medium' || size === 'large') && icon._size === 24) ||
-            (size === 'small' && icon._size === 16))
-        ? icon
-        : null;
+  return icon && ((size === "medium" || size === "large") && icon._size === 24 || size === "small" && icon._size === 16) ? icon : null;
 };
-// В safari при вставке числа и последующем его стирании задваивалась каретка если использовалась groupSize = 0
-// Это происходило только после вставки из буфера
-// каретка возвращалась на место если стриггерить setCaretPosition повторно
-// Запуск сдвига дважды фиксит эту проблему
 const setCaretPosition = (el, position) => {
+  requestAnimationFrame(() => {
+    Selection.setCaretPosition(el, position);
     requestAnimationFrame(() => {
-        Selection.setCaretPosition(el, position);
-        requestAnimationFrame(() => {
-            Selection.setCaretPosition(el, position);
-        });
+      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, buttonIconAriaLabel: _buttonIconAriaLabel, clearable = false, clearableOnFocus, onButtonClick, buttonDataQa, buttonRef, inputIcon, wrapperRef, fixedPlaceholder, maxLength, hint, showHintAlways = false, 'aria-describedby': ariaDescribedBy, ...restProps }, ref) => {
-    const wrapperCurrentRef = useRef(null);
-    const inputRef = useRef(null);
-    const [isActionVisible, setActionVisible] = useState(false);
-    const inputRefCallback = useMultipleRefs(ref, inputRef);
-    const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);
-    const descriptionId = useId();
-    const labelId = useId();
-    const hintRef = useRef(null);
-    const hintMaxWidthRef = useRef(null);
-    const change = useCallback((newValue, event) => {
-        if (inputRef.current && formatter) {
-            const caretPosition = Selection.getCaretPosition(inputRef.current);
-            const formatResult = formatter(value, newValue, caretPosition || 0);
-            setCaretPosition(inputRef.current, formatResult.caretPosition);
-            onChange(formatResult.outputValue, event);
-            return;
-        }
-        onChange(newValue, event);
-    }, [formatter, onChange, value, inputRef]);
-    const clearClickHandler = useCallback((event) => {
-        onChange('');
-        inputRef.current && inputRef.current.focus();
-        onButtonClick?.(event);
-    }, [onChange, inputRef, onButtonClick]);
-    const forceDisabled = useDisabled();
-    const isComponentDisabled = forceDisabled || !!disabled;
-    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);
-    const placeholderCanBeElevated = size === 'large' && !!elevatePlaceholder && !!placeholder;
-    const [isFocusVisible, setFocusVisible] = useState(false);
-    const currentValue = formatter?.('', value, 0).formattedValue || value;
-    const buttonQaLabel = buttonDataQa || `input-${clearable ? 'clearable-' : ''}button`;
-    const ariaProps = useInputAriaProps({
-        invalid,
-        hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,
-        hasPlaceholder: !!placeholder,
-        descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,
-        labelId,
+const BaseInputForwardRefRenderFunc = ({
+  onChange,
+  onFocus,
+  onBlur,
+  value,
+  placeholder,
+  disabled = false,
+  postfix,
+  size = "medium",
+  elevatePlaceholder = false,
+  invalid = false,
+  description,
+  errorMessage,
+  formatter,
+  buttonIcon: _buttonIcon,
+  buttonIconAriaLabel: _buttonIconAriaLabel,
+  clearable = false,
+  clearableOnFocus,
+  onButtonClick,
+  buttonDataQa,
+  buttonRef,
+  inputIcon,
+  wrapperRef,
+  fixedPlaceholder,
+  maxLength,
+  hint,
+  showHintAlways = false,
+  "aria-describedby": ariaDescribedBy,
+  ...restProps
+}, ref) => {
+  const wrapperCurrentRef = useRef(null);
+  const inputRef = useRef(null);
+  const [isActionVisible, setActionVisible] = useState(false);
+  const inputRefCallback = useMultipleRefs(ref, inputRef);
+  const wrapperRefCallback = useMultipleRefs(wrapperRef, wrapperCurrentRef);
+  const descriptionId = useId();
+  const labelId = useId();
+  const hintRef = useRef(null);
+  const hintMaxWidthRef = useRef(null);
+  const change = useCallback(
+    (newValue, event) => {
+      if (inputRef.current && formatter) {
+        const caretPosition = Selection.getCaretPosition(inputRef.current);
+        const formatResult = formatter(value, newValue, caretPosition || 0);
+        setCaretPosition(inputRef.current, formatResult.caretPosition);
+        onChange(formatResult.outputValue, event);
+        return;
+      }
+      onChange(newValue, event);
+    },
+    [formatter, onChange, value, inputRef]
+  );
+  const clearClickHandler = useCallback(
+    (event) => {
+      onChange("");
+      inputRef.current && inputRef.current.focus();
+      onButtonClick?.(event);
+    },
+    [onChange, inputRef, onButtonClick]
+  );
+  const forceDisabled = useDisabled();
+  const isComponentDisabled = forceDisabled || !!disabled;
+  const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(change, onFocus, onBlur);
+  const placeholderCanBeElevated = size === "large" && !!elevatePlaceholder && !!placeholder;
+  const [isFocusVisible, setFocusVisible] = useState(false);
+  const currentValue = formatter?.("", value, 0).formattedValue || value;
+  const buttonQaLabel = buttonDataQa || `input-${clearable ? "clearable-" : ""}button`;
+  const ariaProps = useInputAriaProps({
+    invalid,
+    hasDescription: !!description || !!errorMessage || !!ariaDescribedBy,
+    hasPlaceholder: !!placeholder,
+    descriptionId: ariaDescribedBy || `input-description-${descriptionId}`,
+    labelId
+  });
+  const handleWrapperFocus = () => {
+    setActionVisible(true);
+  };
+  const handleWrapperBlur = () => {
+    requestAnimationFrame(() => {
+      if (!wrapperCurrentRef.current?.contains(document.activeElement)) {
+        setActionVisible(false);
+      }
     });
-    const handleWrapperFocus = () => {
-        setActionVisible(true);
-    };
-    const handleWrapperBlur = () => {
-        requestAnimationFrame(() => {
-            if (!wrapperCurrentRef.current?.contains(document.activeElement)) {
-                setActionVisible(false);
-            }
-        });
-    };
-    const onClickWrapper = (e) => {
-        if (!isEventFromInteractiveComponent(e)) {
-            inputRef.current?.focus();
+  };
+  const onClickWrapper = (e) => {
+    if (!isEventFromInteractiveComponent(e)) {
+      inputRef.current?.focus();
+    }
+  };
+  const focusedOrFilled = isFocused || value !== "";
+  const placeholderIsElevated = focusedOrFilled && placeholderCanBeElevated;
+  const showPostfix = !!postfix && (placeholderIsElevated || value !== "");
+  const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;
+  const showLabel = placeholderCanBeElevated || value === "" && !showFixedPlaceholder;
+  const InputIconComponent = matchIconSize(size, inputIcon);
+  const showClearButton = value.length > 0 && (clearable || !!clearableOnFocus && isActionVisible);
+  const showHint = !!hint && (showHintAlways || value.length > 0);
+  const buttonIcon = matchIconSize(size, _buttonIcon);
+  let ButtonIconComponent = buttonIcon;
+  let buttonIconAriaLabel = _buttonIconAriaLabel;
+  const trlClear = useTranslation("Input", "clear");
+  if (showClearButton) {
+    ButtonIconComponent = size === "small" ? CrossOutlinedSize16 : CrossOutlinedSize24;
+    buttonIconAriaLabel = trlClear;
+  }
+  const hintWrapperRefCallback = useCallback(
+    (element) => {
+      if (element && hintRef.current) {
+        const text = hintRef.current.innerText;
+        if (text.length > 30) {
+          let maxWidth;
+          if (text !== hintMaxWidthRef.current?.text) {
+            const newText = text.slice(0, 30);
+            hintRef.current.innerText = newText;
+            maxWidth = hintRef.current.offsetWidth;
+            hintRef.current.innerText = text;
+            hintMaxWidthRef.current = {
+              width: maxWidth,
+              text
+            };
+          } else {
+            maxWidth = hintMaxWidthRef.current.width;
+          }
+          element.style.maxWidth = `${maxWidth}px`;
         }
-    };
-    const focusedOrFilled = isFocused || value !== '';
-    const placeholderIsElevated = focusedOrFilled && placeholderCanBeElevated;
-    const showPostfix = !!postfix && (placeholderIsElevated || value !== '');
-    const showFixedPlaceholder = focusedOrFilled && !!fixedPlaceholder;
-    const showLabel = placeholderCanBeElevated || (value === '' && !showFixedPlaceholder);
-    const InputIconComponent = matchIconSize(size, inputIcon);
-    const showClearButton = value.length > 0 && (clearable || (!!clearableOnFocus && isActionVisible));
-    const showHint = !!hint && (showHintAlways || value.length > 0);
-    const buttonIcon = matchIconSize(size, _buttonIcon);
-    let ButtonIconComponent = buttonIcon;
-    let buttonIconAriaLabel = _buttonIconAriaLabel;
-    const trlClear = useTranslation('Input', 'clear');
-    if (showClearButton) {
-        ButtonIconComponent = size === 'small' ? CrossOutlinedSize16 : CrossOutlinedSize24;
-        buttonIconAriaLabel = trlClear;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hint]
+  );
+  useEffect(() => {
+    if (inputRef.current) {
+      setFocusVisible(isFocused && inputRef.current.classList.contains("focus-visible"));
     }
-    const hintWrapperRefCallback = useCallback((element) => {
-        if (element && hintRef.current) {
-            const text = hintRef.current.innerText;
-            if (text.length > 30) {
-                let maxWidth;
-                if (text !== hintMaxWidthRef.current?.text) {
-                    const newText = text.slice(0, 30);
-                    hintRef.current.innerText = newText;
-                    maxWidth = hintRef.current.offsetWidth;
-                    hintRef.current.innerText = text;
-                    hintMaxWidthRef.current = {
-                        width: maxWidth,
-                        text,
-                    };
+  }, [isFocused]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRefCallback,
+      className: classnames(styles.input, {
+        [styles.focused]: isFocused,
+        [styles.focusVisible]: isFocusVisible,
+        [styles.disabled]: isComponentDisabled,
+        [styles.large]: size === "large",
+        [styles.small]: size === "small",
+        [styles.elevated]: placeholderCanBeElevated,
+        [styles.invalid]: !!invalid,
+        [styles.withIcon]: !!inputIcon
+      }),
+      onFocus: clearableOnFocus ? handleWrapperFocus : void 0,
+      onBlur: clearableOnFocus ? handleWrapperBlur : void 0,
+      onClick: onClickWrapper,
+      "data-interactive": true,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.positionContainer, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.hintContainer, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.autofillHelper }),
+            /* @__PURE__ */ jsxs("div", { className: styles.contentContainer, children: [
+              !!InputIconComponent && /* @__PURE__ */ jsx("div", { className: styles.icon, children: /* @__PURE__ */ jsx(InputIconComponent, {}) }),
+              /* @__PURE__ */ jsx("div", { className: styles.riggingContainer, children: showLabel && /* @__PURE__ */ jsx(
+                "label",
+                {
+                  className: classnames(styles.label, {
+                    [styles.labelElevated]: placeholderIsElevated
+                  }),
+                  id: ariaProps["aria-labelledby"],
+                  children: placeholder
                 }
-                else {
-                    maxWidth = hintMaxWidthRef.current.width;
-                }
-                element.style.maxWidth = `${maxWidth}px`;
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: styles.valueContainer, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...restProps,
+                    ...ariaProps,
+                    maxLength,
+                    disabled: isComponentDisabled,
+                    suppressHydrationWarning: true,
+                    className: styles.field,
+                    value: currentValue,
+                    onInput: changeHandler,
+                    onFocus: focusHandler,
+                    onBlur: blurHandler,
+                    ref: inputRefCallback
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: styles.additionalValue, children: /* @__PURE__ */ jsxs(
+                  Text,
+                  {
+                    Element: "span",
+                    typography: size === "small" ? "label-3-regular" : "label-2-regular",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.valueGhost, children: currentValue }),
+                      showFixedPlaceholder && /* @__PURE__ */ jsx("span", { className: styles.fixedPlaceholder, children: fixedPlaceholder.slice(value.length) }),
+                      showPostfix && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        "\xA0",
+                        postfix
+                      ] })
+                    ]
+                  }
+                ) })
+              ] })
+            ] }),
+            showHint && /* @__PURE__ */ jsx("div", { className: styles.hint, ref: hintWrapperRefCallback, "data-qa": "input-hint", children: /* @__PURE__ */ jsx(Text, { Element: "span", typography: size === "small" ? "label-4-regular" : "label-3-regular", children: /* @__PURE__ */ jsx("span", { ref: hintRef, children: hint }) }) })
+          ] }),
+          ButtonIconComponent && /* @__PURE__ */ jsx("div", { className: styles.rightContainer, children: /* @__PURE__ */ jsx(
+            ButtonIconComponent,
+            {
+              padding: 8,
+              initialColor: "secondary",
+              borderRadius: "halfHeight",
+              "data-qa": buttonQaLabel,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: showClearButton ? clearClickHandler : onButtonClick,
+              disabled: isComponentDisabled,
+              ref: buttonRef,
+              "aria-label": buttonIconAriaLabel
             }
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hint]);
-    useEffect(() => {
-        if (inputRef.current) {
-            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));
-        }
-    }, [isFocused]);
-    return (jsxs("div", { ref: wrapperRefCallback, className: classnames(styles.input, {
-            [styles.focused]: isFocused,
-            [styles.focusVisible]: isFocusVisible,
-            [styles.disabled]: isComponentDisabled,
-            [styles.large]: size === 'large',
-            [styles.small]: size === 'small',
-            [styles.elevated]: placeholderCanBeElevated,
-            [styles.invalid]: !!invalid,
-            [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, 
-                                                // 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 }) }) }))] }), ButtonIconComponent && (jsx("div", { className: styles.rightContainer, children: jsx(ButtonIconComponent, { padding: 8, initialColor: "secondary", borderRadius: "halfHeight", "data-qa": buttonQaLabel, onMouseDown: (event) => event.preventDefault(), onClick: showClearButton ? clearClickHandler : onButtonClick, disabled: isComponentDisabled, ref: buttonRef, "aria-label": buttonIconAriaLabel }) }))] }), jsx(FormHelper, { description: description, errorMessage: errorMessage, descriptionId: ariaProps['aria-describedby'], disabled: isComponentDisabled, invalid: invalid })] }));
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormHelper,
+          {
+            description,
+            errorMessage,
+            descriptionId: ariaProps["aria-describedby"],
+            disabled: isComponentDisabled,
+            invalid
+          }
+        )
+      ]
+    }
+  );
 };
 const BaseInput = forwardRef(BaseInputForwardRefRenderFunc);
-BaseInput.displayName = 'BaseInput';
+BaseInput.displayName = "BaseInput";
 
 export { BaseInput };
 //# sourceMappingURL=BaseInput.js.map

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 { useTranslation } from '@hh.ru/magritte-common-use-translation';\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/types';\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        buttonIconAriaLabel: _buttonIconAriaLabel,\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        'aria-describedby': ariaDescribedBy,\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 || !!errorMessage || !!ariaDescribedBy,\n        hasPlaceholder: !!placeholder,\n        descriptionId: ariaDescribedBy || `input-description-${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 ButtonIconComponent = buttonIcon;\n    let buttonIconAriaLabel = _buttonIconAriaLabel;\n    const trlClear = useTranslation('Input', 'clear');\n    if (showClearButton) {\n        ButtonIconComponent = size === 'small' ? CrossOutlinedSize16 : CrossOutlinedSize24;\n        buttonIconAriaLabel = trlClear;\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 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                {ButtonIconComponent && (\n                    <div className={styles.rightContainer}>\n                        <ButtonIconComponent\n                            padding={8}\n                            initialColor=\"secondary\"\n                            borderRadius=\"halfHeight\"\n                            data-qa={buttonQaLabel}\n                            onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n                            onClick={showClearButton ? clearClickHandler : onButtonClick}\n                            disabled={isComponentDisabled}\n                            ref={buttonRef}\n                            aria-label={buttonIconAriaLabel}\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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"}
+{"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 { useTranslation } from '@hh.ru/magritte-common-use-translation';\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/types';\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        buttonIconAriaLabel: _buttonIconAriaLabel,\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        'aria-describedby': ariaDescribedBy,\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 || !!errorMessage || !!ariaDescribedBy,\n        hasPlaceholder: !!placeholder,\n        descriptionId: ariaDescribedBy || `input-description-${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 ButtonIconComponent = buttonIcon;\n    let buttonIconAriaLabel = _buttonIconAriaLabel;\n    const trlClear = useTranslation('Input', 'clear');\n    if (showClearButton) {\n        ButtonIconComponent = size === 'small' ? CrossOutlinedSize16 : CrossOutlinedSize24;\n        buttonIconAriaLabel = trlClear;\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 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                {ButtonIconComponent && (\n                    <div className={styles.rightContainer}>\n                        <ButtonIconComponent\n                            padding={8}\n                            initialColor=\"secondary\"\n                            borderRadius=\"halfHeight\"\n                            data-qa={buttonQaLabel}\n                            onMouseDown={(event) => event.preventDefault()} // чтобы инпут не терял фокус\n                            onClick={showClearButton ? clearClickHandler : onButtonClick}\n                            disabled={isComponentDisabled}\n                            ref={buttonRef}\n                            aria-label={buttonIconAriaLabel}\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":[],"mappings":"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"}

package/DateTimeInput.d.ts

@@ -1,9 +1,9 @@
 import { InputHTMLAttributes } from 'react';
-export declare const DateTimeInput: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-input/types").InputBaseProps & {
-    dateMask?: import("@hh.ru/magritte-ui-input/types").DateInputMask;
+export declare const DateTimeInput: import("react").ForwardRefExoticComponent<import("./types").InputBaseProps & {
+    dateMask?: import("./types").DateInputMask;
     timeMask?: boolean;
-    timeRounding?: import("@hh.ru/magritte-ui-input/types").TimeInputRounding;
+    timeRounding?: import("./types").TimeInputRounding;
     onButtonClick?: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     hideMask?: boolean;
     range?: boolean;
-} & import("@hh.ru/magritte-ui-input/types").ControlledProps & Omit<InputHTMLAttributes<HTMLInputElement>, "onButtonClick" | keyof import("@hh.ru/magritte-ui-input/types").InputBaseProps | keyof import("@hh.ru/magritte-ui-input/types").ControlledProps | "range" | "dateMask" | "timeMask" | "timeRounding" | "hideMask"> & import("react").RefAttributes<HTMLInputElement>>;
+} & import("./types").ControlledProps & Omit<InputHTMLAttributes<HTMLInputElement>, "dateMask" | "hideMask" | "onButtonClick" | "range" | "timeMask" | "timeRounding" | keyof import("./types").ControlledProps | keyof import("./types").InputBaseProps> & import("react").RefAttributes<HTMLInputElement>>;