@cloudscape-design/components 3.0.757 → 3.0.758

package/breadcrumb-group/item/styles.selectors.js

@@ -2,14 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_15j42_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_15j42_145",
-  "icon": "awsui_icon_1kosq_15j42_148",
-  "anchor": "awsui_anchor_1kosq_15j42_153",
-  "last": "awsui_last_1kosq_15j42_199",
-  "compressed": "awsui_compressed_1kosq_15j42_209",
-  "text": "awsui_text_1kosq_15j42_213",
-  "virtual-item": "awsui_virtual-item_1kosq_15j42_220",
-  "text-hidden": "awsui_text-hidden_1kosq_15j42_227"
+  "link": "awsui_link_1kosq_e4knh_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_e4knh_145",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_e4knh_146",
+  "icon": "awsui_icon_1kosq_e4knh_149",
+  "anchor": "awsui_anchor_1kosq_e4knh_155",
+  "text": "awsui_text_1kosq_e4knh_202",
+  "last": "awsui_last_1kosq_e4knh_221",
+  "text-hidden": "awsui_text-hidden_1kosq_e4knh_233"
 };
   

package/breadcrumb-group/styles.css.js

@@ -1,12 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_dhp0d_141",
-  "item": "awsui_item_d19fg_dhp0d_179",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_dhp0d_214",
-  "ellipsis": "awsui_ellipsis_d19fg_dhp0d_226",
-  "icon": "awsui_icon_d19fg_dhp0d_236",
-  "mobile": "awsui_mobile_d19fg_dhp0d_241",
-  "mobile-short": "awsui_mobile-short_d19fg_dhp0d_254"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_1gdmp_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_1gdmp_179",
+  "ghost": "awsui_ghost_d19fg_1gdmp_190",
+  "item": "awsui_item_d19fg_1gdmp_195",
+  "ellipsis": "awsui_ellipsis_d19fg_1gdmp_196",
+  "hide": "awsui_hide_d19fg_1gdmp_203",
+  "visible": "awsui_visible_d19fg_1gdmp_209",
+  "icon": "awsui_icon_d19fg_1gdmp_213"
 };
   

package/breadcrumb-group/styles.scoped.css

