@cloudscape-design/components 3.0.647 → 3.0.649

package/tabs/tab-header-bar.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, forwardRef } from 'react';
 import clsx from 'clsx';
 import styles from './styles.css.js';
 import { InternalButton } from '../button/internal';
@@ -11,13 +11,20 @@ import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useInternalI18n } from '../i18n/context';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { SingleTabStopNavigationProvider, useSingleTabStopNavigation, } from '../internal/context/single-tab-stop-navigation-context';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { getAllFocusables } from '../internal/components/focus-lock/utils';
+const tabSelector = '[role="tab"]';
+const activeTabSelector = '[role="tab"][aria-selected="true"]';
 export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
     const headerBarRef = useRef(null);
     const activeTabHeaderRef = useRef(null);
     const inlineStartOverflowButton = useRef(null);
     const i18n = useInternalI18n('tabs');
     const isVisualRefresh = useVisualRefresh();
-    const [widthChange, containerRef] = useContainerQuery(rect => rect.contentBoxWidth);
+    const containerObjectRef = useRef(null);
+    const [widthChange, containerMeasureRef] = useContainerQuery(rect => rect.contentBoxWidth);
+    const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);
     const tabRefs = useRef(new Map());
     const [horizontalOverflow, setHorizontalOverflow] = useState(false);
     const [inlineStartOverflow, setInlineStartOverflow] = useState(false);
@@ -34,8 +41,8 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             return;
         }
         const activeTabRef = tabRefs.current.get(activeTabId);
-        if (activeTabRef && headerBarRef.current) {
-            scrollIntoView(activeTabRef, headerBarRef.current, smooth);
+        if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {
+            scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);
         }
     };
     useEffect(() => {
@@ -85,40 +92,85 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         [styles['pagination-button-right']]: true,
         [styles['pagination-button-right-scrollable']]: inlineEndOverflow,
     });
+    const navigationAPI = useRef(null);
+    function getNextFocusTarget() {
+        var _a, _b;
+        if (!containerObjectRef.current) {
+            return null;
+        }
+        const tabElements = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));
+        return (_b = (_a = tabElements.find(tab => tab.matches(activeTabSelector))) !== null && _a !== void 0 ? _a : tabElements.find(tab => !tab.disabled)) !== null && _b !== void 0 ? _b : null;
+    }
+    useEffect(() => {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    });
+    function onFocus() {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    }
+    function onBlur() {
+        var _a;
+        (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
+    }
+    function onKeyDown(event) {
+        var _a;
+        const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
+        const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
+        if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
+            return;
+        }
+        if (!containerObjectRef.current || !focusTarget) {
+            return;
+        }
+        event.preventDefault();
+        const focusables = getFocusablesFrom(containerObjectRef.current);
+        const activeIndex = focusables.indexOf(focusTarget);
+        handleKey(event, {
+            onHome: () => focusElement(focusables[0]),
+            onEnd: () => focusElement(focusables[focusables.length - 1]),
+            onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),
+            onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),
+            onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),
+            onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),
+        });
+    }
+    function focusElement(element) {
+        var _a;
+        element.focus();
+        // If focusable element is a tab - fire the onChange for it.
+        const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map());
+        for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {
+            if (tabId !== activeTabId && tabTriggerElement === element) {
+                onChange({ activeTabId: tabId, activeTabHref: (_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.href });
+                break;
+            }
+        }
+    }
+    // List all non-disabled and registered focusables: those are eligible for keyboard navigation.
+    function getFocusablesFrom(target) {
+        function isElementRegistered(element) {
+            var _a, _b;
+            return (_b = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.isRegistered(element)) !== null && _b !== void 0 ? _b : false;
+        }
+        function isElementDisabled(element) {
+            if (element instanceof HTMLButtonElement) {
+                return element.disabled && element.getAttribute('aria-selected') !== 'true';
+            }
+            return false;
+        }
+        return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
+    }
     return (
     //converted span to div as list should not be a child of span for HTML validation
     React.createElement("div", { className: classes, ref: containerRef },
         horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
-        React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll }, tabs.map(renderTabHeader)),
+        React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget },
+            React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }, tabs.map(renderTabHeader))),
         horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
             React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));
     function renderTabHeader(tab) {
-        const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);
-        const highlightTab = function (enabledTabIndex) {
-            const tab = enabledTabsWithCurrentTab[enabledTabIndex];
-            if (tab.id === activeTabId) {
-                return;
-            }
-            onChange({ activeTabId: tab.id, activeTabHref: tab.href });
-        };
-        const onKeyDown = function (event) {
-            const { keyCode } = event;
-            const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
-            if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {
-                return;
-            }
-            event.preventDefault();
-            const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);
-            handleKey(event, {
-                onEnd: () => highlightTab(enabledTabsWithCurrentTab.length - 1),
-                onHome: () => highlightTab(0),
-                onInlineEnd: () => activeIndex + 1 === enabledTabsWithCurrentTab.length ? highlightTab(0) : highlightTab(activeIndex + 1),
-                onInlineStart: () => activeIndex === 0 ? highlightTab(enabledTabsWithCurrentTab.length - 1) : highlightTab(activeIndex - 1),
-                onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),
-                onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),
-            });
-        };
         const clickTab = (event) => {
             if (tab.disabled) {
                 event.preventDefault();
@@ -134,9 +186,8 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
             if (!tab.href) {
                 const clickedTabRef = tabRefs.current.get(tab.id);
                 if (clickedTabRef) {
-                    const childElement = clickedTabRef.firstChild;
-                    if (childElement && childElement !== document.activeElement) {
-                        childElement.focus({ preventScroll: true });
+                    if (clickedTabRef && clickedTabRef !== document.activeElement) {
+                        clickedTabRef.focus({ preventScroll: true });
                     }
                 }
             }
@@ -166,32 +217,32 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
         else {
             commonProps.onClick = clickTab;
         }
-        if (tab.id === activeTabId) {
-            commonProps.ref = activeTabHeaderRef;
-            commonProps.tabIndex = 0;
-            commonProps.onKeyDown = (event) => onKeyDown(event);
-        }
-        else {
-            commonProps.tabIndex = -1;
-        }
-        let trigger = null;
-        if (tab.href) {
-            const anchorProps = commonProps;
-            anchorProps.href = tab.href;
-            trigger = React.createElement("a", Object.assign({}, anchorProps));
-        }
-        else {
-            const buttonProps = commonProps;
-            buttonProps.type = 'button';
-            if (tab.disabled) {
-                buttonProps.disabled = true;
+        const setElement = (tabElement) => {
+            if (tab.id === activeTabId) {
+                activeTabHeaderRef.current = tabElement;
             }
-            trigger = React.createElement("button", Object.assign({}, buttonProps));
-        }
-        return (React.createElement("li", { ref: element => tabRefs.current.set(tab.id, element), className: styles['tabs-tab'], role: "presentation", key: tab.id }, trigger));
+            tabRefs.current.set(tab.id, tabElement);
+        };
+        return (React.createElement("li", { className: styles['tabs-tab'], role: "presentation", key: tab.id },
+            React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps })));
     }
 }
