@ui5/webcomponents-react/wrappers/webComponents/ToolbarItem/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * The `ToolbarItem` is a wrapper component used to integrate UI5 Web Components into the `Toolbar`.
 * It renders within the toolbar's shadow DOM and manages the lifecycle
 * and overflow behavior of its child component.
 *
 * ### Structure
 * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:
 * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)
 * - Automatic popover closing on interaction
 * - CSS custom state exposure for styling based on overflow state
 *
 * ### Usage
 * The `ToolbarItem` is typically used implicitly when adding components to a toolbar,
 * but specialized wrappers like `ToolbarButton` provide
 * component-specific functionality and should be preferred when available.
 *
 * __Note:__ This is a UI5 Web Component! [ToolbarItem UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ToolbarItem) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [2.20.0](https://github.com/UI5/webcomponents/releases/tag/v2.20.0) of __@ui5/webcomponents__.
 */
const ToolbarItem = withWebComponent('ui5-toolbar-item', ['overflowPriority'], ['preventOverflowClosing'], [], []);
ToolbarItem.displayName = 'ToolbarItem';
export { ToolbarItem };