@kommo-crm/crm-react-ui-kit 1.1.1-beta.0 → 1.1.1-beta.1

package/dist/components/ContextMenu/hooks/useContextMenuSub/useContextMenuSub.js

@@ -1,98 +1,66 @@
-import { useId as A, useState as I, useRef as x, useCallback as l, useEffect as v } from "react";
-import { useContextMenuContext as E } from "../../ContextMenu.context.js";
-import { useLevelContext as S } from "../../providers/LevelProvider/LevelProvider.js";
+import { useId as L, useState as a, useRef as v, useEffect as x } from "react";
 import { ContextMenuMode as s } from "../../ContextMenu.enums.js";
-import "../../../../useContentPositioning-BIVWgixU.mjs";
+import { useLevelContext as g } from "../../providers/LevelProvider/LevelProvider.js";
+import "../../../../useContentPositioning-27D32n5u.mjs";
 import "../../components/Content/Content.utils.js";
-import { useIsTouchDevice as k } from "../useIsTouchDevice/useIsTouchDevice.js";
-function H({
-  displayName: L,
-  mode: D,
-  defaultOpen: e
+import { useIsTouchDevice as B } from "../useIsTouchDevice/useIsTouchDevice.js";
+import { useContextMenuContext as A } from "../../ContextMenu.context.js";
+function G({
+  displayName: m,
+  mode: y,
+  defaultOpen: c
 }) {
-  const T = A(), [t, r] = I(e || !1), [w, c] = I(!1), [K, o] = I(!1), p = x(null), u = x(null), P = k(), {
-    hoverCloseDelay: g,
-    animationDuration: h,
-    animatedOpen: f,
-    mode: m
-  } = E(L), { activeItemId: M } = S(L), a = P ? s.CLICK : D, i = l(() => {
-    p.current && (clearTimeout(p.current), p.current = null), u.current && (clearTimeout(u.current), u.current = null);
-  }, []), C = l(() => {
-    if (c(!1), a === s.CLICK) {
-      r(!1), o(!1);
+  const d = L(), [i, t] = a(c || !1), [M, n] = a(!1), [C, l] = a(!1), [T, u] = a(!1), e = v(null), r = v(null), O = B(), { hoverCloseDelay: I, animationDuration: H } = A(m), { activeItemId: p } = g(m), o = O ? s.CLICK : y, h = () => {
+    e.current && (clearTimeout(e.current), e.current = null), r.current && (clearTimeout(r.current), r.current = null);
+  }, K = () => {
+    h(), n(!1), t(!1), l(!1), u(!1);
+  }, R = () => {
+    h(), o === s.HOVER ? (n(!1), r.current = setTimeout(() => {
+      t(!1), l(!1), u(!1);
+    }, H)) : (t(!1), l(!1), u(!1));
+  }, E = (f) => {
+    if (c !== void 0) {
+      t(c), n(c), u(!1);
       return;
     }
-    u.current && clearTimeout(u.current), u.current = window.setTimeout(
-      () => r(!1),
-      h
-    );
-  }, [h]), R = l(
-    (n) => {
-      if (a === s.CLICK || e !== void 0) {
-        n.preventDefault(), n.stopPropagation();
-        return;
-      }
-      if (i(), t) {
-        c(!0);
-        return;
-      }
-      if (m !== s.CLICK && !f) {
-        o(!0);
-        return;
-      }
-      r(!0);
-    },
-    [e, m, f, t, i]
-  ), b = l(
-    (n) => {
-      if (a === s.CLICK || e !== void 0) {
-        n.preventDefault(), n.stopPropagation();
-        return;
-      }
-      i(), o(!1), t && (u.current = window.setTimeout(
-        C,
-        g
-      ));
-    },
-    [e, t, g, i, C]
-  ), d = l(
-    (n) => {
-      if (e !== void 0) {
-        r(e), c(e), o(!1);
-        return;
-      }
-      if (a === s.CLICK) {
-        r(n), c(n), o(!1);
+    if (o === s.CLICK) {
+      t(f), n(f);
+      return;
+    }
+    f ? (r.current && (clearTimeout(r.current), r.current = null), o === s.HOVER && n(!0), t(!0)) : R();
+  }, V = (f) => {
+    u(f), E(f);
+  }, b = () => {
+    o === s.HOVER && (u(!1), r.current && (clearTimeout(r.current), r.current = null, n(!0)), i || (e.current && (clearTimeout(e.current), e.current = null), n(!0), t(!0)), l(!0));
+  }, D = () => {
+    o === s.HOVER && (u(!1), e.current && (clearTimeout(e.current), e.current = null), l(!1));
+  };
+  return x(() => {
+    p !== d && i && c === void 0 && K();
+  }, [p, i, c]), x(() => {
+    if (!(!i || o !== s.HOVER) && !T) {
+      if (C) {
+        e.current && (clearTimeout(e.current), e.current = null);
         return;
       }
-      if (n) {
-        if (i(), m !== s.CLICK && !f) {
-          o(!0);
-          return;
-        }
-        r(!0);
-      } else
-        C();
-    },
-    [e, m, f, i, C]
-  );
-  return v(() => {
-    M !== T && t && e === void 0 && (i(), c(!1), r(!1), o(!1));
-  }, [M, t, i]), v(() => {
-    K && f && (r(!0), o(!1));
-  }, [K, f]), v(() => {
-    a === s.CLICK && d(t);
-  }, [t, d]), {
-    open: t,
-    setOpen: r,
-    animatedOpen: w,
-    startAnimation: () => c(!0),
-    handleMouseEnter: R,
-    handleMouseLeave: b,
-    handleOpenChange: d,
-    triggerId: T
+      return e.current || (e.current = setTimeout(() => {
+        R();
+      }, I)), () => {
+        e.current && (clearTimeout(e.current), e.current = null);
+      };
+    }
+  }, [o, i, C, I, T]), {
+    open: i,
+    setOpen: t,
+    animatedOpen: M,
+    startAnimation: () => n(!0),
+    handleMouseEnter: b,
+    handleMouseLeave: D,
+    handleOpenChange: E,
+    onOpenByKeyboard: V,
+    triggerId: d
   };
 }
 export {
-  H as useContextMenuSub
+  G as useContextMenuSub
 };

package/dist/components/ContextMenu/hooks/useContextMenuSubMenu/useContextMenuSubMenu.d.ts

@@ -4,6 +4,7 @@ export declare const useContextMenuSubMenu: ({ displayName, mode: rootMode, defa
     open: boolean;
     mode: "click" | "hover" | ContextMenuMode;
     onOpenChange: (value: boolean) => void;
+    onOpenByKeyboard: (value: boolean) => void;
     inheritedArrowColor: string | null;
     triggerRef: import('react').RefObject<HTMLButtonElement>;
     contentRef: import('react').RefObject<HTMLDivElement>;

package/dist/components/ContextMenu/hooks/useContextMenuSubMenu/useContextMenuSubMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContextMenuSubMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuSubMenu/useContextMenuSubMenu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAE7E,eAAO,MAAM,qBAAqB,qJAU/B,4BAA4B;;;0BAsFI,OAAO;;;;;;;;2CAfK,OAAO;;;;;CAmJrD,CAAC"}
+{"version":3,"file":"useContextMenuSubMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuSubMenu/useContextMenuSubMenu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAE7E,eAAO,MAAM,qBAAqB,qJAU/B,4BAA4B;;;0BAuFI,OAAO;8BAyBP,OAAO;;;;;;;;2CAxCK,OAAO;;;;;CA0KrD,CAAC"}

package/dist/components/ContextMenu/hooks/useContextMenuSubMenu/useContextMenuSubMenu.js

@@ -1,69 +1,72 @@
-import { useId as N, useState as C, useRef as T, useLayoutEffect as P, useEffect as q } from "react";
-import { ContextMenuMode as i } from "../../ContextMenu.enums.js";
-import { useInheritedArrowColor as Q } from "../useInheritedArrowColor/useInheritedArrowColor.js";
-import "../../../../useContentPositioning-BIVWgixU.mjs";
+import { useId as Q, useState as T, useRef as C, useLayoutEffect as U, useEffect as R } from "react";
+import { ContextMenuMode as l } from "../../ContextMenu.enums.js";
+import { useInheritedArrowColor as W } from "../useInheritedArrowColor/useInheritedArrowColor.js";
+import "../../../../useContentPositioning-27D32n5u.mjs";
 import "../../components/Content/Content.utils.js";
 import "../../ContextMenu.context.js";
-import { useLevelContext as U } from "../../providers/LevelProvider/LevelProvider.js";
-import { useIsTouchDevice as W } from "../useIsTouchDevice/useIsTouchDevice.js";
-const b = ({
-  displayName: R,
-  mode: j,
-  defaultOpen: E,
-  animationDuration: H,
-  subMenuOpen: a,
+import { useLevelContext as X } from "../../providers/LevelProvider/LevelProvider.js";
+import { useIsTouchDevice as Y } from "../useIsTouchDevice/useIsTouchDevice.js";
+const tr = ({
+  displayName: j,
+  mode: k,
+  defaultOpen: L,
+  animationDuration: K,
+  subMenuOpen: u,
   setSubMenuOpen: t,
-  hoverCloseDelay: m,
-  closeRootMenuImmediately: s,
+  hoverCloseDelay: d,
+  closeRootMenuImmediately: n,
   onOpen: v
 }) => {
-  const h = N(), [c, k] = C(a || E || !1), [g, l] = C(!1), [L, n] = C(!1), [o, d] = C(!1), { activeItemId: V } = U(R), z = T(null), x = T(null), r = T(null), f = T(null), e = W() ? i.CLICK : j, A = () => {
-    r.current && (clearTimeout(r.current), r.current = null), f.current && (clearTimeout(f.current), f.current = null);
-  }, I = (u = !1) => {
-    t == null || t(!1), k(!1), n(!1), d(!1), u && (s == null || s());
+  const E = Q(), [f, y] = T(u || L || !1), [V, i] = T(!1), [g, a] = T(!1), [z, H] = T(!1), [s, h] = T(!1), { activeItemId: x } = X(j), D = C(null), A = C(null), r = C(null), e = C(null), c = Y() ? l.CLICK : k, B = () => {
+    r.current && (clearTimeout(r.current), r.current = null), e.current && (clearTimeout(e.current), e.current = null);
+  }, I = (o = !1) => {
+    t == null || t(!1), y(!1), a(!1), h(!1), o && (n == null || n());
   }, w = () => {
-    A(), e === i.HOVER || o ? (l(!1), f.current = setTimeout(() => {
+    B(), c === l.HOVER || s ? (i(!1), e.current = setTimeout(() => {
       I();
-    }, H)) : I();
-  }, K = (u = !1) => {
-    A(), l(!1), t == null || t(!1), n(!1), d(!1), u && (s == null || s());
-  }, B = (u) => {
-    e === i.CLICK && E !== void 0 || (u ? (f.current && (clearTimeout(f.current), f.current = null), (e === i.HOVER || o) && l(!0), t == null || t(!0), v == null || v(!0)) : w());
-  }, D = () => {
-    e !== i.HOVER && !o || (c || (r.current && (clearTimeout(r.current), r.current = null), l(!0), t == null || t(!0)), n(!0));
-  }, F = () => {
-    e !== i.HOVER && !o || (r.current && (clearTimeout(r.current), r.current = null), n(!1));
+    }, K)) : I();
+  }, q = (o = !1) => {
+    B(), i(!1), t == null || t(!1), a(!1), h(!1), o && (n == null || n());
+  }, m = (o) => {
+    c === l.CLICK && L !== void 0 || (o ? (e.current && (clearTimeout(e.current), e.current = null), (c === l.HOVER || s) && i(!0), t == null || t(!0), v == null || v(!0)) : w());
+  }, F = (o) => {
+    H(o), m == null || m(o);
   }, G = () => {
-    l(!0), n(!0), d(!0);
+    H(!1), !(c !== l.HOVER && !s) && (e.current && (clearTimeout(e.current), e.current = null, i(!0)), f || (r.current && (clearTimeout(r.current), r.current = null), i(!0), t == null || t(!0)), a(!0));
+  }, J = () => {
+    H(!1), !(c !== l.HOVER && !s) && (r.current && (clearTimeout(r.current), r.current = null), a(!1));
+  }, N = () => {
+    i(!0), a(!0), h(!0);
   };
-  P(() => {
-    a !== void 0 && l(a);
-  }, [a]), q(() => {
-    V !== h && (c || a) && K();
-  }, [V, c, h]), q(() => {
-    !c && !g || e !== i.HOVER && !o || (L ? r.current && (clearTimeout(r.current), r.current = null) : r.current || (r.current = setTimeout(() => {
+  U(() => {
+    u !== void 0 && i(u);
+  }, [u]), R(() => {
+    x !== E && (f || u) && q();
+  }, [x, f, E]), R(() => {
+    !f && !V || c !== l.HOVER && !s || z || (g ? r.current && (clearTimeout(r.current), r.current = null) : r.current || (r.current = setTimeout(() => {
       w();
-    }, m)));
-  }, [e, c, L, o, m]);
-  const J = Q(c, x);
+    }, d)));
+  }, [c, f, g, s, d]);
+  const P = W(f, A);
   return {
-    open: c,
-    mode: e,
-    onOpenChange: B,
-    inheritedArrowColor: J,
-    triggerRef: z,
-    contentRef: x,
-    animatedOpen: g,
-    animationDuration: H,
-    hoverCloseDelay: m,
-    temporaryHoverClose: o,
-    closeMenuImmediately: K,
-    onMouseEnter: D,
-    onMouseLeave: F,
-    enableTemporaryHoverClose: G,
-    triggerId: h
+    open: f,
+    mode: c,
+    onOpenChange: m,
+    onOpenByKeyboard: F,
+    inheritedArrowColor: P,
+    triggerRef: D,
+    contentRef: A,
+    animatedOpen: V,
+    animationDuration: K,
+    hoverCloseDelay: d,
+    temporaryHoverClose: s,
+    closeMenuImmediately: q,
+    onMouseEnter: G,
+    onMouseLeave: J,
+    enableTemporaryHoverClose: N,
+    triggerId: E
   };
 };
 export {
-  b as useContextMenuSubMenu
+  tr as useContextMenuSubMenu
 };

package/dist/components/ContextMenu/index.js

@@ -1,6 +1,6 @@
 import { ContextMenu as n } from "./ContextMenu.js";
 import { ContextMenuMode as x } from "./ContextMenu.enums.js";
-import "../../useContentPositioning-BIVWgixU.mjs";
+import "../../useContentPositioning-27D32n5u.mjs";
 import { Direction as p } from "./components/Content/Content.enums.js";
 import "./components/Content/Content.utils.js";
 export {

package/dist/useContentPositioning-27D32n5u.mjs

@@ -0,0 +1,185 @@
+import { forwardRef as W, useState as _, useLayoutEffect as D } from "react";
+import { jsx as N } from "react/jsx-runtime";
+import { C as x } from "./index-BA3njR2k.mjs";
+import { c as A } from "./index-L8X2o7IH.mjs";
+import { u as M, a as w, e as y } from "./react-spring_web.modern-Dnq1lqN5.mjs";
+import { mergeRefs as F } from "./lib/utils.js";
+import { LevelProvider as U } from "./components/ContextMenu/providers/LevelProvider/LevelProvider.js";
+import { useContextMenuContext as k } from "./components/ContextMenu/ContextMenu.context.js";
+import { ContextMenuMode as G } from "./components/ContextMenu/ContextMenu.enums.js";
+import { Direction as e } from "./components/ContextMenu/components/Content/Content.enums.js";
+import { directionToSide as S } from "./components/ContextMenu/components/Content/Content.utils.js";
+import './assets/useContentPositioning.css';const z = "_content_k9opk_1", B = {
+  content: z
+}, v = "ContextMenu.Content", j = W(
+  ({
+    style: s,
+    className: C,
+    children: f,
+    alignOffset: a,
+    arrowPadding: c = 5,
+    collisionBoundary: h,
+    direction: b = e.DOWN_RIGHT,
+    disableAutoPositioning: m = !1,
+    ...T
+  }, H) => {
+    const [E, O] = _(!1), [L, t] = _(null), {
+      triggerRef: u,
+      contentRef: r,
+      animatedOpen: d,
+      animationDuration: g,
+      mode: p,
+      temporaryHoverClose: o,
+      onMouseEnter: l,
+      onMouseLeave: I
+    } = k(v), { align: i, labelOffset: n, isPositioned: R } = K({
+      direction: b,
+      alignOffset: a,
+      disableAutoPositioning: m,
+      triggerRef: u,
+      contentRef: r,
+      collisionBoundary: h,
+      children: f
+    }), P = M({
+      opacity: R && (p === G.CLICK && !o || d) ? 1 : 0,
+      config: p === G.CLICK && !o ? { duration: 0 } : { duration: g, easing: y.easeInOutCubic }
+    });
+    return /* @__PURE__ */ N(
+      U,
+      {
+        hasItemWithIcon: E,
+        setHasItemWithIcon: O,
+        activeItemId: L,
+        setActiveItemId: t,
+        children: /* @__PURE__ */ N(
+          w.div,
+          {
+            style: {
+              zIndex: Number.MAX_SAFE_INTEGER,
+              position: "fixed",
+              ...P
+            },
+            "data-content-wrapper": !0,
+            children: /* @__PURE__ */ N(
+              x,
+              {
+                ref: F(r, H),
+                className: A(B.content, C),
+                style: {
+                  ...s || {},
+                  pointerEvents: m || R ? "auto" : "none"
+                },
+                collisionBoundary: h,
+                side: S[b],
+                align: i,
+                arrowPadding: c,
+                alignOffset: n,
+                onMouseEnter: l,
+                onMouseLeave: I,
+                ...T,
+                children: f
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+j.displayName = v;
+function K({
+  direction: s,
+  alignOffset: C = 0,
+  disableAutoPositioning: f,
+  triggerRef: a,
+  contentRef: c,
+  collisionBoundary: h,
+  children: b
+}) {
+  const [m, T] = _(
+    s === e.UP_RIGHT || s === e.DOWN_RIGHT || s === e.RIGHT_UP || s === e.RIGHT_DOWN ? "start" : "end"
+  ), [H, E] = _(C), [O, L] = _(!1);
+  return D(() => {
+    if (!c.current || f || [
+      e.DOWN_LEFT,
+      e.DOWN_RIGHT,
+      e.UP_LEFT,
+      e.UP_RIGHT
+    ].includes(s))
+      return;
+    const t = c.current, u = t.firstElementChild;
+    let r;
+    m === "start" ? t.children[1].hasAttribute("data-separator") ? r = t.children[2] : r = t.children[1] : t.children[t.children.length - 1].hasAttribute(
+      "data-arrow"
+    ) ? r = t.children[t.children.length - 2] : r = t.children[t.children.length - 1];
+    const d = a.current;
+    if (d) {
+      const g = r.getBoundingClientRect().height, o = (d.getBoundingClientRect().height - g) / 2;
+      if (m === "start") {
+        if (u instanceof HTMLElement && u.hasAttribute("data-label")) {
+          const l = u.getBoundingClientRect().height;
+          E(C - l + o);
+        }
+      } else
+        E(C + o - 1);
+    }
+  }, [b, s, c, a, m]), D(() => {
+    if (f || !(a != null && a.current))
+      return;
+    let t = null, u = !0;
+    const r = h instanceof Element && h || document.documentElement, d = () => {
+      if (!u)
+        return;
+      const g = a.current, p = c.current;
+      if (!g || !p)
+        return;
+      const o = g.getBoundingClientRect(), l = p.getBoundingClientRect();
+      if (l.width <= 0)
+        return;
+      const I = r.getBoundingClientRect(), i = {
+        right: I.right - o.right >= l.width,
+        left: o.left - I.left >= l.width,
+        bottom: I.bottom - o.bottom >= l.height,
+        top: o.top - I.top >= l.height
+      };
+      let n = "start";
+      switch (s) {
+        case e.UP_RIGHT:
+        case e.DOWN_RIGHT: {
+          i.right ? n = "start" : i.left ? n = "end" : n = "start";
+          break;
+        }
+        case e.UP_LEFT:
+        case e.DOWN_LEFT: {
+          i.left ? n = "end" : i.right ? n = "start" : n = "end";
+          break;
+        }
+        case e.RIGHT_DOWN:
+        case e.LEFT_DOWN: {
+          i.bottom ? n = "start" : i.top ? n = "end" : n = "start";
+          break;
+        }
+        case e.RIGHT_UP:
+        case e.LEFT_UP: {
+          i.top ? n = "end" : i.bottom ? n = "start" : n = "end";
+          break;
+        }
+      }
+      T(n), L(!0);
+    };
+    return requestAnimationFrame(d), c.current && typeof ResizeObserver < "u" && (t = new ResizeObserver(d), t.observe(c.current)), () => {
+      u = !1, t == null || t.disconnect();
+    };
+  }, [
+    s,
+    f,
+    a,
+    c,
+    h
+  ]), { align: m, labelOffset: H, isPositioned: O };
+}
+export {
+  j as C,
+  B as s,
+  K as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kommo-crm/crm-react-ui-kit",
   "description": "Ready-to-use React components which implements Kommo design",
-  "version": "1.1.1-beta.0",
+  "version": "1.1.1-beta.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "engines": {