@cloudscape-design/components-themeable 3.0.1315 → 3.0.1316

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":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACoB;IAC5B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhF,IAAI,aAAa,EAAE,CAAC;QAClB,kDAAkD;QAClD,sDAAsD;QACtD,SAAS,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,IAA2E,EAAE,QAAiB,EAAE,EAAE;QACjG,wGAAwG;QACxG,sBAAsB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAE,EAAE,CAAC,CAAC;IAC1G,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,IAI2C,EAC3C,WAAyC,EACzC,EAAE;QACF,mBAAmB,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,gCACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,EACtF,GAAG,EAAE,iBAAiB;QAErB,MAAM,IAAI,CACT,oBAAC,MAAM,IAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,GAAI,CACjH;QACA,YAAY,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,YAAY,CAAO;QAC7E,KAAK,IAAI,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACtC,oBAAC,mBAAmB,IAClB,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,GACtB,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,yBAAyB,CAAC,4BAA4B,CAAC,CAAC","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  __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 definition={header} activeHref={activeHref} fireChange={onChangeHandler} fireFollow={onFollowHandler} />\n      )}\n      {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          />\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 } 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"]}

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

@@ -1,4 +1,4 @@
 import { SideNavigationProps } from './interfaces';
 export { SideNavigationProps };
-export default function SideNavigation({ items, ...props }: SideNavigationProps): JSX.Element;
+export default function SideNavigation({ items, collapsed, ...props }: SideNavigationProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,eAkBnF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAU,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,eAqBtG"}

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

@@ -7,8 +7,10 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { InternalSideNavigation } from './internal';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
-export default function SideNavigation({ items = [], ...props }) {
-    const internalProps = useBaseComponent('SideNavigation');
+export default function SideNavigation({ items = [], collapsed = false, ...props }) {
+    const internalProps = useBaseComponent('SideNavigation', {
+        props: { collapsed },
+    });
     const componentAnalyticMetadata = {
         name: 'awsui.SideNavigation',
         label: `.${analyticsSelectors['header-link-text']}`,
@@ -16,7 +18,7 @@ export default function SideNavigation({ items = [], ...props }) {
             activeHref: props.activeHref || '',
         },
     };
-    return (React.createElement(InternalSideNavigation, { ...props, ...internalProps, items: items, ...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata }) }));
+    return (React.createElement(InternalSideNavigation, { ...props, ...internalProps, items: items, collapsed: collapsed, ...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata }) }));
 }
 applyDisplayName(SideNavigation, 'SideNavigation');
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,EAAuB;IAClF,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,MAAM,yBAAyB,GAAsD;QACnF,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,IAAI,kBAAkB,CAAC,kBAAkB,CAAC,EAAE;QACnD,UAAU,EAAE;YACV,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,EAAE;SACnC;KACF,CAAC;IACF,OAAO,CACL,oBAAC,sBAAsB,OACjB,KAAK,KACL,aAAa,EACjB,KAAK,EAAE,KAAK,KACR,6BAA6B,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,GAC3E,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataSideNavigationComponent } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { InternalSideNavigation } from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({ items = [], ...props }: SideNavigationProps) {\n  const internalProps = useBaseComponent('SideNavigation');\n\n  const componentAnalyticMetadata: GeneratedAnalyticsMetadataSideNavigationComponent = {\n    name: 'awsui.SideNavigation',\n    label: `.${analyticsSelectors['header-link-text']}`,\n    properties: {\n      activeHref: props.activeHref || '',\n    },\n  };\n  return (\n    <InternalSideNavigation\n      {...props}\n      {...internalProps}\n      items={items}\n      {...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata })}\n    />\n  );\n}\n\napplyDisplayName(SideNavigation, 'SideNavigation');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAuB;IACrG,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,EAAE;QACvD,KAAK,EAAE,EAAE,SAAS,EAAE;KACrB,CAAC,CAAC;IAEH,MAAM,yBAAyB,GAAsD;QACnF,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,IAAI,kBAAkB,CAAC,kBAAkB,CAAC,EAAE;QACnD,UAAU,EAAE;YACV,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,EAAE;SACnC;KACF,CAAC;IACF,OAAO,CACL,oBAAC,sBAAsB,OACjB,KAAK,KACL,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,KAChB,6BAA6B,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,GAC3E,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataSideNavigationComponent } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { InternalSideNavigation } from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({ items = [], collapsed = false, ...props }: SideNavigationProps) {\n  const internalProps = useBaseComponent('SideNavigation', {\n    props: { collapsed },\n  });\n\n  const componentAnalyticMetadata: GeneratedAnalyticsMetadataSideNavigationComponent = {\n    name: 'awsui.SideNavigation',\n    label: `.${analyticsSelectors['header-link-text']}`,\n    properties: {\n      activeHref: props.activeHref || '',\n    },\n  };\n  return (\n    <InternalSideNavigation\n      {...props}\n      {...internalProps}\n      items={items}\n      collapsed={collapsed}\n      {...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata })}\n    />\n  );\n}\n\napplyDisplayName(SideNavigation, 'SideNavigation');\n"]}

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