@@ -138,7 +138,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among 
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_breadcrumb-group_d19fg_dhp0d_141:not(#\9) {
+.awsui_breadcrumb-group_d19fg_1gdmp_141:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -177,43 +177,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-p8yyaw, 4px);
   padding-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_item_d19fg_dhp0d_179:not(#\9) {
-  border-collapse: separate;
-  border-spacing: 0;
-  box-sizing: border-box;
-  caption-side: top;
-  cursor: auto;
-  direction: inherit;
-  empty-cells: show;
-  font-family: serif;
-  font-size: medium;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: 400;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-hyphens: none;
-          hyphens: none;
-  letter-spacing: normal;
-  list-style: disc outside none;
-  tab-size: 8;
-  text-align: start;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  word-spacing: normal;
-  font-size: var(--font-size-body-m-x4okxb, 14px);
-  line-height: var(--line-height-body-m-30ar75, 20px);
-  color: var(--color-text-body-default-at06ol, #000716);
-  font-weight: 400;
-  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-  display: inline;
-}
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214:not(#\9) {
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179:not(#\9) {
   display: flex;
   align-items: center;
   padding-block: 0;
@@ -222,37 +186,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
   list-style: none;
   inline-size: 100%;
+  flex-wrap: nowrap;
+}
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179.awsui_ghost_d19fg_1gdmp_190:not(#\9) {
   flex-wrap: wrap;
+  position: absolute;
+  inset-inline-start: -9000px;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_item_d19fg_dhp0d_179:not(#\9),
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_ellipsis_d19fg_dhp0d_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_item_d19fg_1gdmp_195:not(#\9),
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_ellipsis_d19fg_1gdmp_196:not(#\9) {
   display: inline-block;
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_ellipsis_d19fg_dhp0d_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_item_d19fg_1gdmp_195.awsui_hide_d19fg_1gdmp_203:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_ellipsis_d19fg_dhp0d_226 > .awsui_icon_d19fg_dhp0d_236:not(#\9) {
-  margin-block: 0;
-  margin-inline: 10px;
-  color: var(--color-text-breadcrumb-icon-ma8w3r, #7d8998);
-}
-.awsui_breadcrumb-group_d19fg_dhp0d_141.awsui_mobile_d19fg_dhp0d_241 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214:not(#\9) {
-  flex-wrap: nowrap;
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_ellipsis_d19fg_1gdmp_196:not(#\9) {
+  display: none;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141.awsui_mobile_d19fg_dhp0d_241 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_ellipsis_d19fg_dhp0d_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_ellipsis_d19fg_1gdmp_196.awsui_visible_d19fg_1gdmp_209:not(#\9) {
   display: flex;
   flex-shrink: 0;
 }
-.awsui_breadcrumb-group_d19fg_dhp0d_141.awsui_mobile_d19fg_dhp0d_241 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_item_d19fg_dhp0d_179:not(#\9) {
-  min-inline-size: 0;
-}
-.awsui_breadcrumb-group_d19fg_dhp0d_141.awsui_mobile_d19fg_dhp0d_241 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_item_d19fg_dhp0d_179:not(#\9):not(:first-child):not(:last-child) {
-  display: none;
-}
-.awsui_breadcrumb-group_d19fg_dhp0d_141.awsui_mobile-short_d19fg_dhp0d_254 > .awsui_breadcrumb-group-list_d19fg_dhp0d_214 > .awsui_ellipsis_d19fg_dhp0d_226:not(#\9) {
-  display: none;
+.awsui_breadcrumb-group_d19fg_1gdmp_141 > .awsui_breadcrumb-group-list_d19fg_1gdmp_179 > .awsui_ellipsis_d19fg_1gdmp_196 > .awsui_icon_d19fg_1gdmp_213:not(#\9) {
+  margin-block: 0;
+  margin-inline: 10px;
+  color: var(--color-text-breadcrumb-icon-ma8w3r, #7d8998);
 }

package/breadcrumb-group/styles.selectors.js

@@ -2,12 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_dhp0d_141",
-  "item": "awsui_item_d19fg_dhp0d_179",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_dhp0d_214",
-  "ellipsis": "awsui_ellipsis_d19fg_dhp0d_226",
-  "icon": "awsui_icon_d19fg_dhp0d_236",
-  "mobile": "awsui_mobile_d19fg_dhp0d_241",
-  "mobile-short": "awsui_mobile-short_d19fg_dhp0d_254"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_1gdmp_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_1gdmp_179",
+  "ghost": "awsui_ghost_d19fg_1gdmp_190",
+  "item": "awsui_item_d19fg_1gdmp_195",
+  "ellipsis": "awsui_ellipsis_d19fg_1gdmp_196",
+  "hide": "awsui_hide_d19fg_1gdmp_203",
+  "visible": "awsui_visible_d19fg_1gdmp_209",
+  "icon": "awsui_icon_d19fg_1gdmp_213"
 };
   

package/breadcrumb-group/utils.d.ts

@@ -4,4 +4,9 @@ export declare const getEventDetail: <T extends BreadcrumbGroupProps.Item>(item:
     text: string;
     href: string;
 };
+export declare const getItemsDisplayProperties: (itemsWidths: Array<number>, navWidth: number | null) => {
+    shrinkFactors: number[];
+    minWidths: number[];
+    collapsed: number;
+};
 //# sourceMappingURL=utils.d.ts.map

package/breadcrumb-group/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAKH,eAAO,MAAM,yBAAyB,gBAAiB,MAAM,MAAM,CAAC,YAAY,MAAM,GAAG,IAAI;;;;CAW5F,CAAC"}

package/breadcrumb-group/utils.js

@@ -3,4 +3,60 @@ export const getEventDetail = (item) => ({
     text: item.text,
     href: item.href,
 });
+const defaultMinBreadcrumbWidth = 150;
+const ellipsisWidth = 50;
+export const getItemsDisplayProperties = (itemsWidths, navWidth) => {
+    const minBreadcrumbWidth = optimizeMinWidth(itemsWidths, navWidth);
+    const shrinkFactors = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : Math.round(width)));
+    const minWidths = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : minBreadcrumbWidth));
+    const collapsedWidths = itemsWidths.map(width => Math.min(width, minBreadcrumbWidth));
+    return {
+        shrinkFactors,
+        minWidths,
+        collapsed: computeNumberOfCollapsedItems(collapsedWidths, navWidth),
+    };
+};
+const computeNumberOfCollapsedItems = (collapsedWidths, navWidth) => {
+    if (!navWidth) {
+        return 0;
+    }
+    let collapsed = 0;
+    const itemsCount = collapsedWidths.length;
+    if (itemsCount > 2) {
+        collapsed = itemsCount - 2;
+        let remainingWidth = navWidth - collapsedWidths[0] - collapsedWidths[itemsCount - 1] - ellipsisWidth;
+        let j = 1;
+        while (remainingWidth > 0 && j < itemsCount - 1) {
+            remainingWidth -= collapsedWidths[itemsCount - 1 - j];
+            j++;
+            if (remainingWidth >= 0) {
+                collapsed--;
+            }
+        }
+    }
+    return collapsed;
+};
+const optimizeMinWidth = (itemsWidths, navWidth) => {
+    const collapsedWidths = itemsWidths.map(width => Math.min(width, defaultMinBreadcrumbWidth));
+    if (!navWidth) {
+        return defaultMinBreadcrumbWidth;
+    }
+    const itemsCount = collapsedWidths.length;
+    if (itemsCount > 2) {
+        const minCollapsedWidth = collapsedWidths[0] + ellipsisWidth + collapsedWidths[collapsedWidths.length - 1];
+        if (minCollapsedWidth > navWidth) {
+            return (navWidth - ellipsisWidth) / 2;
+        }
+    }
+    if (itemsCount === 2) {
+        const minCollapsedWidth = collapsedWidths[0] + collapsedWidths[1];
+        if (minCollapsedWidth > navWidth) {
+            return navWidth / 2;
+        }
+    }
+    if (itemsCount === 1) {
+        return Math.min(navWidth, collapsedWidths[0]);
+    }
+    return defaultMinBreadcrumbWidth;
+};
 //# sourceMappingURL=utils.js.map

package/breadcrumb-group/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAsC,IAAO,EAAE,EAAE,CAAC,CAAC;IAC/E,IAAI;IACJ,IAAI,EAAE,IAAI,CAAC,IAAI;IACf,IAAI,EAAE,IAAI,CAAC,IAAI;CAChB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BreadcrumbGroupProps } from './interfaces';\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n  item,\n  text: item.text,\n  href: item.href,\n});\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BreadcrumbGroupProps } from './interfaces';\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n  item,\n  text: item.text,\n  href: item.href,\n});\n\nconst defaultMinBreadcrumbWidth = 150;\nconst ellipsisWidth = 50;\n\nexport const getItemsDisplayProperties = (itemsWidths: Array<number>, navWidth: number | null) => {\n  const minBreadcrumbWidth = optimizeMinWidth(itemsWidths, navWidth);\n  const shrinkFactors = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : Math.round(width)));\n  const minWidths = itemsWidths.map(width => (width <= minBreadcrumbWidth ? 0 : minBreadcrumbWidth));\n  const collapsedWidths = itemsWidths.map(width => Math.min(width, minBreadcrumbWidth));\n\n  return {\n    shrinkFactors,\n    minWidths,\n    collapsed: computeNumberOfCollapsedItems(collapsedWidths, navWidth),\n  };\n};\n\nconst computeNumberOfCollapsedItems = (collapsedWidths: Array<number>, navWidth: number | null): number => {\n  if (!navWidth) {\n    return 0;\n  }\n  let collapsed = 0;\n  const itemsCount = collapsedWidths.length;\n  if (itemsCount > 2) {\n    collapsed = itemsCount - 2;\n    let remainingWidth = navWidth - collapsedWidths[0] - collapsedWidths[itemsCount - 1] - ellipsisWidth;\n    let j = 1;\n    while (remainingWidth > 0 && j < itemsCount - 1) {\n      remainingWidth -= collapsedWidths[itemsCount - 1 - j];\n      j++;\n      if (remainingWidth >= 0) {\n        collapsed--;\n      }\n    }\n  }\n  return collapsed;\n};\n\nconst optimizeMinWidth = (itemsWidths: Array<number>, navWidth: number | null): number => {\n  const collapsedWidths = itemsWidths.map(width => Math.min(width, defaultMinBreadcrumbWidth));\n  if (!navWidth) {\n    return defaultMinBreadcrumbWidth;\n  }\n  const itemsCount = collapsedWidths.length;\n  if (itemsCount > 2) {\n    const minCollapsedWidth = collapsedWidths[0] + ellipsisWidth + collapsedWidths[collapsedWidths.length - 1];\n    if (minCollapsedWidth > navWidth) {\n      return (navWidth - ellipsisWidth) / 2;\n    }\n  }\n  if (itemsCount === 2) {\n    const minCollapsedWidth = collapsedWidths[0] + collapsedWidths[1];\n    if (minCollapsedWidth > navWidth) {\n      return navWidth / 2;\n    }\n  }\n  if (itemsCount === 1) {\n    return Math.min(navWidth, collapsedWidths[0]);\n  }\n  return defaultMinBreadcrumbWidth;\n};\n"]}

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (093fdc0e)";
+export var PACKAGE_VERSION = "3.0.0 (5f9aaa3c)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (093fdc0e)",
+  "PACKAGE_VERSION": "3.0.0 (5f9aaa3c)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "093fdc0ea9a52ac78f1e8db74933f74aef92c089"
+  "commit": "5f9aaa3c40b15cc726a86b416444a8dfa4d33e75"
 }

