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

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;

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;;;0BA4EW,OAAO;8BA2BP,OAAO;;;;;;;;;;;;CAkIzC,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,73 +1,210 @@
-import { useId as k, useState as l, useRef as a, useEffect as V } from "react";
-import { ContextMenuMode as o } from "../../ContextMenu.enums.js";
-import "../../providers/LevelProvider/LevelProvider.js";
-import { useInheritedArrowColor as z } from "../useInheritedArrowColor/useInheritedArrowColor.js";
-import "../../../../useContentPositioning-27D32n5u.mjs";
-import "../../components/Content/Content.utils.js";
-import "../../ContextMenu.context.js";
-import { useIsTouchDevice as D } from "../useIsTouchDevice/useIsTouchDevice.js";
-import { contextMenuBus as b } from "../../utils/contextMenuBus/contextMenuBus.js";
-const Z = ({
-  mode: g,
-  defaultOpen: h,
-  animationDuration: R,
-  hoverCloseDelay: d,
-  onOpen: T
-}) => {
-  const f = k(), [c, m] = l(h || !1), [x, u] = l(!1), [I, s] = l(!1), [M, p] = l(!1), [n, C] = l(!1), B = a(null), y = a(null), e = a(null), r = a(null), t = D() ? o.CLICK : g, E = () => {
-    e.current && (clearTimeout(e.current), e.current = null), r.current && (clearTimeout(r.current), r.current = null);
-  }, H = () => {
-    m(!1), s(!1), C(!1);
-  }, v = () => {
-    E(), t === o.HOVER || n ? (u(!1), r.current = setTimeout(() => {
-      H();
-    }, R)) : H();
-  }, O = () => {
-    E(), u(!1), m(!1), s(!1), C(!1);
-  }, K = (i) => {
-    t === o.CLICK && h !== void 0 || (i ? (r.current && (clearTimeout(r.current), r.current = null), (t === o.HOVER || n) && u(!0), m(!0), T == null || T(!0), setTimeout(() => b.emit(f), 0)) : v());
-  }, L = (i) => {
-    p(i), K(i);
-  }, A = () => {
-    t !== o.HOVER && !n || (p(!1), r.current && (clearTimeout(r.current), r.current = null, u(!0)), c ? s(!0) : (e.current && (clearTimeout(e.current), e.current = null), u(!0), m(!0), s(!0), setTimeout(() => b.emit(f), 0)));
-  }, w = () => {
-    t !== o.HOVER && !n || (p(!1), e.current && (clearTimeout(e.current), e.current = null), s(!1));
-  }, q = () => {
-    u(!0), s(!0), C(!0);
-  };
-  V(() => b.subscribe((j) => {
-    j !== f && O();
-  }), [f]), V(() => {
-    !c || t !== o.HOVER && !n || M || (I ? e.current && (clearTimeout(e.current), e.current = null) : e.current || (e.current = setTimeout(() => {
-      v();
-    }, d)));
-  }, [
-    t,
-    c,
-    I,
-    n,
-    d,
-    M
-  ]);
-  const S = z(c, y);
-  return {
-    open: c,
-    mode: t,
-    onOpenChange: K,
-    onOpenByKeyboard: L,
-    inheritedArrowColor: S,
-    triggerRef: B,
-    contentRef: y,
-    animatedOpen: x,
-    animationDuration: R,
-    hoverCloseDelay: d,
-    temporaryHoverClose: n,
-    closeMenuImmediately: O,
-    onMouseEnter: A,
-    onMouseLeave: w,
-    enableTemporaryHoverClose: q
-  };
-};
-export {
-  Z 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,7 +1,7 @@
 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: () => void;

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

@@ -1,66 +1,187 @@
-import { useId as L, useState as a, useRef as v, useEffect as x } from "react";
-import { ContextMenuMode as s } from "../../ContextMenu.enums.js";
-import { useLevelContext as g } from "../../providers/LevelProvider/LevelProvider.js";
-import "../../../../useContentPositioning-27D32n5u.mjs";
-import "../../components/Content/Content.utils.js";
-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 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;
-    }
-    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;
-      }
-      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
-  };
+import { useEffect, useId, useRef, useState } from 'react';
+import { useIsTouchDevice } from '..';
+import { ContextMenuMode } from '../../ContextMenu.enums';
+import { useContextMenuContext } from '../../ContextMenu.context';
+import { useLevelContext } from '../../providers/LevelProvider';
+export function useContextMenuSub({ displayName, mode: initialMode, defaultOpen, }) {
+    const triggerId = useId();
+    const [open, setOpen] = useState(defaultOpen || false);
+    const [animatedOpen, setAnimatedOpen] = useState(false);
+    const [isInsideContent, setIsInsideContent] = useState(false);
+    const [openedByKeyboard, setOpenedByKeyboard] = useState(false);
+    const hoverTimeoutRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const isTouchDevice = useIsTouchDevice();
+    const { hoverCloseDelay, animationDuration } = useContextMenuContext(displayName);
+    const { activeItemId } = useLevelContext(displayName);
+    /**
+     * The mode of the submenu.
+     */
+    const mode = isTouchDevice ? ContextMenuMode.CLICK : initialMode;
+    /**
+     * 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 submenu immediately.
+     */
+    const handleCloseImmediate = () => {
+        clearTimers();
+        setAnimatedOpen(false);
+        setOpen(false);
+        setIsInsideContent(false);
+        setOpenedByKeyboard(false);
+    };
+    /**
+     * Requests the close of the submenu.
+     */
+    const requestClose = () => {
+        clearTimers();
+        if (mode === ContextMenuMode.HOVER) {
+            setAnimatedOpen(false);
+            closeTimerRef.current = setTimeout(() => {
+                setOpen(false);
+                setIsInsideContent(false);
+                setOpenedByKeyboard(false);
+            }, animationDuration);
+        }
+        else {
+            setOpen(false);
+            setIsInsideContent(false);
+            setOpenedByKeyboard(false);
+        }
+    };
+    /**
+     * Handles the open state change.
+     */
+    const handleOpenChange = (value) => {
+        if (defaultOpen !== undefined) {
+            setOpen(defaultOpen);
+            setAnimatedOpen(defaultOpen);
+            setOpenedByKeyboard(false);
+            return;
+        }
+        if (mode === ContextMenuMode.CLICK) {
+            setOpen(value);
+            setAnimatedOpen(value);
+            return;
+        }
+        if (value) {
+            if (closeTimerRef.current) {
+                clearTimeout(closeTimerRef.current);
+                closeTimerRef.current = null;
+            }
+            if (mode === ContextMenuMode.HOVER) {
+                setAnimatedOpen(true);
+            }
+            setOpen(true);
+        }
+        else {
+            requestClose();
+        }
+    };
+    /**
+     * The callback function to be called when the submenu is opened by keyboard.
+     */
+    const onOpenByKeyboard = (value) => {
+        setOpenedByKeyboard(value);
+        handleOpenChange(value);
+    };
+    /**
+     * Handles the mouse enter event.
+     */
+    const handleMouseEnter = () => {
+        if (mode !== ContextMenuMode.HOVER) {
+            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);
+            setIsInsideContent(true);
+        }
+    };
+    /**
+     * Handles the mouse leave event.
+     */
+    const handleMouseLeave = () => {
+        if (mode !== ContextMenuMode.HOVER) {
+            return;
+        }
+        setOpenedByKeyboard(false);
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+        setIsInsideContent(false);
+    };
+    /**
+     * Closes the submenu when the active item id changes.
+     */
+    useEffect(() => {
+        if (activeItemId !== triggerId && open && defaultOpen === undefined) {
+            handleCloseImmediate();
+        }
+    }, [activeItemId, open, defaultOpen]);
+    /**
+     * Handles the hover close delay.
+     */
+    useEffect(() => {
+        if (!open || mode !== ContextMenuMode.HOVER) {
+            return;
+        }
+        if (openedByKeyboard) {
+            return;
+        }
+        if (isInsideContent) {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = null;
+            }
+            return;
+        }
+        if (!hoverTimeoutRef.current) {
+            hoverTimeoutRef.current = setTimeout(() => {
+                requestClose();
+            }, hoverCloseDelay);
+        }
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = null;
+            }
+        };
+    }, [mode, open, isInsideContent, hoverCloseDelay, openedByKeyboard]);
+    return {
+        open,
+        setOpen,
+        animatedOpen,
+        startAnimation: () => setAnimatedOpen(true),
+        handleMouseEnter,
+        handleMouseLeave,
+        handleOpenChange,
+        onOpenByKeyboard,
+        triggerId,
+    };
 }
-export {
-  G as useContextMenuSub
-};

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

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