mimir-ui-kit 1.49.2 → 1.50.1

package/dist/components/TextAreaV2/TextArea.js

@@ -0,0 +1,255 @@
+import { jsxs as k, jsx as u } from "react/jsx-runtime";
+import { c as f } from "../../index-DIxK0V-G.js";
+import { memo as L, forwardRef as R, useId as b, useRef as I, useState as q, useEffect as tt, useCallback as x } from "react";
+import { ETextAreaSize as g, ETextAreaVariant as et } from "./constants.js";
+import { getCurrentText as D, setEditableText as V, placeCaretAtEnd as B, clampByMaxLength as rt, getMaxHeightStyle as at } from "./utils.js";
+import { useMergeRefs as nt } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { Icon as st } from "../../icons/Icon.js";
+import { MiniButton as ot } from "../MiniButton/MiniButton.js";
+import '../../assets/TextArea2.css';const ct = "_textarea_1sytk_2", lt = "_disabled_1sytk_68", ut = "_clear_1sytk_112", it = "_label_1sytk_128", dt = "_message_1sytk_184", _t = "_error_1sytk_188", ft = "_success_1sytk_219", mt = "_alarm_1sytk_226", pt = "_s_1sytk_219", xt = "_m_1sytk_184", yt = "_l_1sytk_128", e = {
+  "textarea-wrapper": "_textarea-wrapper_1sytk_2",
+  textarea: ct,
+  disabled: lt,
+  "with-value": "_with-value_1sytk_73",
+  clear: ut,
+  "has-left-addon": "_has-left-addon_1sytk_115",
+  "has-clear": "_has-clear_1sytk_119",
+  "is-required": "_is-required_1sytk_123",
+  label: it,
+  "is-focused": "_is-focused_1sytk_148",
+  "textarea-right-addon": "_textarea-right-addon_1sytk_152",
+  "textarea-left-addon": "_textarea-left-addon_1sytk_153",
+  "required-mark": "_required-mark_1sytk_169",
+  "addon-icon": "_addon-icon_1sytk_179",
+  message: dt,
+  error: _t,
+  "right-addons-content": "_right-addons-content_1sytk_192",
+  "default-gray": "_default-gray_1sytk_201",
+  "default-white": "_default-white_1sytk_210",
+  success: ft,
+  alarm: mt,
+  s: pt,
+  m: xt,
+  l: yt
+}, kt = (i, c) => {
+  if (!i)
+    return null;
+  switch (i.addonType) {
+    case "icon": {
+      const d = c === g.L, h = c === g.M, r = c === g.S;
+      return /* @__PURE__ */ u(
+        st,
+        {
+          style: {
+            "--icon-size": f({
+              "16px": h || r,
+              "24px": d
+            })
+          },
+          className: e["addon-icon"],
+          iconName: i.addonContent
+        }
+      );
+    }
+    case "text":
+      return i.addonContent;
+    default:
+      return null;
+  }
+}, gt = L(
+  R(
+    ({
+      className: i,
+      label: c,
+      required: d,
+      leftAddon: h,
+      disabled: r,
+      autofocus: F,
+      withClearButton: C,
+      value: S,
+      onChange: y,
+      maxLength: _,
+      maxRows: $,
+      message: A,
+      size: m = g.M,
+      status: M,
+      variant: j = et.DefaultGray,
+      containerClassName: H,
+      wrapperClassName: K
+    }, P) => {
+      const w = b(), N = kt(h, m), a = I(null), v = I(!1), W = nt(P, a), [p, E] = q(
+        F
+      ), [G, U] = q(""), T = S !== void 0, n = T ? S ?? "" : G, z = at(m, $);
+      tt(() => {
+        const t = a.current;
+        if (t) {
+          if (v.current) {
+            v.current = !1;
+            return;
+          }
+          D(t) !== n && (V(n, t), B(t));
+        }
+      }, [n]);
+      const l = x(
+        (t, o = !1) => {
+          const s = rt(t, _);
+          T ? y == null || y(s) : U(s), o && (v.current = !0, V(s, a == null ? void 0 : a.current), B(a == null ? void 0 : a.current));
+        },
+        [T, y, _]
+      ), J = x(() => {
+        if (r) return;
+        const t = D(a == null ? void 0 : a.current);
+        typeof _ == "number" && _ >= 0 && t.length > _ ? l(t, !0) : t.length === 0 ? l("", !0) : l(t);
+      }, [l, _, r]), O = x(
+        (t) => {
+          if (r)
+            return;
+          t.preventDefault();
+          const o = (t.clipboardData.getData("text/plain") || "").replace(/\r\n|\r/g, `
+`), s = window.getSelection();
+          s != null && s.rangeCount && (s.deleteFromDocument(), s.getRangeAt(0).insertNode(document.createTextNode(o)), s.collapseToEnd());
+          const Z = D(a == null ? void 0 : a.current);
+          l(Z, !0);
+        },
+        [l, r]
+      ), Q = x(
+        (t) => {
+          r && t.preventDefault();
+        },
+        [r]
+      ), X = x(() => {
+        var t;
+        l("", !0), (t = a.current) == null || t.focus();
+      }, [l]), Y = f(
+        e["textarea-wrapper"],
+        e[j],
+        e[m],
+        e[M ?? ""],
+        d && e.required,
+        r && e.disabled,
+        !!n && e["with-value"],
+        N && e["has-left-addon"],
+        C && !!n && e["has-clear"],
+        d && !p && e["is-required"],
+        K
+      );
+      return /* @__PURE__ */ k(
+        "div",
+        {
+          id: `textarea-container-${w}`,
+          className: f(e["textarea-container"], H),
+          children: [
+            /* @__PURE__ */ k(
+              "div",
+              {
+                "data-testid": "textarea-wrapper",
+                id: `textarea-wrapper-${w}`,
+                tabIndex: r ? -1 : 0,
+                className: Y,
+                onMouseDown: (t) => {
+                  var o;
+                  r || t.target === t.currentTarget && (t.preventDefault(), (o = a.current) == null || o.focus());
+                },
+                onFocusCapture: (t) => {
+                  var o;
+                  r || (t.target === t.currentTarget && ((o = a.current) == null || o.focus()), t.currentTarget.contains(t.relatedTarget) || E(!0));
+                },
+                onBlurCapture: (t) => {
+                  r || t.currentTarget.contains(t.relatedTarget) || E(!1);
+                },
+                children: [
+                  N && /* @__PURE__ */ u(
+                    "div",
+                    {
+                      "data-testid": "left-addon",
+                      className: e["textarea-left-addon"],
+                      children: N
+                    }
+                  ),
+                  c && /* @__PURE__ */ k(
+                    "span",
+                    {
+                      className: f(e.label, {
+                        [e["is-focused"]]: !!n || p
+                      }),
+                      children: [
+                        c,
+                        d && (!!n || p) && /* @__PURE__ */ u(
+                          "span",
+                          {
+                            className: e["required-mark"],
+                            "data-testid": "required-mark"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ u(
+                    "div",
+                    {
+                      id: `textarea-${w}`,
+                      className: f(
+                        e.textarea,
+                        i,
+                        r && e.disabled,
+                        {
+                          [e["with-value"]]: !!n
+                        }
+                      ),
+                      role: "textbox",
+                      "aria-multiline": !0,
+                      "aria-label": c,
+                      "aria-disabled": r,
+                      onInput: J,
+                      onKeyDown: Q,
+                      onBeforeInput: (t) => {
+                        r && t.preventDefault();
+                      },
+                      contentEditable: !0,
+                      suppressContentEditableWarning: !0,
+                      onPaste: O,
+                      ref: W,
+                      style: z,
+                      tabIndex: -1,
+                      "data-placeholder": n || p ? void 0 : c
+                    }
+                  ),
+                  /* @__PURE__ */ k("div", { className: e["right-addons-content"], children: [
+                    d && !n && !p && /* @__PURE__ */ u(
+                      "span",
+                      {
+                        className: e["required-mark"],
+                        "data-testid": "required-mark"
+                      }
+                    ),
+                    C && !!n && /* @__PURE__ */ u(
+                      ot,
+                      {
+                        className: e.clear,
+                        iconName: m === "l" ? "Close16px" : "Close12px",
+                        size: m === "l" ? "l" : "m-s",
+                        variant: "transparent",
+                        disabled: r,
+                        "data-testid": "clear-button",
+                        "data-minibutton": !0,
+                        onMouseDown: (t) => {
+                          t.preventDefault();
+                        },
+                        onClick: X
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            A && /* @__PURE__ */ u("div", { className: f(e.message, e[M ?? ""]), children: A })
+          ]
+        }
+      );
+    }
+  )
+);
+gt.displayName = "TextArea";
+export {
+  gt as TextArea
+};

package/dist/components/TextAreaV2/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const enum ETextAreaSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}
+export declare const enum ETextAreaStatus {
+    Alarm = "alarm",
+    Success = "success",
+    Error = "error"
+}
+export declare enum ETextAreaVariant {
+    DefaultGray = "default-gray",
+    DefaultWhite = "default-white"
+}
+export declare const LINE_HEIGHTS_MAP: Record<ETextAreaSize, number>;
+export declare const PADDINGS_MAP: Record<ETextAreaSize, number>;

package/dist/components/TextAreaV2/constants.js

@@ -0,0 +1,17 @@
+var l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {}), s = /* @__PURE__ */ ((r) => (r.Alarm = "alarm", r.Success = "success", r.Error = "error", r))(s || {}), u = /* @__PURE__ */ ((r) => (r.DefaultGray = "default-gray", r.DefaultWhite = "default-white", r))(u || {});
+const c = {
+  s: 1.5,
+  m: 1.2,
+  l: 1.4
+}, m = {
+  s: 14,
+  m: 14,
+  l: 18
+};
+export {
+  l as ETextAreaSize,
+  s as ETextAreaStatus,
+  u as ETextAreaVariant,
+  c as LINE_HEIGHTS_MAP,
+  m as PADDINGS_MAP
+};

package/dist/components/TextAreaV2/index.d.ts

@@ -0,0 +1,3 @@
+export { TextArea } from './TextArea';
+export type { TProps as TextAreaV2Props } from './types';
+export { ETextAreaSize, ETextAreaStatus, ETextAreaVariant } from './constants';

package/dist/components/TextAreaV2/index.js

@@ -0,0 +1,8 @@
+import { TextArea as t } from "./TextArea.js";
+import { ETextAreaSize as x, ETextAreaStatus as o, ETextAreaVariant as A } from "./constants.js";
+export {
+  x as ETextAreaSize,
+  o as ETextAreaStatus,
+  A as ETextAreaVariant,
+  t as TextArea
+};

package/dist/components/TextAreaV2/types.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { ETextAreaSize, ETextAreaStatus, ETextAreaVariant } from './constants';
+import { TIcon } from '../../icons';
+
+type TTextAddon = {
+    addonType?: 'text';
+    addonContent: string;
+};
+export type TIconAddon = {
+    addonType?: 'icon';
+    addonContent: TIcon;
+};
+export type TReactNodeAddon = {
+    addonType?: 'react-node';
+    addonContent: ReactNode;
+};
+export type TTextAreaV2Addon = TTextAddon | TIconAddon | TReactNodeAddon;
+export type TProps = {
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки текстового поля.
+     */
+    wrapperClassName?: string;
+    /**
+     * Дополнительный класс для контейнера текстового поля.
+     */
+    containerClassName?: string;
+    /**
+     * Текстовое описание поля ввода.
+     */
+    label?: string;
+    /**
+     * Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.
+     */
+    variant?: ETextAreaVariant | `${ETextAreaVariant}`;
+    /**
+     * Статус ввода. Может быть 'alarm', 'success', 'error'.
+     */
+    status?: ETextAreaStatus | `${ETextAreaStatus}`;
+    /**
+     * Размер текстового поля.
+     */
+    size?: ETextAreaSize | `${ETextAreaSize}`;
+    /**
+     * Флаг, опредляющий, что поле ввода обязательно для заполнения.
+     */
+    required?: boolean;
+    /**
+     * Флаг, опредляющий, что поле ввода недоступно для заполнения и манипуляций.
+     */
+    disabled?: boolean;
+    /**
+     * Флаг, опредляющий, что при первом рендере будет установлен фокус.
+     */
+    autofocus?: boolean;
+    /**
+     * Флаг, опредляющий показ кнопки для очистки текстового поля.
+     */
+    withClearButton?: boolean;
+    /**
+     * Информационное сообщение под текстовым полем.
+     */
+    message?: ReactNode;
+    /**
+     * Значение текстового поля (контролируемый режим)
+     */
+    value?: string;
+    /**
+     * Колбэк изменения значения (контролируемый режим)
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Максимальное количество символов
+     */
+    maxLength?: number;
+    /**
+     * Максимальное количество строк (ограничение по высоте)
+     */
+    maxRows?: number;
+    /**
+     * Дополнительный слот слева.
+     */
+    leftAddon?: TIconAddon;
+};
+export {};

package/dist/components/TextAreaV2/utils.d.ts

@@ -0,0 +1,10 @@
+import { ETextAreaSize } from './constants';
+
+export declare const escapeHtml: (str: string) => string;
+export declare const clampByMaxLength: (text: string, maxLength?: number) => string;
+export declare const placeCaretAtEnd: (editableNode?: HTMLDivElement | null) => void;
+export declare const getMaxHeightStyle: (size: ETextAreaSize | `${ETextAreaSize}`, maxRows?: number) => {
+    readonly maxHeight: `calc(${number}em + ${number}px)`;
+} | undefined;
+export declare const getCurrentText: (editableNode?: HTMLDivElement | null) => string;
+export declare const setEditableText: (next: string, editableNode?: HTMLDivElement | null) => void;

package/dist/components/TextAreaV2/utils.js

@@ -0,0 +1,36 @@
+import { LINE_HEIGHTS_MAP as c, PADDINGS_MAP as l } from "./constants.js";
+const g = (n) => n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), o = (n, e) => typeof e == "number" && e >= 0 ? n.slice(0, e) : n, s = (n) => {
+  if (!n) return;
+  const e = document.createRange();
+  e.selectNodeContents(n), e.collapse(!1);
+  const r = window.getSelection();
+  r && (r.removeAllRanges(), r.addRange(e));
+}, i = (n, e) => {
+  if (!e) return;
+  const r = c[n], t = l[n];
+  return {
+    maxHeight: `calc(${e * r}em + ${t}px)`
+  };
+}, p = (n) => {
+  if (!n) return "";
+  let e = (n.innerText || "").replace(/\r\n|\r/g, `
+`);
+  return (e === `
+` || n.innerHTML === "<br>") && (e = ""), e;
+}, u = (n, e) => {
+  if (!e) return;
+  if (n.length === 0) {
+    e.innerHTML = "";
+    return;
+  }
+  const r = g(n).replace(/\n/g, "<br>");
+  e.innerHTML = r;
+};
+export {
+  o as clampByMaxLength,
+  g as escapeHtml,
+  p as getCurrentText,
+  i as getMaxHeightStyle,
+  s as placeCaretAtEnd,
+  u as setEditableText
+};

package/dist/components/index.d.ts

@@ -80,3 +80,8 @@ export { CardTrail } from './CardTrail';
 export { ClearButton } from './InputClearButton';
 export { CopyText } from './CopyText';
 export type { TCopyTextProps } from './CopyText';
+export { TextArea as TextAreaV2 } from './TextAreaV2';
+export type { ETextAreaSize, ETextAreaStatus, ETextAreaVariant, TextAreaV2Props } from './TextAreaV2';
+export { MiniButton } from './MiniButton';
+export { EMiniButtonSize, EMiniButtonVariant } from './MiniButton';
+export type { TMiniButton } from './MiniButton';