@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
41 lines • 3.28 kB
JavaScript
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 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 { useUniqueId } from '../internal/hooks/use-unique-id';
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("label", { 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((_a, ref) => {
var { columns, items, className, ariaLabel, ariaLabelledby, minColumnWidth } = _a, rest = __rest(_a, ["columns", "items", "className", "ariaLabel", "ariaLabelledby", "minColumnWidth"]);
return (React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
React.createElement("div", Object.assign({}, 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, 4), 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, Object.assign({}, item)))))) }));
}
return React.createElement(InternalKeyValuePair, Object.assign({ key: index }, pair));
})))));
});
export default InternalKeyValuePairs;
//# sourceMappingURL=internal.js.map