@cloudscape-design/components 3.0.27 → 3.0.28

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,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAYrE,MAAM,UAAU,YAAY,CAAC,EAQT;;QAPlB,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA;IAEd,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,IAAM,kBAAkB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC3D,IAAM,kBAAkB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAErD,IAAM,eAAe,GAAG,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAEjD,IAAA,KAA8B,iBAAiB,CAAS,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,KAAK,EAAV,CAAU,CAAC,EAA1E,WAAW,QAAA,EAAE,YAAY,QAAiD,CAAC;IAClF,IAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,GAAG,EAAE,CAAC,CAAC;IACtD,IAAA,KAA8C,QAAQ,CAAC,KAAK,CAAC,EAA5D,kBAAkB,QAAA,EAAE,qBAAqB,QAAmB,CAAC;IAC9D,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,YAAY,QAAA,EAAE,eAAe,QAAmB,CAAC;IAClD,IAAA,KAAoC,QAAQ,CAAC,KAAK,CAAC,EAAlD,aAAa,QAAA,EAAE,gBAAgB,QAAmB,CAAC;IAE1D,SAAS,CAAC;QACR,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,qBAAqB,CAAC,qBAAqB,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CAAC;YACvF,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;IAExB,IAAM,wBAAwB,GAAG,UAAC,MAAe;QAC/C,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,IAAM,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;QACR,uEAAuE;QACvE,yDAAyD;QACzD,gEAAgE;QAChE,qBAAqB,CAAC;YACpB,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;QACR,wBAAwB,CAAC,IAAI,CAAC,CAAC;QAC/B,8DAA8D;QAC9D,uDAAuD;IACzD,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC;;QACR;;;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,IAAM,QAAQ,GAAG;QACf,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC,CAAC;IAEF,IAAM,OAAO,GAAG,IAAI;QAClB,GAAC,MAAM,CAAC,aAAa,CAAC,IAAG,IAAI;QAC7B,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,OAAO,KAAK,SAAS,IAAI,eAAe;YAC9E,CAAC;IAEH,IAAM,iBAAiB,GAAG,IAAI;QAC5B,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,IAAI;QACnC,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,IAAI;QACxC,GAAC,MAAM,CAAC,mCAAmC,CAAC,IAAG,YAAY;YAC3D,CAAC;IAEH,IAAM,kBAAkB,GAAG,IAAI;QAC7B,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,IAAI;QACnC,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,IAAI;QACzC,GAAC,MAAM,CAAC,oCAAoC,CAAC,IAAG,aAAa;YAC7D,CAAC;IAEH,IAAM,0BAA0B,GAAG;QACjC,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC;IAEF,OAAO;IACL,iFAAiF;IACjF,6BAAK,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,YAAY;QACvC,kBAAkB,IAAI,CACrB,8BAAM,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,iBAAiB;YACzD,oBAAC,cAAc,IACb,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,YAAY,EACrB,kBAAkB,EAAE,0BAA0B,EAC9C,QAAQ,EAAE,CAAC,YAAY,EACvB,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAnC,CAAmC,GAClD,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,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,aAAa,EACtB,kBAAkB,EAAE,0BAA0B,EAC9C,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,cAAM,OAAA,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAlC,CAAkC,GACjD,CACG,CACR,CACG,CACP,CAAC;IAEF,SAAS,eAAe,CAAC,GAAkB;;QACzC,IAAM,yBAAyB,GAAG,IAAI,CAAC,MAAM,CAAC,UAAA,GAAG,IAAI,OAAA,CAAC,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,EAAE,KAAK,WAAW,EAAvC,CAAuC,CAAC,CAAC;QAE9F,IAAM,YAAY,GAAG,UAAU,eAAuB;YACpD,IAAM,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,IAAM,aAAa,GAAG,UACpB,KAAsF;YAE9E,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;YAC1B,IAAM,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,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACvC,OAAO;aACR;YACD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAM,WAAW,GAAG,yBAAyB,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC3D,QAAQ,OAAO,EAAE;gBACf,KAAK,OAAO,CAAC,KAAK;oBAChB,IAAI,WAAW,GAAG,CAAC,KAAK,yBAAyB,CAAC,MAAM,EAAE;wBACxD,YAAY,CAAC,CAAC,CAAC,CAAC;qBACjB;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,IAAI,WAAW,KAAK,CAAC,EAAE;wBACrB,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;qBACpD;yBAAM;wBACL,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;qBAC/B;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,GAAG;oBACd,YAAY,CAAC,yBAAyB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBACnD,OAAO;gBACT,KAAK,OAAO,CAAC,IAAI;oBACf,YAAY,CAAC,CAAC,CAAC,CAAC;oBAChB,OAAO;gBACT,KAAK,OAAO,CAAC,QAAQ;oBACnB,IAAI,aAAa,EAAE;wBACjB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;qBACpC;oBACD,OAAO;gBACT,KAAK,OAAO,CAAC,MAAM;oBACjB,IAAI,YAAY,EAAE;wBAChB,iBAAiB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;qBACrC;oBACD,OAAO;aACV;QACH,CAAC,CAAC;QAEF,IAAM,QAAQ,GAAG,UAAC,KAAuB;YACvC,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;aACR;YAED,wGAAwG;YACxG,IAAM,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,IAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,IAAI,aAAa,EAAE;oBACjB,IAAM,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,IAAM,OAAO,GAAG,IAAI;YAClB,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,IAAI;YAC/B,GAAC,MAAM,CAAC,OAAO,IAAG,eAAe;YACjC,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ;YACpE,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,GAAG,CAAC,QAAQ;gBAC3C,CAAC;QAEH,IAAM,WAAW,uBACf,SAAS,EAAE,OAAO,IACf,YAAY,KACf,IAAI,EAAE,KAAK,EACX,eAAe,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW,EACvC,eAAe,EAAE,UAAG,WAAW,cAAI,GAAG,CAAC,EAAE,WAAQ,EACjD,aAAa,EAAE,GAAG,CAAC,EAAE,EACrB,QAAQ,EAAE,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAG,GAAG,CAAC,KAAK,CAAQ,GACxE,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,UACtB,KAAsF,IACnF,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,CAAC;SAC3B;aAAM;YACL,WAAW,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;SAC3B;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QACnB,IAAI,GAAG,CAAC,IAAI,EAAE;YACZ,IAAM,WAAW,GAAG,WAAyC,CAAC;YAC9D,WAAW,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;YAC5B,OAAO,GAAG,sCAAO,WAAW,EAAI,CAAC;SAClC;aAAM;YACL,IAAM,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,2CAAY,WAAW,EAAI,CAAC;SACvC;QAED,OAAO,CACL,4BACE,GAAG,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,OAAsB,CAAC,EAAnD,CAAmD,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","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 useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\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}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n}: TabHeaderBarProps) {\n  const focusVisible = useFocusVisible();\n\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh(headerBarRef);\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(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      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(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']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  const paginationButtonAttributes = {\n    'aria-hidden': true,\n    tabIndex: -1,\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={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\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            variant=\"icon\"\n            iconName=\"angle-right\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\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 handleKeyDown = 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 (specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\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      ...focusVisible,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': 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      ) => handleKeyDown(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"]}
+{"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 } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\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}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n}: TabHeaderBarProps) {\n  const focusVisible = useFocusVisible();\n\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(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      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(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']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  const paginationButtonAttributes = {\n    'aria-hidden': true,\n    tabIndex: -1,\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={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\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            variant=\"icon\"\n            iconName=\"angle-right\"\n            __nativeAttributes={paginationButtonAttributes}\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\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 handleKeyDown = 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 (specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\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      ...focusVisible,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': 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      ) => handleKeyDown(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"]}

package/tutorial-panel/components/tutorial-detail-view/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAoB,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrD,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD,eAgDA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-detail-view/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,QAAQ,EACR,cAAc,EAAE,qBAAqB,EACrC,gBAAoB,EACpB,eAAe,EAAE,sBAAsB,EACvC,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACjD,gBAAgB,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACrD,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACvD,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD,eA+CA"}

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

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import InternalBox from '../../../box/internal';
 import { InternalButton } from '../../../button/internal';
 import InternalSpaceBetween from '../../../space-between/internal';
@@ -11,8 +11,7 @@ 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 refreshRef = useRef(null);
-    var isRefresh = useVisualRefresh(refreshRef);
+    var isRefresh = useVisualRefresh();
     var onExitTutorial = useCallback(function () {
         fireNonCancelableEvent(onExitTutorialHandler, { tutorial: tutorial });
     }, [onExitTutorialHandler, tutorial]);
@@ -21,7 +20,7 @@ export default function TutorialDetailView(_a) {
     }, [onFeedbackClickHandler, tutorial]);
     return (React.createElement(React.Fragment, null,
         React.createElement(InternalSpaceBetween, { size: "xl" },
-            React.createElement("div", { className: styles['tutorial-title'], ref: refreshRef },
+            React.createElement("div", { className: styles['tutorial-title'] },
                 React.createElement(InternalButton, { variant: "icon", onClick: onExitTutorial, ariaLabel: i18nStrings.labelExitTutorial, formAction: "none", iconName: "arrow-left" }),
                 React.createElement(InternalBox, { variant: "h2", fontSize: isRefresh ? 'heading-m' : 'heading-l', padding: { top: 'xxs' }, margin: { left: 's' } }, tutorial.title)),
             tutorial.completed ? (React.createElement(CongratulationScreen, { onFeedbackClick: onFeedbackClick, i18nStrings: i18nStrings }, tutorial.completedScreenDescription)) : (React.createElement(TaskList, { tasks: tutorial.tasks, onExitTutorial: onExitTutorial, currentGlobalStepIndex: currentStepIndex, i18nStrings: i18nStrings })))));

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,EAAE,MAAM,OAAO,CAAC;AAEnD,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,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAE/C,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,EAAE,GAAG,EAAE,UAAU;gBACvD,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;YACL,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CACpB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACoB,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, useRef } 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 refreshRef = useRef(null);\n  const isRefresh = useVisualRefresh(refreshRef);\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']} ref={refreshRef}>\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        {tutorial.completed ? (\n          <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n            {tutorial.completedScreenDescription}\n          </CongratulationScreen>\n        ) : (\n          <TaskList\n            tasks={tutorial.tasks}\n            onExitTutorial={onExitTutorial}\n            currentGlobalStepIndex={currentStepIndex}\n            i18nStrings={i18nStrings}\n          />\n        )}\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,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;YACL,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CACpB,oBAAC,oBAAoB,IAAC,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,IAC7E,QAAQ,CAAC,0BAA0B,CACf,CACxB,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IACP,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,cAAc,EAAE,cAAc,EAC9B,sBAAsB,EAAE,gBAAgB,EACxC,WAAW,EAAE,WAAW,GACxB,CACH,CACoB,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        {tutorial.completed ? (\n          <CongratulationScreen onFeedbackClick={onFeedbackClick} i18nStrings={i18nStrings}>\n            {tutorial.completedScreenDescription}\n          </CongratulationScreen>\n        ) : (\n          <TaskList\n            tasks={tutorial.tasks}\n            onExitTutorial={onExitTutorial}\n            currentGlobalStepIndex={currentStepIndex}\n            i18nStrings={i18nStrings}\n          />\n        )}\n      </InternalSpaceBetween>\n    </>\n  );\n}\n"]}

package/tutorial-panel/components/tutorial-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAMxE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1F,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,iBAAiB,eAsEnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AAMxE,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACnD,iBAAiB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1F,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;IAC/C,WAAW,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CAChD;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,SAAS,EACT,OAAe,EACf,eAAe,EACf,WAAW,GACZ,EAAE,iBAAiB,eAqEnB"}

package/tutorial-panel/components/tutorial-list/index.js

@@ -1,7 +1,7 @@
 import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useCallback, useState, useRef } from 'react';
