@kommo-crm/crm-react-ui-kit 1.1.1-beta.3 → 1.1.1-beta.5

package/dist/stylesheets/utils/BaseClasses/BaseClasses.js

@@ -1,2 +1,6 @@
-import s from './base.module.css';
-export const CustomScrollClassName = s.custom_scroll;
+import '../../../assets/BaseClasses.css';const s = "_custom_scroll_6bijz_1", o = {
+  custom_scroll: s
+}, c = o.custom_scroll;
+export {
+  c as CustomScrollClassName
+};

package/dist/stylesheets/utils/BaseClasses/index.js

@@ -1 +1,4 @@
-export { CustomScrollClassName } from './BaseClasses';
+import { CustomScrollClassName as m } from "./BaseClasses.js";
+export {
+  m as CustomScrollClassName
+};

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/dist/utils/index.js

@@ -1,2 +1,6 @@
-export { omit } from './omit/omit';
-export { noop } from './noop/noop';
+import { omit as m } from "./omit/omit.js";
+import { noop as t } from "./noop/noop.js";
+export {
+  t as noop,
+  m as omit
+};

package/dist/utils/noop/noop.js

@@ -1,2 +1,5 @@
-// eslint-disable-next-line no-empty-function
-export const noop = () => { };
+const o = () => {
+};
+export {
+  o as noop
+};

package/dist/utils/omit/omit.js

@@ -1,7 +1,9 @@
-export const omit = (obj, keys) => {
-    const { ...copy } = obj;
-    for (const key of keys) {
-        delete copy[key];
-    }
-    return copy;
+const n = (t, e) => {
+  const { ...o } = t;
+  for (const c of e)
+    delete o[c];
+  return o;
+};
+export {
+  n as omit
 };

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.3",
+  "version": "1.1.1-beta.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "engines": {

package/dist/components/CheckboxGroup/hooks/useCheckboxGroupState.test.js

@@ -1,123 +0,0 @@
-import { renderHook, act } from '@testing-library/react';
-import { useCheckboxGroupState } from './useCheckboxGroupState';
-const SELECT_ALL = 'selectAll';
-describe('useCheckboxGroupState', () => {
-    const mockOnChange = jest.fn();
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-    it('should initialize with an empty state', () => {
-        const { result } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        expect(result.current.state.size).toBe(0);
-    });
-    it('should register a new checkbox', () => {
-        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        act(() => {
-            result.current.register('checkbox1', { isDefaultChecked: true });
-        });
-        rerender();
-        expect(result.current.state.size).toBe(1);
-        const checkbox = result.current.state.get('checkbox1');
-        expect(checkbox).toEqual({
-            name: 'checkbox1',
-            isChecked: true,
-            isDisabled: false,
-        });
-    });
-    it('should update state when a checkbox is toggled', () => {
-        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        let trigger;
-        act(() => {
-            trigger = result.current.register('checkbox1', {
-                isDefaultChecked: false,
-            });
-            result.current.register('checkbox2', { isDefaultChecked: true });
-        });
-        rerender();
-        act(() => {
-            trigger.onChange({
-                type: 'checkbox',
-                name: 'checkbox1',
-            });
-        });
-        rerender();
-        const checkbox1 = result.current.state.get('checkbox1');
-        const checkbox2 = result.current.state.get('checkbox2');
-        expect(checkbox1?.isChecked).toBe(true);
-        expect(checkbox2?.isChecked).toBe(true);
-        expect(mockOnChange).toHaveBeenCalledWith([
-            { name: 'checkbox1', isChecked: true, isDisabled: false },
-            { name: 'checkbox2', isChecked: true, isDisabled: false },
-        ], { type: 'checkbox', name: 'checkbox1' });
-    });
-    it('should handle "selectAll" event to check all checkboxes', () => {
-        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        let trigger;
-        act(() => {
-            trigger = result.current.register('selectAll');
-            result.current.register('checkbox1', { isDefaultChecked: false });
-            result.current.register('checkbox2', { isDefaultChecked: false });
-        });
-        rerender();
-        act(() => {
-            trigger.onChange({
-                type: 'selectAll',
-                name: 'selectAll',
-            });
-        });
-        rerender();
-        const checkbox1 = result.current.state.get('checkbox1');
-        const checkbox2 = result.current.state.get('checkbox2');
-        expect(checkbox1?.isChecked).toBe(true);
-        expect(checkbox2?.isChecked).toBe(true);
-        expect(mockOnChange).toHaveBeenCalledWith([
-            { name: 'checkbox1', isChecked: true, isDisabled: false },
-            { name: 'checkbox2', isChecked: true, isDisabled: false },
-        ], { type: SELECT_ALL, name: SELECT_ALL });
-    });
-    it('should handle "selectAll" event to uncheck all checkboxes', () => {
-        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        let trigger;
-        act(() => {
-            trigger = result.current.register(SELECT_ALL);
-            result.current.register('checkbox1', { isDefaultChecked: true });
-            result.current.register('checkbox2', { isDefaultChecked: true });
-        });
-        rerender();
-        act(() => {
-            trigger.onChange({
-                type: SELECT_ALL,
-                name: SELECT_ALL,
-            });
-        });
-        rerender();
-        const checkbox1 = result.current.state.get('checkbox1');
-        const checkbox2 = result.current.state.get('checkbox2');
-        expect(checkbox1?.isChecked).toBe(false);
-        expect(checkbox2?.isChecked).toBe(false);
-        expect(mockOnChange).toHaveBeenCalledWith([
-            { name: 'checkbox1', isChecked: false, isDisabled: false },
-            { name: 'checkbox2', isChecked: false, isDisabled: false },
-        ], { type: SELECT_ALL, name: SELECT_ALL });
-    });
-    it('should not toggle a disabled checkbox', () => {
-        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
-        let toggle;
-        act(() => {
-            toggle = result.current.register('checkbox1', {
-                isDefaultChecked: false,
-                isDisabled: true,
-            });
-        });
-        rerender();
-        act(() => {
-            toggle.onChange({
-                type: 'checkbox',
-                name: 'checkbox1',
-            });
-        });
-        rerender();
-        const checkbox1 = result.current.state.get('checkbox1');
-        expect(checkbox1?.isChecked).toBe(false);
-    });
-});