@@ -45,6 +45,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.
      * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
      *     our UX guidelines allow only to add a Badge and/or a "New" label.
+     * - `icon` (ReactNode) - Optional content rendered before the link text. Accepts any React node (for example, an `<Icon />` component or a custom `<svg>`).
      *
      * #### Divider
      * Object that represents a horizontal divider between navigation content.
@@ -76,6 +77,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
      *     Although there is no technical limitation to the nesting level,
      *     our UX recommendation is to use only one level.
+     * - `icon` (ReactNode) - Optional content rendered before the link group text. Accepts any React node.
      *
      * #### ExpandableLinkGroup
      *
@@ -88,6 +90,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
      *     Although there is no technical limitation to the nesting level,
      *     our UX recommendation is to use only one level.
+     * - `icon` (ReactNode) - Optional content rendered before the expandable link group text. Accepts any React node.
      */
     items?: ReadonlyArray<SideNavigationProps.Item>;
     /**
@@ -115,11 +118,24 @@ export interface SideNavigationProps extends BaseComponentProps {
      * upon changing the `activeHref` property, this event isn't raised.
      */
     onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;
+    /**
+     * If true, the navigation is rendered in a compact, icon-only state:
+     * - Item text labels and the header title are hidden.
+     * - Section, `Section group`, `Link group`, and `Expandable link group`
+     *   children are not rendered.
+     * - `Items control` is not rendered.
+     * - Items without an `icon` are not rendered. Provide an icon for any
+     *   item that should remain visible while collapsed.
+     *
+     * @defaultValue false
+     */
+    collapsed?: boolean;
 }
 export declare namespace SideNavigationProps {
     interface Logo {
-        src: string;
+        src?: string;
         alt?: string;
+        svg?: React.ReactNode;
     }
     interface Header {
         text?: string;
@@ -136,6 +152,7 @@ export declare namespace SideNavigationProps {
         external?: boolean;
         externalIconAriaLabel?: string;
         info?: React.ReactNode;
+        icon?: React.ReactNode;
     }
     interface Section {
         type: 'section';
@@ -154,6 +171,7 @@ export declare namespace SideNavigationProps {
         href: string;
         info?: React.ReactNode;
         items: ReadonlyArray<Item>;
+        icon?: React.ReactNode;
     }
     interface ExpandableLinkGroup {
         type: 'expandable-link-group';
@@ -161,6 +179,7 @@ export declare namespace SideNavigationProps {
         href: string;
         items: ReadonlyArray<Item>;
         defaultExpanded?: boolean;
+        icon?: React.ReactNode;
     }
     type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;
     interface ChangeDetail {

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n  /**\n   * Controls the header that appears at the top of the navigation component.\n   *\n   * It contains the following:\n   * - `text` (string) - Specifies the header text.\n   * - `href` (string) - Specifies the `href` that the header links to.\n   * - `logo` (object) - Specifies a logo image.\n   */\n  header?: SideNavigationProps.Header;\n\n  /**\n   * A slot located below the header and above the items.\n   **/\n  itemsControl?: React.ReactNode;\n\n  /**\n   * Specifies the `href` of the currently active link.\n   * All items within the navigation with a matching `href` are highlighted.\n   *\n   * `Sections` and `Expandable Page Groups` that contain a highlighted item\n   * are automatically expanded, unless their definitions have the `defaultExpanded`\n   * property explicitly set to `false`.\n   */\n  activeHref?: string;\n\n  /**\n   * Specifies the items to be displayed in the navigation.\n   * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n   *\n   * You can inject extra properties (for example, an ID)\n   * in order to identify the item when it's used in an event `detail`\n   * (for more information, see the events section below).\n   *\n   * #### Link\n   * Object that represents an anchor in the navigation.\n   * Links are rendered as `<a>` tags.\n   * - `type` - `'link'`.\n   * - `text` (string) - Specifies the link text.\n   * - `href` (string) - Specifies the `href` of the link.\n   * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n   *      If set to `true`, an external link icon appears next to the link.\n   *      The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n   *      Additionally, the `activeHref` property won't be modified when a user chooses the link.\n   * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n   * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n   *     our UX guidelines allow only to add a Badge and/or a \"New\" label.\n   *\n   * #### Divider\n   * Object that represents a horizontal divider between navigation content.\n   * It contains `type`: `'divider'` only.\n   *\n   * #### Section\n   * Object that represents a section within the navigation.\n   * - `type`: `'section'`.\n   * - `text` (string) - Specifies the text to display as a title of the section.\n   * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   *\n   * #### Section Group\n   * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n   * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n   * - `type`: `'section-group'`.\n   * - `title` (string) - Specifies the text to display as a title of the section group.\n   * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n   *\n   * #### LinkGroup\n   * Object that represents a group of links.\n   * - `type`: `'link-group'`.\n   * - `text` (string) - Specifies the text of the group link.\n   * - `href` (string) - Specifies the `href` of the group link.\n   * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n   *     our UX guidelines allow only to add a Badge and/or a \"New\" label.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   *\n   * #### ExpandableLinkGroup\n   *\n   * Object that represents an expandable group of links.\n   * - `type`: `'expandable-link-group'`.\n   * - `text` (string) - Specifies the text of the group link.\n   * - `href` (string) - Specifies the `href` of the group link.\n   * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n   *    If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   */\n  items?: ReadonlyArray<SideNavigationProps.Item>;\n\n  /**\n   * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n   * The event `detail` contains a definition of the clicked item.\n   * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n   * and branch your own routing.\n   *\n   * If the event is prevented the `activeHref` property won't be automatically set\n   * to the href of the clicked item so you'll have to do it yourself.\n   */\n  onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n  /**\n   * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n   * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n   *\n   * - `item` (object) - Specifies the item that was changed.\n   * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n   * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n   *     or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n   *     state to `true` if you want your data model to keep track of the current state\n   *     of the navigation items.\n   *\n   * Note: If the expansion is a result of the activation of a nested link\n   * upon changing the `activeHref` property, this event isn't raised.\n   */\n  onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n  export interface Header {\n    text?: string;\n    href: string;\n    logo?: Logo;\n  }\n\n  export interface Divider {\n    type: 'divider';\n  }\n\n  export interface Link {\n    type: 'link';\n    text: string;\n    href: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    info?: React.ReactNode;\n  }\n\n  export interface Section {\n    type: 'section';\n    text: string;\n    items: ReadonlyArray<Item>;\n    defaultExpanded?: boolean;\n  }\n\n  export interface SectionGroup {\n    type: 'section-group';\n    title: string;\n    items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;\n  }\n  export interface LinkGroup {\n    type: 'link-group';\n    text: string;\n    href: string;\n    info?: React.ReactNode;\n    items: ReadonlyArray<Item>;\n  }\n\n  export interface ExpandableLinkGroup {\n    type: 'expandable-link-group';\n    text: string;\n    href: string;\n    items: ReadonlyArray<Item>;\n    defaultExpanded?: boolean;\n  }\n\n  export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;\n\n  export interface ChangeDetail {\n    item: Section | ExpandableLinkGroup;\n    expanded: boolean;\n    expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n  }\n\n  export interface FollowDetail extends BaseNavigationDetail {\n    text?: string;\n    href: string;\n    type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';\n    info?: React.ReactNode;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n  /**\n   * Controls the header that appears at the top of the navigation component.\n   *\n   * It contains the following:\n   * - `text` (string) - Specifies the header text.\n   * - `href` (string) - Specifies the `href` that the header links to.\n   * - `logo` (object) - Specifies a logo image.\n   */\n  header?: SideNavigationProps.Header;\n\n  /**\n   * A slot located below the header and above the items.\n   **/\n  itemsControl?: React.ReactNode;\n\n  /**\n   * Specifies the `href` of the currently active link.\n   * All items within the navigation with a matching `href` are highlighted.\n   *\n   * `Sections` and `Expandable Page Groups` that contain a highlighted item\n   * are automatically expanded, unless their definitions have the `defaultExpanded`\n   * property explicitly set to `false`.\n   */\n  activeHref?: string;\n\n  /**\n   * Specifies the items to be displayed in the navigation.\n   * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n   *\n   * You can inject extra properties (for example, an ID)\n   * in order to identify the item when it's used in an event `detail`\n   * (for more information, see the events section below).\n   *\n   * #### Link\n   * Object that represents an anchor in the navigation.\n   * Links are rendered as `<a>` tags.\n   * - `type` - `'link'`.\n   * - `text` (string) - Specifies the link text.\n   * - `href` (string) - Specifies the `href` of the link.\n   * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n   *      If set to `true`, an external link icon appears next to the link.\n   *      The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n   *      Additionally, the `activeHref` property won't be modified when a user chooses the link.\n   * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n   * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n   *     our UX guidelines allow only to add a Badge and/or a \"New\" label.\n   * - `icon` (ReactNode) - Optional content rendered before the link text. Accepts any React node (for example, an `<Icon />` component or a custom `<svg>`).\n   *\n   * #### Divider\n   * Object that represents a horizontal divider between navigation content.\n   * It contains `type`: `'divider'` only.\n   *\n   * #### Section\n   * Object that represents a section within the navigation.\n   * - `type`: `'section'`.\n   * - `text` (string) - Specifies the text to display as a title of the section.\n   * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   *\n   * #### Section Group\n   * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n   * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n   * - `type`: `'section-group'`.\n   * - `title` (string) - Specifies the text to display as a title of the section group.\n   * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n   *\n   * #### LinkGroup\n   * Object that represents a group of links.\n   * - `type`: `'link-group'`.\n   * - `text` (string) - Specifies the text of the group link.\n   * - `href` (string) - Specifies the `href` of the group link.\n   * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n   *     our UX guidelines allow only to add a Badge and/or a \"New\" label.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   * - `icon` (ReactNode) - Optional content rendered before the link group text. Accepts any React node.\n   *\n   * #### ExpandableLinkGroup\n   *\n   * Object that represents an expandable group of links.\n   * - `type`: `'expandable-link-group'`.\n   * - `text` (string) - Specifies the text of the group link.\n   * - `href` (string) - Specifies the `href` of the group link.\n   * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n   *    If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n   * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n   *     Although there is no technical limitation to the nesting level,\n   *     our UX recommendation is to use only one level.\n   * - `icon` (ReactNode) - Optional content rendered before the expandable link group text. Accepts any React node.\n   */\n  items?: ReadonlyArray<SideNavigationProps.Item>;\n\n  /**\n   * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n   * The event `detail` contains a definition of the clicked item.\n   * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n   * and branch your own routing.\n   *\n   * If the event is prevented the `activeHref` property won't be automatically set\n   * to the href of the clicked item so you'll have to do it yourself.\n   */\n  onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n  /**\n   * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n   * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n   *\n   * - `item` (object) - Specifies the item that was changed.\n   * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n   * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n   *     or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n   *     state to `true` if you want your data model to keep track of the current state\n   *     of the navigation items.\n   *\n   * Note: If the expansion is a result of the activation of a nested link\n   * upon changing the `activeHref` property, this event isn't raised.\n   */\n  onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n\n  /**\n   * If true, the navigation is rendered in a compact, icon-only state:\n   * - Item text labels and the header title are hidden.\n   * - Section, `Section group`, `Link group`, and `Expandable link group`\n   *   children are not rendered.\n   * - `Items control` is not rendered.\n   * - Items without an `icon` are not rendered. Provide an icon for any\n   *   item that should remain visible while collapsed.\n   *\n   * @defaultValue false\n   */\n  collapsed?: boolean;\n}\n\nexport namespace SideNavigationProps {\n  export interface Logo {\n    src?: string;\n    alt?: string;\n    svg?: React.ReactNode;\n  }\n  export interface Header {\n    text?: string;\n    href: string;\n    logo?: Logo;\n  }\n\n  export interface Divider {\n    type: 'divider';\n  }\n\n  export interface Link {\n    type: 'link';\n    text: string;\n    href: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n    info?: React.ReactNode;\n    icon?: React.ReactNode;\n  }\n\n  export interface Section {\n    type: 'section';\n    text: string;\n    items: ReadonlyArray<Item>;\n    defaultExpanded?: boolean;\n  }\n\n  export interface SectionGroup {\n    type: 'section-group';\n    title: string;\n    items: ReadonlyArray<Section | Link | LinkGroup | ExpandableLinkGroup>;\n  }\n  export interface LinkGroup {\n    type: 'link-group';\n    text: string;\n    href: string;\n    info?: React.ReactNode;\n    items: ReadonlyArray<Item>;\n    icon?: React.ReactNode;\n  }\n\n  export interface ExpandableLinkGroup {\n    type: 'expandable-link-group';\n    text: string;\n    href: string;\n    items: ReadonlyArray<Item>;\n    defaultExpanded?: boolean;\n    icon?: React.ReactNode;\n  }\n\n  export type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;\n\n  export interface ChangeDetail {\n    item: Section | ExpandableLinkGroup;\n    expanded: boolean;\n    expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;\n  }\n\n  export interface FollowDetail extends BaseNavigationDetail {\n    text?: string;\n    href: string;\n    type?: 'link' | 'link-group' | 'expandable-link-group' | 'section-header';\n    info?: React.ReactNode;\n  }\n}\n"]}

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

@@ -5,15 +5,16 @@ interface BaseItemComponentProps {
     fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;
     fireFollow: (item: SideNavigationProps.Link | SideNavigationProps.Header | SideNavigationProps.LinkGroup | SideNavigationProps.ExpandableLinkGroup, event: React.SyntheticEvent | Event) => void;
     position?: string;
+    collapsed?: boolean;
 }
 interface HeaderProps extends BaseItemComponentProps {
     definition: SideNavigationProps.Header;
 }
-export declare function Header({ definition, activeHref, fireFollow }: HeaderProps): JSX.Element;
+export declare function Header({ definition, activeHref, fireFollow, collapsed }: HeaderProps): JSX.Element;
 interface NavigationItemsListProps extends BaseItemComponentProps {
     items: ReadonlyArray<SideNavigationProps.Item>;
     variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
 }
-export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, }: 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,KAA+D,MAAM,OAAO,CAAC;AAcpF,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;CACnB;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,eA+CzE;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,GACd,EAAE,wBAAwB,eA8I1B"}
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAe5F,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,eA0Q1B"}

package/lib/internal/template/side-navigation/parts.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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalBox from '../box/internal';
@@ -10,11 +10,12 @@ import InternalIcon from '../icon/internal';
 import { isPlainLeftClick } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import Tooltip from '../tooltip/internal';
 import { hasActiveLink } from './util';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export function Header({ definition, activeHref, fireFollow }) {
+export function Header({ definition, activeHref, fireFollow, collapsed }) {
     checkSafeUrl('SideNavigation', definition.href);
     const onClick = useCallback((event) => {
         if (isPlainLeftClick(event)) {
@@ -31,15 +32,18 @@ export function Header({ definition, activeHref, fireFollow }) {
         },
     };
     return (React.createElement(React.Fragment, null,
-        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 && (React.createElement("img", { className: clsx(styles['header-logo'], {
-                        [styles['header-logo--stretched']]: !definition.text,
-                    }), ...definition.logo })),
-                React.createElement("span", { className: clsx(styles['header-link-text'], analyticsSelectors['header-link-text']) }, definition.text))),
+        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) },
+                definition.logo &&
+                    (definition.logo.svg ? (React.createElement("span", { className: clsx(styles['header-logo'], {
+                            [styles['header-logo--stretched']]: !definition.text || collapsed,
+                        }) }, definition.logo.svg)) : (React.createElement("img", { className: clsx(styles['header-logo'], {
+                            [styles['header-logo--stretched']]: !definition.text || collapsed,
+                        }), 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" })));
 }
-export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', }) {
+export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', collapsed, }) {
     const lists = [];
     let currentListIndex = 0;
     lists[currentListIndex] = {
@@ -50,12 +54,54 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
         var _a, _b, _c, _d, _e;
         const itemid = index + 1;
         const itemPosition = `${position ? `${position},` : ''}${itemid}`;
+        // Renders icon-bearing children of a container item as a collapsed group.
+        // The inner <ul> carries the group label so list semantics are preserved
+        // for screen readers even when the visual header is hidden.
+        function pushCollapsedGroup(children, label) {
+            var _a;
+            const iconChildren = children.filter(child => child.icon);
+            if (iconChildren.length === 0) {
+                return;
+            }
+            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 })));
+            });
+            const prevItem = index > 0 ? items[index - 1] : null;
+            const nextItem = index < items.length - 1 ? items[index + 1] : null;
+            (_a = lists[currentListIndex].items) === null || _a === void 0 ? void 0 : _a.push({
+                element: (React.createElement("li", { key: `group-${itemid}`, className: clsx(styles['list-item--group'], (prevItem === null || prevItem === void 0 ? void 0 : prevItem.type) === 'divider' && styles['list-item--group-no-padding-start'], (nextItem === null || nextItem === void 0 ? void 0 : nextItem.type) === 'divider' && styles['list-item--group-no-padding-end']) },
+                    React.createElement("ul", { className: styles['list--collapsed-group'], "aria-label": label }, groupElements))),
+            });
+        }
+        // In collapsed mode, flatten container items to show only icon-bearing children.
+        if (collapsed && (item.type === 'expandable-link-group' || item.type === 'link-group') && !item.icon) {
+            const group = item;
+            pushCollapsedGroup(group.items, group.text);
+            return;
+        }
+        if (collapsed && (item.type === 'section' || item.type === 'section-group')) {
+            const sectionLabel = item.type === 'section'
+                ? item.text
+                : item.title;
+            // Section-groups may contain nested sections — flatten one level.
+            const childItems = item.type === 'section'
+                ? item.items
+                : item.items.flatMap(child => child.type === 'section' ? child.items : [child]);
+            pushCollapsedGroup(childItems, sectionLabel);
+            return;
+        }
+        if (collapsed && item.type !== 'divider' && !item.icon) {
+            return;
+        }
         switch (item.type) {
             case 'divider': {
                 const dividerIndex = lists.length;
                 lists[dividerIndex] = {
+                    listVariant: variant,
                     element: (React.createElement("div", { "data-itemid": `item-${itemid}` },
-                        React.createElement(Divider, { variant: "default" }))),
+                        React.createElement(Divider, { variant: "default", collapsed: collapsed }))),
                 };
                 currentListIndex = lists.length;
                 lists[currentListIndex] = {
@@ -66,61 +112,103 @@ 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: styles['list-item'] },
-                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], item.info && styles['list-item--info']) },
+                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
                 });
                 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: styles['list-item'] },