+import React, { useCallback, useState } from 'react';
 import styles from './styles.css.js';
 import InternalBox from '../../../box/internal';
 import { InternalButton } from '../../../button/internal';
@@ -32,8 +32,7 @@ export default function TutorialList(_a) {
     const filteredTutorials = tutorials.filter(tutorial => filteringFunction(tutorial, searchTerm))
     */
     var focusVisible = useFocusVisible();
-    var tutorialListRef = useRef(null);
-    var isRefresh = useVisualRefresh(tutorialListRef);
+    var isRefresh = useVisualRefresh();
     return (React.createElement(React.Fragment, null,
         React.createElement(InternalSpaceBetween, { size: "s" },
             React.createElement(InternalSpaceBetween, { size: "m" },
@@ -44,7 +43,7 @@ export default function TutorialList(_a) {
                     React.createElement(InternalIcon, { name: "download" }),
                     React.createElement(InternalBox, { padding: { left: 'xs' }, color: "inherit", fontWeight: "bold", display: "inline" }, i18nStrings.tutorialListDownloadLinkText)),
                 loading ? (React.createElement(InternalStatusIndicator, { type: "loading" }, i18nStrings.loadingText)) : (React.createElement(React.Fragment, null,
-                    React.createElement("ul", { className: styles['tutorial-list'], role: "list", ref: tutorialListRef }, tutorials.map(function (tutorial, index) { return (React.createElement(Tutorial, { tutorial: tutorial, key: index, onStartTutorial: onStartTutorial, i18nStrings: i18nStrings })); }))))))));
+                    React.createElement("ul", { className: styles['tutorial-list'], role: "list" }, tutorials.map(function (tutorial, index) { return (React.createElement(Tutorial, { tutorial: tutorial, key: index, onStartTutorial: onStartTutorial, i18nStrings: i18nStrings })); }))))))));
 }
 function Tutorial(_a) {
     var _b;
@@ -53,8 +52,7 @@ function Tutorial(_a) {
     var controlId = useUniqueId();
     var triggerControldId = useUniqueId();
     var headerId = useUniqueId();
-    var tutorialRef = useRef(null);
-    var isRefresh = useVisualRefresh(tutorialRef);
+    var isRefresh = useVisualRefresh();
     var onStartTutorial = useCallback(function () {
         fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial: tutorial });
     }, [onStartTutorialEventHandler, tutorial]);