+const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
+    const refObject = useRef(null);
+    const mergedRef = useMergeRefs(refObject, ref);
+    const { tabIndex } = useSingleTabStopNavigation(refObject);
+    return tab.href ? (React.createElement("a", Object.assign({}, elementProps, { href: tab.href, ref: mergedRef, tabIndex: tabIndex }))) : (React.createElement("button", Object.assign({}, elementProps, { type: "button", disabled: tab.disabled, ref: mergedRef, tabIndex: tabIndex })));
+});
 export function getTabElementId({ namespace, tabId }) {
     return namespace + '-' + tabId;
 }
+function circleIndex(index, [from, to]) {
+    if (index < from) {
+        return to;
+    }
+    if (index > to) {
+        return from;
+    }
+    return index;
+}
 //# sourceMappingURL=tab-header-bar.js.map

package/tabs/tab-header-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAazE,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACO;IAClB,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC3D,MAAM,yBAAyB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAErC,MAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAS,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5F,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,qBAAqB,CAAC,qBAAqB,CAAC,YAAY,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC;YAC9F,sBAAsB,CAAC,sBAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACrE,oBAAoB,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAClE;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,MAAM,wBAAwB,GAAG,CAAC,MAAe,EAAE,EAAE;QACnD,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO,EAAE;YACxC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,yDAAyD;QACzD,gEAAgE;QAChE,qBAAqB,CAAC,GAAG,EAAE;YACzB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,kBAAkB,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,8DAA8D;QAC9D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC,GAAG,EAAE;;QACb;;;UAGE;QACF,IAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;YAC1D,IAAI,QAAQ,CAAC,aAAa,KAAK,kBAAkB,CAAC,OAAO,EAAE;gBACzD,MAAA,kBAAkB,CAAC,OAAO,0CAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5D;SACF;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,sBAAsB,CAAC,sBAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACrE,oBAAoB,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAClE;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC;QACnB,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,IAAI;QAC7B,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,OAAO,KAAK,SAAS,IAAI,eAAe;KAC/E,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,IAAI,CAAC;QAC7B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,IAAI;QACxC,CAAC,MAAM,CAAC,mCAAmC,CAAC,CAAC,EAAE,mBAAmB;KACnE,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC;QAC9B,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,IAAI;QACnC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,IAAI;QACzC,CAAC,MAAM,CAAC,oCAAoC,CAAC,CAAC,EAAE,iBAAiB;KAClE,CAAC,CAAC;IAEH,OAAO;IACL,iFAAiF;IACjF,6BAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY;QACvC,kBAAkB,IAAI,CACrB,8BAAM,GAAG,EAAE,yBAAyB,EAAE,SAAS,EAAE,iBAAiB;YAChE,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,YAAY,EACrB,QAAQ,EAAE,CAAC,mBAAmB,EAC9B,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,UAAU,CAAC,EAC1D,SAAS,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,GACpF,CACG,CACR;QACD,4BACE,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,gBACzB,SAAS,qBACJ,cAAc,EAC/B,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,QAAQ,IAEjB,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,CACvB;QACJ,kBAAkB,IAAI,CACrB,8BAAM,SAAS,EAAE,kBAAkB;YACjC,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,aAAa,EACtB,QAAQ,EAAE,CAAC,iBAAiB,EAC5B,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,YAAY,EAAE,SAAS,CAAC,EACzD,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,GACtF,CACG,CACR,CACG,CACP,CAAC;IAEF,SAAS,eAAe,CAAC,GAAkB;QACzC,MAAM,yBAAyB,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,CAAC;QAE9F,MAAM,YAAY,GAAG,UAAU,eAAuB;YACpD,MAAM,GAAG,GAAG,yBAAyB,CAAC,eAAe,CAAC,CAAC;YACvD,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,UAChB,KAAsF;YAEtF,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;YAC1B,MAAM,WAAW,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;YAC/G,IAAI,eAAe,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACjE,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,WAAW,GAAG,yBAAyB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAE3D,SAAS,CAAC,KAAK,EAAE;gBACf,KAAK,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC/D,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;gBAC7B,WAAW,EAAE,GAAG,EAAE,CAChB,WAAW,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC;gBACxG,aAAa,EAAE,GAAG,EAAE,CAClB,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC;gBACxG,UAAU,EAAE,GAAG,EAAE,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,YAAY,EAAE,SAAS,CAAC;gBACjF,QAAQ,EAAE,GAAG,EAAE,CAAC,mBAAmB,IAAI,iBAAiB,CAAC,YAAY,EAAE,UAAU,CAAC;aACnF,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,CAAC,KAAuB,EAAE,EAAE;YAC3C,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,wGAAwG;YACxG,MAAM,UAAU,GAAG,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAI,UAAU,IAAI,GAAG,CAAC,IAAI,EAAE;gBAC1B,OAAO;aACR;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,yDAAyD;YACzD,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;gBACb,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,aAAa,EAAE;oBACjB,MAAM,YAAY,GAAG,aAAa,CAAC,UAA+B,CAAC;oBACnE,IAAI,YAAY,IAAI,YAAY,KAAK,QAAQ,CAAC,aAAa,EAAE;wBAC3D,YAAY,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;qBAC7C;iBACF;aACF;YAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;gBAC1B,OAAO;aACR;YAED,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;QAC7D,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC;YACnB,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,IAAI;YAC/B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,eAAe;YACjC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACpE,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,QAAQ;SAC5C,CAAC,CAAC;QAEH,MAAM,WAAW,GAA+F;YAC9G,SAAS,EAAE,OAAO;YAClB,IAAI,EAAE,KAAK;YACX,eAAe,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW;YACvC,eAAe,EAAE,GAAG,WAAW,IAAI,GAAG,CAAC,EAAE,QAAQ;YACjD,aAAa,EAAE,GAAG,CAAC,EAAE;YACrB,EAAE,EAAE,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC;YAC9D,QAAQ,EAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,GAAG,CAAC,KAAK,CAAQ;SACxE,CAAC;QAEF,IAAI,GAAG,CAAC,QAAQ,EAAE;YAChB,WAAW,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;SAChC;QAED,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAE;YAC1B,WAAW,CAAC,GAAG,GAAG,kBAAkB,CAAC;YACrC,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC;YACzB,WAAW,CAAC,SAAS,GAAG,CACtB,KAAsF,EACtF,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;SACvB;aAAM;YACL,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,GAAG,CAAC,IAAI,EAAE;YACZ,MAAM,WAAW,GAAG,WAAyC,CAAC;YAC9D,WAAW,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC5B,OAAO,GAAG,2CAAO,WAAW,EAAI,CAAC;SAClC;aAAM;YACL,MAAM,WAAW,GAAG,WAA8C,CAAC;YACnE,WAAW,CAAC,IAAI,GAAG,QAAQ,CAAC;YAC5B,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC;aAC7B;YACD,OAAO,GAAG,gDAAY,WAAW,EAAI,CAAC;SACvC;QAED,OAAO,CACL,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,OAAsB,CAAC,EACnE,SAAS,EAAE,MAAM,CAAC,UAAU,CAAC,EAC7B,IAAI,EAAC,cAAc,EACnB,GAAG,EAAE,GAAG,CAAC,EAAE,IAEV,OAAO,CACL,CACN,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAwC;IACxF,OAAO,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC;AACjC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasInlineStartOverflow,\n  hasInlineEndOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const inlineStartOverflowButton = useRef<HTMLElement>(null);\n  const i18n = useInternalI18n('tabs');\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n  const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n  });\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!inlineStartOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'backward')}\n            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!inlineEndOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'forward')}\n            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const onKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n\n      handleKey(event, {\n        onEnd: () => highlightTab(enabledTabsWithCurrentTab.length - 1),\n        onHome: () => highlightTab(0),\n        onInlineEnd: () =>\n          activeIndex + 1 === enabledTabsWithCurrentTab.length ? highlightTab(0) : highlightTab(activeIndex + 1),\n        onInlineStart: () =>\n          activeIndex === 0 ? highlightTab(enabledTabsWithCurrentTab.length - 1) : highlightTab(activeIndex - 1),\n        onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n        onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n      });\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => onKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n"]}
+{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.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, { useRef, useState, useEffect, forwardRef } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasInlineStartOverflow,\n  hasInlineEndOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n  SingleTabStopNavigationAPI,\n  SingleTabStopNavigationProvider,\n  useSingleTabStopNavigation,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\n\nconst tabSelector = '[role=\"tab\"]';\nconst activeTabSelector = '[role=\"tab\"][aria-selected=\"true\"]';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<null | HTMLElement>(null);\n  const inlineStartOverflowButton = useRef<HTMLElement>(null);\n  const i18n = useInternalI18n('tabs');\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const containerObjectRef = useRef<HTMLDivElement>(null);\n  const [widthChange, containerMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n  const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n  const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {\n      scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n      setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n  });\n\n  const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n  function getNextFocusTarget(): null | HTMLElement {\n    if (!containerObjectRef.current) {\n      return null;\n    }\n    const tabElements: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));\n    return tabElements.find(tab => tab.matches(activeTabSelector)) ?? tabElements.find(tab => !tab.disabled) ?? null;\n  }\n\n  useEffect(() => {\n    navigationAPI.current?.updateFocusTarget();\n  });\n  function onFocus() {\n    navigationAPI.current?.updateFocusTarget();\n  }\n  function onBlur() {\n    navigationAPI.current?.updateFocusTarget();\n  }\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const focusTarget = navigationAPI.current?.getFocusTarget();\n    const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n    if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n      return;\n    }\n    if (!containerObjectRef.current || !focusTarget) {\n      return;\n    }\n    event.preventDefault();\n\n    const focusables = getFocusablesFrom(containerObjectRef.current);\n    const activeIndex = focusables.indexOf(focusTarget);\n    handleKey(event as any, {\n      onHome: () => focusElement(focusables[0]),\n      onEnd: () => focusElement(focusables[focusables.length - 1]),\n      onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n      onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n      onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n      onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n    });\n  }\n  function focusElement(element: HTMLElement) {\n    element.focus();\n    // If focusable element is a tab - fire the onChange for it.\n    const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map<string, TabsProps.Tab>());\n    for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {\n      if (tabId !== activeTabId && tabTriggerElement === element) {\n        onChange({ activeTabId: tabId, activeTabHref: tabsById.get(tabId)?.href });\n        break;\n      }\n    }\n  }\n  // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n  function getFocusablesFrom(target: HTMLElement) {\n    function isElementRegistered(element: HTMLElement) {\n      return navigationAPI.current?.isRegistered(element) ?? false;\n    }\n    function isElementDisabled(element: HTMLElement) {\n      if (element instanceof HTMLButtonElement) {\n        return element.disabled && element.getAttribute('aria-selected') !== 'true';\n      }\n      return false;\n    }\n    return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n  }\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!inlineStartOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'backward')}\n            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n          />\n        </span>\n      )}\n      <SingleTabStopNavigationProvider\n        ref={navigationAPI}\n        navigationActive={true}\n        getNextFocusTarget={getNextFocusTarget}\n      >\n        <ul\n          role=\"tablist\"\n          className={styles['tabs-header-list']}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={headerBarRef}\n          onScroll={onScroll}\n          onKeyDown={onKeyDown}\n          onFocus={onFocus}\n          onBlur={onBlur}\n        >\n          {tabs.map(renderTabHeader)}\n        </ul>\n      </SingleTabStopNavigationProvider>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!inlineEndOverflow}\n            __focusable={true}\n            onClick={() => onPaginationClick(headerBarRef, 'forward')}\n            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id) as undefined | HTMLButtonElement;\n        if (clickedTabRef) {\n          if (clickedTabRef && clickedTabRef !== document.activeElement) {\n            clickedTabRef.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    const setElement = (tabElement: null | HTMLElement) => {\n      if (tab.id === activeTabId) {\n        activeTabHeaderRef.current = tabElement;\n      }\n      tabRefs.current.set(tab.id, tabElement as HTMLElement);\n    };\n\n    return (\n      <li className={styles['tabs-tab']} role=\"presentation\" key={tab.id}>\n        <TabTrigger ref={setElement} tab={tab} elementProps={commonProps} />\n      </li>\n    );\n  }\n}\n\nconst TabTrigger = forwardRef(\n  (\n    {\n      tab,\n      elementProps,\n    }: { tab: TabsProps.Tab; elementProps: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> },\n    ref: React.Ref<HTMLElement>\n  ) => {\n    const refObject = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs(refObject, ref);\n    const { tabIndex } = useSingleTabStopNavigation(refObject);\n    return tab.href ? (\n      <a {...elementProps} href={tab.href} ref={mergedRef} tabIndex={tabIndex} />\n    ) : (\n      <button {...elementProps} type=\"button\" disabled={tab.disabled} ref={mergedRef} tabIndex={tabIndex} />\n    );\n  }\n);\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n  if (index < from) {\n    return to;\n  }\n  if (index > to) {\n    return from;\n  }\n  return index;\n}\n"]}

package/token-group/dismiss-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}
+{"version":3,"file":"dismiss-button.d.ts","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;AAED,wBAAyC"}

