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

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

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

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

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

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

@@ -1,44 +1,40 @@
-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,
-        };
+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);
     }
-    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);
-            }
-        },
-    };
+  };
+};
+export {
+  g as useContextMenuItemFocus
 };

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,187 +1,66 @@
-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,
-    };
+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-BLCC-Xty.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
+  };
 }
+export {
+  G as useContextMenuSub
+};

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

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

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

@@ -6,8 +6,8 @@ export declare const useContextMenuSubMenu: ({ displayName, mode: rootMode, defa
     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;