@cloudscape-design/components-themeable 3.0.1344 → 3.0.1345

package/lib/internal/template/internal/generated/theming/index.js

@@ -1796,8 +1796,8 @@ export var preset = {
         "dark": "{colorBackgroundControlChecked}"
       },
       "colorBackgroundSideNavigationItemIconHover": {
-        "light": "{colorPrimary50}",
-        "dark": "{colorNeutral700}"
+        "light": "{colorBackgroundItemSelected}",
+        "dark": "{colorBackgroundItemSelected}"
       },
       "colorBackgroundLayoutMain": {
         "light": "{colorWhite}",
@@ -2355,6 +2355,10 @@ export var preset = {
         "light": "{colorNeutral750}",
         "dark": "{colorNeutral750}"
       },
+      "colorBorderNotificationStackBarFocused": {
+        "light": "{colorNeutral100}",
+        "dark": "{colorNeutral100}"
+      },
       "colorBorderPanelHeader": {
         "light": "{colorBorderDividerDefault}",
         "dark": "{colorBorderDividerDefault}"
@@ -3531,6 +3535,30 @@ export var preset = {
         "default": "{motionEasingRefreshOnlyA}",
         "disabled": "{motionEasingRefreshOnlyA}"
       },
+      "motionDurationExpandableContentEnter": {
+        "default": "{motionDurationShowPaced}",
+        "disabled": "{motionDurationShowPaced}"
+      },
+      "motionEasingExpandableContentEnter": {
+        "default": "{motionEasingShowPaced}",
+        "disabled": "{motionEasingShowPaced}"
+      },
+      "motionDurationSideNavigationContentEnterFade": {
+        "default": "0ms",
+        "disabled": "0ms"
+      },
+      "motionDurationSideNavigationContentExit": {
+        "default": "0ms",
+        "disabled": "0ms"
+      },
+      "motionDurationSideNavigationContentExitFade": {
+        "default": "0ms",
+        "disabled": "0ms"
+      },
+      "motionEasingSideNavigationContentExit": {
+        "default": "{motionEasingShowQuick}",
+        "disabled": "{motionEasingShowQuick}"
+      },
       "motionKeyframesFadeIn": {
         "default": "awsui-fade-in-35003c",
         "disabled": "awsui-fade-in-35003c"
@@ -3587,6 +3615,14 @@ export var preset = {
         "comfortable": "28px",
         "compact": "24px"
       },
+      "sizeSideNavigationItemCollapsed": {
+        "comfortable": "30px",
+        "compact": "28px"
+      },
+      "sizeSideNavigationCollapsedWidth": {
+        "comfortable": "52px",
+        "compact": "52px"
+      },
       "spaceAlertActionLeft": {
         "comfortable": "{spaceS}",
         "compact": "{spaceS}"
@@ -4880,8 +4916,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorNeutral700}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
@@ -5439,6 +5475,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -6776,8 +6816,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorNeutral700}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral950}",
@@ -7335,6 +7375,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -8610,8 +8654,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorPrimary50}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
@@ -9169,6 +9213,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -10280,8 +10328,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorPrimary50}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
@@ -10839,6 +10887,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -11950,8 +12002,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorPrimary50}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorWhite}",
@@ -12509,6 +12561,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -13622,8 +13678,8 @@ export var preset = {
             "dark": "{colorBackgroundControlChecked}"
           },
           "colorBackgroundSideNavigationItemIconHover": {
-            "light": "{colorNeutral700}",
-            "dark": "{colorNeutral700}"
+            "light": "{colorBackgroundItemSelected}",
+            "dark": "{colorBackgroundItemSelected}"
           },
           "colorBackgroundLayoutMain": {
             "light": "{colorNeutral850}",
@@ -14181,6 +14237,10 @@ export var preset = {
             "light": "{colorNeutral750}",
             "dark": "{colorNeutral750}"
           },
+          "colorBorderNotificationStackBarFocused": {
+            "light": "{colorNeutral100}",
+            "dark": "{colorNeutral100}"
+          },
           "colorBorderPanelHeader": {
             "light": "{colorBorderDividerDefault}",
             "dark": "{colorBorderDividerDefault}"
@@ -15632,6 +15692,7 @@ export var preset = {
       "colorBorderLayout": "color",
       "colorBorderLayoutSideNavigation": "color",
       "colorBorderNotificationStackBar": "color",
+      "colorBorderNotificationStackBarFocused": "color",
       "colorBorderPanelHeader": "color",
       "colorBorderPopover": "color",
       "colorBorderSegmentActive": "color",
@@ -15888,6 +15949,12 @@ export var preset = {
       "motionDurationComplex": "motion",
       "motionDurationTooltipEnter": "motion",
       "motionEasingTooltipEnter": "motion",
+      "motionDurationExpandableContentEnter": "motion",
+      "motionEasingExpandableContentEnter": "motion",
+      "motionDurationSideNavigationContentEnterFade": "motion",
+      "motionDurationSideNavigationContentExit": "motion",
+      "motionDurationSideNavigationContentExitFade": "motion",
+      "motionEasingSideNavigationContentExit": "motion",
       "motionKeyframesFadeIn": "motion",
       "motionKeyframesFadeOut": "motion",
       "motionKeyframesStatusIconError": "motion",
@@ -15902,6 +15969,8 @@ export var preset = {
       "sizeVerticalInput": "density",
       "sizeVerticalPanelIconOffset": "density",
       "sizeSideNavigationItemHeight": "density",
+      "sizeSideNavigationItemCollapsed": "density",
+      "sizeSideNavigationCollapsedWidth": "density",
       "spaceAlertActionLeft": "density",
       "spaceAlertHorizontal": "density",
       "spaceAlertMessageRight": "density",
@@ -16773,6 +16842,8 @@ export var preset = {
     "motionEasingTooltipEnter",
     "sizeVerticalInput",
     "sizeSideNavigationItemHeight",
+    "sizeSideNavigationItemCollapsed",
+    "sizeSideNavigationCollapsedWidth",
     "spaceAlertVertical",
     "spaceButtonHorizontal",
     "spaceButtonVertical",
@@ -17313,6 +17384,8 @@ export var preset = {
     "motionKeyframesScalePopup",
     "sizeVerticalInput",
     "sizeSideNavigationItemHeight",
+    "sizeSideNavigationItemCollapsed",
+    "sizeSideNavigationCollapsedWidth",
     "spaceAlertVertical",
     "spaceButtonHorizontal",
     "spaceButtonVertical",
@@ -17935,6 +18008,7 @@ export var preset = {
     "colorBorderLayout": "color-border-layout",
     "colorBorderLayoutSideNavigation": "color-border-layout-side-navigation",
     "colorBorderNotificationStackBar": "color-border-notification-stack-bar",
+    "colorBorderNotificationStackBarFocused": "color-border-notification-stack-bar-focused",
     "colorBorderPanelHeader": "color-border-panel-header",
     "colorBorderPopover": "color-border-popover",
     "colorBorderSegmentActive": "color-border-segment-active",
@@ -18343,6 +18417,12 @@ export var preset = {
     "motionDurationComplex": "motion-duration-complex",
     "motionDurationTooltipEnter": "motion-duration-tooltip-enter",
     "motionEasingTooltipEnter": "motion-easing-tooltip-enter",
+    "motionDurationExpandableContentEnter": "motion-duration-expandable-content-enter",
+    "motionEasingExpandableContentEnter": "motion-easing-expandable-content-enter",
+    "motionDurationSideNavigationContentEnterFade": "motion-duration-side-navigation-content-enter-fade",
+    "motionDurationSideNavigationContentExit": "motion-duration-side-navigation-content-exit",
+    "motionDurationSideNavigationContentExitFade": "motion-duration-side-navigation-content-exit-fade",
+    "motionEasingSideNavigationContentExit": "motion-easing-side-navigation-content-exit",
     "motionKeyframesFadeIn": "motion-keyframes-fade-in",
     "motionKeyframesFadeOut": "motion-keyframes-fade-out",
     "motionKeyframesStatusIconError": "motion-keyframes-status-icon-error",
@@ -18357,6 +18437,8 @@ export var preset = {
     "sizeVerticalInput": "size-vertical-input",
     "sizeVerticalPanelIconOffset": "size-vertical-panel-icon-offset",
     "sizeSideNavigationItemHeight": "size-side-navigation-item-height",
+    "sizeSideNavigationItemCollapsed": "size-side-navigation-item-collapsed",
+    "sizeSideNavigationCollapsedWidth": "size-side-navigation-collapsed-width",
     "spaceAlertActionLeft": "space-alert-action-left",
     "spaceAlertHorizontal": "space-alert-horizontal",
     "spaceAlertMessageRight": "space-alert-message-right",
@@ -18937,7 +19019,7 @@ export var preset = {
     "colorBackgroundItemSelected": "--color-background-item-selected-pyr5cw",
     "colorBackgroundSideNavigationItemActive": "--color-background-side-navigation-item-active-adfprg",
     "colorBackgroundSideNavigationItemActiveCollapsed": "--color-background-side-navigation-item-active-collapsed-jczh49",
-    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-c8r9nb",
+    "colorBackgroundSideNavigationItemIconHover": "--color-background-side-navigation-item-icon-hover-e5eh06",
     "colorBackgroundLayoutMain": "--color-background-layout-main-7z8vaj",
     "colorBackgroundLayoutAiDrawer": "--color-background-layout-ai-drawer-b4mvv3",
     "colorBackgroundDrawer": "--color-background-drawer-715dba",
@@ -19077,6 +19159,7 @@ export var preset = {
     "colorBorderLayout": "--color-border-layout-px1i24",
     "colorBorderLayoutSideNavigation": "--color-border-layout-side-navigation-mjh43q",
     "colorBorderNotificationStackBar": "--color-border-notification-stack-bar-aszsse",
+    "colorBorderNotificationStackBarFocused": "--color-border-notification-stack-bar-focused-mzvtw9",
     "colorBorderPanelHeader": "--color-border-panel-header-j4pvsn",
     "colorBorderPopover": "--color-border-popover-5yl4uc",
     "colorBorderSegmentActive": "--color-border-segment-active-trxbfe",
@@ -19485,6 +19568,12 @@ export var preset = {
     "motionDurationComplex": "--motion-duration-complex-tbdo30",
     "motionDurationTooltipEnter": "--motion-duration-tooltip-enter-8e7aex",
     "motionEasingTooltipEnter": "--motion-easing-tooltip-enter-i9exfu",
+    "motionDurationExpandableContentEnter": "--motion-duration-expandable-content-enter-kqyuuj",
+    "motionEasingExpandableContentEnter": "--motion-easing-expandable-content-enter-5fw5v8",
+    "motionDurationSideNavigationContentEnterFade": "--motion-duration-side-navigation-content-enter-fade-9is49e",
+    "motionDurationSideNavigationContentExit": "--motion-duration-side-navigation-content-exit-6sbfiy",
+    "motionDurationSideNavigationContentExitFade": "--motion-duration-side-navigation-content-exit-fade-ydl422",
+    "motionEasingSideNavigationContentExit": "--motion-easing-side-navigation-content-exit-v820ow",
     "motionKeyframesFadeIn": "--motion-keyframes-fade-in-0r842q",
     "motionKeyframesFadeOut": "--motion-keyframes-fade-out-g7fgdu",
     "motionKeyframesStatusIconError": "--motion-keyframes-status-icon-error-wkou39",
@@ -19499,6 +19588,8 @@ export var preset = {
     "sizeVerticalInput": "--size-vertical-input-p1d7xx",
     "sizeVerticalPanelIconOffset": "--size-vertical-panel-icon-offset-z959cw",
     "sizeSideNavigationItemHeight": "--size-side-navigation-item-height-lokap3",
+    "sizeSideNavigationItemCollapsed": "--size-side-navigation-item-collapsed-oesjea",
+    "sizeSideNavigationCollapsedWidth": "--size-side-navigation-collapsed-width-3gq7nn",
     "spaceAlertActionLeft": "--space-alert-action-left-4s8zo5",
     "spaceAlertHorizontal": "--space-alert-horizontal-ul364s",
     "spaceAlertMessageRight": "--space-alert-message-right-mrjbnn",

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,eAyE7B;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;AAWnD,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,eA6E7B;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, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { getBaseProps } from '../internal/base-component';
@@ -8,7 +8,7 @@ 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, hasNavigationIcons } from './util';
+import { checkCollapsedIconSupport, 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);
@@ -16,10 +16,13 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
     const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);
     const withIcons = useMemo(() => hasNavigationIcons(items), [items]);
     const [activeTooltip, setActiveTooltip] = useState(null);
+    const listContainerRef = useRef(null);
     if (isDevelopment) {
         // This code should be wiped in production anyway.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => checkDuplicateHrefs(items), [items]);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => checkCollapsedIconSupport(items, collapsed), [items, collapsed]);
     }
     const onChangeHandler = useCallback((item, expanded) => {
         // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.
@@ -31,7 +34,7 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
     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'] },
+        items && (React.createElement("div", { ref: listContainerRef, className: styles['list-container'] },
             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);

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, 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"]}
+{"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, useRef, 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 {\n  checkCollapsedIconSupport,\n  checkDuplicateHrefs,\n  generateExpandableItemsMapping,\n  hasNavigationIcons,\n} 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  const listContainerRef = useRef<HTMLDivElement>(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    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => checkCollapsedIconSupport(items, collapsed), [items, collapsed]);\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 ref={listContainerRef} 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

@@ -17,7 +17,8 @@ interface NavigationItemsListProps extends BaseItemComponentProps {
     items: ReadonlyArray<SideNavigationProps.Item>;
     variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
     withIcons?: boolean;
+    ariaLabel?: string;
 }
-export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, withIcons, activeTooltip, setActiveTooltip, }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, withIcons, ariaLabel, 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;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,eAgS1B"}
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAiB5F,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;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,EAAE,wBAAwB,eAgP1B"}