package/token-group/dismiss-button.js

@@ -1,12 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef } from 'react';
-import clsx from 'clsx';
 import styles from './styles.css.js';
 import InternalIcon from '../icon/internal';
 export default forwardRef(DismissButton);
 function DismissButton({ disabled, dismissLabel, onDismiss }, ref) {
-    return (React.createElement("button", { ref: ref, type: "button", className: clsx(styles['dismiss-button']), "aria-disabled": disabled ? true : undefined, onClick: !disabled && onDismiss ? () => onDismiss() : undefined, "aria-label": dismissLabel },
+    return (React.createElement("button", { ref: ref, type: "button", className: styles['dismiss-button'], "aria-disabled": disabled ? true : undefined, onClick: !disabled && onDismiss ? () => onDismiss() : undefined, "aria-label": dismissLabel },
         React.createElement(InternalIcon, { name: "close" })));
 }
 //# sourceMappingURL=dismiss-button.js.map

package/token-group/dismiss-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAQ5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAsB,EAAE,GAA2B;IAC3G,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,mBAC1B,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,gBACnD,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton({ disabled, dismissLabel, onDismiss }: DismissButtonProps, ref: Ref<HTMLButtonElement>) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(styles['dismiss-button'])}\n      aria-disabled={disabled ? true : undefined}\n      onClick={!disabled && onDismiss ? () => onDismiss() : undefined}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token-group/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAQ5C,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAsB,EAAE,GAA2B;IAC3G,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,mBACpB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,gBACnD,YAAY;QAExB,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,GAAG,CACtB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport styles from './styles.css.js';\nimport InternalIcon from '../icon/internal';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  onDismiss?: () => void;\n  dismissLabel?: string;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton({ disabled, dismissLabel, onDismiss }: DismissButtonProps, ref: Ref<HTMLButtonElement>) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={styles['dismiss-button']}\n      aria-disabled={disabled ? true : undefined}\n      onClick={!disabled && onDismiss ? () => onDismiss() : undefined}\n      aria-label={dismissLabel}\n    >\n      <InternalIcon name=\"close\" />\n    </button>\n  );\n}\n"]}