@@ -62,7 +60,7 @@ function Tutorial(_a) {
     var onClick = useCallback(function () {
         setExpanded(function (expanded) { return !expanded; });
     }, []);
-    return (React.createElement("li", { className: styles['tutorial-box'], role: "listitem", ref: tutorialRef },
+    return (React.createElement("li", { className: styles['tutorial-box'], role: "listitem" },
         React.createElement(InternalSpaceBetween, { size: "xs" },
             React.createElement("div", { className: styles['tutorial-box-title'] },
                 React.createElement(InternalBox, { variant: "h3", fontSize: isRefresh ? 'heading-s' : 'heading-m', id: headerId, margin: { right: 'xs' }, padding: "n", className: styles.title }, tutorial.title),

package/tutorial-panel/components/tutorial-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState, useRef } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport clsx from 'clsx';\nimport InternalAlert from '../../../alert/internal';\nimport InternalLink from '../../../link/internal';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';\nimport { CSSTransition } from 'react-transition-group';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalIcon from '../../../icon/internal';\nimport useFocusVisible from '../../../internal/hooks/focus-visible/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\n\nexport interface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  filteringFunction: (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => boolean;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  /*\n  // Filtering is not available in the Beta release.\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  const onSearchChangeCallback: InputProps['onChange'] = useCallback(event => setSearchTerm(event.detail.value), [\n    setSearchTerm\n  ]);\n\n  const filteredTutorials = tutorials.filter(tutorial => filteringFunction(tutorial, searchTerm))\n  */\n\n  const focusVisible = useFocusVisible();\n  const tutorialListRef = useRef(null);\n  const isRefresh = useVisualRefresh(tutorialListRef);\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          <a\n            {...focusVisible}\n            href={downloadUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={styles['download-link']}\n          >\n            <InternalIcon name=\"download\" />\n            <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n              {i18nStrings.tutorialListDownloadLinkText}\n            </InternalBox>\n          </a>\n\n          {/*\n          <FormField label=\"Filter tutorials\">\n            <Input type=\"search\" value={searchTerm} placeholder=\"Filter tutorials\" onChange={onSearchChangeCallback} />\n          </FormField>\n        */}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">{i18nStrings.loadingText}</InternalStatusIndicator>\n          ) : (\n            <>\n              <ul className={styles['tutorial-list']} role=\"list\" ref={tutorialListRef}>\n                {tutorials.map((tutorial, index) => (\n                  <Tutorial\n                    tutorial={tutorial}\n                    key={index}\n                    onStartTutorial={onStartTutorial}\n                    i18nStrings={i18nStrings}\n                  />\n                ))}\n              </ul>\n              {/* {filteredTutorials.length === 0 && searchTerm && <Box>No tutorials match this search filter.</Box>} */}\n            </>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const tutorialRef = useRef(null);\n  const isRefresh = useVisualRefresh(tutorialRef);\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\" ref={tutorialRef}>\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              __nativeAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      external={true}\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/tutorial-panel/components/tutorial-list/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useState } from 'react';\nimport styles from './styles.css.js';\nimport { TutorialPanelProps } from '../../interfaces';\nimport InternalBox from '../../../box/internal';\nimport { InternalButton } from '../../../button/internal';\nimport InternalStatusIndicator from '../../../status-indicator/internal';\nimport InternalSpaceBetween from '../../../space-between/internal';\nimport { fireNonCancelableEvent } from '../../../internal/events/index.js';\nimport clsx from 'clsx';\nimport InternalAlert from '../../../alert/internal';\nimport InternalLink from '../../../link/internal';\nimport { useUniqueId } from '../../../internal/hooks/use-unique-id/index.js';\nimport { CSSTransition } from 'react-transition-group';\nimport { HotspotContext } from '../../../annotation-context/context.js';\nimport InternalIcon from '../../../icon/internal';\nimport useFocusVisible from '../../../internal/hooks/focus-visible/index.js';\nimport { useVisualRefresh } from '../../../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../../../internal/utils/check-safe-url';\n\nexport interface TutorialListProps {\n  loading?: boolean;\n  tutorials: TutorialPanelProps['tutorials'];\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  filteringFunction: (tutorial: TutorialPanelProps.Tutorial, searchTerm: string) => boolean;\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n  downloadUrl: TutorialPanelProps['downloadUrl'];\n}\n\nexport default function TutorialList({\n  i18nStrings,\n  tutorials,\n  loading = false,\n  onStartTutorial,\n  downloadUrl,\n}: TutorialListProps) {\n  checkSafeUrl('TutorialPanel', downloadUrl);\n\n  /*\n  // Filtering is not available in the Beta release.\n\n  const [searchTerm, setSearchTerm] = useState('');\n\n  const onSearchChangeCallback: InputProps['onChange'] = useCallback(event => setSearchTerm(event.detail.value), [\n    setSearchTerm\n  ]);\n\n  const filteredTutorials = tutorials.filter(tutorial => filteringFunction(tutorial, searchTerm))\n  */\n\n  const focusVisible = useFocusVisible();\n  const isRefresh = useVisualRefresh();\n\n  return (\n    <>\n      <InternalSpaceBetween size=\"s\">\n        <InternalSpaceBetween size=\"m\">\n          <InternalBox variant=\"h2\" fontSize={isRefresh ? 'heading-m' : 'heading-l'} padding={{ bottom: 'n' }}>\n            {i18nStrings.tutorialListTitle}\n          </InternalBox>\n          <InternalBox variant=\"p\" color=\"text-body-secondary\" padding=\"n\">\n            {i18nStrings.tutorialListDescription}\n          </InternalBox>\n        </InternalSpaceBetween>\n        <InternalSpaceBetween size=\"l\">\n          <a\n            {...focusVisible}\n            href={downloadUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={styles['download-link']}\n          >\n            <InternalIcon name=\"download\" />\n            <InternalBox padding={{ left: 'xs' }} color=\"inherit\" fontWeight=\"bold\" display=\"inline\">\n              {i18nStrings.tutorialListDownloadLinkText}\n            </InternalBox>\n          </a>\n\n          {/*\n          <FormField label=\"Filter tutorials\">\n            <Input type=\"search\" value={searchTerm} placeholder=\"Filter tutorials\" onChange={onSearchChangeCallback} />\n          </FormField>\n        */}\n          {loading ? (\n            <InternalStatusIndicator type=\"loading\">{i18nStrings.loadingText}</InternalStatusIndicator>\n          ) : (\n            <>\n              <ul className={styles['tutorial-list']} role=\"list\">\n                {tutorials.map((tutorial, index) => (\n                  <Tutorial\n                    tutorial={tutorial}\n                    key={index}\n                    onStartTutorial={onStartTutorial}\n                    i18nStrings={i18nStrings}\n                  />\n                ))}\n              </ul>\n              {/* {filteredTutorials.length === 0 && searchTerm && <Box>No tutorials match this search filter.</Box>} */}\n            </>\n          )}\n        </InternalSpaceBetween>\n      </InternalSpaceBetween>\n    </>\n  );\n}\n\nfunction Tutorial({\n  tutorial,\n  onStartTutorial: onStartTutorialEventHandler,\n  i18nStrings,\n}: {\n  tutorial: TutorialPanelProps.Tutorial;\n  onStartTutorial: HotspotContext['onStartTutorial'];\n  i18nStrings: TutorialPanelProps['i18nStrings'];\n}) {\n  checkSafeUrl('TutorialPanel', tutorial.learnMoreUrl);\n  const controlId = useUniqueId();\n  const triggerControldId = useUniqueId();\n  const headerId = useUniqueId();\n\n  const isRefresh = useVisualRefresh();\n\n  const onStartTutorial = useCallback(() => {\n    fireNonCancelableEvent(onStartTutorialEventHandler, { tutorial });\n  }, [onStartTutorialEventHandler, tutorial]);\n\n  const [expanded, setExpanded] = useState(!tutorial.prerequisitesNeeded && !tutorial.completed);\n\n  const onClick = useCallback(() => {\n    setExpanded(expanded => !expanded);\n  }, []);\n\n  return (\n    <li className={styles['tutorial-box']} role=\"listitem\">\n      <InternalSpaceBetween size=\"xs\">\n        <div className={styles['tutorial-box-title']}>\n          <InternalBox\n            variant=\"h3\"\n            fontSize={isRefresh ? 'heading-s' : 'heading-m'}\n            id={headerId}\n            margin={{ right: 'xs' }}\n            padding=\"n\"\n            className={styles.title}\n          >\n            {tutorial.title}\n          </InternalBox>\n          <div className={styles['button-wrapper']}>\n            <InternalButton\n              id={triggerControldId}\n              variant=\"icon\"\n              ariaExpanded={expanded}\n              __nativeAttributes={{\n                'aria-controls': controlId,\n                'aria-labelledby': headerId,\n              }}\n              formAction=\"none\"\n              onClick={onClick}\n              className={expanded ? styles['collapse-button'] : styles['expand-button']}\n              iconName={expanded ? 'angle-up' : 'angle-down'}\n            />\n          </div>\n        </div>\n\n        {tutorial.completed ? (\n          <InternalStatusIndicator __size=\"inherit\" type=\"success\" className={styles.completed} wrapText={true}>\n            {i18nStrings.tutorialCompletedText}\n          </InternalStatusIndicator>\n        ) : null}\n      </InternalSpaceBetween>\n\n      <div aria-live=\"polite\">\n        <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }}>\n          <div className={clsx(styles['expandable-section'], expanded && styles.expanded)} id={controlId}>\n            <InternalSpaceBetween size=\"l\">\n              <InternalSpaceBetween size=\"m\">\n                {tutorial.prerequisitesNeeded && tutorial.prerequisitesAlert && (\n                  <InternalAlert type=\"info\" className={styles['prerequisites-alert']}>\n                    {tutorial.prerequisitesAlert}\n                  </InternalAlert>\n                )}\n                <InternalSpaceBetween size=\"s\">\n                  <InternalBox color=\"text-body-secondary\">\n                    <div\n                      className={clsx(\n                        styles['tutorial-description'],\n                        typeof tutorial.description === 'string' && styles['tutorial-description-plaintext']\n                      )}\n                    >\n                      {tutorial.description}\n                    </div>\n                  </InternalBox>\n                  {tutorial.learnMoreUrl && (\n                    <InternalLink\n                      href={tutorial.learnMoreUrl}\n                      className={styles['learn-more-link']}\n                      externalIconAriaLabel={i18nStrings.labelLearnMoreExternalIcon}\n                      external={true}\n                    >\n                      {i18nStrings.learnMoreLinkText}\n                    </InternalLink>\n                  )}\n                </InternalSpaceBetween>\n              </InternalSpaceBetween>\n\n              <InternalBox margin={{ bottom: 'xxs' }}>\n                <InternalButton\n                  onClick={onStartTutorial}\n                  disabled={tutorial.prerequisitesNeeded ?? false}\n                  formAction=\"none\"\n                  className={styles.start}\n                >\n                  {tutorial.completed ? i18nStrings.restartTutorialButtonText : i18nStrings.startTutorialButtonText}\n                </InternalButton>\n              </InternalBox>\n            </InternalSpaceBetween>\n          </div>\n        </CSSTransition>\n      </div>\n    </li>\n  );\n}\n"]}

package/wizard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAevB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,WAAW,EACX,iBAAyB,EACzB,WAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,GAAG,IAAI,EACR,EAAE,WAAW,eAiGb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/wizard/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAevB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,WAAW,EACX,iBAAyB,EACzB,WAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,GAAG,IAAI,EACR,EAAE,WAAW,eAgGb"}

package/wizard/index.js

@@ -34,8 +34,7 @@ export default function Wizard(_a) {
     var __internalRootRef = useBaseComponent('Wizard').__internalRootRef;
     var baseProps = getBaseProps(rest);
     var _d = useContainerBreakpoints(['xs']), breakpoint = _d[0], breakpointsRef = _d[1];
-    var refObject = useRef(null);
-    var ref = useMergeRefs(breakpointsRef, refObject, __internalRootRef);
+    var ref = useMergeRefs(breakpointsRef, __internalRootRef);
     var smallContainer = breakpoint === 'default';
     var _e = useControllable(controlledActiveStepIndex, onNavigate, 0, {
         componentName: 'Wizard',
@@ -49,7 +48,7 @@ export default function Wizard(_a) {
     useEffect(function () {
         scrollToTop(internalRef);
     }, [actualActiveStepIndex]);
-    var isVisualRefresh = useVisualRefresh(refObject);
+    var isVisualRefresh = useVisualRefresh();
     var isLastStep = actualActiveStepIndex >= steps.length - 1;
     var navigationEvent = function (requestedStepIndex, reason) {
         setActiveStepIndex(requestedStepIndex);

package/wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.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';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport { WizardProps };\n\nconst scrollToTop = (ref: React.RefObject<HTMLDivElement>) => {\n  const overflowRegex = /(auto|scroll)/;\n  let parent = ref?.current?.parentElement;\n  while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {\n    parent = parent.parentElement;\n  }\n  if (parent) {\n    parent.scrollTop = 0;\n  } else {\n    window.scrollTo(window.pageXOffset, 0);\n  }\n};\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  i18nStrings,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n  const refObject = useRef(null);\n  const ref = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n  const smallContainer = breakpoint === 'default';\n\n  const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n    componentName: 'Wizard',\n    controlledProp: 'activeStepIndex',\n    changeHandler: 'onNavigate',\n  });\n  const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n  const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n  farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    scrollToTop(internalRef);\n  }, [actualActiveStepIndex]);\n\n  const isVisualRefresh = useVisualRefresh(refObject);\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n    setActiveStepIndex(requestedStepIndex);\n    fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n  };\n  const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n  const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n  const onCancelClick = () => fireNonCancelableEvent(onCancel);\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = isLastStep\n    ? () => fireNonCancelableEvent(onSubmit)\n    : () => navigationEvent(actualActiveStepIndex + 1, 'next');\n\n  if (activeStepIndex && activeStepIndex >= steps.length) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n        steps.length\n      } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n    );\n  }\n\n  if (allowSkipTo && !i18nStrings.skipToButtonLabel) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n    );\n  }\n\n  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        ref={internalRef}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n        <div\n          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        >\n          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\n            secondaryActions={secondaryActions}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onSkipToClick={onSkipToClick}\n            onPrimaryClick={onPrimaryClick}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/wizard/index.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';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { warnOnce } from '../internal/logging';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport WizardForm from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport { WizardProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport { WizardProps };\n\nconst scrollToTop = (ref: React.RefObject<HTMLDivElement>) => {\n  const overflowRegex = /(auto|scroll)/;\n  let parent = ref?.current?.parentElement;\n  while (parent && !overflowRegex.test(getComputedStyle(parent).overflow)) {\n    parent = parent.parentElement;\n  }\n  if (parent) {\n    parent.scrollTop = 0;\n  } else {\n    window.scrollTo(window.pageXOffset, 0);\n  }\n};\n\nexport default function Wizard({\n  steps,\n  activeStepIndex: controlledActiveStepIndex,\n  i18nStrings,\n  isLoadingNextStep = false,\n  allowSkipTo = false,\n  secondaryActions,\n  onCancel,\n  onSubmit,\n  onNavigate,\n  ...rest\n}: WizardProps) {\n  const { __internalRootRef } = useBaseComponent('Wizard');\n  const baseProps = getBaseProps(rest);\n\n  const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n  const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n  const smallContainer = breakpoint === 'default';\n\n  const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n    componentName: 'Wizard',\n    controlledProp: 'activeStepIndex',\n    changeHandler: 'onNavigate',\n  });\n  const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n  const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n  farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    scrollToTop(internalRef);\n  }, [actualActiveStepIndex]);\n\n  const isVisualRefresh = useVisualRefresh();\n  const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n  const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n    setActiveStepIndex(requestedStepIndex);\n    fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n  };\n  const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n  const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n  const onCancelClick = () => fireNonCancelableEvent(onCancel);\n  const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n  const onPrimaryClick = isLastStep\n    ? () => fireNonCancelableEvent(onSubmit)\n    : () => navigationEvent(actualActiveStepIndex + 1, 'next');\n\n  if (activeStepIndex && activeStepIndex >= steps.length) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n        steps.length\n      } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n    );\n  }\n\n  if (allowSkipTo && !i18nStrings.skipToButtonLabel) {\n    warnOnce(\n      'Wizard',\n      `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n    );\n  }\n\n  return (\n    <div {...baseProps} className={clsx(styles.root, baseProps.className)} ref={ref}>\n      <div\n        className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        ref={internalRef}\n      >\n        <WizardNavigation\n          activeStepIndex={actualActiveStepIndex}\n          farthestStepIndex={farthestStepIndex.current}\n          allowSkipTo={allowSkipTo}\n          hidden={smallContainer}\n          i18nStrings={i18nStrings}\n          isVisualRefresh={isVisualRefresh}\n          isLoadingNextStep={isLoadingNextStep}\n          onStepClick={onStepClick}\n          onSkipToClick={onSkipToClick}\n          steps={steps}\n        />\n        <div\n          className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n        >\n          {isVisualRefresh && <div className={clsx(styles.background, 'awsui-context-content-header')} />}\n\n          <WizardForm\n            steps={steps}\n            isVisualRefresh={isVisualRefresh}\n            showCollapsedSteps={smallContainer}\n            i18nStrings={i18nStrings}\n            activeStepIndex={actualActiveStepIndex}\n            isPrimaryLoading={isLoadingNextStep}\n            allowSkipTo={allowSkipTo}\n            secondaryActions={secondaryActions}\n            onCancelClick={onCancelClick}\n            onPreviousClick={onPreviousClick}\n            onSkipToClick={onSkipToClick}\n            onPrimaryClick={onPrimaryClick}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\napplyDisplayName(Wizard, 'Wizard');\n"]}