@cloudscape-design/components 3.0.0

package/top-navigation/index.js

@@ -0,0 +1,14 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import InternalTopNavigation from './internal';
+export default function TopNavigation(_a) {
+    var _b = _a.utilities, utilities = _b === void 0 ? [] : _b, restProps = __rest(_a, ["utilities"]);
+    var baseComponentProps = useBaseComponent('TopNavigation');
+    return React.createElement(InternalTopNavigation, __assign({}, baseComponentProps, { utilities: utilities }, restProps));
+}
+applyDisplayName(TopNavigation, 'TopNavigation');
+//# sourceMappingURL=index.js.map

package/top-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/top-navigation/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,OAAO,qBAAqB,MAAM,YAAY,CAAC;AAI/C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAoD;IAAlD,IAAA,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EAAK,SAAS,cAA9B,aAAgC,CAAF;IAClE,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAC7D,OAAO,oBAAC,qBAAqB,eAAK,kBAAkB,IAAE,SAAS,EAAE,SAAS,IAAM,SAAS,EAAI,CAAC;AAChG,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { TopNavigationProps } from './interfaces';\nimport InternalTopNavigation from './internal';\n\nexport { TopNavigationProps };\n\nexport default function TopNavigation({ utilities = [], ...restProps }: TopNavigationProps) {\n  const baseComponentProps = useBaseComponent('TopNavigation');\n  return <InternalTopNavigation {...baseComponentProps} utilities={utilities} {...restProps} />;\n}\n\napplyDisplayName(TopNavigation, 'TopNavigation');\n"]}

package/top-navigation/interfaces.d.ts

@@ -0,0 +1,105 @@
+import { CancelableEventHandler } from '../internal/events';
+import { BaseComponentProps } from '../internal/base-component';
+import { IconProps } from '../icon/interfaces';
+import { ButtonDropdownProps } from '../button-dropdown/interfaces';
+export interface TopNavigationProps extends BaseComponentProps {
+    /**
+     * Properties describing the product identity. They are as follows:
+     *
+     * * `title` (string) - Specifies the title text.
+     * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product.
+     * * `href` (string) - Specifies the `href` that the header links to.
+     * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.
+     */
+    identity: TopNavigationProps.Identity;
+    /**
+     * Use with an input or autosuggest control for a global search query.
+     */
+    search?: React.ReactNode;
+    /**
+     * A list of utility navigation elements.
+     * The supported utility types are: `button` and `menu-dropdown`.
+     *
+     * The following properties are supported across all utility types:
+     *
+     * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.
+     * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.
+     * * `title` (string) - The title displayed inside the dropdown.
+     * * `iconName` (string) - The name of an existing icon to display next to the utility.
+     * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.
+     * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.
+     * * `iconSvg` (string) - Specifies the SVG of a custom icon.
+     * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.
+     * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
+     * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.
+     * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.
+     *
+     * ### button
+     *
+     * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.
+     * * `href` (string) - Specifies the `href` for a link styled as a button.
+     * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.
+     * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.
+     * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.
+     *
+     * ### menu-dropdown
+     *
+     * * `description` (string) - The description displayed inside the dropdown.
+     * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).
+     * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
+     */
+    utilities?: ReadonlyArray<TopNavigationProps.Utility>;
+    /**
+     * An object containing all the localized strings required by the component.
+     */
+    i18nStrings: TopNavigationProps.I18nStrings;
+}
+export declare namespace TopNavigationProps {
+    export interface Identity {
+        title?: string;
+        logo?: Logo;
+        href: string;
+        onFollow?: CancelableEventHandler;
+    }
+    export interface Logo {
+        src: string;
+        alt?: string;
+    }
+    interface BaseUtility {
+        text?: string;
+        title?: string;
+        iconName?: IconProps.Name;
+        iconUrl?: string;
+        iconAlt?: string;
+        iconSvg?: React.ReactNode;
+        ariaLabel?: string;
+        badge?: boolean;
+        disableUtilityCollapse?: boolean;
+        disableTextCollapse?: boolean;
+    }
+    export interface MenuDropdownUtility extends BaseUtility {
+        type: 'menu-dropdown';
+        description?: string;
+        items: ButtonDropdownProps.Items;
+        onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
+    }
+    export interface ButtonUtility extends BaseUtility {
+        type: 'button';
+        variant?: 'primary-button' | 'link';
+        onClick?: CancelableEventHandler;
+        href?: string;
+        external?: boolean;
+        externalIconAriaLabel?: string;
+    }
+    export type Utility = MenuDropdownUtility | ButtonUtility;
+    export interface I18nStrings {
+        searchIconAriaLabel?: string;
+        searchDismissIconAriaLabel?: string;
+        overflowMenuDismissIconAriaLabel?: string;
+        overflowMenuBackIconAriaLabel?: string;
+        overflowMenuTriggerText: string;
+        overflowMenuTitleText: string;
+    }
+    export {};
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/top-navigation/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+BG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC7C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC5E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,EAAE,MAAM,CAAC;QAChC,qBAAqB,EAAE,MAAM,CAAC;KAC/B;;CACF"}

package/top-navigation/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/top-navigation/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n  /**\n   * Properties describing the product identity. They are as follows:\n   *\n   * * `title` (string) - Specifies the title text.\n   * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product.\n   * * `href` (string) - Specifies the `href` that the header links to.\n   * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n   */\n  identity: TopNavigationProps.Identity;\n\n  /**\n   * Use with an input or autosuggest control for a global search query.\n   */\n  search?: React.ReactNode;\n\n  /**\n   * A list of utility navigation elements.\n   * The supported utility types are: `button` and `menu-dropdown`.\n   *\n   * The following properties are supported across all utility types:\n   *\n   * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n   * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n   * * `title` (string) - The title displayed inside the dropdown.\n   * * `iconName` (string) - The name of an existing icon to display next to the utility.\n   * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n   * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n   * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n   * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n   * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n   *\n   * ### button\n   *\n   * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n   * * `href` (string) - Specifies the `href` for a link styled as a button.\n   * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n   * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n   * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n   *\n   * ### menu-dropdown\n   *\n   * * `description` (string) - The description displayed inside the dropdown.\n   * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n   * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   */\n  i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n  export interface Identity {\n    title?: string;\n    logo?: Logo;\n    href: string;\n    onFollow?: CancelableEventHandler;\n  }\n\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n\n  interface BaseUtility {\n    text?: string;\n    title?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconAlt?: string;\n    iconSvg?: React.ReactNode;\n    ariaLabel?: string;\n\n    badge?: boolean;\n    disableUtilityCollapse?: boolean;\n    disableTextCollapse?: boolean;\n  }\n\n  export interface MenuDropdownUtility extends BaseUtility {\n    type: 'menu-dropdown';\n    description?: string;\n    items: ButtonDropdownProps.Items;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    href?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n  }\n\n  export type Utility = MenuDropdownUtility | ButtonUtility;\n\n  export interface I18nStrings {\n    searchIconAriaLabel?: string;\n    searchDismissIconAriaLabel?: string;\n    overflowMenuDismissIconAriaLabel?: string;\n    overflowMenuBackIconAriaLabel?: string;\n    overflowMenuTriggerText: string;\n    overflowMenuTitleText: string;\n  }\n}\n"]}

