@syncfusion/react-navigations/src/toolbar/toolbar-multi-row.js

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

import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useEffect, useRef, Children } from 'react';
import { isNullOrUndefined } from '@syncfusion/react-base';
const CLS_ITEMS = 'sf-toolbar-items';
const CLS_MULTIROW = 'sf-toolbar-multirow-items';
/**
 * ToolbarMultiRow component that renders toolbar items in multiple rows.
 *
 * This component allows toolbar items to wrap to the next line when they exceed
 * the available horizontal space, providing better space utilization and
 * responsive behavior for toolbars with many items.
 */
const ToolbarMultiRow = memo((props) => {
    const { children, onOverflowChange } = props;
    const previousChildrenCountRef = useRef(null);
    useEffect(() => {
        const currentCount = Children.count(children);
        if (isNullOrUndefined(previousChildrenCountRef.current) || previousChildrenCountRef.current !== currentCount) {
            previousChildrenCountRef.current = Children.count(children);
            onOverflowChange();
        }
    }, [onOverflowChange, children]);
    return (_jsx("div", { className: `${CLS_ITEMS} ${CLS_MULTIROW}`, children: children }));
});
ToolbarMultiRow.displayName = 'ToolbarMultiRow';
export { ToolbarMultiRow };