@cloudscape-design/components 3.0.220 → 3.0.222

package/top-navigation/1.0-beta/use-top-navigation.js

@@ -1,4 +1,3 @@
-import { __spreadArray } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -6,18 +5,17 @@ import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useContainerBreakpoints, useContainerQuery } from '../../internal/hooks/container-queries';
 import styles from './styles.css.js';
 // A small buffer to make calculations more lenient against browser lag or padding adjustments.
-var RESPONSIVENESS_BUFFER = 20;
-export function useTopNavigation(_a) {
-    var mainRef = _a.__internalRootRef, identity = _a.identity, search = _a.search, utilities = _a.utilities;
+const RESPONSIVENESS_BUFFER = 20;
+export function useTopNavigation({ __internalRootRef: mainRef, identity, search, utilities, }) {
     // Refs and breakpoints
-    var virtualRef = useRef(null);
-    var _b = useContainerBreakpoints(['xxs', 's']), breakpoint = _b[0], breakpointRef = _b[1];
+    const virtualRef = useRef(null);
+    const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);
     // Responsiveness state
     // The component works by calculating the possible resize states that it can
     // be in, and having a state variable to track which state we're currently in.
-    var hasSearch = !!search;
-    var hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
-    var responsiveStates = useMemo(function () {
+    const hasSearch = !!search;
+    const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
+    const responsiveStates = useMemo(() => {
         return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);
     }, [utilities, hasSearch, hasTitleWithLogo]);
     // To hide/show elements dynamically, we need to know how much space they take up,
@@ -31,40 +29,40 @@ export function useTopNavigation(_a) {
     // spacing token values, icon sizes, text widths, etc.
     //
     // TODO: Some of these values can be memoized to improve perf.
-    var _c = useContainerQuery(function () {
+    const [responsiveState, containerQueryRef] = useContainerQuery(() => {
         var _a, _b, _c, _d;
         if (!(mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) || !virtualRef.current) {
             return responsiveStates[0];
         }
-        var sizeConfiguration = {
+        const sizeConfiguration = {
             hasSearch: !!search,
             // Get widths and paddings from the visible top navigation
-            availableWidth: getContentBoxWidth(mainRef.current.querySelector(".".concat(styles['padding-box']))),
-            utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(".".concat(styles.utilities))).paddingLeft),
+            availableWidth: getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)),
+            utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)).paddingLeft),
             // Get widths from the hidden top navigation
-            fullIdentityWidth: virtualRef.current.querySelector(".".concat(styles.identity)).getBoundingClientRect().width,
-            titleWidth: (_b = (_a = virtualRef.current.querySelector(".".concat(styles.title))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
-            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(".".concat(styles.search))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
+            fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`).getBoundingClientRect().width,
+            titleWidth: (_b = (_a = virtualRef.current.querySelector(`.${styles.title}`)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
+            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(`.${styles.search}`)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
             searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]').getBoundingClientRect()
                 .width,
             utilityWithLabelWidths: Array.prototype.slice
-                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"false\"]"))
-                .map(function (element) { return element.getBoundingClientRect().width; }),
+                .call(virtualRef.current.querySelectorAll(`[data-utility-hide="false"]`))
+                .map((element) => element.getBoundingClientRect().width),
             utilityWithoutLabelWidths: Array.prototype.slice
-                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"true\"]"))
-                .map(function (element) { return element.getBoundingClientRect().width; }),
+                .call(virtualRef.current.querySelectorAll(`[data-utility-hide="true"]`))
+                .map((element) => element.getBoundingClientRect().width),
             menuTriggerUtilityWidth: virtualRef.current
                 .querySelector('[data-utility-special="menu-trigger"]')
-                .getBoundingClientRect().width
+                .getBoundingClientRect().width,
         };
         return determineBestResponsiveState(responsiveStates, sizeConfiguration);
-    }, [mainRef, search, responsiveStates]), responsiveState = _c[0], containerQueryRef = _c[1];
+    }, [mainRef, search, responsiveStates]);
     // Search slot expansion on small screens
-    var _d = useState(true), isSearchMinimized = _d[0], setSearchMinimized = _d[1];
-    var isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch);
+    const [isSearchMinimized, setSearchMinimized] = useState(true);
+    const isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch);
     // If the search was expanded, and then the screen resized so that the
     // expansion is no longer necessary. So we implicitly minimize it.
-    useEffect(function () {
+    useEffect(() => {
         if (!(responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch)) {
             setSearchMinimized(true);
         }
@@ -72,51 +70,51 @@ export function useTopNavigation(_a) {
     // If the search is expanded after clicking on the search utility, move
     // the focus to the input. Since this is a user-controlled slot, we're just
     // assuming that it contains an input, though it's a pretty safe guess.
-    useEffect(function () {
+    useEffect(() => {
         var _a, _b;
         if (isSearchExpanded) {
-            (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(styles.search, " input"))) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles.search} input`)) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [isSearchExpanded, mainRef]);
-    var mergedRef = useMergeRefs.apply(void 0, __spreadArray(__spreadArray([], (mainRef ? [mainRef] : []), false), [containerQueryRef, breakpointRef], false));
+    const mergedRef = useMergeRefs(...(mainRef ? [mainRef] : []), containerQueryRef, breakpointRef);
     return {
         ref: mergedRef,
         virtualRef: virtualRef,
         responsiveState: responsiveState !== null && responsiveState !== void 0 ? responsiveState : responsiveStates[0],
         breakpoint: breakpoint !== null && breakpoint !== void 0 ? breakpoint : 'default',
         isSearchExpanded: !!isSearchExpanded,
-        onSearchUtilityClick: function () { return setSearchMinimized(function (isSearchMinimized) { return !isSearchMinimized; }); }
+        onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),
     };
 }
 /**
  * Get the width of the content box (assuming the element's box-sizing is border-box).
  */
 function getContentBoxWidth(element) {
-    var style = getComputedStyle(element);
+    const style = getComputedStyle(element);
     return parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
 }
 /**
  * Generates the series of responsive steps that can be performed on the header in order.
  */
 export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTitle) {
-    var states = [{}];
-    if (utilities.some(function (utility) { return utility.text; })) {
+    const states = [{}];
+    if (utilities.some(utility => utility.text)) {
         states.push({ hideUtilityText: true });
     }
     if (canHideSearch) {
         states.push({
             hideUtilityText: true,
-            hideSearch: true
+            hideSearch: true,
         });
     }
-    var hiddenUtilties = [];
-    for (var i = 0; i < utilities.length; i++) {
+    const hiddenUtilties = [];
+    for (let i = 0; i < utilities.length; i++) {
         if (!utilities[i].disableUtilityCollapse) {
             hiddenUtilties.push(i);
             states.push({
                 hideUtilityText: true,
                 hideSearch: canHideSearch || undefined,
-                hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined
+                hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,
             });
         }
     }
@@ -125,7 +123,7 @@ export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTit
             hideUtilityText: true,
             hideSearch: canHideSearch || undefined,
             hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,
-            hideTitle: true
+            hideTitle: true,
         });
     }
     return states;