package/package.json

@@ -126,7 +126,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.757",
+  "version": "3.0.758",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/side-navigation/analytics-metadata/interfaces.d.ts

@@ -0,0 +1,19 @@
+import { GeneratedAnalyticsMetadataExpandableSectionExpand } from '../../expandable-section/analytics-metadata/interfaces';
+export interface GeneratedAnalyticsMetadataSideNavigationClick {
+    action: 'click';
+    detail: {
+        label: string;
+        position?: string;
+        href?: string;
+        external: string;
+    };
+}
+export type GeneratedAnalyticsMetadataSideNavigationExpand = GeneratedAnalyticsMetadataExpandableSectionExpand;
+export interface GeneratedAnalyticsMetadataSideNavigationComponent {
+    name: 'awsui.SideNavigation';
+    label: string;
+    properties: {
+        activeHref: string;
+    };
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/side-navigation/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iDAAiD,EAAE,MAAM,wDAAwD,CAAC;AAE3H,MAAM,WAAW,6CAA6C;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,MAAM,8CAA8C,GAAG,iDAAiD,CAAC;AAE/G,MAAM,WAAW,iDAAiD;IAChE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE;QACV,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

package/side-navigation/analytics-metadata/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/side-navigation/analytics-metadata/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/side-navigation/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { GeneratedAnalyticsMetadataExpandableSectionExpand } from '../../expandable-section/analytics-metadata/interfaces';\n\nexport interface GeneratedAnalyticsMetadataSideNavigationClick {\n  action: 'click';\n  detail: {\n    label: string;\n    position?: string;\n    href?: string;\n    external: string;\n  };\n}\n\nexport type GeneratedAnalyticsMetadataSideNavigationExpand = GeneratedAnalyticsMetadataExpandableSectionExpand;\n\nexport interface GeneratedAnalyticsMetadataSideNavigationComponent {\n  name: 'awsui.SideNavigation';\n  label: string;\n  properties: {\n    activeHref: string;\n  };\n}\n"]}

package/side-navigation/analytics-metadata/styles.css.js

@@ -0,0 +1,7 @@
+
+    import './styles.scoped.css';
+    export default {
+  "header-link-text": "awsui_header-link-text_eymn4_rug8v_5",
+  "link-text": "awsui_link-text_eymn4_rug8v_6"
+};
+  

package/side-navigation/analytics-metadata/styles.scoped.css

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_header-link-text_eymn4_rug8v_5:not(#\9),
+.awsui_link-text_eymn4_rug8v_6:not(#\9) {
+  /* used in analytics metadata */
+}

package/side-navigation/analytics-metadata/styles.selectors.js

@@ -0,0 +1,8 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "header-link-text": "awsui_header-link-text_eymn4_rug8v_5",
+  "link-text": "awsui_link-text_eymn4_rug8v_6"
+};
+  

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,eAGnF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":";AASA,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"}

package/side-navigation/index.js

@@ -2,13 +2,22 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 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(_a) {
     var { items = [] } = _a, props = __rest(_a, ["items"]);
     const internalProps = useBaseComponent('SideNavigation');
-    return React.createElement(InternalSideNavigation, Object.assign({}, props, internalProps, { items: items }));
+    const componentAnalyticMetadata = {
+        name: 'awsui.SideNavigation',
+        label: `.${analyticsSelectors['header-link-text']}`,
+        properties: {
+            activeHref: props.activeHref || '',
+        },
+    };
+    return (React.createElement(InternalSideNavigation, Object.assign({}, props, internalProps, { items: items }, getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata }))));
 }
 applyDisplayName(SideNavigation, 'SideNavigation');
 //# sourceMappingURL=index.js.map

