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

package/dist/components/ContextMenu/components/SubTrigger/SubTrigger.js

@@ -1,77 +1,99 @@
-import React, { forwardRef } from 'react';
-import { SubTrigger as RadixDropdownMenuSubTrigger } from '@radix-ui/react-dropdown-menu';
-import cx from 'classnames';
-import { useLevelContext } from '../../providers/LevelProvider';
-import { useContextMenuSubContext } from '../Sub/Sub.context';
-import { hasItemIcon } from '../../utils';
-import { useContextMenuItemFocus } from '../../hooks';
-import { ContextMenuMode } from '../../ContextMenu.enums';
-import s from './SubTrigger.module.css';
-const DISPLAY_NAME = 'ContextMenu.SubTrigger';
-export const SubTrigger = forwardRef(({ className, children, isDisabled, onKeyDown, onFocus, onBlur, onClick, onPointerEnter, onPointerMove, onPointerLeave, onMouseEnter, onMouseLeave, ...rest }, ref) => {
-    const { hasItemWithIcon } = useLevelContext(DISPLAY_NAME);
-    const { mode, open, defaultOpen, setOpen, onMouseEnter: onMouseEnterContext, onMouseLeave: onMouseLeaveContext, triggerId, onOpenByKeyboard, } = useContextMenuSubContext(DISPLAY_NAME);
-    const { dataHighlighted, onFocus: handleItemFocus, onMouseEnter: handleItemMouseEnter, onBlur: handleItemBlur, onMouseLeave: handleItemMouseLeave, } = useContextMenuItemFocus({
-        displayName: DISPLAY_NAME,
-        id: triggerId,
-        isDisabled,
-        onMouseEnter: onMouseEnterContext,
-        onMouseLeave: onMouseLeaveContext,
+import { jsx as M } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import { b as H } from "../../../../index-BA3njR2k.mjs";
+import { c as j } from "../../../../index-L8X2o7IH.mjs";
+import { useLevelContext as z } from "../../providers/LevelProvider/LevelProvider.js";
+import { useContextMenuSubContext as D } from "../Sub/Sub.context.js";
+import { hasItemIcon as V } from "../../utils/hasItemIcon/hasItemIcon.js";
+import { ContextMenuMode as i } from "../../ContextMenu.enums.js";
+import "../../../../useContentPositioning-BLCC-Xty.mjs";
+import "../Content/Content.utils.js";
+import "../../ContextMenu.context.js";
+import { useContextMenuItemFocus as W } from "../../hooks/useContextMenuItemFocus/useContextMenuItemFocus.js";
+import '../../../../assets/SubTrigger.css';const Y = "_sub_trigger_d2xgz_1", q = {
+  sub_trigger: Y
+}, a = "ContextMenu.SubTrigger", w = R(
+  ({
+    className: S,
+    children: v,
+    isDisabled: n,
+    onKeyDown: p,
+    onFocus: s,
+    onBlur: g,
+    onClick: e,
+    onPointerEnter: f,
+    onPointerMove: m,
+    onPointerLeave: u,
+    onMouseEnter: d,
+    onMouseLeave: C,
+    ...h
+  }, l) => {
+    const { hasItemWithIcon: A } = z(a), {
+      mode: r,
+      open: x,
+      defaultOpen: o,
+      setOpen: N,
+      onMouseEnter: O,
+      onMouseLeave: T,
+      triggerId: y,
+      onOpenByKeyboard: L
+    } = D(a), {
+      dataHighlighted: K,
+      onFocus: b,
+      onMouseEnter: c,
+      onBlur: I,
+      onMouseLeave: _
+    } = W({
+      displayName: a,
+      id: y,
+      isDisabled: n,
+      onMouseEnter: O,
+      onMouseLeave: T
     });
-    return (React.createElement(RadixDropdownMenuSubTrigger, { ref: ref, className: cx(s.sub_trigger, className), disabled: isDisabled, "data-item": true, "data-no-icon-align": hasItemIcon(children) || !hasItemWithIcon ? '' : undefined, "data-highlighted": open ||
-            dataHighlighted === '' ||
-            (mode === ContextMenuMode.CLICK && open)
-            ? ''
-            : undefined, "data-submenu-trigger": true, onMouseEnter: (e) => {
-            handleItemMouseEnter?.(e);
-            onMouseEnter?.(e);
-        }, onMouseLeave: (e) => {
-            handleItemMouseLeave?.(e);
-            onMouseLeave?.(e);
-        }, onKeyDown: (e) => {
-            if (mode === ContextMenuMode.HOVER) {
-                if (['Enter', ' ', 'ArrowRight'].includes(e.key)) {
-                    onOpenByKeyboard(true);
-                }
-                else if (e.key === 'ArrowLeft') {
-                    onOpenByKeyboard(false);
-                    e.currentTarget.focus();
-                }
-            }
-            onKeyDown?.(e);
-        }, onFocus: (e) => {
-            handleItemFocus?.();
-            onFocus?.(e);
-        }, onBlur: (e) => {
-            handleItemBlur?.();
-            onBlur?.(e);
-        }, onClick: (e) => {
-            if (mode === ContextMenuMode.CLICK || defaultOpen !== undefined) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (defaultOpen === undefined) {
-                    setOpen(!open);
-                }
-            }
-            onClick?.(e);
-        }, onPointerEnter: (e) => {
-            if (mode === ContextMenuMode.CLICK || defaultOpen !== undefined) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            onPointerEnter?.(e);
-        }, onPointerMove: (e) => {
-            if (mode === ContextMenuMode.CLICK || defaultOpen !== undefined) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            onPointerMove?.(e);
-        }, onPointerLeave: (e) => {
-            if (mode === ContextMenuMode.CLICK || defaultOpen !== undefined) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            onPointerLeave?.(e);
-        }, ...rest }, children));
-});
-SubTrigger.displayName = DISPLAY_NAME;
+    return /* @__PURE__ */ M(
+      H,
+      {
+        ref: l,
+        className: j(q.sub_trigger, S),
+        disabled: n,
+        "data-item": !0,
+        "data-no-icon-align": V(v) || !A ? "" : void 0,
+        "data-highlighted": x || K === "" || r === i.CLICK && x ? "" : void 0,
+        "data-submenu-trigger": !0,
+        onMouseEnter: (t) => {
+          c == null || c(t), d == null || d(t);
+        },
+        onMouseLeave: (t) => {
+          _ == null || _(t), C == null || C(t);
+        },
+        onKeyDown: (t) => {
+          r === i.HOVER && (["Enter", " ", "ArrowRight"].includes(t.key) ? L(!0) : t.key === "ArrowLeft" && (L(!1), t.currentTarget.focus())), p == null || p(t);
+        },
+        onFocus: (t) => {
+          b == null || b(), s == null || s(t);
+        },
+        onBlur: (t) => {
+          I == null || I(), g == null || g(t);
+        },
+        onClick: (t) => {
+          (r === i.CLICK || o !== void 0) && (t.preventDefault(), t.stopPropagation(), o === void 0 && N(!x)), e == null || e(t);
+        },
+        onPointerEnter: (t) => {
+          (r === i.CLICK || o !== void 0) && (t.preventDefault(), t.stopPropagation()), f == null || f(t);
+        },
+        onPointerMove: (t) => {
+          (r === i.CLICK || o !== void 0) && (t.preventDefault(), t.stopPropagation()), m == null || m(t);
+        },
+        onPointerLeave: (t) => {
+          (r === i.CLICK || o !== void 0) && (t.preventDefault(), t.stopPropagation()), u == null || u(t);
+        },
+        ...h,
+        children: v
+      }
+    );
+  }
+);
+w.displayName = a;
+export {
+  w as SubTrigger
+};

package/dist/components/ContextMenu/components/SubTrigger/SubTrigger.props.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
-import type { SubTrigger as RadixDropdownMenuSubTrigger } from '@radix-ui/react-dropdown-menu';
+import { ComponentPropsWithoutRef } from 'react';
+import { SubTrigger as RadixDropdownMenuSubTrigger } from '@radix-ui/react-dropdown-menu';
 type RadixSubTriggerProps = Omit<ComponentPropsWithoutRef<typeof RadixDropdownMenuSubTrigger>, 'disabled' | 'textValue'>;
 export type SubTriggerProps = RadixSubTriggerProps & {
     /**

package/dist/components/ContextMenu/components/SubTrigger/SubTrigger.props.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ContextMenu/components/SubTrigger/index.js

@@ -1 +1,4 @@
-export { SubTrigger } from './SubTrigger';
+import { SubTrigger as g } from "./SubTrigger.js";
+export {
+  g as SubTrigger
+};

package/dist/components/ContextMenu/components/Trigger/Trigger.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-export declare const Trigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { default as React } from 'react';
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-dropdown-menu').DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Trigger.d.ts.map

package/dist/components/ContextMenu/components/Trigger/Trigger.js

@@ -1,35 +1,51 @@
-import React, { forwardRef } from 'react';
-import { Trigger as RadixDropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
-import cx from 'classnames';
-import { mergeRefs } from 'src/lib/utils';
-import { useContextMenuContext } from '../../ContextMenu.context';
-import { ContextMenuMode } from '../../ContextMenu.enums';
-const DISPLAY_NAME = 'ContextMenu.Trigger';
-export const Trigger = forwardRef(({ className, children, onKeyDown, onMouseEnter, onMouseLeave, onPointerDown, ...rest }, ref) => {
-    const { triggerRef, mode, onMouseEnter: onMouseEnterContext, onMouseLeave: onMouseLeaveContext, onOpenByKeyboard, } = useContextMenuContext(DISPLAY_NAME);
-    return (React.createElement(RadixDropdownMenuTrigger, { ref: mergeRefs(triggerRef, ref), className: cx(className), onPointerDown: (e) => {
-            if (mode === ContextMenuMode.HOVER) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            onPointerDown?.(e);
-        }, onKeyDown: (e) => {
-            if (mode === ContextMenuMode.HOVER) {
-                e.stopPropagation();
-                if (['Enter', ' ', 'ArrowDown'].includes(e.key)) {
-                    onOpenByKeyboard(true);
-                }
-                else if (e.key === 'Escape') {
-                    onOpenByKeyboard(false);
-                }
-            }
-            onKeyDown?.(e);
-        }, onMouseEnter: (e) => {
-            onMouseEnterContext(e);
-            onMouseEnter?.(e);
-        }, onMouseLeave: (e) => {
-            onMouseLeaveContext(e);
-            onMouseLeave?.(e);
-        }, ...rest }, children));
-});
-Trigger.displayName = DISPLAY_NAME;
+import { jsx as C } from "react/jsx-runtime";
+import { forwardRef as R } from "react";
+import { T as E } from "../../../../index-BA3njR2k.mjs";
+import { c as T } from "../../../../index-L8X2o7IH.mjs";
+import { mergeRefs as n } from "../../../../lib/utils.js";
+import { useContextMenuContext as A } from "../../ContextMenu.context.js";
+import { ContextMenuMode as p } from "../../ContextMenu.enums.js";
+const s = "ContextMenu.Trigger", M = R(
+  ({
+    className: a,
+    children: g,
+    onKeyDown: t,
+    onMouseEnter: e,
+    onMouseLeave: f,
+    onPointerDown: m,
+    ...x
+  }, c) => {
+    const {
+      triggerRef: d,
+      mode: o,
+      onMouseEnter: l,
+      onMouseLeave: u,
+      onOpenByKeyboard: i
+    } = A(s);
+    return /* @__PURE__ */ C(
+      E,
+      {
+        ref: n(d, c),
+        className: T(a),
+        onPointerDown: (r) => {
+          o === p.HOVER && (r.preventDefault(), r.stopPropagation()), m == null || m(r);
+        },
+        onKeyDown: (r) => {
+          o === p.HOVER && (r.stopPropagation(), ["Enter", " ", "ArrowDown"].includes(r.key) ? i(!0) : r.key === "Escape" && i(!1)), t == null || t(r);
+        },
+        onMouseEnter: (r) => {
+          l(r), e == null || e(r);
+        },
+        onMouseLeave: (r) => {
+          u(r), f == null || f(r);
+        },
+        ...x,
+        children: g
+      }
+    );
+  }
+);
+M.displayName = s;
+export {
+  M as Trigger
+};

