import React from 'react';
import { withFocusable } from '../../common/Focusable';
import Tooltip from '../../Tooltip';
import { st, classes } from './ToggleIcon.st.css.js';
const Icon = ({ 'data-click': dataClick, selected, size, onClick, focusableOnFocus, focusableOnBlur, children, className, role, 'aria-checked': ariaChecked, ...rest }) => (React.createElement("button", { ...rest, role: role, className: st(classes.button, { size, selected }, className), "data-click": dataClick, "data-hook": "toggle-icon", "data-selected": selected, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: "button" }, children));
const FocusableIcon = withFocusable(Icon);
class ToggleIcon extends React.Component {
    render() {
        const { children, selected, size, tooltipText, tooltipProps, focusableOnFocus, focusableOnBlur, onClick, dataHook, 'data-click': dataClick, role, 'aria-checked': ariaChecked, ...rest } = this.props;
        return (React.createElement(Tooltip, { appendTo: "window", placement: "top", timeout: 0, ...tooltipProps, content: tooltipText, className: st(classes.tooltip), dataHook: dataHook },
            React.createElement(FocusableIcon, { ...rest, size: size, selected: selected, "data-click": dataClick, role: role, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, children
                ? React.cloneElement(children, {
                    size: size === 'small' || size === 'tiny' ? '18px' : '24px',
                })
                : null)));
    }
}
ToggleIcon.displayName = 'SegmentedToggle.Icon';
export default ToggleIcon;
//# sourceMappingURL=ToggleIcon.js.map