-                        React.createElement(Section, { definition: item, activeHref: activeHref, variant: variant, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
+                    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 }))),
                 });
                 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: styles['list-item'] },
-                        React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
+                    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 }))),
                 });
                 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: styles['list-item'] },
-                        React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
+                    element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: clsx(styles['list-item'], collapsed && styles['list-item--collapsed'], item.info && styles['list-item--info']) },
+                        React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition, collapsed: collapsed }))),
                 });
                 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: styles['list-item'] },
-                        React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant, position: itemPosition }))),
+                    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 }))),
                 });
                 return;
             }
         }
     });
-    return (React.createElement(React.Fragment, null, lists.map((list, index) => {
+    // In collapsed mode, skip empty item segments and deduplicate consecutive dividers.
+    const filteredLists = collapsed
+        ? lists.filter((list, index) => {
+            if (list.items) {
+                return list.items.length > 0;
+            }
+            // Divider — skip if preceded by another divider or empty segment, or followed by nothing.
+            const prevVisible = lists
+                .slice(0, index)
+                .reverse()
+                .find(l => !l.items || l.items.length > 0);
+            const nextVisible = lists.slice(index + 1).find(l => !l.items || l.items.length > 0);
+            return ((!prevVisible || (prevVisible.items !== undefined && prevVisible.items.length > 0)) &&
+                nextVisible !== undefined &&
+                (nextVisible.items === undefined || nextVisible.items.length > 0));
+        })
+        : lists;
+    return (React.createElement(React.Fragment, null, filteredLists.map((list, index) => {
         if (!list.items || list.items.length === 0) {
             return (React.createElement("div", { key: `hr-${index}`, className: clsx(styles.list, styles[`list-variant-${variant}`], {
                     [styles['list-variant-root--first']]: list.listVariant === 'root' && index === 0,
+                    [styles['list-variant-root--collapsed']]: list.listVariant === 'root' && collapsed,
                 }) }, list.element));
         }
         else {
             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,
                 }) }, list.items.map(item => item.element)));
         }
     })));
 }
