@syncfusion/react-splitbuttons/src/split-button/split-button.js

Syncfusion React SplitButton package is a feature-rich collection of UI components, including SplitButton and DropDownButton, designed for advanced button interactions in React applications.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, forwardRef, useImperativeHandle, useEffect, useMemo } from 'react';
import { Button, Position, Size } from '@syncfusion/react-buttons';
import { preRender, useProviderContext } from '@syncfusion/react-base';
import { DropDownButton } from '../dropdown-button/dropdown-button';
/**
 * The Split Button component provides a combination of a default button action and a Dropdown Button, enabling users to quickly access additional options or actions in a compact interface.
 *
 * ```typescript
 * import { SplitButton } from "@syncfusion/react-splitbuttons";
 *
 * const menuItems = [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }];
 * <SplitButton items={menuItems}>Default Action</SplitButton>
 * ```
 */
export const SplitButton = forwardRef((props, ref) => {
    const { className = '', icon, iconPosition = Position.Left, items = [], popupWidth = 'auto', disabled = false, target, lazyOpen = false, children, itemTemplate, color, variant, size = Size.Medium, onOpen, onClose, onSelect, ...domProps } = props;
    const buttonRef = useRef(null);
    const dropDownRef = useRef(null);
    const wrapperRef = useRef(null);
    const { dir } = useProviderContext();
    const publicAPI = useMemo(() => ({
        iconPosition,
        icon,
        target,
        popupWidth,
        items,
        lazyOpen,
        itemTemplate,
        color,
        variant,
        size
    }), [iconPosition, icon, target, popupWidth, items, lazyOpen, itemTemplate, color, variant, size]);
    useEffect(() => {
        preRender('splitButton');
    }, []);
    useImperativeHandle(ref, () => ({
        ...publicAPI,
        toggle: () => {
            if (dropDownRef.current && dropDownRef.current.toggle) {
                dropDownRef.current.toggle();
            }
        },
        element: wrapperRef.current
    }), [publicAPI]);
    const wrapperClassName = [
        'sf-split-btn-wrapper',
        size ? `sf-split-btn-${String(size).toLowerCase().substring(0, 2)}` : '',
        variant ? `sf-${String(variant).toLowerCase()}` : '',
        dir === 'rtl' ? 'sf-rtl' : ''
    ].filter(Boolean).join(' ');
    return (_jsxs("div", { ref: wrapperRef, className: wrapperClassName, children: [_jsx(Button, { ref: buttonRef, className: `${className} ${(dir === 'rtl') ? 'sf-rtl' : ''} sf-control sf-btn sf-split-btn`, type: "button", icon: icon, color: color, variant: variant, size: size, iconPosition: iconPosition, disabled: disabled, ...domProps, children: children }), _jsx(DropDownButton, { ref: dropDownRef, relateTo: wrapperRef.current, target: target ?? wrapperRef, className: `${className} ${(dir === 'rtl') ? 'sf-rtl' : ''} sf-icon-btn sf-control sf-dropdown-btn sf-btn`, items: items, color: color, variant: variant, size: size, itemTemplate: itemTemplate, disabled: disabled, popupWidth: popupWidth, lazyOpen: lazyOpen, onOpen: onOpen, onClose: onClose, onSelect: onSelect })] }));
});
export default SplitButton;