@cloudscape-design/components 3.0.221 → 3.0.223

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

@@ -3,8 +3,7 @@
 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;
+const Header = ({ children, secondaryText, backIconAriaLabel, dismissIconAriaLabel, onBack, 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.
@@ -12,7 +11,7 @@ var Header = function (_a) {
         , { 
             // 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(); } })),
+            className: styles['overflow-menu-back-button'], ariaLabel: backIconAriaLabel, iconName: "angle-left", variant: "icon", onClick: () => 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)),
@@ -20,7 +19,7 @@ var Header = function (_a) {
         // 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(); } })));
+            className: styles['overflow-menu-dismiss-button'], ariaLabel: dismissIconAriaLabel, iconName: "close", variant: "icon", onClick: () => onClose && onClose() })));
 };
 export default Header;
 //# sourceMappingURL=header.js.map

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

@@ -1 +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"]}
+{"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,MAAM,MAAM,GAA0B,CAAC,EACrC,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,EACN,OAAO,GACR,EAAE,EAAE;IACH,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,GAAG,EAAE,CAAC,MAAM,EAAE,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,GAAG,EAAE,CAAC,OAAO,IAAI,OAAO,EAAE,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.js

@@ -5,16 +5,15 @@ 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) {
+const OverflowMenu = ({ headerText, dismissIconAriaLabel, backIconAriaLabel, items = [], onClose, }) => {
+    return (React.createElement("div", { className: styles['overflow-menu'], onKeyUp: 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 })); } }))));
+            React.createElement(Route, { view: "utilities", element: data => (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: data => (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

@@ -1 +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"]}
+{"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,MAAM,YAAY,GAAG,CAAC,EACpB,UAAU,EACV,oBAAoB,EACpB,iBAAiB,EACjB,KAAK,GAAG,EAAE,EACV,OAAO,GACW,EAAE,EAAE;IACtB,OAAO,CACL,6BACE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,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,IAAI,CAAC,EAAE,CAAC,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,GACD;YACF,oBAAC,KAAK,IACJ,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,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,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.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __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';
@@ -9,92 +9,87 @@ 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;
+const ListItem = ({ children, startIcon, 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) {
+const LinkItem = forwardRef(({ children, external, href, startIcon, endIcon, onFollow, context, testId }, ref) => {
+    const focusVisible = useFocusVisible();
+    const rel = external ? 'noopener noreferrer' : undefined;
+    const target = external ? '_blank' : undefined;
+    const anchorProps = {
+        rel,
+        target,
+        href,
+        onClick(event) {
             if (isPlainLeftClick(event)) {
                 onFollow === null || onFollow === void 0 ? void 0 : onFollow(event);
             }
-        }
+        },
     };
-    var buttonProps = {
+    const buttonProps = {
         role: 'button',
         tabIndex: 0,
-        onKeyDown: function (event) {
+        onKeyDown(event) {
             if (event.key === ' ') {
                 event.preventDefault();
             }
         },
-        onKeyUp: function (event) {
+        onKeyUp(event) {
             if (event.key === ' ' || event.key === 'Enter') {
                 onFollow === null || onFollow === void 0 ? void 0 : onFollow(event);
             }
         },
-        onClick: onFollow
+        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 } : {})),
+    return (React.createElement("a", Object.assign({ ref: ref, className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-link'], context && styles[`overflow-menu-control-${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 } : {})),
+const ButtonItem = forwardRef(({ children, startIcon, endIcon, onFollow: onClick, testId }, ref) => {
+    const focusVisible = useFocusVisible();
+    return (React.createElement("button", Object.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));
+const NavigationItem = forwardRef((_a, ref) => {
+    var { startIcon, children, index, testId } = _a, definition = __rest(_a, ["startIcon", "children", "index", "testId"]);
+    const navigate = useNavigate();
+    return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, endIcon: React.createElement(InternalIcon, { name: "angle-right" }), testId: testId, onFollow: () => navigate('dropdown-menu', {
+            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');
+const ExpandableItem = (_a) => {
+    var { children, onItemClick } = _a, definition = __rest(_a, ["children", "onItemClick"]);
+    const focusVisible = useFocusVisible();
+    const [expanded, setExpanded] = useState(false);
+    const 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("button", Object.assign({ className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger']), onClick: () => setExpanded(value => !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)));
+        expanded && (React.createElement("ul", { className: clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu']), "aria-labelledby": headerId }, definition.items.map((item, index) => {
+            const 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 }));
+    const label = utility.text || utility.title;
+    const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;
+    const 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) {
+            const handleClick = (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(ButtonItem, { ref: ref, startIcon: startIcon, onFollow: handleClick, testId: `__${index}` }, label));
             }
-            return (React.createElement(LinkItem, { ref: ref, startIcon: startIcon, href: utility.href, external: utility.external, testId: "__".concat(index), onFollow: handleClick },
+            return (React.createElement(LinkItem, { ref: ref, startIcon: startIcon, href: utility.href, external: utility.external, testId: `__${index}`, onFollow: handleClick },
                 label,
                 utility.external && (React.createElement(React.Fragment, null,
                     ' ',
@@ -102,30 +97,30 @@ function utilityComponentFactory(utility, index, ref) {
                         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));
+            return (React.createElement(NavigationItem, Object.assign({ ref: ref, startIcon: startIcon, index: index }, utility, { testId: `__${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 }));
+    const label = item.text;
+    const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;
+    const 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(ExpandableItem, Object.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); } },
+    return (React.createElement(LinkItem, { startIcon: startIcon, href: item.href, external: item.external, context: "dropdown-menu", testId: item.id, onFollow: () => 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 const UtilityMenuItem = forwardRef((_a, ref) => {
+    var { index } = _a, 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)));
+export const SubmenuItem = (props) => {
+    const 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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport useFocusVisible from '../../../internal/hooks/focus-visible';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, startIcon, endIcon, onFollow, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n    const rel = external ? 'noopener noreferrer' : undefined;\n    const target = external ? '_blank' : undefined;\n\n    const anchorProps = {\n      rel,\n      target,\n      href,\n      onClick(event: React.MouseEvent) {\n        if (isPlainLeftClick(event)) {\n          onFollow?.(event);\n        }\n      },\n    };\n\n    const buttonProps = {\n      role: 'button',\n      tabIndex: 0,\n      onKeyDown(event: React.KeyboardEvent) {\n        if (event.key === ' ') {\n          event.preventDefault();\n        }\n      },\n      onKeyUp(event: React.KeyboardEvent) {\n        if (event.key === ' ' || event.key === 'Enter') {\n          onFollow?.(event);\n        }\n      },\n      onClick: onFollow,\n    };\n\n    return (\n      <a\n        ref={ref}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        {...(typeof href === 'string' ? anchorProps : buttonProps)}\n        {...focusVisible}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onFollow?: (event: React.SyntheticEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onFollow: onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...focusVisible}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onFollow={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps & ButtonDropdownProps.ItemGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const focusVisible = useFocusVisible();\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n        {...focusVisible}\n      >\n        <ListItem\n          endIcon={\n            <span className={clsx(styles.icon, expanded && styles.expanded)}>\n              <InternalIcon name=\"caret-up-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility,\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: Event | React.SyntheticEvent) => {\n        fireCancelableEvent(utility.onClick, {}, event);\n      };\n\n      if (utility.variant === 'primary-button') {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onFollow={handleClick} testId={`__${index}`}>\n            {label}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          testId={`__${index}`}\n          onFollow={handleClick}\n        >\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={item.href}\n      external={item.external}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onFollow={() => onItemClick(item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void };\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onItemClick)}\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id';\nimport useFocusVisible from '../../../internal/hooks/focus-visible';\n\nimport { LinkProps } from '../../../link/interfaces';\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport InternalIcon from '../../../icon/internal';\n\nimport { useNavigate } from './router';\nimport { TopNavigationProps } from '../../interfaces';\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, startIcon, endIcon, onFollow, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n    const rel = external ? 'noopener noreferrer' : undefined;\n    const target = external ? '_blank' : undefined;\n\n    const anchorProps = {\n      rel,\n      target,\n      href,\n      onClick(event: React.MouseEvent) {\n        if (isPlainLeftClick(event)) {\n          onFollow?.(event);\n        }\n      },\n    };\n\n    const buttonProps = {\n      role: 'button',\n      tabIndex: 0,\n      onKeyDown(event: React.KeyboardEvent) {\n        if (event.key === ' ') {\n          event.preventDefault();\n        }\n      },\n      onKeyUp(event: React.KeyboardEvent) {\n        if (event.key === ' ' || event.key === 'Enter') {\n          onFollow?.(event);\n        }\n      },\n      onClick: onFollow,\n    };\n\n    return (\n      <a\n        ref={ref}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        {...(typeof href === 'string' ? anchorProps : buttonProps)}\n        {...focusVisible}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onFollow?: (event: React.SyntheticEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onFollow: onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const focusVisible = useFocusVisible();\n\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...focusVisible}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onFollow={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps & ButtonDropdownProps.ItemGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const focusVisible = useFocusVisible();\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n        {...focusVisible}\n      >\n        <ListItem\n          endIcon={\n            <span className={clsx(styles.icon, expanded && styles.expanded)}>\n              <InternalIcon name=\"caret-up-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility,\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: Event | React.SyntheticEvent) => {\n        fireCancelableEvent(utility.onClick, {}, event);\n      };\n\n      if (utility.variant === 'primary-button') {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onFollow={handleClick} testId={`__${index}`}>\n            {label}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          testId={`__${index}`}\n          onFollow={handleClick}\n        >\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={item.href}\n      external={item.external}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onFollow={() => onItemClick(item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & { onItemClick: (item: ButtonDropdownProps.Item) => void };\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onItemClick)}\n    </li>\n  );\n};\n"]}

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

@@ -1,18 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { createContext, useContext, useState } from 'react';
-var defaultCtx = { state: { view: 'utilities', data: null }, setState: function () { } };
-export var ViewContext = createContext(defaultCtx);
-export var useNavigate = function () {
-    var setState = useContext(ViewContext).setState;
-    var navigate = function (view, data) {
-        setState({ view: view, data: data });
+const defaultCtx = { state: { view: 'utilities', data: null }, setState: () => { } };
+export const ViewContext = createContext(defaultCtx);
+export const useNavigate = () => {
+    const { setState } = useContext(ViewContext);
+    const navigate = (view, data) => {
+        setState({ view, data });
     };
     return navigate;
 };
-export var Route = function (_a) {
-    var view = _a.view, element = _a.element;
-    var state = useContext(ViewContext).state;
+export const Route = ({ view, element }) => {
+    const { state } = useContext(ViewContext);
     if (view === state.view) {
         if (typeof element === 'function') {
             return element(state.data);
@@ -21,10 +20,9 @@ export var Route = function (_a) {
     }
     return null;
 };
-var Router = function (_a) {
-    var children = _a.children;
-    var _b = useState({ view: 'utilities', data: null }), state = _b[0], setState = _b[1];
-    return React.createElement(ViewContext.Provider, { value: { state: state, setState: setState } }, children);
+const Router = ({ children }) => {
+    const [state, setState] = useState({ view: 'utilities', data: null });
+    return React.createElement(ViewContext.Provider, { value: { state, setState } }, children);
 };
 export default Router;
 //# sourceMappingURL=router.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"router.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/router.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,aAAa,EAA4B,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsB7F,IAAM,UAAU,GAAiB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,cAAO,CAAC,EAAE,CAAC;AAClG,MAAM,CAAC,IAAM,WAAW,GAAG,aAAa,CAAe,UAAU,CAAC,CAAC;AAEnE,MAAM,CAAC,IAAM,WAAW,GAAG;IACjB,IAAA,QAAQ,GAAK,UAAU,CAAC,WAAW,CAAC,SAA5B,CAA6B;IAE7C,IAAM,QAAQ,GAAG,UAAC,IAAU,EAAE,IAAS;QACrC,QAAQ,CAAC,EAAE,IAAI,MAAA,EAAE,IAAI,MAAA,EAAE,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAOF,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAA6B;QAA3B,IAAI,UAAA,EAAE,OAAO,aAAA;IAC3B,IAAA,KAAK,GAAK,UAAU,CAAC,WAAW,CAAC,MAA5B,CAA6B;IAE1C,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE;QACvB,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,OAAO,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SAC5B;QAED,OAAO,0CAAG,OAAO,CAAI,CAAC;KACvB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAMF,IAAM,MAAM,GAAG,UAAC,EAAyB;QAAvB,QAAQ,cAAA;IAClB,IAAA,KAAoB,QAAQ,CAAa,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAA1E,KAAK,QAAA,EAAE,QAAQ,QAA2D,CAAC;IAClF,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,QAAQ,UAAA,EAAE,IAAG,QAAQ,CAAwB,CAAC;AAC7F,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, { createContext, Dispatch, SetStateAction, useContext, useState } from 'react';\n\ntype View = 'utilities' | 'dropdown-menu';\n\ninterface RouteData {\n  headerText?: string;\n  headerSecondaryText?: string;\n  definition?: any;\n\n  utilityIndex?: number;\n}\n\ninterface RouteState {\n  view: View;\n  data: RouteData | null;\n}\n\ninterface IViewContext {\n  state: RouteState;\n  setState: Dispatch<SetStateAction<RouteState>>;\n}\n\nconst defaultCtx: IViewContext = { state: { view: 'utilities', data: null }, setState: () => {} };\nexport const ViewContext = createContext<IViewContext>(defaultCtx);\n\nexport const useNavigate = () => {\n  const { setState } = useContext(ViewContext);\n\n  const navigate = (view: View, data: any) => {\n    setState({ view, data });\n  };\n\n  return navigate;\n};\n\ninterface RouteProps {\n  view: View;\n  element?: React.ReactNode | ((data: RouteData | null) => React.ReactElement);\n}\n\nexport const Route = ({ view, element }: RouteProps) => {\n  const { state } = useContext(ViewContext);\n\n  if (view === state.view) {\n    if (typeof element === 'function') {\n      return element(state.data);\n    }\n\n    return <>{element}</>;\n  }\n\n  return null;\n};\n\ninterface RouterProps {\n  children?: React.ReactNode;\n}\n\nconst Router = ({ children }: RouterProps) => {\n  const [state, setState] = useState<RouteState>({ view: 'utilities', data: null });\n  return <ViewContext.Provider value={{ state, setState }}>{children}</ViewContext.Provider>;\n};\n\nexport default Router;\n"]}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/router.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,aAAa,EAA4B,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAsB7F,MAAM,UAAU,GAAiB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC;AAClG,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAe,UAAU,CAAC,CAAC;AAEnE,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE7C,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,IAAS,EAAE,EAAE;QACzC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAc,EAAE,EAAE;IACrD,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE1C,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,EAAE;QACvB,IAAI,OAAO,OAAO,KAAK,UAAU,EAAE;YACjC,OAAO,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SAC5B;QAED,OAAO,0CAAG,OAAO,CAAI,CAAC;KACvB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAMF,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAe,EAAE,EAAE;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAa,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAG,QAAQ,CAAwB,CAAC;AAC7F,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, { createContext, Dispatch, SetStateAction, useContext, useState } from 'react';\n\ntype View = 'utilities' | 'dropdown-menu';\n\ninterface RouteData {\n  headerText?: string;\n  headerSecondaryText?: string;\n  definition?: any;\n\n  utilityIndex?: number;\n}\n\ninterface RouteState {\n  view: View;\n  data: RouteData | null;\n}\n\ninterface IViewContext {\n  state: RouteState;\n  setState: Dispatch<SetStateAction<RouteState>>;\n}\n\nconst defaultCtx: IViewContext = { state: { view: 'utilities', data: null }, setState: () => {} };\nexport const ViewContext = createContext<IViewContext>(defaultCtx);\n\nexport const useNavigate = () => {\n  const { setState } = useContext(ViewContext);\n\n  const navigate = (view: View, data: any) => {\n    setState({ view, data });\n  };\n\n  return navigate;\n};\n\ninterface RouteProps {\n  view: View;\n  element?: React.ReactNode | ((data: RouteData | null) => React.ReactElement);\n}\n\nexport const Route = ({ view, element }: RouteProps) => {\n  const { state } = useContext(ViewContext);\n\n  if (view === state.view) {\n    if (typeof element === 'function') {\n      return element(state.data);\n    }\n\n    return <>{element}</>;\n  }\n\n  return null;\n};\n\ninterface RouterProps {\n  children?: React.ReactNode;\n}\n\nconst Router = ({ children }: RouterProps) => {\n  const [state, setState] = useState<RouteState>({ view: 'utilities', data: null });\n  return <ViewContext.Provider value={{ state, setState }}>{children}</ViewContext.Provider>;\n};\n\nexport default Router;\n"]}

package/top-navigation/parts/overflow-menu/views/submenu.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -10,17 +9,16 @@ import { SubmenuItem } from '../menu-item';
 import { useUniqueId } from '../../../../internal/hooks/use-unique-id';
 import styles from '../../../styles.css.js';
 import { fireCancelableEvent } from '../../../../internal/events';
-var SubmenuView = function (_a) {
-    var onClose = _a.onClose, utilityIndex = _a.utilityIndex, headerText = _a.headerText, headerSecondaryText = _a.headerSecondaryText, dismissIconAriaLabel = _a.dismissIconAriaLabel, backIconAriaLabel = _a.backIconAriaLabel, definition = _a.definition;
-    var navigate = useNavigate();
-    var headerId = useUniqueId('overflow-menu-header');
+const SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, dismissIconAriaLabel, backIconAriaLabel, definition, }) => {
+    const navigate = useNavigate();
+    const headerId = useUniqueId('overflow-menu-header');
     return (React.createElement(FocusLock, { returnFocus: true },
-        React.createElement(Header, { secondaryText: headerSecondaryText, dismissIconAriaLabel: dismissIconAriaLabel, backIconAriaLabel: backIconAriaLabel, onClose: onClose, onBack: function () { return navigate('utilities', { utilityIndex: utilityIndex }); } },
+        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(function (item, index) { return (React.createElement(SubmenuItem, __assign({ key: index }, item, { onItemClick: function (item) {
+        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, { onItemClick: item => {
                 fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external });
                 onClose === null || onClose === void 0 ? void 0 : onClose();
-            } }))); }))));
+            } })))))));
 };
 export default SubmenuView;
 //# sourceMappingURL=submenu.js.map

package/top-navigation/parts/overflow-menu/views/submenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"submenu.js","sourceRoot":"","sources":["../../../../../../src/top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAKvE,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAOlE,IAAM,WAAW,GAAG,UAAC,EAQF;QAPjB,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,mBAAmB,yBAAA,EACnB,oBAAoB,0BAAA,EACpB,iBAAiB,uBAAA,EACjB,UAAU,gBAAA;IAEV,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IACL,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,cAAM,OAAA,QAAQ,CAAC,WAAW,EAAE,EAAE,YAAY,cAAA,EAAE,CAAC,EAAvC,CAAuC;YAErD,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,qBAClE,QAAQ,IAEvB,UAAqD,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CACjF,oBAAC,WAAW,aACV,GAAG,EAAE,KAAK,IACN,IAAI,IACR,WAAW,EAAE,UAAA,IAAI;gBACf,mBAAmB,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvG,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;YACd,CAAC,IACD,CACH,EATkF,CASlF,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { useNavigate } from '../router';\nimport Header from '../header';\nimport { SubmenuItem } from '../menu-item';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { fireCancelableEvent } from '../../../../internal/events';\n\ninterface SubmenuViewProps extends View {\n  definition: TopNavigationProps.MenuDropdownUtility;\n  utilityIndex?: number;\n}\n\nconst SubmenuView = ({\n  onClose,\n  utilityIndex,\n  headerText,\n  headerSecondaryText,\n  dismissIconAriaLabel,\n  backIconAriaLabel,\n  definition,\n}: SubmenuViewProps) => {\n  const navigate = useNavigate();\n  const headerId = useUniqueId('overflow-menu-header');\n\n  return (\n    <FocusLock returnFocus={true}>\n      <Header\n        secondaryText={headerSecondaryText}\n        dismissIconAriaLabel={dismissIconAriaLabel}\n        backIconAriaLabel={backIconAriaLabel}\n        onClose={onClose}\n        onBack={() => navigate('utilities', { utilityIndex })}\n      >\n        <span id={headerId}>{headerText}</span>\n      </Header>\n      <ul\n        className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n        aria-labelledby={headerId}\n      >\n        {(definition as TopNavigationProps.MenuDropdownUtility).items.map((item, index) => (\n          <SubmenuItem\n            key={index}\n            {...item}\n            onItemClick={item => {\n              fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external });\n              onClose?.();\n            }}\n          />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default SubmenuView;\n"]}
+{"version":3,"file":"submenu.js","sourceRoot":"","sources":["../../../../../../src/top-navigation/parts/overflow-menu/views/submenu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAKvE,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAOlE,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IACL,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,CAAC;YAErD,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,qBAClE,QAAQ,IAEvB,UAAqD,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACjF,oBAAC,WAAW,kBACV,GAAG,EAAE,KAAK,IACN,IAAI,IACR,WAAW,EAAE,IAAI,CAAC,EAAE;gBAClB,mBAAmB,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACvG,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAC;YACd,CAAC,IACD,CACH,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport FocusLock from 'react-focus-lock';\n\nimport { useNavigate } from '../router';\nimport Header from '../header';\nimport { SubmenuItem } from '../menu-item';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { fireCancelableEvent } from '../../../../internal/events';\n\ninterface SubmenuViewProps extends View {\n  definition: TopNavigationProps.MenuDropdownUtility;\n  utilityIndex?: number;\n}\n\nconst SubmenuView = ({\n  onClose,\n  utilityIndex,\n  headerText,\n  headerSecondaryText,\n  dismissIconAriaLabel,\n  backIconAriaLabel,\n  definition,\n}: SubmenuViewProps) => {\n  const navigate = useNavigate();\n  const headerId = useUniqueId('overflow-menu-header');\n\n  return (\n    <FocusLock returnFocus={true}>\n      <Header\n        secondaryText={headerSecondaryText}\n        dismissIconAriaLabel={dismissIconAriaLabel}\n        backIconAriaLabel={backIconAriaLabel}\n        onClose={onClose}\n        onBack={() => navigate('utilities', { utilityIndex })}\n      >\n        <span id={headerId}>{headerText}</span>\n      </Header>\n      <ul\n        className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n        aria-labelledby={headerId}\n      >\n        {(definition as TopNavigationProps.MenuDropdownUtility).items.map((item, index) => (\n          <SubmenuItem\n            key={index}\n            {...item}\n            onItemClick={item => {\n              fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external });\n              onClose?.();\n            }}\n          />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default SubmenuView;\n"]}

package/top-navigation/parts/overflow-menu/views/utilities.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
@@ -7,11 +6,10 @@ import Header from '../header';
 import { UtilityMenuItem } from '../menu-item';
 import styles from '../../../styles.css.js';
 import { useUniqueId } from '../../../../internal/hooks/use-unique-id';
-var UtilitiesView = function (_a) {
-    var headerText = _a.headerText, dismissIconAriaLabel = _a.dismissIconAriaLabel, onClose = _a.onClose, _b = _a.items, items = _b === void 0 ? [] : _b, focusIndex = _a.focusIndex;
-    var headerId = useUniqueId('overflow-menu-header');
-    var ref = useRef(null);
-    useEffect(function () {
+const UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }) => {
+    const headerId = useUniqueId('overflow-menu-header');
+    const ref = useRef(null);
+    useEffect(() => {
         var _a;
         // A focus index is used to set the focus back to the submenu trigger
         // returning from a submenu.
@@ -22,7 +20,7 @@ var UtilitiesView = function (_a) {
     return (React.createElement(FocusLock, { returnFocus: true },
         React.createElement(Header, { dismissIconAriaLabel: dismissIconAriaLabel, onClose: onClose },
             React.createElement("span", { id: headerId }, headerText)),
-        React.createElement("ul", { className: styles['overflow-menu-list'], "aria-labelledby": headerId }, items.map(function (utility, index) { return (React.createElement(UtilityMenuItem, __assign({ key: index, index: index, ref: index === focusIndex ? ref : undefined }, utility))); }))));
+        React.createElement("ul", { className: styles['overflow-menu-list'], "aria-labelledby": headerId }, items.map((utility, index) => (React.createElement(UtilityMenuItem, Object.assign({ key: index, index: index, ref: index === focusIndex ? ref : undefined }, utility)))))));
 };
 export default UtilitiesView;
 //# sourceMappingURL=utilities.js.map

package/top-navigation/parts/overflow-menu/views/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../../../../../src/top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAOvE,IAAM,aAAa,GAAG,UAAC,EAAyF;QAAvF,UAAU,gBAAA,EAAE,oBAAoB,0BAAA,EAAE,OAAO,aAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,UAAU,gBAAA;IACxF,IAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,IAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC;;QACR,qEAAqE;QACrE,4BAA4B;QAC5B,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IAAC,oBAAoB,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO;YAClE,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BAAI,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,qBAAmB,QAAQ,IACnE,KAAK,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,KAAK,IAAK,OAAA,CAC7B,oBAAC,eAAe,aAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAM,OAAO,EAAI,CACxG,EAF8B,CAE9B,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\n\nimport Header from '../header';\nimport { UtilityMenuItem } from '../menu-item';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\ninterface UtilitiesViewProps extends View {\n  items: TopNavigationProps['utilities'];\n  focusIndex?: number;\n}\n\nconst UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }: UtilitiesViewProps) => {\n  const headerId = useUniqueId('overflow-menu-header');\n  const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n\n  useEffect(() => {\n    // A focus index is used to set the focus back to the submenu trigger\n    // returning from a submenu.\n    if (typeof focusIndex === 'number') {\n      ref.current?.focus();\n    }\n  }, [focusIndex]);\n\n  return (\n    <FocusLock returnFocus={true}>\n      <Header dismissIconAriaLabel={dismissIconAriaLabel} onClose={onClose}>\n        <span id={headerId}>{headerText}</span>\n      </Header>\n      <ul className={styles['overflow-menu-list']} aria-labelledby={headerId}>\n        {items.map((utility, index) => (\n          <UtilityMenuItem key={index} index={index} ref={index === focusIndex ? ref : undefined} {...utility} />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default UtilitiesView;\n"]}
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../../../../../src/top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAOvE,MAAM,aAAa,GAAG,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,UAAU,EAAsB,EAAE,EAAE;IAClH,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;;QACb,qEAAqE;QACrE,4BAA4B;QAC5B,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAClC,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,oBAAC,SAAS,IAAC,WAAW,EAAE,IAAI;QAC1B,oBAAC,MAAM,IAAC,oBAAoB,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO;YAClE,8BAAM,EAAE,EAAE,QAAQ,IAAG,UAAU,CAAQ,CAChC;QACT,4BAAI,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC,qBAAmB,QAAQ,IACnE,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,eAAe,kBAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAM,OAAO,EAAI,CACxG,CAAC,CACC,CACK,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\n\nimport Header from '../header';\nimport { UtilityMenuItem } from '../menu-item';\n\nimport { TopNavigationProps } from '../../../interfaces';\n\nimport { View } from '..';\nimport styles from '../../../styles.css.js';\nimport { useUniqueId } from '../../../../internal/hooks/use-unique-id';\n\ninterface UtilitiesViewProps extends View {\n  items: TopNavigationProps['utilities'];\n  focusIndex?: number;\n}\n\nconst UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [], focusIndex }: UtilitiesViewProps) => {\n  const headerId = useUniqueId('overflow-menu-header');\n  const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null);\n\n  useEffect(() => {\n    // A focus index is used to set the focus back to the submenu trigger\n    // returning from a submenu.\n    if (typeof focusIndex === 'number') {\n      ref.current?.focus();\n    }\n  }, [focusIndex]);\n\n  return (\n    <FocusLock returnFocus={true}>\n      <Header dismissIconAriaLabel={dismissIconAriaLabel} onClose={onClose}>\n        <span id={headerId}>{headerText}</span>\n      </Header>\n      <ul className={styles['overflow-menu-list']} aria-labelledby={headerId}>\n        {items.map((utility, index) => (\n          <UtilityMenuItem key={index} index={index} ref={index === focusIndex ? ref : undefined} {...utility} />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default UtilitiesView;\n"]}