mimir-ui-kit 1.42.2 → 1.43.0

package/dist/components/Drawer/Drawer.js

@@ -1,139 +1,153 @@
-import { jsxs as m, jsx as o, Fragment as G } from "react/jsx-runtime";
+import { jsxs as f, Fragment as I, jsx as t } from "react/jsx-runtime";
 import { c as n } from "../../index-DIxK0V-G.js";
-import { forwardRef as K, useState as v, useRef as V, useCallback as _, useEffect as W } from "react";
-import { EDrawerPosition as k } from "./constants.js";
-import { useMediaQuery as Y } from "../../hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as q } from "../../hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as J } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useResizeObserver as U } from "../../hooks/useResizeObserver/useResizeObserver.js";
-import { Button as C } from "../Button/Button.js";
-import { EButtonVariantDefault as Z, EButtonSize as a } from "../Button/constants.js";
-import { Loader as $ } from "../Loader/Loader.js";
-import { Portal as ee } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const oe = "_drawer_13ua6_2", te = "_content_13ua6_26", ne = "_header_13ua6_44", se = "_title_13ua6_58", ae = "_space_13ua6_72", re = "_inner_13ua6_83", ie = "_button_13ua6_86", le = "_footer_13ua6_91", ce = "_left_13ua6_104", ue = "_right_13ua6_108", de = "_full_13ua6_112", me = "_bottom_13ua6_122", _e = "_opened_13ua6_139", fe = "_overlay_13ua6_195", he = "_unmount_13ua6_211", e = {
-  drawer: oe,
-  content: te,
+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: ne,
+  header: le,
   "sticky-header": "_sticky-header_13ua6_52",
-  title: se,
-  space: ae,
-  inner: re,
-  button: ie,
-  footer: le,
+  title: ce,
+  space: ue,
+  inner: de,
+  button: me,
+  footer: _e,
   "footer-button": "_footer-button_13ua6_100",
-  left: ce,
-  right: ue,
-  full: de,
-  bottom: me,
+  left: fe,
+  right: he,
+  full: pe,
+  bottom: ye,
   "full-bottom-height": "_full-bottom-height_13ua6_133",
-  opened: _e,
+  opened: ge,
   "is-closing": "_is-closing_13ua6_158",
-  overlay: fe,
-  unmount: he
-}, pe = 300, Ie = K(
-  (B, E) => {
+  overlay: Ce,
+  unmount: ve
+}, Ne = 300, be = (a) => a ? {
+  drawer: {
+    position: "absolute",
+    zIndex: 100
+  },
+  overlay: {
+    position: "absolute",
+    zIndex: 90
+  }
+} : {}, Ae = q(
+  (a, L) => {
     const {
-      as: M = "div",
+      as: R = "div",
       isOpen: s,
-      onClose: r,
-      title: O,
-      className: I,
-      unmount: f = !0,
-      isLoading: i = !1,
-      stickyHeader: L,
-      fullBottomHeight: R = !1,
-      position: l = k.RIGHT,
-      paddingRight: T = 8,
-      footer: c,
-      children: S,
-      classNameTitle: D,
-      classNameHeader: x,
-      classNameInner: z,
-      classNameContent: H,
-      classNameFooter: A,
-      closeOnClickOutside: h = !0,
-      showCloseButton: p = !0,
-      ...P
-    } = B, [g, N] = v(!1), [X, y] = v(!1), b = V(), u = Y(q.XS1), { ref: j } = U({
-      enabled: l === k.BOTTOM
-    });
-    J({
-      on: s && !g,
-      paddingRight: T
+      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
     });
-    const t = _(() => {
-      r && (N(!0), b.current = setTimeout(() => {
-        r(), N(!1);
-      }, pe));
-    }, [r]), F = _(() => {
-      h && t();
-    }, [h, t]), d = _(
-      (Q) => {
-        Q.key === "Escape" && t();
+    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();
       },
-      [t]
+      [o]
     );
-    W(() => (s && (y(!0), window.addEventListener("keydown", d)), () => {
-      y(!1), clearTimeout(b.current), window.removeEventListener("keydown", d);
-    }), [s, d]);
-    const w = {
-      [e.opened]: X,
-      [e["is-closing"]]: g,
-      [e["full-bottom-height"]]: R,
-      [e["is-loading"]]: i
+    U(() => (s && (N(!0), window.addEventListener("keydown", _)), () => {
+      N(!1), clearTimeout(b.current), window.removeEventListener("keydown", _);
+    }), [s, _]);
+    const k = {
+      [e.opened]: K,
+      [e["is-closing"]]: C,
+      [e["full-bottom-height"]]: D,
+      [e["is-loading"]]: l
     };
-    return !s && f ? null : /* @__PURE__ */ m(ee, { children: [
-      /* @__PURE__ */ o(
-        M,
+    if (!s && p)
+      return null;
+    const B = be(d !== void 0 && d !== !1), E = /* @__PURE__ */ f(I, { children: [
+      /* @__PURE__ */ t(
+        R,
         {
-          ref: E,
+          ref: L,
           "aria-hidden": !s,
           role: "dialog",
-          className: n(e.drawer, e[l], w, I),
-          ...P,
-          children: /* @__PURE__ */ o(
+          style: B.drawer,
+          className: n(e.drawer, e[c], k, x),
+          ...G,
+          children: /* @__PURE__ */ t(
             "section",
             {
-              ref: j,
+              ref: V,
               className: n(
                 e.content,
-                H,
-                e[l],
+                F,
+                e[c],
                 {
-                  [e["is-loading"]]: !!i
+                  [e["is-loading"]]: !!l
                 }
               ),
-              children: i ? /* @__PURE__ */ o($, {}) : /* @__PURE__ */ m(G, { children: [
-                /* @__PURE__ */ m(
+              children: l ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ f(I, { children: [
+                /* @__PURE__ */ f(
                   "header",
                   {
-                    className: n(e.header, x, {
-                      [e["sticky-header"]]: L
+                    className: n(e.header, X, {
+                      [e["sticky-header"]]: z
                     }),
                     children: [
-                      /* @__PURE__ */ o("h2", { className: n(e.title, D), children: O }),
-                      /* @__PURE__ */ o("div", { className: e.space, children: p && /* @__PURE__ */ o(
-                        C,
+                      /* @__PURE__ */ t("h2", { className: n(e.title, P), children: T }),
+                      /* @__PURE__ */ t("div", { className: e.space, children: g && /* @__PURE__ */ t(
+                        S,
                         {
-                          variant: Z.SecondaryWhite,
+                          variant: ne.SecondaryWhite,
                           isIconButton: !0,
-                          size: u ? a.S : a.M,
+                          size: m ? r.S : r.M,
                           iconName: "Close16px",
-                          onClick: t,
+                          onClick: o,
                           className: e.button
                         }
                       ) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: n(e.inner, z), children: S }),
-                /* @__PURE__ */ o("footer", { className: n(e.footer, A), children: typeof c == "function" ? c({ handleClose: t }) : c || p && /* @__PURE__ */ o(
-                  C,
+                /* @__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,
                   {
-                    size: u ? a.M : a.XXL,
-                    full: u,
-                    onClick: t,
+                    size: m ? r.M : r.XXL,
+                    full: m,
+                    onClick: o,
                     className: e["footer-button"],
                     children: "Закрыть"
                   }
@@ -143,24 +157,26 @@ import '../../assets/Drawer.css';const oe = "_drawer_13ua6_2", te = "_content_13
           )
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         "div",
         {
           className: n(
             e.overlay,
             {
-              [e.unmount]: !f
+              [e.unmount]: !p
             },
-            w
+            k
           ),
+          style: B.overlay,
           "data-testid": "drawer-overlay",
-          onClick: F
+          onClick: W
         }
       )
     ] });
+    return w === !1 ? E : /* @__PURE__ */ t(re, { element: w, children: E });
   }
 );
 export {
-  pe as ANIMATION_DELAY,
-  Ie as Drawer
+  Ne as ANIMATION_DELAY,
+  Ae as Drawer
 };

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

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+
+type TContainerInput = HTMLElement | RefObject<HTMLElement> | undefined | false;
+type TContainerOutput = HTMLElement | undefined | false;
+/**
+ * Хук для безопасного получения DOM-элемента из различных источников
+ */
+export declare function useContainer(container: TContainerInput): TContainerOutput;
+export {};

package/dist/components/Drawer/hooks.js

@@ -0,0 +1,24 @@
+import { useState as f, useRef as s, useEffect as l } from "react";
+function m(e) {
+  const [u, r] = f(
+    e === !1 ? !1 : void 0
+  ), t = s(null);
+  return l(() => {
+    if (e === !1) {
+      r(!1);
+      return;
+    }
+    if (e instanceof HTMLElement) {
+      r(e);
+      return;
+    }
+    if (e && "current" in e) {
+      e.current !== t.current && (t.current = e.current, r(e.current || void 0));
+      return;
+    }
+    r(void 0);
+  }, [e]), u;
+}
+export {
+  m as useContainer
+};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -53,9 +53,26 @@ type TProps = {
      * Время автоматического закрытия в миллисекундах.
      */
     autoCloseTimeout?: number;
+    /**
+     * Произвольный элемент-триггер для открытия выпадающего меню.
+     * Если указан, то buttonContent игнорируется.
+     */
+    triggerElement?: ReactNode | ((props: {
+        open: boolean;
+    }) => JSX.Element);
+    /**
+     * Вариант оформления выпадающего меню.
+     * @default 'default'
+     */
+    variant?: 'default' | 'black';
+    /**
+     * Показывать ли стрелку, указывающую на триггер.
+     * @default false
+     */
+    arrow?: boolean;
 };
 /**
  * Компонент Dropdown, содержит в себе кнопку и панель выпадающего меню
  */
-export declare const Dropdown: import('react').MemoExoticComponent<({ children, position, popoverProps, className, buttonClassName, panelClassName, menuItemsClassName, buttonContent, needCloseButton, openOnHover, isOpen, autoCloseTimeout }: TProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Dropdown: import('react').MemoExoticComponent<({ children, position, popoverProps, className, buttonClassName, panelClassName, menuItemsClassName, buttonContent, needCloseButton, openOnHover, isOpen, autoCloseTimeout, triggerElement, variant, arrow }: TProps) => import("react/jsx-runtime").JSX.Element>;
 export {};