@awsui/components-react/segmented-control/segment.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, { useRef, useState } from 'react';
import clsx from 'clsx';
import InternalIcon from '../icon/internal';
import Tooltip from '../internal/components/tooltip';
import useHiddenDescription from '../internal/hooks/use-hidden-description';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import styles from './styles.css.js';
export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, }, ref) => {
    const buttonRef = useRef(null);
    const [showTooltip, setShowTooltip] = useState(false);
    const isDisabledWithReason = disabled && !!disabledReason;
    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
    const isVisualRefresh = useVisualRefresh();
    return (React.createElement("button", Object.assign({ className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined }, (isDisabledWithReason ? targetProps : {}), { "data-testid": id }),
        (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
        React.createElement("span", null, text),
        isDisabledWithReason && (React.createElement(React.Fragment, null,
            descriptionEl,
            showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: buttonRef, value: disabledReason, onDismiss: () => setShowTooltip(false) }))))));
});
//# sourceMappingURL=segment.js.map