package/wizard/wizard-form-header.js

@@ -5,6 +5,6 @@ import React from 'react';
 import styles from './styles.css.js';
 export default function WizardFormHeader({ children, isVisualRefresh }) {
     return (React.createElement("div", { className: clsx(styles['form-header'], isVisualRefresh && styles['form-header-refresh']) },
-        React.createElement("div", { className: clsx(styles['form-header-content']) }, children)));
+        React.createElement("div", { className: styles['form-header-content'] }, children)));
 }
 //# sourceMappingURL=wizard-form-header.js.map

package/wizard/wizard-form-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-form-header.js","sourceRoot":"","sources":["../../../src/wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAyB;IAC3F,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,eAAe,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAC3F,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,IAAG,QAAQ,CAAO,CACjE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\ninterface WizardFormHeaderProps {\n  children: React.ReactNode;\n  isMobile: boolean;\n  isVisualRefresh: boolean;\n}\n\nexport default function WizardFormHeader({ children, isVisualRefresh }: WizardFormHeaderProps) {\n  return (\n    <div className={clsx(styles['form-header'], isVisualRefresh && styles['form-header-refresh'])}>\n      <div className={clsx(styles['form-header-content'])}>{children}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"wizard-form-header.js","sourceRoot":"","sources":["../../../src/wizard/wizard-form-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAyB;IAC3F,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,eAAe,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAC3F,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAG,QAAQ,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport styles from './styles.css.js';\n\ninterface WizardFormHeaderProps {\n  children: React.ReactNode;\n  isMobile: boolean;\n  isVisualRefresh: boolean;\n}\n\nexport default function WizardFormHeader({ children, isVisualRefresh }: WizardFormHeaderProps) {\n  return (\n    <div className={clsx(styles['form-header'], isVisualRefresh && styles['form-header-refresh'])}>\n      <div className={styles['form-header-content']}>{children}</div>\n    </div>\n  );\n}\n"]}

package/wizard/wizard-form.js

@@ -57,7 +57,7 @@ export function WizardForm({ __internalRootRef, steps, activeStepIndex, isVisual
                 React.createElement("span", { className: styles['form-header-component-wrapper'], tabIndex: -1, ref: stepHeaderRef },
                     React.createElement("span", Object.assign({}, { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }), title),
                     isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)))),
