@cloudscape-design/components 3.0.221 → 3.0.222

package/top-navigation/parts/utility.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -10,45 +9,43 @@ import MenuDropdown from '../../internal/components/menu-dropdown';
 import styles from '../styles.css.js';
 import { checkSafeUrl } from '../../internal/utils/check-safe-url';
 import { joinStrings } from '../../internal/utils/strings';
-export default function Utility(_a) {
-    var _b;
-    var hideText = _a.hideText, definition = _a.definition, offsetRight = _a.offsetRight;
-    var hasIcon = !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;
-    var shouldHideText = hideText && !definition.disableTextCollapse && hasIcon;
-    var ariaLabel = (_b = definition.ariaLabel) !== null && _b !== void 0 ? _b : definition.text;
+export default function Utility({ hideText, definition, offsetRight }) {
+    var _a;
+    const hasIcon = !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;
+    const shouldHideText = hideText && !definition.disableTextCollapse && hasIcon;
+    let ariaLabel = (_a = definition.ariaLabel) !== null && _a !== void 0 ? _a : definition.text;
     if (definition.type === 'button') {
         ariaLabel = definition.ariaLabel
             ? definition.ariaLabel
             : joinStrings(definition.text, definition.externalIconAriaLabel);
         checkSafeUrl('TopNavigation', definition.href);
         if (definition.variant === 'primary-button') {
-            return (React.createElement("span", { className: styles["offset-right-".concat(offsetRight)] },
+            return (React.createElement("span", { className: styles[`offset-right-${offsetRight}`] },
                 React.createElement(InternalButton, { variant: "primary", href: definition.href, target: definition.external ? '_blank' : undefined, onClick: definition.onClick, ariaLabel: ariaLabel, iconName: definition.iconName, iconUrl: definition.iconUrl, iconAlt: definition.iconAlt, iconSvg: definition.iconSvg }, shouldHideText ? null : (React.createElement(React.Fragment, null,
                     definition.text,
                     definition.external && (React.createElement(React.Fragment, null,
                         ' ',
-                        React.createElement("span", { className: clsx(styles['utility-button-external-icon'], styles["offset-right-".concat(offsetRight)]), "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? 'img' : undefined },
+                        React.createElement("span", { className: clsx(styles['utility-button-external-icon'], styles[`offset-right-${offsetRight}`]), "aria-label": definition.externalIconAriaLabel, role: definition.externalIconAriaLabel ? 'img' : undefined },
                             React.createElement(InternalIcon, { name: "external" })))))))));
         }
         else {
             // Link
-            return (React.createElement("span", { className: styles["offset-right-".concat(offsetRight)] },
+            return (React.createElement("span", { className: styles[`offset-right-${offsetRight}`] },
                 React.createElement(InternalLink, { variant: "top-navigation", href: definition.href, external: definition.external, onFollow: definition.onClick, ariaLabel: ariaLabel },
                     hasIcon && (React.createElement(InternalIcon, { name: definition.iconName, url: definition.iconUrl, alt: definition.iconAlt, svg: definition.iconSvg, badge: definition.badge })),
                     !shouldHideText && definition.text && (React.createElement("span", { className: hasIcon ? styles['utility-link-icon'] : undefined }, definition.text)))));
         }
     }
     else if (definition.type === 'menu-dropdown') {
-        var title = definition.title || definition.text;
-        var shouldShowTitle = shouldHideText || !definition.text;
+        const title = definition.title || definition.text;
+        const shouldShowTitle = shouldHideText || !definition.text;
         checkSafeUrlRecursively(definition.items);
-        return (React.createElement(MenuDropdown, __assign({}, definition, { title: shouldShowTitle ? title : '', ariaLabel: ariaLabel, offsetRight: offsetRight }), !shouldHideText && definition.text));
+        return (React.createElement(MenuDropdown, Object.assign({}, definition, { title: shouldShowTitle ? title : '', ariaLabel: ariaLabel, offsetRight: offsetRight }), !shouldHideText && definition.text));
     }
     return null;
 }
 function checkSafeUrlRecursively(itemOrGroup) {
-    for (var _i = 0, itemOrGroup_1 = itemOrGroup; _i < itemOrGroup_1.length; _i++) {
-        var item = itemOrGroup_1[_i];
+    for (const item of itemOrGroup) {
         checkSafeUrl('TopNavigation', item.href);
         if ('items' in item) {
             checkSafeUrlRecursively(item.items);

package/top-navigation/parts/utility.js.map

@@ -1 +1 @@
-{"version":3,"file":"utility.js","sourceRoot":"","sources":["../../../../src/top-navigation/parts/utility.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';\n\nimport { InternalButton } from '../../button/internal';\nimport InternalLink from '../../link/internal';\nimport InternalIcon from '../../icon/internal';\nimport MenuDropdown, { MenuDropdownProps } from '../../internal/components/menu-dropdown';\n\nimport { TopNavigationProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\nimport { checkSafeUrl } from '../../internal/utils/check-safe-url';\nimport { joinStrings } from '../../internal/utils/strings';\n\nexport interface UtilityProps {\n  hideText: boolean;\n  definition: TopNavigationProps.Utility;\n  offsetRight?: MenuDropdownProps['offsetRight'];\n}\n\nexport default function Utility({ hideText, definition, offsetRight }: UtilityProps) {\n  const hasIcon = !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;\n  const shouldHideText = hideText && !definition.disableTextCollapse && hasIcon;\n  let ariaLabel = definition.ariaLabel ?? definition.text;\n\n  if (definition.type === 'button') {\n    ariaLabel = definition.ariaLabel\n      ? definition.ariaLabel\n      : joinStrings(definition.text, definition.externalIconAriaLabel);\n    checkSafeUrl('TopNavigation', definition.href);\n    if (definition.variant === 'primary-button') {\n      return (\n        <span className={styles[`offset-right-${offsetRight}`]}>\n          <InternalButton\n            variant=\"primary\"\n            href={definition.href}\n            target={definition.external ? '_blank' : undefined}\n            onClick={definition.onClick}\n            ariaLabel={ariaLabel}\n            iconName={definition.iconName}\n            iconUrl={definition.iconUrl}\n            iconAlt={definition.iconAlt}\n            iconSvg={definition.iconSvg}\n          >\n            {shouldHideText ? null : (\n              <>\n                {definition.text}\n                {definition.external && (\n                  <>\n                    {' '}\n                    <span\n                      className={clsx(styles['utility-button-external-icon'], styles[`offset-right-${offsetRight}`])}\n                      aria-label={definition.externalIconAriaLabel}\n                      role={definition.externalIconAriaLabel ? 'img' : undefined}\n                    >\n                      <InternalIcon name=\"external\" />\n                    </span>\n                  </>\n                )}\n              </>\n            )}\n          </InternalButton>\n        </span>\n      );\n    } else {\n      // Link\n      return (\n        <span className={styles[`offset-right-${offsetRight}`]}>\n          <InternalLink\n            variant=\"top-navigation\"\n            href={definition.href}\n            external={definition.external}\n            onFollow={definition.onClick}\n            ariaLabel={ariaLabel}\n          >\n            {hasIcon && (\n              <InternalIcon\n                name={definition.iconName}\n                url={definition.iconUrl}\n                alt={definition.iconAlt}\n                svg={definition.iconSvg}\n                badge={definition.badge}\n              />\n            )}\n            {!shouldHideText && definition.text && (\n              <span className={hasIcon ? styles['utility-link-icon'] : undefined}>{definition.text}</span>\n            )}\n          </InternalLink>\n        </span>\n      );\n    }\n  } else if (definition.type === 'menu-dropdown') {\n    const title = definition.title || definition.text;\n    const shouldShowTitle = shouldHideText || !definition.text;\n\n    checkSafeUrlRecursively(definition.items);\n\n    return (\n      <MenuDropdown\n        {...definition}\n        title={shouldShowTitle ? title : ''}\n        ariaLabel={ariaLabel}\n        offsetRight={offsetRight}\n      >\n        {!shouldHideText && definition.text}\n      </MenuDropdown>\n    );\n  }\n\n  return null;\n}\n\nfunction checkSafeUrlRecursively(itemOrGroup: MenuDropdownProps['items']) {\n  for (const item of itemOrGroup) {\n    checkSafeUrl('TopNavigation', item.href);\n\n    if ('items' in item) {\n      checkSafeUrlRecursively(item.items);\n    }\n  }\n}\n"]}
+{"version":3,"file":"utility.js","sourceRoot":"","sources":["../../../../src/top-navigation/parts/utility.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';\n\nimport { InternalButton } from '../../button/internal';\nimport InternalLink from '../../link/internal';\nimport InternalIcon from '../../icon/internal';\nimport MenuDropdown, { MenuDropdownProps } from '../../internal/components/menu-dropdown';\n\nimport { TopNavigationProps } from '../interfaces';\n\nimport styles from '../styles.css.js';\nimport { checkSafeUrl } from '../../internal/utils/check-safe-url';\nimport { joinStrings } from '../../internal/utils/strings';\n\nexport interface UtilityProps {\n  hideText: boolean;\n  definition: TopNavigationProps.Utility;\n  offsetRight?: MenuDropdownProps['offsetRight'];\n}\n\nexport default function Utility({ hideText, definition, offsetRight }: UtilityProps) {\n  const hasIcon = !!definition.iconName || !!definition.iconUrl || !!definition.iconAlt || !!definition.iconSvg;\n  const shouldHideText = hideText && !definition.disableTextCollapse && hasIcon;\n  let ariaLabel = definition.ariaLabel ?? definition.text;\n\n  if (definition.type === 'button') {\n    ariaLabel = definition.ariaLabel\n      ? definition.ariaLabel\n      : joinStrings(definition.text, definition.externalIconAriaLabel);\n    checkSafeUrl('TopNavigation', definition.href);\n    if (definition.variant === 'primary-button') {\n      return (\n        <span className={styles[`offset-right-${offsetRight}`]}>\n          <InternalButton\n            variant=\"primary\"\n            href={definition.href}\n            target={definition.external ? '_blank' : undefined}\n            onClick={definition.onClick}\n            ariaLabel={ariaLabel}\n            iconName={definition.iconName}\n            iconUrl={definition.iconUrl}\n            iconAlt={definition.iconAlt}\n            iconSvg={definition.iconSvg}\n          >\n            {shouldHideText ? null : (\n              <>\n                {definition.text}\n                {definition.external && (\n                  <>\n                    {' '}\n                    <span\n                      className={clsx(styles['utility-button-external-icon'], styles[`offset-right-${offsetRight}`])}\n                      aria-label={definition.externalIconAriaLabel}\n                      role={definition.externalIconAriaLabel ? 'img' : undefined}\n                    >\n                      <InternalIcon name=\"external\" />\n                    </span>\n                  </>\n                )}\n              </>\n            )}\n          </InternalButton>\n        </span>\n      );\n    } else {\n      // Link\n      return (\n        <span className={styles[`offset-right-${offsetRight}`]}>\n          <InternalLink\n            variant=\"top-navigation\"\n            href={definition.href}\n            external={definition.external}\n            onFollow={definition.onClick}\n            ariaLabel={ariaLabel}\n          >\n            {hasIcon && (\n              <InternalIcon\n                name={definition.iconName}\n                url={definition.iconUrl}\n                alt={definition.iconAlt}\n                svg={definition.iconSvg}\n                badge={definition.badge}\n              />\n            )}\n            {!shouldHideText && definition.text && (\n              <span className={hasIcon ? styles['utility-link-icon'] : undefined}>{definition.text}</span>\n            )}\n          </InternalLink>\n        </span>\n      );\n    }\n  } else if (definition.type === 'menu-dropdown') {\n    const title = definition.title || definition.text;\n    const shouldShowTitle = shouldHideText || !definition.text;\n\n    checkSafeUrlRecursively(definition.items);\n\n    return (\n      <MenuDropdown\n        {...definition}\n        title={shouldShowTitle ? title : ''}\n        ariaLabel={ariaLabel}\n        offsetRight={offsetRight}\n      >\n        {!shouldHideText && definition.text}\n      </MenuDropdown>\n    );\n  }\n\n  return null;\n}\n\nfunction checkSafeUrlRecursively(itemOrGroup: MenuDropdownProps['items']) {\n  for (const item of itemOrGroup) {\n    checkSafeUrl('TopNavigation', item.href);\n\n    if ('items' in item) {\n      checkSafeUrlRecursively(item.items);\n    }\n  }\n}\n"]}

package/top-navigation/use-top-navigation.js

@@ -5,19 +5,18 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';
 import styles from './styles.css.js';
 // A small buffer to make calculations more lenient against browser lag or padding adjustments.
-var RESPONSIVENESS_BUFFER = 20;
-export function useTopNavigation(_a) {
-    var identity = _a.identity, search = _a.search, utilities = _a.utilities;
+const RESPONSIVENESS_BUFFER = 20;
+export function useTopNavigation({ identity, search, utilities }) {
     // Refs and breakpoints
-    var mainRef = useRef(null);
-    var virtualRef = useRef(null);
-    var _b = useContainerBreakpoints(['xxs', 's']), breakpoint = _b[0], breakpointRef = _b[1];
+    const mainRef = useRef(null);
+    const virtualRef = useRef(null);
+    const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);
     // Responsiveness state
     // The component works by calculating the possible resize states that it can
     // be in, and having a state variable to track which state we're currently in.
-    var hasSearch = !!search;
-    var hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
-    var responsiveStates = useMemo(function () {
+    const hasSearch = !!search;
+    const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;
+    const responsiveStates = useMemo(() => {
         return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);
     }, [utilities, hasSearch, hasTitleWithLogo]);
     // To hide/show elements dynamically, we need to know how much space they take up,
@@ -29,57 +28,57 @@ export function useTopNavigation(_a) {
     // We can't "affix" these values to pixels because they can depend on spacing tokens.
     // It's easier to render all of these utilities separately rather than figuring out
     // spacing token values, icon sizes, text widths, etc.
-    var _c = useState(), responsiveState = _c[0], setResponsiveState = _c[1];
-    var recalculateFit = useCallback(function () {
+    const [responsiveState, setResponsiveState] = useState();
+    const recalculateFit = useCallback(() => {
         var _a, _b, _c, _d;
         if (!(mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) || !virtualRef.current) {
             setResponsiveState(responsiveStates[0]);
             return;
         }
         // Get available width from the visible top navigation.
-        var availableWidth = getContentBoxWidth(mainRef.current.querySelector(".".concat(styles['padding-box'])));
+        const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`));
         if (availableWidth === 0) {
             // Likely in an SSR or Jest situation.
             setResponsiveState(responsiveStates[0]);
             return;
         }
-        var sizeConfiguration = {
-            hasSearch: hasSearch,
-            availableWidth: availableWidth,
+        const sizeConfiguration = {
+            hasSearch,
+            availableWidth,
             // Get widths from the hidden top navigation
-            fullIdentityWidth: virtualRef.current.querySelector(".".concat(styles.identity)).getBoundingClientRect().width,
-            titleWidth: (_b = (_a = virtualRef.current.querySelector(".".concat(styles.title))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
-            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(".".concat(styles.search))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
+            fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`).getBoundingClientRect().width,
+            titleWidth: (_b = (_a = virtualRef.current.querySelector(`.${styles.title}`)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0,
+            searchSlotWidth: (_d = (_c = virtualRef.current.querySelector(`.${styles.search}`)) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
             searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special="search"]').getBoundingClientRect()
                 .width,
-            utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(".".concat(styles.utilities))).paddingLeft || '0px'),
+            utilitiesLeftPadding: parseFloat(getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)).paddingLeft || '0px'),
             utilityWithLabelWidths: Array.prototype.slice
-                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"false\"]"))
-                .map(function (element) { return element.getBoundingClientRect().width; }),
+                .call(virtualRef.current.querySelectorAll(`[data-utility-hide="false"]`))
+                .map((element) => element.getBoundingClientRect().width),
             utilityWithoutLabelWidths: Array.prototype.slice
-                .call(virtualRef.current.querySelectorAll("[data-utility-hide=\"true\"]"))
-                .map(function (element) { return element.getBoundingClientRect().width; }),
+                .call(virtualRef.current.querySelectorAll(`[data-utility-hide="true"]`))
+                .map((element) => element.getBoundingClientRect().width),
             menuTriggerUtilityWidth: virtualRef.current
                 .querySelector('[data-utility-special="menu-trigger"]')
-                .getBoundingClientRect().width
+                .getBoundingClientRect().width,
         };
         setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));
     }, [responsiveStates, hasSearch]);
-    var _d = useContainerQuery(function () {
+    const [, containerQueryRef] = useContainerQuery(() => {
         recalculateFit();
-    }, [recalculateFit]), containerQueryRef = _d[1];
+    }, [recalculateFit]);
     // Due to being rendered in a portal, the virtual navigation isn't rendered
     // at the same time as the main one.
-    var onVirtualMount = useCallback(function (element) {
+    const onVirtualMount = useCallback((element) => {
         virtualRef.current = element;
         recalculateFit();
     }, [recalculateFit]);
     // Search slot expansion on small screens
-    var _e = useState(true), isSearchMinimized = _e[0], setSearchMinimized = _e[1];
-    var isSearchExpanded = !isSearchMinimized && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch);
+    const [isSearchMinimized, setSearchMinimized] = useState(true);
+    const isSearchExpanded = !isSearchMinimized && hasSearch && (responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch);
     // If the search was expanded, and then the screen resized so that the
     // expansion is no longer necessary. So we implicitly minimize it.
-    useEffect(function () {
+    useEffect(() => {
         if (!(responsiveState === null || responsiveState === void 0 ? void 0 : responsiveState.hideSearch)) {
             setSearchMinimized(true);
         }
@@ -87,51 +86,51 @@ export function useTopNavigation(_a) {
     // If the search is expanded after clicking on the search utility, move
     // the focus to the input. Since this is a user-controlled slot, we're just
     // assuming that it contains an input, though it's a pretty safe guess.
-    useEffect(function () {
+    useEffect(() => {
         var _a, _b;
         if (isSearchExpanded) {
-            (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(styles.search, " input"))) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = (_a = mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.${styles.search} input`)) === null || _b === void 0 ? void 0 : _b.focus();
         }
     }, [isSearchExpanded, mainRef]);
-    var mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);
+    const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);
     return {
         mainRef: mergedMainRef,
         virtualRef: onVirtualMount,
         responsiveState: responsiveState !== null && responsiveState !== void 0 ? responsiveState : responsiveStates[0],
         breakpoint: breakpoint !== null && breakpoint !== void 0 ? breakpoint : 'default',
         isSearchExpanded: !!isSearchExpanded,
-        onSearchUtilityClick: function () { return setSearchMinimized(function (isSearchMinimized) { return !isSearchMinimized; }); }
+        onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),
     };
 }
 /**
  * Get the width of the content box (assuming the element's box-sizing is border-box).
  */
 function getContentBoxWidth(element) {
-    var style = getComputedStyle(element);
+    const style = getComputedStyle(element);
     return (parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px'));
 }
 /**
  * Generates the series of responsive steps that can be performed on the header in order.
  */
 export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTitle) {
-    var states = [{}];
-    if (utilities.some(function (utility) { return utility.text; })) {
+    const states = [{}];
+    if (utilities.some(utility => utility.text)) {
         states.push({ hideUtilityText: true });
     }
     if (canHideSearch) {
         states.push({
             hideUtilityText: true,
-            hideSearch: true
+            hideSearch: true,
         });
     }
-    var hiddenUtilties = [];
-    for (var i = 0; i < utilities.length; i++) {
+    const hiddenUtilties = [];
+    for (let i = 0; i < utilities.length; i++) {
         if (!utilities[i].disableUtilityCollapse) {
             hiddenUtilties.push(i);
             states.push({
                 hideUtilityText: true,
                 hideSearch: canHideSearch || undefined,
-                hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined
+                hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,
             });
         }
     }
@@ -140,7 +139,7 @@ export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTit
             hideUtilityText: true,
             hideSearch: canHideSearch || undefined,
             hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,
-            hideTitle: true
+            hideTitle: true,
         });
     }
     return states;
@@ -150,25 +149,19 @@ export function generateResponsiveStateKeys(utilities, canHideSearch, canHideTit
  * and the current sizes of all elements inside the navigation bar.
  */
 export function determineBestResponsiveState(possibleStates, sizes) {
-    var hasSearch = sizes.hasSearch, availableWidth = sizes.availableWidth, utilitiesLeftPadding = sizes.utilitiesLeftPadding, fullIdentityWidth = sizes.fullIdentityWidth, titleWidth = sizes.titleWidth, searchSlotWidth = sizes.searchSlotWidth, searchUtilityWidth = sizes.searchUtilityWidth, utilityWithLabelWidths = sizes.utilityWithLabelWidths, utilityWithoutLabelWidths = sizes.utilityWithoutLabelWidths, menuTriggerUtilityWidth = sizes.menuTriggerUtilityWidth;
-    var _loop_1 = function (state) {
-        var searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;
-        var utilitiesWidth = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)
-            .filter(function (_width, i) { return !state.hideUtilities || state.hideUtilities.indexOf(i) === -1; })
-            .reduce(function (sum, width) { return sum + width; }, 0);
-        var menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;
-        var identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;
-        var expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;
+    const { hasSearch, availableWidth, utilitiesLeftPadding, fullIdentityWidth, titleWidth, searchSlotWidth, searchUtilityWidth, utilityWithLabelWidths, utilityWithoutLabelWidths, menuTriggerUtilityWidth, } = sizes;
+    // Iterate through each state and calculate its expected required width.
+    for (const state of possibleStates) {
+        const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;
+        const utilitiesWidth = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)
+            .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)
+            .reduce((sum, width) => sum + width, 0);
+        const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;
+        const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;
+        const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;
         if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {
-            return { value: state };
+            return state;
         }
-    };
-    // Iterate through each state and calculate its expected required width.
-    for (var _i = 0, possibleStates_1 = possibleStates; _i < possibleStates_1.length; _i++) {
-        var state = possibleStates_1[_i];
-        var state_1 = _loop_1(state);
-        if (typeof state_1 === "object")
-            return state_1.value;
     }
     // If nothing matches, pick the smallest possible state.
     return possibleStates[possibleStates.length - 1];

package/top-navigation/use-top-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  mainRef: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const mainRef = useRef<HTMLElement | null>(null);\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  const [responsiveState, setResponsiveState] = useState<ResponsiveState | undefined>();\n  const recalculateFit = useCallback(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    // Get available width from the visible top navigation.\n    const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!);\n    if (availableWidth === 0) {\n      // Likely in an SSR or Jest situation.\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    const sizeConfiguration = {\n      hasSearch,\n      availableWidth,\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'\n      ),\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n    setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));\n  }, [responsiveStates, hasSearch]);\n\n  const [, containerQueryRef] = useContainerQuery(() => {\n    recalculateFit();\n  }, [recalculateFit]);\n\n  // Due to being rendered in a portal, the virtual navigation isn't rendered\n  // at the same time as the main one.\n  const onVirtualMount = useCallback(\n    (element: HTMLDivElement | null) => {\n      virtualRef.current = element;\n      recalculateFit();\n    },\n    [recalculateFit]\n  );\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);\n\n  return {\n    mainRef: mergedMainRef,\n    virtualRef: onVirtualMount,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return (\n    parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px')\n  );\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}
+{"version":3,"file":"use-top-navigation.js","sourceRoot":"","sources":["../../../src/top-navigation/use-top-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nimport { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';\nimport { TopNavigationProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport interface UseTopNavigationParams {\n  identity: TopNavigationProps['identity'];\n  search: TopNavigationProps['search'];\n  utilities: NonNullable<TopNavigationProps['utilities']>;\n}\n\nexport interface ResponsiveState {\n  hideUtilityText?: boolean;\n  hideSearch?: boolean;\n  hideUtilities?: number[];\n  hideTitle?: boolean;\n}\n\nexport interface TopNavigationSizeConfiguration {\n  hasSearch: boolean;\n  availableWidth: number;\n  utilitiesLeftPadding: number;\n  fullIdentityWidth: number;\n  titleWidth: number;\n  searchSlotWidth: number;\n  searchUtilityWidth: number;\n  utilityWithLabelWidths: number[];\n  utilityWithoutLabelWidths: number[];\n  menuTriggerUtilityWidth: number;\n}\n\nexport interface UseTopNavigation {\n  mainRef: React.Ref<HTMLDivElement>;\n  virtualRef: React.Ref<HTMLDivElement>;\n\n  responsiveState: ResponsiveState;\n  breakpoint: 'default' | 'xxs' | 's';\n  isSearchExpanded: boolean;\n  onSearchUtilityClick: () => void;\n}\n\n// A small buffer to make calculations more lenient against browser lag or padding adjustments.\nconst RESPONSIVENESS_BUFFER = 20;\n\nexport function useTopNavigation({ identity, search, utilities }: UseTopNavigationParams): UseTopNavigation {\n  // Refs and breakpoints\n  const mainRef = useRef<HTMLElement | null>(null);\n  const virtualRef = useRef<HTMLDivElement | null>(null);\n  const [breakpoint, breakpointRef] = useContainerBreakpoints(['xxs', 's']);\n\n  // Responsiveness state\n  // The component works by calculating the possible resize states that it can\n  // be in, and having a state variable to track which state we're currently in.\n  const hasSearch = !!search;\n  const hasTitleWithLogo = identity && !!identity.logo && !!identity.title;\n  const responsiveStates = useMemo<ReadonlyArray<ResponsiveState>>(() => {\n    return generateResponsiveStateKeys(utilities, hasSearch, hasTitleWithLogo);\n  }, [utilities, hasSearch, hasTitleWithLogo]);\n\n  // To hide/show elements dynamically, we need to know how much space they take up,\n  // even if they're not being rendered. The top navigation elements are hidden/resized\n  // based on the available size or if a search bar is open, and they need to be available\n  // for calculations so we know where to toggle them. So we render a second, more stable\n  // top-nav off screen to do these calculations against.\n  //\n  // We can't \"affix\" these values to pixels because they can depend on spacing tokens.\n  // It's easier to render all of these utilities separately rather than figuring out\n  // spacing token values, icon sizes, text widths, etc.\n  const [responsiveState, setResponsiveState] = useState<ResponsiveState | undefined>();\n  const recalculateFit = useCallback(() => {\n    if (!mainRef?.current || !virtualRef.current) {\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    // Get available width from the visible top navigation.\n    const availableWidth = getContentBoxWidth(mainRef.current.querySelector(`.${styles['padding-box']}`)!);\n    if (availableWidth === 0) {\n      // Likely in an SSR or Jest situation.\n      setResponsiveState(responsiveStates[0]);\n      return;\n    }\n\n    const sizeConfiguration = {\n      hasSearch,\n      availableWidth,\n\n      // Get widths from the hidden top navigation\n      fullIdentityWidth: virtualRef.current.querySelector(`.${styles.identity}`)!.getBoundingClientRect().width,\n      titleWidth: virtualRef.current.querySelector(`.${styles.title}`)?.getBoundingClientRect().width ?? 0,\n      searchSlotWidth: virtualRef.current.querySelector(`.${styles.search}`)?.getBoundingClientRect().width ?? 0,\n      searchUtilityWidth: virtualRef.current.querySelector('[data-utility-special=\"search\"]')!.getBoundingClientRect()\n        .width,\n      utilitiesLeftPadding: parseFloat(\n        getComputedStyle(virtualRef.current.querySelector(`.${styles.utilities}`)!).paddingLeft || '0px'\n      ),\n      utilityWithLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"false\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      utilityWithoutLabelWidths: Array.prototype.slice\n        .call(virtualRef.current.querySelectorAll(`[data-utility-hide=\"true\"]`))\n        .map((element: Element) => element.getBoundingClientRect().width),\n      menuTriggerUtilityWidth: virtualRef.current\n        .querySelector('[data-utility-special=\"menu-trigger\"]')!\n        .getBoundingClientRect().width,\n    };\n    setResponsiveState(determineBestResponsiveState(responsiveStates, sizeConfiguration));\n  }, [responsiveStates, hasSearch]);\n\n  const [, containerQueryRef] = useContainerQuery(() => {\n    recalculateFit();\n  }, [recalculateFit]);\n\n  // Due to being rendered in a portal, the virtual navigation isn't rendered\n  // at the same time as the main one.\n  const onVirtualMount = useCallback(\n    (element: HTMLDivElement | null) => {\n      virtualRef.current = element;\n      recalculateFit();\n    },\n    [recalculateFit]\n  );\n\n  // Search slot expansion on small screens\n  const [isSearchMinimized, setSearchMinimized] = useState(true);\n  const isSearchExpanded = !isSearchMinimized && hasSearch && responsiveState?.hideSearch;\n\n  // If the search was expanded, and then the screen resized so that the\n  // expansion is no longer necessary. So we implicitly minimize it.\n  useEffect(() => {\n    if (!responsiveState?.hideSearch) {\n      setSearchMinimized(true);\n    }\n  }, [responsiveState]);\n\n  // If the search is expanded after clicking on the search utility, move\n  // the focus to the input. Since this is a user-controlled slot, we're just\n  // assuming that it contains an input, though it's a pretty safe guess.\n  useEffect(() => {\n    if (isSearchExpanded) {\n      mainRef?.current?.querySelector<HTMLInputElement>(`.${styles.search} input`)?.focus();\n    }\n  }, [isSearchExpanded, mainRef]);\n\n  const mergedMainRef = useMergeRefs(mainRef, containerQueryRef, breakpointRef);\n\n  return {\n    mainRef: mergedMainRef,\n    virtualRef: onVirtualMount,\n    responsiveState: responsiveState ?? responsiveStates[0],\n    breakpoint: breakpoint ?? 'default',\n    isSearchExpanded: !!isSearchExpanded,\n    onSearchUtilityClick: () => setSearchMinimized(isSearchMinimized => !isSearchMinimized),\n  };\n}\n\n/**\n * Get the width of the content box (assuming the element's box-sizing is border-box).\n */\nfunction getContentBoxWidth(element: Element): number {\n  const style = getComputedStyle(element);\n  return (\n    parseFloat(style.width || '0px') - parseFloat(style.paddingLeft || '0px') - parseFloat(style.paddingRight || '0px')\n  );\n}\n\n/**\n * Generates the series of responsive steps that can be performed on the header in order.\n */\nexport function generateResponsiveStateKeys(\n  utilities: ReadonlyArray<TopNavigationProps.Utility>,\n  canHideSearch: boolean,\n  canHideTitle: boolean\n): ReadonlyArray<ResponsiveState> {\n  const states: ResponsiveState[] = [{}];\n  if (utilities.some(utility => utility.text)) {\n    states.push({ hideUtilityText: true });\n  }\n  if (canHideSearch) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: true,\n    });\n  }\n  const hiddenUtilties = [];\n  for (let i = 0; i < utilities.length; i++) {\n    if (!utilities[i].disableUtilityCollapse) {\n      hiddenUtilties.push(i);\n      states.push({\n        hideUtilityText: true,\n        hideSearch: canHideSearch || undefined,\n        hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      });\n    }\n  }\n  if (canHideTitle) {\n    states.push({\n      hideUtilityText: true,\n      hideSearch: canHideSearch || undefined,\n      hideUtilities: hiddenUtilties.length > 0 ? hiddenUtilties.slice() : undefined,\n      hideTitle: true,\n    });\n  }\n  return states;\n}\n\n/**\n * Determines the best responsive state configuration of the top navigation, based on the given list of possible responsive states\n * and the current sizes of all elements inside the navigation bar.\n */\nexport function determineBestResponsiveState(\n  possibleStates: ReadonlyArray<ResponsiveState>,\n  sizes: TopNavigationSizeConfiguration\n): ResponsiveState {\n  const {\n    hasSearch,\n    availableWidth,\n    utilitiesLeftPadding,\n    fullIdentityWidth,\n    titleWidth,\n    searchSlotWidth,\n    searchUtilityWidth,\n    utilityWithLabelWidths,\n    utilityWithoutLabelWidths,\n    menuTriggerUtilityWidth,\n  } = sizes;\n  // Iterate through each state and calculate its expected required width.\n  for (const state of possibleStates) {\n    const searchWidth = hasSearch ? (state.hideSearch ? searchUtilityWidth : searchSlotWidth) : 0;\n    const utilitiesWidth: number = (state.hideUtilityText ? utilityWithoutLabelWidths : utilityWithLabelWidths)\n      .filter((_width, i) => !state.hideUtilities || state.hideUtilities.indexOf(i) === -1)\n      .reduce((sum, width) => sum + width, 0);\n    const menuTriggerWidth = state.hideUtilities ? menuTriggerUtilityWidth : 0;\n    const identityWidth = state.hideTitle ? fullIdentityWidth - titleWidth : fullIdentityWidth;\n    const expectedInnerWidth = identityWidth + searchWidth + utilitiesLeftPadding + utilitiesWidth + menuTriggerWidth;\n    if (expectedInnerWidth <= availableWidth - RESPONSIVENESS_BUFFER) {\n      return state;\n    }\n  }\n\n  // If nothing matches, pick the smallest possible state.\n  return possibleStates[possibleStates.length - 1];\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js

@@ -7,19 +7,17 @@ import InternalSpaceBetween from '../../../space-between/internal';
 import InternalLink from '../../../link/internal';
 import clsx from 'clsx';
 import InternalBox from '../../../box/internal';
-export function CongratulationScreen(_a) {
-    var _b;
-    var children = _a.children, onFeedbackClick = _a.onFeedbackClick, i18nStrings = _a.i18nStrings;
+export function CongratulationScreen({ children, onFeedbackClick, i18nStrings }) {
     return (React.createElement(InternalSpaceBetween, { size: "xxl" },
         React.createElement(InternalSpaceBetween, { size: "xl" },
             React.createElement("div", { className: styles['congratulation-message'] },
                 React.createElement(InternalStatusIndicator, { __size: "inherit", type: "success", className: styles['congratulation-message--status'] }),
                 React.createElement("div", { className: styles['completion-screen-title'] }, i18nStrings.completionScreenTitle)),
             React.createElement(InternalBox, { color: "text-body-secondary" },
-                React.createElement("div", { className: clsx((_b = {},
-                        _b[styles['completion-screen-description']] = true,
-                        _b[styles['plaintext-congratulation-description']] = typeof children === 'string',
-                        _b)) }, children))),
+                React.createElement("div", { className: clsx({
+                        [styles['completion-screen-description']]: true,
+                        [styles['plaintext-congratulation-description']]: typeof children === 'string',
+                    }) }, children))),
         React.createElement("div", { className: styles.divider }),
         React.createElement(InternalLink, { onFollow: onFeedbackClick, className: styles['feedback-link'] }, i18nStrings.feedbackLinkText)));
 }

package/tutorial-panel/components/tutorial-detail-view/congratulation-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"congratulation-screen.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAQhD,MAAM,UAAU,oBAAoB,CAAC,EAAqE;;QAAnE,QAAQ,cAAA,EAAE,eAAe,qBAAA,EAAE,WAAW,iBAAA;IAC3E,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;gBAC9C,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC,GACnD;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,qBAAqB,CAAO,CACxF;YACN,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;gBACtC,6BACE,SAAS,EAAE,IAAI;wBACb,GAAC,MAAM,CAAC,+BAA+B,CAAC,IAAG,IAAI;wBAC/C,GAAC,MAAM,CAAC,sCAAsC,CAAC,IAAG,OAAO,QAAQ,KAAK,QAAQ;4BAC9E,IAED,QAAQ,CACL,CACM,CACO;QAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAElC,oBAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACxE,WAAW,CAAC,gBAAgB,CAChB,CACM,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalLink from '../../../link/internal';\nimport clsx from 'clsx';\nimport InternalBox from '../../../box/internal';\n\ninterface CongratulationScreenProps {\n  children: React.ReactNode;\n  onFeedbackClick: () => void;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps) {\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['congratulation-message']}>\n          <InternalStatusIndicator\n            __size=\"inherit\"\n            type=\"success\"\n            className={styles['congratulation-message--status']}\n          />\n          <div className={styles['completion-screen-title']}>{i18nStrings.completionScreenTitle}</div>\n        </div>\n        <InternalBox color=\"text-body-secondary\">\n          <div\n            className={clsx({\n              [styles['completion-screen-description']]: true,\n              [styles['plaintext-congratulation-description']]: typeof children === 'string',\n            })}\n          >\n            {children}\n          </div>\n        </InternalBox>\n      </InternalSpaceBetween>\n\n      <div className={styles.divider} />\n\n      <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']}>\n        {i18nStrings.feedbackLinkText}\n      </InternalLink>\n    </InternalSpaceBetween>\n  );\n}\n"]}
+{"version":3,"file":"congratulation-screen.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/congratulation-screen.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,uBAAuB,MAAM,oCAAoC,CAAC;AACzE,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAQhD,MAAM,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAA6B;IACxG,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;gBAC9C,oBAAC,uBAAuB,IACtB,MAAM,EAAC,SAAS,EAChB,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC,GACnD;gBACF,6BAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,qBAAqB,CAAO,CACxF;YACN,oBAAC,WAAW,IAAC,KAAK,EAAC,qBAAqB;gBACtC,6BACE,SAAS,EAAE,IAAI,CAAC;wBACd,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,EAAE,IAAI;wBAC/C,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC,EAAE,OAAO,QAAQ,KAAK,QAAQ;qBAC/E,CAAC,IAED,QAAQ,CACL,CACM,CACO;QAEvB,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,GAAI;QAElC,oBAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACxE,WAAW,CAAC,gBAAgB,CAChB,CACM,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport InternalLink from '../../../link/internal';\nimport clsx from 'clsx';\nimport InternalBox from '../../../box/internal';\n\ninterface CongratulationScreenProps {\n  children: React.ReactNode;\n  onFeedbackClick: () => void;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function CongratulationScreen({ children, onFeedbackClick, i18nStrings }: CongratulationScreenProps) {\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['congratulation-message']}>\n          <InternalStatusIndicator\n            __size=\"inherit\"\n            type=\"success\"\n            className={styles['congratulation-message--status']}\n          />\n          <div className={styles['completion-screen-title']}>{i18nStrings.completionScreenTitle}</div>\n        </div>\n        <InternalBox color=\"text-body-secondary\">\n          <div\n            className={clsx({\n              [styles['completion-screen-description']]: true,\n              [styles['plaintext-congratulation-description']]: typeof children === 'string',\n            })}\n          >\n            {children}\n          </div>\n        </InternalBox>\n      </InternalSpaceBetween>\n\n      <div className={styles.divider} />\n\n      <InternalLink onFollow={onFeedbackClick} className={styles['feedback-link']}>\n        {i18nStrings.feedbackLinkText}\n      </InternalLink>\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/index.js

@@ -9,14 +9,13 @@ import { fireNonCancelableEvent } from '../../../internal/events/index';
 import { CongratulationScreen } from './congratulation-screen';
 import { TaskList } from './task-list';
 import { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';
-export default function TutorialDetailView(_a) {
-    var tutorial = _a.tutorial, onExitTutorialHandler = _a.onExitTutorial, _b = _a.currentStepIndex, currentStepIndex = _b === void 0 ? 0 : _b, onFeedbackClickHandler = _a.onFeedbackClick, i18nStrings = _a.i18nStrings;
-    var isRefresh = useVisualRefresh();
-    var onExitTutorial = useCallback(function () {
-        fireNonCancelableEvent(onExitTutorialHandler, { tutorial: tutorial });
+export default function TutorialDetailView({ tutorial, onExitTutorial: onExitTutorialHandler, currentStepIndex = 0, onFeedbackClick: onFeedbackClickHandler, i18nStrings, }) {
+    const isRefresh = useVisualRefresh();
+    const onExitTutorial = useCallback(() => {
+        fireNonCancelableEvent(onExitTutorialHandler, { tutorial });
     }, [onExitTutorialHandler, tutorial]);
-    var onFeedbackClick = useCallback(function () {
-        fireNonCancelableEvent(onFeedbackClickHandler, { tutorial: tutorial });
+    const onFeedbackClick = useCallback(() => {
+        fireNonCancelableEvent(onFeedbackClickHandler, { tutorial });
     }, [onFeedbackClickHandler, tutorial]);
     return (React.createElement(React.Fragment, null,
         React.createElement(InternalSpaceBetween, { size: "xl" },

package/tutorial-panel/components/tutorial-detail-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAY1C;QAXC,QAAQ,cAAA,EACQ,qBAAqB,oBAAA,EACrC,wBAAoB,EAApB,gBAAgB,mBAAG,CAAC,KAAA,EACH,sBAAsB,qBAAA,EACvC,WAAW,iBAAA;IAQX,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,IAAM,cAAc,GAAG,WAAW,CAAC;QACjC,sBAAsB,CAAC,qBAAqB,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAG,WAAW,CAAC;QAClC,sBAAsB,CAAC,sBAAsB,EAAE,EAAE,QAAQ,UAAA,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBACtC,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,iBAAiB,EACxC,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,YAAY,GACrB;gBAEF,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAEpB,QAAQ,CAAC,KAAK,CACH,CACV;YACN;gBACE,6BAAK,IAAI,EAAC,QAAQ,IACf,QAAQ,CAAC,SAAS,IAAI,CACrB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CACG;gBACL,CAAC,QAAQ,CAAC,SAAS,IAAI,CACtB,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACG,CACe,CACtB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../../../internal/events/index';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { CongratulationScreen } from './congratulation-screen';\nimport { TaskList } from './task-list';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\n\nexport default function TutorialDetailView({\n  tutorial,\n  onExitTutorial: onExitTutorialHandler,\n  currentStepIndex = 0,\n  onFeedbackClick: onFeedbackClickHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onExitTutorial: HotspotContext['onExitTutorial'];\n  currentStepIndex: HotspotContext['currentStepIndex'];\n  onFeedbackClick: TutorialPanelProps['onFeedbackClick'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  const isRefresh = useVisualRefresh();\n\n  const onExitTutorial = useCallback(() => {\n    fireNonCancelableEvent(onExitTutorialHandler, { tutorial });\n  }, [onExitTutorialHandler, tutorial]);\n\n  const onFeedbackClick = useCallback(() => {\n    fireNonCancelableEvent(onFeedbackClickHandler, { tutorial });\n  }, [onFeedbackClickHandler, tutorial]);\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['tutorial-title']}>\n          <InternalButton\n            variant=\"icon\"\n            onClick={onExitTutorial}\n            ariaLabel={i18nStrings.labelExitTutorial}\n            formAction=\"none\"\n            iconName=\"arrow-left\"\n          />\n\n          <InternalBox\n            variant=\"h2\"\n            fontSize={isRefresh ? 'heading-m' : 'heading-l'}\n            padding={{ top: 'xxs' }}\n            margin={{ left: 's' }}\n          >\n            {tutorial.title}\n          </InternalBox>\n        </div>\n        <div>\n          <div role=\"status\">\n            {tutorial.completed && (\n              <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n                {tutorial.completedScreenDescription}\n              </CongratulationScreen>\n            )}\n          </div>\n          {!tutorial.completed && (\n            <TaskList\n              tasks={tutorial.tasks}\n              onExitTutorial={onExitTutorial}\n              currentGlobalStepIndex={currentStepIndex}\n              i18nStrings={i18nStrings}\n            />\n          )}\n        </div>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AACnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAgB,GAAG,CAAC,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GAOZ;IACC,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,sBAAsB,CAAC,qBAAqB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,sBAAsB,CAAC,sBAAsB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL;QACE,oBAAC,oBAAoB,IAAC,IAAI,EAAC,IAAI;YAC7B,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBACtC,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,WAAW,CAAC,iBAAiB,EACxC,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,YAAY,GACrB;gBAEF,oBAAC,WAAW,IACV,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC/C,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EACvB,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,IAEpB,QAAQ,CAAC,KAAK,CACH,CACV;YACN;gBACE,6BAAK,IAAI,EAAC,QAAQ,IACf,QAAQ,CAAC,SAAS,IAAI,CACrB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CACG;gBACL,CAAC,QAAQ,CAAC,SAAS,IAAI,CACtB,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACG,CACe,CACtB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback } from 'react';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport styles from './styles.css.js';\nimport { fireNonCancelableEvent } from '../../../internal/events/index';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { CongratulationScreen } from './congratulation-screen';\nimport { TaskList } from './task-list';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\n\nexport default function TutorialDetailView({\n  tutorial,\n  onExitTutorial: onExitTutorialHandler,\n  currentStepIndex = 0,\n  onFeedbackClick: onFeedbackClickHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onExitTutorial: HotspotContext['onExitTutorial'];\n  currentStepIndex: HotspotContext['currentStepIndex'];\n  onFeedbackClick: TutorialPanelProps['onFeedbackClick'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  const isRefresh = useVisualRefresh();\n\n  const onExitTutorial = useCallback(() => {\n    fireNonCancelableEvent(onExitTutorialHandler, { tutorial });\n  }, [onExitTutorialHandler, tutorial]);\n\n  const onFeedbackClick = useCallback(() => {\n    fireNonCancelableEvent(onFeedbackClickHandler, { tutorial });\n  }, [onFeedbackClickHandler, tutorial]);\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"xl\">\n        <div className={styles['tutorial-title']}>\n          <InternalButton\n            variant=\"icon\"\n            onClick={onExitTutorial}\n            ariaLabel={i18nStrings.labelExitTutorial}\n            formAction=\"none\"\n            iconName=\"arrow-left\"\n          />\n\n          <InternalBox\n            variant=\"h2\"\n            fontSize={isRefresh ? 'heading-m' : 'heading-l'}\n            padding={{ top: 'xxs' }}\n            margin={{ left: 's' }}\n          >\n            {tutorial.title}\n          </InternalBox>\n        </div>\n        <div>\n          <div role=\"status\">\n            {tutorial.completed && (\n              <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n                {tutorial.completedScreenDescription}\n              </CongratulationScreen>\n            )}\n          </div>\n          {!tutorial.completed && (\n            <TaskList\n              tasks={tutorial.tasks}\n              onExitTutorial={onExitTutorial}\n              currentGlobalStepIndex={currentStepIndex}\n              i18nStrings={i18nStrings}\n            />\n          )}\n        </div>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/task-list.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useState } from 'react';
@@ -8,24 +7,18 @@ import InternalBox from '../../../box/internal';
 import InternalSpaceBetween from '../../../space-between/internal';
 import { Task } from './task';
 import { getStepInfo } from '../../../annotation-context/index.js';
-export function TaskList(_a) {
-    var _b;
-    var tasks = _a.tasks, onExitTutorial = _a.onExitTutorial, currentGlobalStepIndex = _a.currentGlobalStepIndex, i18nStrings = _a.i18nStrings;
-    var currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex !== null && currentGlobalStepIndex !== void 0 ? currentGlobalStepIndex : 0).taskIndex;
-    var _c = useState((_b = {}, _b[currentTaskIndex] = true, _b)), expandedTasks = _c[0], setExpandedTasks = _c[1];
-    var onToggleExpand = useCallback(function (stepIndex) {
-        setExpandedTasks(function (prevTasks) {
-            var _a;
-            return (__assign(__assign({}, prevTasks), (_a = {}, _a[stepIndex] = !prevTasks[stepIndex], _a)));
-        });
+export function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }) {
+    const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex !== null && currentGlobalStepIndex !== void 0 ? currentGlobalStepIndex : 0).taskIndex;
+    const [expandedTasks, setExpandedTasks] = useState({ [currentTaskIndex]: true });
+    const onToggleExpand = useCallback((stepIndex) => {
+        setExpandedTasks(prevTasks => (Object.assign(Object.assign({}, prevTasks), { [stepIndex]: !prevTasks[stepIndex] })));
     }, []);
     // When the user progresses to a different task, all tasks except this one are collapsed.
-    useEffect(function () {
-        var _a;
-        setExpandedTasks((_a = {}, _a[currentTaskIndex] = true, _a));
+    useEffect(() => {
+        setExpandedTasks({ [currentTaskIndex]: true });
     }, [currentTaskIndex]);
     return (React.createElement(InternalSpaceBetween, { size: "xxl" },
-        React.createElement("ol", { className: styles['tutorial-list'] }, tasks.map(function (task, index) {
+        React.createElement("ol", { className: styles['tutorial-list'] }, tasks.map((task, index) => {
             var _a;
             return (React.createElement(Task, { task: task, key: index, taskIndex: index, currentTaskIndex: currentTaskIndex, expanded: (_a = expandedTasks[index]) !== null && _a !== void 0 ? _a : false, onToggleExpand: onToggleExpand, i18nStrings: i18nStrings }));
         })),

package/tutorial-panel/components/tutorial-detail-view/task-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"task-list.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AASnE,MAAM,UAAU,QAAQ,CAAC,EAA6E;;QAA3E,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,sBAAsB,4BAAA,EAAE,WAAW,iBAAA;IACnF,IAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC7E,IAAA,KAAoC,QAAQ,WAAG,GAAC,gBAAgB,IAAG,IAAI,MAAG,EAAzE,aAAa,QAAA,EAAE,gBAAgB,QAA0C,CAAC;IAEjF,IAAM,cAAc,GAAG,WAAW,CAAC,UAAC,SAAiB;QACnD,gBAAgB,CAAC,UAAA,SAAS;;YAAI,OAAA,uBAAM,SAAS,gBAAG,SAAS,IAAG,CAAC,SAAS,CAAC,SAAS,CAAC,OAAG;QAAtD,CAAsD,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yFAAyF;IACzF,SAAS,CAAC;;QACR,gBAAgB,WAAG,GAAC,gBAAgB,IAAG,IAAI,MAAG,CAAC;IACjD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,4BAAI,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACnC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK;;YAAK,OAAA,CAC1B,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,MAAA,aAAa,CAAC,KAAK,CAAC,mCAAI,KAAK,EACvC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAA;SAAA,CAAC,CACC;QACL,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;YAClC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAC3F,WAAW,CAAC,yBAAyB,CACvB,CACL,CACO,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport { InternalButton } from '../../../button/internal';\nimport InternalBox from '../../../box/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { Task } from './task';\nimport { getStepInfo } from '../../../annotation-context/index.js';\n\nexport interface TaskListProps {\n  tasks: ReadonlyArray<TutorialPanelProps.Task>;\n  onExitTutorial: () => void;\n  currentGlobalStepIndex: HotspotContext['currentStepIndex'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps) {\n  const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex ?? 0).taskIndex;\n  const [expandedTasks, setExpandedTasks] = useState({ [currentTaskIndex]: true });\n\n  const onToggleExpand = useCallback((stepIndex: number) => {\n    setExpandedTasks(prevTasks => ({ ...prevTasks, [stepIndex]: !prevTasks[stepIndex] }));\n  }, []);\n\n  // When the user progresses to a different task, all tasks except this one are collapsed.\n  useEffect(() => {\n    setExpandedTasks({ [currentTaskIndex]: true });\n  }, [currentTaskIndex]);\n\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <ol className={styles['tutorial-list']}>\n        {tasks.map((task, index) => (\n          <Task\n            task={task}\n            key={index}\n            taskIndex={index}\n            currentTaskIndex={currentTaskIndex}\n            expanded={expandedTasks[index] ?? false}\n            onToggleExpand={onToggleExpand}\n            i18nStrings={i18nStrings}\n          />\n        ))}\n      </ol>\n      <InternalBox margin={{ top: 'xxxs' }}>\n        <InternalButton onClick={onExitTutorial} formAction=\"none\" className={styles['dismiss-button']}>\n          {i18nStrings.dismissTutorialButtonText}\n        </InternalButton>\n      </InternalBox>\n    </InternalSpaceBetween>\n  );\n}\n"]}
+{"version":3,"file":"task-list.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/task-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAEnE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AASnE,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,WAAW,EAAiB;IACpG,MAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjF,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAAiB,EAAE,EAAE;QACvD,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC,iCAAM,SAAS,KAAE,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,IAAG,CAAC,CAAC;IACxF,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,yFAAyF;IACzF,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;QAC9B,4BAAI,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IACnC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CAC1B,oBAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,KAAK,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,MAAA,aAAa,CAAC,KAAK,CAAC,mCAAI,KAAK,EACvC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAA;SAAA,CAAC,CACC;QACL,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE;YAClC,oBAAC,cAAc,IAAC,OAAO,EAAE,cAAc,EAAE,UAAU,EAAC,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAC3F,WAAW,CAAC,yBAAyB,CACvB,CACL,CACO,CACxB,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport { InternalButton } from '../../../button/internal';\nimport InternalBox from '../../../box/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { HotspotContext } from '../../../annotation-context/context';\nimport { Task } from './task';\nimport { getStepInfo } from '../../../annotation-context/index.js';\n\nexport interface TaskListProps {\n  tasks: ReadonlyArray<TutorialPanelProps.Task>;\n  onExitTutorial: () => void;\n  currentGlobalStepIndex: HotspotContext['currentStepIndex'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}\n\nexport function TaskList({ tasks, onExitTutorial, currentGlobalStepIndex, i18nStrings }: TaskListProps) {\n  const currentTaskIndex = getStepInfo(tasks, currentGlobalStepIndex ?? 0).taskIndex;\n  const [expandedTasks, setExpandedTasks] = useState({ [currentTaskIndex]: true });\n\n  const onToggleExpand = useCallback((stepIndex: number) => {\n    setExpandedTasks(prevTasks => ({ ...prevTasks, [stepIndex]: !prevTasks[stepIndex] }));\n  }, []);\n\n  // When the user progresses to a different task, all tasks except this one are collapsed.\n  useEffect(() => {\n    setExpandedTasks({ [currentTaskIndex]: true });\n  }, [currentTaskIndex]);\n\n  return (\n    <InternalSpaceBetween size=\"xxl\">\n      <ol className={styles['tutorial-list']}>\n        {tasks.map((task, index) => (\n          <Task\n            task={task}\n            key={index}\n            taskIndex={index}\n            currentTaskIndex={currentTaskIndex}\n            expanded={expandedTasks[index] ?? false}\n            onToggleExpand={onToggleExpand}\n            i18nStrings={i18nStrings}\n          />\n        ))}\n      </ol>\n      <InternalBox margin={{ top: 'xxxs' }}>\n        <InternalButton onClick={onExitTutorial} formAction=\"none\" className={styles['dismiss-button']}>\n          {i18nStrings.dismissTutorialButtonText}\n        </InternalButton>\n      </InternalBox>\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-detail-view/task.js

@@ -16,10 +16,9 @@ function getStatusIndicatorType(taskIndex, currentTaskIndex) {
     }
     return 'pending';
 }
-export function Task(_a) {
-    var task = _a.task, taskIndex = _a.taskIndex, currentTaskIndex = _a.currentTaskIndex, expanded = _a.expanded, onToggleExpand = _a.onToggleExpand, i18nStrings = _a.i18nStrings;
-    var statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex);
-    var onExpandChange = useCallback(function () {
+export function Task({ task, taskIndex, currentTaskIndex, expanded, onToggleExpand, i18nStrings }) {
+    const statusIndicatorType = getStatusIndicatorType(taskIndex, currentTaskIndex);
+    const onExpandChange = useCallback(() => {
         onToggleExpand(taskIndex);
     }, [onToggleExpand, taskIndex]);
     return (React.createElement("li", { className: styles.task },
@@ -29,7 +28,7 @@ export function Task(_a) {
                 React.createElement(InternalBox, { variant: "h3", padding: { left: 'xxxs', vertical: 'n' }, fontSize: "heading-s", color: taskIndex < currentTaskIndex ? 'text-status-success' : 'text-status-inactive' }, i18nStrings.taskTitle(taskIndex, task.title))),
             React.createElement("div", { className: styles['expandable-section-wrapper'] },
                 React.createElement(InternalExpandableSection, { headerText: React.createElement("span", { className: styles['expandable-section-header'] }, i18nStrings.labelTotalSteps(task.steps.length)), expanded: expanded, onChange: onExpandChange, headerAriaLabel: joinStrings(i18nStrings.taskTitle(taskIndex, task.title), i18nStrings.labelTotalSteps(task.steps.length)) },
-                    React.createElement("ol", { className: styles['step-list'] }, task.steps.map(function (step, stepIndex) { return (React.createElement("li", { key: stepIndex, className: styles.step },
-                        React.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-m", padding: { left: 'l' }, className: styles['step-title'] }, i18nStrings.stepTitle(stepIndex, step.title)))); })))))));
+                    React.createElement("ol", { className: styles['step-list'] }, task.steps.map((step, stepIndex) => (React.createElement("li", { key: stepIndex, className: styles.step },
+                        React.createElement(InternalBox, { color: "text-body-secondary", fontSize: "body-m", padding: { left: 'l' }, className: styles['step-title'] }, i18nStrings.stepTitle(stepIndex, step.title)))))))))));
 }
 //# sourceMappingURL=task.js.map