@awsui/components-react/button-group/icon-button-item.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { InternalButton } from '../button/internal.js';
import Tooltip from '../internal/components/tooltip/index.js';
import { fireCancelableEvent } from '../internal/events/index.js';
import InternalLiveRegion from '../live-region/internal.js';
import testUtilStyles from './test-classes/styles.css.js';
const IconButtonItem = forwardRef(({ item, showTooltip, showFeedback, onTooltipDismiss, onItemClick }, ref) => {
    const containerRef = React.useRef(null);
    const hasIcon = item.iconName || item.iconUrl || item.iconSvg;
    if (!hasIcon) {
        warnOnce('ButtonGroup', `Missing icon for item with id: ${item.id}`);
    }
    const canShowTooltip = Boolean(showTooltip && !item.disabled && !item.loading);
    const canShowFeedback = Boolean(showTooltip && showFeedback && item.popoverFeedback);
    return (React.createElement("div", { ref: containerRef },
        React.createElement(InternalButton, { variant: "icon", loading: item.loading, loadingText: item.loadingText, disabled: item.disabled, __focusable: canShowFeedback, iconName: hasIcon ? item.iconName : 'close', iconUrl: item.iconUrl, iconSvg: item.iconSvg, iconAlt: item.text, ariaLabel: item.text, onClick: event => fireCancelableEvent(onItemClick, { id: item.id }, event), ref: ref, "data-testid": item.id, "data-itemid": item.id, className: clsx(testUtilStyles.item, testUtilStyles['button-group-item']), __title: "" }, item.text),
        (canShowTooltip || canShowFeedback) && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: item.id, value: (showFeedback && React.createElement(InternalLiveRegion, { tagName: "span" }, item.popoverFeedback)) ||
                item.text, className: clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip']), onDismiss: onTooltipDismiss }))));
});
export default IconButtonItem;
//# sourceMappingURL=icon-button-item.js.map