@awsui/components-react
Version:
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
43 lines • 3.31 kB
JavaScript
// 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 { useUniqueId, warnOnce } from '@awsui/component-toolkit/internal';
import Box from '../box/internal';
import ColumnLayout from '../column-layout/internal';
import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
import styles from './styles.css.js';
const InternalKeyValuePair = ({ label, info, value, id }) => {
const kvPairId = useUniqueId('kv-pair-');
return (React.createElement(React.Fragment, null,
React.createElement("dt", { className: styles.term },
React.createElement("div", { className: styles['key-label'], id: id || kvPairId }, label),
React.createElement(InfoLinkLabelContext.Provider, { value: id || kvPairId }, info && React.createElement("span", { className: styles.info }, info))),
React.createElement("dd", { className: styles.detail }, value)));
};
const InternalKeyValuePairGroup = ({ label, value }) => (React.createElement(React.Fragment, null,
label && React.createElement("dt", { className: styles['group-title'] }, label),
React.createElement("dd", { className: styles.detail }, value)));
const InternalKeyValuePairs = React.forwardRef(({ columns, items, className, ariaLabel, ariaLabelledby, minColumnWidth, ...rest }, ref) => {
const MAX_COLUMNS = 4;
if (columns > MAX_COLUMNS) {
warnOnce('Key-value pairs', `\`columns\` (${columns}) must be <= ${MAX_COLUMNS}. Using ${MAX_COLUMNS} as default.`);
}
return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
React.createElement("div", { ...rest, className: clsx(styles['key-value-pairs'], className), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: ref },
React.createElement(ColumnLayout, { __tagOverride: "dl", columns: Math.min(columns, MAX_COLUMNS), variant: "text-grid", minColumnWidth: minColumnWidth }, items.map((pair, index) => {
if (pair.type === 'group') {
return (
/* InternalKeyValuePairGroup tells react to treat the dt-dd pair as an individual layout item.
* Otherwise, without this component, they will be rendered as a list, which ruins the html structure.
* InternalKeyValuePairGroup is not wrapped by div tag, because it ruins a11y compatibility for dl -> dt/dd
* */
React.createElement(InternalKeyValuePairGroup, { key: index, label: pair.title && (React.createElement(Box, { variant: "h3", padding: "n" }, pair.title)), value: React.createElement("dl", { className: styles['group-list'] }, pair.items.map((item, itemIndex) => (React.createElement("div", { key: itemIndex, className: styles['group-list-item'] },
React.createElement(InternalKeyValuePair, { ...item }))))) }));
}
return React.createElement(InternalKeyValuePair, { key: index, ...pair });
})))));
});
export default InternalKeyValuePairs;
//# sourceMappingURL=internal.js.map