@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
27 lines • 1.94 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 FocusLock from '../../../../internal/components/focus-lock';
import { fireCancelableEvent, isPlainLeftClick } from '../../../../internal/events';
import { useUniqueId } from '../../../../internal/hooks/use-unique-id';
import Header from '../header';
import { SubmenuItem } from '../menu-item';
import { useNavigate } from '../router';
import styles from '../../../styles.css.js';
const SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, dismissIconAriaLabel, backIconAriaLabel, definition, }) => {
const navigate = useNavigate();
const headerId = useUniqueId('overflow-menu-header');
return (React.createElement(FocusLock, { autoFocus: true },
React.createElement(Header, { secondaryText: headerSecondaryText, dismissIconAriaLabel: dismissIconAriaLabel, backIconAriaLabel: backIconAriaLabel, onClose: onClose, onBack: () => navigate('utilities', { utilityIndex }) },
React.createElement("span", { id: headerId }, headerText)),
React.createElement("ul", { className: clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu']), "aria-labelledby": headerId }, definition.items.map((item, index) => (React.createElement(SubmenuItem, Object.assign({ key: index }, item, { onClick: (event, item) => {
if (item.href && isPlainLeftClick(event)) {
fireCancelableEvent(definition.onItemFollow, { id: item.id, href: item.href, external: item.external }, event);
}
fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external }, event);
onClose === null || onClose === void 0 ? void 0 : onClose();
} })))))));
};
export default SubmenuView;
//# sourceMappingURL=submenu.js.map