@@ -135,25 +133,19 @@ export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTit
  * and the current sizes of all elements inside the navigation bar.
  */
 export function determineBestResponsiveState(possibleStates, sizes) {
-    var hasSearch = sizes.hasSearch, availableWidth = sizes.availableWidth, utilitiesLeftPadding = sizes.utilitiesLeftPadding, fullIdentityWidth = sizes.fullIdentityWidth, titleWidth = sizes.titleWidth, searchSlotWidth = sizes.searchSlotWidth, searchUtilityWidth = sizes.searchUtilityWidth, utilityWithLabelWidths = sizes.utilityWithLabelWidths, utilityWithoutLabelWidths = sizes.utilityWithoutLabelWidths, menuTriggerUtilityWidth = sizes.menuTriggerUtilityWidth;
-    var _loop_1 = function (state) {
-        var searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;
-        var utilitiesWidth = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)
-            .filter(function (_width, i) { return !state.hideUtilities || state.hideUtilities.indexOf(i) === -1; })
-            .reduce(function (sum, width) { return sum + width; }, 0);
-        var menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;
-        var identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;
-        var expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;
+    const { hasSearch, availableWidth, utilitiesLeftPadding, fullIdentityWidth, titleWidth, searchSlotWidth, searchUtilityWidth, utilityWithLabelWidths, utilityWithoutLabelWidths, menuTriggerUtilityWidth, } = sizes;
+    // Iterate through each state and calculate its expected required width.
+    for (const state of possibleStates) {
+        const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;
+        const utilitiesWidth = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)
+            .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)
+            .reduce((sum, width) => sum + width, 0);
+        const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;
+        const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;
+        const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;
         if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {
-            return { value: state };
+            return state;
         }
