@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
46 lines • 3.17 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useState } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import InternalIcon from '../icon/internal';
import { getBaseProps } from '../internal/base-component';
import TokenList from '../internal/components/token-list';
import { fireNonCancelableEvent } from '../internal/events';
import checkControlled from '../internal/hooks/check-controlled';
import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
import InternalToken from '../token/internal';
import tokenListStyles from '../internal/components/token-list/styles.css.js';
import styles from './styles.css.js';
export default function InternalTokenGroup({ alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, isItemReadOnly, __internalRootRef, ...props }) {
checkControlled('TokenGroup', 'items', items, 'onDismiss', onDismiss);
const [nextFocusIndex, setNextFocusIndex] = useState(null);
const tokenListRef = useListFocusController({
nextFocusIndex,
onFocusMoved: target => {
target.focus();
setNextFocusIndex(null);
},
listItemSelector: `.${tokenListStyles['list-item']}`,
showMoreSelector: `.${tokenListStyles.toggle}`,
});
const baseProps = getBaseProps(props);
const hasItems = items.length > 0;
const mergedRef = useMergeRefs(__internalRootRef, tokenListRef);
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root, hasItems && styles['has-items'], disableOuterPadding && styles['no-padding']), ref: mergedRef },
React.createElement(TokenList, { alignment: alignment, items: items, limit: limit, renderItem: (item, itemIndex) => (React.createElement(InternalToken, { ...item, label: item.label, key: itemIndex, onDismiss: () => {
fireNonCancelableEvent(onDismiss, { itemIndex });
setNextFocusIndex(itemIndex);
}, readOnly: readOnly || (isItemReadOnly === null || isItemReadOnly === void 0 ? void 0 : isItemReadOnly(item)), variant: 'normal', icon: item.iconName || item.iconUrl || item.iconSvg ? (React.createElement(InternalIcon, { name: item.iconName, svg: item.iconSvg, url: item.iconUrl, ariaLabel: item.iconAlt, size: 'normal' })) : undefined, ...(item.disabled || readOnly
? {}
: getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } })) })), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, onExpandedClick: isExpanded => {
if (isExpanded && limit) {
setNextFocusIndex(limit);
}
else {
setNextFocusIndex(null);
}
} })));
}
//# sourceMappingURL=internal.js.map