mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/Input-DspsU5F4.js

@@ -0,0 +1,249 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "./index-CweZ_OcN.js";
+import { memo, forwardRef, useState, useRef, useEffect } from "react";
+import { EInputVariant } from "./components/Input/constants.js";
+import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
+import { Icon } from "./icons/Icon.js";
+import { Button } from "./components/Button/Button.js";
+import './assets/Input.css';const label = "_label_1rkts_27";
+const input = "_input_1rkts_3";
+const focused = "_focused_1rkts_82";
+const disabled = "_disabled_1rkts_88";
+const clear = "_clear_1rkts_121";
+const s = "_s_1rkts_169";
+const m = "_m_1rkts_184";
+const l = "_l_1rkts_27";
+const success = "_success_1rkts_241";
+const alarm = "_alarm_1rkts_261";
+const error = "_error_1rkts_281";
+const cls = {
+  "input-wrapper": "_input-wrapper_1rkts_3",
+  "required-mark": "_required-mark_1rkts_17",
+  label,
+  "has-left-slot": "_has-left-slot_1rkts_42",
+  "active-label": "_active-label_1rkts_45",
+  input,
+  "has-right-slot": "_has-right-slot_1rkts_79",
+  focused,
+  "has-label": "_has-label_1rkts_85",
+  disabled,
+  "left-slot": "_left-slot_1rkts_94",
+  "right-slot": "_right-slot_1rkts_95",
+  "addon-icon": "_addon-icon_1rkts_117",
+  clear,
+  s,
+  m,
+  l,
+  "default-gray": "_default-gray_1rkts_214",
+  "default-white": "_default-white_1rkts_226",
+  success,
+  alarm,
+  error
+};
+const renderAddon = (addon) => {
+  var _a, _b;
+  if (!addon) {
+    return null;
+  }
+  switch (addon.addonType) {
+    case "icon": {
+      const is16px = (_a = addon.addonContent) == null ? void 0 : _a.includes("16px");
+      const is24px = (_b = addon.addonContent) == null ? void 0 : _b.includes("24px");
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          style: {
+            ["--icon-size"]: classNames({
+              "16px": is16px,
+              "24px": is24px
+            })
+          },
+          className: cls["addon-icon"],
+          iconName: addon.addonContent
+        }
+      );
+    }
+    case "text": {
+      return addon.addonContent;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+const Input = memo(
+  forwardRef(
+    (props, ref) => {
+      const {
+        value,
+        className,
+        wrapperClassName,
+        variant = EInputVariant.DefaultGray,
+        type = "text",
+        autofocus,
+        readonly,
+        id,
+        onFocus,
+        onBlur,
+        label: label2,
+        withClearButton,
+        disabled: disabled2,
+        onChange,
+        rightAddon,
+        status,
+        leftAddon,
+        size = "m",
+        numbersOnly,
+        required,
+        maxLength,
+        ...otherProps
+      } = props;
+      const [isFocused, setIsFocused] = useState(autofocus);
+      const [withValue, setWithValue] = useState(!!value);
+      const inputRef = useRef(null);
+      const mergedInputRef = useMergeRefs(inputRef, ref);
+      useEffect(() => {
+        if (autofocus) {
+          setIsFocused(true);
+        }
+      }, [autofocus]);
+      const handleBlur = (event) => {
+        const currentValue = event.currentTarget.value;
+        onBlur == null ? void 0 : onBlur(event);
+        setIsFocused(false);
+        setWithValue(!!currentValue);
+      };
+      const handleFocus = (event) => {
+        if (readonly) {
+          return;
+        }
+        setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
+      };
+      const handleClear = () => {
+        if (inputRef == null ? void 0 : inputRef.current) {
+          inputRef.current.value = "";
+          inputRef.current.focus();
+          setWithValue(false);
+          onChange == null ? void 0 : onChange({
+            target: { value: "" }
+          });
+        }
+      };
+      const handleChange = (event) => {
+        let newValue = event.target.value;
+        if (numbersOnly) {
+          newValue = newValue.replace(/\D/g, "");
+        }
+        if (maxLength !== void 0) {
+          newValue = newValue.slice(0, maxLength);
+        }
+        event.target.value = newValue;
+        onChange == null ? void 0 : onChange(event);
+        setWithValue(!!newValue);
+      };
+      const currentLeftAddon = renderAddon(leftAddon);
+      const currentRightAddon = renderAddon(rightAddon);
+      const mods = {
+        [cls.readonly]: disabled2 || readonly,
+        [cls.focused]: isFocused,
+        [cls.disabled]: disabled2 || readonly,
+        [cls["has-label"]]: !!label2,
+        [cls["has-left-slot"]]: !!currentLeftAddon,
+        [cls["has-right-slot"]]: !!currentRightAddon
+      };
+      const isActiveLabel = isFocused || withValue || !!value;
+      const labelClassNames = classNames(cls.label, className, cls[size], {
+        [cls["active-label"]]: isActiveLabel,
+        [cls.disabled]: disabled2 || readonly,
+        [cls["has-left-slot"]]: !!currentLeftAddon
+      });
+      const inputClassNames = classNames(cls.input, mods, className, [
+        cls[variant],
+        cls[status ?? ""],
+        cls[size]
+      ]);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(
+            cls["input-wrapper"],
+            cls[variant],
+            cls[status ?? ""],
+            cls[size],
+            {
+              [cls.disabled]: disabled2 || readonly,
+              [cls.focused]: isFocused
+            },
+            wrapperClassName
+          ),
+          children: [
+            label2 && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassNames, children: [
+              label2,
+              required && (withValue || isFocused) && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] })
+            ] }),
+            currentLeftAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["left-slot"], {
+                  [cls.focused]: isActiveLabel,
+                  [cls["has-label"]]: !!label2
+                }),
+                children: currentLeftAddon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: mergedInputRef,
+                type,
+                id,
+                className: inputClassNames,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                readOnly: readonly,
+                value,
+                onChange: handleChange,
+                maxLength,
+                disabled: disabled2,
+                required,
+                ...otherProps
+              }
+            ),
+            currentRightAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["right-slot"], {
+                  [cls.focused]: isActiveLabel,
+                  [cls["has-label"]]: !!label2
+                }),
+                children: currentRightAddon
+              }
+            ),
+            required && !withValue && !isFocused && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] }),
+            withClearButton && withValue && /* @__PURE__ */ jsx(
+              Button,
+              {
+                tabIndex: -1,
+                className: cls.clear,
+                isIconButton: true,
+                iconName: "Close16px",
+                size: "m-s",
+                clear: true,
+                disabled: disabled2 || readonly,
+                variant: "secondary-gray",
+                onClick: handleClear,
+                "data-testid": "clear-button"
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+Input.displayName = "Input";
+export {
+  Input as I,
+  cls as c
+};