@kommo-crm/crm-react-ui-kit 1.1.1-beta.9 → 1.2.0-beta.17

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

@@ -1,16 +1,32 @@
-import { useContextMenu as t } from "./useContextMenu/useContextMenu.js";
+import { useContextMenu as r } 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-BLEFxO0N.mjs";
-import { useContextMenuSub as p } from "./useContextMenuSub/useContextMenuSub.js";
-import { useContextMenuItemFocus as i } from "./useContextMenuItemFocus/useContextMenuItemFocus.js";
+import { useInheritedArrowColor as n } from "./useInheritedArrowColor/useInheritedArrowColor.js";
+import { u as m } from "../../../useContentPositioning-CLU2E_Oz.mjs";
+import { useContextMenuSub as f } from "./useContextMenuSub/useContextMenuSub.js";
+import { useContextMenuItemFocus as C } from "./useContextMenuItemFocus/useContextMenuItemFocus.js";
 import { useIsTouchDevice as c } from "./useIsTouchDevice/useIsTouchDevice.js";
+import { useClickOutside as d } from "./useClickOutside/useClickOutside.js";
+import { useStopContextMenuEvents as l } from "./useStopContextMenuEvents/useStopContextMenuEvents.js";
+import { useSubMenu as S } from "./useSubMenu/useSubMenu.js";
+import { useInnerInputsFocus as F } from "./useInnerInputsFocus/useInnerInputsFocus.js";
+import { useItemInnerFocus as O } from "./useItemInnerFocus/useItemInnerFocus.js";
+import { useChildrenWithBlocker as a } from "./useChildrenWithBlocker/useChildrenWithBlocker.js";
+import { useMouseMoveOutside as w } from "./useMouseMoveOutside/useMouseMoveOutside.js";
+import { usePrevious as B } from "./usePrevious/usePrevious.js";
 export {
+  a as useChildrenWithBlocker,
+  d as useClickOutside,
   m as useContentPositioning,
-  t as useContextMenu,
-  i as useContextMenuItemFocus,
-  p as useContextMenuSub,
+  r as useContextMenu,
+  C as useContextMenuItemFocus,
+  f as useContextMenuSub,
   u as useContextMenuSubMenu,
-  s as useInheritedArrowColor,
-  c as useIsTouchDevice
+  n as useInheritedArrowColor,
+  F as useInnerInputsFocus,
+  c as useIsTouchDevice,
+  O as useItemInnerFocus,
+  w as useMouseMoveOutside,
+  B as usePrevious,
+  l as useStopContextMenuEvents,
+  S as useSubMenu
 };

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { UseChildrenWithBlockerOptions } from './useChildrenWithBlocker.props';
+export declare function useChildrenWithBlocker({ displayName, children, shouldShowBlocker, blockerClassName, onBlockerClick, }: UseChildrenWithBlockerOptions): React.JSX.Element;
+//# sourceMappingURL=useChildrenWithBlocker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenWithBlocker.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useChildrenWithBlocker/useChildrenWithBlocker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAMrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,QAAQ,EACR,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,GACf,EAAE,6BAA6B,qBA6C/B"}

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

@@ -0,0 +1,47 @@
+import { jsxs as r, Fragment as s, jsx as i } from "react/jsx-runtime";
+import o, { useMemo as x } from "react";
+import { F as f } from "../../../../useContentPositioning-CLU2E_Oz.mjs";
+import { useContextMenuRootContext as F } from "../../ContextMenu.context.js";
+function b({
+  displayName: p,
+  children: t,
+  shouldShowBlocker: e,
+  blockerClassName: m,
+  onBlockerClick: n
+}) {
+  const { itemWithFocusedInput: c, setItemWithFocusedInput: a } = F(p);
+  return n = n ?? (() => {
+    var u;
+    a(null), (u = document.activeElement) == null || u.blur();
+  }), e = e ?? c !== null, x(() => {
+    if (!o.isValidElement(t))
+      return /* @__PURE__ */ r(s, { children: [
+        e && /* @__PURE__ */ i(
+          f,
+          {
+            className: m,
+            onClick: n
+          },
+          "focus-blocker"
+        ),
+        t
+      ] });
+    const u = e ? /* @__PURE__ */ i(
+      f,
+      {
+        className: m,
+        onClick: n
+      },
+      "focus-blocker"
+    ) : null;
+    return o.cloneElement(t, {
+      children: /* @__PURE__ */ r(s, { children: [
+        u,
+        t.props.children
+      ] })
+    });
+  }, [t, e, m, n]);
+}
+export {
+  b as useChildrenWithBlocker
+};

