@syncfusion/react-navigations/src/toolbar/toolbar-popup.d.ts

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

import { HTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
import { OverflowMode, Orientation } from './toolbar';
/**
 * Specifies the props for the ToolbarPopup component.
 */
export interface ToolbarPopupProps {
    /**
     * Specifies the reference to the toolbar element.
     * Used to access the toolbar DOM element for measurements and positioning.
     *
     * @default null
     */
    toolbarRef: RefObject<HTMLDivElement | null>;
    /**
     * Specifies the layout direction of toolbar items.
     *
     * The possible values are:
     * - Horizontal: Arranges Toolbar items in a row from left to right.
     * - Vertical: Stacks Toolbar items in a column from top to bottom.
     *
     * @default Orientation.Horizontal
     */
    orientation: Orientation;
    /**
     * Specifies whether the Toolbar reference is ready.
     * This property indicates if the toolbar element has been properly initialized.
     *
     * @default false
     */
    isToolbarRefReady: boolean;
    /**
     * Specifies the Toolbar display mode for overflow content.
     * This property determines how overflowing items are handled (Popup or Extended).
     *
     * @default OverflowMode.Popup
     */
    overflowMode: OverflowMode;
    /**
     * Specifies whether popups adjust their position to avoid overlapping with other elements.
     * This property is applicable only when in `Popup` mode.
     *
     * @default true
     */
    collision?: boolean;
    /**
     * Specifies the visibility state of the popup externally.
     * When true, the popup is displayed; otherwise, it's hidden.
     *
     * @default false
     */
    isPopupVisible: boolean;
    /**
     * Specifies the callback function triggered when the popup's open/close state changes.
     * This function is called with the updated state whenever the popup visibility changes.
     *
     * @param isOpen boolean value indicating whether the popup is open (true) or closed (false)
     */
    onPopupOpenChange: (isOpen: boolean) => void;
    /**
     * Specifies the callback function triggered when the overflow state changes.
     * This function is called to set up proper keyboard navigation for toolbar items.
     */
    onOverflowChange: () => void;
}
/**
 * Specifies the reference interface for the ToolbarPopup component.
 */
export interface ToolbarPopupRef {
    /**
     * Specifies the method to refresh the overflow calculation for popup toolbar items.
     * This method recalculates which items should be visible in the toolbar
     * and which should be moved to the popup based on current dimensions and content.
     */
    refreshOverflow: () => void;
}
type IToolbarPopupProps = ToolbarPopupProps & HTMLAttributes<HTMLDivElement>;
/**
 * ToolbarPopup component that renders the overflowing toolbar items in the popup.
 *
 * This component manages the display of toolbar items that don't fit in the available space
 * by moving them to a popup. It supports both Popup and Extended overflow modes and
 * automatically calculates which items should be visible in the toolbar and which should
 * be moved to the popup based on available space.
 */
declare const ToolbarPopup: ForwardRefExoticComponent<IToolbarPopupProps & RefAttributes<ToolbarPopupRef>>;
export { ToolbarPopup };