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

package/dist/components/CheckboxGroup/hooks/useCheckboxGroupState.js

@@ -1,50 +1,60 @@
-import { useState as C, useRef as a, useLayoutEffect as h } from "react";
-const m = ({
-  isDisabled: n,
-  onChange: l
-}) => {
-  const [f, u] = C(/* @__PURE__ */ new Map()), i = a({}), c = a([]), d = (e) => {
-    u((r) => {
-      const s = new Map(r);
-      if (e.type === "selectAll" && !n) {
-        const t = Array.from(s.values()).some(
-          (o) => o.isChecked && !o.isDisabled
-        );
-        s.forEach((o) => {
-          o.isDisabled || (o.isChecked = !t);
+import { useLayoutEffect, useRef, useState } from 'react';
+export const useCheckboxGroupState = ({ isDisabled, onChange, }) => {
+    const [state, setState] = useState(new Map());
+    const registeredComponents = useRef({});
+    const queueComponents = useRef([]);
+    const handleChange = (changeEvent) => {
+        setState((prev) => {
+            const copyState = new Map(prev);
+            if (changeEvent.type === 'selectAll' && !isDisabled) {
+                const isSomeChecked = Array.from(copyState.values()).some((checkbox) => checkbox.isChecked && !checkbox.isDisabled);
+                copyState.forEach((checkbox) => {
+                    if (!checkbox.isDisabled) {
+                        checkbox.isChecked = !isSomeChecked;
+                    }
+                });
+            }
+            if (changeEvent.type === 'checkbox' && !isDisabled) {
+                const currentCheckbox = copyState.get(changeEvent.name);
+                if (currentCheckbox && !currentCheckbox.isDisabled) {
+                    copyState.set(currentCheckbox.name, {
+                        ...currentCheckbox,
+                        isChecked: !currentCheckbox.isChecked,
+                    });
+                }
+            }
+            onChange([...copyState.values()], changeEvent);
+            return copyState;
         });
-      }
-      if (e.type === "checkbox" && !n) {
-        const t = s.get(e.name);
-        t && !t.isDisabled && s.set(t.name, {
-          ...t,
-          isChecked: !t.isChecked
-        });
-      }
-      return l([...s.values()], e), s;
+    };
+    useLayoutEffect(() => {
+        if (queueComponents.current.length) {
+            const queue = queueComponents.current;
+            queueComponents.current = [];
+            setState((prev) => {
+                const copyState = new Map(prev);
+                queue.forEach((checkbox) => copyState.set(checkbox.name, checkbox));
+                return copyState;
+            });
+        }
     });
-  };
-  return h(() => {
-    if (c.current.length) {
-      const e = c.current;
-      c.current = [], u((r) => {
-        const s = new Map(r);
-        return e.forEach((t) => s.set(t.name, t)), s;
-      });
-    }
-  }), {
-    state: f,
-    register: (e, r = {}) => (e !== "selectAll" && !i.current[e] && (i.current[e] = !0, c.current.push({
-      name: e,
-      isChecked: !!r.isDefaultChecked,
-      isDisabled: !!r.isDisabled
-    })), {
-      name: e,
-      onChange: d,
-      ...r
-    })
-  };
-};
-export {
-  m as useCheckboxGroupState
+    const register = (name, options = {}) => {
+        if (name !== 'selectAll' && !registeredComponents.current[name]) {
+            registeredComponents.current[name] = true;
+            queueComponents.current.push({
+                name,
+                isChecked: Boolean(options.isDefaultChecked),
+                isDisabled: Boolean(options.isDisabled),
+            });
+        }
+        return {
+            name,
+            onChange: handleChange,
+            ...options,
+        };
+    };
+    return {
+        state,
+        register,
+    };
 };

package/dist/components/CheckboxGroup/hooks/useCheckboxGroupState.test.js

@@ -0,0 +1,123 @@
+import { renderHook, act } from '@testing-library/react';
+import { useCheckboxGroupState } from './useCheckboxGroupState';
+const SELECT_ALL = 'selectAll';
+describe('useCheckboxGroupState', () => {
+    const mockOnChange = jest.fn();
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should initialize with an empty state', () => {
+        const { result } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        expect(result.current.state.size).toBe(0);
+    });
+    it('should register a new checkbox', () => {
+        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        act(() => {
+            result.current.register('checkbox1', { isDefaultChecked: true });
+        });
+        rerender();
+        expect(result.current.state.size).toBe(1);
+        const checkbox = result.current.state.get('checkbox1');
+        expect(checkbox).toEqual({
+            name: 'checkbox1',
+            isChecked: true,
+            isDisabled: false,
+        });
+    });
+    it('should update state when a checkbox is toggled', () => {
+        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        let trigger;
+        act(() => {
+            trigger = result.current.register('checkbox1', {
+                isDefaultChecked: false,
+            });
+            result.current.register('checkbox2', { isDefaultChecked: true });
+        });
+        rerender();
+        act(() => {
+            trigger.onChange({
+                type: 'checkbox',
+                name: 'checkbox1',
+            });
+        });
+        rerender();
+        const checkbox1 = result.current.state.get('checkbox1');
+        const checkbox2 = result.current.state.get('checkbox2');
+        expect(checkbox1?.isChecked).toBe(true);
+        expect(checkbox2?.isChecked).toBe(true);
+        expect(mockOnChange).toHaveBeenCalledWith([
+            { name: 'checkbox1', isChecked: true, isDisabled: false },
+            { name: 'checkbox2', isChecked: true, isDisabled: false },
+        ], { type: 'checkbox', name: 'checkbox1' });
+    });
+    it('should handle "selectAll" event to check all checkboxes', () => {
+        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        let trigger;
+        act(() => {
+            trigger = result.current.register('selectAll');
+            result.current.register('checkbox1', { isDefaultChecked: false });
+            result.current.register('checkbox2', { isDefaultChecked: false });
+        });
+        rerender();
+        act(() => {
+            trigger.onChange({
+                type: 'selectAll',
+                name: 'selectAll',
+            });
+        });
+        rerender();
+        const checkbox1 = result.current.state.get('checkbox1');
+        const checkbox2 = result.current.state.get('checkbox2');
+        expect(checkbox1?.isChecked).toBe(true);
+        expect(checkbox2?.isChecked).toBe(true);
+        expect(mockOnChange).toHaveBeenCalledWith([
+            { name: 'checkbox1', isChecked: true, isDisabled: false },
+            { name: 'checkbox2', isChecked: true, isDisabled: false },
+        ], { type: SELECT_ALL, name: SELECT_ALL });
+    });
+    it('should handle "selectAll" event to uncheck all checkboxes', () => {
+        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        let trigger;
+        act(() => {
+            trigger = result.current.register(SELECT_ALL);
+            result.current.register('checkbox1', { isDefaultChecked: true });
+            result.current.register('checkbox2', { isDefaultChecked: true });
+        });
+        rerender();
+        act(() => {
+            trigger.onChange({
+                type: SELECT_ALL,
+                name: SELECT_ALL,
+            });
+        });
+        rerender();
+        const checkbox1 = result.current.state.get('checkbox1');
+        const checkbox2 = result.current.state.get('checkbox2');
+        expect(checkbox1?.isChecked).toBe(false);
+        expect(checkbox2?.isChecked).toBe(false);
+        expect(mockOnChange).toHaveBeenCalledWith([
+            { name: 'checkbox1', isChecked: false, isDisabled: false },
+            { name: 'checkbox2', isChecked: false, isDisabled: false },
+        ], { type: SELECT_ALL, name: SELECT_ALL });
+    });
+    it('should not toggle a disabled checkbox', () => {
+        const { result, rerender } = renderHook(() => useCheckboxGroupState({ onChange: mockOnChange }));
+        let toggle;
+        act(() => {
+            toggle = result.current.register('checkbox1', {
+                isDefaultChecked: false,
+                isDisabled: true,
+            });
+        });
+        rerender();
+        act(() => {
+            toggle.onChange({
+                type: 'checkbox',
+                name: 'checkbox1',
+            });
+        });
+        rerender();
+        const checkbox1 = result.current.state.get('checkbox1');
+        expect(checkbox1?.isChecked).toBe(false);
+    });
+});

package/dist/components/CheckboxGroup/index.js

@@ -1,12 +1,4 @@
-import { CheckboxGroup as r } from "./CheckboxGroup.js";
-import { CheckboxGroupTheme as t } from "./CheckboxGroup.themes.js";
-import { ItemRoot as p } from "./components/ItemRoot/ItemRoot.js";
-import { CheckboxGroupItemRootTheme as f } from "./components/ItemRoot/ItemRoot.themes.js";
-import { Checkbox as c } from "./components/Checkbox/Checkbox.js";
-export {
-  c as Checkbox,
-  r as CheckboxGroup,
-  f as CheckboxGroupItemRootTheme,
-  t as CheckboxGroupTheme,
-  p as ItemRoot
-};
+export { CheckboxGroup } from './CheckboxGroup';
+export { CheckboxGroupTheme, } from './CheckboxGroup.themes';
+export { ItemRoot, CheckboxGroupItemRootTheme, } from './components/ItemRoot';
+export { Checkbox } from './components/Checkbox';

package/dist/components/ConfigProvider/ConfigProvider.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { ConfigProviderProps } from './ConfigProvider.props';
+import React from 'react';
+import { type ConfigProviderProps } from './ConfigProvider.props';
 export declare const ConfigProvider: ({ appearance, children, }: ConfigProviderProps) => React.ReactNode;
 //# sourceMappingURL=ConfigProvider.d.ts.map

package/dist/components/ConfigProvider/ConfigProvider.js

@@ -1,14 +1,8 @@
-import { useLayoutEffect as e } from "react";
-import { APPEARANCE_ATTRIBUTE_NAME as r } from "../../lib/appearance/index.js";
-const A = ({
-  appearance: t,
-  children: o
-}) => (e(() => {
-  document.documentElement.setAttribute(
-    r,
-    t
-  );
-}, [t]), o);
-export {
-  A as ConfigProvider
+import { useLayoutEffect } from 'react';
+import { APPEARANCE_ATTRIBUTE_NAME } from 'src/lib/appearance';
+export const ConfigProvider = ({ appearance, children, }) => {
+    useLayoutEffect(() => {
+        document.documentElement.setAttribute(APPEARANCE_ATTRIBUTE_NAME, appearance);
+    }, [appearance]);
+    return children;
 };

package/dist/components/ConfigProvider/ConfigProvider.props.d.ts

@@ -1,4 +1,4 @@
-import { Appearance } from '../../lib/appearance';
+import { Appearance } from 'src/lib/appearance';
 export interface ConfigProviderProps {
     /**
      * Nested element

package/dist/components/ConfigProvider/ConfigProvider.props.js

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

package/dist/components/ConfigProvider/index.js

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

package/dist/components/ContentBlock/ContentBlock.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
-import { ContentBlockProps } from './ContentBlock.props';
+import React from 'react';
+import { type ContentBlockProps } from './ContentBlock.props';
 export declare const ContentBlock: React.ForwardRefExoticComponent<Omit<ContentBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ContentBlock.d.ts.map

package/dist/components/ContentBlock/ContentBlock.js

@@ -1,14 +1,10 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { c as n } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as f } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import '../../assets/ContentBlock.css';const i = "_block_1efq7_1", k = {
-  block: i
-}, p = l((o, e) => {
-  const { className: s = "", theme: t, children: c, ...m } = o, r = f(t);
-  return /* @__PURE__ */ a("div", { ref: e, className: n(k.block, r, s), ...m, children: c });
+import React, { forwardRef } from 'react';
+import cx from 'classnames';
+import { useThemeClassName } from 'src/hooks/useThemeClassName';
+import s from './ContentBlock.module.css';
+export const ContentBlock = forwardRef((props, ref) => {
+    const { className = '', theme, children, ...rest } = props;
+    const themeClassName = useThemeClassName(theme);
+    return (React.createElement("div", { ref: ref, className: cx(s.block, themeClassName, className), ...rest }, children));
 });
-p.displayName = "ContentBlock";
-export {
-  p as ContentBlock
-};
+ContentBlock.displayName = 'ContentBlock';

package/dist/components/ContentBlock/ContentBlock.props.js

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

package/dist/components/ContentBlock/ContentBlock.themes.js

@@ -1,10 +1,7 @@
-const t = {
-  "--crm-ui-kit-content-block-box-sizing": "border-box",
-  "--crm-ui-kit-content-block-padding": "18px 18px 29px",
-  "--crm-ui-kit-content-block-border-radius": "3px",
-  "--crm-ui-kit-content-block-box-shadow": "var(--crm-ui-kit-palette-content-block-box-shadow)",
-  "--crm-ui-kit-content-block-background": "var(--crm-ui-kit-palette-background-primary)"
-};
-export {
-  t as ContentBlockTheme
+export const ContentBlockTheme = {
+    '--crm-ui-kit-content-block-box-sizing': 'border-box',
+    '--crm-ui-kit-content-block-padding': '18px 18px 29px',
+    '--crm-ui-kit-content-block-border-radius': '3px',
+    '--crm-ui-kit-content-block-box-shadow': 'var(--crm-ui-kit-palette-content-block-box-shadow)',
+    '--crm-ui-kit-content-block-background': 'var(--crm-ui-kit-palette-background-primary)',
 };

package/dist/components/ContentBlock/index.js

@@ -1,6 +1,2 @@
-import { ContentBlock as t } from "./ContentBlock.js";
-import { ContentBlockTheme as r } from "./ContentBlock.themes.js";
-export {
-  t as ContentBlock,
-  r as ContentBlockTheme
-};
+export { ContentBlock } from './ContentBlock';
+export { ContentBlockTheme, } from './ContentBlock.themes';

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

@@ -1,5 +1,5 @@
 import { ContextMenuContextProps } from './ContextMenu.props';
 declare const DISPLAY_NAME = "ContextMenu";
-declare const ContextMenuProvider: import('../../lib/react/createComponentContext').ContextProps<ContextMenuContextProps>, useContextMenuContext: (consumerName: string) => ContextMenuContextProps;
+declare const ContextMenuProvider: import("../../lib/react/createComponentContext").ContextProps<ContextMenuContextProps>, useContextMenuContext: (consumerName: string) => ContextMenuContextProps;
 export { ContextMenuProvider, useContextMenuContext, DISPLAY_NAME };
 //# sourceMappingURL=ContextMenu.context.d.ts.map

package/dist/components/ContextMenu/ContextMenu.context.js

@@ -1,7 +1,4 @@
-import { createComponentContext as t } from "../../lib/react/createComponentContext/createComponentContext.js";
-const e = "ContextMenu", [n, r] = t(e);
-export {
-  n as ContextMenuProvider,
-  e as DISPLAY_NAME,
-  r as useContextMenuContext
-};
+import { createComponentContext } from 'src/lib/react';
+const DISPLAY_NAME = 'ContextMenu';
+const [ContextMenuProvider, useContextMenuContext] = createComponentContext(DISPLAY_NAME);
+export { ContextMenuProvider, useContextMenuContext, DISPLAY_NAME };

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAqB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKzE,eAAO,MAAM,WAAW,EA2DnB,eAAe,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAqB,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAKzE,eAAO,MAAM,WAAW,EA8DnB,eAAe,CAAC"}

package/dist/components/ContextMenu/ContextMenu.enums.js

@@ -1,4 +1,11 @@
-var c = /* @__PURE__ */ ((r) => (r.CLICK = "click", r.HOVER = "hover", r))(c || {});
-export {
-  c as ContextMenuMode
-};
+export var ContextMenuMode;
+(function (ContextMenuMode) {
+    /**
+     * Menu opens on click and closes on outside click.
+     */
+    ContextMenuMode["CLICK"] = "click";
+    /**
+     * Menu opens and closes on hover.
+     */
+    ContextMenuMode["HOVER"] = "hover";
+})(ContextMenuMode || (ContextMenuMode = {}));

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,104 +1,64 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as A, useImperativeHandle as M } from "react";
-import { R as v } from "../../index-BA3njR2k.mjs";
-import { useContextMenu as x } from "./hooks/useContextMenu/useContextMenu.js";
-import "./providers/LevelProvider/LevelProvider.js";
-import { C as D } from "../../useContentPositioning-BIVWgixU.mjs";
-import "./components/Content/Content.utils.js";
-import { ContextMenuProvider as T, DISPLAY_NAME as y } from "./ContextMenu.context.js";
-import { Trigger as L } from "./components/Trigger/Trigger.js";
-import { Portal as O } from "./components/Portal/Portal.js";
-import { Sub as E } from "./components/Sub/Sub.js";
-import { SubTrigger as N } from "./components/SubTrigger/SubTrigger.js";
-import { SubContent as w } from "./components/SubContent/SubContent.js";
-import { Arrow as G } from "./components/Arrow/Arrow.js";
-import { Item as H } from "./components/Item/Item.js";
-import { ItemRightSlot as P } from "./components/ItemRightSlot/ItemRightSlot.js";
-import { Group as _ } from "./components/Group/Group.js";
-import { Label as k } from "./components/Label/Label.js";
-import { CheckboxItem as Y } from "./components/CheckboxItem/CheckboxItem.js";
-import { ItemIndicator as j } from "./components/ItemIndicator/ItemIndicator.js";
-import { RadioGroup as U } from "./components/RadioGroup/RadioGroup.js";
-import { RadioItem as V } from "./components/RadioItem/RadioItem.js";
-import { Separator as q } from "./components/Separator/Separator.js";
-import { ItemIcon as z } from "./components/ItemIcon/ItemIcon.js";
-import { SubRoot as B } from "./components/SubRoot/SubRoot.js";
-const F = 200, J = 150, o = A(
-  ({ children: m, mode: i, onOpen: n, defaultOpen: a, ...p }, f) => {
-    const {
-      mode: u,
-      open: I,
-      onOpenChange: l,
-      triggerRef: d,
-      contentRef: s,
-      inheritedArrowColor: C,
-      animatedOpen: R,
-      animationDuration: S,
-      hoverCloseDelay: b,
-      temporaryHoverClose: c,
-      closeMenuImmediately: r,
-      onMouseEnter: g,
-      onMouseLeave: h,
-      enableTemporaryHoverClose: t
-    } = x({
-      mode: i,
-      defaultOpen: a,
-      onOpen: n,
-      animationDuration: J,
-      hoverCloseDelay: F
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { Root as RadixDropdownMenuRoot } from '@radix-ui/react-dropdown-menu';
+import { useContextMenu } from './hooks';
+import { Trigger } from './components/Trigger/Trigger';
+import { Portal } from './components/Portal/Portal';
+import { Sub } from './components/Sub/Sub';
+import { SubTrigger } from './components/SubTrigger/SubTrigger';
+import { SubContent } from './components/SubContent/SubContent';
+import { Content } from './components/Content/Content';
+import { Arrow } from './components/Arrow/Arrow';
+import { Item } from './components/Item/Item';
+import { ItemRightSlot } from './components/ItemRightSlot/ItemRightSlot';
+import { Group } from './components/Group/Group';
+import { Label } from './components/Label/Label';
+import { CheckboxItem } from './components/CheckboxItem/CheckboxItem';
+import { ItemIndicator } from './components/ItemIndicator/ItemIndicator';
+import { RadioGroup } from './components/RadioGroup/RadioGroup';
+import { RadioItem } from './components/RadioItem/RadioItem';
+import { Separator } from './components/Separator/Separator';
+import { ItemIcon } from './components/ItemIcon/ItemIcon';
+import { SubRoot } from './components/SubRoot/SubRoot';
+import { ContextMenuProvider, DISPLAY_NAME } from './ContextMenu.context';
+const HOVER_CLOSE_DELAY = 200;
+const ANIMATION_DURATION = 150;
+export const ContextMenu = forwardRef(({ children, mode, onOpen, defaultOpen, ...rest }, ref) => {
+    const { mode: rootMode, open, onOpenChange, triggerRef, contentRef, inheritedArrowColor, animatedOpen, animationDuration, hoverCloseDelay, temporaryHoverClose, closeMenuImmediately, onMouseEnter, onMouseLeave, enableTemporaryHoverClose, onOpenByKeyboard, } = useContextMenu({
+        mode: mode,
+        defaultOpen,
+        onOpen,
+        animationDuration: ANIMATION_DURATION,
+        hoverCloseDelay: HOVER_CLOSE_DELAY,
     });
-    return M(f, () => ({
-      closeMenuImmediately: r,
-      enableTemporaryHoverClose: t
-    })), /* @__PURE__ */ e(
-      T,
-      {
-        mode: u,
-        triggerRef: d,
-        contentRef: s,
-        inheritedArrowColor: C,
-        animatedOpen: R,
-        animationDuration: S,
-        hoverCloseDelay: b,
-        temporaryHoverClose: c,
-        closeMenuImmediately: r,
-        onMouseEnter: g,
-        onMouseLeave: h,
-        enableTemporaryHoverClose: t,
-        children: /* @__PURE__ */ e(
-          v,
-          {
-            open: I,
-            onOpenChange: l,
-            modal: !1,
-            ...p,
-            children: m
-          }
-        )
-      }
-    );
-  }
-);
-o.displayName = y;
-o.Root = o;
-o.SubRoot = B;
-o.Trigger = L;
-o.Content = D;
-o.Portal = O;
-o.Sub = E;
-o.SubTrigger = N;
-o.SubContent = w;
-o.Arrow = G;
-o.Item = H;
-o.ItemRightSlot = P;
-o.Group = _;
-o.Label = k;
-o.CheckboxItem = Y;
-o.RadioGroup = U;
-o.RadioItem = V;
-o.ItemIndicator = j;
-o.Separator = q;
-o.ItemIcon = z;
-export {
-  o as ContextMenu
-};
+    useImperativeHandle(ref, () => ({
+        closeMenuImmediately,
+        enableTemporaryHoverClose,
+        onOpenByKeyboard,
+    }));
+    return (React.createElement(ContextMenuProvider, { mode: rootMode, triggerRef: triggerRef, contentRef: contentRef, inheritedArrowColor: inheritedArrowColor, animatedOpen: animatedOpen, animationDuration: animationDuration, hoverCloseDelay: hoverCloseDelay, temporaryHoverClose: temporaryHoverClose, closeMenuImmediately: closeMenuImmediately, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, enableTemporaryHoverClose: enableTemporaryHoverClose, onOpenByKeyboard: onOpenByKeyboard },
+        React.createElement(RadixDropdownMenuRoot, { open: open, onOpenChange: onOpenChange, 
+            /**
+             * Necessary for hover mode to work correctly.
+             */
+            modal: false, ...rest }, children)));
+});
+ContextMenu.displayName = DISPLAY_NAME;
+ContextMenu.Root = ContextMenu;
+ContextMenu.SubRoot = SubRoot;
+ContextMenu.Trigger = Trigger;
+ContextMenu.Content = Content;
+ContextMenu.Portal = Portal;
+ContextMenu.Sub = Sub;
+ContextMenu.SubTrigger = SubTrigger;
+ContextMenu.SubContent = SubContent;
+ContextMenu.Arrow = Arrow;
+ContextMenu.Item = Item;
+ContextMenu.ItemRightSlot = ItemRightSlot;
+ContextMenu.Group = Group;
+ContextMenu.Label = Label;
+ContextMenu.CheckboxItem = CheckboxItem;
+ContextMenu.RadioGroup = RadioGroup;
+ContextMenu.RadioItem = RadioItem;
+ContextMenu.ItemIndicator = ItemIndicator;
+ContextMenu.Separator = Separator;
+ContextMenu.ItemIcon = ItemIcon;

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

@@ -1,4 +1,4 @@
-import { DropdownMenuProps as RadixDropdownMenuRootProps } from '@radix-ui/react-dropdown-menu';
+import { type DropdownMenuProps as RadixDropdownMenuRootProps } from '@radix-ui/react-dropdown-menu';
 import { ContextMenuModeType } from './ContextMenu.types';
 export type ContextMenuRootProps = Omit<RadixDropdownMenuRootProps, 'onOpenChange' | 'modal'> & {
     /**
@@ -101,5 +101,9 @@ export interface ContextMenuContextProps {
      * This prop is only used for `SubRoot` (submenu) components.
      */
     triggerId?: string;
+    /**
+     * The callback function to be called when the menu is opened by keyboard.
+     */
+    onOpenByKeyboard: (value: boolean) => void;
 }
 //# sourceMappingURL=ContextMenu.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.props.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,IAAI,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAErG,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,0BAA0B,EAC1B,cAAc,GAAG,OAAO,CACzB,GAAG;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C;;;;;OAKG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAC7B;;;;;OAKG;IACH,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,oBAAoB,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"ContextMenu.props.d.ts","sourceRoot":"","sources":["../../../src/components/ContextMenu/ContextMenu.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,IAAI,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAErG,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE1D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,0BAA0B,EAC1B,cAAc,GAAG,OAAO,CACzB,GAAG;IACF;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C;;;;;OAKG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAC7B;;;;;OAKG;IACH,yBAAyB,EAAE,MAAM,IAAI,CAAC;IACtC;;;OAGG;IACH,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC;;;OAGG;IACH,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,oBAAoB,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,YAAY,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C"}

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

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

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

@@ -1,4 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { Arrow } from './components/Arrow';
 import { CheckboxItem } from './components/CheckboxItem/CheckboxItem';
 import { Content } from './components/Content';
@@ -32,6 +32,10 @@ export interface ContextMenuHandle {
      * Enables the temporary hover close.
      */
     enableTemporaryHoverClose: () => void;
+    /**
+     * The callback function to be called when the menu is opened by keyboard.
+     */
+    onOpenByKeyboard: (value: boolean) => void;
 }
 export type ContextMenuComponentType = ForwardRefExoticComponent<ContextMenuRootProps & RefAttributes<ContextMenuHandle>>;
 export interface ContextMenuType extends ContextMenuComponentType {