@cloudscape-design/components 3.0.685 → 3.0.686

package/button-dropdown/item-element/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/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 { ItemProps } from '../interfaces';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport styles from './styles.css.js';\nimport Tooltip from '../tooltip';\n\nimport { ButtonDropdownProps } from '../interfaces';\nimport { getItemTarget } from '../utils/utils';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport { getMenuItemProps, getMenuItemCheckboxProps } from '../utils/menu-item';\n\nconst ItemElement = ({\n  item,\n  disabled,\n  onItemActivate,\n  highlighted,\n  highlightItem,\n  showDivider,\n  hasCategoryHeader,\n  isKeyboardHighlighted = false,\n  variant = 'normal',\n}: ItemProps) => {\n  const isLink = isLinkItem(item);\n  const isCheckbox = isCheckboxItem(item);\n  const onClick = (event: React.MouseEvent) => {\n    // Stop propagation to parent node and handle event exclusively in here. This ensures\n    // that no group will interfere with the default behavior of links\n    event.stopPropagation();\n    if (!isLink) {\n      event.preventDefault();\n    }\n    if (!disabled) {\n      onItemActivate(item, event);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  return (\n    <li\n      className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles.disabled]: disabled,\n        [styles['has-category-header']]: hasCategoryHeader,\n        [styles['has-checkmark']]: isCheckbox,\n        [styles['show-divider']]: showDivider,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      data-description={item.description}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      <MenuItem item={item} disabled={disabled} highlighted={highlighted} />\n    </li>\n  );\n};\n\nexport type InternalItemProps = ButtonDropdownProps.Item & {\n  badge?: boolean;\n};\n\nexport type InternalCheckboxItemProps = ButtonDropdownProps.CheckboxItem & {\n  badge?: boolean;\n};\n\ninterface MenuItemProps {\n  item: InternalItemProps | InternalCheckboxItemProps;\n  disabled: boolean;\n  highlighted: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted }: MenuItemProps) {\n  const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n  const isCheckbox = isCheckboxItem(item);\n\n  useEffect(() => {\n    if (highlighted && menuItemRef.current) {\n      menuItemRef.current.focus();\n    }\n  }, [highlighted]);\n\n  const isDisabledWithReason = disabled && item.disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n    className: styles['menu-item'],\n    lang: item.lang,\n    ref: menuItemRef,\n    // We are using the roving tabindex technique to manage the focus state of the dropdown.\n    // The current element will always have tabindex=0 which means that it can be tabbed to,\n    // while all other items have tabindex=-1 so we can focus them when necessary.\n    tabIndex: highlighted ? 0 : -1,\n    ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n    ...(isDisabledWithReason ? targetProps : {}),\n  };\n\n  const menuItem = isLinkItem(item) ? (\n    <a\n      {...menuItemProps}\n      href={!disabled ? item.href : undefined}\n      target={getItemTarget(item)}\n      rel={item.external ? 'noopener noreferrer' : undefined}\n    >\n      <MenuItemContent item={item} disabled={disabled} />\n    </a>\n  ) : (\n    <span {...menuItemProps}>\n      <MenuItemContent item={item} disabled={disabled} />\n    </span>\n  );\n\n  const { position } = useDropdownContext();\n  const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n  return isDisabledWithReason ? (\n    <Tooltip content={item.disabledReason} position={tooltipPosition}>\n      {menuItem}\n      {descriptionEl}\n    </Tooltip>\n  ) : (\n    menuItem\n  );\n}\n\nconst MenuItemContent = ({\n  item,\n  disabled,\n}: {\n  item: InternalItemProps | InternalCheckboxItemProps;\n  disabled: boolean;\n}) => {\n  const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n  const hasExternal = isLinkItem(item) && item.external;\n  const isCheckbox = isCheckboxItem(item);\n  return (\n    <>\n      {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n      {hasIcon && (\n        <MenuItemIcon\n          name={item.iconName}\n          url={item.iconUrl}\n          svg={item.iconSvg}\n          alt={item.iconAlt}\n          badge={item.badge}\n        />\n      )}\n      {item.text}\n      {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n    </>\n  );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n  <span className={styles.icon}>\n    <InternalIcon {...props} />\n  </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n  const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n  return (\n    <span\n      className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n      aria-hidden=\"true\"\n      style={{ visibility: checked ? 'visible' : 'hidden' }}\n    >\n      {checkmark}\n    </span>\n  );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n  const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n  return (\n    <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n      {icon}\n    </span>\n  );\n};\n\nexport default ItemElement;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,OAAO,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAC/E,OAAO,YAAmC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,MAAM,WAAW,GAAG,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,qBAAqB,GAAG,KAAK,EAC7B,OAAO,GAAG,QAAQ,GACR,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC1C,qFAAqF;QACrF,kEAAkE;QAClE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,EAAE;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,CAAC,QAAQ,EAAE;YACb,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC7B;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW;YACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;YACrC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,WAAW;YACrC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,qBAAqB;SAC9C,CAAC,EACF,IAAI,EAAC,cAAc,iBACN,IAAI,CAAC,EAAE,sBACF,IAAI,CAAC,WAAW,EAClC,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,EACrB,YAAY,EAAE,OAAO;QAErB,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CACnE,CACN,CAAC;AACJ,CAAC,CAAC;AAgBF,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAiB;IAC9D,MAAM,WAAW,GAAG,MAAM,CAA+C,IAAI,CAAC,CAAC;IAC/E,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,EAAE;YACtC,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,oBAAoB,GAAG,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC;IAC7D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjF,MAAM,aAAa,iCACjB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,WAAW;QAChB,wFAAwF;QACxF,wFAAwF;QACxF,8EAA8E;QAC9E,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAC3B,CAAC,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,GAC7G,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAClC,2CACM,aAAa,IACjB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACvC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjD,CACL,CAAC,CAAC,CAAC,CACF,8CAAU,aAAa;QACrB,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACR,CAAC;IAEF,MAAM,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAG,QAAQ,KAAK,aAAa,IAAI,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACjG,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAC5B,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QACxG,QAAQ;QACR,aAAa,CACN,CACX,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACtD,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CACL;QACG,UAAU,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAC9E,OAAO,IAAI,CACV,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH;QACA,IAAI,CAAC,IAAI;QACT,WAAW,IAAI,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAI,CAC1F,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,CACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;IAC1B,oBAAC,YAAY,oBAAK,KAAK,EAAI,CACtB,CACR,CAAC;AAEF,4EAA4E;AAC5E,6FAA6F;AAC7F,4BAA4B;AAC5B,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA2C,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAC3F,OAAO,CACL,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBACnE,MAAM,EAClB,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAEpD,SAAS,CACL,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA6C,EAAE,EAAE;IAC1F,MAAM,IAAI,GAAG,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,UAAU,GAAG,CAAC;IACzF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBAAc,SAAS,IACjG,IAAI,CACA,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","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 { ItemProps } from '../interfaces';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport styles from './styles.css.js';\nimport Tooltip from '../tooltip';\n\nimport { ButtonDropdownProps } from '../interfaces';\nimport { getItemTarget } from '../utils/utils';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport { getMenuItemProps, getMenuItemCheckboxProps } from '../utils/menu-item';\n\nconst ItemElement = ({\n  item,\n  disabled,\n  onItemActivate,\n  highlighted,\n  highlightItem,\n  showDivider,\n  hasCategoryHeader,\n  isKeyboardHighlighted = false,\n  variant = 'normal',\n}: ItemProps) => {\n  const isLink = isLinkItem(item);\n  const isCheckbox = isCheckboxItem(item);\n  const onClick = (event: React.MouseEvent) => {\n    // Stop propagation to parent node and handle event exclusively in here. This ensures\n    // that no group will interfere with the default behavior of links\n    event.stopPropagation();\n    if (!isLink) {\n      event.preventDefault();\n    }\n    if (!disabled) {\n      onItemActivate(item, event);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  return (\n    <li\n      className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles.disabled]: disabled,\n        [styles['has-category-header']]: hasCategoryHeader,\n        [styles['has-checkmark']]: isCheckbox,\n        [styles['show-divider']]: showDivider,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      data-description={item.description}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      <MenuItem item={item} disabled={disabled} highlighted={highlighted} />\n    </li>\n  );\n};\n\nexport type InternalItemProps = ButtonDropdownProps.Item & {\n  badge?: boolean;\n};\n\nexport type InternalCheckboxItemProps = ButtonDropdownProps.CheckboxItem & {\n  badge?: boolean;\n};\n\ninterface MenuItemProps {\n  item: InternalItemProps | InternalCheckboxItemProps;\n  disabled: boolean;\n  highlighted: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted }: MenuItemProps) {\n  const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n  const isCheckbox = isCheckboxItem(item);\n\n  useEffect(() => {\n    if (highlighted && menuItemRef.current) {\n      menuItemRef.current.focus();\n    }\n  }, [highlighted]);\n\n  const isDisabledWithReason = disabled && item.disabledReason;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n    className: styles['menu-item'],\n    lang: item.lang,\n    ref: menuItemRef,\n    // We are using the roving tabindex technique to manage the focus state of the dropdown.\n    // The current element will always have tabindex=0 which means that it can be tabbed to,\n    // while all other items have tabindex=-1 so we can focus them when necessary.\n    tabIndex: highlighted ? 0 : -1,\n    ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n    ...(isDisabledWithReason ? targetProps : {}),\n  };\n\n  const menuItem = isLinkItem(item) ? (\n    <a\n      {...menuItemProps}\n      href={!disabled ? item.href : undefined}\n      target={getItemTarget(item)}\n      rel={item.external ? 'noopener noreferrer' : undefined}\n    >\n      <MenuItemContent item={item} disabled={disabled} />\n    </a>\n  ) : (\n    <span {...menuItemProps}>\n      <MenuItemContent item={item} disabled={disabled} />\n    </span>\n  );\n\n  const { position } = useDropdownContext();\n  const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n  return isDisabledWithReason ? (\n    <Tooltip content={item.disabledReason} position={tooltipPosition} className={styles['item-tooltip-wrapper']}>\n      {menuItem}\n      {descriptionEl}\n    </Tooltip>\n  ) : (\n    menuItem\n  );\n}\n\nconst MenuItemContent = ({\n  item,\n  disabled,\n}: {\n  item: InternalItemProps | InternalCheckboxItemProps;\n  disabled: boolean;\n}) => {\n  const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n  const hasExternal = isLinkItem(item) && item.external;\n  const isCheckbox = isCheckboxItem(item);\n  return (\n    <>\n      {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n      {hasIcon && (\n        <MenuItemIcon\n          name={item.iconName}\n          url={item.iconUrl}\n          svg={item.iconSvg}\n          alt={item.iconAlt}\n          badge={item.badge}\n        />\n      )}\n      {item.text}\n      {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n    </>\n  );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n  <span className={styles.icon}>\n    <InternalIcon {...props} />\n  </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n  const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n  return (\n    <span\n      className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n      aria-hidden=\"true\"\n      style={{ visibility: checked ? 'visible' : 'hidden' }}\n    >\n      {checkmark}\n    </span>\n  );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n  const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n  return (\n    <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n      {icon}\n    </span>\n  );\n};\n\nexport default ItemElement;\n"]}

package/button-dropdown/item-element/styles.css.js

@@ -1,16 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_1l8wd_97",
-  "disabled": "awsui_disabled_93a1u_1l8wd_109",
-  "show-divider": "awsui_show-divider_93a1u_1l8wd_116",
-  "highlighted": "awsui_highlighted_93a1u_1l8wd_119",
-  "is-focused": "awsui_is-focused_93a1u_1l8wd_134",
-  "menu-item": "awsui_menu-item_93a1u_1l8wd_139",
-  "has-category-header": "awsui_has-category-header_93a1u_1l8wd_154",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1l8wd_154",
-  "icon": "awsui_icon_93a1u_1l8wd_158",
-  "checkmark": "awsui_checkmark_93a1u_1l8wd_162",
-  "external-icon": "awsui_external-icon_93a1u_1l8wd_169"
+  "item-element": "awsui_item-element_93a1u_16wwy_97",
+  "disabled": "awsui_disabled_93a1u_16wwy_109",
+  "show-divider": "awsui_show-divider_93a1u_16wwy_116",
+  "highlighted": "awsui_highlighted_93a1u_16wwy_119",
+  "is-focused": "awsui_is-focused_93a1u_16wwy_134",
+  "menu-item": "awsui_menu-item_93a1u_16wwy_139",
+  "has-category-header": "awsui_has-category-header_93a1u_16wwy_154",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_16wwy_154",
+  "has-checkmark": "awsui_has-checkmark_93a1u_16wwy_154",
+  "icon": "awsui_icon_93a1u_16wwy_158",
+  "checkmark": "awsui_checkmark_93a1u_16wwy_162",
+  "external-icon": "awsui_external-icon_93a1u_16wwy_169"
 };
   

package/button-dropdown/item-element/styles.scoped.css

@@ -94,7 +94,7 @@ 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_item-element_93a1u_1l8wd_97:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-yel47s, 2px) solid transparent;
@@ -106,17 +106,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-field-width-09w7vk, 2px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_1l8wd_97.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97.awsui_disabled_93a1u_16wwy_109:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-6oq3n6, #9ba7b6);
 }
