@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
49 lines • 3.2 kB
JavaScript
import { __rest } from "tslib";
// 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 { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import Option from '../internal/components/option';
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 { useMergeRefs } from '../internal/hooks/use-merge-refs';
import { Token } from './token';
import tokenListStyles from '../internal/components/token-list/styles.css.js';
import styles from './styles.css.js';
export default function InternalTokenGroup(_a) {
var { alignment, items, onDismiss, limit, i18nStrings, disableOuterPadding, limitShowFewerAriaLabel, limitShowMoreAriaLabel, readOnly, __internalRootRef } = _a, props = __rest(_a, ["alignment", "items", "onDismiss", "limit", "i18nStrings", "disableOuterPadding", "limitShowFewerAriaLabel", "limitShowMoreAriaLabel", "readOnly", "__internalRootRef"]);
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", Object.assign({}, 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(Token, Object.assign({ ariaLabel: item.label, dismissLabel: item.dismissLabel, onDismiss: () => {
fireNonCancelableEvent(onDismiss, { itemIndex });
setNextFocusIndex(itemIndex);
}, disabled: item.disabled, readOnly: readOnly }, (item.disabled || readOnly
? {}
: getAnalyticsMetadataAttribute({ detail: { position: `${itemIndex + 1}` } }))),
React.createElement(Option, { option: item, isGenericGroup: false }))), i18nStrings: i18nStrings, limitShowFewerAriaLabel: limitShowFewerAriaLabel, limitShowMoreAriaLabel: limitShowMoreAriaLabel, onExpandedClick: isExpanded => {
if (isExpanded && limit) {
setNextFocusIndex(limit);
}
else {
setNextFocusIndex(null);
}
} })));
}
//# sourceMappingURL=internal.js.map