mimir-ui-kit 1.38.36 → 1.38.39

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,224 @@
+import { jsxs as B, jsx as r } from "react/jsx-runtime";
+import { c as o } from "../../index-DIxK0V-G.js";
+import { memo as Q, forwardRef as U, useState as F, useRef as X, useEffect as Y } from "react";
+import { useAutoResizeTextArea as Z } from "./hooks.js";
+import { useMergeRefs as $ } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { Icon as ee } from "../../icons/Icon.js";
+import { Button as te } from "../Button/Button.js";
+import { c as e } from "../../Input-DAmc_HxO.js";
+import { EInputVariant as ae } from "../Input/constants.js";
+import '../../assets/TextArea.css';const re = "_textarea_rk5xe_2", se = "_clear_rk5xe_11", le = "_label_rk5xe_26", ne = "_s_rk5xe_71", oe = "_m_rk5xe_84", ce = "_l_rk5xe_26", t = {
+  "textarea-wrapper": "_textarea-wrapper_rk5xe_2",
+  textarea: re,
+  "has-label": "_has-label_rk5xe_8",
+  clear: se,
+  "required-mark": "_required-mark_rk5xe_15",
+  label: le,
+  "label-text": "_label-text_rk5xe_42",
+  "has-right-slot": "_has-right-slot_rk5xe_46",
+  "has-required": "_has-required_rk5xe_49",
+  "has-left-slot": "_has-left-slot_rk5xe_55",
+  "active-label": "_active-label_rk5xe_58",
+  s: ne,
+  m: oe,
+  l: ce,
+  "input-s": "_input-s_rk5xe_110",
+  "input-m": "_input-m_rk5xe_118",
+  "input-l": "_input-l_rk5xe_126"
+}, j = (a) => {
+  var p, c;
+  if (!a)
+    return null;
+  switch (a.addonType) {
+    case "icon": {
+      const x = (p = a.addonContent) == null ? void 0 : p.includes("16px"), N = (c = a.addonContent) == null ? void 0 : c.includes("24px");
+      return /* @__PURE__ */ r(
+        ee,
+        {
+          style: {
+            "--icon-size": o({
+              "16px": x,
+              "24px": N
+            })
+          },
+          className: e["addon-icon"],
+          iconName: a.addonContent
+        }
+      );
+    }
+    case "text":
+      return a.addonContent;
+    default:
+      return null;
+  }
+}, ie = Q(
+  U(
+    (a, p) => {
+      const {
+        value: c,
+        className: x,
+        wrapperClassName: N,
+        variant: R = ae.DefaultGray,
+        autofocus: g,
+        readonly: s,
+        status: T,
+        id: I,
+        onFocus: C,
+        onBlur: q,
+        label: u,
+        onChange: i,
+        withClearButton: E,
+        disabled: d,
+        rightAddon: L,
+        leftAddon: S,
+        size: m = "m",
+        inputSize: v,
+        required: h,
+        ...D
+      } = a, [_, A] = F(g), [f, w] = F(!!c), l = X(null), G = $(l, p);
+      Y(() => {
+        g && A(!0);
+      }, [g]);
+      const V = Z(
+        l.current,
+        v
+      ), M = (n) => {
+        const z = n.currentTarget.value;
+        q == null || q(n), A(!1), w(!!z);
+      }, O = (n) => {
+        s || (A(!0), C == null || C(n));
+      }, P = () => {
+        l != null && l.current && (l.current.value = "", l.current.focus(), w(!1), V(), i == null || i({
+          target: { value: "" }
+        }));
+      }, W = (n) => {
+        const z = n.target.value;
+        w(!!z), V(), i == null || i(n);
+      }, b = j(S), k = j(L), H = {
+        [e.readonly]: d || s,
+        [e.focused]: _,
+        [e.disabled]: d || s,
+        [e["has-left-slot"]]: !!b,
+        [e["has-right-slot"]]: !!k,
+        [t["has-label"]]: !!u
+      }, y = _ || f || !!c, J = o(
+        e.label,
+        t.label,
+        {
+          [t["active-label"]]: y,
+          [e.disabled]: d || s,
+          [t["has-left-slot"]]: !!b,
+          [t["has-right-slot"]]: !!k,
+          [t["has-required"]]: h
+        },
+        x,
+        e[m]
+      ), K = o(
+        t.textarea,
+        e.input,
+        H,
+        x,
+        [
+          e[R],
+          t[m],
+          e[m],
+          t[v ?? ""],
+          e[T ?? ""]
+        ]
+      );
+      return /* @__PURE__ */ B(
+        "div",
+        {
+          className: o(
+            e["input-wrapper"],
+            t["textarea-wrapper"],
+            e[R],
+            e[T ?? ""],
+            t[m],
+            e[m],
+            t[v ?? ""],
+            {
+              [e.disabled]: d || s,
+              [e.focused]: _
+            },
+            N
+          ),
+          children: [
+            u && /* @__PURE__ */ B("label", { htmlFor: I, className: J, children: [
+              /* @__PURE__ */ r("span", { className: t["label-text"], children: u }),
+              h && (f || _) && /* @__PURE__ */ r(
+                "span",
+                {
+                  className: t["required-mark"],
+                  "data-testid": "required-mark"
+                }
+              )
+            ] }),
+            b && /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(e["left-slot"], {
+                  [e.focused]: y,
+                  [e["has-label"]]: !!u
+                }),
+                "data-testid": "left-addon",
+                children: b
+              }
+            ),
+            /* @__PURE__ */ r(
+              "textarea",
+              {
+                ref: G,
+                id: I,
+                className: K,
+                onFocus: O,
+                onBlur: M,
+                readOnly: s,
+                value: c,
+                onChange: W,
+                required: h,
+                ...D
+              }
+            ),
+            k && /* @__PURE__ */ r(
+              "span",
+              {
+                className: o(e["right-slot"], {
+                  [e.focused]: y,
+                  [e["has-label"]]: !!u
+                }),
+                "data-testid": "right-addon",
+                children: k
+              }
+            ),
+            h && !f && !_ && /* @__PURE__ */ r(
+              "span",
+              {
+                className: t["required-mark"],
+                "data-testid": "required-mark"
+              }
+            ),
+            E && f && /* @__PURE__ */ r(
+              te,
+              {
+                tabIndex: -1,
+                className: o(e.clear, t.clear),
+                isIconButton: !0,
+                iconName: "Close16px",
+                size: "m-s",
+                clear: !0,
+                disabled: d || s,
+                variant: "secondary-gray",
+                onClick: P
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+ie.displayName = "TextArea";
+export {
+  ie as TextArea
+};

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

@@ -0,0 +1,5 @@
+export declare enum ETextAreaInputSize {
+    InputS = "input-s",
+    InputM = "input-m",
+    InputL = "input-l"
+}

package/dist/components/TextArea/constants.js

@@ -0,0 +1,4 @@
+var p = /* @__PURE__ */ ((n) => (n.InputS = "input-s", n.InputM = "input-m", n.InputL = "input-l", n))(p || {});
+export {
+  p as ETextAreaInputSize
+};

package/dist/components/TextArea/hooks.d.ts

@@ -0,0 +1,3 @@
+import { ETextAreaInputSize } from './constants';
+
+export declare const useAutoResizeTextArea: (textArea: HTMLTextAreaElement | null, inputSize?: ETextAreaInputSize | `${ETextAreaInputSize}`) => () => void;

package/dist/components/TextArea/hooks.js

@@ -0,0 +1,15 @@
+import { useCallback as e } from "react";
+const i = (h, l) => e(() => {
+  if (h) {
+    if (!h.value.length && !l) {
+      h.style.height = "auto";
+      return;
+    }
+    h.style.height = "var(--textarea-height)";
+    const s = h.scrollHeight;
+    h.style.height = `${s}px`;
+  }
+}, [l, h]);
+export {
+  i as useAutoResizeTextArea
+};

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

@@ -0,0 +1,2 @@
+export { TextArea, type TProps as TTextAreaProps } from './TextArea';
+export { ETextAreaInputSize } from './constants';

package/dist/components/TextArea/index.js

@@ -0,0 +1,6 @@
+import { TextArea as t } from "./TextArea.js";
+import { ETextAreaInputSize as x } from "./constants.js";
+export {
+  x as ETextAreaInputSize,
+  t as TextArea
+};

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

@@ -0,0 +1,6 @@
+import { TextareaHTMLAttributes } from 'react';
+import { ETextAreaInputSize } from './constants';
+
+export type TTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly' | 'size'> & {
+    inputSize?: `${ETextAreaInputSize}` | ETextAreaInputSize;
+};

package/dist/components/Timer/Timer.d.ts

@@ -0,0 +1,24 @@
+type TProps = {
+    /**
+     *  число, которое представляет собой временную метку, указывающую время, когда истекает таймер.
+     * const timer = new Date().getTime() + 60000; => таймер на 1 минуту
+     */
+    expiryTimestamp: number;
+    /**
+     * необязательное свойство типа boolean, которое указывает, должен ли таймер начинаться автоматически при создании компонента.
+     */
+    autoStart?: boolean;
+    /**
+     * необязательная функция, которая вызывается, когда таймер истекает.
+     */
+    onTimerEnd?: () => void;
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+};
+/**
+ *  Компонент Timer отображает таймер с отсчетом времени в минутах и секундах.
+ */
+export declare const Timer: import('react').MemoExoticComponent<({ expiryTimestamp, autoStart, onTimerEnd, className }: TProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Timer/Timer.js

@@ -0,0 +1,23 @@
+import { jsxs as c } from "react/jsx-runtime";
+import { c as a } from "../../index-DIxK0V-G.js";
+import { memo as d } from "react";
+import { useTimer as p } from "../../hooks/useTimer/index.js";
+import '../../assets/Timer.css';const f = "_timer_un9th_3", l = {
+  timer: f
+}, g = d(
+  ({ expiryTimestamp: t, autoStart: r = !1, onTimerEnd: s, className: e }) => {
+    const { minutes: m, seconds: o } = p({
+      expiryTimestamp: t,
+      onExpire: s,
+      autoStart: r
+    }), i = String(m).padStart(2, "0"), n = String(o).padStart(2, "0");
+    return /* @__PURE__ */ c("div", { className: a(l.timer, e), children: [
+      i,
+      ":",
+      n
+    ] });
+  }
+);
+export {
+  g as Timer
+};

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

@@ -0,0 +1 @@
+export { Timer } from './Timer';

package/dist/components/Timer/index.js

@@ -0,0 +1,4 @@
+import { Timer as m } from "./Timer.js";
+export {
+  m as Timer
+};

package/dist/components/Toasts/ProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { TProps as TToastProps } from './Toast';
+
+type TProps = Pick<TToastProps, 'duration' | 'variant'>;
+export declare const ProgressBar: import('react').MemoExoticComponent<({ duration, variant }: TProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Toasts/ProgressBar.js

@@ -0,0 +1,8 @@
+import "react/jsx-runtime";
+import "../../index-DIxK0V-G.js";
+import "react";
+import "./constants.js";
+import { P as s } from "../../ProgressBar-DEFs1tWq.js";
+export {
+  s as ProgressBar
+};

package/dist/components/Toasts/Toast.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode, RefObject } from 'react';
+import { EToastVariant, EToastPosition } from './constants';
+
+export type TProps = {
+    /**
+     * Идентификатор уведомления.
+     */
+    id: string;
+    /**
+     * Вариант уведомления.
+     */
+    variant?: EToastVariant | `${EToastVariant}`;
+    /**
+     * Сообщение уведомления.
+     */
+    message: ReactNode;
+    /**
+     * Заголовок уведомления.
+     */
+    title: string;
+    /**
+     * Длительность уведомления.
+     */
+    duration?: number;
+    /**
+     * Позиция уведомления.
+     */
+    position?: EToastPosition | `${EToastPosition}`;
+    /**
+     * Флаг, указывающий на автоматическое закрытие уведомления.
+     */
+    autoClose?: boolean;
+    /**
+     * Флаг, указывающий на необходимость таймера.
+     */
+    needTimer?: boolean;
+    /**
+     * Флаг, указывающий на необходимость индикатора прогресса.
+     */
+    needProgress?: boolean;
+    /**
+     * Флаг, указывающий на необходимость кнопки закрытия.
+     */
+    needCloseButton?: boolean;
+    /**
+     * Функция обратного вызова, вызываемая при удалении уведомления.
+     */
+    onToastRemove?: (toastId: string, ref: RefObject<HTMLDivElement>) => void;
+    /**
+     * Слот уведомления.
+     */
+    slot?: ReactNode;
+};
+export declare const Toast: import('react').MemoExoticComponent<({ id, title, message, position, variant, duration, autoClose, needProgress, needTimer, needCloseButton, onToastRemove, slot }: TProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Toasts/Toast.js

@@ -0,0 +1,72 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as A } from "../../index-DIxK0V-G.js";
+import { memo as x, useRef as E } from "react";
+import { ANIMATION_VARIABLES_MAP as I, EToastPosition as _, EToastVariant as B, DEFAULT_TOAST_DURATION as D } from "./constants.js";
+import { c as r, P as O } from "../../ProgressBar-DEFs1tWq.js";
+import { useTimer as P } from "../../hooks/useTimer/index.js";
+import { Button as w } from "../Button/Button.js";
+const M = x(
+  ({
+    id: e,
+    title: a = "",
+    message: m,
+    position: h = _.TOP_RIGHT,
+    variant: p = B.DEFAULT,
+    duration: c = D,
+    autoClose: N = !0,
+    needProgress: n = !0,
+    needTimer: d = !0,
+    needCloseButton: u = !0,
+    onToastRemove: s,
+    slot: f
+  }) => {
+    const l = E(null), { seconds: o } = P({
+      expiryTimestamp: Date.now() + c,
+      autoStart: N,
+      onExpire: N ? () => s == null ? void 0 : s(e, l) : void 0
+    });
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          "--elm-translate": I[h]
+        },
+        className: A(
+          r["toast-in"],
+          r["toast-wrapper"],
+          r[p]
+        ),
+        ref: l,
+        role: "alert",
+        children: [
+          a && /* @__PURE__ */ t("h3", { className: r.title, children: a }),
+          m && /* @__PURE__ */ t("div", { className: r.message, children: m }),
+          (d || n) && /* @__PURE__ */ i("div", { children: [
+            !!c && d && /* @__PURE__ */ i("div", { className: r.timer, children: [
+              /* @__PURE__ */ t("h4", { className: r["timer-title"], children: "Осталось" }),
+              /* @__PURE__ */ i("p", { className: r.seconds, children: [
+                o,
+                " сек"
+              ] })
+            ] }),
+            !!c && n && /* @__PURE__ */ t(O, { variant: p, duration: c })
+          ] }),
+          u && /* @__PURE__ */ t(
+            w,
+            {
+              onClick: () => s == null ? void 0 : s(e, l),
+              clear: !0,
+              isIconButton: !0,
+              className: r["close-button"],
+              iconName: "Close24px"
+            }
+          ),
+          f && /* @__PURE__ */ t("div", { className: r.slot, children: f })
+        ]
+      }
+    );
+  }
+);
+export {
+  M as Toast
+};

package/dist/components/Toasts/ToastList.d.ts

@@ -0,0 +1,10 @@
+import { EToastPosition } from './constants';
+import { TProps as TToastProps } from './Toast';
+
+type TProps = {
+    position?: EToastPosition | `${EToastPosition}`;
+    toasts: TToastProps[];
+    onToastRemove?: (toastId: string, ref: React.RefObject<HTMLDivElement>) => void;
+};
+export declare const ToastList: import('react').MemoExoticComponent<({ toasts, position, onToastRemove }: TProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/dist/components/Toasts/ToastList.js

@@ -0,0 +1,41 @@
+import { jsx as m } from "react/jsx-runtime";
+import { c as a } from "../../index-DIxK0V-G.js";
+import { memo as e, useRef as f, useCallback as T, useEffect as u } from "react";
+import { EToastPosition as i } from "./constants.js";
+import { c as l } from "../../ProgressBar-DEFs1tWq.js";
+import { Toast as d } from "./Toast.js";
+const O = e(
+  ({ toasts: r, position: s = i.TOP_RIGHT, onToastRemove: n }) => {
+    const t = f(null), c = T(
+      (o) => {
+        [
+          i.TOP_LEFT,
+          i.TOP_RIGHT
+        ].includes(s) ? o == null || o.scrollTo(0, o.scrollHeight) : o == null || o.scrollTo(0, 0);
+      },
+      [s]
+    );
+    return u(() => {
+      t.current && c(t.current);
+    }, [c, r]), r.length ? /* @__PURE__ */ m(
+      "div",
+      {
+        ref: t,
+        className: a(l["toast-list"], l[s]),
+        "data-testid": "toast-list",
+        children: r.map((o) => /* @__PURE__ */ m(
+          d,
+          {
+            position: s,
+            onToastRemove: n,
+            ...o
+          },
+          o.id
+        ))
+      }
+    ) : null;
+  }
+);
+export {
+  O as ToastList
+};

package/dist/components/Toasts/ToastsProvider.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+
+export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toasts/ToastsProvider.js

@@ -0,0 +1,42 @@
+import { jsxs as R, jsx as T } from "react/jsx-runtime";
+import { useReducer as u, useCallback as m, useMemo as l } from "react";
+import { EToastVariant as o } from "./constants.js";
+import { ToastContext as E } from "./hooks.js";
+import { reducer as A, initialState as C, actionCreators as c } from "./store.js";
+import { c as L } from "../../ProgressBar-DEFs1tWq.js";
+import { ToastList as S } from "./ToastList.js";
+const O = ({ children: d }) => {
+  const [i, r] = u(A, C), a = m((t) => {
+    r(c.setToasts(t));
+  }, []), p = l(
+    () => ({
+      [o.DEFAULT]: (t) => a({ variant: o.DEFAULT, ...t }),
+      [o.SUCCESS]: (t) => a({ variant: o.SUCCESS, ...t }),
+      [o.ALARM]: (t) => a({ variant: o.ALARM, ...t }),
+      [o.ERROR]: (t) => a({ variant: o.ERROR, ...t })
+    }),
+    [a]
+  ), v = m(
+    (t, s) => {
+      var n, e;
+      (n = s == null ? void 0 : s.current) == null || n.classList.add(L["toast-out"]), (e = s == null ? void 0 : s.current) == null || e.addEventListener("animationend", () => {
+        r(c.removeToast(t));
+      });
+    },
+    []
+  );
+  return /* @__PURE__ */ R(E.Provider, { value: p, children: [
+    d,
+    /* @__PURE__ */ T(
+      S,
+      {
+        toasts: i.toasts,
+        onToastRemove: v,
+        position: i.position
+      }
+    )
+  ] });
+};
+export {
+  O as ToastProvider
+};

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

@@ -0,0 +1,23 @@
+export declare enum EToastVariant {
+    DEFAULT = "default",
+    ALARM = "alarm",
+    SUCCESS = "success",
+    ERROR = "error"
+}
+export declare enum EToastPosition {
+    TOP_LEFT = "top-left",
+    TOP_CENTER = "top-center",
+    TOP_RIGHT = "top-right",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM_CENTER = "bottom-center",
+    BOTTOM_LEFT = "bottom-left"
+}
+export declare const ANIMATION_VARIABLES_MAP: {
+    "top-right": string;
+    "top-center": string;
+    "top-left": string;
+    "bottom-left": string;
+    "bottom-center": string;
+    "bottom-right": string;
+};
+export declare const DEFAULT_TOAST_DURATION = 3000;

package/dist/components/Toasts/constants.js

@@ -0,0 +1,15 @@
+var e = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.ALARM = "alarm", t.SUCCESS = "success", t.ERROR = "error", t))(e || {}), r = /* @__PURE__ */ ((t) => (t.TOP_LEFT = "top-left", t.TOP_CENTER = "top-center", t.TOP_RIGHT = "top-right", t.BOTTOM_RIGHT = "bottom-right", t.BOTTOM_CENTER = "bottom-center", t.BOTTOM_LEFT = "bottom-left", t))(r || {});
+const p = {
+  "top-right": "translateX(1000px)",
+  "top-center": "translateY(-1300px)",
+  "top-left": "translateX(-1000px)",
+  "bottom-left": "translateX(-1000px)",
+  "bottom-center": "translateY(1300px)",
+  "bottom-right": "translateX(1000px)"
+}, O = 3e3;
+export {
+  p as ANIMATION_VARIABLES_MAP,
+  O as DEFAULT_TOAST_DURATION,
+  r as EToastPosition,
+  e as EToastVariant
+};

package/dist/components/Toasts/hooks.d.ts

@@ -0,0 +1,2 @@
+export declare const ToastContext: import('react').Context<import('./types').TToast>;
+export declare const useToast: () => import('./types').TToast;

package/dist/components/Toasts/hooks.js

@@ -0,0 +1,15 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  alarm: () => {
+  },
+  default: () => {
+  },
+  error: () => {
+  },
+  success: () => {
+  }
+}), r = () => e(o);
+export {
+  o as ToastContext,
+  r as useToast
+};

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

@@ -0,0 +1,3 @@
+export { ToastProvider } from './ToastsProvider';
+export { useToast } from './hooks';
+export { EToastPosition, EToastVariant } from './constants';

package/dist/components/Toasts/index.js

@@ -0,0 +1,9 @@
+import { ToastProvider as t } from "./ToastsProvider.js";
+import { useToast as s } from "./hooks.js";
+import { EToastPosition as i, EToastVariant as T } from "./constants.js";
+export {
+  i as EToastPosition,
+  T as EToastVariant,
+  t as ToastProvider,
+  s as useToast
+};