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

A package of Pure React navigation components such as Toolbar and Context-menu which is used to navigate from one page to another

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useRef, memo, useMemo } from 'react';
const CLS_ITEM = 'sf-toolbar-item';
const CLS_SEPARATOR = 'sf-separator';
/**
 * The ToolbarSeparator component is used for rendering a visual separation between items in a Toolbar.
 *
 * ```typescript
 * <Toolbar>
 *   <ToolbarItem><Button>Cut</Button></ToolbarItem>
 *   <ToolbarSeparator />
 *   <ToolbarItem><Button>Copy</Button></ToolbarItem>
 * </Toolbar>
 * ```
 */
export const ToolbarSeparator = memo(forwardRef((props, ref) => {
    const { className = '', ...eleAttr } = props;
    const separatorRef = useRef(null);
    const classes = useMemo(() => {
        const classes = [CLS_ITEM, CLS_SEPARATOR];
        if (className) {
            classes.push(className);
        }
        return classes.join(' ');
    }, [className]);
    useImperativeHandle(ref, () => {
        return {
            element: separatorRef.current
        };
    });
    return (_jsx("div", { ref: separatorRef, className: classes, ...eleAttr }));
}));
ToolbarSeparator.displayName = 'ToolbarSeparator';
export default ToolbarSeparator;