-    };
-    // Iterate through each state and calculate its expected required width.
-    for (var _i = 0, possibleStates_1 = possibleStates; _i < possibleStates_1.length; _i++) {
-        var state = possibleStates_1[_i];
-        var state_1 = _loop_1(state);
-        if (typeof state_1 === "object")
-            return state_1.value;
     }
     // If nothing matches, pick the smallest possible state.
     return possibleStates[possibleStates.length - 1];

package/top-navigation/1.0-beta/use-top-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../../src/top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  __internalRootRef?: React.MutableRefObject<HTMLElement> | null;\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  ref: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({\n  __internalRootRef: mainRef,\n  identity,\n  search,\n  utilities,\n}: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  //\n  // TODO: Some of these values can be memoized to improve perf.\n  const [responsiveState, containerQueryRef] = useContainerQuery<ResponsiveState>(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      return responsiveStates[0];\n    }\n\n    const sizeConfiguration = {\n      hasSearch: !!search,\n\n      // Get widths and paddings from the visible top navigation\n      availableWidth: getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!),\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft\n      ),\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n\n    return determineBestResponsiveState(responsiveStates, sizeConfiguration);\n  }, [mainRef, search, responsiveStates]);\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedRef = useMergeRefs(...(mainRef ? [mainRef] : []), containerQueryRef, breakpointRef);\n\n  return {\n    ref: mergedRef,\n    virtualRef: virtualRef,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}
+{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../../src/top-navigation/1.0-beta/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  __internalRootRef?: React.MutableRefObject<HTMLElement> | null;\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  ref: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({\n  __internalRootRef: mainRef,\n  identity,\n  search,\n  utilities,\n}: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  //\n  // TODO: Some of these values can be memoized to improve perf.\n  const [responsiveState, containerQueryRef] = useContainerQuery<ResponsiveState>(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      return responsiveStates[0];\n    }\n\n    const sizeConfiguration = {\n      hasSearch: !!search,\n\n      // Get widths and paddings from the visible top navigation\n      availableWidth: getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!),\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft\n      ),\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n\n    return determineBestResponsiveState(responsiveStates, sizeConfiguration);\n  }, [mainRef, search, responsiveStates]);\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && breakpoint !== 's' && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedRef = useMergeRefs(...(mainRef ? [mainRef] : []), containerQueryRef, breakpointRef);\n\n  return {\n    ref: mergedRef,\n    virtualRef: virtualRef,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return parseFloat(style.width) - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}

package/top-navigation/index.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 from 'react';
@@ -6,9 +6,9 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import InternalTopNavigation from './internal';
 export default function TopNavigation(_a) {
-    var _b = _a.utilities, utilities = _b === void 0 ? [] : _b, restProps = __rest(_a, ["utilities"]);
-    var baseComponentProps = useBaseComponent('TopNavigation');
-    return React.createElement(InternalTopNavigation, __assign({}, baseComponentProps, { utilities: utilities }, restProps));
+    var { utilities = [] } = _a, restProps = __rest(_a, ["utilities"]);
+    const baseComponentProps = useBaseComponent('TopNavigation');
+    return React.createElement(InternalTopNavigation, Object.assign({}, baseComponentProps, { utilities: utilities }, restProps));
 }
 applyDisplayName(TopNavigation, 'TopNavigation');
 //# sourceMappingURL=index.js.map

package/top-navigation/index.js.map

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

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

package/top-navigation/internal.js.map

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