@cloudscape-design/components-themeable 3.0.1332 → 3.0.1334

package/lib/internal/template/segmented-control/styles.scoped.css

@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_segment_8cbea_1jyr6_161:not(#\9) {
+.awsui_segment_8cbea_13buo_161:not(#\9) {
   font-size: var(--font-size-body-m-vv54cm, 14px);
   line-height: var(--line-height-body-m-bedeoh, 22px);
   word-wrap: break-word;
@@ -170,8 +170,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: 0.25px;
   padding-block: calc(var(--space-field-vertical-dgs6s0, 4px) - var(--border-width-field-2365x3, 1px));
   padding-inline: calc(var(--space-button-horizontal-v8ywmo, 20px) - var(--space-static-xxs-0cgyf1, 4px));
-  background: var(--awsui-style-background-default-z17rmd, var(--color-background-segment-default-zwi7m6, #ffffff));
-  color: var(--awsui-style-color-default-z17rmd, var(--color-text-segment-default-a74tco, #545b64));
+  background: var(--awsui-style-background-default-esndbs, var(--color-background-segment-default-zwi7m6, #ffffff));
+  color: var(--awsui-style-color-default-esndbs, var(--color-text-segment-default-a74tco, #545b64));
   overflow: visible;
   border-start-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
   border-start-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - 3px);
@@ -183,26 +183,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   border-inline: none;
   border-block: none;
-  --awsui-style-focus-ring-box-shadow-z17rmd: 0 0 0 var(--awsui-style-focus-ring-border-width-z17rmd, 2px) var(--awsui-style-focus-ring-border-color-z17rmd, var(--color-border-item-focused-r5f6xl, #0073bb));
+  --awsui-style-focus-ring-box-shadow-esndbs: 0 0 0 var(--awsui-style-focus-ring-border-width-esndbs, 2px) var(--awsui-style-focus-ring-border-color-esndbs, var(--color-border-item-focused-r5f6xl, #0073bb));
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):not(.awsui_refresh_8cbea_1jyr6_188) {
+.awsui_segment_8cbea_13buo_161:not(#\9):not(.awsui_refresh_8cbea_13buo_188) {
   block-size: calc(100% - var(--space-static-xxs-0cgyf1, 4px) - 2 * var(--border-width-field-2365x3, 1px));
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):focus {
+.awsui_segment_8cbea_13buo_161:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_8cbea_1jyr6_161.awsui_disabled_8cbea_1jyr6_194:not(#\9) {
-  background: var(--awsui-style-background-disabled-z17rmd, var(--color-background-segment-disabled-etp65k, #ffffff));
-  color: var(--awsui-style-color-disabled-z17rmd, var(--color-text-interactive-disabled-xwt2jl, #aab7b8));
+.awsui_segment_8cbea_13buo_161.awsui_disabled_8cbea_13buo_194:not(#\9) {
+  background: var(--awsui-style-background-disabled-esndbs, var(--color-background-segment-disabled-etp65k, #ffffff));
+  color: var(--awsui-style-color-disabled-esndbs, var(--color-text-interactive-disabled-xwt2jl, #aab7b8));
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_13buo_161:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_13buo_161:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_13buo_161:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -210,14 +210,14 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focu
   inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
   inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
   block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px) + var(--space-segmented-control-focus-outline-gutter-tvktqv, 3px));
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-z17rmd, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-z17rmd);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-esndbs);
   z-index: 1;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):not(:last-child)::after {
+.awsui_segment_8cbea_13buo_161:not(#\9):not(:last-child)::after {
   content: "";
   position: absolute;
   inset-inline-end: calc(-1 * (var(--space-static-xxs-0cgyf1, 4px) + 1px));
@@ -227,53 +227,53 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focu
   background: var(--color-border-input-default-txli8y, #687078);
   z-index: 1;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):not(.awsui_refresh_8cbea_1jyr6_188):not(:last-child)::after {
+.awsui_segment_8cbea_13buo_161:not(#\9):not(.awsui_refresh_8cbea_13buo_188):not(:last-child)::after {
   inset-inline-end: calc(-1 * var(--space-static-xxs-0cgyf1, 4px));
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(1) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(1) {
   grid-column: 1;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(2) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(2) {
   grid-column: 2;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(3) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(3) {
   grid-column: 3;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(4) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(4) {
   grid-column: 4;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(5) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(5) {
   grid-column: 5;
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):nth-child(6) {
+.awsui_segment_8cbea_13buo_161:not(#\9):nth-child(6) {
   grid-column: 6;
 }
-.awsui_segment_8cbea_1jyr6_161.awsui_selected_8cbea_1jyr6_251:not(#\9) {
-  background: var(--awsui-style-background-active-z17rmd, var(--color-background-segment-active-pvua4h, #0073bb));
-  color: var(--awsui-style-color-active-z17rmd, var(--color-text-segment-active-q50mlg, #ffffff));
+.awsui_segment_8cbea_13buo_161.awsui_selected_8cbea_13buo_251:not(#\9) {
+  background: var(--awsui-style-background-active-esndbs, var(--color-background-segment-active-pvua4h, #0073bb));
+  color: var(--awsui-style-color-active-esndbs, var(--color-text-segment-active-q50mlg, #ffffff));
 }
-.awsui_segment_8cbea_1jyr6_161:not(#\9):hover:not(.awsui_selected_8cbea_1jyr6_251):not(.awsui_disabled_8cbea_1jyr6_194):not(:focus) {
-  background: var(--awsui-style-background-hover-z17rmd, var(--color-background-segment-hover-bakufl, #fafafa));
-  color: var(--awsui-style-color-hover-z17rmd, var(--color-text-segment-hover-33xnva, #16191f));
+.awsui_segment_8cbea_13buo_161:not(#\9):hover:not(.awsui_selected_8cbea_13buo_251):not(.awsui_disabled_8cbea_13buo_194):not(:focus) {
+  background: var(--awsui-style-background-hover-esndbs, var(--color-background-segment-hover-bakufl, #fafafa));
+  color: var(--awsui-style-color-hover-esndbs, var(--color-text-segment-hover-33xnva, #16191f));
   cursor: pointer;
 }
 
-.awsui_icon_8cbea_1jyr6_261:not(#\9) {
+.awsui_icon_8cbea_13buo_261:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_with-text_8cbea_1jyr6_265:not(#\9) {
+.awsui_with-text_8cbea_13buo_265:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-jnczic, 4px));
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_with-no-text_8cbea_1jyr6_271:not(#\9) {
+.awsui_with-no-text_8cbea_13buo_271:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
 
-.awsui_root_8cbea_1jyr6_276:not(#\9) {
+.awsui_root_8cbea_13buo_276:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -305,7 +305,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focu
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_segment-part_8cbea_1jyr6_308:not(#\9) {
+.awsui_segment-part_8cbea_13buo_308:not(#\9) {
   display: inline-grid;
   border-inline: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-7vfuf7, #687078);
   border-block: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-7vfuf7, #687078);
@@ -320,46 +320,46 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_1jyr6_161:not(#\9):focu
   padding-inline: calc(var(--space-static-xxs-0cgyf1, 4px) - var(--border-width-field-2365x3, 1px));
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 + 1px);
 }
-.awsui_segment-part_8cbea_1jyr6_308:not(#\9):not(.awsui_refresh_8cbea_1jyr6_188) {
+.awsui_segment-part_8cbea_13buo_308:not(#\9):not(.awsui_refresh_8cbea_13buo_188) {
   padding-inline: calc(var(--space-static-xxxs-zckw10, 2px) + var(--border-width-field-2365x3, 1px));
   padding-block: 0;
   gap: calc(var(--space-static-xxs-0cgyf1, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_1jyr6_308:not(#\9) {
+  .awsui_segment-part_8cbea_13buo_308:not(#\9) {
     display: none;
   }
 }
 
-.awsui_select_8cbea_1jyr6_251:not(#\9) {
+.awsui_select_8cbea_13buo_251:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_1jyr6_251:not(#\9) {
+  .awsui_select_8cbea_13buo_251:not(#\9) {
     display: block;
   }
 }
 
-.awsui_segment-count-2_8cbea_1jyr6_343:not(#\9) {
+.awsui_segment-count-2_8cbea_13buo_343:not(#\9) {
   grid-template-columns: repeat(2, auto);
 }
 
-.awsui_segment-count-3_8cbea_1jyr6_347:not(#\9) {
+.awsui_segment-count-3_8cbea_13buo_347:not(#\9) {
   grid-template-columns: repeat(3, auto);
 }
 
-.awsui_segment-count-4_8cbea_1jyr6_351:not(#\9) {
+.awsui_segment-count-4_8cbea_13buo_351:not(#\9) {
   grid-template-columns: repeat(4, auto);
 }
 
-.awsui_segment-count-5_8cbea_1jyr6_355:not(#\9) {
+.awsui_segment-count-5_8cbea_13buo_355:not(#\9) {
   grid-template-columns: repeat(5, auto);
 }
 
-.awsui_segment-count-6_8cbea_1jyr6_359:not(#\9) {
+.awsui_segment-count-6_8cbea_13buo_359:not(#\9) {
   grid-template-columns: repeat(6, auto);
 }
 
-.awsui_disabled-reason-tooltip_8cbea_1jyr6_363:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_13buo_363:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/segmented-control/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_1jyr6_161",
-  "refresh": "awsui_refresh_8cbea_1jyr6_188",
-  "disabled": "awsui_disabled_8cbea_1jyr6_194",
-  "selected": "awsui_selected_8cbea_1jyr6_251",
-  "icon": "awsui_icon_8cbea_1jyr6_261",
-  "with-text": "awsui_with-text_8cbea_1jyr6_265",
-  "with-no-text": "awsui_with-no-text_8cbea_1jyr6_271",
-  "root": "awsui_root_8cbea_1jyr6_276",
-  "segment-part": "awsui_segment-part_8cbea_1jyr6_308",
-  "select": "awsui_select_8cbea_1jyr6_251",
-  "segment-count-2": "awsui_segment-count-2_8cbea_1jyr6_343",
-  "segment-count-3": "awsui_segment-count-3_8cbea_1jyr6_347",
-  "segment-count-4": "awsui_segment-count-4_8cbea_1jyr6_351",
-  "segment-count-5": "awsui_segment-count-5_8cbea_1jyr6_355",
-  "segment-count-6": "awsui_segment-count-6_8cbea_1jyr6_359",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1jyr6_363"
+  "segment": "awsui_segment_8cbea_13buo_161",
+  "refresh": "awsui_refresh_8cbea_13buo_188",
+  "disabled": "awsui_disabled_8cbea_13buo_194",
+  "selected": "awsui_selected_8cbea_13buo_251",
+  "icon": "awsui_icon_8cbea_13buo_261",
+  "with-text": "awsui_with-text_8cbea_13buo_265",
+  "with-no-text": "awsui_with-no-text_8cbea_13buo_271",
+  "root": "awsui_root_8cbea_13buo_276",
+  "segment-part": "awsui_segment-part_8cbea_13buo_308",
+  "select": "awsui_select_8cbea_13buo_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_13buo_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_13buo_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_13buo_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_13buo_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_13buo_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_13buo_363"
 };
   

package/lib/internal/template/side-navigation/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,eA+D7B;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,eAyE7B;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}

package/lib/internal/template/side-navigation/implementation.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { getBaseProps } from '../internal/base-component';
@@ -8,12 +8,14 @@ import { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events'
 import { isDevelopment } from '../internal/is-development';
 import { createWidgetizedComponent } from '../internal/widgets';
 import { Header, NavigationItemsList } from './parts';
-import { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';
+import { checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons } from './util';
 import styles from './styles.css.js';
 export function SideNavigationImplementation({ header, itemsControl, activeHref, items = [], onFollow, onChange, collapsed = false, __internalRootRef, ...props }) {
     const baseProps = getBaseProps(props);
     const isToolbar = useAppLayoutToolbarDesignEnabled();
     const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);
+    const withIcons = useMemo(() => hasNavigationIcons(items), [items]);
+    const [activeTooltip, setActiveTooltip] = useState(null);
     if (isDevelopment) {
         // This code should be wiped in production anyway.
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -26,11 +28,11 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
     const onFollowHandler = useCallback((item, sourceEvent) => {
         fireCancelableEvent(onFollow, item, sourceEvent);
     }, [onFollow]);
-    return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar']), ref: __internalRootRef },
+    return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar'], collapsed && styles['root--collapsed']), ref: __internalRootRef },
         header && (React.createElement(Header, { definition: header, activeHref: activeHref, fireChange: onChangeHandler, fireFollow: onFollowHandler, collapsed: collapsed })),
         !collapsed && itemsControl && React.createElement("div", { className: styles['items-control'] }, itemsControl),
         items && (React.createElement("div", { className: styles['list-container'] },
-            React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref, collapsed: collapsed })))));
+            React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })))));
 }
 export const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);
 //# sourceMappingURL=implementation.js.map

package/lib/internal/template/side-navigation/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.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, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n  header,\n  itemsControl,\n  activeHref,\n  items = [],\n  onFollow,\n  onChange,\n  collapsed = false,\n  __internalRootRef,\n  ...props\n}: SideNavigationInternalProps) {\n  const baseProps = getBaseProps(props);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n\n  if (isDevelopment) {\n    // This code should be wiped in production anyway.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkDuplicateHrefs(items), [items]);\n  }\n\n  const onChangeHandler = useCallback(\n    (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n      // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n      fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n    },\n    [onChange, parentMap]\n  );\n\n  const onFollowHandler = useCallback(\n    (\n      item:\n        | SideNavigationProps.Link\n        | SideNavigationProps.Header\n        | SideNavigationProps.LinkGroup\n        | SideNavigationProps.ExpandableLinkGroup,\n      sourceEvent: React.SyntheticEvent | Event\n    ) => {\n      fireCancelableEvent(onFollow, item, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar'])}\n      ref={__internalRootRef}\n    >\n      {header && (\n        <Header\n          definition={header}\n          activeHref={activeHref}\n          fireChange={onChangeHandler}\n          fireFollow={onFollowHandler}\n          collapsed={collapsed}\n        />\n      )}\n      {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n      {items && (\n        <div className={styles['list-container']}>\n          <NavigationItemsList\n            variant=\"root\"\n            items={items}\n            fireFollow={onFollowHandler}\n            fireChange={onChangeHandler}\n            activeHref={activeHref}\n            collapsed={collapsed}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.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, { useCallback, useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport { checkDuplicateHrefs, generateExpandableItemsMapping, hasNavigationIcons } from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n  header,\n  itemsControl,\n  activeHref,\n  items = [],\n  onFollow,\n  onChange,\n  collapsed = false,\n  __internalRootRef,\n  ...props\n}: SideNavigationInternalProps) {\n  const baseProps = getBaseProps(props);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n  const withIcons = useMemo(() => hasNavigationIcons(items), [items]);\n  const [activeTooltip, setActiveTooltip] = useState<string | null>(null);\n\n  if (isDevelopment) {\n    // This code should be wiped in production anyway.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkDuplicateHrefs(items), [items]);\n  }\n\n  const onChangeHandler = useCallback(\n    (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n      // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n      fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n    },\n    [onChange, parentMap]\n  );\n\n  const onFollowHandler = useCallback(\n    (\n      item:\n        | SideNavigationProps.Link\n        | SideNavigationProps.Header\n        | SideNavigationProps.LinkGroup\n        | SideNavigationProps.ExpandableLinkGroup,\n      sourceEvent: React.SyntheticEvent | Event\n    ) => {\n      fireCancelableEvent(onFollow, item, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        baseProps.className,\n        isToolbar && styles['with-toolbar'],\n        collapsed && styles['root--collapsed']\n      )}\n      ref={__internalRootRef}\n    >\n      {header && (\n        <Header\n          definition={header}\n          activeHref={activeHref}\n          fireChange={onChangeHandler}\n          fireFollow={onFollowHandler}\n          collapsed={collapsed}\n        />\n      )}\n      {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n      {items && (\n        <div className={styles['list-container']}>\n          <NavigationItemsList\n            variant=\"root\"\n            items={items}\n            fireFollow={onFollowHandler}\n            fireChange={onChangeHandler}\n            activeHref={activeHref}\n            collapsed={collapsed}\n            withIcons={withIcons}\n            activeTooltip={activeTooltip}\n            setActiveTooltip={setActiveTooltip}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}

package/lib/internal/template/side-navigation/parts.d.ts

@@ -6,6 +6,8 @@ interface BaseItemComponentProps {
     fireFollow: (item: SideNavigationProps.Link | SideNavigationProps.Header | SideNavigationProps.LinkGroup | SideNavigationProps.ExpandableLinkGroup, event: React.SyntheticEvent | Event) => void;
     position?: string;
     collapsed?: boolean;
+    activeTooltip?: string | null;
+    setActiveTooltip?: (position: string | null) => void;
 }
 interface HeaderProps extends BaseItemComponentProps {
     definition: SideNavigationProps.Header;
@@ -14,7 +16,8 @@ export declare function Header({ definition, activeHref, fireFollow, collapsed }
 interface NavigationItemsListProps extends BaseItemComponentProps {
     items: ReadonlyArray<SideNavigationProps.Item>;
     variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
+    withIcons?: boolean;
 }
-export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }: NavigationItemsListProps): JSX.Element;
 export {};
 //# sourceMappingURL=parts.d.ts.map

package/lib/internal/template/side-navigation/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAgB5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,WAAW,eA4DpF;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACxF;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,GACV,EAAE,wBAAwB,eA8Q1B"}
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAgB5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,WAAW,eA2DpF;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,EAAE,wBAAwB,eA+R1B"}

package/lib/internal/template/side-navigation/parts.js

@@ -32,18 +32,18 @@ export function Header({ definition, activeHref, fireFollow, collapsed }) {
         },
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("h2", { className: clsx(styles.header, collapsed && styles['header--collapsed']) },
-            React.createElement("a", { href: definition.href, className: clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo }), "aria-current": definition.href === activeHref ? 'page' : undefined, "aria-label": collapsed ? definition.text : undefined, onClick: onClick, ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
+        !collapsed && (React.createElement("h2", { className: styles.header },
+            React.createElement("a", { href: definition.href, className: clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo }), "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick, ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
                 definition.logo &&
                     (definition.logo.svg ? (React.createElement("span", { className: clsx(styles['header-logo'], {
-                            [styles['header-logo--stretched']]: !definition.text || collapsed,
+                            [styles['header-logo--stretched']]: !definition.text,
                         }) }, definition.logo.svg)) : (React.createElement("img", { className: clsx(styles['header-logo'], {
-                            [styles['header-logo--stretched']]: !definition.text || collapsed,
+                            [styles['header-logo--stretched']]: !definition.text,
                         }), src: definition.logo.src, alt: definition.logo.alt }))),
-                !collapsed && (React.createElement("span", { className: clsx(styles['header-link-text'], analyticsSelectors['header-link-text']) }, definition.text)))),
-        React.createElement(Divider, { isPresentational: true, variant: "header" })));
+                React.createElement("span", { className: clsx(styles['header-link-text'], analyticsSelectors['header-link-text']) }, definition.text)))),
+        !collapsed && React.createElement(Divider, { isPresentational: true, variant: "header" })));
 }
-export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', collapsed, }) {
+export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     const lists = [];
     let currentListIndex = 0;
     lists[currentListIndex] = {
@@ -83,7 +83,7 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
             const groupElements = iconChildren.map((child, childIndex) => {
                 const childPosition = `${position ? `${position},` : ''}${itemid},${childIndex + 1}`;
                 return (React.createElement("li", { key: childPosition, className: clsx(styles['list-item'], styles['list-item--collapsed']) },
-                    React.createElement(Link, { definition: child, activeHref: activeHref, fireFollow: fireFollow, fireChange: fireChange, position: childPosition, collapsed: collapsed })));
+                    React.createElement(Link, { definition: child, activeHref: activeHref, fireFollow: fireFollow, fireChange: fireChange, position: childPosition, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip })));
             });
             const prevItem = index > 0 ? items[index - 1] : null;
             const nextItem = index < items.length - 1 ? items[index + 1] : null;
@@ -120,35 +120,35 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
             case 'link': {
                 (_a = lists[currentListIndex].items) === null || _a === void 0 ? void 0 : _a.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
-                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
+                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'section': {
                 (_b = lists[currentListIndex].items) === null || _b === void 0 ? void 0 : _b.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
-                        React.createElement(Section, { definition: item, activeHref: activeHref, variant: variant, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
+                        React.createElement(Section, { definition: item, activeHref: activeHref, variant: variant, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'section-group': {
                 (_c = lists[currentListIndex].items) === null || _c === void 0 ? void 0 : _c.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
-                        React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
+                        React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'link-group': {
                 (_d = lists[currentListIndex].items) === null || _d === void 0 ? void 0 : _d.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
-                        React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
+                        React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
             case 'expandable-link-group': {
                 (_e = lists[currentListIndex].items) === null || _e === void 0 ? void 0 : _e.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed']) },
-                        React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant, position: itemPosition, collapsed: collapsed }))),
+                        React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant, position: itemPosition, collapsed: collapsed, withIcons: withIcons, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }))),
                 });
                 return;
             }
@@ -182,6 +182,7 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
             return (React.createElement("ul", { key: `list-${index}`, className: clsx(styles.list, styles[`list-variant-${list.listVariant}`], {
                     [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
                     [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
+                    [styles['list--with-icons']]: withIcons,
                 }) }, list.items.map(item => item.element)));
         }
     })));
@@ -199,23 +200,35 @@ const ItemIcon = React.forwardRef(function ItemIcon({ icon, collapsed, className
 // Used in the collapsed state, where the visible labels are hidden, to give
 // pointer and keyboard users a way to identify each item without relying on
 // their browser's native title popup.
-function useCollapsedTooltip(label) {
-    const [show, setShow] = useState(false);
+function useCollapsedTooltip({ label, position, activeTooltip, setActiveTooltip, }) {
     const triggerRef = useRef(null);
+    const id = position !== null && position !== void 0 ? position : '';
+    const show = activeTooltip === id;
+    const claim = () => setActiveTooltip === null || setActiveTooltip === void 0 ? void 0 : setActiveTooltip(id);
+    const release = () => {
+        if (activeTooltip === id) {
+            setActiveTooltip === null || setActiveTooltip === void 0 ? void 0 : setActiveTooltip(null);
+        }
+    };
     const triggerProps = {
-        onFocus: () => setShow(true),
-        onBlur: () => setShow(false),
-        onMouseEnter: () => setShow(true),
-        onMouseLeave: () => setShow(false),
+        onFocus: claim,
+        onBlur: release,
+        onMouseEnter: claim,
+        onMouseLeave: release,
     };
-    const tooltip = show ? (React.createElement(Tooltip, { getTrack: () => triggerRef.current, content: label, position: "right", onEscape: () => setShow(false) })) : null;
+    const tooltip = show ? (React.createElement(Tooltip, { getTrack: () => triggerRef.current, content: label, position: "right", onEscape: release })) : null;
     return { triggerRef, triggerProps, tooltip };
 }
-function Link({ definition, activeHref, fireFollow, position, collapsed }) {
+function Link({ definition, activeHref, fireFollow, position, collapsed, activeTooltip, setActiveTooltip }) {
     checkSafeUrl('SideNavigation', definition.href);
     const isActive = definition.href === activeHref;
     const i18n = useInternalI18n('link');
-    const collapsedTooltip = useCollapsedTooltip(definition.text);
+    const collapsedTooltip = useCollapsedTooltip({
+        label: definition.text,
+        position,
+        activeTooltip,
+        setActiveTooltip,
+    });
     const onClick = useCallback((event) => {
         if (isPlainLeftClick(event)) {
             fireFollow(definition, event);
@@ -246,7 +259,7 @@ function Link({ definition, activeHref, fireFollow, position, collapsed }) {
         internalLink,
         React.createElement("span", { className: clsx(styles.info, testUtilStyles.info) }, definition.info))) : (internalLink);
 }
-function Section({ definition, activeHref, fireFollow, fireChange, variant, position, collapsed }) {
+function Section({ definition, activeHref, fireFollow, fireChange, variant, position, collapsed, withIcons, }) {
     var _a;
     const [expanded, setExpanded] = useState((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     const isVisualRefresh = useVisualRefresh();
@@ -263,18 +276,18 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant, posi
     }
     const isInSectionGroup = variant === 'section-group';
     return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: clsx(styles.section, isInSectionGroup && styles['section--no-ident'], isVisualRefresh && styles.refresh), headerText: React.createElement("span", { className: styles['section-header'] }, definition.text) },
-        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
+        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
 }
-function SectionGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed }) {
+function SectionGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed, withIcons, }) {
     const isOneTheme = useOneTheme();
     if (collapsed) {
         return null;
     }
     return (React.createElement("div", { className: styles['section-group'] },
         React.createElement(InternalBox, { className: styles['section-group-title'], variant: "h3", fontSize: isOneTheme ? 'heading-s' : undefined }, definition.title),
-        React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
+        React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
 }
-function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed }) {
+function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     checkSafeUrl('SideNavigation', definition.href);
     return (React.createElement(React.Fragment, null,
         React.createElement(Link, { definition: {
@@ -283,10 +296,10 @@ function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, c
                 text: definition.text,
                 info: definition.info,
                 icon: definition.icon,
-            }, fireFollow: (_, event) => fireFollow(definition, event), fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed }),
-        !collapsed && (React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position }))));
+            }, fireFollow: (_, event) => fireFollow(definition, event), fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }),
+        !collapsed && (React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons }))));
 }
-function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, collapsed, }) {
+function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }) {
     // Check whether the definition contains an active link and memoize it to avoid
     // rechecking every time.
     const containsActiveLink = useMemo(() => {
@@ -321,9 +334,9 @@ function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, v
         }
     };
     if (collapsed) {
-        return (React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed }));
+        return (React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position, collapsed: collapsed, activeTooltip: activeTooltip, setActiveTooltip: setActiveTooltip }));
     }
     return (React.createElement(InternalExpandableSection, { className: clsx(styles['expandable-link-group'], variant === 'section-group' && styles['expandable-link-group--no-ident'], definition.href === activeHref && styles['expandable-link-group--active']), variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, headerText: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, icon: definition.icon }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position }) },
-        React.createElement(NavigationItemsList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
+        React.createElement(NavigationItemsList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position, withIcons: withIcons })));
 }
 //# sourceMappingURL=parts.js.map