Component Props ### Usage Preview Code ```jsx import React from 'react' import { ContextMenu } from '@xbeshui/core' interface ContextMenuItemConfig { type: "item" | "sub" | "separator" | "checkbox" | "radio"; label?: string; shortcut?: string; disabled?: boolean; inset?: boolean; checked?: boolean; value?: string; items?: ContextMenuItemConfig[]; } const menuConfig: ContextMenuItemConfig[] = [ { type: "item", label: "Copy", shortcut: "Ctrl+C", }, { type: "item", label: "Paste", shortcut: "Ctrl+V", }, { type: "separator", }, { type: "sub", label: "More Options", items: [ { type: "item", label: "Option 1", }, { type: "item", label: "Option 2", }, ], }, { type: "checkbox", label: "Checkbox", checked: true, }, { type: "radio", label: "Radio Group", value: "option1", items: [ { type: "radio", label: "Option 1", value: "option1", }, { type: "radio", label: "Option 2", value: "option2", }, ], }, ]; export function XbContextMenu(){ return ( Right Click To Open Context Menu ) } ```

## Context Menu component props ## Root Contains all the parts of a context menu. | Name | Type | Description | |-----------------|---------------|---------------------------------------------------------------------------------------------------| | dir | enum | Sets the directionality of text within the ToggleGroup, allowing customization for languages that are written from right to left. | | onOpenChange | function | Specifies a function to be called when the open state of the component changes. | | modal | boolean | Specifies whether the component is rendered as a modal, typically used for overlaying content on top of the rest of the page. | ## Trigger The area that opens the context menu. Wrap it around the target you want the context menu to open from when right-clicking (or using the relevant keyboard shortcuts). | Name | Type | Description | |-------------|-----------|------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | disabled | boolean | If enabled, the spotlight will not be rendered. | ## Portal When used, portals the content part into the body. | Name | Type | Description | |---------------|-------------|-------------------------------------------------------------------------------------------------------| | forceMount | boolean | Forces the component to mount in the DOM, regardless of its initial visibility state. | | container | HTMLElement | Specifies the container element in which the component should be rendered. | ## Content The component that pops out in an open context menu. | Name | Type | Description | |-----------------------|-------------|----------------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | loop | boolean | By default, arrow key presses loop through items, allowing navigation from the first to the last and from the last to the first. | | onCloseAutoFocus | function | Specifies whether the component automatically focuses when it closes. | | onEscapeKeyDown | function | Specifies a function to be called when the escape key is pressed while the component is focused. | | onPointerDownOutside | function | Specifies a function to be called when a pointer event occurs outside of the component. | | onFocusOutside | function | Specifies a function to be called when focus moves outside of the component. | | onInteractOutside | function | Specifies a function to be called when any interaction occurs outside of the component, such as clicks or touches. | | forceMount | boolean | Forces the component to mount in the DOM, regardless of its initial visibility state. | | alignOffset | number | Specifies the offset for aligning the component relative to its target or parent element. | | avoidCollisions | boolean | Enables collision detection and avoidance when positioning the component relative to its target or parent element. | | collisionBoundary | Boundary | Specifies the boundary within which collisions are detected and avoided when positioning the component relative to its target or parent element. | | collisionPadding | number \| Padding | Sets padding for collision detection during component positioning. | | sticky | enum | Enables sticky behavior, allowing the component to remain fixed in its position when scrolling. | | hideWhenDetached | boolean | Hides the component when it's detached from the DOM, improving performance and managing visibility. | ## Arrow An optional arrow element to render alongside a submenu. This can be used to help visually link the trigger item with the ContextMenu.Content. Must be rendered inside ContextMenu.Content. | Name | Type | Description | |---------|----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | width | number | Sets the width of the component. | | height | number | Sets the height of the component. | ## Item The component that contains the context menu items. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | disabled | boolean | If enabled, the spotlight will not be rendered. | | onSelect | function | Specifies a function to be called when an item is selected within the component. | | textValue | string | Sets the text value of the component. | ## Group Used to group multiple ContextMenu.Items. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | ## Label Used to render a label. It won't be focusable using arrow keys. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | ## CheckboxItem An item that can be controlled and rendered like a checkbox. | Name | Type | Description | |------------------|-----------------------------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | checked | boolean \| 'indeterminate' | Determines whether the component is initially checked by default. | | onCheckedChange | function | Specifies a function to be called when the checked state of the component changes. | | disabled | boolean | If enabled, the spotlight will not be rendered. | | onSelect | function | Specifies a function to be called when an item is selected within the component. | | textValue | string | Sets the text value of the component. | ## RadioGroup Used to group multiple ContextMenu.RadioItems. | Name | Type | Description | |----------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | value | string | Sets the currently selected value(s) within the ToggleGroup. | | onValueChange | function | Specifies a function to be called when the value of the ToggleGroup changes. | ## RadioItem An item that can be controlled and rendered like a radio. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | value | string | Sets the currently selected value(s) within the ToggleGroup. | | disabled | boolean | If enabled, the spotlight will not be rendered. | | onSelect | function | Specifies a function to be called when an item is selected within the component. | | textValue | string | Sets the text value of the component. | ## ItemIndicator Renders when the parent ContextMenu.CheckboxItem or ContextMenu.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both. | Name | Type | Description | |--------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | forceMount | boolean | Forces the component to mount in the DOM, regardless of its initial visibility state. | ## Separator Used to visually separate items in the context menu. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | ## Sub Contains all the parts of a submenu. | Name | Type | Description | |----------------|-----------|-------------------------------------------------------------------------------------------------------| | defaultOpen | boolean | Determines whether the component is initially open or closed by default. | | open | boolean | Controls whether the component is currently open or closed. | | onOpenChange | function | Specifies a function to be called when the open state of the component changes. | ## Sub-Trigger An item that opens a submenu. Must be rendered inside ContextMenu.Sub. | Name | Type | Description | |------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | disabled | boolean | If enabled, the spotlight will not be rendered. | | textValue | string | Sets the text value of the component. | ## Subcontent The component that pops out when a submenu is open. Must be rendered inside ContextMenu.Sub. | Name | Type | Description | |------------------------|-----------|-------------------------------------------------------------------------------------------------------| | asChild | boolean | Indicates if an element is treated as a child within a component or container. | | loop | boolean | By default, arrow key presses loop through items, allowing navigation from the first to the last and from the last to the first. | | onEscapeKeyDown | function | Specifies a function to be called when the escape key is pressed while the component is focused. | | onPointerDownOutside | function | Specifies a function to be called when a pointer event occurs outside of the component. | | onFocusOutside | function | Specifies a function to be called when focus moves outside of the component. | | onInteractOutside | function | Specifies a function to be called when any interaction occurs outside of the component, such as clicks or touches. | | forceMount | boolean | Forces the component to mount in the DOM, regardless of its initial visibility state. | | sideOffset | number | Specifies the offset for positioning the component from the side of its target or parent element. | | alignOffset | number | Specifies the offset for aligning the component relative to its target or parent element. | | avoidCollisions | boolean | Enables collision detection and avoidance when positioning the component relative to its target or parent element. | | collisionBoundary | Boundary | Specifies the boundary within which collisions are detected and avoided when positioning the component relative to its target or parent element. | | collisionPadding | number \| Padding | Sets padding for collision detection during component positioning. | | arrowPadding | number | Sets the padding around the arrow element of the component, adjusting its position relative to the target or parent element. | | sticky | enum | Enables sticky behavior, allowing the component to remain fixed in its position when scrolling. | | hideWhenDetached | boolean | Hides the component when it's detached from the DOM, improving performance and managing visibility. |