package/dist/components/ContextMenu/components/Trigger/Trigger.props.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ContextMenu/components/Trigger/index.js

@@ -1 +1,4 @@
-export { Trigger } from './Trigger';
+import { Trigger as g } from "./Trigger.js";
+export {
+  g as Trigger
+};

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

@@ -1,7 +1,16 @@
-export { useContextMenu } from './useContextMenu/useContextMenu';
-export { useContextMenuSubMenu } from './useContextMenuSubMenu/useContextMenuSubMenu';
-export { useInheritedArrowColor } from './useInheritedArrowColor/useInheritedArrowColor';
-export { useContentPositioning } from './useContentPositioning/useContentPositioning';
-export { useContextMenuSub } from './useContextMenuSub/useContextMenuSub';
-export { useContextMenuItemFocus } from './useContextMenuItemFocus/useContextMenuItemFocus';
-export { useIsTouchDevice } from './useIsTouchDevice/useIsTouchDevice';
+import { useContextMenu as t } from "./useContextMenu/useContextMenu.js";
+import { useContextMenuSubMenu as u } from "./useContextMenuSubMenu/useContextMenuSubMenu.js";
+import { useInheritedArrowColor as s } from "./useInheritedArrowColor/useInheritedArrowColor.js";
+import { u as m } from "../../../useContentPositioning-BLCC-Xty.mjs";
+import { useContextMenuSub as p } from "./useContextMenuSub/useContextMenuSub.js";
+import { useContextMenuItemFocus as i } from "./useContextMenuItemFocus/useContextMenuItemFocus.js";
+import { useIsTouchDevice as c } from "./useIsTouchDevice/useIsTouchDevice.js";
+export {
+  m as useContentPositioning,
+  t as useContextMenu,
+  i as useContextMenuItemFocus,
+  p as useContextMenuSub,
+  u as useContextMenuSubMenu,
+  s as useInheritedArrowColor,
+  c as useIsTouchDevice
+};

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

