@awsui/components-react/token-group/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 { getBaseProps } from '../internal/base-component';
import clsx from 'clsx';
import styles from './styles.css.js';
import DismissButton from './dismiss-button';
import Option from '../internal/components/option';
import { fireNonCancelableEvent } from '../internal/events';
import checkControlled from '../internal/hooks/check-controlled';
import { SpaceBetween } from '..';
import { useTelemetry } from '../internal/hooks/use-telemetry';
export default function TokenGroup(_a) {
    var items = _a.items, _b = _a.alignment, alignment = _b === void 0 ? 'horizontal' : _b, onDismiss = _a.onDismiss, rest = __rest(_a, ["items", "alignment", "onDismiss"]);
    useTelemetry('TokenGroup');
    var baseProps = getBaseProps(rest);
    var className = clsx(baseProps.className, styles.root);
    checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
    return (React.createElement("div", __assign({}, baseProps, { className: className }),
        React.createElement(SpaceBetween, { direction: alignment, size: "xs" }, items &&
            items.map(function (item, itemIndex) { return (React.createElement(Token, __assign({ key: itemIndex }, item, { onDismiss: function () { return fireNonCancelableEvent(onDismiss, { itemIndex: itemIndex }); } }))); }))));
}
var Token = function (_a) {
    var disabled = _a.disabled, dismissLabel = _a.dismissLabel, onDismiss = _a.onDismiss, props = __rest(_a, ["disabled", "dismissLabel", "onDismiss"]);
    return (React.createElement("div", { className: clsx(styles.token, disabled && styles['token-disabled']), "aria-disabled": disabled ? 'true' : undefined },
        React.createElement(Option, { option: __assign(__assign({}, props), { disabled: disabled }) }),
        React.createElement(DismissButton, { disabled: disabled, dismissLabel: dismissLabel, onDismiss: onDismiss })));
};