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

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

@@ -1,7 +1,198 @@
-import "react";
-import { u as n } from "../../../../useContentPositioning-BIVWgixU.mjs";
-import "../../components/Content/Content.enums.js";
-import "../../components/Content/Content.utils.js";
-export {
-  n as useContentPositioning
-};
+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 };
+}

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

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

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

@@ -4,9 +4,10 @@ export declare const useContextMenu: ({ mode: rootMode, defaultOpen, animationDu
     open: boolean;
     mode: ContextMenuMode;
     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;

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

@@ -1 +1 @@
-{"version":3,"file":"useContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenu/useContextMenu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,eAAO,MAAM,cAAc,iFAMxB,qBAAqB;;;0BA2EW,OAAO;;;;;;;;;;;;CA+HzC,CAAC"}
+{"version":3,"file":"useContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenu/useContextMenu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,eAAO,MAAM,cAAc,iFAMxB,qBAAqB;;;0BA8EW,OAAO;8BA2BP,OAAO;;;;;;;;;;;;CAmIzC,CAAC"}

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

@@ -1,63 +1,210 @@
-import { useId as B, useState as f, useRef as m, useEffect as O } from "react";
-import { ContextMenuMode as u } from "../../ContextMenu.enums.js";
-import "../../providers/LevelProvider/LevelProvider.js";
-import { useInheritedArrowColor as S } from "../useInheritedArrowColor/useInheritedArrowColor.js";
-import "../../../../useContentPositioning-BIVWgixU.mjs";
-import "../../components/Content/Content.utils.js";
-import "../../ContextMenu.context.js";
-import { useIsTouchDevice as j } from "../useIsTouchDevice/useIsTouchDevice.js";
-import { contextMenuBus as C } from "../../utils/contextMenuBus/contextMenuBus.js";
-const W = ({
-  mode: V,
-  defaultOpen: p,
-  animationDuration: h,
-  hoverCloseDelay: a,
-  onOpen: T
-}) => {
-  const i = B(), [s, l] = f(p || !1), [g, c] = f(!1), [R, o] = f(!1), [r, d] = f(!1), x = m(null), I = m(null), e = m(null), n = m(null), t = j() ? u.CLICK : V, M = () => {
-    e.current && (clearTimeout(e.current), e.current = null), n.current && (clearTimeout(n.current), n.current = null);
-  }, v = () => {
-    l(!1), o(!1), d(!1);
-  }, E = () => {
-    M(), t === u.HOVER || r ? (c(!1), n.current = setTimeout(() => {
-      v();
-    }, h)) : v();
-  }, H = () => {
-    M(), c(!1), l(!1), o(!1), d(!1);
-  }, L = (b) => {
-    t === u.CLICK && p !== void 0 || (b ? (n.current && (clearTimeout(n.current), n.current = null), (t === u.HOVER || r) && c(!0), l(!0), T == null || T(!0), setTimeout(() => C.emit(i), 0)) : E());
-  }, A = () => {
-    t !== u.HOVER && !r || (s ? o(!0) : (e.current && (clearTimeout(e.current), e.current = null), c(!0), l(!0), o(!0), setTimeout(() => C.emit(i), 0)));
-  }, w = () => {
-    t !== u.HOVER && !r || (e.current && (clearTimeout(e.current), e.current = null), o(!1));
-  }, y = () => {
-    c(!0), o(!0), d(!0);
-  };
-  O(() => C.subscribe((q) => {
-    q !== i && H();
-  }), [i]), O(() => {
-    !s || t !== u.HOVER && !r || (R ? e.current && (clearTimeout(e.current), e.current = null) : e.current || (e.current = setTimeout(() => {
-      E();
-    }, a)));
-  }, [t, s, R, r, a]);
-  const K = S(s, I);
-  return {
-    open: s,
-    mode: t,
-    onOpenChange: L,
-    inheritedArrowColor: K,
-    triggerRef: x,
-    contentRef: I,
-    animatedOpen: g,
-    animationDuration: h,
-    hoverCloseDelay: a,
-    temporaryHoverClose: r,
-    closeMenuImmediately: H,
-    onMouseEnter: A,
-    onMouseLeave: w,
-    enableTemporaryHoverClose: y
-  };
-};
-export {
-  W as useContextMenu
+import { useEffect, useId, useRef, useState } from 'react';
+import { useInheritedArrowColor, useIsTouchDevice } from '..';
+import { ContextMenuMode } from '../../ContextMenu.enums';
+import { contextMenuBus } from '../../utils';
+export const useContextMenu = ({ mode: rootMode, defaultOpen, animationDuration, hoverCloseDelay, onOpen, }) => {
+    const id = useId();
+    const [open, setOpen] = useState(defaultOpen || false);
+    const [animatedOpen, setAnimatedOpen] = useState(false);
+    const [isInsideContent, setIsInsideContent] = useState(false);
+    const [openedByKeyboard, setOpenedByKeyboard] = useState(false);
+    const [temporaryHoverClose, setTemporaryHoverClose] = useState(false);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const isTouchDevice = useIsTouchDevice();
+    /**
+     * The mode of the ContextMenu.Root.
+     */
+    const mode = isTouchDevice ? ContextMenuMode.CLICK : rootMode;
+    /**
+     * Clears the timers.
+     */
+    const clearTimers = () => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    };
+    /**
+     * Closes the menu.
+     */
+    const handleClose = () => {
+        setOpen(false);
+        onOpen?.(false);
+        setIsInsideContent(false);
+        setTemporaryHoverClose(false);
+    };
+    /**
+     * Requests the close of the menu.
+     */
+    const requestClose = () => {
+        clearTimers();
+        if (mode === ContextMenuMode.HOVER || temporaryHoverClose) {
+            setAnimatedOpen(false);
+            closeTimerRef.current = setTimeout(() => {
+                handleClose();
+            }, animationDuration);
+        }
+        else {
+            handleClose();
+        }
+    };
+    /**
+     * Closes the menu immediately.
+     */
+    const closeMenuImmediately = () => {
+        clearTimers();
+        setAnimatedOpen(false);
+        setOpen(false);
+        onOpen?.(false);
+        setIsInsideContent(false);
+        setTemporaryHoverClose(false);
+    };
+    /**
+     * Handles the open state change.
+     */
+    const handleOpenChange = (value) => {
+        if (mode === ContextMenuMode.CLICK && defaultOpen !== undefined) {
+            return;
+        }
+        if (value) {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = null;
+            }
+            if (mode === ContextMenuMode.HOVER || temporaryHoverClose) {
+                setAnimatedOpen(true);
+            }
+            setOpen(true);
+            onOpen?.(true);
+            setTimeout(() => contextMenuBus.emit(id), 0);
+        }
+        else {
+            requestClose();
+        }
+    };
+    /**
+     * The callback function to be called when the menu is opened by keyboard.
+     */
+    const onOpenByKeyboard = (value) => {
+        setOpenedByKeyboard(value);
+        handleOpenChange(value);
+    };
+    /**
+     * Handles the mouse enter event.
+     */
+    const handleMouseEnter = () => {
+        if (mode !== ContextMenuMode.HOVER && !temporaryHoverClose) {
+            return;
+        }
+        setOpenedByKeyboard(false);
+        if (closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+            setAnimatedOpen(true);
+        }
+        if (open) {
+            setIsInsideContent(true);
+        }
+        else {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = null;
+            }
+            setAnimatedOpen(true);
+            setOpen(true);
+            onOpen?.(true);
+            setIsInsideContent(true);
+            setTimeout(() => contextMenuBus.emit(id), 0);
+        }
+    };
+    /**
+     * Handles the mouse leave event.
+     */
+    const handleMouseLeave = () => {
+        if (mode !== ContextMenuMode.HOVER && !temporaryHoverClose) {
+            return;
+        }
+        setOpenedByKeyboard(false);
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setIsInsideContent(false);
+    };
+    /**
+     * Enables the temporary hover close.
+     */
+    const enableTemporaryHoverClose = () => {
+        setAnimatedOpen(true);
+        setIsInsideContent(true);
+        setTemporaryHoverClose(true);
+    };
+    /**
+     * Closes the menu when the context menu bus emits an event.
+     */
+    useEffect(() => {
+        const unsubscribe = contextMenuBus.subscribe((openedId) => {
+            if (openedId !== id) {
+                closeMenuImmediately();
+            }
+        });
+        return unsubscribe;
+    }, [id]);
+    /**
+     * Handles the hover close delay.
+     */
+    useEffect(() => {
+        if (!open || (mode !== ContextMenuMode.HOVER && !temporaryHoverClose)) {
+            return;
+        }
+        if (openedByKeyboard) {
+            return;
+        }
+        if (isInsideContent) {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = null;
+            }
+        }
+        else if (!hoverTimeoutRef.current) {
+            hoverTimeoutRef.current = setTimeout(() => {
+                requestClose();
+            }, hoverCloseDelay);
+        }
+    }, [
+        mode,
+        open,
+        isInsideContent,
+        temporaryHoverClose,
+        hoverCloseDelay,
+        openedByKeyboard,
+    ]);
+    /**
+     * Updates the inherited arrow color when the menu is open.
+     */
+    const inheritedArrowColor = useInheritedArrowColor(open, contentRef);
+    return {
+        open,
+        mode,
+        onOpenChange: handleOpenChange,
+        onOpenByKeyboard,
+        inheritedArrowColor,
+        triggerRef,
+        contentRef,
+        animatedOpen,
+        animationDuration,
+        hoverCloseDelay,
+        temporaryHoverClose,
+        closeMenuImmediately,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        enableTemporaryHoverClose,
+    };
 };

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

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

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