package/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,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAIpD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAA6C;QAA7C,EAAE,KAAK,GAAG,EAAE,OAAiC,EAA5B,KAAK,cAAtB,SAAwB,CAAF;IAC3D,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,oBAAC,sBAAsB,oBAAK,KAAK,EAAM,aAAa,IAAE,KAAK,EAAE,KAAK,IAAI,CAAC;AAChF,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 from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SideNavigationProps } from './interfaces';\nimport { InternalSideNavigation } from './internal';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({ items = [], ...props }: SideNavigationProps) {\n  const internalProps = useBaseComponent('SideNavigation');\n  return <InternalSideNavigation {...props} {...internalProps} items={items} />;\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,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,EAA6C;QAA7C,EAAE,KAAK,GAAG,EAAE,OAAiC,EAA5B,KAAK,cAAtB,SAAwB,CAAF;IAC3D,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,oBACjB,KAAK,EACL,aAAa,IACjB,KAAK,EAAE,KAAK,IACR,6BAA6B,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,EAC3E,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\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"]}

package/side-navigation/parts.d.ts

@@ -4,6 +4,7 @@ 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;
+    position?: string;
 }
 export interface HeaderProps extends BaseItemComponentProps {
     definition: SideNavigationProps.Header;
@@ -13,6 +14,6 @@ export 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 }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, }: NavigationItemsListProps): JSX.Element;
 export {};
 //# sourceMappingURL=parts.d.ts.map

