@cloudscape-design/components-themeable 3.0.400 → 3.0.402

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "11090e446c62a52522d936bccb902117cfd8d245"
+  "commit": "c3fe8ad71dd7908b19ab2417efe027e38f55a960"
 }

package/lib/internal/scss/anchor-navigation/styles.scss

@@ -0,0 +1,113 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use '../internal/styles/typography/constants.scss' as typography;
+
+$guide-line-width: 2px;
+$guide-line-offset: -2px; // Negative to expand 2px beyond the element
+
+.root {
+  @include styles.styles-reset;
+}
+
+.anchor-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-indent: 0;
+
+  &::before {
+    content: '';
+    background-color: awsui.$color-border-divider-default;
+    border-radius: awsui.$border-radius-tabs-focus-ring;
+    bottom: $guide-line-offset;
+    pointer-events: none;
+    position: absolute;
+    top: $guide-line-offset;
+    width: $guide-line-width;
+  }
+}
+
+.anchor-item {
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-slow;
+    transition-property: all;
+  }
+  @include styles.font-body-m;
+
+  color: awsui.$color-text-body-secondary;
+  font-weight: styles.$font-weight-normal;
+  margin: awsui.$space-scaled-xxs 0;
+
+  &--active {
+    position: relative;
+
+    &::before {
+      content: '';
+      background-color: awsui.$color-text-accent;
+      border-radius: awsui.$border-radius-tabs-focus-ring;
+      bottom: $guide-line-offset;
+      pointer-events: none;
+      position: absolute;
+      top: $guide-line-offset;
+      width: $guide-line-width;
+    }
+  }
+}
+
+.anchor-link {
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-slow;
+    transition-property: all;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.link-focus;
+  }
+
+  @include styles.font-body-m;
+
+  align-items: baseline;
+  color: awsui.$color-text-body-secondary;
+  display: flex;
+  flex-direction: row;
+  font-weight: styles.$font-weight-normal;
+  text-decoration: none;
+
+  &:hover {
+    color: awsui.$color-text-accent;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  &--active {
+    font-weight: awsui.$font-wayfinding-link-active-weight;
+    @include styles.font-smoothing;
+    color: awsui.$color-text-accent;
+  }
+}
+
+.anchor-link-text {
+  display: block;
+}
+
+.anchor-link-info {
+  margin-left: awsui.$space-xs;
+  @include styles.font-body-s;
+  @include styles.font-smoothing;
+  font-weight: awsui.$font-button-weight;
+  letter-spacing: typography.$letter-spacing-bold-link;
+  color: awsui.$color-text-link-default;
+}

package/lib/internal/scss/anchor-navigation/test-classes/styles.scss

@@ -0,0 +1,28 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /* used in test-utils */
+}
+
+.anchor-list {
+  /* used in test-utils */
+}
+
+.anchor-item--active {
+  /* used in test-utils */
+}
+
+.anchor-link {
+  /* used in test-utils */
+}
+
+.anchor-link-text {
+  /* used in test-utils */
+}
+
+.anchor-link-info {
+  /* used in test-utils */
+}

package/lib/internal/scss/internal/components/dropdown/styles.scss

