mimir-ui-kit 1.36.9 → 1.36.11

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

@@ -57,9 +57,17 @@ type TProps = {
      * Дополнительный класс для footer.
      */
     classNameFooter?: string;
+    /**
+     * Флаг, определяющий, закрывать ли Drawer при клике вне его области
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Флаг, определяющий, показывать ли кнопку закрытия в заголовке
+     */
+    showCloseButton?: boolean;
 };
 /**
  * Компонент шторки, который может выезжать слева, справа или внизу.
  */
-export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children, classNameInner, classNameFooter }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children, classNameInner, classNameFooter, closeOnClickOutside, showCloseButton }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Drawer/Drawer.js

@@ -1,93 +1,97 @@
-import { jsxs as m, jsx as t, Fragment as A } from "react/jsx-runtime";
+import { jsxs as m, jsx as t, Fragment as X } from "react/jsx-runtime";
 import { c as s } from "../../index-DIxK0V-G.js";
-import { useState as u, useRef as X, useCallback as g, useEffect as j } from "react";
-import { EDrawerPosition as v } from "./constants.js";
-import { useMediaQuery as P } from "../../hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as Q } from "../../hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as F } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useResizeObserver as G } from "../../hooks/useResizeObserver/useResizeObserver.js";
-import { Button as w } from "../Button/Button.js";
-import { EButtonVariantDefault as H, EButtonSize as n } from "../Button/constants.js";
-import { Loader as K } from "../Loader/Loader.js";
-import { Portal as O } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4d_27", Y = "_header_1xs4d_45", q = "_title_1xs4d_59", J = "_space_1xs4d_73", U = "_inner_1xs4d_84", Z = "_button_1xs4d_87", $ = "_footer_1xs4d_92", ee = "_left_1xs4d_105", te = "_right_1xs4d_109", oe = "_full_1xs4d_113", se = "_bottom_1xs4d_123", re = "_opened_1xs4d_140", ne = "_overlay_1xs4d_196", le = "_unmount_1xs4d_212", e = {
-  drawer: V,
-  content: W,
+import { useState as N, useRef as j, useCallback as u, useEffect as P } from "react";
+import { EDrawerPosition as w } from "./constants.js";
+import { useMediaQuery as Q } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery as F } from "../../hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll as G } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useResizeObserver as H } from "../../hooks/useResizeObserver/useResizeObserver.js";
+import { Button as k } from "../Button/Button.js";
+import { EButtonVariantDefault as K, EButtonSize as n } from "../Button/constants.js";
+import { Loader as V } from "../Loader/Loader.js";
+import { Portal as W } from "../Portal/Portal.js";
+import '../../assets/Drawer.css';const Y = "_drawer_1xs4d_3", q = "_content_1xs4d_27", J = "_header_1xs4d_45", U = "_title_1xs4d_59", Z = "_space_1xs4d_73", $ = "_inner_1xs4d_84", O = "_button_1xs4d_87", ee = "_footer_1xs4d_92", te = "_left_1xs4d_105", oe = "_right_1xs4d_109", se = "_full_1xs4d_113", re = "_bottom_1xs4d_123", ne = "_opened_1xs4d_140", ae = "_overlay_1xs4d_196", ie = "_unmount_1xs4d_212", e = {
+  drawer: Y,
+  content: q,
   "is-loading": "_is-loading_1xs4d_41",
-  header: Y,
+  header: J,
   "sticky-header": "_sticky-header_1xs4d_53",
-  title: q,
-  space: J,
-  inner: U,
-  button: Z,
-  footer: $,
+  title: U,
+  space: Z,
+  inner: $,
+  button: O,
+  footer: ee,
   "footer-button": "_footer-button_1xs4d_101",
-  left: ee,
-  right: te,
-  full: oe,
-  bottom: se,
+  left: te,
+  right: oe,
+  full: se,
+  bottom: re,
   "full-bottom-height": "_full-bottom-height_1xs4d_134",
-  opened: re,
+  opened: ne,
   "is-closing": "_is-closing_1xs4d_159",
-  overlay: ne,
-  unmount: le
-}, ie = 300, ge = ({
+  overlay: ae,
+  unmount: ie
+}, le = 300, ve = ({
   isOpen: r,
-  onClose: l,
-  title: N,
-  className: k,
+  onClose: a,
+  title: E,
+  className: M,
   unmount: f = !0,
   isLoading: i = !1,
   stickyHeader: B,
-  fullBottomHeight: E = !1,
-  position: a = v.RIGHT,
-  paddingRight: M = 8,
+  fullBottomHeight: I = !1,
+  position: l = w.RIGHT,
+  paddingRight: S = 8,
   footer: c,
-  children: S,
-  classNameInner: I,
-  classNameFooter: C
+  children: T,
+  classNameInner: C,
+  classNameFooter: D,
+  closeOnClickOutside: h = !0,
+  showCloseButton: x = !0
 }) => {
-  const [L, h] = u(!1), [T, x] = u(!1), [D, p] = u(!1), y = X(), d = P(Q.XS1), { ref: z } = G({
-    enabled: a === v.BOTTOM
+  const [p, y] = N(!1), [z, b] = N(!1), g = j(), d = Q(F.XS1), { ref: L } = H({
+    enabled: l === w.BOTTOM
   });
-  F({
-    on: D,
-    paddingRight: M
+  G({
+    on: r && !p,
+    paddingRight: S
   });
-  const o = g(() => {
-    l && (h(!0), p(!1), y.current = setTimeout(() => {
-      l(), h(!1);
-    }, ie));
-  }, [l]), _ = g(
-    (R) => {
-      R.key === "Escape" && o();
+  const o = u(() => {
+    a && (y(!0), g.current = setTimeout(() => {
+      a(), y(!1);
+    }, le));
+  }, [a]), R = u(() => {
+    h && o();
+  }, [h, o]), _ = u(
+    (A) => {
+      A.key === "Escape" && o();
     },
     [o]
   );
-  j(() => (r && (p(!0), x(!0), window.addEventListener("keydown", _)), () => {
-    x(!1), clearTimeout(y.current), window.removeEventListener("keydown", _);
+  P(() => (r && (b(!0), window.addEventListener("keydown", _)), () => {
+    b(!1), clearTimeout(g.current), window.removeEventListener("keydown", _);
   }), [r, _]);
-  const b = {
-    [e.opened]: T,
-    [e["is-closing"]]: L,
-    [e["full-bottom-height"]]: E,
+  const v = {
+    [e.opened]: z,
+    [e["is-closing"]]: p,
+    [e["full-bottom-height"]]: I,
     [e["is-loading"]]: i
   };
-  return !r && f ? null : /* @__PURE__ */ m(O, { children: [
+  return !r && f ? null : /* @__PURE__ */ m(W, { children: [
     /* @__PURE__ */ t(
       "div",
       {
         "aria-hidden": !r,
         role: "dialog",
-        className: s(e.drawer, e[a], b, k),
+        className: s(e.drawer, e[l], v, M),
         children: /* @__PURE__ */ t(
           "section",
           {
-            ref: z,
-            className: s(e.content, e[a], {
+            ref: L,
+            className: s(e.content, e[l], {
               [e["is-loading"]]: !!i
             }),
-            children: i ? /* @__PURE__ */ t(K, {}) : /* @__PURE__ */ m(A, { children: [
+            children: i ? /* @__PURE__ */ t(V, {}) : /* @__PURE__ */ m(X, { children: [
               /* @__PURE__ */ m(
                 "header",
                 {
@@ -95,11 +99,11 @@ import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4
                     [e["sticky-header"]]: B
                   }),
                   children: [
-                    /* @__PURE__ */ t("h2", { className: e.title, children: N }),
-                    /* @__PURE__ */ t("div", { className: e.space, children: /* @__PURE__ */ t(
-                      w,
+                    /* @__PURE__ */ t("h2", { className: e.title, children: E }),
+                    /* @__PURE__ */ t("div", { className: e.space, children: x && /* @__PURE__ */ t(
+                      k,
                       {
-                        variant: H.SecondaryWhite,
+                        variant: K.SecondaryWhite,
                         isIconButton: !0,
                         size: d ? n.S : n.M,
                         iconName: "Close16px",
@@ -110,9 +114,9 @@ import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4
                   ]
                 }
               ),
-              /* @__PURE__ */ t("div", { className: s(e.inner, I), children: S }),
-              /* @__PURE__ */ t("footer", { className: s(e.footer, C), children: typeof c == "function" ? c({ handleClose: o }) : c || /* @__PURE__ */ t(
-                w,
+              /* @__PURE__ */ t("div", { className: s(e.inner, C), children: T }),
+              /* @__PURE__ */ t("footer", { className: s(e.footer, D), children: typeof c == "function" ? c({ handleClose: o }) : c || x && /* @__PURE__ */ t(
+                k,
                 {
                   size: d ? n.M : n.XXL,
                   full: d,
@@ -134,15 +138,15 @@ import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4
           {
             [e.unmount]: !f
           },
-          b
+          v
         ),
         "data-testid": "drawer-overlay",
-        onClick: o
+        onClick: R
       }
     )
   ] });
 };
 export {
-  ie as ANIMATION_DELAY,
-  ge as Drawer
+  le as ANIMATION_DELAY,
+  ve as Drawer
 };

package/package.json

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