@cloudscape-design/components-themeable 3.0.1360 → 3.0.1362

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAO,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAQjH,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAC7C,OAAO,OAAO,MAAM,iCAAiC,CAAC;AAEtD,OAAO,cAAc,MAAM,qCAAqC,CAAC;AACjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAsDrC,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,KAAK,EAClB,WAAW,EACX,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,yBAAyB,GAAG,KAAK,EACjC,eAAe,GAAG,KAAK,EACvB,OAAO,GAAG,SAAS,GACA,EACrB,GAA+B;IAE/B,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC/D,MAAM,CAAC,eAAe,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEtE,MAAM,kBAAkB,GAAG,CAAC,KAA0C,EAAE,EAAE;QACxE,KAAK,CAAC,eAAe,EAAE,CAAC,CAAC,oDAAoD;QAC7E,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,aAAa,GAAG,KAAK,EAAE,EAAE;QAC3C,iBAAiB,CAAC,aAAa,CAAC,CAAC;QACjC,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAE,EAAE;;QACrD,MAAM,iBAAiB,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,0CAAE,OAAO,0CAAE,oBAAoB,MAAK,MAAM,CAAC;QAChH,IAAI,iBAAiB,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,iBAAiB,CAAC,KAAK,CAAC,CAAC;QACzB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF;;;;OAIG;IACH,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,KAAiB,EAAE,EAAE;;QACpB,IAAI,iBAAiB,GAAG,KAAK,CAAC;QAC9B,MAAM,sBAAsB,GAAG,KAAY,CAAC;QAC5C,MAAM,aAAa,GAAG,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,aAAa,CAAC;QAC5D,MAAM,oBAAoB,GAAG,CAAA,MAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,0CAAE,OAAO,0CAAE,oBAAoB,MAAK,MAAM,CAAC;QACtG,MAAM,oBAAoB,GAAG,CAAA,MAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,0CAAE,UAAU,MAAK,6BAA6B,CAAC;QAClG,IACE,CAAC,eAAe,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,mDAAmD;YAC3F,CAAC,CAAC,eAAe;gBACf,CAAC,oBAAoB,IAAI,iDAAiD;oBACxE,CAAC,yBAAyB,CAAC,CAAC,CAAC,8CAA8C;UAC/E,CAAC;YACD,iBAAiB,GAAG,IAAI,CAAC;QAC3B,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,iBAAiB,GAAG,KAAK,CAAC;QAC5B,CAAC;QACD,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAAC;QACtC,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EACD;QACE,qCAAqC;QACrC,yBAAyB;QACzB,eAAe;KAChB,CACF,CAAC;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CACL,UAAU;YACV,WAAW;YACX,CAAC,eAAe;YAChB,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAA;YACvB,YAAY;YACZ,CAAC,CAAC,QAAQ,IAAI,aAAa,CAAC,CAC7B,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAEpG,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,YAAY,EAAE,CAAC;YAC/B,MAAM,KAAK,GAAG,GAAG,EAAE;gBACjB,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,CAAC;YAEF,MAAM,kBAAkB,GAAG,CAAC,KAAmB,EAAE,EAAE;;gBACjD,IAAI,KAAK,CAAC,MAAM,IAAI,YAAY,KAAI,MAAC,YAAY,CAAC,OAAe,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAA,EAAE,CAAC;oBACzG,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;YAEF,MAAM,sBAAsB,GAAG,CAAC,KAAmB,EAAE,EAAE;gBACrD,IAAI,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC9B,KAAK,EAAE,CAAC;gBACV,CAAC;YACH,CAAC,CAAC;YAEF,MAAM,kBAAkB,GAAG,CAAC,KAAoB,EAAE,EAAE;gBAClD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAC3B,KAAK,EAAE,CAAC;gBACV,CAAC;YACH,CAAC,CAAC;YAEF,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;YACxC,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;gBACzC,UAAU,CAAC,gBAAgB,CAAC,aAAa,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;gBAClG,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;gBAE1F,OAAO,GAAG,EAAE;oBACV,UAAU,CAAC,KAAK,EAAE,CAAC;gBACrB,CAAC,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7C,MAAM,oBAAoB,GAE2B;QACnD,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;QACnC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;KACpC,CAAC;IAEF,OAAO,CACL,6BACE,GAAG,EAAE,YAAY,KACb,CAAC,UAAU,IAAI;YACjB,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC;YAClD,cAAc,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;YACtC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAQ,CAAC;YACrC,MAAM,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;SAC/B,CAAC,EACF,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QAEpC,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,mBACN,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,MAAM,CAAC,OAAO,CAAC,EACf;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,cAAc,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;aACtD,EACD,SAAS,CACV,EACD,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,GAA6B,EAClC,IAAI,EAAC,QAAQ,iBACA,MAAM,sBACF,6BAA6B,KAC1C,6BAA6B,CAAC,oBAAoB,CAAC,IAEtD,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CAAC,CACxE;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI;QACvC,cAAc,IAAI,CACjB,oBAAC,OAAO,IACN,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,EACpC,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,EAC5C,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,GAAG,EAAE;gBACb,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC,GACD,CACH,CACG,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport {\n  GeneratedAnalyticsMetadataAppLayoutToolbarClose,\n  GeneratedAnalyticsMetadataAppLayoutToolbarOpen,\n} from '../../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../tooltip/internal.js';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  customSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n  variant?: 'default' | 'custom';\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    customSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n    variant = 'default',\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = (event: React.MouseEvent) => {\n    const suppressedTooltip = event.currentTarget.querySelector('button')?.dataset?.awsuiSuppressTooltip === 'true';\n    if (suppressedTooltip) {\n      return;\n    }\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isSuppressedOnTarget = eventWithRelatedTarget?.target?.dataset?.awsuiSuppressTooltip === 'true';\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      if (isSuppressedOnTarget) {\n        shouldShowTooltip = false;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        const controller = new AbortController();\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n        return () => {\n          controller.abort();\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  const triggerEventMetadata:\n    | GeneratedAnalyticsMetadataAppLayoutToolbarClose\n    | GeneratedAnalyticsMetadataAppLayoutToolbarOpen = {\n    action: selected ? 'close' : 'open',\n    detail: { label: { root: 'self' } },\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: event => handlePointerEnter(event),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles[variant],\n          {\n            [styles.selected]: selected,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n        {...getAnalyticsMetadataAttribute(triggerEventMetadata)}\n      >\n        {customSvg ?? ((iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />)}\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip\n          getTrack={() => containerRef.current}\n          className={testutilStyles['trigger-tooltip']}\n          content={tooltipValue}\n          onEscape={() => {\n            setShowTooltip(false);\n            setSupressTooltip(false);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/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, { Ref, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport {\n  GeneratedAnalyticsMetadataAppLayoutToolbarClose,\n  GeneratedAnalyticsMetadataAppLayoutToolbarOpen,\n} from '../../../../app-layout-toolbar/analytics-metadata/interfaces';\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\nimport Icon from '../../../../icon/internal';\nimport Tooltip from '../../../../tooltip/internal.js';\n\nimport testutilStyles from '../../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  customSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  disabled?: boolean;\n  /**\n   * Ovewrwrites any internal testIds when provided\n   */\n  testId?: string;\n  /**\n   * If button is selected. Used only for desktop and applies a selected class\n   */\n  selected?: boolean;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n\n  badge?: boolean;\n  /**\n   * If the button is expected to have a tooltip. When false it will not set the event listeners\n   *\n   * defaults to false\n   */\n  hasTooltip?: boolean;\n  /**\n   * This text allows for a customized tooltip.\n   *\n   * When falsy, the tooltip will parse the tooltip form the aria-lable\n   */\n  tooltipText?: string;\n  hasOpenDrawer?: boolean;\n  /**\n   * If the AppLayout is in mobile mode\n   * Used to determine if and where to render tooltips\n   */\n  isMobile?: boolean;\n  /**\n   * set to true if the trigger button was used to open the last active drawer\n   * this is also used to hide the tooltip should the focus be set programmatically\n   * on focus from a drawer close using this\n   */\n  isForPreviousActiveDrawer?: boolean;\n  /**\n   * if the trigger button is for the split panel\n   */\n  isForSplitPanel?: boolean;\n  tabIndex?: number | undefined;\n  variant?: 'default' | 'custom';\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    customSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    disabled = false,\n    badge,\n    selected = false,\n    hasTooltip = false,\n    tooltipText,\n    hasOpenDrawer = false,\n    isMobile = false,\n    isForPreviousActiveDrawer = false,\n    isForSplitPanel = false,\n    variant = 'default',\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const tooltipValue = tooltipText ? tooltipText : ariaLabel ? ariaLabel : '';\n  const [showTooltip, setShowTooltip] = useState<boolean>(false);\n  const [suppressTooltip, setSupressTooltip] = useState<boolean>(false);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation(); // Stop the event from propagating to the badge icon\n    setShowTooltip(false);\n    setSupressTooltip(true);\n    onClick(event);\n  };\n\n  const handleBlur = (keepSupressed = false) => {\n    setSupressTooltip(keepSupressed);\n    setShowTooltip(false);\n  };\n\n  const handlePointerEnter = (event: React.MouseEvent) => {\n    const suppressedTooltip = event.currentTarget.querySelector('button')?.dataset?.awsuiSuppressTooltip === 'true';\n    if (suppressedTooltip) {\n      return;\n    }\n    setSupressTooltip(false);\n    setShowTooltip(true);\n  };\n\n  /**\n   * Takes the drawer being closed and the data-shift-focus value from a close button on that drawer that persists\n   * on the event relatedTarget to determine not to show the tooltip\n   * @param event\n   */\n  const handleOnFocus = useCallback(\n    (event: FocusEvent) => {\n      let shouldShowTooltip = false;\n      const eventWithRelatedTarget = event as any;\n      const relatedTarget = eventWithRelatedTarget?.relatedTarget;\n      const isSuppressedOnTarget = eventWithRelatedTarget?.target?.dataset?.awsuiSuppressTooltip === 'true';\n      const isFromAnotherTrigger = relatedTarget?.dataset?.shiftFocus === 'awsui-layout-drawer-trigger';\n      if (\n        (isForSplitPanel && !!relatedTarget) || // relatedTarget is null when split panel is closed\n        (!isForSplitPanel &&\n          (isFromAnotherTrigger || // for key navigation from another trigger button\n            !isForPreviousActiveDrawer)) // for when the drawer was not opened recently\n      ) {\n        shouldShowTooltip = true;\n      }\n      if (isSuppressedOnTarget) {\n        shouldShowTooltip = false;\n      }\n      setSupressTooltip(!shouldShowTooltip);\n      setShowTooltip(true);\n    },\n    [\n      // To assert reference equality check\n      isForPreviousActiveDrawer,\n      isForSplitPanel,\n    ]\n  );\n\n  const tooltipVisible = useMemo(() => {\n    return (\n      hasTooltip &&\n      showTooltip &&\n      !suppressTooltip &&\n      !!containerRef?.current &&\n      tooltipValue &&\n      !(isMobile && hasOpenDrawer)\n    );\n  }, [hasTooltip, showTooltip, containerRef, tooltipValue, isMobile, hasOpenDrawer, suppressTooltip]);\n\n  useEffect(() => {\n    if (hasTooltip && tooltipValue) {\n      const close = () => {\n        setShowTooltip(false);\n        setSupressTooltip(false);\n      };\n\n      const shouldCloseTooltip = (event: PointerEvent) => {\n        if (event.target && containerRef && (containerRef.current as any)?.contains(event.target as HTMLElement)) {\n          return false;\n        }\n        return true;\n      };\n\n      const handlePointerDownEvent = (event: PointerEvent) => {\n        if (shouldCloseTooltip(event)) {\n          close();\n        }\n      };\n\n      const handleKeyDownEvent = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          close();\n        }\n      };\n\n      const wrapperDiv = containerRef.current;\n      if (wrapperDiv) {\n        const controller = new AbortController();\n        wrapperDiv.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n        wrapperDiv.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n        return () => {\n          controller.abort();\n        };\n      }\n    }\n  }, [containerRef, hasTooltip, tooltipValue]);\n\n  const triggerEventMetadata:\n    | GeneratedAnalyticsMetadataAppLayoutToolbarClose\n    | GeneratedAnalyticsMetadataAppLayoutToolbarOpen = {\n    action: selected ? 'close' : 'open',\n    detail: { label: { root: 'self' } },\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      {...(hasTooltip && {\n        onPointerEnter: event => handlePointerEnter(event),\n        onPointerLeave: () => handleBlur(true),\n        onFocus: e => handleOnFocus(e as any),\n        onBlur: () => handleBlur(true),\n      })}\n      className={styles['trigger-wrapper']}\n    >\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          styles[variant],\n          {\n            [styles.selected]: selected,\n            [testutilStyles['drawers-trigger-with-badge']]: badge,\n          },\n          className\n        )}\n        onClick={handleTriggerClick}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n        data-shift-focus=\"awsui-layout-drawer-trigger\"\n        data-awsui-motion-trigger=\"hover\"\n        data-awsui-motion-target=\"\"\n        {...getAnalyticsMetadataAttribute(triggerEventMetadata)}\n      >\n        {customSvg ?? ((iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />)}\n      </button>\n      {badge && <div className={styles.dot} />}\n      {tooltipVisible && (\n        <Tooltip\n          getTrack={() => containerRef.current}\n          className={testutilStyles['trigger-tooltip']}\n          content={tooltipValue}\n          onEscape={() => {\n            setShowTooltip(false);\n            setSupressTooltip(false);\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/lib/internal/template/attribute-editor/styles.css.js

@@ -1,20 +1,20 @@
 
     import './styles.scoped.css';
     export default {
-  "empty-appear": "awsui_empty-appear_n4qlp_2dgld_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_2dgld_1",
-  "root": "awsui_root_n4qlp_2dgld_35",
-  "empty": "awsui_empty_n4qlp_2dgld_13",
-  "row": "awsui_row_n4qlp_2dgld_78",
-  "divider": "awsui_divider_n4qlp_2dgld_82",
-  "row-control": "awsui_row-control_n4qlp_2dgld_87",
-  "field": "awsui_field_n4qlp_2dgld_91",
-  "additional-info": "awsui_additional-info_n4qlp_2dgld_95",
-  "add-row": "awsui_add-row_n4qlp_2dgld_142",
-  "add-button": "awsui_add-button_n4qlp_2dgld_146",
-  "remove-button-container": "awsui_remove-button-container_n4qlp_2dgld_150",
-  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_2dgld_154",
-  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_2dgld_158",
-  "remove-button": "awsui_remove-button_n4qlp_2dgld_150"
+  "empty-appear": "awsui_empty-appear_n4qlp_1dxko_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_1dxko_1",
+  "root": "awsui_root_n4qlp_1dxko_35",
+  "empty": "awsui_empty_n4qlp_1dxko_13",
+  "row": "awsui_row_n4qlp_1dxko_78",
+  "divider": "awsui_divider_n4qlp_1dxko_82",
+  "row-control": "awsui_row-control_n4qlp_1dxko_87",
+  "field": "awsui_field_n4qlp_1dxko_91",
+  "additional-info": "awsui_additional-info_n4qlp_1dxko_95",
+  "add-row": "awsui_add-row_n4qlp_1dxko_142",
+  "add-button": "awsui_add-button_n4qlp_1dxko_146",
+  "remove-button-container": "awsui_remove-button-container_n4qlp_1dxko_150",
+  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_1dxko_154",
+  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_1dxko_158",
+  "remove-button": "awsui_remove-button_n4qlp_1dxko_150"
 };
   

package/lib/internal/template/attribute-editor/styles.scoped.css

@@ -10,10 +10,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_empty-appear_n4qlp_2dgld_13:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_n4qlp_2dgld_1 var(--motion-duration-transition-show-paced-ljwltl, 180ms) var(--motion-easing-transition-show-paced-9j2ih7, ease-out);
+.awsui_empty-appear_n4qlp_1dxko_13:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_n4qlp_1dxko_1 var(--motion-duration-transition-show-paced-ljwltl, 180ms) var(--motion-easing-transition-show-paced-9j2ih7, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_n4qlp_2dgld_1 {
+@keyframes awsui_awsui-motion-fade-in_n4qlp_1dxko_1 {
   from {
     opacity: 0.2;
   }
@@ -22,17 +22,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_empty-appear_n4qlp_2dgld_13:not(#\9) {
+  .awsui_empty-appear_n4qlp_1dxko_13:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_empty-appear_n4qlp_2dgld_13:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_2dgld_13:not(#\9) {
+.awsui-motion-disabled .awsui_empty-appear_n4qlp_1dxko_13:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_1dxko_13:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_n4qlp_2dgld_35:not(#\9) {
+.awsui_root_n4qlp_1dxko_35:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -68,31 +68,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: start;
 }
 
-.awsui_empty_n4qlp_2dgld_13:not(#\9) {
+.awsui_empty_n4qlp_1dxko_13:not(#\9) {
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   color: var(--color-text-empty-y81uqw, #687078);
   grid-column: 1/-1;
 }
 
-.awsui_row_n4qlp_2dgld_78:not(#\9) {
+.awsui_row_n4qlp_1dxko_78:not(#\9) {
   display: contents;
 }
 
-.awsui_divider_n4qlp_2dgld_82:not(#\9) {
+.awsui_divider_n4qlp_1dxko_82:not(#\9) {
   grid-column: 1/-1;
   border-block-start: var(--border-divider-section-width-dlkb8v, 1px) solid var(--color-border-divider-default-diwd4w, #eaeded);
 }
 
-.awsui_row-control_n4qlp_2dgld_87:not(#\9) {
+.awsui_row-control_n4qlp_1dxko_87:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_field_n4qlp_2dgld_91:not(#\9) {
+.awsui_field_n4qlp_1dxko_91:not(#\9) {
   min-inline-size: 40px;
 }
 
-.awsui_additional-info_n4qlp_2dgld_95:not(#\9) {
+.awsui_additional-info_n4qlp_1dxko_95:not(#\9) {
   color: var(--color-text-form-secondary-wt0md2, #687078);
   font-size: var(--font-size-body-s-89y7qg, 12px);
   line-height: var(--line-height-body-s-gako33, 16px);
@@ -102,11 +102,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xxs-3o1yoq, 4px);
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9) {
+.awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9) {
   text-underline-offset: 0.3em;
   text-decoration-thickness: var(--font-decoration-thickness-link-n3u7wl, 1px);
   text-decoration-style: var(--font-decoration-style-link-lw1s9g, solid);
-  color: var(--awsui-style-color-default-esndbs, var(--color-text-link-default-qabnuk, #0073bb));
+  color: var(--awsui-style-color-default-66120l, var(--color-text-link-default-qabnuk, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -117,50 +117,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9) {
+  .awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9) {
+.awsui-motion-disabled .awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+  color: var(--awsui-style-color-hover-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):focus {
+.awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):focus {
   outline: none;
 }
-.awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):active {
-  color: var(--awsui-style-color-active-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+.awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):active {
+  color: var(--awsui-style-color-active-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):active, .awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):focus, .awsui_additional-info_n4qlp_2dgld_95 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):active, .awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):focus, .awsui_additional-info_n4qlp_1dxko_95 > a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-decoration-hover-opkmr8, currentColor);
 }
 
-.awsui_add-row_n4qlp_2dgld_142:not(#\9) {
+.awsui_add-row_n4qlp_1dxko_142:not(#\9) {
   grid-column: 1/-1;
 }
 
-.awsui_add-button_n4qlp_2dgld_146:not(#\9) {
+.awsui_add-button_n4qlp_1dxko_146:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_remove-button-container_n4qlp_2dgld_150:not(#\9) {
+.awsui_remove-button-container_n4qlp_1dxko_150:not(#\9) {
   display: inline-block;
 }
 
-.awsui_remove-button-field-padding_n4qlp_2dgld_154:not(#\9) {
+.awsui_remove-button-field-padding_n4qlp_1dxko_154:not(#\9) {
   padding-block-start: calc(var(--space-xxs-3o1yoq, 4px) + var(--line-height-body-m-5xw6xo, 22px));
 }
 
-.awsui_remove-button-own-row_n4qlp_2dgld_158:not(#\9) {
+.awsui_remove-button-own-row_n4qlp_1dxko_158:not(#\9) {
   justify-self: end;
 }
 
-.awsui_remove-button_n4qlp_2dgld_150:not(#\9) {
+.awsui_remove-button_n4qlp_1dxko_150:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/attribute-editor/styles.selectors.js

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "empty-appear": "awsui_empty-appear_n4qlp_2dgld_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_2dgld_1",
-  "root": "awsui_root_n4qlp_2dgld_35",
-  "empty": "awsui_empty_n4qlp_2dgld_13",
-  "row": "awsui_row_n4qlp_2dgld_78",
-  "divider": "awsui_divider_n4qlp_2dgld_82",
-  "row-control": "awsui_row-control_n4qlp_2dgld_87",
-  "field": "awsui_field_n4qlp_2dgld_91",
-  "additional-info": "awsui_additional-info_n4qlp_2dgld_95",
-  "add-row": "awsui_add-row_n4qlp_2dgld_142",
-  "add-button": "awsui_add-button_n4qlp_2dgld_146",
-  "remove-button-container": "awsui_remove-button-container_n4qlp_2dgld_150",
-  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_2dgld_154",
-  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_2dgld_158",
-  "remove-button": "awsui_remove-button_n4qlp_2dgld_150"
+  "empty-appear": "awsui_empty-appear_n4qlp_1dxko_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_1dxko_1",
+  "root": "awsui_root_n4qlp_1dxko_35",
+  "empty": "awsui_empty_n4qlp_1dxko_13",
+  "row": "awsui_row_n4qlp_1dxko_78",
+  "divider": "awsui_divider_n4qlp_1dxko_82",
+  "row-control": "awsui_row-control_n4qlp_1dxko_87",
+  "field": "awsui_field_n4qlp_1dxko_91",
+  "additional-info": "awsui_additional-info_n4qlp_1dxko_95",
+  "add-row": "awsui_add-row_n4qlp_1dxko_142",
+  "add-button": "awsui_add-button_n4qlp_1dxko_146",
+  "remove-button-container": "awsui_remove-button-container_n4qlp_1dxko_150",
+  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_1dxko_154",
+  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_1dxko_158",
+  "remove-button": "awsui_remove-button_n4qlp_1dxko_150"
 };
   

package/lib/internal/template/breadcrumb-group/all-items-dropdown.js

@@ -40,8 +40,8 @@ const getDropdownTrigger = (currentPage) => ({ ariaLabel, triggerRef, testUtilsC
     return (React.createElement("button", { ref: triggerRef, ...metadataAttributes, className: clsx(styles['collapsed-button'], testUtilsClass), onClick: event => {
             event.preventDefault();
             onClick();
-        }, "aria-expanded": isOpen, "aria-haspopup": true, "aria-label": ariaLabel, formAction: "none" },
-        React.createElement(InternalIcon, { name: "caret-down-filled", className: spinWhenOpen(styles, 'button-icon', isOpen) }),
+        }, "aria-expanded": isOpen, "aria-haspopup": true, "aria-label": ariaLabel, formAction: "none", "data-awsui-motion-trigger": "hover" },
+        React.createElement(InternalIcon, { name: "caret-down-filled", className: spinWhenOpen(styles, 'button-icon', isOpen), nativeAttributes: { 'data-awsui-motion-target': '' } }),
         React.createElement("span", null, currentPage)));
 };
 //# sourceMappingURL=all-items-dropdown.js.map

package/lib/internal/template/breadcrumb-group/all-items-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-items-dropdown.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/all-items-dropdown.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, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { CustomTriggerProps } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_FUNNEL_KEY, DATA_ATTR_RESOURCE_TYPE, FUNNEL_KEY_FUNNEL_NAME } from '../internal/analytics/selectors';\nimport { spinWhenOpen } from '../internal/styles/motion/utils';\nimport { CancelableEventHandler } from '../types/events';\nimport { BreadcrumbGroupProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface FullCollapsedDropdownProps {\n  items: ReadonlyArray<BreadcrumbGroupProps.Item>;\n  onItemClick: CancelableEventHandler<{ id: string }>;\n  onItemFollow: CancelableEventHandler<{ id: string }>;\n}\n\nconst metadataTypeAttribute = {\n  [DATA_ATTR_RESOURCE_TYPE]: 'true',\n};\n\nexport const AllItemsDropdown = ({ items, onItemClick, onItemFollow }: FullCollapsedDropdownProps) => (\n  <>\n    <InternalButtonDropdown\n      items={items.map((item, index) => {\n        const isCurrentBreadcrumb = index === items.length - 1;\n        return {\n          id: index.toString(),\n          text: item.text,\n          href: isCurrentBreadcrumb ? undefined : item.href,\n          isCurrentBreadcrumb,\n        };\n      })}\n      customTriggerBuilder={getDropdownTrigger(items[items.length - 1]?.text)}\n      linkStyle={true}\n      fullWidth={true}\n      onItemClick={onItemClick}\n      onItemFollow={onItemFollow}\n      analyticsMetadataTransformer={metadata => {\n        if (metadata.detail?.id) {\n          delete metadata.detail.id;\n        }\n        if (metadata.detail?.position) {\n          metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n        }\n        return metadata;\n      }}\n    />\n    {/* Second breadcrumb item is tagged as \"resource type\" */}\n    {items.length > 1 && (\n      <span className={styles.hidden} {...metadataTypeAttribute}>\n        {items[1].text}\n      </span>\n    )}\n  </>\n);\nconst getDropdownTrigger =\n  (currentPage: string) =>\n  ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n    const metadataAttributes = {\n      [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_FUNNEL_NAME,\n    };\n    return (\n      <button\n        ref={triggerRef as Ref<HTMLButtonElement>}\n        {...metadataAttributes}\n        className={clsx(styles['collapsed-button'], testUtilsClass)}\n        onClick={event => {\n          event.preventDefault();\n          onClick();\n        }}\n        aria-expanded={isOpen}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        formAction=\"none\"\n      >\n        <InternalIcon name=\"caret-down-filled\" className={spinWhenOpen(styles, 'button-icon', isOpen)} />\n        <span>{currentPage}</span>\n      </button>\n    );\n  };\n"]}
+{"version":3,"file":"all-items-dropdown.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/all-items-dropdown.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, { Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { CustomTriggerProps } from '../button-dropdown/interfaces';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_FUNNEL_KEY, DATA_ATTR_RESOURCE_TYPE, FUNNEL_KEY_FUNNEL_NAME } from '../internal/analytics/selectors';\nimport { spinWhenOpen } from '../internal/styles/motion/utils';\nimport { CancelableEventHandler } from '../types/events';\nimport { BreadcrumbGroupProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface FullCollapsedDropdownProps {\n  items: ReadonlyArray<BreadcrumbGroupProps.Item>;\n  onItemClick: CancelableEventHandler<{ id: string }>;\n  onItemFollow: CancelableEventHandler<{ id: string }>;\n}\n\nconst metadataTypeAttribute = {\n  [DATA_ATTR_RESOURCE_TYPE]: 'true',\n};\n\nexport const AllItemsDropdown = ({ items, onItemClick, onItemFollow }: FullCollapsedDropdownProps) => (\n  <>\n    <InternalButtonDropdown\n      items={items.map((item, index) => {\n        const isCurrentBreadcrumb = index === items.length - 1;\n        return {\n          id: index.toString(),\n          text: item.text,\n          href: isCurrentBreadcrumb ? undefined : item.href,\n          isCurrentBreadcrumb,\n        };\n      })}\n      customTriggerBuilder={getDropdownTrigger(items[items.length - 1]?.text)}\n      linkStyle={true}\n      fullWidth={true}\n      onItemClick={onItemClick}\n      onItemFollow={onItemFollow}\n      analyticsMetadataTransformer={metadata => {\n        if (metadata.detail?.id) {\n          delete metadata.detail.id;\n        }\n        if (metadata.detail?.position) {\n          metadata.detail.position = `${parseInt(metadata.detail.position as string, 10) + 1}`;\n        }\n        return metadata;\n      }}\n    />\n    {/* Second breadcrumb item is tagged as \"resource type\" */}\n    {items.length > 1 && (\n      <span className={styles.hidden} {...metadataTypeAttribute}>\n        {items[1].text}\n      </span>\n    )}\n  </>\n);\nconst getDropdownTrigger =\n  (currentPage: string) =>\n  ({ ariaLabel, triggerRef, testUtilsClass, isOpen, onClick }: CustomTriggerProps) => {\n    const metadataAttributes = {\n      [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_FUNNEL_NAME,\n    };\n    return (\n      <button\n        ref={triggerRef as Ref<HTMLButtonElement>}\n        {...metadataAttributes}\n        className={clsx(styles['collapsed-button'], testUtilsClass)}\n        onClick={event => {\n          event.preventDefault();\n          onClick();\n        }}\n        aria-expanded={isOpen}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        formAction=\"none\"\n        data-awsui-motion-trigger=\"hover\"\n      >\n        <InternalIcon\n          name=\"caret-down-filled\"\n          className={spinWhenOpen(styles, 'button-icon', isOpen)}\n          nativeAttributes={{ 'data-awsui-motion-target': '' }}\n        />\n        <span>{currentPage}</span>\n      </button>\n    );\n  };\n"]}

package/lib/internal/template/breadcrumb-group/item/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_1kosq_w8bqw_9",
-  "breadcrumb": "awsui_breadcrumb_1kosq_w8bqw_13",
-  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_w8bqw_14",
-  "icon": "awsui_icon_1kosq_w8bqw_17",
-  "anchor": "awsui_anchor_1kosq_w8bqw_23",
-  "text": "awsui_text_1kosq_w8bqw_71",
-  "last": "awsui_last_1kosq_w8bqw_90"
+  "link": "awsui_link_1kosq_1cgda_9",
+  "breadcrumb": "awsui_breadcrumb_1kosq_1cgda_13",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_1cgda_14",
+  "icon": "awsui_icon_1kosq_1cgda_17",
+  "anchor": "awsui_anchor_1kosq_1cgda_23",
+  "text": "awsui_text_1kosq_1cgda_71",
+  "last": "awsui_last_1kosq_1cgda_90"
 };
   

package/lib/internal/template/breadcrumb-group/item/styles.scoped.css

@@ -6,28 +6,28 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_link_1kosq_w8bqw_9:not(#\9):after {
+.awsui_link_1kosq_1cgda_9:not(#\9):after {
   display: none;
 }
 
-.awsui_breadcrumb_1kosq_w8bqw_13:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14:not(#\9) {
   display: flex;
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_icon_1kosq_w8bqw_17:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_icon_1kosq_w8bqw_17:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_icon_1kosq_1cgda_17:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_icon_1kosq_1cgda_17:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-xs-m9b7jf, 8px);
   color: var(--color-text-breadcrumb-icon-bkucca, #687078);
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9) {
   min-inline-size: 0;
   overflow: hidden;
   text-underline-offset: 0.25em;
   text-decoration-thickness: var(--font-decoration-thickness-link-n3u7wl, 1px);
   text-decoration-style: var(--font-decoration-style-link-lw1s9g, solid);
-  color: var(--awsui-style-color-default-esndbs, var(--color-text-link-default-qabnuk, #0073bb));
+  color: var(--awsui-style-color-default-66120l, var(--color-text-link-default-qabnuk, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -38,42 +38,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-s8g1xv, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9),
-  .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9) {
+  .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9),
+  .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9) {
+.awsui-motion-disabled .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):hover,
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):hover {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):hover,
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):hover {
   cursor: pointer;
-  color: var(--awsui-style-color-hover-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+  color: var(--awsui-style-color-hover-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus,
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus,
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus {
   outline: none;
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):active,
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):active {
-  color: var(--awsui-style-color-active-esndbs, var(--color-text-link-hover-n1r6g0, #0a4a74));
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):active,
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):active {
+  color: var(--awsui-style-color-active-66120l, var(--color-text-link-hover-n1r6g0, #0a4a74));
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):active, .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus, .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):hover {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):active, .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus, .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: var(--color-text-link-decoration-hover-opkmr8, currentColor);
 }
-.awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23 > .awsui_text_1kosq_w8bqw_71:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23 > .awsui_text_1kosq_w8bqw_71:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23 > .awsui_text_1kosq_1cgda_71:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23 > .awsui_text_1kosq_1cgda_71:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
-body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_w8bqw_13 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus,
-body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .awsui_anchor_1kosq_w8bqw_23:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_1cgda_13 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_1cgda_14 > .awsui_anchor_1kosq_1cgda_23:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-wn9h6t, 5px auto Highlight);
   outline-offset: 2px;
@@ -84,12 +84,12 @@ body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_w8bqw_14 > .aw
   border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-ggjunl, 0px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_breadcrumb_1kosq_w8bqw_13.awsui_last_1kosq_w8bqw_90 > .awsui_icon_1kosq_w8bqw_17:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14.awsui_last_1kosq_w8bqw_90 > .awsui_icon_1kosq_w8bqw_17:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13.awsui_last_1kosq_1cgda_90 > .awsui_icon_1kosq_1cgda_17:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14.awsui_last_1kosq_1cgda_90 > .awsui_icon_1kosq_1cgda_17:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb_1kosq_w8bqw_13.awsui_last_1kosq_w8bqw_90 > .awsui_anchor_1kosq_w8bqw_23:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_w8bqw_14.awsui_last_1kosq_w8bqw_90 > .awsui_anchor_1kosq_w8bqw_23:not(#\9) {
+.awsui_breadcrumb_1kosq_1cgda_13.awsui_last_1kosq_1cgda_90 > .awsui_anchor_1kosq_1cgda_23:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_1cgda_14.awsui_last_1kosq_1cgda_90 > .awsui_anchor_1kosq_1cgda_23:not(#\9) {
   color: var(--color-text-breadcrumb-current-iukxuf, #687078);
   font-weight: var(--font-weight-breadcrumb-current-7sfze6, 700);
   text-decoration: none;

package/lib/internal/template/breadcrumb-group/item/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_w8bqw_9",
-  "breadcrumb": "awsui_breadcrumb_1kosq_w8bqw_13",
-  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_w8bqw_14",
-  "icon": "awsui_icon_1kosq_w8bqw_17",
-  "anchor": "awsui_anchor_1kosq_w8bqw_23",
-  "text": "awsui_text_1kosq_w8bqw_71",
-  "last": "awsui_last_1kosq_w8bqw_90"
+  "link": "awsui_link_1kosq_1cgda_9",
+  "breadcrumb": "awsui_breadcrumb_1kosq_1cgda_13",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_1cgda_14",
+  "icon": "awsui_icon_1kosq_1cgda_17",
+  "anchor": "awsui_anchor_1kosq_1cgda_23",
+  "text": "awsui_text_1kosq_1cgda_71",
+  "last": "awsui_last_1kosq_1cgda_90"
 };
   

package/lib/internal/template/button/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAa/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,GAAG,0BAA0B,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc;cAxBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;YACxB,OAAO;sBACG,MAAM;kBACV,MAAM;iBACP,SAAS,CAAC,IAAI;kBACb,OAAO;yCACgB,OAAO;cAClC,MAAM;6BACS,OAAO;qCACC,OAAO;gBAC5B,OAAO;sBACD,eAAe;sEA4TlC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/button/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAW3D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAa/C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC/D,OAAO,CAAC,EACJ,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC,GAAG,0BAA0B,CAAC;AAG/B,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc;cAxBrB,WAAW,CAAC,SAAS,CAAC,GACtB,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,4BAA4B;YACxB,OAAO;sBACG,MAAM;kBACV,MAAM;iBACP,SAAS,CAAC,IAAI;kBACb,OAAO;yCACgB,OAAO;cAClC,MAAM;6BACS,OAAO;qCACC,OAAO;gBAC5B,OAAO;sBACD,eAAe;sEA8TlC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/button/internal.js

@@ -125,6 +125,8 @@ export const InternalButton = React.forwardRef(({ children, iconName, __iconClas
         title: __title !== null && __title !== void 0 ? __title : ariaLabel,
         className: buttonClass,
         onClick: handleClick,
+        'data-awsui-motion-trigger': 'hover',
+        'data-awsui-motion-target': '',
         [DATA_ATTR_FUNNEL_VALUE]: uniqueId,
         ...getAnalyticsMetadataAttribute(analyticsMetadata),
         ...getAnalyticsLabelAttribute(shouldHaveContent ? `.${analyticsSelectors.label}` : ''),