@@ -1,198 +1,7 @@
-import { useLayoutEffect, useState } from 'react';
-import { Direction } from '../../components/Content';
-export function useContentPositioning({ direction, alignOffset = 0, disableAutoPositioning, triggerRef, contentRef, collisionBoundary, children, }) {
-    const [align, setAlign] = useState(direction === Direction.UP_RIGHT ||
-        direction === Direction.DOWN_RIGHT ||
-        direction === Direction.RIGHT_UP ||
-        direction === Direction.RIGHT_DOWN
-        ? 'start'
-        : 'end');
-    const [labelOffset, setLabelOffset] = useState(alignOffset);
-    const [isPositioned, setIsPositioned] = useState(false);
-    /**
-     * Calculates the label offset based on the direction and the trigger height.
-     */
-    useLayoutEffect(() => {
-        const contentEl = contentRef?.current;
-        if (!contentEl ||
-            disableAutoPositioning ||
-            [
-                Direction.DOWN_LEFT,
-                Direction.DOWN_RIGHT,
-                Direction.UP_LEFT,
-                Direction.UP_RIGHT,
-            ].includes(direction)) {
-            return;
-        }
-        const childrenCollection = contentEl.children;
-        if (!childrenCollection || childrenCollection.length === 0) {
-            return;
-        }
-        const label = contentEl.firstElementChild;
-        let item = null;
-        if (align === 'start') {
-            const second = childrenCollection.item(1);
-            if (second instanceof Element && second.hasAttribute('data-separator')) {
-                const third = childrenCollection.item(2);
-                if (third instanceof Element) {
-                    item = third;
-                }
-                else {
-                    item = null;
-                }
-            }
-            else if (second instanceof Element) {
-                item = second;
-            }
-        }
-        else {
-            const lastIndex = childrenCollection.length - 1;
-            const last = childrenCollection.item(lastIndex);
-            if (last instanceof Element && last.hasAttribute('data-arrow')) {
-                const prev = childrenCollection.item(lastIndex - 1);
-                if (prev instanceof Element) {
-                    item = prev;
-                }
-                else {
-                    item = null;
-                }
-            }
-            else if (last instanceof Element) {
-                item = last;
-            }
-        }
-        const trigger = triggerRef?.current;
-        if (!trigger || !item) {
-            return;
-        }
-        const itemRect = item.getBoundingClientRect();
-        const triggerRect = trigger.getBoundingClientRect();
-        const itemHeight = itemRect.height;
-        const triggerHeight = triggerRect.height;
-        const dynamicOffset = (triggerHeight - itemHeight) / 2;
-        if (align === 'start') {
-            if (label instanceof Element && label.hasAttribute('data-label')) {
-                const labelHeight = label.getBoundingClientRect().height;
-                setLabelOffset(alignOffset - labelHeight + dynamicOffset);
-            }
-        }
-        else {
-            setLabelOffset(alignOffset + dynamicOffset - 1);
-        }
-    }, [
-        children,
-        direction,
-        contentRef,
-        triggerRef,
-        align,
-        alignOffset,
-        disableAutoPositioning,
-    ]);
-    /**
-     * Positions the content based on the direction and the trigger height.
-     */
-    useLayoutEffect(() => {
-        if (disableAutoPositioning || !triggerRef?.current) {
-            return;
-        }
-        let ro = null;
-        let mounted = true;
-        const boundaryEl = (collisionBoundary instanceof Element && collisionBoundary) ||
-            document.documentElement;
-        const measureAndAdjust = () => {
-            if (!mounted) {
-                return;
-            }
-            const triggerEl = triggerRef.current;
-            const el = contentRef.current;
-            if (!triggerEl || !el) {
-                return;
-            }
-            const triggerRect = triggerEl.getBoundingClientRect();
-            const contentRect = el.getBoundingClientRect();
-            if (contentRect.width <= 0) {
-                return;
-            }
-            const boundaryRect = boundaryEl.getBoundingClientRect();
-            const fits = {
-                right: boundaryRect.right - triggerRect.right >= contentRect.width,
-                left: triggerRect.left - boundaryRect.left >= contentRect.width,
-                bottom: boundaryRect.bottom - triggerRect.bottom >= contentRect.height,
-                top: triggerRect.top - boundaryRect.top >= contentRect.height,
-            };
-            let alignCandidate = 'start';
-            switch (direction) {
-                case Direction.UP_RIGHT:
-                case Direction.DOWN_RIGHT: {
-                    if (fits.right) {
-                        alignCandidate = 'start';
-                    }
-                    else if (fits.left) {
-                        alignCandidate = 'end';
-                    }
-                    else {
-                        alignCandidate = 'start';
-                    }
-                    break;
-                }
-                case Direction.UP_LEFT:
-                case Direction.DOWN_LEFT: {
-                    if (fits.left) {
-                        alignCandidate = 'end';
-                    }
-                    else if (fits.right) {
-                        alignCandidate = 'start';
-                    }
-                    else {
-                        alignCandidate = 'end';
-                    }
-                    break;
-                }
-                case Direction.RIGHT_DOWN:
-                case Direction.LEFT_DOWN: {
-                    if (fits.bottom) {
-                        alignCandidate = 'start';
-                    }
-                    else if (fits.top) {
-                        alignCandidate = 'end';
-                    }
-                    else {
-                        alignCandidate = 'start';
-                    }
-                    break;
-                }
-                case Direction.RIGHT_UP:
-                case Direction.LEFT_UP: {
-                    if (fits.top) {
-                        alignCandidate = 'end';
-                    }
-                    else if (fits.bottom) {
-                        alignCandidate = 'start';
-                    }
-                    else {
-                        alignCandidate = 'end';
-                    }
-                    break;
-                }
-            }
-            setAlign(alignCandidate);
-            setIsPositioned(true);
-        };
-        requestAnimationFrame(measureAndAdjust);
-        if (contentRef.current && typeof ResizeObserver !== 'undefined') {
-            ro = new ResizeObserver(measureAndAdjust);
-            ro.observe(contentRef.current);
-        }
-        return () => {
-            mounted = false;
-            ro?.disconnect();
-        };
-    }, [
-        direction,
-        disableAutoPositioning,
-        triggerRef,
-        contentRef,
-        collisionBoundary,
-    ]);
-    return { align, labelOffset, isPositioned };
-}
+import "react";
+import { u as n } from "../../../../useContentPositioning-BLCC-Xty.mjs";
+import "../../components/Content/Content.enums.js";
+import "../../components/Content/Content.utils.js";
+export {
+  n as useContentPositioning
+};

package/dist/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.types.js

@@ -1 +1 @@
-export {};
+

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

@@ -6,8 +6,8 @@ export declare const useContextMenu: ({ mode: rootMode, defaultOpen, animationDu
     onOpenChange: (value: boolean) => void;
     onOpenByKeyboard: (value: boolean) => void;
     inheritedArrowColor: string | null;
-    triggerRef: import("react").RefObject<HTMLButtonElement>;
-    contentRef: import("react").RefObject<HTMLDivElement>;
+    triggerRef: import('react').RefObject<HTMLButtonElement>;
+    contentRef: import('react').RefObject<HTMLDivElement>;
     animatedOpen: boolean;
     animationDuration: number;
     hoverCloseDelay: number;