@ui5/webcomponents-react

import '@ui5/webcomponents/dist/SplitButton.js'; import type { SplitButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/SplitButton.js'; import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface SplitButtonAttributes { /** * Defines the additional accessibility attributes that will be applied to the component. * The `accessibilityAttributes` property accepts an object with the following optional fields: * * - **root**: Attributes that will be applied to the main (text) button. * - **hasPopup**: Indicates the presence and type of popup triggered by the button. * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. * - **roleDescription**: Provides a human-readable description for the role of the button. * Accepts any string value. * - **title**: Specifies a tooltip or description for screen readers. * Accepts any string value. * - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button. * * - **arrowButton**: Attributes applied specifically to the arrow (split) button. * - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button. * Accepts string values: `"dialog"`, `"grid"`, `"listbox"`, `"menu"`, or `"tree"`. * - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded. * Accepts boolean values: `true` or `false`. * * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. * @default {} */ accessibilityAttributes?: SplitButtonAccessibilityAttributes; /** * Defines the accessible ARIA name of the component. * @default undefined */ accessibleName?: string | undefined; /** * Defines whether the arrow button should have the active state styles or not. * * **Note:** Available since [v1.21.0](https://github.com/UI5/webcomponents/releases/tag/v1.21.0) of **@ui5/webcomponents**. * @default false */ activeArrowButton?: boolean; /** * Defines the component design. * @default "Default" */ design?: ButtonDesign | keyof typeof ButtonDesign; /** * Defines whether the component is disabled. * A disabled component can't be pressed or * focused, and it is not in the tab chain. * @default false */ disabled?: boolean; /** * Defines the icon to be displayed as graphical element within the component. * The SAP-icons font provides numerous options. * * Example: * * See all available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html). * @default undefined */ icon?: string | undefined; } interface SplitButtonDomRef extends Required<SplitButtonAttributes>, Ui5DomRef { } interface SplitButtonPropTypes extends SplitButtonAttributes, Omit<CommonProps, keyof SplitButtonAttributes | 'children' | 'onArrowClick' | 'onClick'> { /** * Defines the text of the component. * * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. * * __Supported Node Type/s:__ `Array<Node>` */ children?: ReactNode | ReactNode[]; /** * Fired when the user clicks on the arrow action. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onArrowClick?: (event: Ui5CustomEvent<SplitButtonDomRef>) => void; /** * Fired when the user clicks on the default action. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onClick?: (event: Ui5CustomEvent<SplitButtonDomRef>) => void; } /** * `SplitButton` enables users to trigger actions. It is constructed of two separate actions - * default action and arrow action that can be activated by clicking or tapping, or by * pressing certain keyboard keys - `Space` or `Enter` for default action, * and `Arrow Down` or `Arrow Up` for arrow action. * * ### Usage * * `SplitButton` consists two separate buttons: * * - for the first one (default action) you can define some `text` or an `icon`, or both. * - the second one (arrow action) contains only `slim-arrow-down` icon. * * You can choose a `design` from a set of predefined types (the same as for ui5-button) that offer * different styling to correspond to the triggered action. Both text and arrow actions have the same design. * * You can set the `SplitButton` as enabled or disabled. Both parts of an enabled * `SplitButton` can be pressed by clicking or tapping it, or by certain keys, which changes * the style to provide visual feedback to the user that it is pressed or hovered over with * the mouse cursor. A disabled `SplitButton` appears inactive and any of the two buttons * cannot be pressed. * * ### Keyboard Handling * * - `Space` or `Enter` - triggers the default action * - `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event. * - `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action * There are separate events that are fired on activating of `SplitButton` parts: * * - `click` for the first button (default action) * - `arrow-click` for the second button (arrow action) * * * * __Note:__ This is a UI5 Web Component! [SplitButton UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/SplitButton) | [Repository](https://github.com/UI5/webcomponents) * * @since [1.1.0](https://github.com/UI5/webcomponents/releases/tag/v1.1.0) of __@ui5/webcomponents__. */ declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<SplitButtonDomRef>>; export { SplitButton }; export type { SplitButtonDomRef, SplitButtonPropTypes };