mimir-ui-kit 1.43.17 → 1.43.19

package/dist/components/Drawer/Drawer.js

@@ -1,38 +1,41 @@
-import { jsxs as f, Fragment as I, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, Fragment as oe, jsx as t } from "react/jsx-runtime";
 import { c as n } from "../../index-DIxK0V-G.js";
-import { forwardRef as q, useState as M, useRef as J, useCallback as h, useEffect as U } from "react";
-import { EDrawerPosition as O } from "./constants.js";
-import { useContainer as Z } from "./hooks.js";
-import { useMediaQuery as $ } from "../../hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as ee } from "../../hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as te } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useResizeObserver as oe } from "../../hooks/useResizeObserver/useResizeObserver.js";
-import { Button as S } from "../Button/Button.js";
-import { EButtonVariantDefault as ne, EButtonSize as r } from "../Button/constants.js";
-import { Loader as se } from "../Loader/Loader.js";
-import { Portal as re } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const ae = "_drawer_13ua6_2", ie = "_content_13ua6_26", le = "_header_13ua6_44", ce = "_title_13ua6_58", ue = "_space_13ua6_72", de = "_inner_13ua6_83", me = "_button_13ua6_86", _e = "_footer_13ua6_91", fe = "_left_13ua6_104", he = "_right_13ua6_108", pe = "_full_13ua6_112", ye = "_bottom_13ua6_122", ge = "_opened_13ua6_139", Ce = "_overlay_13ua6_195", ve = "_unmount_13ua6_211", e = {
-  drawer: ae,
-  content: ie,
-  "is-loading": "_is-loading_13ua6_40",
-  header: le,
-  "sticky-header": "_sticky-header_13ua6_52",
-  title: ce,
-  space: ue,
-  inner: de,
-  button: me,
-  footer: _e,
-  "footer-button": "_footer-button_13ua6_100",
-  left: fe,
-  right: he,
-  full: pe,
-  bottom: ye,
-  "full-bottom-height": "_full-bottom-height_13ua6_133",
-  opened: ge,
-  "is-closing": "_is-closing_13ua6_158",
-  overlay: Ce,
-  unmount: ve
-}, Ne = 300, be = (a) => a ? {
+import { forwardRef as ne, useState as z, useRef as L, useEffect as M, useCallback as g } from "react";
+import { EDrawerPosition as R } from "./constants.js";
+import { useContainer as re } from "./hooks.js";
+import { ScrollWrapper as se } from "./ScrollWrapper/index.js";
+import { useMediaQuery as ie } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery as le } from "../../hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll as ae } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useResizeObserver as ce } from "../../hooks/useResizeObserver/useResizeObserver.js";
+import { Button as H } from "../Button/Button.js";
+import { EButtonVariantDefault as ue, EButtonSize as c } from "../Button/constants.js";
+import { Loader as me } from "../Loader/Loader.js";
+import { Portal as de } from "../Portal/Portal.js";
+import { EScrollBarVariant as fe, EScrollBarSize as _e } from "../ScrollBar/constants.js";
+import '../../assets/Drawer.css';const he = "_drawer_14uzm_2", pe = "_content_14uzm_26", ze = "_header_14uzm_45", ge = "_title_14uzm_59", ye = "_space_14uzm_73", ve = "_inner_14uzm_84", be = "_button_14uzm_95", Ce = "_footer_14uzm_100", we = "_left_14uzm_116", Ne = "_right_14uzm_120", ke = "_full_14uzm_124", Se = "_bottom_14uzm_134", Be = "_opened_14uzm_151", Ee = "_overlay_14uzm_207", Ie = "_unmount_14uzm_223", e = {
+  drawer: he,
+  content: pe,
+  "is-loading": "_is-loading_14uzm_41",
+  header: ze,
+  "sticky-header": "_sticky-header_14uzm_53",
+  title: ge,
+  space: ye,
+  inner: ve,
+  button: be,
+  footer: Ce,
+  "has-scroll": "_has-scroll_14uzm_109",
+  "footer-button": "_footer-button_14uzm_112",
+  left: we,
+  right: Ne,
+  full: ke,
+  bottom: Se,
+  "full-bottom-height": "_full-bottom-height_14uzm_145",
+  opened: Be,
+  "is-closing": "_is-closing_14uzm_170",
+  overlay: Ee,
+  unmount: Ie
+}, Oe = 300, Le = (u) => u ? {
   drawer: {
     position: "absolute",
     zIndex: 100
@@ -41,120 +44,157 @@ import '../../assets/Drawer.css';const ae = "_drawer_13ua6_2", ie = "_content_13
     position: "absolute",
     zIndex: 90
   }
-} : {}, Ae = q(
-  (a, L) => {
+} : {}, Ye = ne(
+  (u, T) => {
     const {
-      as: R = "div",
-      isOpen: s,
-      onClose: i,
-      title: T,
-      className: x,
-      unmount: p = !0,
-      isLoading: l = !1,
-      stickyHeader: z,
-      fullBottomHeight: D = !1,
-      position: c = O.RIGHT,
-      paddingRight: A = 8,
-      footer: u,
-      children: H,
-      classNameTitle: P,
-      classNameHeader: X,
-      classNameInner: j,
-      classNameContent: F,
-      classNameFooter: Q,
-      closeOnClickOutside: y = !0,
-      showCloseButton: g = !0,
-      getContainer: d,
-      ...G
-    } = a, [C, v] = M(!1), [K, N] = M(!1), b = J(), m = $(ee.XS1), { ref: V } = oe({
-      enabled: c === O.BOTTOM
-    }), w = Z(d);
-    te({
-      on: s && !C,
-      paddingRight: A
+      as: x = "div",
+      isOpen: r,
+      onClose: m,
+      title: D,
+      className: A,
+      unmount: y = !0,
+      isLoading: s = !1,
+      stickyHeader: P,
+      fullBottomHeight: X = !1,
+      position: d = R.RIGHT,
+      paddingRight: j = 8,
+      footer: f,
+      children: F,
+      classNameTitle: G,
+      classNameHeader: Q,
+      classNameInner: V,
+      classNameContent: W,
+      classNameFooter: K,
+      closeOnClickOutside: v = !0,
+      showCloseButton: b = !0,
+      getContainer: _,
+      ...Y
+    } = u, [C, w] = z(!1), [q, N] = z(!1), k = L(), h = ie(le.XS1), { ref: J } = ce({
+      enabled: d === R.BOTTOM
+    }), S = re(_), i = L(null), [U, Z] = z(!1);
+    M(() => {
+      const l = () => {
+        if (i.current) {
+          const { scrollHeight: ee, clientHeight: te } = i.current;
+          Z(ee > te);
+        }
+      };
+      l();
+      const O = new ResizeObserver(l);
+      return i.current && O.observe(i.current), () => {
+        O.disconnect();
+      };
+    }, [r, s]), ae({
+      on: r && !C,
+      paddingRight: j
     });
-    const o = h(() => {
-      i && (v(!0), b.current = setTimeout(() => {
-        i(), v(!1);
-      }, Ne));
-    }, [i]), W = h(() => {
-      y && o();
-    }, [y, o]), _ = h(
-      (Y) => {
-        Y.key === "Escape" && o();
+    const o = g(() => {
+      m && (w(!0), k.current = setTimeout(() => {
+        m(), w(!1);
+      }, Oe));
+    }, [m]), $ = g(() => {
+      v && o();
+    }, [v, o]), p = g(
+      (l) => {
+        l.key === "Escape" && o();
       },
       [o]
     );
-    U(() => (s && (N(!0), window.addEventListener("keydown", _)), () => {
-      N(!1), clearTimeout(b.current), window.removeEventListener("keydown", _);
-    }), [s, _]);
-    const k = {
-      [e.opened]: K,
+    M(() => (r && (N(!0), window.addEventListener("keydown", p)), () => {
+      N(!1), clearTimeout(k.current), window.removeEventListener("keydown", p);
+    }), [r, p]);
+    const B = {
+      [e.opened]: q,
       [e["is-closing"]]: C,
-      [e["full-bottom-height"]]: D,
-      [e["is-loading"]]: l
+      [e["full-bottom-height"]]: X,
+      [e["is-loading"]]: s
     };
-    if (!s && p)
+    if (!r && y)
       return null;
-    const B = be(d !== void 0 && d !== !1), E = /* @__PURE__ */ f(I, { children: [
-      /* @__PURE__ */ t(
-        R,
+    const E = Le(_ !== void 0 && _ !== !1), I = /* @__PURE__ */ a(oe, { children: [
+      /* @__PURE__ */ a(
+        x,
         {
-          ref: L,
-          "aria-hidden": !s,
+          ref: T,
+          "aria-hidden": !r,
           role: "dialog",
-          style: B.drawer,
-          className: n(e.drawer, e[c], k, x),
-          ...G,
-          children: /* @__PURE__ */ t(
-            "section",
-            {
-              ref: V,
-              className: n(
-                e.content,
-                F,
-                e[c],
-                {
-                  [e["is-loading"]]: !!l
-                }
-              ),
-              children: l ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ f(I, { children: [
-                /* @__PURE__ */ f(
-                  "header",
+          style: E.drawer,
+          className: n(e.drawer, e[d], B, A),
+          ...Y,
+          children: [
+            /* @__PURE__ */ a(
+              "section",
+              {
+                ref: J,
+                className: n(
+                  e.content,
+                  W,
+                  e[d],
                   {
-                    className: n(e.header, X, {
-                      [e["sticky-header"]]: z
-                    }),
-                    children: [
-                      /* @__PURE__ */ t("h2", { className: n(e.title, P), children: T }),
-                      /* @__PURE__ */ t("div", { className: e.space, children: g && /* @__PURE__ */ t(
-                        S,
-                        {
-                          variant: ne.SecondaryWhite,
-                          isIconButton: !0,
-                          size: m ? r.S : r.M,
-                          iconName: "Close16px",
-                          onClick: o,
-                          className: e.button
-                        }
-                      ) })
-                    ]
+                    [e["is-loading"]]: !!s
                   }
                 ),
-                /* @__PURE__ */ t("div", { className: n(e.inner, j), children: H }),
-                /* @__PURE__ */ t("footer", { className: n(e.footer, Q), children: typeof u == "function" ? u({ handleClose: o }) : u || g && /* @__PURE__ */ t(
-                  S,
+                children: [
+                  /* @__PURE__ */ a(
+                    "header",
+                    {
+                      className: n(e.header, Q, {
+                        [e["sticky-header"]]: P
+                      }),
+                      children: [
+                        /* @__PURE__ */ t("h2", { className: n(e.title, G), children: D }),
+                        /* @__PURE__ */ t("div", { className: e.space, children: b && /* @__PURE__ */ t(
+                          H,
+                          {
+                            variant: ue.SecondaryWhite,
+                            isIconButton: !0,
+                            size: h ? c.S : c.M,
+                            iconName: "Close16px",
+                            onClick: o,
+                            className: e.button
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    se,
+                    {
+                      ref: i,
+                      className: n(
+                        e.inner,
+                        {
+                          [e["is-loading"]]: !!s
+                        },
+                        V
+                      ),
+                      variant: fe.LIGHT,
+                      size: _e.M,
+                      children: s ? /* @__PURE__ */ t(me, {}) : F
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(
+              "footer",
+              {
+                className: n(e.footer, K, {
+                  [e["has-scroll"]]: U
+                }),
+                children: typeof f == "function" ? f({ handleClose: o }) : f || b && /* @__PURE__ */ t(
+                  H,
                   {
-                    size: m ? r.M : r.XXL,
-                    full: m,
+                    size: h ? c.L : c.XXL,
+                    full: h,
                     onClick: o,
                     className: e["footer-button"],
                     children: "Закрыть"
                   }
-                ) })
-              ] })
-            }
-          )
+                )
+              }
+            )
+          ]
         }
       ),
       /* @__PURE__ */ t(
@@ -163,20 +203,20 @@ import '../../assets/Drawer.css';const ae = "_drawer_13ua6_2", ie = "_content_13
           className: n(
             e.overlay,
             {
-              [e.unmount]: !p
+              [e.unmount]: !y
             },
-            k
+            B
           ),
-          style: B.overlay,
+          style: E.overlay,
           "data-testid": "drawer-overlay",
-          onClick: W
+          onClick: $
         }
       )
     ] });
-    return w === !1 ? E : /* @__PURE__ */ t(re, { element: w, children: E });
+    return S === !1 ? I : /* @__PURE__ */ t(de, { element: S, children: I });
   }
 );
 export {
-  Ne as ANIMATION_DELAY,
-  Ae as Drawer
+  Oe as ANIMATION_DELAY,
+  Ye as Drawer
 };

package/dist/components/Drawer/ScrollWrapper/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { EScrollBarSize, EScrollBarVariant } from '../../ScrollBar/constants';
+
+type TProps = {
+    children: React.ReactNode;
+    className?: string;
+    variant?: `${EScrollBarVariant}`;
+    size?: `${EScrollBarSize}`;
+};
+export declare const ScrollWrapper: React.ForwardRefExoticComponent<TProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Drawer/ScrollWrapper/index.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as t } from "../../../index-DIxK0V-G.js";
+import { forwardRef as i } from "react";
+import { EScrollBarVariant as e, EScrollBarSize as m } from "../../ScrollBar/constants.js";
+import '../../../assets/index2.css';const n = {
+  "scroll-container": "_scroll-container_7yixd_2"
+}, p = i(
+  ({
+    children: r,
+    className: a,
+    variant: o = e.LIGHT,
+    size: l = m.M
+  }, c) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: c,
+      className: t(n["scroll-container"], a),
+      "data-variant": o,
+      "data-size": l,
+      children: r
+    }
+  )
+);
+p.displayName = "ScrollWrapper";
+export {
+  p as ScrollWrapper
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.43.17",
+  "version": "1.43.19",
   "type": "module",
   "exports": {
     ".": {