@awsui/components-react/tiles/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 clsx from 'clsx';
import React from 'react';
import { getBaseProps } from '../internal/base-component';
import RadioButton from '../radio-group/radio-button';
import styles from './styles.css.js';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import { useTelemetry } from '../internal/hooks/use-telemetry';
var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
export default function Tiles(_a) {
    var value = _a.value, items = _a.items, ariaLabel = _a.ariaLabel, ariaRequired = _a.ariaRequired, columns = _a.columns, onChange = _a.onChange, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "columns", "onChange"]);
    useTelemetry('Tiles');
    var getColumns = function () {
        if (columns) {
            return columns;
        }
        var nItems = items ? items.length : 0;
        var columnsLookup = {
            0: 1,
            1: 1,
            2: 2,
            4: 2,
            8: 2
        };
        return columnsLookup[nItems] || 3;
    };
    var _b = useFormFieldContext(rest), ariaDescribedby = _b.ariaDescribedby, ariaLabelledby = _b.ariaLabelledby;
    var baseProps = getBaseProps(rest);
    var generatedName = useUniqueId('awsui-tiles-');
    var nColumns = getColumns();
    var _c = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _c[0], ref = _c[1];
    return (React.createElement("div", __assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired }, baseProps, { className: clsx(baseProps.className, styles.root), ref: ref }),
        React.createElement("div", { className: clsx(styles.columns, styles["column-" + nColumns]) }, items &&
            items.map(function (item) {
                var _a, _b, _c, _d, _e;
                var controlId = item.controlId || generatedName + "-value-" + item.value;
                return (React.createElement("label", { className: clsx(styles['tile-container'], (_a = {}, _a[styles['has-metadata']] = item.description || item.image, _a), (_b = {}, _b[styles.selected] = item.value === value, _b), (_c = {}, _c[styles.disabled] = !!item.disabled, _c), styles["breakpoint-" + breakpoint]), key: item.value, "data-value": item.value, htmlFor: controlId, id: controlId + "-wrapper" },
                    React.createElement("div", { className: clsx(styles.control, (_d = {}, _d[styles['no-image']] = !item.image, _d)) },
                        React.createElement(RadioButton, { checked: item.value === value, name: generatedName, withoutLabel: true, value: item.value, label: item.label, description: item.description, disabled: item.disabled, onChange: onChange, controlId: controlId })),
                    item.image && (React.createElement("div", { className: clsx(styles.image, (_e = {}, _e[styles.disabled] = !!item.disabled, _e)) }, item.image))));
            }))));
}