@awsui/components-react/segmented-control/index.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import { __assign, __rest } from "tslib";
import React from 'react';
import clsx from 'clsx';
import Select from '../select';
import FormField from '../form-field';
import InternalSegmentedControl from './internal-segmented-control';
import { getBaseProps } from '../internal/base-component';
import { fireNonCancelableEvent } from '../internal/events';
import styles from './styles.css.js';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function SegmentedControl(_a) {
    var selectedId = _a.selectedId, options = _a.options, label = _a.label, ariaLabelledby = _a.ariaLabelledby, onChange = _a.onChange, rest = __rest(_a, ["selectedId", "options", "label", "ariaLabelledby", "onChange"]);
    useTelemetry('SegmentedControl');
    var baseProps = getBaseProps(rest);
    var selectOptions = (options || []).map(function (option) {
        var label = option.text || option.iconAlt;
        return __assign(__assign({}, option), { label: label, value: option.id });
    });
    var selectedOptions = selectOptions.filter(function (option) {
        return option.value === selectedId;
    });
    var currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;
    var selectProps = {
        options: selectOptions,
        selectedOption: currentSelectedOption,
        triggerVariant: 'option',
        onChange: function (event) { return fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }); }
    };
    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root) }),
        React.createElement(InternalSegmentedControl, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange }),
        React.createElement("div", { className: styles.select },
            ariaLabelledby && React.createElement(Select, __assign({}, selectProps, { ariaLabelledby: ariaLabelledby })),
            !ariaLabelledby && label && (React.createElement(FormField, { label: label, stretch: true },
                React.createElement(Select, __assign({}, selectProps)))),
            !ariaLabelledby && !label && React.createElement(Select, __assign({}, selectProps)))));
}