@cloudscape-design/components 3.0.294 → 3.0.295

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

@@ -20,6 +20,7 @@ const SubmenuView = ({ onClose, utilityIndex, headerText, headerSecondaryText, d
                     fireCancelableEvent(definition.onItemFollow, { id: item.id, href: item.href, external: item.external }, event);
                 }
                 fireCancelableEvent(definition.onItemClick, { id: item.id, href: item.href, external: item.external }, event);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             } })))))));
 };
 export default SubmenuView;

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

@@ -1 +1 @@
-{"version":3,"file":"submenu.js","sourceRoot":"lib/default/","sources":["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,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAOpF,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,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;oBACxC,mBAAmB,CACjB,UAAU,CAAC,YAAY,EACvB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;iBACH;gBAED,mBAAmB,CACjB,UAAU,CAAC,WAAW,EACtB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;YACJ,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, isPlainLeftClick } 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            onClick={(event, item) => {\n              if (item.href && isPlainLeftClick(event)) {\n                fireCancelableEvent(\n                  definition.onItemFollow,\n                  { id: item.id, href: item.href, external: item.external },\n                  event\n                );\n              }\n\n              fireCancelableEvent(\n                definition.onItemClick,\n                { id: item.id, href: item.href, external: item.external },\n                event\n              );\n            }}\n          />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default SubmenuView;\n"]}
+{"version":3,"file":"submenu.js","sourceRoot":"lib/default/","sources":["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,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAOpF,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,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE;gBACvB,IAAI,IAAI,CAAC,IAAI,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;oBACxC,mBAAmB,CACjB,UAAU,CAAC,YAAY,EACvB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;iBACH;gBAED,mBAAmB,CACjB,UAAU,CAAC,WAAW,EACtB,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EACzD,KAAK,CACN,CAAC;gBACF,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, isPlainLeftClick } 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            onClick={(event, item) => {\n              if (item.href && isPlainLeftClick(event)) {\n                fireCancelableEvent(\n                  definition.onItemFollow,\n                  { id: item.id, href: item.href, external: item.external },\n                  event\n                );\n              }\n\n              fireCancelableEvent(\n                definition.onItemClick,\n                { id: item.id, href: item.href, external: item.external },\n                event\n              );\n              onClose?.();\n            }}\n          />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default SubmenuView;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"utilities.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,kBAAmB,SAAQ,IAAI;IACvC,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,qEAA2E,kBAAkB,gBAwB/G,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"utilities.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/parts/overflow-menu/views/utilities.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAI1B,UAAU,kBAAmB,SAAQ,IAAI;IACvC,KAAK,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,aAAa,qEAA2E,kBAAkB,gBA8B/G,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -20,7 +20,7 @@ const UtilitiesView = ({ headerText, dismissIconAriaLabel, onClose, items = [],
     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((utility, index) => (React.createElement(UtilityMenuItem, Object.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, onClose: onClose }, 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":"lib/default/","sources":["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"]}
+{"version":3,"file":"utilities.js","sourceRoot":"lib/default/","sources":["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,kBACd,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAC3C,OAAO,EAAE,OAAO,IACZ,OAAO,EACX,CACH,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\n            key={index}\n            index={index}\n            ref={index === focusIndex ? ref : undefined}\n            onClose={onClose}\n            {...utility}\n          />\n        ))}\n      </ul>\n    </FocusLock>\n  );\n};\n\nexport default UtilitiesView;\n"]}