@cloudscape-design/components 3.0.388 → 3.0.390

package/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/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/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/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/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/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/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/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/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/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/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/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/anchor-navigation/styles.css.js

@@ -0,0 +1,13 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_swimc_1mwue_93",
+  "anchor-list": "awsui_anchor-list_swimc_1mwue_106",
+  "anchor-item": "awsui_anchor-item_swimc_1mwue_124",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_1mwue_143",
+  "anchor-link": "awsui_anchor-link_swimc_1mwue_157",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_1mwue_196",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_1mwue_203",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_1mwue_207"
+};
+  

package/anchor-navigation/styles.scoped.css

@@ -0,0 +1,243 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* 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 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_swimc_1mwue_93:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-default-2sxhhn, #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;
+}
+
+.awsui_anchor-list_swimc_1mwue_106:not(#\9) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-indent: 0;
+}
+.awsui_anchor-list_swimc_1mwue_106:not(#\9)::before {
+  content: "";
+  background-color: var(--color-border-divider-default-et9j7s, #e9ebed);
+  border-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  width: 2px;
+}
+
+.awsui_anchor-item_swimc_1mwue_124:not(#\9) {
+  transition: var(--motion-duration-slow-z2kaah, 180ms);
+  transition-property: all;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-secondary-so8znq, #414d5c);
+  font-weight: 400;
+  margin: var(--space-scaled-xxs-7597g1, 4px) 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_anchor-item_swimc_1mwue_124:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_anchor-item_swimc_1mwue_124:not(#\9), .awsui-mode-entering .awsui_anchor-item_swimc_1mwue_124:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_anchor-item--active_swimc_1mwue_143:not(#\9) {
+  position: relative;
+}
+.awsui_anchor-item--active_swimc_1mwue_143:not(#\9)::before {
+  content: "";
+  background-color: var(--color-text-accent-n2acxv, #0972d3);
+  border-radius: var(--border-radius-tabs-focus-ring-1q0rjo, 20px);
+  bottom: -2px;
+  pointer-events: none;
+  position: absolute;
+  top: -2px;
+  width: 2px;
+}
+
+.awsui_anchor-link_swimc_1mwue_157:not(#\9) {
+  transition: var(--motion-duration-slow-z2kaah, 180ms);
+  transition-property: all;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  align-items: baseline;
+  color: var(--color-text-body-secondary-so8znq, #414d5c);
+  display: flex;
+  flex-direction: row;
+  font-weight: 400;
+  text-decoration: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_anchor-link_swimc_1mwue_157:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_anchor-link_swimc_1mwue_157:not(#\9), .awsui-mode-entering .awsui_anchor-link_swimc_1mwue_157:not(#\9) {
+  animation: none;
+  transition: none;
+}
+body[data-awsui-focus-visible=true] .awsui_anchor-link_swimc_1mwue_157:not(#\9):focus {
+  outline: thin dotted;
+  outline: var(--border-link-focus-ring-outline-kkfop6, 0);
+  outline-offset: 2px;
+  outline-color: var(--color-border-item-focused-b2ntyl, #0972d3);
+  border-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-v8hkrl, 2px) var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+.awsui_anchor-link_swimc_1mwue_157:not(#\9):hover {
+  color: var(--color-text-accent-n2acxv, #0972d3);
+}
+.awsui_anchor-link_swimc_1mwue_157:not(#\9):focus {
+  outline: none;
+}
+.awsui_anchor-link_swimc_1mwue_157:not(#\9):hover, .awsui_anchor-link_swimc_1mwue_157:not(#\9):focus {
+  text-decoration: none;
+}
+.awsui_anchor-link--active_swimc_1mwue_196:not(#\9) {
+  font-weight: var(--font-wayfinding-link-active-weight-rbmzei, 700);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
+  color: var(--color-text-accent-n2acxv, #0972d3);
+}
+
+.awsui_anchor-link-text_swimc_1mwue_203:not(#\9) {
+  display: block;
+}
+
+.awsui_anchor-link-info_swimc_1mwue_207:not(#\9) {
+  margin-left: var(--space-xs-zb16t3, 8px);
+  font-size: var(--font-size-body-s-asqx2i, 12px);
+  line-height: var(--line-height-body-s-7zv1j5, 16px);
+  letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
+  font-weight: var(--font-button-weight-hv56tz, 700);
+  letter-spacing: 0.005em;
+  color: var(--color-text-link-default-latg1a, #0972d3);
+}

package/anchor-navigation/styles.selectors.js

@@ -0,0 +1,14 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_swimc_1mwue_93",
+  "anchor-list": "awsui_anchor-list_swimc_1mwue_106",
+  "anchor-item": "awsui_anchor-item_swimc_1mwue_124",
+  "anchor-item--active": "awsui_anchor-item--active_swimc_1mwue_143",
+  "anchor-link": "awsui_anchor-link_swimc_1mwue_157",
+  "anchor-link--active": "awsui_anchor-link--active_swimc_1mwue_196",
+  "anchor-link-text": "awsui_anchor-link-text_swimc_1mwue_203",
+  "anchor-link-info": "awsui_anchor-link-info_swimc_1mwue_207"
+};
+  

package/anchor-navigation/test-classes/styles.css.js

@@ -0,0 +1,11 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_17oho_5eh15_5",
+  "anchor-list": "awsui_anchor-list_17oho_5eh15_9",
+  "anchor-item--active": "awsui_anchor-item--active_17oho_5eh15_13",
+  "anchor-link": "awsui_anchor-link_17oho_5eh15_17",
+  "anchor-link-text": "awsui_anchor-link-text_17oho_5eh15_21",
+  "anchor-link-info": "awsui_anchor-link-info_17oho_5eh15_25"
+};
+  

package/anchor-navigation/test-classes/styles.scoped.css

@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_17oho_5eh15_5:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-list_17oho_5eh15_9:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-item--active_17oho_5eh15_13:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link_17oho_5eh15_17:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link-text_17oho_5eh15_21:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_anchor-link-info_17oho_5eh15_25:not(#\9) {
+  /* used in test-utils */
+}

package/anchor-navigation/test-classes/styles.selectors.js

@@ -0,0 +1,12 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_17oho_5eh15_5",
+  "anchor-list": "awsui_anchor-list_17oho_5eh15_9",
+  "anchor-item--active": "awsui_anchor-item--active_17oho_5eh15_13",
+  "anchor-link": "awsui_anchor-link_17oho_5eh15_17",
+  "anchor-link-text": "awsui_anchor-link-text_17oho_5eh15_21",
+  "anchor-link-info": "awsui_anchor-link-info_17oho_5eh15_25"
+};
+  

package/anchor-navigation/use-scroll-spy.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Hook to implement scroll-spy functionality.
+ *
+ * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.
+ * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.
+ * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.
+ * Useful for accommodating fixed or sticky headers.
+ * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,
+ * and the scroll-spy logic will be disabled.
+ *
+ * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.
+ */
+export default function useScrollSpy({ hrefs, scrollSpyOffset, activeHref, }: {
+    hrefs: string[];
+    scrollSpyOffset: number;
+    activeHref?: string;
+}): string | undefined;
+//# sourceMappingURL=use-scroll-spy.d.ts.map

package/anchor-navigation/use-scroll-spy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-spy.d.ts","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.tsx"],"names":[],"mappings":"AAMA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,eAAe,EACf,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,MAAM,GAAG,SAAS,CAgErB"}

package/anchor-navigation/use-scroll-spy.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect, useState } from 'react';
+const isBrowser = typeof window !== 'undefined';
+/**
+ * Hook to implement scroll-spy functionality.
+ *
+ * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.
+ * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.
+ * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.
+ * Useful for accommodating fixed or sticky headers.
+ * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,
+ * and the scroll-spy logic will be disabled.
+ *
+ * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.
+ */
+export default function useScrollSpy({ hrefs, scrollSpyOffset, activeHref, }) {
+    const [currentHref, setCurrentHref] = useState(activeHref);
+    const [lastAnchorExists, setLastAnchorExists] = useState(false);
+    useEffect(() => {
+        setCurrentHref(activeHref);
+    }, [activeHref]);
+    useEffect(() => {
+        var _a;
+        setLastAnchorExists(isBrowser && !!document.getElementById((_a = hrefs[hrefs.length - 1]) === null || _a === void 0 ? void 0 : _a.slice(1)));
+    }, [hrefs]);
+    // Get the bounding rectangle of an element by href
+    const getRectByHref = useCallback(href => {
+        var _a;
+        return (_a = document.getElementById(href.slice(1))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    }, []);
+    // Check if we're scrolled to the bottom of the page
+    const isPageBottom = useCallback(() => {
+        return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);
+    }, [lastAnchorExists]);
+    // Find the first href for which the element is within the viewport
+    const findHrefInView = useCallback(() => {
+        return hrefs.find(href => {
+            const rect = getRectByHref(href);
+            return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;
+        });
+    }, [getRectByHref, scrollSpyOffset, hrefs]);
+    // Find the last href where its element is above or within the viewport
+    const findLastHrefInView = useCallback(() => {
+        return [...hrefs].reverse().find(href => {
+            const rect = getRectByHref(href);
+            return rect && rect.bottom <= window.innerHeight;
+        });
+    }, [getRectByHref, hrefs]);
+    // Scroll event handler
+    const handleScroll = useCallback(() => {
+        if (activeHref || !isBrowser) {
+            return;
+        }
+        const { scrollY } = window;
+        if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {
+            setCurrentHref(hrefs[hrefs.length - 1]);
+        }
+        else {
+            setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));
+        }
+    }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);
+    useEffect(() => {
+        if (isBrowser) {
+            handleScroll();
+            window.addEventListener('scroll', handleScroll, { passive: true });
+            return () => {
+                window.removeEventListener('scroll', handleScroll);
+            };
+        }
+    }, [handleScroll]);
+    return currentHref;
+}
+//# sourceMappingURL=use-scroll-spy.js.map

package/anchor-navigation/use-scroll-spy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-spy.js","sourceRoot":"lib/default/","sources":["anchor-navigation/use-scroll-spy.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 { useCallback, useEffect, useState } from 'react';\n\nconst isBrowser = typeof window !== 'undefined';\n\n/**\n * Hook to implement scroll-spy functionality.\n *\n * @param hrefs An array of href strings that correspond to the IDs of the target elements on the page.\n * The hrefs should be sorted in the order they appear on the page for accurate scroll-spy behavior.\n * @param scrollSpyOffset The number of pixels to offset from the top of the document when activating anchors.\n * Useful for accommodating fixed or sticky headers.\n * @param activeHref The currently active href. If provided, the hook will operate in a controlled manner,\n * and the scroll-spy logic will be disabled.\n *\n * @returns {string | undefined} - The href of the currently active element as per scroll position, or undefined if none is active.\n */\nexport default function useScrollSpy({\n  hrefs,\n  scrollSpyOffset,\n  activeHref,\n}: {\n  hrefs: string[];\n  scrollSpyOffset: number;\n  activeHref?: string;\n}): string | undefined {\n  const [currentHref, setCurrentHref] = useState<string | undefined>(activeHref);\n  const [lastAnchorExists, setLastAnchorExists] = useState(false);\n\n  useEffect(() => {\n    setCurrentHref(activeHref);\n  }, [activeHref]);\n\n  useEffect(() => {\n    setLastAnchorExists(isBrowser && !!document.getElementById(hrefs[hrefs.length - 1]?.slice(1)));\n  }, [hrefs]);\n\n  // Get the bounding rectangle of an element by href\n  const getRectByHref = useCallback(href => {\n    return document.getElementById(href.slice(1))?.getBoundingClientRect();\n  }, []);\n\n  // Check if we're scrolled to the bottom of the page\n  const isPageBottom = useCallback(() => {\n    return lastAnchorExists && Math.ceil(window.scrollY) >= Math.floor(document.body.scrollHeight - window.innerHeight);\n  }, [lastAnchorExists]);\n\n  // Find the first href for which the element is within the viewport\n  const findHrefInView = useCallback(() => {\n    return hrefs.find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight && rect.top >= scrollSpyOffset;\n    });\n  }, [getRectByHref, scrollSpyOffset, hrefs]);\n\n  // Find the last href where its element is above or within the viewport\n  const findLastHrefInView = useCallback(() => {\n    return [...hrefs].reverse().find(href => {\n      const rect = getRectByHref(href);\n      return rect && rect.bottom <= window.innerHeight;\n    });\n  }, [getRectByHref, hrefs]);\n\n  // Scroll event handler\n  const handleScroll = useCallback(() => {\n    if (activeHref || !isBrowser) {\n      return;\n    }\n\n    const { scrollY } = window;\n\n    if (document.body.scrollHeight > window.innerHeight && isPageBottom()) {\n      setCurrentHref(hrefs[hrefs.length - 1]);\n    } else {\n      setCurrentHref(findHrefInView() || (scrollY > 0 ? findLastHrefInView() : undefined));\n    }\n  }, [activeHref, isPageBottom, findHrefInView, findLastHrefInView, hrefs]);\n\n  useEffect(() => {\n    if (isBrowser) {\n      handleScroll();\n      window.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        window.removeEventListener('scroll', handleScroll);\n      };\n    }\n  }, [handleScroll]);\n\n  return currentHref;\n}\n"]}