@cloudscape-design/components 3.0.0

package/side-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAOjB;IANpB,IAAA,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,KAAK,cAN6B,yDAOtC,CADS;IAEA,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,gBAAgB,CAAC,kBAAvC,CAAwC;IACjE,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,IAAM,SAAS,GAAG,OAAO,CAAC,cAAM,OAAA,8BAA8B,CAAC,KAAK,CAAC,EAArC,CAAqC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhF,IAAI,aAAa,EAAE;QACjB,kDAAkD;QAClD,sDAAsD;QACtD,SAAS,CAAC,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;KACtD;IAED,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,IAA2E,EAAE,QAAiB;QAC7F,wGAAwG;QACxG,oEAAoE;QACpE,sBAAsB,CAAC,QAAQ,EAAE,EAAE,IAAI,MAAA,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,IAAM,eAAe,GAAG,WAAW,CACjC,UACE,IAI2C,EAC3C,WAAyC;QAEzC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC1F,MAAM,IAAI,CACT,oBAAC,MAAM,IAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,GAAI,CACjH;QACA,KAAK,IAAI,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACtC,oBAAC,QAAQ,IACP,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,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\nimport React, { useMemo, useCallback, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, ItemList } from './internal';\nimport { generateExpandableItemsMapping, checkDuplicateHrefs } from './util';\nimport styles from './styles.css.js';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({\n  header,\n  activeHref,\n  items = [],\n  onFollow,\n  onChange,\n  ...props\n}: SideNavigationProps) {\n  const { __internalRootRef } = useBaseComponent('SideNavigation');\n  const baseProps = getBaseProps(props);\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      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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 {...baseProps} className={clsx(styles.root, baseProps.className)} ref={__internalRootRef}>\n      {header && (\n        <Header definition={header} activeHref={activeHref} fireChange={onChangeHandler} fireFollow={onFollowHandler} />\n      )}\n      {items && (\n        <div className={styles['list-container']}>\n          <ItemList\n            variant=\"root\"\n            items={items}\n            fireFollow={onFollowHandler}\n            fireChange={onChangeHandler}\n            activeHref={activeHref}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(SideNavigation, 'SideNavigation');\n"]}

package/side-navigation/interfaces.d.ts

@@ -0,0 +1,159 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';
+export interface SideNavigationProps extends BaseComponentProps {
+    /**
+     * Controls the header that appears at the top of the navigation component.
+     *
+     * It contains the following:
+     * - `text` (string) - Specifies the header text.
+     * - `href` (string) - Specifies the `href` that the header links to.
+     * - `logo` (object) - Specifies a logo image.
+     */
+    header?: SideNavigationProps.Header;
+    /**
+     * Specifies the `href` of the currently active link.
+     * All items within the navigation with a matching `href` are highlighted.
+     *
+     * `Sections` and `Expandable Page Groups` that contain a highlighted item
+     * are automatically expanded, unless their definitions have the `defaultExpanded`
+     * property explicitly set to `false`.
+     */
+    activeHref?: string;
+    /**
+     * Specifies the items to be displayed in the navigation.
+     * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.
+     *
+     * You can inject extra properties (for example, an ID)
+     * in order to identify the item when it's used in an event `detail`
+     * (for more information, see the events section below).
+     *
+     * #### Link
+     * Object that represents an anchor in the navigation.
+     * Links are rendered as `<a>` tags.
+     * - `type` - `'link'`.
+     * - `text` (string) - Specifies the link text.
+     * - `href` (string) - Specifies the `href` of the link.
+     * - `external` (boolean) - Determines whether to display an external link icon next to the link.
+     *      If set to `true`, an external link icon appears next to the link.
+     *      The anchor also has the attributes `target="_blank"` and `rel="noopener"`.
+     *      Additionally, the `activeHref` property won't be modified when a user chooses the link.
+     * - `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.
+     *
+     * #### Divider
+     * Object that represents a horizontal divider between navigation content.
+     * It contains `type`: `'divider'` only.
+     *
+     * #### Section
+     * Object that represents a section within the navigation.
+     * - `type`: `'section'`.
+     * - `text` (string) - Specifies the text to display as a title of the section.
+     * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.
+     * - `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.
+     *
+     * #### LinkGroup
+     * Object that represents a group of links.
+     * - `type`: `'link-group'`.
+     * - `text` (string) - Specifies the text of the group link.
+     * - `href` (string) - Specifies the `href` of the group link.
+     * - `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.
+     *
+     * #### ExpandableLinkGroup
+     *
+     * Object that represents an expandable group of links.
+     * - `type`: `'expandable-link-group'`.
+     * - `text` (string) - Specifies the text of the group link.
+     * - `href` (string) - Specifies the `href` of the group link.
+     * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.
+     *    If not explicitly set, the group is collapsed by default, unless one of the nested links is active.
+     * - `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.
+     */
+    items?: ReadonlyArray<SideNavigationProps.Item>;
+    /**
+     * Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).
+     * The event `detail` contains a definition of the clicked item.
+     * Use this event to prevent default browser navigation (by calling `preventDefault` method)
+     * and branch your own routing.
+     *
+     * If the event is prevented the `activeHref` property won't be automatically set
+     * to the href of the clicked item so you'll have to do it yourself.
+     */
+    onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;
+    /**
+     * Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes
+     * as a result of a user interaction. The event `detail` contains an object with information about the changed item.
+     *
+     * - `item` (object) - Specifies the item that was changed.
+     * - `expanded` (boolean) - Specifies whether the item is expanded or not.
+     * - `expandableParents` (array) - A list of parent items that have a type of `Section`
+     *     or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded
+     *     state to `true` if you want your data model to keep track of the current state
+     *     of the navigation items.
+     *
+     * Note: If the expansion is a result of the activation of a nested link
+     * upon changing the `activeHref` property, this event isn't raised.
+     */
+    onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;
+}
+export declare namespace SideNavigationProps {
+    interface Logo {
+        src: string;
+        alt?: string;
+    }
+    interface Header {
+        text?: string;
+        href: string;
+        logo?: Logo;
+    }
+    interface Divider {
+        type: 'divider';
+    }
+    interface Link {
+        type: 'link';
+        text: string;
+        href: string;
+        external?: boolean;
+        externalIconAriaLabel?: string;
+        info?: React.ReactNode;
+    }
+    interface Section {
+        type: 'section';
+        text: string;
+        items: ReadonlyArray<Item>;
+        defaultExpanded?: boolean;
+    }
+    interface LinkGroup {
+        type: 'link-group';
+        text: string;
+        href: string;
+        items: ReadonlyArray<Item>;
+    }
+    interface ExpandableLinkGroup {
+        type: 'expandable-link-group';
+        text: string;
+        href: string;
+        items: ReadonlyArray<Item>;
+        defaultExpanded?: boolean;
+    }
+    type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup;
+    interface ChangeDetail {
+        item: Section | ExpandableLinkGroup;
+        expanded: boolean;
+        expandableParents: ReadonlyArray<Section | ExpandableLinkGroup>;
+    }
+    interface FollowDetail extends BaseNavigationDetail {
+        text?: string;
+        href: string;
+        type?: 'link' | 'link-group' | 'expandable-link-group';
+        info?: React.ReactNode;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/side-navigation/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE7G,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC;IAEpC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuDG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAEhD;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEpE;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;CACxE;AAED,yBAAiB,mBAAmB,CAAC;IACnC,UAAiB,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IACD,UAAiB,MAAM;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,IAAI,CAAC;KACb;IAED,UAAiB,OAAO;QACtB,IAAI,EAAE,SAAS,CAAC;KACjB;IAED,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;IAED,UAAiB,OAAO;QACtB,IAAI,EAAE,SAAS,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;IAED,UAAiB,SAAS;QACxB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;KAC5B;IAED,UAAiB,mBAAmB;QAClC,IAAI,EAAE,uBAAuB,CAAC;QAC9B,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;IAED,KAAY,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,mBAAmB,CAAC;IAE9E,UAAiB,YAAY;QAC3B,IAAI,EAAE,OAAO,GAAG,mBAAmB,CAAC;QACpC,QAAQ,EAAE,OAAO,CAAC;QAClB,iBAAiB,EAAE,aAAa,CAAC,OAAO,GAAG,mBAAmB,CAAC,CAAC;KACjE;IAED,UAAiB,YAAa,SAAQ,oBAAoB;QACxD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,uBAAuB,CAAC;QACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;CACF"}

package/side-navigation/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/side-navigation/interfaces.js.map

@@ -0,0 +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';\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   * 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   * #### 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   * - `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 LinkGroup {\n    type: 'link-group';\n    text: string;\n    href: string;\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;\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';\n    info?: React.ReactNode;\n  }\n}\n"]}

package/side-navigation/internal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SideNavigationProps } from './interfaces';
+interface BaseItemComponentProps {
+    activeHref?: string;
+    fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;
+    fireFollow: (item: SideNavigationProps.Link | SideNavigationProps.Header | SideNavigationProps.LinkGroup | SideNavigationProps.ExpandableLinkGroup, event: React.SyntheticEvent | Event) => void;
+}
+export interface HeaderProps extends BaseItemComponentProps {
+    definition: SideNavigationProps.Header;
+}
+export declare function Header({ definition, activeHref, fireFollow }: HeaderProps): JSX.Element;
+export interface ItemListProps extends BaseItemComponentProps {
+    items: ReadonlyArray<SideNavigationProps.Item>;
+    variant: 'section' | 'link-group' | 'expandable-link-group' | 'root';
+}
+export declare function ItemList({ variant, items, activeHref, fireChange, fireFollow }: ItemListProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/side-navigation/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAMzE,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;CACX;AAED,MAAM,WAAW,WAAY,SAAQ,sBAAsB;IACzD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,eAqCzE;AAED,MAAM,WAAW,aAAc,SAAQ,sBAAsB;IAC3D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACtE;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,aAAa,eA2B7F"}

package/side-navigation/internal.js

@@ -0,0 +1,125 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import InternalExpandableSection from '../expandable-section/internal';
+import InternalIcon from '../icon/internal';
+import styles from './styles.css.js';
+import { isPlainLeftClick } from '../internal/events';
+import useFocusVisible from '../internal/hooks/focus-visible';
+import { hasActiveLink } from './util';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
+export function Header(_a) {
+    var _b, _c;
+    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow;
+    checkSafeUrl('SideNavigation', definition.href);
+    var focusVisible = useFocusVisible();
+    var onClick = useCallback(function (event) {
+        if (isPlainLeftClick(event)) {
+            fireFollow(definition, event);
+        }
+    }, [fireFollow, definition]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: styles.header },
+            React.createElement("a", __assign({}, focusVisible, { href: definition.href, className: clsx(styles['header-link'], (_b = {}, _b[styles['header-link--has-logo']] = !!definition.logo, _b)), "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick }),
+                definition.logo && (React.createElement("img", __assign({ className: clsx(styles['header-logo'], (_c = {},
+                        _c[styles['header-logo--stretched']] = !definition.text,
+                        _c)) }, definition.logo))),
+                React.createElement("span", { className: styles['header-link-text'] }, definition.text))),
+        React.createElement(Divider, { variant: "header" })));
+}
+export function ItemList(_a) {
+    var variant = _a.variant, items = _a.items, activeHref = _a.activeHref, fireChange = _a.fireChange, fireFollow = _a.fireFollow;
+    return (React.createElement("ul", { className: clsx(styles.list, styles["list-variant-".concat(variant)]) }, items.map(function (item, i) { return (React.createElement("li", { key: i, className: styles['list-item'] },
+        item.type === 'divider' && React.createElement(Divider, { variant: "default" }),
+        item.type === 'link' && (React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
+        item.type === 'section' && (React.createElement(Section, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
+        item.type === 'link-group' && (React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })),
+        item.type === 'expandable-link-group' && (React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow })))); })));
+}
+function Divider(_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
+    return React.createElement("hr", { className: clsx(styles.divider, styles["divider-".concat(variant)]) });
+}
+function Link(_a) {
+    var _b;
+    var definition = _a.definition, expanded = _a.expanded, activeHref = _a.activeHref, fireFollow = _a.fireFollow;
+    checkSafeUrl('SideNavigation', definition.href);
+    var isActive = definition.href === activeHref;
+    var focusVisible = useFocusVisible();
+    var onClick = useCallback(function (event) {
+        // Prevent the click event from toggling outer expandable sections.
+        event.stopPropagation();
+        if (isPlainLeftClick(event)) {
+            fireFollow(definition, event);
+        }
+    }, [fireFollow, definition]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("a", __assign({}, focusVisible, { href: definition.href, className: clsx(styles.link, (_b = {}, _b[styles['link-active']] = isActive, _b)), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-expanded": expanded, "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick }),
+            definition.text,
+            definition.external && (React.createElement("span", { "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? 'img' : undefined },
+                React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] })))),
+        definition.info && React.createElement("span", { className: styles.info }, definition.info)));
+}
+function Section(_a) {
+    var _b;
+    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
+    var _c = useState((_b = definition.defaultExpanded) !== null && _b !== void 0 ? _b : true), expanded = _c[0], setExpanded = _c[1];
+    var onExpandedChange = useCallback(function (e) {
+        fireChange(definition, e.detail.expanded);
+        setExpanded(e.detail.expanded);
+    }, [definition, fireChange]);
+    useEffect(function () {
+        var _a;
+        setExpanded((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
+    }, [definition]);
+    return (React.createElement(InternalExpandableSection, { variant: "footer", expanded: expanded, onChange: onExpandedChange, className: styles.section, header: definition.text },
+        React.createElement(ItemList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+}
+function LinkGroup(_a) {
+    var definition = _a.definition, activeHref = _a.activeHref, fireFollow = _a.fireFollow, fireChange = _a.fireChange;
+    checkSafeUrl('SideNavigation', definition.href);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, fireFollow: function (_, event) { return fireFollow(definition, event); }, fireChange: fireChange, activeHref: activeHref }),
+        React.createElement(ItemList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+}
+function ExpandableLinkGroup(_a) {
+    var definition = _a.definition, fireFollow = _a.fireFollow, fireChange = _a.fireChange, activeHref = _a.activeHref;
+    // Check whether the definition contains an active link and memoize it to avoid
+    // rechecking every time.
+    var containsActiveLink = useMemo(function () {
+        return activeHref ? hasActiveLink(definition.items, activeHref) : false;
+    }, [activeHref, definition.items]);
+    var _b = useState(function () {
+        var _a;
+        return (_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : (definition.href === activeHref || containsActiveLink);
+    }), expanded = _b[0], setExpanded = _b[1];
+    var _c = useState(), userExpanded = _c[0], setUserExpanded = _c[1];
+    // Reset user expansion status when the items property is updated.
+    useEffect(function () { return setUserExpanded(undefined); }, [definition]);
+    // By default, the expandable section is open when there's an active link inside.
+    useEffect(function () {
+        setExpanded(definition.href === activeHref || containsActiveLink);
+    }, [definition.href, containsActiveLink, activeHref]);
+    // If the definition object itself is updated, reset the expansion state to default.
+    useEffect(function () {
+        if (definition.defaultExpanded !== undefined) {
+            setExpanded(definition.defaultExpanded);
+        }
+    }, [definition]);
+    var onExpandedChange = useCallback(function (e) {
+        fireChange(definition, e.detail.expanded);
+        setUserExpanded(e.detail.expanded);
+    }, [definition, fireChange]);
+    var onHeaderFollow = function (_, event) {
+        fireFollow(definition, event);
+        setUserExpanded(true);
+        if (!expanded) {
+            fireChange(definition, true);
+        }
+    };
+    return (React.createElement(InternalExpandableSection, { className: styles['expandable-link-group'], variant: "navigation", expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, onChange: onExpandedChange, header: React.createElement(Link, { definition: { type: 'link', href: definition.href, text: definition.text }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }) },
+        React.createElement(ItemList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+}
+//# sourceMappingURL=internal.js.map

package/side-navigation/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/side-navigation/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { ExpandableSectionProps } from '../expandable-section/interfaces';\nimport InternalExpandableSection from '../expandable-section/internal';\nimport InternalIcon from '../icon/internal';\n\nimport { SideNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { NonCancelableCustomEvent, isPlainLeftClick } from '../internal/events';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { hasActiveLink } from './util';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ninterface BaseItemComponentProps {\n  activeHref?: string;\n  fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;\n  fireFollow: (\n    item:\n      | SideNavigationProps.Link\n      | SideNavigationProps.Header\n      | SideNavigationProps.LinkGroup\n      | SideNavigationProps.ExpandableLinkGroup,\n    event: React.SyntheticEvent | Event\n  ) => void;\n}\n\nexport interface HeaderProps extends BaseItemComponentProps {\n  definition: SideNavigationProps.Header;\n}\n\nexport function Header({ definition, activeHref, fireFollow }: HeaderProps) {\n  checkSafeUrl('SideNavigation', definition.href);\n  const focusVisible = useFocusVisible();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        fireFollow(definition, event);\n      }\n    },\n    [fireFollow, definition]\n  );\n\n  return (\n    <>\n      <div className={styles.header}>\n        <a\n          {...focusVisible}\n          href={definition.href}\n          className={clsx(styles['header-link'], { [styles['header-link--has-logo']]: !!definition.logo })}\n          aria-current={definition.href === activeHref ? 'page' : undefined}\n          onClick={onClick}\n        >\n          {definition.logo && (\n            <img\n              className={clsx(styles['header-logo'], {\n                [styles['header-logo--stretched']]: !definition.text,\n              })}\n              {...definition.logo}\n            />\n          )}\n          <span className={styles['header-link-text']}>{definition.text}</span>\n        </a>\n      </div>\n      <Divider variant=\"header\" />\n    </>\n  );\n}\n\nexport interface ItemListProps extends BaseItemComponentProps {\n  items: ReadonlyArray<SideNavigationProps.Item>;\n  variant: 'section' | 'link-group' | 'expandable-link-group' | 'root';\n}\n\nexport function ItemList({ variant, items, activeHref, fireChange, fireFollow }: ItemListProps) {\n  return (\n    <ul className={clsx(styles.list, styles[`list-variant-${variant}`])}>\n      {items.map((item, i) => (\n        <li key={i} className={styles['list-item']}>\n          {item.type === 'divider' && <Divider variant=\"default\" />}\n          {item.type === 'link' && (\n            <Link definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n          )}\n          {item.type === 'section' && (\n            <Section definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n          )}\n          {item.type === 'link-group' && (\n            <LinkGroup definition={item} activeHref={activeHref} fireChange={fireChange} fireFollow={fireFollow} />\n          )}\n          {item.type === 'expandable-link-group' && (\n            <ExpandableLinkGroup\n              definition={item}\n              activeHref={activeHref}\n              fireChange={fireChange}\n              fireFollow={fireFollow}\n            />\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\ninterface DividerProps {\n  variant: 'default' | 'header';\n}\n\nfunction Divider({ variant = 'default' }: DividerProps) {\n  return <hr className={clsx(styles.divider, styles[`divider-${variant}`])} />;\n}\n\ninterface LinkProps extends BaseItemComponentProps {\n  definition: SideNavigationProps.Link;\n  expanded?: boolean;\n}\n\nfunction Link({ definition, expanded, activeHref, fireFollow }: LinkProps) {\n  checkSafeUrl('SideNavigation', definition.href);\n  const isActive = definition.href === activeHref;\n  const focusVisible = useFocusVisible();\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      // Prevent the click event from toggling outer expandable sections.\n      event.stopPropagation();\n\n      if (isPlainLeftClick(event)) {\n        fireFollow(definition, event);\n      }\n    },\n    [fireFollow, definition]\n  );\n\n  return (\n    <>\n      {/* https://github.com/yannickcr/eslint-plugin-react/issues/2962 */}\n      {/* eslint-disable-next-line react/jsx-no-target-blank */}\n      <a\n        {...focusVisible}\n        href={definition.href}\n        className={clsx(styles.link, { [styles['link-active']]: isActive })}\n        target={definition.external ? '_blank' : undefined}\n        rel={definition.external ? 'noopener noreferrer' : undefined}\n        aria-expanded={expanded}\n        aria-current={definition.href === activeHref ? 'page' : undefined}\n        onClick={onClick}\n      >\n        {definition.text}\n        {definition.external && (\n          <span\n            aria-label={definition.externalIconAriaLabel}\n            role={definition.externalIconAriaLabel ? 'img' : undefined}\n          >\n            <InternalIcon name=\"external\" className={styles['external-icon']} />\n          </span>\n        )}\n      </a>\n      {definition.info && <span className={styles.info}>{definition.info}</span>}\n    </>\n  );\n}\n\ninterface SectionProps extends BaseItemComponentProps {\n  definition: SideNavigationProps.Section;\n}\n\nfunction Section({ definition, activeHref, fireFollow, fireChange }: SectionProps) {\n  const [expanded, setExpanded] = useState<boolean>(definition.defaultExpanded ?? true);\n\n  const onExpandedChange = useCallback(\n    (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n      fireChange(definition, e.detail.expanded);\n      setExpanded(e.detail.expanded);\n    },\n    [definition, fireChange]\n  );\n\n  useEffect(() => {\n    setExpanded(definition.defaultExpanded ?? true);\n  }, [definition]);\n\n  return (\n    <InternalExpandableSection\n      variant=\"footer\"\n      expanded={expanded}\n      onChange={onExpandedChange}\n      className={styles.section}\n      header={definition.text}\n    >\n      <ItemList\n        variant=\"section\"\n        items={definition.items}\n        fireFollow={fireFollow}\n        fireChange={fireChange}\n        activeHref={activeHref}\n      />\n    </InternalExpandableSection>\n  );\n}\n\ninterface LinkGroupProps extends BaseItemComponentProps {\n  definition: SideNavigationProps.LinkGroup;\n}\n\nfunction LinkGroup({ definition, activeHref, fireFollow, fireChange }: LinkGroupProps) {\n  checkSafeUrl('SideNavigation', definition.href);\n\n  return (\n    <>\n      <Link\n        definition={{ type: 'link', href: definition.href, text: definition.text }}\n        fireFollow={(_, event) => fireFollow(definition, event)}\n        fireChange={fireChange}\n        activeHref={activeHref}\n      />\n      <ItemList\n        variant=\"link-group\"\n        items={definition.items}\n        fireFollow={fireFollow}\n        fireChange={fireChange}\n        activeHref={activeHref}\n      />\n    </>\n  );\n}\n\ninterface ExpandableLinkGroupProps extends BaseItemComponentProps {\n  definition: SideNavigationProps.ExpandableLinkGroup;\n}\n\nfunction ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref }: ExpandableLinkGroupProps) {\n  // Check whether the definition contains an active link and memoize it to avoid\n  // rechecking every time.\n  const containsActiveLink = useMemo(() => {\n    return activeHref ? hasActiveLink(definition.items, activeHref) : false;\n  }, [activeHref, definition.items]);\n\n  const [expanded, setExpanded] = useState<boolean>(() => {\n    return definition.defaultExpanded ?? (definition.href === activeHref || containsActiveLink);\n  });\n\n  const [userExpanded, setUserExpanded] = useState<boolean | undefined>();\n\n  // Reset user expansion status when the items property is updated.\n  useEffect(() => setUserExpanded(undefined), [definition]);\n\n  // By default, the expandable section is open when there's an active link inside.\n  useEffect(() => {\n    setExpanded(definition.href === activeHref || containsActiveLink);\n  }, [definition.href, containsActiveLink, activeHref]);\n\n  // If the definition object itself is updated, reset the expansion state to default.\n  useEffect(() => {\n    if (definition.defaultExpanded !== undefined) {\n      setExpanded(definition.defaultExpanded);\n    }\n  }, [definition]);\n\n  const onExpandedChange = useCallback(\n    (e: NonCancelableCustomEvent<ExpandableSectionProps.ChangeDetail>) => {\n      fireChange(definition, e.detail.expanded);\n      setUserExpanded(e.detail.expanded);\n    },\n    [definition, fireChange]\n  );\n\n  const onHeaderFollow: LinkProps['fireFollow'] = (_, event) => {\n    fireFollow(definition, event);\n    setUserExpanded(true);\n    if (!expanded) {\n      fireChange(definition, true);\n    }\n  };\n\n  return (\n    <InternalExpandableSection\n      className={styles['expandable-link-group']}\n      variant=\"navigation\"\n      expanded={userExpanded ?? expanded}\n      onChange={onExpandedChange}\n      header={\n        <Link\n          definition={{ type: 'link', href: definition.href, text: definition.text }}\n          expanded={userExpanded ?? expanded}\n          fireFollow={onHeaderFollow}\n          fireChange={fireChange}\n          activeHref={activeHref}\n        />\n      }\n    >\n      <ItemList\n        variant=\"expandable-link-group\"\n        items={definition.items}\n        fireFollow={fireFollow}\n        fireChange={fireChange}\n        activeHref={activeHref}\n      />\n    </InternalExpandableSection>\n  );\n}\n"]}

package/side-navigation/styles.css.js

@@ -0,0 +1,27 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_l0dv0_1ln1n_93",
+  "header": "awsui_header_l0dv0_1ln1n_107",
+  "header-link": "awsui_header-link_l0dv0_1ln1n_112",
+  "header-link--has-logo": "awsui_header-link--has-logo_l0dv0_1ln1n_120",
+  "header-link-text": "awsui_header-link-text_l0dv0_1ln1n_120",
+  "header-logo": "awsui_header-logo_l0dv0_1ln1n_124",
+  "header-logo--stretched": "awsui_header-logo--stretched_l0dv0_1ln1n_130",
+  "list-container": "awsui_list-container_l0dv0_1ln1n_135",
+  "list": "awsui_list_l0dv0_1ln1n_135",
+  "list-variant-root": "awsui_list-variant-root_l0dv0_1ln1n_145",
+  "list-variant-expandable-link-group": "awsui_list-variant-expandable-link-group_l0dv0_1ln1n_151",
+  "list-item": "awsui_list-item_l0dv0_1ln1n_155",
+  "section": "awsui_section_l0dv0_1ln1n_161",
+  "expandable-link-group": "awsui_expandable-link-group_l0dv0_1ln1n_162",
+  "section-header": "awsui_section-header_l0dv0_1ln1n_175",
+  "link": "awsui_link_l0dv0_1ln1n_180",
+  "link-active": "awsui_link-active_l0dv0_1ln1n_187",
+  "info": "awsui_info_l0dv0_1ln1n_219",
+  "external-icon": "awsui_external-icon_l0dv0_1ln1n_223",
+  "divider": "awsui_divider_l0dv0_1ln1n_227",
+  "divider-default": "awsui_divider-default_l0dv0_1ln1n_232",
+  "divider-header": "awsui_divider-header_l0dv0_1ln1n_236"
+};
+