package/dist/components/ContextMenu/hooks/useChildrenWithBlocker/useChildrenWithBlocker.props.d.ts

@@ -0,0 +1,23 @@
+export interface UseChildrenWithBlockerOptions {
+    /**
+     * The name of the display.
+     */
+    displayName: string;
+    /**
+     * The children of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the blocker should be shown.
+     */
+    shouldShowBlocker?: boolean;
+    /**
+     * The class name of the blocker.
+     */
+    blockerClassName?: string;
+    /**
+     * The callback function to be called when the blocker is clicked.
+     */
+    onBlockerClick?: () => void;
+}
+//# sourceMappingURL=useChildrenWithBlocker.props.d.ts.map

package/dist/components/ContextMenu/hooks/useChildrenWithBlocker/useChildrenWithBlocker.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenWithBlocker.props.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useChildrenWithBlocker/useChildrenWithBlocker.props.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B"}

package/dist/components/ContextMenu/hooks/useChildrenWithBlocker/useChildrenWithBlocker.props.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+import { UseClickOutsideOptions } from './useClickOutside.types';
+export declare function useClickOutside<T extends HTMLElement>({ refs, handler, }: UseClickOutsideOptions<T>): void;
+//# sourceMappingURL=useClickOutside.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,IAAI,EACJ,OAAO,GACR,EAAE,sBAAsB,CAAC,CAAC,CAAC,QAwB3B"}

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

@@ -0,0 +1,20 @@
+import { useEffect as i } from "react";
+function d({
+  refs: n,
+  handler: o
+}) {
+  i(() => {
+    function t(s) {
+      n.some((e) => {
+        const u = e == null ? void 0 : e.current;
+        return u && u.contains(s.target);
+      }) || o(s);
+    }
+    return document.addEventListener("mousedown", t), document.addEventListener("touchstart", t), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", t);
+    };
+  }, [n, o]);
+}
+export {
+  d as useClickOutside
+};

package/dist/components/ContextMenu/hooks/useClickOutside/useClickOutside.types.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+export type UseClickOutsideOptions<T extends HTMLElement> = {
+    /**
+     * The ref to the element to listen for click outside.
+     */
+    refs: Array<RefObject<T> | null>;
+    /**
+     * The handler to call when a click outside is detected.
+     */
+    handler: (event: MouseEvent | TouchEvent) => void;
+};
+//# sourceMappingURL=useClickOutside.types.d.ts.map

package/dist/components/ContextMenu/hooks/useClickOutside/useClickOutside.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useClickOutside/useClickOutside.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IAC1D;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACjC;;OAEG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;CACnD,CAAC"}

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

@@ -0,0 +1 @@
+

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

@@ -1,7 +1,7 @@
 import { UseContentPositioningOptions } from './useContentPositioning.types';