package/top-navigation/internal.d.ts

@@ -0,0 +1,6 @@
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { TopNavigationProps } from './interfaces';
+import { SomeRequired } from '../internal/types';
+export declare type InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities'> & InternalBaseComponentProps;
+export default function InternalTopNavigation({ __internalRootRef, identity, i18nStrings, utilities, search, ...restProps }: InternalTopNavigationProps): JSX.Element;
+//# sourceMappingURL=internal.d.ts.map

package/top-navigation/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAQlD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,oBAAY,0BAA0B,GAAG,YAAY,CAAC,kBAAkB,EAAE,WAAW,CAAC,GAAG,0BAA0B,CAAC;AAEpH,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,MAAM,EACN,GAAG,SAAS,EACb,EAAE,0BAA0B,eA2N5B"}

package/top-navigation/internal.js

@@ -0,0 +1,136 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
+import VisualContext from '../internal/components/visual-context';
+import Portal from '../internal/components/portal';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
+import { useTopNavigation } from './use-top-navigation.js';
+import Utility from './parts/utility';
+import OverflowMenu from './parts/overflow-menu';
+import { ButtonTrigger } from '../internal/components/menu-dropdown';
+import styles from './styles.css.js';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
+export default function InternalTopNavigation(_a) {
+    var __internalRootRef = _a.__internalRootRef, identity = _a.identity, i18nStrings = _a.i18nStrings, utilities = _a.utilities, search = _a.search, restProps = __rest(_a, ["__internalRootRef", "identity", "i18nStrings", "utilities", "search"]);
+    checkSafeUrl('TopNavigation', identity.href);
+    var baseProps = getBaseProps(restProps);
+    var _b = useTopNavigation({ identity: identity, search: search, utilities: utilities }), mainRef = _b.mainRef, virtualRef = _b.virtualRef, breakpoint = _b.breakpoint, responsiveState = _b.responsiveState, isSearchExpanded = _b.isSearchExpanded, onSearchUtilityClick = _b.onSearchUtilityClick;
+    var _c = useState(false), overflowMenuOpen = _c[0], setOverflowMenuOpen = _c[1];
+    var overflowMenuTriggerRef = useRef(null);
+    var isNarrowViewport = breakpoint === 'default';
+    var isMediumViewport = breakpoint === 'xxs';
+    var isLargeViewport = breakpoint === 's';
+    var onIdentityClick = function (event) {
+        if (isPlainLeftClick(event)) {
+            fireCancelableEvent(identity.onFollow, {}, event);
+        }
+    };
+    var toggleOverflowMenu = function () {
+        setOverflowMenuOpen(function (overflowMenuOpen) { return !overflowMenuOpen; });
+    };
+    var focusVisible = useFocusVisible();
+    var menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities;
+    useEffect(function () {
+        setOverflowMenuOpen(false);
+    }, [menuTriggerVisible]);
+    useEffectOnUpdate(function () {
+        var _a;
+        if (!overflowMenuOpen) {
+            (_a = overflowMenuTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [overflowMenuOpen]);
+    // Render the top nav twice; once as the top nav that users can see, and another
+    // "virtual" top nav used just for calculations. The virtual top nav doesn't react to
+    // layout changes and renders two sets of utilities: one with labels and one without.
+    var content = function (isVirtual) {
+        var _a, _b, _c, _d;
+        var _e, _f;
+        var Wrapper = isVirtual ? 'div' : 'header';
+        var showIdentity = isVirtual || !isSearchExpanded;
+        var showTitle = isVirtual || !responsiveState.hideTitle;
+        var showSearchSlot = search && (isVirtual || !responsiveState.hideSearch || isSearchExpanded);
+        var showSearchUtility = isVirtual || (search && responsiveState.hideSearch);
+        var showUtilities = isVirtual || !isSearchExpanded;
+        var showMenuTrigger = isVirtual || menuTriggerVisible;
+        return (React.createElement(Wrapper, { ref: isVirtual ? virtualRef : mainRef, "aria-hidden": isVirtual ? true : undefined, 
+            // Wrapper is an alias for "div" or "header".
+            // eslint-disable-next-line react/forbid-component-props
+            className: clsx(styles['top-navigation'], (_a = {},
+                _a[styles.virtual] = isVirtual,
+                _a[styles.hidden] = isVirtual,
+                _a[styles.narrow] = isNarrowViewport,
+                _a[styles.medium] = isMediumViewport,
+                _a)) },
+            React.createElement("div", { className: styles['padding-box'] },
+                showIdentity && (React.createElement("div", { className: clsx(styles.identity, !identity.logo && styles['no-logo']) },
+                    React.createElement("a", __assign({}, focusVisible, { className: styles['identity-link'], href: identity.href, onClick: onIdentityClick }),
+                        identity.logo && (React.createElement("img", { role: "img", src: (_e = identity.logo) === null || _e === void 0 ? void 0 : _e.src, alt: (_f = identity.logo) === null || _f === void 0 ? void 0 : _f.alt, className: clsx(styles.logo, (_b = {},
+                                _b[styles.narrow] = isNarrowViewport,
+                                _b)) })),
+                        showTitle && React.createElement("span", { className: styles.title }, identity.title)))),
+                React.createElement("div", { className: styles.inputs }, showSearchSlot && (React.createElement("div", { className: clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded']) }, search))),
+                React.createElement("div", { className: styles.utilities },
+                    showSearchUtility && (React.createElement("div", { className: clsx(styles['utility-wrapper'], styles['utility-type-button'], styles['utility-type-button-link'], (_c = {},
+                            _c[styles.narrow] = isNarrowViewport,
+                            _c[styles.medium] = isMediumViewport,
+                            _c)), "data-utility-special": "search" },
+                        React.createElement(Utility, { hideText: true, definition: {
+                                type: 'button',
+                                iconName: isSearchExpanded ? 'close' : 'search',
+                                ariaLabel: isSearchExpanded
+                                    ? i18nStrings.searchDismissIconAriaLabel
+                                    : i18nStrings.searchIconAriaLabel,
+                                onClick: onSearchUtilityClick
+                            } }))),
+                    showUtilities &&
+                        utilities
+                            .filter(function (_utility, i) {
+                            return isVirtual || !responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) === -1;
+                        })
+                            .map(function (utility, i) {
+                            var _a;
+                            var _b;
+                            var hideText = !!responsiveState.hideUtilityText;
+                            var isLast = (isVirtual || !showMenuTrigger) && i === utilities.length - 1;
+                            var offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;
+                            return (React.createElement("div", { key: i, className: clsx(styles['utility-wrapper'], styles["utility-type-".concat(utility.type)], utility.type === 'button' && styles["utility-type-button-".concat((_b = utility.variant) !== null && _b !== void 0 ? _b : 'link')], (_a = {},
+                                    _a[styles.narrow] = isNarrowViewport,
+                                    _a[styles.medium] = isMediumViewport,
+                                    _a)), "data-utility-index": i, "data-utility-hide": "".concat(hideText) },
+                                React.createElement(Utility, { hideText: hideText, definition: utility, offsetRight: offsetRight })));
+                        }),
+                    isVirtual &&
+                        utilities.map(function (utility, i) {
+                            var _a;
+                            var _b;
+                            var hideText = !responsiveState.hideUtilityText;
+                            var isLast = !showMenuTrigger && i === utilities.length - 1;
+                            var offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;
+                            return (React.createElement("div", { key: i, className: clsx(styles['utility-wrapper'], styles["utility-type-".concat(utility.type)], utility.type === 'button' && styles["utility-type-button-".concat((_b = utility.variant) !== null && _b !== void 0 ? _b : 'link')], (_a = {},
+                                    _a[styles.narrow] = isNarrowViewport,
+                                    _a[styles.medium] = isMediumViewport,
+                                    _a)), "data-utility-index": i, "data-utility-hide": "".concat(hideText) },
+                                React.createElement(Utility, { hideText: hideText, definition: utility, offsetRight: offsetRight })));
+                        }),
+                    showMenuTrigger && (React.createElement("div", { className: clsx(styles['utility-wrapper'], styles['utility-type-menu-dropdown'], (_d = {},
+                            _d[styles.narrow] = isNarrowViewport,
+                            _d[styles.medium] = isMediumViewport,
+                            _d)), "data-utility-special": "menu-trigger" },
+                        React.createElement(ButtonTrigger, { expanded: overflowMenuOpen, onClick: toggleOverflowMenu, offsetRight: "l", ref: !isVirtual ? overflowMenuTriggerRef : undefined }, i18nStrings.overflowMenuTriggerText)))))));
+    };
+    return (React.createElement("div", __assign({}, baseProps, { ref: __internalRootRef }),
+        React.createElement(VisualContext, { contextName: "top-navigation" },
+            content(false),
+            React.createElement(Portal, null, content(true)),
+            menuTriggerVisible && overflowMenuOpen && (React.createElement("div", { className: styles['overflow-menu-drawer'] },
+                React.createElement(OverflowMenu, { headerText: i18nStrings.overflowMenuTitleText, dismissIconAriaLabel: i18nStrings.overflowMenuDismissIconAriaLabel, backIconAriaLabel: i18nStrings.overflowMenuBackIconAriaLabel, items: utilities.filter(function (utility, i) {
+                        return (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) !== -1) &&
+                            !utility.disableUtilityCollapse;
+                    }), onClose: toggleOverflowMenu }))))));
+}
+//# sourceMappingURL=internal.js.map

package/top-navigation/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/top-navigation/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport VisualContext from '../internal/components/visual-context';\nimport Portal from '../internal/components/portal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\n\nimport { TopNavigationProps } from './interfaces';\nimport { useTopNavigation } from './use-top-navigation.js';\nimport Utility from './parts/utility';\nimport OverflowMenu from './parts/overflow-menu';\nimport { ButtonTrigger } from '../internal/components/menu-dropdown';\n\nimport styles from './styles.css.js';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { SomeRequired } from '../internal/types';\n\nexport type InternalTopNavigationProps = SomeRequired<TopNavigationProps, 'utilities'> & InternalBaseComponentProps;\n\nexport default function InternalTopNavigation({\n  __internalRootRef,\n  identity,\n  i18nStrings,\n  utilities,\n  search,\n  ...restProps\n}: InternalTopNavigationProps) {\n  checkSafeUrl('TopNavigation', identity.href);\n  const baseProps = getBaseProps(restProps);\n  const { mainRef, virtualRef, breakpoint, responsiveState, isSearchExpanded, onSearchUtilityClick } = useTopNavigation(\n    { identity, search, utilities }\n  );\n  const [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n  const overflowMenuTriggerRef = useRef<HTMLButtonElement>(null);\n  const isNarrowViewport = breakpoint === 'default';\n  const isMediumViewport = breakpoint === 'xxs';\n  const isLargeViewport = breakpoint === 's';\n\n  const onIdentityClick = (event: React.MouseEvent) => {\n    if (isPlainLeftClick(event)) {\n      fireCancelableEvent(identity.onFollow, {}, event);\n    }\n  };\n\n  const toggleOverflowMenu = () => {\n    setOverflowMenuOpen(overflowMenuOpen => !overflowMenuOpen);\n  };\n\n  const focusVisible = useFocusVisible();\n  const menuTriggerVisible = !isSearchExpanded && responsiveState.hideUtilities;\n\n  useEffect(() => {\n    setOverflowMenuOpen(false);\n  }, [menuTriggerVisible]);\n\n  useEffectOnUpdate(() => {\n    if (!overflowMenuOpen) {\n      overflowMenuTriggerRef.current?.focus();\n    }\n  }, [overflowMenuOpen]);\n\n  // Render the top nav twice; once as the top nav that users can see, and another\n  // \"virtual\" top nav used just for calculations. The virtual top nav doesn't react to\n  // layout changes and renders two sets of utilities: one with labels and one without.\n  const content = (isVirtual: boolean) => {\n    const Wrapper = isVirtual ? 'div' : 'header';\n    const showIdentity = isVirtual || !isSearchExpanded;\n    const showTitle = isVirtual || !responsiveState.hideTitle;\n    const showSearchSlot = search && (isVirtual || !responsiveState.hideSearch || isSearchExpanded);\n    const showSearchUtility = isVirtual || (search && responsiveState.hideSearch);\n    const showUtilities = isVirtual || !isSearchExpanded;\n    const showMenuTrigger = isVirtual || menuTriggerVisible;\n\n    return (\n      <Wrapper\n        ref={isVirtual ? virtualRef : mainRef}\n        aria-hidden={isVirtual ? true : undefined}\n        // Wrapper is an alias for \"div\" or \"header\".\n        // eslint-disable-next-line react/forbid-component-props\n        className={clsx(styles['top-navigation'], {\n          [styles.virtual]: isVirtual,\n          [styles.hidden]: isVirtual,\n          [styles.narrow]: isNarrowViewport,\n          [styles.medium]: isMediumViewport,\n        })}\n      >\n        <div className={styles['padding-box']}>\n          {showIdentity && (\n            <div className={clsx(styles.identity, !identity.logo && styles['no-logo'])}>\n              <a {...focusVisible} className={styles['identity-link']} href={identity.href} onClick={onIdentityClick}>\n                {identity.logo && (\n                  <img\n                    role=\"img\"\n                    src={identity.logo?.src}\n                    alt={identity.logo?.alt}\n                    className={clsx(styles.logo, {\n                      [styles.narrow]: isNarrowViewport,\n                    })}\n                  />\n                )}\n                {showTitle && <span className={styles.title}>{identity.title}</span>}\n              </a>\n            </div>\n          )}\n\n          <div className={styles.inputs}>\n            {showSearchSlot && (\n              <div className={clsx(styles.search, !isVirtual && isSearchExpanded && styles['search-expanded'])}>\n                {search}\n              </div>\n            )}\n          </div>\n\n          <div className={styles.utilities}>\n            {showSearchUtility && (\n              <div\n                className={clsx(\n                  styles['utility-wrapper'],\n                  styles['utility-type-button'],\n                  styles['utility-type-button-link'],\n                  {\n                    [styles.narrow]: isNarrowViewport,\n                    [styles.medium]: isMediumViewport,\n                  }\n                )}\n                data-utility-special=\"search\"\n              >\n                <Utility\n                  hideText={true}\n                  definition={{\n                    type: 'button',\n                    iconName: isSearchExpanded ? 'close' : 'search',\n                    ariaLabel: isSearchExpanded\n                      ? i18nStrings.searchDismissIconAriaLabel\n                      : i18nStrings.searchIconAriaLabel,\n                    onClick: onSearchUtilityClick,\n                  }}\n                />\n              </div>\n            )}\n\n            {showUtilities &&\n              utilities\n                .filter(\n                  (_utility, i) =>\n                    isVirtual || !responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) === -1\n                )\n                .map((utility, i) => {\n                  const hideText = !!responsiveState.hideUtilityText;\n                  const isLast = (isVirtual || !showMenuTrigger) && i === utilities.length - 1;\n                  const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n                  return (\n                    <div\n                      key={i}\n                      className={clsx(\n                        styles['utility-wrapper'],\n                        styles[`utility-type-${utility.type}`],\n                        utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n                        {\n                          [styles.narrow]: isNarrowViewport,\n                          [styles.medium]: isMediumViewport,\n                        }\n                      )}\n                      data-utility-index={i}\n                      data-utility-hide={`${hideText}`}\n                    >\n                      <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n                    </div>\n                  );\n                })}\n\n            {isVirtual &&\n              utilities.map((utility, i) => {\n                const hideText = !responsiveState.hideUtilityText;\n                const isLast = !showMenuTrigger && i === utilities.length - 1;\n                const offsetRight = isLast && isLargeViewport ? 'xxl' : isLast ? 'l' : undefined;\n\n                return (\n                  <div\n                    key={i}\n                    className={clsx(\n                      styles['utility-wrapper'],\n                      styles[`utility-type-${utility.type}`],\n                      utility.type === 'button' && styles[`utility-type-button-${utility.variant ?? 'link'}`],\n                      {\n                        [styles.narrow]: isNarrowViewport,\n                        [styles.medium]: isMediumViewport,\n                      }\n                    )}\n                    data-utility-index={i}\n                    data-utility-hide={`${hideText}`}\n                  >\n                    <Utility hideText={hideText} definition={utility} offsetRight={offsetRight} />\n                  </div>\n                );\n              })}\n\n            {showMenuTrigger && (\n              <div\n                className={clsx(styles['utility-wrapper'], styles['utility-type-menu-dropdown'], {\n                  [styles.narrow]: isNarrowViewport,\n                  [styles.medium]: isMediumViewport,\n                })}\n                data-utility-special=\"menu-trigger\"\n              >\n                <ButtonTrigger\n                  expanded={overflowMenuOpen}\n                  onClick={toggleOverflowMenu}\n                  offsetRight=\"l\"\n                  ref={!isVirtual ? overflowMenuTriggerRef : undefined}\n                >\n                  {i18nStrings.overflowMenuTriggerText}\n                </ButtonTrigger>\n              </div>\n            )}\n          </div>\n        </div>\n      </Wrapper>\n    );\n  };\n\n  return (\n    <div {...baseProps} ref={__internalRootRef}>\n      <VisualContext contextName=\"top-navigation\">\n        {content(false)}\n        <Portal>{content(true)}</Portal>\n        {menuTriggerVisible && overflowMenuOpen && (\n          <div className={styles['overflow-menu-drawer']}>\n            <OverflowMenu\n              headerText={i18nStrings.overflowMenuTitleText}\n              dismissIconAriaLabel={i18nStrings.overflowMenuDismissIconAriaLabel}\n              backIconAriaLabel={i18nStrings.overflowMenuBackIconAriaLabel}\n              items={utilities.filter(\n                (utility, i) =>\n                  (!responsiveState.hideUtilities || responsiveState.hideUtilities.indexOf(i) !== -1) &&\n                  !utility.disableUtilityCollapse\n              )}\n              onClose={toggleOverflowMenu}\n            />\n          </div>\n        )}\n      </VisualContext>\n    </div>\n  );\n}\n"]}

package/top-navigation/parts/overflow-menu/header.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface HeaderProps {
+    dismissIconAriaLabel?: string;
+    backIconAriaLabel?: string;
+    secondaryText?: string;
+    onClose?: () => void;
+    onBack?: () => void;
+    children: React.ReactNode;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;
+//# sourceMappingURL=header.d.ts.map

package/top-navigation/parts/overflow-menu/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,WAAW;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/top-navigation/parts/overflow-menu/header.js

@@ -0,0 +1,26 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import InternalButton from '../../../button/internal';
+import styles from '../../styles.css.js';
+var Header = function (_a) {
+    var children = _a.children, secondaryText = _a.secondaryText, backIconAriaLabel = _a.backIconAriaLabel, dismissIconAriaLabel = _a.dismissIconAriaLabel, onBack = _a.onBack, onClose = _a.onClose;
+    return (React.createElement("div", { className: styles['overflow-menu-header'] },
+        onBack && (React.createElement(InternalButton
+        // Used for test-utils, which require the selectable element to have a classname.
+        // eslint-disable-next-line react/forbid-component-props
+        , { 
+            // Used for test-utils, which require the selectable element to have a classname.
+            // eslint-disable-next-line react/forbid-component-props
+            className: styles['overflow-menu-back-button'], ariaLabel: backIconAriaLabel, iconName: "angle-left", variant: "icon", onClick: function () { return onBack(); } })),
+        React.createElement("h2", { className: styles['overflow-menu-header-text'] },
+            React.createElement("div", { className: styles['overflow-menu-header-text--title'] }, children),
+            secondaryText && React.createElement("div", { className: styles['overflow-menu-header-text--secondary'] }, secondaryText)),
+        React.createElement(InternalButton
+        // eslint-disable-next-line react/forbid-component-props
+        , { 
+            // eslint-disable-next-line react/forbid-component-props
+            className: styles['overflow-menu-dismiss-button'], ariaLabel: dismissIconAriaLabel, iconName: "close", variant: "icon", onClick: function () { return onClose && onClose(); } })));
+};
+export default Header;
+//# sourceMappingURL=header.js.map

package/top-navigation/parts/overflow-menu/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAUzC,IAAM,MAAM,GAA0B,UAAC,EAOtC;QANC,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,iBAAiB,uBAAA,EACjB,oBAAoB,0BAAA,EACpB,MAAM,YAAA,EACN,OAAO,aAAA;IAEP,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QAC3C,MAAM,IAAI,CACT,oBAAC,cAAc;QACb,iFAAiF;QACjF,wDAAwD;;YADxD,iFAAiF;YACjF,wDAAwD;YACxD,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,EAC9C,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAM,OAAA,MAAM,EAAE,EAAR,CAAQ,GACvB,CACH;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC;YAChD,6BAAK,SAAS,EAAE,MAAM,CAAC,kCAAkC,CAAC,IAAG,QAAQ,CAAO;YAC3E,aAAa,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,sCAAsC,CAAC,IAAG,aAAa,CAAO,CACpG;QACL,oBAAC,cAAc;QACb,wDAAwD;;YAAxD,wDAAwD;YACxD,SAAS,EAAE,MAAM,CAAC,8BAA8B,CAAC,EACjD,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAM,OAAA,OAAO,IAAI,OAAO,EAAE,EAApB,CAAoB,GACnC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport InternalButton from '../../../button/internal';\nimport styles from '../../styles.css.js';\nexport interface HeaderProps {\n  dismissIconAriaLabel?: string;\n  backIconAriaLabel?: string;\n  secondaryText?: string;\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n}\n\nconst Header: React.FC<HeaderProps> = ({\n  children,\n  secondaryText,\n  backIconAriaLabel,\n  dismissIconAriaLabel,\n  onBack,\n  onClose,\n}) => {\n  return (\n    <div className={styles['overflow-menu-header']}>\n      {onBack && (\n        <InternalButton\n          // Used for test-utils, which require the selectable element to have a classname.\n          // eslint-disable-next-line react/forbid-component-props\n          className={styles['overflow-menu-back-button']}\n          ariaLabel={backIconAriaLabel}\n          iconName=\"angle-left\"\n          variant=\"icon\"\n          onClick={() => onBack()}\n        />\n      )}\n      <h2 className={styles['overflow-menu-header-text']}>\n        <div className={styles['overflow-menu-header-text--title']}>{children}</div>\n        {secondaryText && <div className={styles['overflow-menu-header-text--secondary']}>{secondaryText}</div>}\n      </h2>\n      <InternalButton\n        // eslint-disable-next-line react/forbid-component-props\n        className={styles['overflow-menu-dismiss-button']}\n        ariaLabel={dismissIconAriaLabel}\n        iconName=\"close\"\n        variant=\"icon\"\n        onClick={() => onClose && onClose()}\n      />\n    </div>\n  );\n};\n\nexport default Header;\n"]}

package/top-navigation/parts/overflow-menu/index.d.ts

@@ -0,0 +1,15 @@
+import { HeaderProps } from './header';
+import { TopNavigationProps } from '../../interfaces';
+interface OverflowMenuProps {
+    headerText?: string;
+    items?: TopNavigationProps['utilities'];
+    dismissIconAriaLabel?: HeaderProps['dismissIconAriaLabel'];
+    backIconAriaLabel?: HeaderProps['backIconAriaLabel'];
+    onClose?: HeaderProps['onClose'];
+}
+export interface View extends Omit<OverflowMenuProps, 'items'> {
+    headerSecondaryText?: HeaderProps['secondaryText'];
+}
+declare const OverflowMenu: ({ headerText, dismissIconAriaLabel, backIconAriaLabel, items, onClose, }: OverflowMenuProps) => JSX.Element;
+export default OverflowMenu;
+//# sourceMappingURL=index.d.ts.map

package/top-navigation/parts/overflow-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,UAAU,iBAAiB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAC3D,iBAAiB,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,IAAK,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC5D,mBAAmB,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,YAAY,6EAMf,iBAAiB,gBAyCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/top-navigation/parts/overflow-menu/index.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import Router, { Route } from './router';
+import UtilitiesView from './views/utilities';
+import SubmenuView from './views/submenu';
+import styles from '../../styles.css.js';
+var OverflowMenu = function (_a) {
+    var headerText = _a.headerText, dismissIconAriaLabel = _a.dismissIconAriaLabel, backIconAriaLabel = _a.backIconAriaLabel, _b = _a.items, items = _b === void 0 ? [] : _b, onClose = _a.onClose;
+    return (React.createElement("div", { className: styles['overflow-menu'], onKeyUp: function (event) {
+            if (event.key === 'Escape') {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        } },
+        React.createElement(Router, null,
+            React.createElement(Route, { view: "utilities", element: function (data) { return (React.createElement(UtilitiesView, { headerText: headerText, items: items, focusIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, dismissIconAriaLabel: dismissIconAriaLabel, backIconAriaLabel: backIconAriaLabel, onClose: onClose })); } }),
+            React.createElement(Route, { view: "dropdown-menu", element: function (data) { return (React.createElement(SubmenuView, { headerText: data === null || data === void 0 ? void 0 : data.headerText, headerSecondaryText: data === null || data === void 0 ? void 0 : data.headerSecondaryText, dismissIconAriaLabel: dismissIconAriaLabel, backIconAriaLabel: backIconAriaLabel, definition: data === null || data === void 0 ? void 0 : data.definition, utilityIndex: data === null || data === void 0 ? void 0 : data.utilityIndex, onClose: onClose })); } }))));
+};
+export default OverflowMenu;
+//# sourceMappingURL=index.js.map

package/top-navigation/parts/overflow-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAI1C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAczC,IAAM,YAAY,GAAG,UAAC,EAMF;QALlB,UAAU,gBAAA,EACV,oBAAoB,0BAAA,EACpB,iBAAiB,uBAAA,EACjB,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,OAAO,aAAA;IAEP,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,OAAO,EAAE,UAAA,KAAK;YACZ,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;aACb;QACH,CAAC;QAED,oBAAC,MAAM;YACL,oBAAC,KAAK,IACJ,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,UAAA,IAAI,IAAI,OAAA,CACf,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,EAC9B,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,GAChB,CACH,EATgB,CAShB,GACD;YACF,oBAAC,KAAK,IACJ,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,UAAA,IAAI,IAAI,OAAA,CACf,oBAAC,WAAW,IACV,UAAU,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAC5B,mBAAmB,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,EAC9C,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,EAC5B,YAAY,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,YAAY,EAChC,OAAO,EAAE,OAAO,GAChB,CACH,EAVgB,CAUhB,GACD,CACK,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport Router, { Route } from './router';\nimport UtilitiesView from './views/utilities';\nimport SubmenuView from './views/submenu';\n\nimport { HeaderProps } from './header';\n\nimport styles from '../../styles.css.js';\nimport { TopNavigationProps } from '../../interfaces';\ninterface OverflowMenuProps {\n  headerText?: string;\n  items?: TopNavigationProps['utilities'];\n  dismissIconAriaLabel?: HeaderProps['dismissIconAriaLabel'];\n  backIconAriaLabel?: HeaderProps['backIconAriaLabel'];\n  onClose?: HeaderProps['onClose'];\n}\n\nexport interface View extends Omit<OverflowMenuProps, 'items'> {\n  headerSecondaryText?: HeaderProps['secondaryText'];\n}\n\nconst OverflowMenu = ({\n  headerText,\n  dismissIconAriaLabel,\n  backIconAriaLabel,\n  items = [],\n  onClose,\n}: OverflowMenuProps) => {\n  return (\n    <div\n      className={styles['overflow-menu']}\n      onKeyUp={event => {\n        if (event.key === 'Escape') {\n          onClose?.();\n        }\n      }}\n    >\n      <Router>\n        <Route\n          view=\"utilities\"\n          element={data => (\n            <UtilitiesView\n              headerText={headerText}\n              items={items}\n              focusIndex={data?.utilityIndex}\n              dismissIconAriaLabel={dismissIconAriaLabel}\n              backIconAriaLabel={backIconAriaLabel}\n              onClose={onClose}\n            />\n          )}\n        />\n        <Route\n          view=\"dropdown-menu\"\n          element={data => (\n            <SubmenuView\n              headerText={data?.headerText}\n              headerSecondaryText={data?.headerSecondaryText}\n              dismissIconAriaLabel={dismissIconAriaLabel}\n              backIconAriaLabel={backIconAriaLabel}\n              definition={data?.definition}\n              utilityIndex={data?.utilityIndex}\n              onClose={onClose}\n            />\n          )}\n        />\n      </Router>\n    </div>\n  );\n};\n\nexport default OverflowMenu;\n"]}

package/top-navigation/parts/overflow-menu/menu-item.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonDropdownProps } from '../../../button-dropdown/interfaces';
+import { TopNavigationProps } from '../../interfaces';
+declare type UtilityMenuItemProps = TopNavigationProps.Utility & {
+    index: number;
+};
+export declare const UtilityMenuItem: React.ForwardRefExoticComponent<UtilityMenuItemProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
+declare type SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {
+    onItemClick: (item: ButtonDropdownProps.Item) => void;
+};
+export declare const SubmenuItem: (props: SubmenuItemProps) => JSX.Element;
+export {};
+//# sourceMappingURL=menu-item.d.ts.map

package/top-navigation/parts/overflow-menu/menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAQpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAI1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAkStD,aAAK,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3E,eAAO,MAAM,eAAe,oHAQ3B,CAAC;AAEF,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,GAAG;IAAE,WAAW,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,KAAK,IAAI,CAAA;CAAE,CAAC;AAEpH,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAclD,CAAC"}

package/top-navigation/parts/overflow-menu/menu-item.js

@@ -0,0 +1,131 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';
+import { useUniqueId } from '../../../internal/hooks/use-unique-id';
+import useFocusVisible from '../../../internal/hooks/focus-visible';
+import InternalIcon from '../../../icon/internal';
+import { useNavigate } from './router';
+import styles from '../../styles.css.js';
+var ListItem = function (_a) {
+    var children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon;
+    return (React.createElement(React.Fragment, null,
+        startIcon && React.createElement("span", { className: styles['overflow-menu-list-item-icon'] }, startIcon),
+        React.createElement("span", { className: styles['overflow-menu-list-item-text'] }, children),
+        endIcon && endIcon));
+};
+var LinkItem = forwardRef(function (_a, ref) {
+    var children = _a.children, external = _a.external, href = _a.href, startIcon = _a.startIcon, endIcon = _a.endIcon, onFollow = _a.onFollow, context = _a.context, testId = _a.testId;
+    var focusVisible = useFocusVisible();
+    var rel = external ? 'noopener noreferrer' : undefined;
+    var target = external ? '_blank' : undefined;
+    var anchorProps = {
+        rel: rel,
+        target: target,
+        href: href,
+        onClick: function (event) {
+            if (isPlainLeftClick(event)) {
+                onFollow === null || onFollow === void 0 ? void 0 : onFollow(event);
+            }
+        }
+    };
+    var buttonProps = {
+        role: 'button',
+        tabIndex: 0,
+        onKeyDown: function (event) {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        },
+        onKeyUp: function (event) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                onFollow === null || onFollow === void 0 ? void 0 : onFollow(event);
+            }
+        },
+        onClick: onFollow
+    };
+    return (React.createElement("a", __assign({ ref: ref, className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-link'], context && styles["overflow-menu-control-".concat(context)]) }, (typeof href === 'string' ? anchorProps : buttonProps), focusVisible, (testId ? { 'data-testid': testId } : {})),
+        React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
+});
+var ButtonItem = forwardRef(function (_a, ref) {
+    var children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onFollow, testId = _a.testId;
+    var focusVisible = useFocusVisible();
+    return (React.createElement("button", __assign({ ref: ref, className: styles['overflow-menu-control'], onClick: onClick }, focusVisible, (typeof testId === 'string' ? { 'data-testid': testId } : {})),
+        React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
+});
+var NavigationItem = forwardRef(function (_a, ref) {
+    var startIcon = _a.startIcon, children = _a.children, index = _a.index, testId = _a.testId, definition = __rest(_a, ["startIcon", "children", "index", "testId"]);
+    var navigate = useNavigate();
+    return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, endIcon: React.createElement(InternalIcon, { name: "angle-right" }), testId: testId, onFollow: function () {
+            return navigate('dropdown-menu', {
+                definition: definition,
+                headerText: definition.text || definition.title,
+                headerSecondaryText: definition.description,
+                utilityIndex: index
+            });
+        } }, children));
+});
+var ExpandableItem = function (_a) {
+    var children = _a.children, onItemClick = _a.onItemClick, definition = __rest(_a, ["children", "onItemClick"]);
+    var focusVisible = useFocusVisible();
+    var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
+    var headerId = useUniqueId('overflow-menu-item');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", __assign({ className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger']), onClick: function () { return setExpanded(function (value) { return !value; }); }, "aria-expanded": expanded }, focusVisible),
+            React.createElement(ListItem, { endIcon: React.createElement("span", { className: clsx(styles.icon, expanded && styles.expanded) },
+                    React.createElement(InternalIcon, { name: "caret-up-filled" })) },
+                React.createElement("span", { id: headerId }, children))),
+        expanded && (React.createElement("ul", { className: clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu']), "aria-labelledby": headerId }, definition.items.map(function (item, index) {
+            var isGroup = typeof item.items !== 'undefined';
+            return (React.createElement("li", { key: index, className: clsx(styles["overflow-menu-list-item"], styles["overflow-menu-list-item-dropdown-menu"]) }, dropdownComponentFactory(item, isGroup, onItemClick)));
+        })))));
+};
+function utilityComponentFactory(utility, index, ref) {
+    var label = utility.text || utility.title;
+    var hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;
+    var startIcon = hasIcon && (React.createElement(InternalIcon, { name: utility.iconName, url: utility.iconUrl, alt: utility.iconAlt, svg: utility.iconSvg }));
+    switch (utility.type) {
+        case 'button': {
+            var handleClick = function (event) {
+                fireCancelableEvent(utility.onClick, {}, event);
+            };
+            if (utility.variant === 'primary-button') {
+                return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, onFollow: handleClick, testId: "__".concat(index) }, label));
+            }
+            return (React.createElement(LinkItem, { ref: ref, startIcon: startIcon, href: utility.href, external: utility.external, testId: "__".concat(index), onFollow: handleClick },
+                label,
+                utility.external && (React.createElement(React.Fragment, null,
+                    ' ',
+                    React.createElement("span", { "aria-label": utility.externalIconAriaLabel, role: utility.externalIconAriaLabel ? 'img' : undefined },
+                        React.createElement(InternalIcon, { name: "external", size: "normal" }))))));
+        }
+        case 'menu-dropdown': {
+            return (React.createElement(NavigationItem, __assign({ ref: ref, startIcon: startIcon, index: index }, utility, { testId: "__".concat(index) }), label));
+        }
+    }
+}
+function dropdownComponentFactory(item, expandable, onItemClick) {
+    var label = item.text;
+    var hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;
+    var startIcon = hasIcon && (React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, alt: item.iconAlt, svg: item.iconSvg }));
+    if (expandable) {
+        return (React.createElement(ExpandableItem, __assign({}, item, { onItemClick: onItemClick }), label));
+    }
+    return (React.createElement(LinkItem, { startIcon: startIcon, href: item.href, external: item.external, context: "dropdown-menu", testId: item.id, onFollow: function () { return onItemClick(item); } },
+        label,
+        item.external && (React.createElement(React.Fragment, null,
+            ' ',
+            React.createElement("span", { "aria-label": item.externalIconAriaLabel, role: item.externalIconAriaLabel ? 'img' : undefined },
+                React.createElement(InternalIcon, { name: "external", size: "normal" }))))));
+}
+export var UtilityMenuItem = forwardRef(function (_a, ref) {
+    var index = _a.index, props = __rest(_a, ["index"]);
+    return (React.createElement("li", { className: clsx(styles["overflow-menu-list-item"], styles["overflow-menu-list-item-utility"]) }, utilityComponentFactory(props, index, ref)));
+});
+export var SubmenuItem = function (props) {
+    var expandable = typeof props.items !== 'undefined';
+    return (React.createElement("li", { className: clsx(styles["overflow-menu-list-item"], styles["overflow-menu-list-item-submenu"], expandable && styles["overflow-menu-list-item-expandable"]) }, dropdownComponentFactory(props, expandable, props.onItemClick)));
+};
+//# sourceMappingURL=menu-item.js.map