-        React.createElement(InternalForm, Object.assign({ __internalRootRef: __internalRootRef, className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content)));
+        React.createElement(InternalForm, Object.assign({ __internalRootRef: __internalRootRef, className: styles['form-component'], actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content)));
 }
 function findSkipToTargetIndex(steps, activeStepIndex) {
     let nextRequiredStepIndex = activeStepIndex;

package/wizard/wizard-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-form.js","sourceRoot":"","sources":["../../../src/wizard/wizard-form.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_STEP_NAME } from '../internal/analytics/selectors';\nimport { PACKAGE_VERSION } from '../internal/environment';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nimport styles from './styles.css.js';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ninterface WizardFormProps extends InternalBaseComponentProps {\n  steps: ReadonlyArray<WizardProps.Step>;\n  activeStepIndex: number;\n  isVisualRefresh: boolean;\n  showCollapsedSteps: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  submitButtonText?: string;\n  isPrimaryLoading: boolean;\n  allowSkipTo: boolean;\n  secondaryActions?: React.ReactNode;\n  onCancelClick: () => void;\n  onPreviousClick: () => void;\n  onPrimaryClick: () => void;\n  onSkipToClick: (stepIndex: number) => void;\n}\n\nexport const STEP_NAME_SELECTOR = `[${DATA_ATTR_FUNNEL_KEY}=${FUNNEL_KEY_STEP_NAME}]`;\n\nexport default function WizardFormWithAnalytics(props: WizardFormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(\n    props.steps[props.activeStepIndex] as BasePropsWithAnalyticsMetadata\n  );\n  const __internalRootRef = useComponentMetadata('WizardForm', PACKAGE_VERSION, { ...analyticsMetadata });\n\n  return (\n    <AnalyticsFunnelStep\n      stepIdentifier={analyticsMetadata?.instanceIdentifier}\n      stepErrorContext={analyticsMetadata?.errorContext}\n      stepNameSelector={STEP_NAME_SELECTOR}\n      stepNumber={props.activeStepIndex + 1}\n    >\n      <WizardForm __internalRootRef={__internalRootRef} {...props} />\n    </AnalyticsFunnelStep>\n  );\n}\n\nexport function WizardForm({\n  __internalRootRef,\n  steps,\n  activeStepIndex,\n  isVisualRefresh,\n  showCollapsedSteps,\n  i18nStrings,\n  submitButtonText,\n  isPrimaryLoading,\n  allowSkipTo,\n  secondaryActions,\n  onCancelClick,\n  onPreviousClick,\n  onPrimaryClick,\n  onSkipToClick,\n}: WizardFormProps) {\n  const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n  const isLastStep = activeStepIndex >= steps.length - 1;\n  const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n  const isMobile = useMobile();\n  const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n  const { funnelInteractionId, funnelIdentifier } = useFunnel();\n  const { funnelStepProps, stepErrorContext } = useFunnelStep();\n\n  useEffect(() => {\n    if (stepHeaderRef && stepHeaderRef.current) {\n      stepHeaderRef.current?.focus();\n    }\n  }, [activeStepIndex]);\n\n  const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n  const skipToButtonText =\n    skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n      ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n      : undefined;\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText && isLastStep) {\n      FunnelMetrics.funnelError({\n        funnelInteractionId,\n        funnelIdentifier,\n        funnelErrorContext: stepErrorContext,\n      });\n    }\n  }, [funnelInteractionId, funnelIdentifier, isLastStep, errorText, stepErrorContext]);\n\n  return (\n    <>\n      <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n        <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>\n          {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n        </div>\n        <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n          <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n            <span {...{ [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }}>{title}</span>\n            {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n          </span>\n        </InternalHeader>\n      </WizardFormHeader>\n\n      <InternalForm\n        __internalRootRef={__internalRootRef}\n        className={clsx(styles['form-component'])}\n        actions={\n          <WizardActions\n            cancelButtonText={i18nStrings.cancelButton}\n            primaryButtonText={isLastStep ? submitButtonText ?? i18nStrings.submitButton : i18nStrings.nextButton}\n            primaryButtonLoadingText={\n              isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement\n            }\n            previousButtonText={i18nStrings.previousButton}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onPrimaryClick={onPrimaryClick}\n            onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n            showPrevious={activeStepIndex !== 0}\n            isPrimaryLoading={isPrimaryLoading}\n            showSkipTo={showSkipTo}\n            skipToButtonText={skipToButtonText}\n          />\n        }\n        secondaryActions={secondaryActions}\n        errorText={errorText}\n        errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n        {...funnelStepProps}\n      >\n        {content}\n      </InternalForm>\n    </>\n  );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n  let nextRequiredStepIndex = activeStepIndex;\n  do {\n    nextRequiredStepIndex++;\n  } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n  return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}
+{"version":3,"file":"wizard-form.js","sourceRoot":"","sources":["../../../src/wizard/wizard-form.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_STEP_NAME } from '../internal/analytics/selectors';\nimport { PACKAGE_VERSION } from '../internal/environment';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nimport styles from './styles.css.js';\nimport { useFunnel, useFunnelStep } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ninterface WizardFormProps extends InternalBaseComponentProps {\n  steps: ReadonlyArray<WizardProps.Step>;\n  activeStepIndex: number;\n  isVisualRefresh: boolean;\n  showCollapsedSteps: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  submitButtonText?: string;\n  isPrimaryLoading: boolean;\n  allowSkipTo: boolean;\n  secondaryActions?: React.ReactNode;\n  onCancelClick: () => void;\n  onPreviousClick: () => void;\n  onPrimaryClick: () => void;\n  onSkipToClick: (stepIndex: number) => void;\n}\n\nexport const STEP_NAME_SELECTOR = `[${DATA_ATTR_FUNNEL_KEY}=${FUNNEL_KEY_STEP_NAME}]`;\n\nexport default function WizardFormWithAnalytics(props: WizardFormProps) {\n  const analyticsMetadata = getAnalyticsMetadataProps(\n    props.steps[props.activeStepIndex] as BasePropsWithAnalyticsMetadata\n  );\n  const __internalRootRef = useComponentMetadata('WizardForm', PACKAGE_VERSION, { ...analyticsMetadata });\n\n  return (\n    <AnalyticsFunnelStep\n      stepIdentifier={analyticsMetadata?.instanceIdentifier}\n      stepErrorContext={analyticsMetadata?.errorContext}\n      stepNameSelector={STEP_NAME_SELECTOR}\n      stepNumber={props.activeStepIndex + 1}\n    >\n      <WizardForm __internalRootRef={__internalRootRef} {...props} />\n    </AnalyticsFunnelStep>\n  );\n}\n\nexport function WizardForm({\n  __internalRootRef,\n  steps,\n  activeStepIndex,\n  isVisualRefresh,\n  showCollapsedSteps,\n  i18nStrings,\n  submitButtonText,\n  isPrimaryLoading,\n  allowSkipTo,\n  secondaryActions,\n  onCancelClick,\n  onPreviousClick,\n  onPrimaryClick,\n  onSkipToClick,\n}: WizardFormProps) {\n  const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n  const isLastStep = activeStepIndex >= steps.length - 1;\n  const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n  const isMobile = useMobile();\n  const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n  const { funnelInteractionId, funnelIdentifier } = useFunnel();\n  const { funnelStepProps, stepErrorContext } = useFunnelStep();\n\n  useEffect(() => {\n    if (stepHeaderRef && stepHeaderRef.current) {\n      stepHeaderRef.current?.focus();\n    }\n  }, [activeStepIndex]);\n\n  const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n  const skipToButtonText =\n    skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n      ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n      : undefined;\n\n  useEffect(() => {\n    if (funnelInteractionId && errorText && isLastStep) {\n      FunnelMetrics.funnelError({\n        funnelInteractionId,\n        funnelIdentifier,\n        funnelErrorContext: stepErrorContext,\n      });\n    }\n  }, [funnelInteractionId, funnelIdentifier, isLastStep, errorText, stepErrorContext]);\n\n  return (\n    <>\n      <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n        <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>\n          {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n        </div>\n        <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n          <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n            <span {...{ [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_STEP_NAME }}>{title}</span>\n            {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n          </span>\n        </InternalHeader>\n      </WizardFormHeader>\n\n      <InternalForm\n        __internalRootRef={__internalRootRef}\n        className={styles['form-component']}\n        actions={\n          <WizardActions\n            cancelButtonText={i18nStrings.cancelButton}\n            primaryButtonText={isLastStep ? submitButtonText ?? i18nStrings.submitButton : i18nStrings.nextButton}\n            primaryButtonLoadingText={\n              isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement\n            }\n            previousButtonText={i18nStrings.previousButton}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onPrimaryClick={onPrimaryClick}\n            onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n            showPrevious={activeStepIndex !== 0}\n            isPrimaryLoading={isPrimaryLoading}\n            showSkipTo={showSkipTo}\n            skipToButtonText={skipToButtonText}\n          />\n        }\n        secondaryActions={secondaryActions}\n        errorText={errorText}\n        errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n        {...funnelStepProps}\n      >\n        {content}\n      </InternalForm>\n    </>\n  );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n  let nextRequiredStepIndex = activeStepIndex;\n  do {\n    nextRequiredStepIndex++;\n  } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n  return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}

package/wizard/wizard-navigation.js

@@ -82,8 +82,8 @@ function NavigationStepVisualRefresh({ i18nStrings, index, onStepClick, onSkipTo
                     handleStepInteraction();
                 }
             }, role: "button", tabIndex: status === Statuses.Visited || status === Statuses.Next ? 0 : undefined },
-            React.createElement("div", { className: clsx(styles.circle) }),
-            React.createElement("span", { className: clsx(styles.title) }, step.title))));
+            React.createElement("div", { className: styles.circle }),
+            React.createElement("span", { className: styles.title }, step.title))));
 }
 function NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }) {
     const spanClassName = clsx(styles['navigation-link'], status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']);
@@ -91,7 +91,7 @@ function NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick,
         React.createElement(InternalBox, { variant: "small", className: styles['navigation-link-label'], display: "block", margin: { bottom: 'xxs' } },
             i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1),
             step.isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)),
