@syncfusion/react-navigations/src/toolbar/toolbar-item.js

Syncfusion React Navigations with Toolbar and Context Menu for seamless page navigation

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useRef, useMemo, memo } from 'react';
const CLS_ITEM = 'sf-toolbar-item';
/**
 * The ToolbarItem component allows for the rendering of individual items within a Toolbar.
 *
 * ```typescript
 * <Toolbar>
 *   <ToolbarItem id='saveButton' className='action-button' style={{ backgroundColor: '#f0f0f0' }}>
 *     <button type="button">Save</button>
 *   </ToolbarItem>
 * </Toolbar>
 * ```
 */
export const ToolbarItem = memo(forwardRef((props, ref) => {
    const { className = '', children, ...eleAttr } = props;
    const itemRef = useRef(null);
    const classes = useMemo(() => {
        const classes = [CLS_ITEM];
        if (className) {
            classes.push(className);
        }
        return classes.join(' ');
    }, [className]);
    useImperativeHandle(ref, () => {
        return {
            element: itemRef.current
        };
    });
    return (_jsx("div", { ref: itemRef, className: classes, ...eleAttr, children: children }));
}));
ToolbarItem.displayName = 'ToolbarItem';
export default ToolbarItem;