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

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

@@ -1,50 +1,39 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { T as x } from "../../../../../../index-BA3njR2k.mjs";
-import { c as v } from "../../../../../../index-L8X2o7IH.mjs";
-import { mergeRefs as E } from "../../../../../../lib/utils.js";
-import { useContextMenuContext as C } from "../../../../ContextMenu.context.js";
-import { ContextMenuMode as D } from "../../../../ContextMenu.enums.js";
-import "../../../../providers/LevelProvider/LevelProvider.js";
-import "../../../../../../useContentPositioning-27D32n5u.mjs";
-import "../../../Content/Content.utils.js";
-import { useContextMenuItemFocus as L } from "../../../../hooks/useContextMenuItemFocus/useContextMenuItemFocus.js";
-const r = "ContextMenu.Trigger", N = c(
-  ({ className: t, children: n, ...s }, i) => {
-    const { triggerRef: m, mode: a, onMouseEnter: u, onMouseLeave: p, triggerId: f } = C(r), {
-      onFocus: o,
-      onMouseEnter: g,
-      onBlur: M,
-      onMouseLeave: d
-    } = L({
-      displayName: r,
-      id: f || "",
-      isDisabled: !1,
-      onMouseEnter: u,
-      onMouseLeave: p
+import React, { forwardRef } from 'react';
+import { Trigger as RadixDropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { mergeRefs } from 'src/lib/utils';
+import { useContextMenuContext } from '../../../../ContextMenu.context';
+import { ContextMenuMode } from '../../../../ContextMenu.enums';
+import { useContextMenuItemFocus } from '../../../../hooks';
+const DISPLAY_NAME = 'ContextMenu.Trigger';
+export const Trigger = forwardRef(({ className, children, onFocus, onBlur, onMouseEnter, onMouseLeave, onPointerDown, ...rest }, ref) => {
+    const { triggerRef, mode, onMouseEnter: onMouseEnterContext, onMouseLeave: onMouseLeaveContext, triggerId, } = useContextMenuContext(DISPLAY_NAME);
+    const { dataHighlighted, onFocus: handleItemFocus, onMouseEnter: handleItemMouseEnter, onBlur: handleItemBlur, onMouseLeave: handleItemMouseLeave, } = useContextMenuItemFocus({
+        displayName: DISPLAY_NAME,
+        id: triggerId || '',
+        isDisabled: false,
+        onMouseEnter: onMouseEnterContext,
+        onMouseLeave: onMouseLeaveContext,
     });
-    return /* @__PURE__ */ l(
-      x,
-      {
-        ref: E(m, i),
-        className: v(t),
-        onPointerDown: (e) => {
-          a === D.HOVER && e.preventDefault(), e.stopPropagation();
-        },
-        onMouseEnter: g,
-        onMouseLeave: d,
-        onFocus: (e) => {
-          e.preventDefault(), e.stopPropagation(), o == null || o();
-        },
-        onBlur: M,
-        "data-submenu-trigger": !0,
-        ...s,
-        children: n
-      }
-    );
-  }
-);
-N.displayName = r;
-export {
-  N as Trigger
-};
+    return (React.createElement(RadixDropdownMenuTrigger, { ref: mergeRefs(triggerRef, ref), className: className, "data-highlighted": dataHighlighted, onPointerDown: (e) => {
+            if (mode === ContextMenuMode.HOVER) {
+                e.preventDefault();
+            }
+            e.stopPropagation();
+            onPointerDown?.(e);
+        }, onMouseEnter: (e) => {
+            handleItemMouseEnter?.(e);
+            onMouseEnter?.(e);
+        }, onMouseLeave: (e) => {
+            handleItemMouseLeave?.(e);
+            onMouseLeave?.(e);
+        }, onFocus: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleItemFocus?.();
+            onFocus?.(e);
+        }, onBlur: (e) => {
+            handleItemBlur?.();
+            onBlur?.(e);
+        }, "data-submenu-trigger": true, ...rest }, children));
+});
+Trigger.displayName = DISPLAY_NAME;

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 export declare const SubTrigger: React.ForwardRefExoticComponent<{
     onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
     key?: React.Key | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"SubTrigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/components/SubTrigger/SubTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAoB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAgGtB,CAAC"}
+{"version":3,"file":"SubTrigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/components/SubTrigger/SubTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAoB1C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAyItB,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAc1C,eAAO,MAAM,OAAO,kMAoCnB,CAAC"}
+{"version":3,"file":"Trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ContextMenu/components/Trigger/Trigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAc1C,eAAO,MAAM,OAAO,kMA8DnB,CAAC"}

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

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

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

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

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

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

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

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

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;;;;EAmM9B"}
+{"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"}

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

@@ -1,7 +1,198 @@
-import "react";
-import { u as n } from "../../../../useContentPositioning-27D32n5u.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 {};