-.awsui_item-element_93a1u_1l8wd_97:not(#\9):first-child {
+.awsui_item-element_93a1u_16wwy_97:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_1l8wd_97.awsui_show-divider_93a1u_1l8wd_116:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97.awsui_show-divider_93a1u_16wwy_116:not(#\9) {
   border-block-end: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
 }
-.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-a51hdb, #000716);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-swsulg, #f4f4f4);
@@ -126,17 +126,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-05df9h, 8px);
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119.awsui_disabled_93a1u_16wwy_109:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-f2joj8, #9ba7b6);
   border-color: var(--color-border-dropdown-item-dimmed-hover-xdu0hf, #7d8998);
   background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
 }
-.awsui_item-element_93a1u_1l8wd_97.awsui_highlighted_93a1u_1l8wd_119.awsui_is-focused_93a1u_1l8wd_134:not(#\9) {
+.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119.awsui_is-focused_93a1u_16wwy_134:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-5hbaf3, #414d5c);
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_menu-item_93a1u_1l8wd_139:not(#\9) {
+.awsui_menu-item_93a1u_16wwy_139:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -148,24 +148,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_1l8wd_139:not(#\9):focus {
+.awsui_menu-item_93a1u_16wwy_139:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_1l8wd_154 > .awsui_menu-item_93a1u_1l8wd_139:not(#\9), .awsui_has-category-header_93a1u_1l8wd_154:not(#\9):not(.awsui_has-checkmark_93a1u_1l8wd_154) > span > .awsui_menu-item_93a1u_1l8wd_139 {
+.awsui_has-category-header_93a1u_16wwy_154 > .awsui_menu-item_93a1u_16wwy_139:not(#\9), .awsui_has-category-header_93a1u_16wwy_154 > .awsui_item-tooltip-wrapper_93a1u_16wwy_154 > .awsui_menu-item_93a1u_16wwy_139:not(#\9), .awsui_has-category-header_93a1u_16wwy_154:not(#\9):not(.awsui_has-checkmark_93a1u_16wwy_154) > span > .awsui_menu-item_93a1u_16wwy_139 {
   padding-inline-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-l-t419sm, 20px));
 }
 
-.awsui_icon_93a1u_1l8wd_158:not(#\9) {
+.awsui_icon_93a1u_16wwy_158:not(#\9) {
   padding-inline-end: var(--space-xxs-p8yyaw, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_1l8wd_158.awsui_checkmark_93a1u_1l8wd_162:not(#\9) {
+.awsui_icon_93a1u_16wwy_158.awsui_checkmark_93a1u_16wwy_162:not(#\9) {
   color: var(--color-text-status-info-ahz8zp, #0972d3);
 }
-.awsui_icon_93a1u_1l8wd_158.awsui_disabled_93a1u_1l8wd_109:not(#\9) {
+.awsui_icon_93a1u_16wwy_158.awsui_disabled_93a1u_16wwy_109:not(#\9) {
   color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
 }
 
-.awsui_external-icon_93a1u_1l8wd_169:not(#\9) {
+.awsui_external-icon_93a1u_16wwy_169:not(#\9) {
   margin-inline-start: var(--space-xxs-p8yyaw, 4px);
 }

package/button-dropdown/item-element/styles.selectors.js

@@ -2,16 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "item-element": "awsui_item-element_93a1u_1l8wd_97",
-  "disabled": "awsui_disabled_93a1u_1l8wd_109",
-  "show-divider": "awsui_show-divider_93a1u_1l8wd_116",
-  "highlighted": "awsui_highlighted_93a1u_1l8wd_119",
-  "is-focused": "awsui_is-focused_93a1u_1l8wd_134",
-  "menu-item": "awsui_menu-item_93a1u_1l8wd_139",
-  "has-category-header": "awsui_has-category-header_93a1u_1l8wd_154",
-  "has-checkmark": "awsui_has-checkmark_93a1u_1l8wd_154",
-  "icon": "awsui_icon_93a1u_1l8wd_158",
-  "checkmark": "awsui_checkmark_93a1u_1l8wd_162",
-  "external-icon": "awsui_external-icon_93a1u_1l8wd_169"
+  "item-element": "awsui_item-element_93a1u_16wwy_97",
+  "disabled": "awsui_disabled_93a1u_16wwy_109",
+  "show-divider": "awsui_show-divider_93a1u_16wwy_116",
+  "highlighted": "awsui_highlighted_93a1u_16wwy_119",
+  "is-focused": "awsui_is-focused_93a1u_16wwy_134",
+  "menu-item": "awsui_menu-item_93a1u_16wwy_139",
+  "has-category-header": "awsui_has-category-header_93a1u_16wwy_154",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_16wwy_154",
+  "has-checkmark": "awsui_has-checkmark_93a1u_16wwy_154",
+  "icon": "awsui_icon_93a1u_16wwy_158",
+  "checkmark": "awsui_checkmark_93a1u_16wwy_162",
+  "external-icon": "awsui_external-icon_93a1u_16wwy_169"
 };
   

package/button-dropdown/tooltip.d.ts

@@ -3,6 +3,7 @@ export interface TooltipProps {
     children?: React.ReactNode;
     content?: React.ReactNode;
     position?: 'top' | 'right' | 'bottom' | 'left';
+    className?: string;
 }
-export default function Tooltip({ children, content, position }: TooltipProps): JSX.Element;
+export default function Tooltip({ children, content, position, className }: TooltipProps): JSX.Element;
 //# sourceMappingURL=tooltip.d.ts.map

package/button-dropdown/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAChD;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAkB,EAAE,EAAE,YAAY,eAsCtF"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,eAsCjG"}

package/button-dropdown/tooltip.js

@@ -8,12 +8,12 @@ import Portal from '../internal/components/portal';
 import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';
 import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
 const DEFAULT_OPEN_TIMEOUT_IN_MS = 120;
-export default function Tooltip({ children, content, position = 'right' }) {
+export default function Tooltip({ children, content, position = 'right', className }) {
     const ref = useRef(null);
     const isReducedMotion = useReducedMotion(ref);
     const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);
     const portalClasses = usePortalModeClasses(ref);
-    return (React.createElement("span", Object.assign({ ref: ref }, triggerProps),
+    return (React.createElement("span", Object.assign({ ref: ref }, triggerProps, { className: className }),
         children,
         open && (React.createElement(Portal, null,
             React.createElement("span", { className: portalClasses },

package/button-dropdown/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAwB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAQjF,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,OAAO,EAAgB;IACrF,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC;IAChG,MAAM,aAAa,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAEhD,OAAO,CACL,4CAAM,GAAG,EAAE,GAAG,IAAM,YAAY;QAC7B,QAAQ;QACR,IAAI,IAAI,CACP,oBAAC,MAAM;YACL,8BAAM,SAAS,EAAE,aAAa;gBAC5B,oBAAC,gBAAgB,IACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAChD,gBAAgB,EAAE,IAAI,EACtB,MAAM,EAAE,IAAI;oBAEZ,oBAAC,WAAW,IACV,aAAa,EAAE,KAAK,EACpB,gBAAgB,EAAE,SAAS,EAC3B,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EACnB,eAAe,EAAC,MAAM;wBAEtB,6CAAkB,iCAAiC,EAAC,IAAI,EAAC,SAAS,IAC/D,OAAO,CACH,CACK,CACG,CACd,CACA,CACV,CACI,CACR,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,OAAe;IACrC,MAAM,MAAM,GAAG,MAAM,EAAU,CAAC;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC,CAAC;IACF,MAAM,SAAS,GAAyB,CAAC,CAAC,EAAE;QAC1C,IAAI,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,KAAK,EAAE,CAAC;SACT;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC;IAErB,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,YAAY,EAAE;YACZ,MAAM;YACN,OAAO;YACP,SAAS;SACV;KACF,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEventHandler, useRef, useState } from 'react';\n\nimport Arrow from '../popover/arrow';\nimport PopoverContainer from '../popover/container';\nimport PopoverBody from '../popover/body';\nimport Portal from '../internal/components/portal';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface TooltipProps {\n  children?: React.ReactNode;\n  content?: React.ReactNode;\n  position?: 'top' | 'right' | 'bottom' | 'left';\n}\n\nconst DEFAULT_OPEN_TIMEOUT_IN_MS = 120;\n\nexport default function Tooltip({ children, content, position = 'right' }: TooltipProps) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const isReducedMotion = useReducedMotion(ref);\n  const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);\n  const portalClasses = usePortalModeClasses(ref);\n\n  return (\n    <span ref={ref} {...triggerProps}>\n      {children}\n      {open && (\n        <Portal>\n          <span className={portalClasses}>\n            <PopoverContainer\n              size=\"small\"\n              fixedWidth={false}\n              position={position}\n              trackRef={ref}\n              arrow={position => <Arrow position={position} />}\n              renderWithPortal={true}\n              zIndex={7000}\n            >\n              <PopoverBody\n                dismissButton={false}\n                dismissAriaLabel={undefined}\n                header={null}\n                onDismiss={() => {}}\n                overflowVisible=\"both\"\n              >\n                <span data-testid=\"button-dropdown-disabled-reason\" role=\"tooltip\">\n                  {content}\n                </span>\n              </PopoverBody>\n            </PopoverContainer>\n          </span>\n        </Portal>\n      )}\n    </span>\n  );\n}\n\nfunction useTooltipOpen(timeout: number) {\n  const handle = useRef<number>();\n  const [isOpen, setIsOpen] = useState(false);\n\n  const close = () => {\n    clearTimeout(handle.current);\n    setIsOpen(false);\n  };\n  const open = () => setIsOpen(true);\n  const openDelayed = () => {\n    handle.current = setTimeout(open, timeout);\n  };\n  const onKeyDown: KeyboardEventHandler = e => {\n    if (isOpen && isEscape(e.key)) {\n      e.preventDefault();\n      e.stopPropagation();\n      close();\n    }\n  };\n\n  const onFocus = openDelayed;\n  const onBlur = close;\n\n  return {\n    open: isOpen,\n    triggerProps: {\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  };\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.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, { KeyboardEventHandler, useRef, useState } from 'react';\n\nimport Arrow from '../popover/arrow';\nimport PopoverContainer from '../popover/container';\nimport PopoverBody from '../popover/body';\nimport Portal from '../internal/components/portal';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface TooltipProps {\n  children?: React.ReactNode;\n  content?: React.ReactNode;\n  position?: 'top' | 'right' | 'bottom' | 'left';\n  className?: string;\n}\n\nconst DEFAULT_OPEN_TIMEOUT_IN_MS = 120;\n\nexport default function Tooltip({ children, content, position = 'right', className }: TooltipProps) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const isReducedMotion = useReducedMotion(ref);\n  const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);\n  const portalClasses = usePortalModeClasses(ref);\n\n  return (\n    <span ref={ref} {...triggerProps} className={className}>\n      {children}\n      {open && (\n        <Portal>\n          <span className={portalClasses}>\n            <PopoverContainer\n              size=\"small\"\n              fixedWidth={false}\n              position={position}\n              trackRef={ref}\n              arrow={position => <Arrow position={position} />}\n              renderWithPortal={true}\n              zIndex={7000}\n            >\n              <PopoverBody\n                dismissButton={false}\n                dismissAriaLabel={undefined}\n                header={null}\n                onDismiss={() => {}}\n                overflowVisible=\"both\"\n              >\n                <span data-testid=\"button-dropdown-disabled-reason\" role=\"tooltip\">\n                  {content}\n                </span>\n              </PopoverBody>\n            </PopoverContainer>\n          </span>\n        </Portal>\n      )}\n    </span>\n  );\n}\n\nfunction useTooltipOpen(timeout: number) {\n  const handle = useRef<number>();\n  const [isOpen, setIsOpen] = useState(false);\n\n  const close = () => {\n    clearTimeout(handle.current);\n    setIsOpen(false);\n  };\n  const open = () => setIsOpen(true);\n  const openDelayed = () => {\n    handle.current = setTimeout(open, timeout);\n  };\n  const onKeyDown: KeyboardEventHandler = e => {\n    if (isOpen && isEscape(e.key)) {\n      e.preventDefault();\n      e.stopPropagation();\n      close();\n    }\n  };\n\n  const onFocus = openDelayed;\n  const onBlur = close;\n\n  return {\n    open: isOpen,\n    triggerProps: {\n      onBlur,\n      onFocus,\n      onKeyDown,\n    },\n  };\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}

package/content-layout/styles.css.js

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "layout": "awsui_layout_5gtk3_103k2_97",
-  "background": "awsui_background_5gtk3_103k2_111",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_103k2_116",
-  "header-background": "awsui_header-background_5gtk3_103k2_119",
-  "notifications": "awsui_notifications_5gtk3_103k2_123",
-  "breadcrumbs": "awsui_breadcrumbs_5gtk3_103k2_128",
-  "default-padding": "awsui_default-padding_5gtk3_103k2_133",
-  "header-wrapper": "awsui_header-wrapper_5gtk3_103k2_137",
-  "with-divider": "awsui_with-divider_5gtk3_103k2_142",
-  "content": "awsui_content_5gtk3_103k2_145",
-  "has-header": "awsui_has-header_5gtk3_103k2_149",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_103k2_156",
-  "has-default-background": "awsui_has-default-background_5gtk3_103k2_156",
-  "has-notifications": "awsui_has-notifications_5gtk3_103k2_160"
+  "layout": "awsui_layout_5gtk3_1hkx1_97",
+  "background": "awsui_background_5gtk3_1hkx1_111",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1hkx1_116",
+  "header-background": "awsui_header-background_5gtk3_1hkx1_119",
+  "notifications": "awsui_notifications_5gtk3_1hkx1_123",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_1hkx1_128",
+  "default-padding": "awsui_default-padding_5gtk3_1hkx1_133",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_1hkx1_137",
+  "with-divider": "awsui_with-divider_5gtk3_1hkx1_142",
+  "content": "awsui_content_5gtk3_1hkx1_145",
+  "has-header": "awsui_has-header_5gtk3_1hkx1_149",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1hkx1_156",
+  "has-default-background": "awsui_has-default-background_5gtk3_1hkx1_156",
+  "has-notifications": "awsui_has-notifications_5gtk3_1hkx1_160"
 };
   

package/content-layout/styles.scoped.css

@@ -94,72 +94,72 @@ 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_layout_5gtk3_103k2_97:not(#\9) {
-  --awsui-content-layout-default-horizontal-padding-9rhwr5: var(--space-layout-content-horizontal-7l52k3, 24px);
-  --awsui-content-layout-max-content-width-9rhwr5: 0px;
-  --awsui-content-layout-main-gap-9rhwr5: 0px;
+.awsui_layout_5gtk3_1hkx1_97:not(#\9) {
+  --awsui-content-layout-default-horizontal-padding-g964ok: var(--space-layout-content-horizontal-7l52k3, 24px);
+  --awsui-content-layout-max-content-width-g964ok: 0px;
+  --awsui-content-layout-main-gap-g964ok: 0px;
   display: grid;
-  grid-template-columns: 0 0 1fr minmax(0, var(--awsui-content-layout-max-content-width-9rhwr5)) 1fr 0 0;
-  grid-template-rows: var(--awsui-content-layout-main-gap-9rhwr5) min-content min-content auto var(--space-dark-header-overlap-distance-lxpp0s, 36px) 1fr;
+  grid-template-columns: 0 0 1fr minmax(0, var(--awsui-content-layout-max-content-width-g964ok)) 1fr 0 0;
+  grid-template-rows: var(--awsui-content-layout-main-gap-g964ok) min-content min-content auto var(--space-dark-header-overlap-distance-lxpp0s, 36px) 1fr;
   min-block-size: 100%;
 }
 @media (max-width: 688px) {
-  .awsui_layout_5gtk3_103k2_97:not(#\9) {
-    --awsui-content-layout-default-horizontal-padding-9rhwr5: var(--space-l-t419sm, 20px);
+  .awsui_layout_5gtk3_1hkx1_97:not(#\9) {
+    --awsui-content-layout-default-horizontal-padding-g964ok: var(--space-l-t419sm, 20px);
   }
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_background_5gtk3_103k2_111:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_background_5gtk3_1hkx1_111:not(#\9) {
   grid-column: 1/8;
   grid-row: 1/6;
   color: var(--color-text-body-default-at06ol, #000716);
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_background_5gtk3_103k2_111.awsui_is-overlap-disabled_5gtk3_103k2_116:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_background_5gtk3_1hkx1_111.awsui_is-overlap-disabled_5gtk3_1hkx1_116:not(#\9) {
   grid-row: 1/5;
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_background_5gtk3_103k2_111 > .awsui_header-background_5gtk3_103k2_119:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_background_5gtk3_1hkx1_111 > .awsui_header-background_5gtk3_1hkx1_119:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_notifications_5gtk3_103k2_123:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_notifications_5gtk3_1hkx1_123:not(#\9) {
   grid-column: 4;
   grid-row: 2;
   padding-block-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_breadcrumbs_5gtk3_103k2_128:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_breadcrumbs_5gtk3_1hkx1_128:not(#\9) {
   grid-column: 4;
   grid-row: 3;
   padding-block-end: var(--space-xs-zb16t3, 8px);
 }
-.awsui_layout_5gtk3_103k2_97.awsui_default-padding_5gtk3_103k2_133:not(#\9) {
-  --awsui-content-layout-main-gap-9rhwr5: var(--space-scaled-m-mo5yse, 16px);
-  grid-template-columns: var(--awsui-toggles-left-width-9rhwr5, 0) var(--awsui-content-layout-default-horizontal-padding-9rhwr5, 0) 1fr minmax(0, var(--awsui-content-layout-max-content-width-9rhwr5)) 1fr var(--awsui-content-layout-default-horizontal-padding-9rhwr5, 0) var(--awsui-toggles-right-width-9rhwr5, 0);
+.awsui_layout_5gtk3_1hkx1_97.awsui_default-padding_5gtk3_1hkx1_133:not(#\9) {
+  --awsui-content-layout-main-gap-g964ok: var(--space-scaled-m-mo5yse, 16px);
+  grid-template-columns: var(--awsui-toggles-left-width-g964ok, 0) var(--awsui-content-layout-default-horizontal-padding-g964ok, 0) 1fr minmax(0, var(--awsui-content-layout-max-content-width-g964ok)) 1fr var(--awsui-content-layout-default-horizontal-padding-g964ok, 0) var(--awsui-toggles-right-width-g964ok, 0);
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_header-wrapper_5gtk3_103k2_137:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_header-wrapper_5gtk3_1hkx1_137:not(#\9) {
   grid-column: 4;
   grid-row: 4;
   padding-block-end: var(--space-content-header-padding-bottom-y2enua, 16px);
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_header-wrapper_5gtk3_103k2_137.awsui_with-divider_5gtk3_103k2_142:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_header-wrapper_5gtk3_1hkx1_137.awsui_with-divider_5gtk3_1hkx1_142:not(#\9) {
   border-block-end: 1px solid var(--color-border-divider-default-j74lyz, #b6bec9);
 }
-.awsui_layout_5gtk3_103k2_97 > .awsui_content_5gtk3_103k2_145:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97 > .awsui_content_5gtk3_1hkx1_145:not(#\9) {
   grid-column: 4;
   grid-row: 5/8;
 }
-.awsui_layout_5gtk3_103k2_97:not(#\9):not(.awsui_has-header_5gtk3_103k2_149) {
-  grid-template-rows: var(--awsui-content-layout-main-gap-9rhwr5) min-content min-content 0 calc(var(--space-dark-header-overlap-distance-lxpp0s, 36px)) 1fr;
+.awsui_layout_5gtk3_1hkx1_97:not(#\9):not(.awsui_has-header_5gtk3_1hkx1_149) {
+  grid-template-rows: var(--awsui-content-layout-main-gap-g964ok) min-content min-content 0 calc(var(--space-dark-header-overlap-distance-lxpp0s, 36px)) 1fr;
 }
-.awsui_layout_5gtk3_103k2_97.awsui_is-overlap-disabled_5gtk3_103k2_116:not(#\9) {
-  grid-template-rows: var(--awsui-content-layout-main-gap-9rhwr5) min-content min-content auto 0 1fr;
+.awsui_layout_5gtk3_1hkx1_97.awsui_is-overlap-disabled_5gtk3_1hkx1_116:not(#\9) {
+  grid-template-rows: var(--awsui-content-layout-main-gap-g964ok) min-content min-content auto 0 1fr;
 }
 
-.awsui_layout_5gtk3_103k2_97.awsui_is-visual-refresh_5gtk3_103k2_156 > .awsui_background_5gtk3_103k2_111.awsui_has-default-background_5gtk3_103k2_156:not(#\9) {
+.awsui_layout_5gtk3_1hkx1_97.awsui_is-visual-refresh_5gtk3_1hkx1_156 > .awsui_background_5gtk3_1hkx1_111.awsui_has-default-background_5gtk3_1hkx1_156:not(#\9) {
   background-color: var(--color-background-layout-main-nx09lr, #ffffff);
 }
 
-.awsui_layout_5gtk3_103k2_97:not(#\9):not(.awsui_is-visual-refresh_5gtk3_103k2_156).awsui_has-notifications_5gtk3_103k2_160 {
-  --awsui-content-layout-main-gap-9rhwr5: 0px;
+.awsui_layout_5gtk3_1hkx1_97:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1hkx1_156).awsui_has-notifications_5gtk3_1hkx1_160 {
+  --awsui-content-layout-main-gap-g964ok: 0px;
 }
-.awsui_layout_5gtk3_103k2_97:not(#\9):not(.awsui_is-visual-refresh_5gtk3_103k2_156) > .awsui_notifications_5gtk3_103k2_123 {
+.awsui_layout_5gtk3_1hkx1_97:not(#\9):not(.awsui_is-visual-refresh_5gtk3_1hkx1_156) > .awsui_notifications_5gtk3_1hkx1_123 {
   grid-column: 1/8;
 }

package/content-layout/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "layout": "awsui_layout_5gtk3_103k2_97",
-  "background": "awsui_background_5gtk3_103k2_111",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_103k2_116",
-  "header-background": "awsui_header-background_5gtk3_103k2_119",
-  "notifications": "awsui_notifications_5gtk3_103k2_123",
-  "breadcrumbs": "awsui_breadcrumbs_5gtk3_103k2_128",
-  "default-padding": "awsui_default-padding_5gtk3_103k2_133",
-  "header-wrapper": "awsui_header-wrapper_5gtk3_103k2_137",
-  "with-divider": "awsui_with-divider_5gtk3_103k2_142",
-  "content": "awsui_content_5gtk3_103k2_145",
-  "has-header": "awsui_has-header_5gtk3_103k2_149",
-  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_103k2_156",
-  "has-default-background": "awsui_has-default-background_5gtk3_103k2_156",
-  "has-notifications": "awsui_has-notifications_5gtk3_103k2_160"
+  "layout": "awsui_layout_5gtk3_1hkx1_97",
+  "background": "awsui_background_5gtk3_1hkx1_111",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1hkx1_116",
+  "header-background": "awsui_header-background_5gtk3_1hkx1_119",
+  "notifications": "awsui_notifications_5gtk3_1hkx1_123",
+  "breadcrumbs": "awsui_breadcrumbs_5gtk3_1hkx1_128",
+  "default-padding": "awsui_default-padding_5gtk3_1hkx1_133",
+  "header-wrapper": "awsui_header-wrapper_5gtk3_1hkx1_137",
+  "with-divider": "awsui_with-divider_5gtk3_1hkx1_142",
+  "content": "awsui_content_5gtk3_1hkx1_145",
+  "has-header": "awsui_has-header_5gtk3_1hkx1_149",
+  "is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1hkx1_156",
+  "has-default-background": "awsui_has-default-background_5gtk3_1hkx1_156",
+  "has-notifications": "awsui_has-notifications_5gtk3_1hkx1_160"
 };
   

package/flashbar/styles.css.js

@@ -1,52 +1,52 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_1kj85_97",
-  "enter": "awsui_enter_1q84n_1kj85_97",
-  "flash-body": "awsui_flash-body_1q84n_1kj85_111",
-  "flash-message": "awsui_flash-message_1q84n_1kj85_111",
-  "flash-header": "awsui_flash-header_1q84n_1kj85_111",
-  "flash-content": "awsui_flash-content_1q84n_1kj85_112",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1kj85_113",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1kj85_114",
-  "flash-icon": "awsui_flash-icon_1q84n_1kj85_137",
-  "entering": "awsui_entering_1q84n_1kj85_150",
-  "entered": "awsui_entered_1q84n_1kj85_171",
-  "exiting": "awsui_exiting_1q84n_1kj85_276",
-  "stack": "awsui_stack_1q84n_1kj85_298",
-  "animation-running": "awsui_animation-running_1q84n_1kj85_298",
-  "item": "awsui_item_1q84n_1kj85_298",
-  "flash-list-item": "awsui_flash-list-item_1q84n_1kj85_299",
-  "notification-bar": "awsui_notification-bar_1q84n_1kj85_300",
-  "collapsed": "awsui_collapsed_1q84n_1kj85_320",
-  "animation-ready": "awsui_animation-ready_1q84n_1kj85_320",
-  "expanded-only": "awsui_expanded-only_1q84n_1kj85_320",
-  "expanded": "awsui_expanded_1q84n_1kj85_320",
-  "flash": "awsui_flash_1q84n_1kj85_97",
-  "collapsible": "awsui_collapsible_1q84n_1kj85_384",
-  "short-list": "awsui_short-list_1q84n_1kj85_390",
-  "visual-refresh": "awsui_visual-refresh_1q84n_1kj85_390",
-  "status": "awsui_status_1q84n_1kj85_597",
-  "header": "awsui_header_1q84n_1kj85_597",
-  "item-count": "awsui_item-count_1q84n_1kj85_598",
-  "button": "awsui_button_1q84n_1kj85_599",
-  "type-count": "awsui_type-count_1q84n_1kj85_632",
-  "count-number": "awsui_count-number_1q84n_1kj85_632",
-  "icon": "awsui_icon_1q84n_1kj85_666",
-  "floating": "awsui_floating_1q84n_1kj85_707",
-  "flashbar": "awsui_flashbar_1q84n_1kj85_715",
-  "flash-refresh": "awsui_flash-refresh_1q84n_1kj85_790",
-  "flash-list": "awsui_flash-list_1q84n_1kj85_299",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_1kj85_811",
-  "flash-text": "awsui_flash-text_1q84n_1kj85_841",
-  "dismiss-button": "awsui_dismiss-button_1q84n_1kj85_114",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_1kj85_883",
-  "action-button": "awsui_action-button_1q84n_1kj85_113",
-  "action-slot": "awsui_action-slot_1q84n_1kj85_893",
-  "flash-type-success": "awsui_flash-type-success_1q84n_1kj85_897",
-  "flash-type-error": "awsui_flash-type-error_1q84n_1kj85_901",
-  "flash-type-info": "awsui_flash-type-info_1q84n_1kj85_905",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1kj85_906",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_1kj85_910"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_1mepa_97",
+  "enter": "awsui_enter_1q84n_1mepa_97",
+  "flash-body": "awsui_flash-body_1q84n_1mepa_111",
+  "flash-message": "awsui_flash-message_1q84n_1mepa_111",
+  "flash-header": "awsui_flash-header_1q84n_1mepa_111",
+  "flash-content": "awsui_flash-content_1q84n_1mepa_112",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1mepa_113",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1mepa_114",
+  "flash-icon": "awsui_flash-icon_1q84n_1mepa_137",
+  "entering": "awsui_entering_1q84n_1mepa_150",
+  "entered": "awsui_entered_1q84n_1mepa_171",
+  "exiting": "awsui_exiting_1q84n_1mepa_276",
+  "stack": "awsui_stack_1q84n_1mepa_298",
+  "animation-running": "awsui_animation-running_1q84n_1mepa_298",
+  "item": "awsui_item_1q84n_1mepa_298",
+  "flash-list-item": "awsui_flash-list-item_1q84n_1mepa_299",
+  "notification-bar": "awsui_notification-bar_1q84n_1mepa_300",
+  "collapsed": "awsui_collapsed_1q84n_1mepa_320",
+  "animation-ready": "awsui_animation-ready_1q84n_1mepa_320",
+  "expanded-only": "awsui_expanded-only_1q84n_1mepa_320",
+  "expanded": "awsui_expanded_1q84n_1mepa_320",
+  "flash": "awsui_flash_1q84n_1mepa_97",
+  "collapsible": "awsui_collapsible_1q84n_1mepa_384",
+  "short-list": "awsui_short-list_1q84n_1mepa_390",
+  "visual-refresh": "awsui_visual-refresh_1q84n_1mepa_390",
+  "status": "awsui_status_1q84n_1mepa_597",
+  "header": "awsui_header_1q84n_1mepa_597",
+  "item-count": "awsui_item-count_1q84n_1mepa_598",
+  "button": "awsui_button_1q84n_1mepa_599",
+  "type-count": "awsui_type-count_1q84n_1mepa_632",
+  "count-number": "awsui_count-number_1q84n_1mepa_632",
+  "icon": "awsui_icon_1q84n_1mepa_666",
+  "floating": "awsui_floating_1q84n_1mepa_707",
+  "flashbar": "awsui_flashbar_1q84n_1mepa_715",
+  "flash-refresh": "awsui_flash-refresh_1q84n_1mepa_790",
+  "flash-list": "awsui_flash-list_1q84n_1mepa_299",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_1mepa_811",
+  "flash-text": "awsui_flash-text_1q84n_1mepa_841",
+  "dismiss-button": "awsui_dismiss-button_1q84n_1mepa_114",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_1mepa_883",
+  "action-button": "awsui_action-button_1q84n_1mepa_113",
+  "action-slot": "awsui_action-slot_1q84n_1mepa_893",
+  "flash-type-success": "awsui_flash-type-success_1q84n_1mepa_897",
+  "flash-type-error": "awsui_flash-type-error_1q84n_1mepa_901",
+  "flash-type-info": "awsui_flash-type-info_1q84n_1mepa_905",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_1mepa_906",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_1mepa_910"
 };