-export declare function useContentPositioning({ direction, alignOffset, disableAutoPositioning, triggerRef, contentRef, collisionBoundary, children, }: UseContentPositioningOptions): {
+export declare function useContentPositioning({ direction, alignOffset, disableAutoPositioning, triggerRef, contentRef, collisionBoundary, disableRepositioning, children, }: UseContentPositioningOptions): {
     align: "end" | "start";
-    labelOffset: number;
+    offset: number;
     isPositioned: boolean;
 };
 //# sourceMappingURL=useContentPositioning.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useContentPositioning.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAE7E,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,WAAe,EACf,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,QAAQ,GACT,EAAE,4BAA4B;;;;EAsO9B"}
+{"version":3,"file":"useContentPositioning.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAE7E,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,WAAe,EACf,sBAAsB,EACtB,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,oBAAoB,EACpB,QAAQ,GACT,EAAE,4BAA4B;;;;EAwP9B"}

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

@@ -1,7 +1,8 @@
 import "react";
-import { u as n } from "../../../../useContentPositioning-BLEFxO0N.mjs";
+import { u as n } from "../../../../useContentPositioning-CLU2E_Oz.mjs";
 import "../../components/Content/Content.enums.js";
 import "../../components/Content/Content.utils.js";
+import "../usePrevious/usePrevious.js";
 export {
   n as useContentPositioning
 };

package/dist/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.types.d.ts

@@ -3,7 +3,7 @@ export interface UseContentPositioningOptions {
     /**
      * The direction of the content.
      */
-    direction: DirectionType;
+    direction?: DirectionType;
     /**
      * The offset of the content.
      */
@@ -28,5 +28,9 @@ export interface UseContentPositioningOptions {
      * The children of the content.
      */
     children: React.ReactNode;
+    /**
+     * Whether to disable repositioning.
+     */
+    disableRepositioning: boolean;
 }
 //# sourceMappingURL=useContentPositioning.types.d.ts.map

package/dist/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContentPositioning.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
+{"version":3,"file":"useContentPositioning.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContentPositioning/useContentPositioning.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,WAAW,4BAA4B;IAC3C;;OAEG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,oBAAoB,EAAE,OAAO,CAAC;CAC/B"}

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

@@ -1,13 +1,15 @@
+import { default as React } from 'react';
 import { ContextMenuMode } from '../../ContextMenu.enums';
+import { ContextMenuModeType } from '../../ContextMenu.types';
 import { UseContextMenuOptions } from './useContextMenu.types';
-export declare const useContextMenu: ({ mode: rootMode, defaultOpen, animationDuration, hoverCloseDelay, onOpen, onAnimatedOpen, }: UseContextMenuOptions) => {
+export declare const useContextMenu: ({ mode: rootMode, defaultOpen, animationDuration, hoverCloseDelay, onOpen, onAnimatedOpen, isOpen, enableInnerInputFocus, backgroundFocusBlockerContainers, backgroundFocusBlockerClassName, }: UseContextMenuOptions) => {
     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: React.RefObject<HTMLButtonElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
     animatedOpen: boolean;
     animationDuration: number;
     hoverCloseDelay: number;
@@ -16,6 +18,11 @@ export declare const useContextMenu: ({ mode: rootMode, defaultOpen, animationDu
     onMouseEnter: () => void;
     onMouseLeave: () => void;
     enableTemporaryHoverClose: () => void;
-    onChildClickOpen: (value: boolean) => void;
+    onChildOpen: (value: boolean, childModeValue: ContextMenuModeType) => void;
+    onSubmenuOpen: (value: boolean) => void;
+    isRootContentBlocked: boolean;
+    isChildOpen: boolean;
+    itemWithFocusedInput: string | null;
+    setItemWithFocusedInput: React.Dispatch<React.SetStateAction<string | null>>;
 };
 //# sourceMappingURL=useContextMenu.d.ts.map

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,iGAOxB,qBAAqB;;;0BAmFW,OAAO;8BA2BP,OAAO;;;;;;;;;;;;8BAmEH,OAAO;CA8E7C,CAAC"}
+{"version":3,"file":"useContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenu/useContextMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAI1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,eAAO,MAAM,cAAc,mMAWxB,qBAAqB;;;0BAmGW,OAAO;8BA2BP,OAAO;;;;;;;;;;;;yBAoE/B,OAAO,kBACE,mBAAmB;2BAvGH,OAAO;;;;;CAgP1C,CAAC"}

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

@@ -1,84 +1,124 @@
-import { useId as N, useState as n, useRef as C, useEffect as R } from "react";
-import { ContextMenuMode as l } from "../../ContextMenu.enums.js";
+import { jsx as se } from "react/jsx-runtime";
+import { useId as oe, useState as o, useRef as I, useEffect as R } from "react";
+import { c as ue, F as ne } from "../../../../useContentPositioning-CLU2E_Oz.mjs";
+import { ContextMenuMode as n } from "../../ContextMenu.enums.js";
 import "../../providers/LevelProvider/LevelProvider.js";
+import "../../providers/SubMenuProvider/SubMenuProvider.js";
 import "../../ContextMenu.context.js";
-import { useInheritedArrowColor as P } from "../useInheritedArrowColor/useInheritedArrowColor.js";
-import "../../../../useContentPositioning-BLEFxO0N.mjs";
+import { useInheritedArrowColor as ce } from "../useInheritedArrowColor/useInheritedArrowColor.js";
 import "../../components/Content/Content.utils.js";
-import { useIsTouchDevice as Q } from "../useIsTouchDevice/useIsTouchDevice.js";
-import { contextMenuBus as M } from "../../utils/contextMenuBus/contextMenuBus.js";
-const re = ({
-  mode: L,
-  defaultOpen: y,
-  animationDuration: E,
-  hoverCloseDelay: d,
-  onOpen: r,
-  onAnimatedOpen: T
+import { useIsTouchDevice as le } from "../useIsTouchDevice/useIsTouchDevice.js";
+import { contextMenuBus as H } from "../../utils/contextMenuBus/contextMenuBus.js";
+const Me = ({
+  mode: G,
+  defaultOpen: B,
+  animationDuration: K,
+  hoverCloseDelay: p,
+  onOpen: t,
+  onAnimatedOpen: E,
+  isOpen: J,
+  enableInnerInputFocus: x,
+  backgroundFocusBlockerContainers: L,
+  backgroundFocusBlockerClassName: P
 }) => {
-  const a = N(), [f, m] = n(y || !1), [h, o] = n(!1), [H, i] = n(!1), [v, b] = n(!1), [u, I] = n(!1), [p, w] = n(!1), q = C(null), K = C(null), e = C(null), t = C(null), s = Q() ? l.CLICK : L, V = () => {
-    e.current && (clearTimeout(e.current), e.current = null), t.current && (clearTimeout(t.current), t.current = null);
-  }, g = () => {
-    m(!1), r == null || r(!1), i(!1), I(!1);
-  }, k = () => {
-    if (V(), s === l.HOVER || u) {
-      if (p)
+  const C = oe(), [a, h] = o(J ?? B ?? !1), [M, i] = o(!1), [V, f] = o(!1), [g, b] = o(!1), [c, v] = o(!1), [k, Q] = o(!1), [U, X] = o(null), [Y, y] = o(!1), [T, S] = o(null), Z = I(null), q = I(null), e = I(null), s = I(null), u = le() ? n.CLICK : G, w = () => {
+    e.current && (clearTimeout(e.current), e.current = null), s.current && (clearTimeout(s.current), s.current = null);
+  }, F = () => {
+    h(!1), t == null || t(!1), f(!1), v(!1), y(!1);
+  }, N = () => {
+    if (w(), u === n.HOVER || c) {
+      if (k && U === n.CLICK || T !== null)
         return;
-      o(!1), t.current = setTimeout(() => {
-        g();
-      }, E);
+      i(!1), s.current = setTimeout(() => {
+        F();
+      }, K);
     } else
-      g();
-  }, x = () => {
-    V(), o(!1), m(!1), r == null || r(!1), i(!1), I(!1);
-  }, B = (c) => {
-    s === l.CLICK && y !== void 0 || (c ? (t.current && (clearTimeout(t.current), t.current = null), (s === l.HOVER || u) && o(!0), m(!0), r == null || r(!0), setTimeout(() => M.emit(a), 0)) : k());
-  }, S = (c) => {
-    b(c), B(c);
-  }, j = () => {
-    s !== l.HOVER && !u || (b(!1), t.current && (clearTimeout(t.current), t.current = null, o(!0)), f ? i(!0) : (e.current && (clearTimeout(e.current), e.current = null), o(!0), m(!0), r == null || r(!0), i(!0), setTimeout(() => M.emit(a), 0)));
-  }, z = () => {
-    s !== l.HOVER && !u || (b(!1), i(!1), e.current && (clearTimeout(e.current), e.current = null));
-  }, D = () => {
-    o(!0), i(!0), I(!0);
-  }, F = (c) => {
-    w(c);
+      F();
+  }, W = () => {
+    w(), i(!1), h(!1), t == null || t(!1), f(!1), v(!1);
+  }, _ = (r) => {
+    y(r);
+  }, j = (r) => {
+    u === n.CLICK && B !== void 0 || (r ? (s.current && (clearTimeout(s.current), s.current = null), (u === n.HOVER || c) && i(!0), h(!0), t == null || t(!0), setTimeout(() => H.emit(C), 0)) : N());
+  }, $ = (r) => {
+    b(r), j(r);
+  }, A = () => {
+    u !== n.HOVER && !c || (b(!1), s.current && (clearTimeout(s.current), s.current = null, i(!0)), a ? f(!0) : (e.current && (clearTimeout(e.current), e.current = null), i(!0), h(!0), t == null || t(!0), f(!0), setTimeout(() => H.emit(C), 0)));
+  }, O = () => {
+    u !== n.HOVER && !c || (b(!1), f(!1), e.current && (clearTimeout(e.current), e.current = null));
+  }, ee = () => {
+    i(!0), f(!0), v(!0);
+  }, te = (r, m) => {
+    r || y(!1), Q(r), X(m);
   };
-  R(() => M.subscribe((J) => {
-    J !== a && x();
-  }), [a]), R(() => {
-    !f || s !== l.HOVER && !u || v || (H ? e.current && (clearTimeout(e.current), e.current = null) : e.current || (e.current = setTimeout(() => {
-      k();
-    }, d)));
+  R(() => H.subscribe((m) => {
+    m !== C && W();
+  }), [C]), R(() => {
+    !a || u !== n.HOVER && !c || g || (V ? e.current && (clearTimeout(e.current), e.current = null) : e.current || (e.current = setTimeout(() => {
+      N();
+    }, p)));
   }, [
-    s,
-    f,
-    H,
     u,
-    d,
-    v
+    a,
+    V,
+    c,
+    p,
+    g
   ]), R(() => {
-    T == null || T(h);
-  }, [h]);
-  const G = P(f, K);
-  return {
-    open: f,
-    mode: s,
-    onOpenChange: B,
-    onOpenByKeyboard: S,
-    inheritedArrowColor: G,
-    triggerRef: q,
-    contentRef: K,
-    animatedOpen: h,
-    animationDuration: E,
-    hoverCloseDelay: d,
-    temporaryHoverClose: u,
-    closeMenuImmediately: x,
-    onMouseEnter: j,
-    onMouseLeave: z,
-    enableTemporaryHoverClose: D,
-    onChildClickOpen: F
+    E == null || E(M);
+  }, [M]);
+  const re = ce(a, q);
+  return R(() => {
+    if (!x || !L || T === null)
+      return;
+    const r = L.map((l) => typeof l == "function" ? l() : l).filter(Boolean), m = [];
+    return r.forEach((l) => {
+      const d = document.createElement("div");
+      l.appendChild(d);
+      const z = ue(d);
+      z.render(
+        /* @__PURE__ */ se(
+          ne,
+          {
+            className: P,
+            onClick: () => {
+              var D;
+              S(null), (D = document.activeElement) == null || D.blur();
+            }
+          }
+        )
+      ), m.push({ root: z, mountNode: d });
+    }), () => {
+      m.forEach(({ root: l, mountNode: d }) => {
+        queueMicrotask(() => {
+          l.unmount(), d.remove();
+        });
+      });
+    };
+  }, [x, T]), {
+    open: a,
+    mode: u,
+    onOpenChange: j,
+    onOpenByKeyboard: $,
+    inheritedArrowColor: re,
+    triggerRef: Z,
+    contentRef: q,
+    animatedOpen: M,
+    animationDuration: K,
+    hoverCloseDelay: p,
+    temporaryHoverClose: c,
+    closeMenuImmediately: W,
+    onMouseEnter: A,
+    onMouseLeave: O,
+    enableTemporaryHoverClose: ee,
+    onChildOpen: te,
+    onSubmenuOpen: _,
+    isRootContentBlocked: Y,
+    isChildOpen: k,
+    itemWithFocusedInput: T,
+    setItemWithFocusedInput: S
   };
 };
 export {
-  re as useContextMenu
+  Me as useContextMenu
 };

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

@@ -29,5 +29,21 @@ export interface UseContextMenuOptions {
      * Whether the context menu should close when another menu is opened.
      */
     autoCloseOnOtherOpen?: boolean;
+    /**
+     * Whether the context menu is open forcefully.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the item should enable inner input focus.
+     */
+    enableInnerInputFocus?: boolean;
+    /**
+     * The container to focus the blocker on.
+     */
+    backgroundFocusBlockerContainers?: (HTMLElement | (() => HTMLElement) | null)[];
+    /**
+     * The class name of the background focus blocker.
+     */
+    backgroundFocusBlockerClassName?: string;
 }
 //# sourceMappingURL=useContextMenu.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useContextMenu.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenu/useContextMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC"}
+{"version":3,"file":"useContextMenu.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenu/useContextMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,gCAAgC,CAAC,EAAE,CAC/B,WAAW,GACX,CAAC,MAAM,WAAW,CAAC,GACnB,IAAI,CACP,EAAE,CAAC;IACJ;;OAEG;IACH,+BAA+B,CAAC,EAAE,MAAM,CAAC;CAC1C"}

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

@@ -1,5 +1,5 @@
 import { UseContextMenuItemFocusOptions } from './useContextMenuItemFocus.types';
-export declare const useContextMenuItemFocus: ({ displayName, id, isDisabled, hasSubmenu, onMouseEnter, onMouseLeave, }: UseContextMenuItemFocusOptions) => {
+export declare const useContextMenuItemFocus: <T extends HTMLElement>({ displayName, id, ref, isDisabled, hasSubmenu, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, isSelectable, }: UseContextMenuItemFocusOptions<T>) => {
     dataHighlighted: undefined;
     onFocus: undefined;
     onMouseEnter: undefined;
@@ -8,10 +8,10 @@ export declare const useContextMenuItemFocus: ({ displayName, id, isDisabled, ha
     onKeyDown: undefined;
 } | {
     dataHighlighted: string | undefined;
-    onFocus: () => void;
-    onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
-    onBlur: () => void;
-    onMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
-    onKeyDown: (e: React.KeyboardEvent) => void;
+    onFocus: (e: React.FocusEvent<T>) => void;
+    onMouseEnter: (e: React.MouseEvent<T>) => void;
+    onBlur: (e: React.FocusEvent<T>) => void;
+    onMouseLeave: (e: React.MouseEvent<T>) => void;
+    onKeyDown: (e: React.KeyboardEvent<T>) => void;
 };
 //# sourceMappingURL=useContextMenuItemFocus.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useContextMenuItemFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuItemFocus/useContextMenuItemFocus.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,8BAA8B,EAAE,MAAM,iCAAiC,CAAC;AAEjF,eAAO,MAAM,uBAAuB,6EAOjC,8BAA8B;;;;;;;;;;sBAwBX,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;;sBAW7B,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;mBAIhC,KAAK,CAAC,aAAa;CAMrC,CAAC"}
+{"version":3,"file":"useContextMenuItemFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/hooks/useContextMenuItemFocus/useContextMenuItemFocus.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,8BAA8B,EAAE,MAAM,iCAAiC,CAAC;AAEjF,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,WAAW,2HAY1D,8BAA8B,CAAC,CAAC,CAAC;;;;;;;;;iBA4BnB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;sBAed,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;gBAezB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;sBAWb,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;mBAWtB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;CAcxC,CAAC"}

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

@@ -1,40 +1,70 @@
-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
+import { useState as O, useEffect as j } from "react";
+import { useLevelContext as q } from "../../providers/LevelProvider/LevelProvider.js";
+import { useMouseMoveOutside as z } from "../useMouseMoveOutside/useMouseMoveOutside.js";
+const P = ({
+  displayName: H,
+  id: x,
+  ref: h,
+  isDisabled: v,
+  hasSubmenu: p,
+  onMouseEnter: i,
+  onMouseLeave: d,
+  onFocus: r,
+  onBlur: m,
+  onKeyDown: I,
+  isSelectable: g = !0
 }) => {
-  const [n, o] = l(!1), { setActiveItemId: c } = v(s);
-  return e ? {
+  const [k, f] = O(!1), { setActiveItemId: A, activeItemId: C } = q(H);
+  return z(h, () => {
+    f(!1);
+  }), v ? {
     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);
+  } : (j(() => {
+    p && C === null && f(!1);
+  }, [C]), {
+    dataHighlighted: k && g ? "" : void 0,
+    onFocus: (t) => {
+      if (!g) {
+        r == null || r(t);
+        return;
+      }
+      p || A(x), f(!v), r == null || r(t);
     },
     onMouseEnter: (t) => {
-      i || c(r), o(!e), d == null || d(t);
+      if (!g) {
+        i == null || i(t);
+        return;
+      }
+      p || A(x), f(!v), i == null || i(t);
     },
-    onBlur: () => {
-      o(!1);
+    onBlur: (t) => {
+      if (!g) {
+        m == null || m(t);
+        return;
+      }
+      f(!1), m == null || m(t);
     },
     onMouseLeave: (t) => {
-      o(!1), f == null || f(t);
+      if (!g) {
+        d == null || d(t);
+        return;
+      }
+      f(!1), d == null || d(t);
     },
     onKeyDown: (t) => {
-      i && t.key === "ArrowLeft" && o(!1);
+      if (!g) {
+        I == null || I(t);
+        return;
+      }
+      p && t.key === "ArrowLeft" && f(!1), I == null || I(t);
     }
-  };
+  });
 };
 export {
-  g as useContextMenuItemFocus
+  P as useContextMenuItemFocus
 };