-function Divider({ variant = 'default', isPresentational = false }) {
-    return (React.createElement("hr", { className: clsx(styles.divider, styles[`divider-${variant}`]), role: isPresentational ? 'presentation' : undefined }));
+function Divider({ variant = 'default', isPresentational = false, collapsed }) {
+    return (React.createElement("hr", { className: clsx(styles.divider, styles[`divider-${variant}`], collapsed && styles['divider--collapsed']), role: isPresentational ? 'presentation' : undefined }));
+}
+const ItemIcon = React.forwardRef(function ItemIcon({ icon, collapsed, className, ...rest }, ref) {
+    if (!icon) {
+        return null;
+    }
+    return (React.createElement("span", { ref: ref, className: clsx(styles['item-icon'], testUtilStyles['item-icon'], collapsed && styles['item-icon--collapsed'], className), ...rest }, icon));
+});
+// Manages a tooltip that shows the item's text label on focus or hover.
+// 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);
+    const triggerRef = useRef(null);
+    const triggerProps = {
+        onFocus: () => setShow(true),
+        onBlur: () => setShow(false),
+        onMouseEnter: () => setShow(true),
+        onMouseLeave: () => setShow(false),
+    };
+    const tooltip = show ? (React.createElement(Tooltip, { getTrack: () => triggerRef.current, content: label, position: "right", onEscape: () => setShow(false) })) : null;
+    return { triggerRef, triggerProps, tooltip };
 }
