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

package/dist/useContentPositioning-BLCC-Xty.mjs

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

package/dist/useContentPositioning-27D32n5u.mjs

@@ -1,185 +0,0 @@
-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
-};