@@ -6,6 +6,7 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 @use './motion';
+@use '../../generated/custom-css-properties/index' as custom-props;
 
 .root {
   @include styles.styles-reset;
@@ -72,6 +73,7 @@
   }
   &.stretch-beyond-trigger-width {
     width: max-content;
+    max-width: var(#{custom-props.$dropdownDefaultMaxWidth}, 100%);
   }
   &.hide-upper-border > .dropdown-content-wrapper {
     border-top: none;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,41 +1,42 @@
 
-    $breadcrumbsGap: --awsui-breadcrumbs-gap-zw2xxa;
-$contentGapLeft: --awsui-content-gap-left-zw2xxa;
-$contentGapRight: --awsui-content-gap-right-zw2xxa;
-$contentHeight: --awsui-content-height-zw2xxa;
-$containerFirstGap: --awsui-container-first-gap-zw2xxa;
-$containerFirstOverlapExtension: --awsui-container-first-overlap-extension-zw2xxa;
-$defaultMaxContentWidth: --awsui-default-max-content-width-zw2xxa;
-$defaultMinContentWidth: --awsui-default-min-content-width-zw2xxa;
-$drawerSize: --awsui-drawer-size-zw2xxa;
-$footerHeight: --awsui-footer-height-zw2xxa;
-$headerGap: --awsui-header-gap-zw2xxa;
-$headerHeight: --awsui-header-height-zw2xxa;
-$layoutWidth: --awsui-layout-width-zw2xxa;
-$mainGap: --awsui-main-gap-zw2xxa;
-$mainOffsetLeft: --awsui-main-offset-left-zw2xxa;
-$mainTemplateRows: --awsui-main-template-rows-zw2xxa;
-$maxContentWidth: --awsui-max-content-width-zw2xxa;
-$minContentWidth: --awsui-min-content-width-zw2xxa;
-$mobileBarHeight: --awsui-mobile-bar-height-zw2xxa;
-$notificationsGap: --awsui-notifications-gap-zw2xxa;
-$notificationsHeight: --awsui-notifications-height-zw2xxa;
-$offsetTop: --awsui-offset-top-zw2xxa;
-$offsetTopWithNotifications: --awsui-offset-top-with-notifications-zw2xxa;
-$overlapHeight: --awsui-overlap-height-zw2xxa;
-$navigationWidth: --awsui-navigation-width-zw2xxa;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-zw2xxa;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-zw2xxa;
-$splitPanelHeight: --awsui-split-panel-height-zw2xxa;
-$splitPanelMinWidth: --awsui-split-panel-min-width-zw2xxa;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-zw2xxa;
-$toolsMaxWidth: --awsui-tools-max-width-zw2xxa;
-$toolsWidth: --awsui-tools-width-zw2xxa;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-zw2xxa;
-$contentScrollMargin: --awsui-content-scroll-margin-zw2xxa;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-zw2xxa;
-$flashbarStackIndex: --awsui-flashbar-stack-index-zw2xxa;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-zw2xxa;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-zw2xxa;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-zw2xxa;
+    $breadcrumbsGap: --awsui-breadcrumbs-gap-y98gph;
+$contentGapLeft: --awsui-content-gap-left-y98gph;
+$contentGapRight: --awsui-content-gap-right-y98gph;
+$contentHeight: --awsui-content-height-y98gph;
+$containerFirstGap: --awsui-container-first-gap-y98gph;
+$containerFirstOverlapExtension: --awsui-container-first-overlap-extension-y98gph;
+$defaultMaxContentWidth: --awsui-default-max-content-width-y98gph;
+$defaultMinContentWidth: --awsui-default-min-content-width-y98gph;
+$drawerSize: --awsui-drawer-size-y98gph;
+$footerHeight: --awsui-footer-height-y98gph;
+$headerGap: --awsui-header-gap-y98gph;
+$headerHeight: --awsui-header-height-y98gph;
+$layoutWidth: --awsui-layout-width-y98gph;
+$mainGap: --awsui-main-gap-y98gph;
+$mainOffsetLeft: --awsui-main-offset-left-y98gph;
+$mainTemplateRows: --awsui-main-template-rows-y98gph;
+$maxContentWidth: --awsui-max-content-width-y98gph;
+$minContentWidth: --awsui-min-content-width-y98gph;
+$mobileBarHeight: --awsui-mobile-bar-height-y98gph;
+$notificationsGap: --awsui-notifications-gap-y98gph;
+$notificationsHeight: --awsui-notifications-height-y98gph;
+$offsetTop: --awsui-offset-top-y98gph;
+$offsetTopWithNotifications: --awsui-offset-top-with-notifications-y98gph;
+$overlapHeight: --awsui-overlap-height-y98gph;
+$navigationWidth: --awsui-navigation-width-y98gph;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-y98gph;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-y98gph;
+$splitPanelHeight: --awsui-split-panel-height-y98gph;
+$splitPanelMinWidth: --awsui-split-panel-min-width-y98gph;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-y98gph;
+$toolsMaxWidth: --awsui-tools-max-width-y98gph;
+$toolsWidth: --awsui-tools-width-y98gph;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-y98gph;
+$contentScrollMargin: --awsui-content-scroll-margin-y98gph;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-y98gph;
+$flashbarStackIndex: --awsui-flashbar-stack-index-y98gph;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-y98gph;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-y98gph;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-y98gph;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-y98gph;
     

package/lib/internal/scss/internal/styles/utils/mixins.scss

@@ -17,14 +17,8 @@
   // prevents the text wrapping. We need to override the min-width by setting it to "0"
   min-width: 0;
 
-  // IE does not support `word-break: break-word`.
-  // We use `-ms-word-break: break-all` as a compromise for IE.
-  -ms-word-break: break-all;
-
-  // From docs:
-  // > To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at
-  // > any point if there are no otherwise-acceptable break points in the line.
-  // Also, this overrides any usage of `overflow-wrap` (and its alias `word-wrap`). Therefore, such rule is not used.
+  // `word-break: break-word` is deprecated.
+  // But its replacement, `overflow-wrap: anywhere`, is not supported in Safari 14.0 and 15.0.
   word-break: break-word;
 }
 

package/lib/internal/scss/status-indicator/styles.scss

@@ -41,20 +41,24 @@ $_color-overrides: (
   }
 }
 
