/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ButtonsPopupSettings } from './PopupSettings';
import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonClickEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
import { ButtonItemProps } from '../ButtonItem.js';
import { ButtonsClassStructure, KendoReactComponentBaseProps, SVGIcon } from '@progress/kendo-react-common';
export interface DropDownButtonProps extends KendoReactComponentBaseProps {
    /**
     * Specifies the `accessKey` of the main button.
     *
     * @remarks
     * This property is related to accessibility.
     */
    accessKey?: string;
    /**
     * The accessible label of the component.
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * The title of the component.
     */
    title?: string;
    /**
     * Specifies the text of the main button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton)).
     */
    text?: React.ReactNode;
    /**
     * Specifies the list items ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/data-binding#toc-arrays-of-objects)).
     */
    items?: any[];
    /**
     * Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/data-binding#toc-arrays-of-objects)).
     */
    textField?: string;
    /**
     * Specifies the `tabIndex` of the main button.
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Determines whether the component is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/disabled)).
     */
    disabled?: boolean;
    /**
     * Opens the popup of the DropDownButton if set to `true`.
     */
    opened?: boolean;
    /**
     * Defines an icon that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/icons)).
     */
    icon?: string;
    /**
     * Defines a SVG icon that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/icons)).
     */
    svgIcon?: SVGIcon;
    /**
     * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/icons)).
     */
    iconClass?: string;
    /**
     * Defines the location of an image that will be displayed next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/icons)).
     */
    imageUrl?: string;
    /**
     * Configures the popup
     * ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/customization#toc-popup-behavior)).
     */
    popupSettings?: ButtonsPopupSettings;
    /**
     * @hidden
     */
    unstyled?: ButtonsClassStructure;
    /**
     * @hidden
     * This prop is provided by the withZIndexContext HOC to subscribe to ZIndexContext.
     */
    _zIndex?: number;
    /**
     * A React functional or class component which is used for rendering items ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/customization#toc-items-rendering)). The default rendering includes an icon, an image, and text.
     */
    item?: null | React.ComponentType<{
        item: any;
        itemIndex: number;
    }>;
    /**
     * Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
     * if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
     */
    itemRender?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
        item: any;
        itemIndex: number;
    }>;
    /**
     * Sets the `className` of the DropDownButton component.
     */
    className?: string;
    /**
     * Sets the `className` of the main button.
     */
    buttonClass?: string;
    /**
     * Sets the direction of the component.
     */
    dir?: string;
    /**
     * Fires when the component is focused ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/events)).
     */
    onFocus?: (event: DropDownButtonFocusEvent) => void;
    /**
     * Fires when the component is blurred ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/events)).
     */
    onBlur?: (event: DropDownButtonBlurEvent) => void;
    /**
     * Fires when an item is clicked ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/events)).
     */
    onItemClick?: (event: DropDownButtonItemClickEvent) => void;
    /**
     * Fires when the popup which contains the items is opened ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/events)).
     */
    onOpen?: (event: DropDownButtonOpenEvent) => void;
    /**
     * Fires when the popup which contains the items is closed ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/events)).
     */
    onClose?: (event: DropDownButtonCloseEvent) => void;
    /**
     * @hidden
     * Fires when the main button is clicked
     */
    onClick?(event: DropDownButtonClickEvent): void;
    /**
     * Configures the `size` of the DropDownButton.
     *
     * The available options are:
     * - `xs`
     * - `small`
     * - `medium`
     * - `large`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <DropDownButton size="large" text="Actions" />
     * ```
     */
    size?: 'xs' | 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the DropDownButton.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `full`
     * - `none`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <DropDownButton rounded="full" text="Actions" />
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Configures the `fillMode` of the DropDownButton.
     *
     * The available options are:
     * - `solid`
     * - `outline`
     * - `flat`
     * - `link`
     * - `clear`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <DropDownButton fillMode="outline" text="Actions" />
     * ```
     */
    fillMode?: 'solid' | 'outline' | 'flat' | 'link' | 'clear';
    /**
     * Configures the `themeColor` of the DropDownButton.
     *
     * The available options are:
     * - `base`
     * - `primary`
     * - `secondary`
     * - `tertiary`
     * - `info`
     * - `success`
     * - `warning`
     * - `error`
     * - `dark`
     * - `light`
     * - `inverse`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <DropDownButton themeColor="primary" text="Actions" />
     * ```
     */
    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
    /**
     * Sets an SVG icon or custom element before the content of the DropDownButton. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
     */
    startIcon?: React.ReactNode;
    /**
     * Sets an SVG icon or custom element after the content of the DropDownButton. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
     */
    endIcon?: React.ReactNode;
}
export interface SplitButtonProps extends KendoReactComponentBaseProps {
    /**
     * Specifies the `accessKey` of the main button.
     *
     * @remarks
     * This property is related to accessibility.
     */
    accessKey?: string;
    /**
     * The accessible label of the component.
     *
     * @remarks
     * This property is related to accessibility.
     */
    ariaLabel?: string;
    /**
     * The title of the component.
     */
    title?: string;
    /**
     * Specifies the text of the main button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton)).
     */
    text?: string;
    /**
     * Specifies the list items ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/data-binding#toc-arrays-of-objects)).
     */
    items?: any[];
    /**
     * Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/data-binding#toc-arrays-of-objects)).
     */
    textField?: string;
    /**
     * Specifies the `tabIndex` of the main button.
     *
     * @remarks
     * This property is related to accessibility.
     */
    tabIndex?: number;
    /**
     * Determines whether the component is disabled ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/disabled)).
     */
    disabled?: boolean;
    /**
     * Defines an icon that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     */
    icon?: string;
    /**
     * Defines a SVG icon that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     */
    svgIcon?: SVGIcon;
    /**
     * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     */
    iconClass?: string;
    /**
     * Defines an icon that will be rendered inside the arrow button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     *
     * @default 'chevron-down'
     */
    arrowButtonIcon?: string;
    /**
     * Defines a SVG icon that will be rendered inside the arrow button ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     *
     * @default chevronDownIcon
     */
    arrowButtonSvgIcon?: SVGIcon;
    /**
     * Sets an SVG icon or custom element before the content of the SplitButton. For the custom component, we recommend
     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
     */
    startIcon?: React.ReactNode;
    /**
     * Sets an SVG icon or custom element after the content of the SplitButton. For the custom component, we recommend
     * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content)
     * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content).
     */
    endIcon?: React.ReactNode;
    /**
     * Defines the location of an image that will be displayed next to the main button text ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/icons)).
     */
    imageUrl?: string;
    /**
     * Configures the popup ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/customization#toc-popup-behavior)).
     */
    popupSettings?: ButtonsPopupSettings;
    /**
     * Opens the popup of the SplitButton if set to `true`.
     */
    opened?: boolean;
    /**
     * A React functional or class component which is used for rendering items ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/customization#toc-items-rendering)). The default rendering includes an icon, an image, and text.
     */
    item?: null | React.ComponentType<{
        item: any;
        itemIndex: number;
    }>;
    /**
     * Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
     * if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
     */
    itemRender?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
        item: any;
        itemIndex: number;
    }>;
    /**
     * Sets the `className` of the SplitButton component.
     */
    className?: string;
    /**
     * Sets the `className` of the main button.
     */
    buttonClass?: string;
    /**
     * Sets the direction of the component.
     */
    dir?: string;
    /**
     * Fires when the main button is clicked ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onButtonClick?: (event: SplitButtonClickEvent) => void;
    /**
     * Fires when the component is focused ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onFocus?: (event: SplitButtonFocusEvent) => void;
    /**
     * Fires when the component is blurred ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onBlur?: (event: SplitButtonBlurEvent) => void;
    /**
     * Fires when an item is clicked ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onItemClick?: (event: SplitButtonItemClickEvent) => void;
    /**
     * Fires when the popup which contains the items is opened ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onOpen?: (event: SplitButtonOpenEvent) => void;
    /**
     * Fires when the popup which contains the items is closed ([see example](https://www.telerik.com/kendo-react-ui/components/buttons/splitbutton/events)).
     */
    onClose?: (event: SplitButtonCloseEvent) => void;
    /**
     * Configures the `size` of the SplitButton.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <SplitButton size="large" text="Actions" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the SplitButton.
     *
     * The available options are:
     * - `small`
     * - `medium`
     * - `large`
     * - `full`
     * - `none`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <SplitButton rounded="full" text="Actions" />
     * ```
     */
    rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
    /**
     * Configures the `fillMode` of the SplitButton.
     *
     * The available options are:
     * - `solid`
     * - `outline`
     * - `flat`
     * - `link`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <SplitButton fillMode="outline" text="Actions" />
     * ```
     */
    fillMode?: 'solid' | 'outline' | 'flat' | 'link';
    /**
     * Configures the `themeColor` of the SplitButton.
     *
     * The available options are:
     * - `base`
     * - `primary`
     * - `secondary`
     * - `tertiary`
     * - `info`
     * - `success`
     * - `warning`
     * - `error`
     * - `dark`
     * - `light`
     * - `inverse`
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```tsx
     * <SplitButton themeColor="primary" text="Actions" />
     * ```
     */
    themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
}