@awsui/components-react/tiles/internal.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

import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { Tile } from './tile';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
const InternalTiles = React.forwardRef((_a, ref) => {
    var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, readOnly, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "readOnly", "__internalRootRef"]);
    const baseProps = getBaseProps(rest);
    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
    const generatedName = useUniqueId('awsui-tiles-');
    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);
    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);
    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
    const columnCount = getColumnCount(items, columns);
    return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
        React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
            items.map((item, index) => (React.createElement(Tile, Object.assign({ ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange, readOnly: readOnly }, (!item.disabled && !readOnly
                ? getAnalyticsMetadataAttribute({
                    action: 'select',
                    detail: {
                        position: `${index + 1}`,
                        value: item.value,
                        label: `.${analyticsSelectors['radio-button']}`,
                    },
                })
                : {}))))))));
});
function getColumnCount(items, columns) {
    if (columns) {
        return columns;
    }
    const nItems = items ? items.length : 0;
    const columnsLookup = {
        0: 1,
        1: 1,
        2: 2,
        4: 2,
        8: 2,
    };
    return columnsLookup[nItems] || 3;
}
export default InternalTiles;
//# sourceMappingURL=internal.js.map