@syncfusion/react-navigations/src/toolbar/toolbar-spacer.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, memo, useMemo } from 'react';
const CLS_ITEM = 'sf-toolbar-item';
const CLS_SPACER = 'sf-toolbar-spacer';
/**
 * The ToolbarSpacer component is used to render an adjustable space within a Toolbar.
 *
 * ```typescript
 * <Toolbar>
 *   <ToolbarItem><Button>New</Button></ToolbarItem>
 *   <ToolbarItem><Button>Open</Button></ToolbarItem>
 *   <ToolbarSpacer />
 *   <ToolbarItem><Button>Save</Button></ToolbarItem>
 * </Toolbar>
 * ```
 */
export const ToolbarSpacer = memo(forwardRef((props, ref) => {
    const { className = '', ...eleAttr } = props;
    const spacerRef = useRef(null);
    const classes = useMemo(() => {
        const classes = [CLS_ITEM, CLS_SPACER];
        if (className) {
            classes.push(className);
        }
        return classes.join(' ');
    }, [className]);
    useImperativeHandle(ref, () => {
        return {
            element: spacerRef.current
        };
    });
    return (_jsx("div", { ref: spacerRef, className: classes, ...eleAttr }));
}));
ToolbarSpacer.displayName = 'ToolbarSpacer';
export default ToolbarSpacer;