-        React.createElement("div", null, status === Statuses.Visited || status === Statuses.Next ? (React.createElement(InternalLink, { className: clsx(styles['navigation-link']), onFollow: evt => {
+        React.createElement("div", null, status === Statuses.Visited || status === Statuses.Next ? (React.createElement(InternalLink, { className: styles['navigation-link'], onFollow: evt => {
                 evt.preventDefault();
                 status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);
             }, variant: "primary" }, step.title)) : (React.createElement("span", { className: spanClassName, "aria-current": status === Statuses.Active ? 'step' : undefined, "aria-disabled": status === Statuses.Active ? undefined : 'true' }, step.title)))));

package/wizard/wizard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard-navigation.js","sourceRoot":"","sources":["../../../src/wizard/wizard-navigation.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 from 'react';\nimport clsx from 'clsx';\nimport InternalLink from '../link/internal';\nimport InternalBox from '../box/internal';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface NavigationProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  hidden: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isVisualRefresh: boolean;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n  i18nStrings: WizardProps.I18nStrings;\n  index: number;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  status: string;\n  step: WizardProps.Step;\n}\n\nenum Statuses {\n  Active = 'active',\n  Unvisited = 'unvisited',\n  Visited = 'visited',\n  Next = 'next',\n}\n\nexport default function Navigation({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  hidden,\n  i18nStrings,\n  isVisualRefresh,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: NavigationProps) {\n  return (\n    <nav\n      className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}\n      aria-label={i18nStrings.navigationAriaLabel}\n    >\n      <ul className={clsx(isVisualRefresh && styles.refresh)}>\n        {steps.map((step, index: number) =>\n          isVisualRefresh ? (\n            <NavigationStepVisualRefresh\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          ) : (\n            <NavigationStepClassic\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          )\n        )}\n      </ul>\n    </nav>\n  );\n\n  function getStatus(index: number) {\n    if (activeStepIndex === index) {\n      return Statuses.Active;\n    }\n    if (isLoadingNextStep) {\n      return Statuses.Unvisited;\n    }\n    if (farthestStepIndex >= index) {\n      return Statuses.Visited;\n    }\n    if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {\n      return Statuses.Next;\n    }\n    return Statuses.Unvisited;\n  }\n\n  function canSkip(fromIndex: number, toIndex: number) {\n    let index = fromIndex;\n    do {\n      if (!steps[index].isOptional) {\n        return false;\n      }\n      index++;\n    } while (index < toIndex);\n    return true;\n  }\n}\n\nfunction NavigationStepVisualRefresh({\n  i18nStrings,\n  index,\n  onStepClick,\n  onSkipToClick,\n  status,\n  step,\n}: NavigationStepProps) {\n  function handleStepInteraction() {\n    if (status === Statuses.Visited) {\n      onStepClick(index);\n    }\n    if (status === Statuses.Next) {\n      onSkipToClick(index);\n    }\n  }\n\n  const state = {\n    active: 'active',\n    unvisited: 'disabled',\n    visited: 'enabled',\n    next: 'enabled',\n  }[status];\n\n  const linkClassName = clsx(styles['navigation-link'], {\n    [styles['navigation-link-active']]: status === Statuses.Active,\n    [styles['navigation-link-disabled']]: status === Statuses.Unvisited,\n  });\n\n  return (\n    <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n      <hr />\n\n      <span className={clsx(styles.number, styles['navigation-link-label'])}>\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </span>\n\n      <a\n        className={linkClassName}\n        aria-current={status === Statuses.Active ? 'step' : undefined}\n        aria-disabled={status === Statuses.Unvisited ? 'true' : undefined}\n        onClick={event => {\n          event.preventDefault();\n          handleStepInteraction();\n        }}\n        onKeyDown={event => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n          }\n          // Enter activates the button on key down instead of key up.\n          if (event.key === 'Enter') {\n            handleStepInteraction();\n          }\n        }}\n        onKeyUp={event => {\n          // Emulate button behavior, which also fires on space.\n          if (event.key === ' ') {\n            handleStepInteraction();\n          }\n        }}\n        role=\"button\"\n        tabIndex={status === Statuses.Visited || status === Statuses.Next ? 0 : undefined}\n      >\n        <div className={clsx(styles.circle)} />\n\n        <span className={clsx(styles.title)}>{step.title}</span>\n      </a>\n    </li>\n  );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n  const spanClassName = clsx(\n    styles['navigation-link'],\n    status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n  );\n\n  return (\n    <li className={styles['navigation-link-item']}>\n      <InternalBox\n        variant=\"small\"\n        className={styles['navigation-link-label']}\n        display=\"block\"\n        margin={{ bottom: 'xxs' }}\n      >\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </InternalBox>\n      <div>\n        {status === Statuses.Visited || status === Statuses.Next ? (\n          <InternalLink\n            className={clsx(styles['navigation-link'])}\n            onFollow={evt => {\n              evt.preventDefault();\n              status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);\n            }}\n            variant=\"primary\"\n          >\n            {step.title}\n          </InternalLink>\n        ) : (\n          <span\n            className={spanClassName}\n            aria-current={status === Statuses.Active ? 'step' : undefined}\n            aria-disabled={status === Statuses.Active ? undefined : 'true'}\n          >\n            {step.title}\n          </span>\n        )}\n      </div>\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"wizard-navigation.js","sourceRoot":"","sources":["../../../src/wizard/wizard-navigation.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 from 'react';\nimport clsx from 'clsx';\nimport InternalLink from '../link/internal';\nimport InternalBox from '../box/internal';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\n\ninterface NavigationProps {\n  activeStepIndex: number;\n  farthestStepIndex: number;\n  allowSkipTo: boolean;\n  hidden: boolean;\n  i18nStrings: WizardProps.I18nStrings;\n  isVisualRefresh: boolean;\n  isLoadingNextStep: boolean;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  steps: ReadonlyArray<WizardProps.Step>;\n}\n\ninterface NavigationStepProps {\n  i18nStrings: WizardProps.I18nStrings;\n  index: number;\n  onStepClick: (stepIndex: number) => void;\n  onSkipToClick: (stepIndex: number) => void;\n  status: string;\n  step: WizardProps.Step;\n}\n\nenum Statuses {\n  Active = 'active',\n  Unvisited = 'unvisited',\n  Visited = 'visited',\n  Next = 'next',\n}\n\nexport default function Navigation({\n  activeStepIndex,\n  farthestStepIndex,\n  allowSkipTo,\n  hidden,\n  i18nStrings,\n  isVisualRefresh,\n  isLoadingNextStep,\n  onStepClick,\n  onSkipToClick,\n  steps,\n}: NavigationProps) {\n  return (\n    <nav\n      className={clsx(styles.navigation, hidden && styles.hidden, isVisualRefresh && styles.refresh)}\n      aria-label={i18nStrings.navigationAriaLabel}\n    >\n      <ul className={clsx(isVisualRefresh && styles.refresh)}>\n        {steps.map((step, index: number) =>\n          isVisualRefresh ? (\n            <NavigationStepVisualRefresh\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          ) : (\n            <NavigationStepClassic\n              i18nStrings={i18nStrings}\n              index={index}\n              key={index}\n              onStepClick={onStepClick}\n              onSkipToClick={onSkipToClick}\n              status={getStatus(index)}\n              step={step}\n            />\n          )\n        )}\n      </ul>\n    </nav>\n  );\n\n  function getStatus(index: number) {\n    if (activeStepIndex === index) {\n      return Statuses.Active;\n    }\n    if (isLoadingNextStep) {\n      return Statuses.Unvisited;\n    }\n    if (farthestStepIndex >= index) {\n      return Statuses.Visited;\n    }\n    if (allowSkipTo && canSkip(activeStepIndex + 1, index)) {\n      return Statuses.Next;\n    }\n    return Statuses.Unvisited;\n  }\n\n  function canSkip(fromIndex: number, toIndex: number) {\n    let index = fromIndex;\n    do {\n      if (!steps[index].isOptional) {\n        return false;\n      }\n      index++;\n    } while (index < toIndex);\n    return true;\n  }\n}\n\nfunction NavigationStepVisualRefresh({\n  i18nStrings,\n  index,\n  onStepClick,\n  onSkipToClick,\n  status,\n  step,\n}: NavigationStepProps) {\n  function handleStepInteraction() {\n    if (status === Statuses.Visited) {\n      onStepClick(index);\n    }\n    if (status === Statuses.Next) {\n      onSkipToClick(index);\n    }\n  }\n\n  const state = {\n    active: 'active',\n    unvisited: 'disabled',\n    visited: 'enabled',\n    next: 'enabled',\n  }[status];\n\n  const linkClassName = clsx(styles['navigation-link'], {\n    [styles['navigation-link-active']]: status === Statuses.Active,\n    [styles['navigation-link-disabled']]: status === Statuses.Unvisited,\n  });\n\n  return (\n    <li className={clsx(styles[`${state}`], styles['navigation-link-item'])}>\n      <hr />\n\n      <span className={clsx(styles.number, styles['navigation-link-label'])}>\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </span>\n\n      <a\n        className={linkClassName}\n        aria-current={status === Statuses.Active ? 'step' : undefined}\n        aria-disabled={status === Statuses.Unvisited ? 'true' : undefined}\n        onClick={event => {\n          event.preventDefault();\n          handleStepInteraction();\n        }}\n        onKeyDown={event => {\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n          }\n          // Enter activates the button on key down instead of key up.\n          if (event.key === 'Enter') {\n            handleStepInteraction();\n          }\n        }}\n        onKeyUp={event => {\n          // Emulate button behavior, which also fires on space.\n          if (event.key === ' ') {\n            handleStepInteraction();\n          }\n        }}\n        role=\"button\"\n        tabIndex={status === Statuses.Visited || status === Statuses.Next ? 0 : undefined}\n      >\n        <div className={styles.circle} />\n\n        <span className={styles.title}>{step.title}</span>\n      </a>\n    </li>\n  );\n}\n\nfunction NavigationStepClassic({ i18nStrings, index, onStepClick, onSkipToClick, status, step }: NavigationStepProps) {\n  const spanClassName = clsx(\n    styles['navigation-link'],\n    status === Statuses.Active ? styles['navigation-link-active'] : styles['navigation-link-disabled']\n  );\n\n  return (\n    <li className={styles['navigation-link-item']}>\n      <InternalBox\n        variant=\"small\"\n        className={styles['navigation-link-label']}\n        display=\"block\"\n        margin={{ bottom: 'xxs' }}\n      >\n        {i18nStrings.stepNumberLabel && i18nStrings.stepNumberLabel(index + 1)}\n        {step.isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n      </InternalBox>\n      <div>\n        {status === Statuses.Visited || status === Statuses.Next ? (\n          <InternalLink\n            className={styles['navigation-link']}\n            onFollow={evt => {\n              evt.preventDefault();\n              status === Statuses.Visited ? onStepClick(index) : onSkipToClick(index);\n            }}\n            variant=\"primary\"\n          >\n            {step.title}\n          </InternalLink>\n        ) : (\n          <span\n            className={spanClassName}\n            aria-current={status === Statuses.Active ? 'step' : undefined}\n            aria-disabled={status === Statuses.Active ? undefined : 'true'}\n          >\n            {step.title}\n          </span>\n        )}\n      </div>\n    </li>\n  );\n}\n"]}

package/internal/context/app-layout-context.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export interface AppLayoutContextProps {
-    setHasStickyBackground?: (hasBackground: boolean) => void;
-}
-export declare const defaultValue: AppLayoutContextProps;
-export declare const AppLayoutContext: import("react").Context<AppLayoutContextProps>;
-export declare function useAppLayoutContext(): AppLayoutContextProps;
-//# sourceMappingURL=app-layout-context.d.ts.map

package/internal/context/app-layout-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-layout-context.d.ts","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":";AAIA,MAAM,WAAW,qBAAqB;IACpC,sBAAsB,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,YAAY,EAAE,qBAA0B,CAAC;AAEtD,eAAO,MAAM,gBAAgB,gDAA8B,CAAC;AAE5D,wBAAgB,mBAAmB,0BAElC"}

package/internal/context/app-layout-context.js

@@ -1,9 +0,0 @@
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-import { useContext, createContext } from 'react';
-export const defaultValue = {};
-export const AppLayoutContext = createContext(defaultValue);
-export function useAppLayoutContext() {
-    return useContext(AppLayoutContext);
-}
-//# sourceMappingURL=app-layout-context.js.map

package/internal/context/app-layout-context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-layout-context.js","sourceRoot":"","sources":["../../../../src/internal/context/app-layout-context.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAMlD,MAAM,CAAC,MAAM,YAAY,GAA0B,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;AAE5D,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,gBAAgB,CAAC,CAAC;AACtC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext, createContext } from 'react';\n\nexport interface AppLayoutContextProps {\n  setHasStickyBackground?: (hasBackground: boolean) => void;\n}\n\nexport const defaultValue: AppLayoutContextProps = {};\n\nexport const AppLayoutContext = createContext(defaultValue);\n\nexport function useAppLayoutContext() {\n  return useContext(AppLayoutContext);\n}\n"]}