package/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;AAUpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,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,eAkCzE;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,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,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,wBAAwB,eA2HnH"}
+{"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAapF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,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,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,eA+CzE;AAED,MAAM,WAAW,wBAAyB,SAAQ,sBAAsB;IACtE,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,eAgJ1B"}

package/side-navigation/parts.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalBox from '../box/internal';
 import InternalExpandableSection from '../expandable-section/internal';
 import InternalIcon from '../icon/internal';
@@ -9,6 +10,7 @@ import { isPlainLeftClick } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import { hasActiveLink } from './util';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 export function Header({ definition, activeHref, fireFollow }) {
     checkSafeUrl('SideNavigation', definition.href);
@@ -17,16 +19,25 @@ export function Header({ definition, activeHref, fireFollow }) {
             fireFollow(definition, event);
         }
     }, [fireFollow, definition]);
+    const clickActionAnalyticsMetadata = {
+        action: 'click',
+        detail: {
+            label: `.${analyticsSelectors['header-link-text']}`,
+            external: 'false',
+            href: definition.href,
+            position: 'header',
+        },
+    };
     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 },
+            React.createElement("a", Object.assign({ 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", Object.assign({ className: clsx(styles['header-logo'], {
                         [styles['header-logo--stretched']]: !definition.text,
                     }) }, definition.logo))),