-.icon {
-  padding-right: awsui.$space-xxs;
-}
-
 .container {
-  word-break: break-all;
-  word-wrap: break-word;
-
   &.display-inline {
+    @include styles.text-wrapping;
     display: inline;
+
+    > .icon {
+      white-space: nowrap;
+    }
   }
 
   &.display-inline-block {
     display: inline-block;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    > .icon {
+      padding-right: awsui.$space-xxs;
+    }
   }
 }
 

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AnchorNavigationProps } from './interfaces';
+export { AnchorNavigationProps };
+export default function AnchorNavigation({ scrollSpyOffset, ...props }: AnchorNavigationProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["anchor-navigation/index.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,eAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,eAGhG"}

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

@@ -0,0 +1,14 @@
+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 { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalAnchorNavigation from './internal';
+import useBaseComponent from '../internal/hooks/use-base-component';
+export default function AnchorNavigation(_a) {
+    var { scrollSpyOffset = 0 } = _a, props = __rest(_a, ["scrollSpyOffset"]);
+    const baseComponentProps = useBaseComponent('AnchorNavigation');
+    return React.createElement(InternalAnchorNavigation, Object.assign({ scrollSpyOffset: scrollSpyOffset }, props, baseComponentProps));
+}
+applyDisplayName(AnchorNavigation, 'AnchorNavigation');
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["anchor-navigation/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,wBAAwB,MAAM,YAAY,CAAC;AAClD,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAwD;QAAxD,EAAE,eAAe,GAAG,CAAC,OAAmC,EAA9B,KAAK,cAA/B,mBAAiC,CAAF;IACtE,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IAChE,OAAO,oBAAC,wBAAwB,kBAAC,eAAe,EAAE,eAAe,IAAM,KAAK,EAAM,kBAAkB,EAAI,CAAC;AAC3G,CAAC;AACD,gBAAgB,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { AnchorNavigationProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalAnchorNavigation from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { AnchorNavigationProps };\n\nexport default function AnchorNavigation({ scrollSpyOffset = 0, ...props }: AnchorNavigationProps) {\n  const baseComponentProps = useBaseComponent('AnchorNavigation');\n  return <InternalAnchorNavigation scrollSpyOffset={scrollSpyOffset} {...props} {...baseComponentProps} />;\n}\napplyDisplayName(AnchorNavigation, 'AnchorNavigation');\n"]}

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

@@ -0,0 +1,67 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';
+export interface AnchorNavigationProps extends BaseComponentProps {
+    /**
+     * Adds `aria-labelledby` to the component.
+     *
+     * Use this property for identifying the header or title that labels the anchor navigation.
+     * To use it correctly, define an ID for the element either as label, and set the property to that ID.
+     */
+    ariaLabelledby?: string;
+    /**
+     * List of anchors. Each anchor object has the following properties:
+     *
+     * * `text` (string) - The text for the anchor item.
+     * * `href` (string) - The `id` attribute of the target HTML element that the anchor refers to.
+     * For example: `"#section1.1"`
+     * * `level` (number) - Level of nesting of the anchor.
+     * * `info` (string | undefined) - Additional information to display next to the link, for example: "New" or "Updated".
+     *
+     * Note: The list of anchors should be sorted in the order they appear on the page.
+     */
+    anchors: AnchorNavigationProps.Anchor[];
+    /**
+     * Specifies the active anchor href. When set, the component will operate in a
+     * controlled manner, and internal scroll-spy will be disabled.
+     */
+    activeHref?: string;
+    /**
+     * Specifies the height (in pixels) to be considered as an offset when activating anchors.
+     * This is useful when you have a fixed or sticky header that might overlap with the content as you scroll.
+     *
+     * Defaults to 0.
+     */
+    scrollSpyOffset?: number;
+    /**
+     * Fired when an anchor link is clicked without any modifier keys.
+     */
+    onFollow?: CancelableEventHandler<AnchorNavigationProps.Anchor>;
+    /**
+     * Fired when an active anchor link changes.
+     *
+     * Note: This event is triggered both by the component's internal scroll-spy logic,
+     * or when the `activeHref` prop is manually updated.
+     */
+    onActiveHrefChange?: NonCancelableEventHandler<AnchorNavigationProps.Anchor>;
+}
+export declare namespace AnchorNavigationProps {
+    interface Anchor {
+        /**
+         * The text for the anchor item.
+         */
+        text: string;
+        /**
+         * The `href` of the anchor. For example: `"#section1.1"`".
+         */
+        href: string;
+        /**
+         * Level of nesting of the anchor.
+         */
+        level: number;
+        /**
+         * Additional information to display next to the link, for example: "New" or "Updated".
+         */
+        info?: string;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["anchor-navigation/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB;IAC/D;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;;OAUG;IACH,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,CAAC;IAExC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,yBAAyB,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;CAC9E;AAED,yBAAiB,qBAAqB,CAAC;IACrC,UAAiB,MAAM;QACrB;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QAEb;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QAEb;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QAEd;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;CACF"}

package/lib/internal/template/anchor-navigation/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/lib/internal/template/anchor-navigation/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["anchor-navigation/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 { BaseComponentProps } from '../internal/base-component';\nimport { CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface AnchorNavigationProps extends BaseComponentProps {\n  /**\n   * Adds `aria-labelledby` to the component.\n   *\n   * Use this property for identifying the header or title that labels the anchor navigation.\n   * To use it correctly, define an ID for the element either as label, and set the property to that ID.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * List of anchors. Each anchor object has the following properties:\n   *\n   * * `text` (string) - The text for the anchor item.\n   * * `href` (string) - The `id` attribute of the target HTML element that the anchor refers to.\n   * For example: `\"#section1.1\"`\n   * * `level` (number) - Level of nesting of the anchor.\n   * * `info` (string | undefined) - Additional information to display next to the link, for example: \"New\" or \"Updated\".\n   *\n   * Note: The list of anchors should be sorted in the order they appear on the page.\n   */\n  anchors: AnchorNavigationProps.Anchor[];\n\n  /**\n   * Specifies the active anchor href. When set, the component will operate in a\n   * controlled manner, and internal scroll-spy will be disabled.\n   */\n  activeHref?: string;\n\n  /**\n   * Specifies the height (in pixels) to be considered as an offset when activating anchors.\n   * This is useful when you have a fixed or sticky header that might overlap with the content as you scroll.\n   *\n   * Defaults to 0.\n   */\n  scrollSpyOffset?: number;\n\n  /**\n   * Fired when an anchor link is clicked without any modifier keys.\n   */\n  onFollow?: CancelableEventHandler<AnchorNavigationProps.Anchor>;\n\n  /**\n   * Fired when an active anchor link changes.\n   *\n   * Note: This event is triggered both by the component's internal scroll-spy logic,\n   * or when the `activeHref` prop is manually updated.\n   */\n  onActiveHrefChange?: NonCancelableEventHandler<AnchorNavigationProps.Anchor>;\n}\n\nexport namespace AnchorNavigationProps {\n  export interface Anchor {\n    /**\n     * The text for the anchor item.\n     */\n    text: string;\n\n    /**\n     * The `href` of the anchor. For example: `\"#section1.1\"`\".\n     */\n    href: string;\n\n    /**\n     * Level of nesting of the anchor.\n     */\n    level: number;\n\n    /**\n     * Additional information to display next to the link, for example: \"New\" or \"Updated\".\n     */\n    info?: string;\n  }\n}\n"]}

package/lib/internal/template/anchor-navigation/internal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AnchorNavigationProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';
+export default function InternalAnchorNavigation({ anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref, __internalRootRef, scrollSpyOffset, ...props }: AnchorNavigationProps & InternalBaseComponentProps): JSX.Element;
+//# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/anchor-navigation/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["anchor-navigation/internal.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAIrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAG3F,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,OAAO,EACP,cAAc,EACd,QAAQ,EACR,kBAAkB,EAClB,UAAe,EACf,iBAAwB,EACxB,eAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,GAAG,0BAA0B,eA+CpD"}

package/lib/internal/template/anchor-navigation/internal.js

@@ -0,0 +1,48 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useCallback, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import testUtilsStyles from './test-classes/styles.css.js';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import useScrollSpy from './use-scroll-spy.js';
+import { fireCancelableEvent, fireNonCancelableEvent, isPlainLeftClick } from '../internal/events/index';
+import { getBaseProps } from '../internal/base-component/index.js';
+export default function InternalAnchorNavigation(_a) {
+    var { anchors, ariaLabelledby, onFollow, onActiveHrefChange, activeHref = '', __internalRootRef = null, scrollSpyOffset = 0 } = _a, props = __rest(_a, ["anchors", "ariaLabelledby", "onFollow", "onActiveHrefChange", "activeHref", "__internalRootRef", "scrollSpyOffset"]);
+    const baseProps = getBaseProps(props);
+    const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);
+    const onFollowHandler = useCallback((anchor, sourceEvent) => {
+        fireCancelableEvent(onFollow, anchor, sourceEvent);
+    }, [onFollow]);
+    const currentActiveHref = useScrollSpy({
+        hrefs,
+        scrollSpyOffset,
+        activeHref,
+    });
+    useEffect(() => {
+        if (currentActiveHref) {
+            const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);
+            fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);
+        }
+    }, [onActiveHrefChange, anchors, currentActiveHref]);
+    return (React.createElement("nav", Object.assign({}, baseProps, { ref: __internalRootRef, "aria-labelledby": ariaLabelledby, className: clsx(baseProps.className, styles.root, testUtilsStyles.root) }),
+        React.createElement("ol", { className: clsx(styles['anchor-list'], testUtilsStyles['anchor-list']) }, anchors.map((anchor, index) => {
+            return (React.createElement(Anchor, { onFollow: onFollowHandler, isActive: anchor.href === currentActiveHref, key: index, index: index, anchor: anchor }));
+        }))));
+}
+const Anchor = ({ anchor, onFollow, isActive, index }) => {
+    checkSafeUrl('SideNavigation', anchor.href);
+    const onClick = useCallback((event) => {
+        if (isPlainLeftClick(event)) {
+            onFollow(anchor, event);
+        }
+    }, [onFollow, anchor]);
+    const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);
+    return (React.createElement("li", { "data-itemid": `anchor-item-${index + 1}`, className: clsx(styles['anchor-item'], isActive && activeItemClasses) },
+        React.createElement("a", Object.assign({ onClick: onClick, className: clsx(styles['anchor-link'], testUtilsStyles['anchor-link'], isActive && styles['anchor-link--active']) }, (isActive ? { 'aria-current': true } : {}), { href: anchor.href }),
+            React.createElement("span", { className: clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text']), style: { paddingLeft: `${anchor.level * 16 + 2}px` } }, anchor.text),
+            anchor.info && (React.createElement("span", { className: clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info']) }, anchor.info)))));
+};
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/anchor-navigation/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["anchor-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, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\nimport { AnchorNavigationProps } from './interfaces';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport useScrollSpy from './use-scroll-spy.js';\nimport { fireCancelableEvent, fireNonCancelableEvent, isPlainLeftClick } from '../internal/events/index';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { getBaseProps } from '../internal/base-component/index.js';\n\nexport default function InternalAnchorNavigation({\n  anchors,\n  ariaLabelledby,\n  onFollow,\n  onActiveHrefChange,\n  activeHref = '',\n  __internalRootRef = null,\n  scrollSpyOffset = 0,\n  ...props\n}: AnchorNavigationProps & InternalBaseComponentProps) {\n  const baseProps = getBaseProps(props);\n\n  const hrefs = useMemo(() => anchors.map(anchor => anchor.href), [anchors]);\n\n  const onFollowHandler = useCallback(\n    (anchor: AnchorNavigationProps.Anchor, sourceEvent: React.SyntheticEvent | Event) => {\n      fireCancelableEvent(onFollow, anchor, sourceEvent);\n    },\n    [onFollow]\n  );\n\n  const currentActiveHref = useScrollSpy({\n    hrefs,\n    scrollSpyOffset,\n    activeHref,\n  });\n\n  useEffect(() => {\n    if (currentActiveHref) {\n      const newActiveAnchor = anchors.find(anchor => anchor.href === currentActiveHref);\n      fireNonCancelableEvent(onActiveHrefChange, newActiveAnchor);\n    }\n  }, [onActiveHrefChange, anchors, currentActiveHref]);\n\n  return (\n    <nav\n      {...baseProps}\n      ref={__internalRootRef}\n      aria-labelledby={ariaLabelledby}\n      className={clsx(baseProps.className, styles.root, testUtilsStyles.root)}\n    >\n      <ol className={clsx(styles['anchor-list'], testUtilsStyles['anchor-list'])}>\n        {anchors.map((anchor, index) => {\n          return (\n            <Anchor\n              onFollow={onFollowHandler}\n              isActive={anchor.href === currentActiveHref}\n              key={index}\n              index={index}\n              anchor={anchor}\n            />\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\ninterface AnchorProps {\n  anchor: AnchorNavigationProps.Anchor;\n  onFollow: (anchor: AnchorNavigationProps.Anchor, event: React.SyntheticEvent | Event) => void;\n  isActive: boolean;\n  index: number;\n}\n\nconst Anchor = ({ anchor, onFollow, isActive, index }: AnchorProps) => {\n  checkSafeUrl('SideNavigation', anchor.href);\n\n  const onClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        onFollow(anchor, event);\n      }\n    },\n    [onFollow, anchor]\n  );\n\n  const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);\n\n  return (\n    <li data-itemid={`anchor-item-${index + 1}`} className={clsx(styles['anchor-item'], isActive && activeItemClasses)}>\n      <a\n        onClick={onClick}\n        className={clsx(\n          styles['anchor-link'],\n          testUtilsStyles['anchor-link'],\n          isActive && styles['anchor-link--active']\n        )}\n        {...(isActive ? { 'aria-current': true } : {})}\n        href={anchor.href}\n      >\n        <span\n          className={clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text'])}\n          style={{ paddingLeft: `${anchor.level * 16 + 2}px` }}\n        >\n          {anchor.text}\n        </span>\n        {anchor.info && (\n          <span className={clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info'])}>{anchor.info}</span>\n        )}\n      </a>\n    </li>\n  );\n};\n"]}

package/lib/internal/template/anchor-navigation/styles.css.js

@@ -0,0 +1,13 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_swimc_h60aw_93",
+  "anchor-list": "awsui_anchor-list_swimc_h60aw_106",
+  "anchor-item": "awsui_anchor-item_swimc_h60aw_124",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_h60aw_143",
+  "anchor-link": "awsui_anchor-link_swimc_h60aw_157",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_h60aw_196",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_h60aw_203",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_h60aw_207"
+};
+