-function Link({ definition, activeHref, fireFollow, position }) {
+function Link({ definition, activeHref, fireFollow, position, collapsed }) {
     checkSafeUrl('SideNavigation', definition.href);
     const isActive = definition.href === activeHref;
     const i18n = useInternalI18n('link');
+    const collapsedTooltip = useCollapsedTooltip(definition.text);
     const onClick = useCallback((event) => {
         if (isPlainLeftClick(event)) {
             fireFollow(definition, event);
@@ -137,13 +225,19 @@ function Link({ definition, activeHref, fireFollow, position }) {
     };
     const renderedExternalIconAriaLabel = i18n('externalIconAriaLabel', definition.externalIconAriaLabel);
     return (React.createElement(React.Fragment, null,
-        React.createElement("a", { href: definition.href, className: clsx(styles.link, { [styles['link-active']]: isActive }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick, ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
-            React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
-            definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
-                React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] })))),
-        definition.info && React.createElement("span", { className: clsx(styles.info, testUtilStyles.info) }, definition.info)));
+        React.createElement("a", { ref: collapsed ? collapsedTooltip.triggerRef : undefined, href: definition.href, className: clsx(styles.link, {
+                [styles['link-active']]: isActive,
+                [styles['link--collapsed']]: collapsed,
+            }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-current": definition.href === activeHref ? 'page' : undefined, "aria-label": collapsed ? definition.text : undefined, onClick: onClick, ...(collapsed ? collapsedTooltip.triggerProps : {}), ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
+            React.createElement(ItemIcon, { icon: definition.icon, collapsed: collapsed, "aria-hidden": collapsed ? true : undefined }),
+            !collapsed && (React.createElement("span", { className: styles['link-text-wrapper'] },
+                React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
+                definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
+                    React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] }))))),
+            collapsed && collapsedTooltip.tooltip),
+        !collapsed && definition.info && (React.createElement("span", { className: clsx(styles.info, testUtilStyles.info) }, definition.info))));
 }