@@ -1,40 +1,44 @@
-import { useState as l } from "react";
-import { useLevelContext as v } from "../../providers/LevelProvider/LevelProvider.js";
-const g = ({
-  displayName: s,
-  id: r,
-  isDisabled: e,
-  hasSubmenu: i,
-  onMouseEnter: d,
-  onMouseLeave: f
-}) => {
-  const [n, o] = l(!1), { setActiveItemId: c } = v(s);
-  return e ? {
-    dataHighlighted: void 0,
-    onFocus: void 0,
-    onMouseEnter: void 0,
-    onBlur: void 0,
-    onMouseLeave: void 0,
-    onKeyDown: void 0
-  } : {
-    dataHighlighted: n ? "" : void 0,
-    onFocus: () => {
-      i || c(r), o(!e);
-    },
-    onMouseEnter: (t) => {
-      i || c(r), o(!e), d == null || d(t);
-    },
-    onBlur: () => {
-      o(!1);
-    },
-    onMouseLeave: (t) => {
-      o(!1), f == null || f(t);
-    },
-    onKeyDown: (t) => {
-      i && t.key === "ArrowLeft" && o(!1);
+import { useState } from 'react';
+import { useLevelContext } from '../../providers/LevelProvider';
+export const useContextMenuItemFocus = ({ displayName, id, isDisabled, hasSubmenu, onMouseEnter, onMouseLeave, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const { setActiveItemId } = useLevelContext(displayName);
+    if (isDisabled) {
+        return {
+            dataHighlighted: undefined,
+            onFocus: undefined,
+            onMouseEnter: undefined,
+            onBlur: undefined,
+            onMouseLeave: undefined,
+            onKeyDown: undefined,
+        };
     }
-  };
-};
-export {
-  g as useContextMenuItemFocus
+    return {
+        dataHighlighted: isFocused ? '' : undefined,
+        onFocus: () => {
+            if (!hasSubmenu) {
+                setActiveItemId(id);
+            }
+            setIsFocused(!isDisabled);
+        },
+        onMouseEnter: (e) => {
+            if (!hasSubmenu) {
+                setActiveItemId(id);
+            }
+            setIsFocused(!isDisabled);
+            onMouseEnter?.(e);
+        },
+        onBlur: () => {
+            setIsFocused(false);
+        },
+        onMouseLeave: (e) => {
+            setIsFocused(false);
+            onMouseLeave?.(e);
+        },
+        onKeyDown: (e) => {
+            if (hasSubmenu && e.key === 'ArrowLeft') {
+                setIsFocused(false);
+            }
+        },
+    };
 };

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

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

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

@@ -1,12 +1,13 @@
 import { UseContextMenuSubOptions } from './useContextMenuSub.types';
 export declare function useContextMenuSub({ displayName, mode: initialMode, defaultOpen, }: UseContextMenuSubOptions): {
     open: boolean;
-    setOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     animatedOpen: boolean;
     startAnimation: () => void;
-    handleMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
-    handleMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
-    handleOpenChange: (val: boolean) => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleOpenChange: (value: boolean) => void;
+    onOpenByKeyboard: (value: boolean) => void;
     triggerId: string;
 };
 //# sourceMappingURL=useContextMenuSub.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useContextMenuSub.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuSub/useContextMenuSub.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAErE,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,IAAI,EAAE,WAAW,EACjB,WAAW,GACZ,EAAE,wBAAwB;;;;;0BAoEnB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;0BA+B7B,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;4BAyB3B,OAAO;;EA8EhB"}
+{"version":3,"file":"useContextMenuSub.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuSub/useContextMenuSub.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAErE,wBAAgB,iBAAiB,CAAC,EAChC,WAAW,EACX,IAAI,EAAE,WAAW,EACjB,WAAW,GACZ,EAAE,wBAAwB;;;;;;;8BAyEQ,OAAO;8BAmCP,OAAO;;EA4GzC"}