-                React.createElement("span", { className: styles['header-link-text'] }, definition.text))),
+                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 }) {
+export function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position = '', }) {
     const lists = [];
     let currentListIndex = 0;
     lists[currentListIndex] = {
@@ -36,6 +47,7 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
     items.forEach((item, index) => {
         var _a, _b, _c, _d, _e;
         const itemid = index + 1;
+        const itemPosition = `${position ? `${position},` : ''}${itemid}`;
         switch (item.type) {
             case 'divider': {
                 const dividerIndex = lists.length;
@@ -53,35 +65,35 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
             case 'link': {
                 (_a = lists[currentListIndex].items) === null || _a === void 0 ? void 0 : _a.push({
                     element: (React.createElement("li", { key: index, "data-itemid": `item-${itemid}`, className: styles['list-item'] },
-                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow }))),
+                        React.createElement(Link, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
                 });
                 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 }))),
+                        React.createElement(Section, { definition: item, activeHref: activeHref, variant: variant, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
                 });
                 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 }))),
+                        React.createElement(SectionGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
                 });
                 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 }))),
+                        React.createElement(LinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, position: itemPosition }))),
                 });
                 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 }))),
+                        React.createElement(ExpandableLinkGroup, { definition: item, activeHref: activeHref, fireChange: fireChange, fireFollow: fireFollow, variant: variant, position: itemPosition }))),
                 });
                 return;
             }
@@ -104,7 +116,7 @@ export function NavigationItemsList({ items, variant, activeHref, fireChange, fi
 function Divider({ variant = 'default', isPresentational = false }) {
     return (React.createElement("hr", { className: clsx(styles.divider, styles[`divider-${variant}`]), role: isPresentational ? 'presentation' : undefined }));
 }
-function Link({ definition, expanded, activeHref, fireFollow }) {
+function Link({ definition, expanded, activeHref, fireFollow, position }) {
     checkSafeUrl('SideNavigation', definition.href);
     const isActive = definition.href === activeHref;
     const onClick = useCallback((event) => {
@@ -112,14 +124,23 @@ function Link({ definition, expanded, activeHref, fireFollow }) {
             fireFollow(definition, event);
         }
     }, [fireFollow, definition]);
+    const clickActionAnalyticsMetadata = {
+        action: 'click',
+        detail: {
+            label: `.${analyticsSelectors['link-text']}`,
+            external: `${!!definition.external}`,
+            href: definition.href,
+            position,
+        },
+    };
     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-expanded": expanded, "aria-current": definition.href === activeHref ? 'page' : undefined, onClick: onClick },
-            definition.text,
+        React.createElement("a", Object.assign({ href: definition.href, className: clsx(styles.link, { [styles['link-active']]: isActive }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-expanded": expanded, "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": 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({ definition, activeHref, fireFollow, fireChange, variant }) {
+function Section({ definition, activeHref, fireFollow, fireChange, variant, position }) {
     var _a;
     const [expanded, setExpanded] = useState((_a = definition.defaultExpanded) !== null && _a !== void 0 ? _a : true);
     const isVisualRefresh = useVisualRefresh();
@@ -132,20 +153,20 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant }) {
         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 },
-        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+        React.createElement(NavigationItemsList, { variant: "section", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
 }
-function SectionGroup({ definition, activeHref, fireFollow, fireChange }) {
+function SectionGroup({ definition, activeHref, fireFollow, fireChange, position }) {
     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 })));
+        React.createElement(NavigationItemsList, { variant: "section-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref, position: position })));
 }
-function LinkGroup({ definition, activeHref, fireFollow, fireChange }) {
+function LinkGroup({ definition, activeHref, fireFollow, fireChange, position }) {
     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 }),
-        React.createElement(NavigationItemsList, { variant: "link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+        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 })));
 }
-function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant }) {
+function ExpandableLinkGroup({ definition, fireFollow, fireChange, activeHref, variant, position, }) {
     // Check whether the definition contains an active link and memoize it to avoid
     // rechecking every time.
     const containsActiveLink = useMemo(() => {
@@ -179,7 +200,7 @@ 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 }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, fireFollow: onHeaderFollow, fireChange: fireChange, activeHref: activeHref }) },
-        React.createElement(NavigationItemsList, { variant: "expandable-link-group", items: definition.items, fireFollow: fireFollow, fireChange: fireChange, activeHref: activeHref })));
+    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 }, expanded: userExpanded !== null && userExpanded !== void 0 ? userExpanded : expanded, 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