-function Section({ definition, activeHref, fireFollow, fireChange, variant, position }) {
+function Section({ definition, activeHref, fireFollow, fireChange, variant, position, collapsed }) {
     var _a;
     const [expanded, setExpanded] = useState((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     const isVisualRefresh = useVisualRefresh();
@@ -155,21 +249,34 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant, posi
         var _a;
         setExpanded((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     }, [definition]);
-    return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: clsx(styles.section, variant === 'section-group' && styles['section--no-ident'], isVisualRefresh && styles.refresh), headerText: definition.text },
+    if (collapsed) {
+        return null;
+    }
+    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: definition.text },
         React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
 }
-function SectionGroup({ definition, activeHref, fireFollow, fireChange, position }) {
+function SectionGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed }) {
+    if (collapsed) {
+        return null;
+    }
     return (React.createElement("div", { className: styles['section-group'] },
         React.createElement(InternalBox, { className: styles['section-group-title'], variant: "h3" }, definition.title),
         React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
 }
-function LinkGroup({ definition, activeHref, fireFollow, fireChange, position }) {
+function LinkGroup({ definition, activeHref, fireFollow, fireChange, position, collapsed }) {
     checkSafeUrl('SideNavigation', definition.href);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text, info: definition.info }, fireFollow: (_, event) => fireFollow(definition, event), fireChange: fireChange, activeHref: activeHref, position: position }),
-        React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
+        React.createElement(Link, { definition: {
+                type: 'link',
+                href: definition.href,
+                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 }))));
 }
-function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, }) {
+function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, collapsed, }) {
     // Check whether the definition contains an active link and memoize it to avoid
     // rechecking every time.
     const containsActiveLink = useMemo(() => {
@@ -203,7 +310,10 @@ function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, v
             fireChange(definition, true);
         }
     };
-    return (React.createElement(InternalExpandableSection, { className: clsx(styles['expandable-link-group'], variant === 'section-group' && styles['expandable-link-group--no-ident']), 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 }, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref, position: position }) },
+    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(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 })));
 }
 //# sourceMappingURL=parts.js.map