@cloudscape-design/components-themeable 3.0.909 → 3.0.910

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/button-dropdown/item-element/styles.scss +4 -0
  3. package/lib/internal/template/button-dropdown/item-element/index.d.ts.map +1 -1
  4. package/lib/internal/template/button-dropdown/item-element/index.js +1 -1
  5. package/lib/internal/template/button-dropdown/item-element/index.js.map +1 -1
  6. package/lib/internal/template/button-dropdown/item-element/styles.css.js +15 -14
  7. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +25 -22
  8. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +15 -14
  9. package/lib/internal/template/internal/environment.js +1 -1
  10. package/lib/internal/template/internal/environment.json +1 -1
  11. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "2966baaa03866aae6476b31015a2d75332400bef"
2
+ "commit": "e389b284f1fe752821fc03b28893b5b7911fc677"
3
3
  }
package/lib/internal/scss/button-dropdown/item-element/styles.scss CHANGED
@@ -70,6 +70,10 @@
70
70
  font-weight: styles.$font-weight-bold;
71
71
  text-decoration: none;
72
72
  }
73
+
74
+ &.link-style-highlighted {
75
+ color: awsui.$color-text-link-hover;
76
+ }
73
77
  }
74
78
 
75
79
  &:focus {
package/lib/internal/template/button-dropdown/item-element/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsC,SAAS,EAAY,MAAM,eAAe,CAAC;AASxF,QAAA,MAAM,WAAW,uLAad,SAAS,gBAoDX,CAAC;AAyHF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsC,SAAS,EAAY,MAAM,eAAe,CAAC;AASxF,QAAA,MAAM,WAAW,uLAad,SAAS,gBAoDX,CAAC;AA0HF,eAAe,WAAW,CAAC"}
package/lib/internal/template/button-dropdown/item-element/index.js CHANGED
@@ -60,7 +60,7 @@ function MenuItem({ item, disabled, highlighted, linkStyle }) {
60
60
  }, [highlighted]);
61
61
  const isDisabledWithReason = disabled && item.disabledReason;
62
62
  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);
63
- const menuItemProps = Object.assign(Object.assign({ 'aria-label': item.ariaLabel, className: clsx(styles['menu-item'], analyticsLabels['menu-item'], linkStyle && styles['link-style'], isCurrentBreadcrumb && styles['current-breadcrumb']), 'aria-current': isCurrentBreadcrumb, lang: item.lang, ref: menuItemRef,
63
+ const menuItemProps = Object.assign(Object.assign({ 'aria-label': item.ariaLabel, className: clsx(styles['menu-item'], analyticsLabels['menu-item'], linkStyle && styles['link-style'], linkStyle && highlighted && styles['link-style-highlighted'], isCurrentBreadcrumb && styles['current-breadcrumb']), 'aria-current': isCurrentBreadcrumb, lang: item.lang, ref: menuItemRef,
64
64
  // We are using the roving tabindex technique to manage the focus state of the dropdown.
65
65
  // The current element will always have tabindex=0 which means that it can be tabbed to,
66
66
  // while all other items have tabindex=-1 so we can focus them when necessary.
package/lib/internal/template/button-dropdown/item-element/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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,EAEL,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;AAE1E,OAAO,YAAmC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAG/E,OAAO,OAAO,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,eAAe,MAAM,qCAAqC,CAAC;AAClE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,GAAG,GAAG,EACd,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,qBAAqB,GAAG,KAAK,EAC7B,4BAA4B,GAAG,CAAC,QAA4C,EAAE,EAAE,CAAC,QAAQ,EACzF,OAAO,GAAG,QAAQ,EAClB,SAAS,GACC,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,0CACE,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,IACjB,6BAA6B,CAC/B,QAAQ;QACN,CAAC,CAAC,EAAE;QACJ,CAAC,CAAE,4BAA6B,CAAC;YAC7B,MAAM,EAAE,OAAO;YACf,MAAM,EAAE;gBACN,QAAQ;gBACR,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,KAAK,EAAE,IAAI,eAAe,CAAC,WAAW,CAAC,EAAE;gBACzC,IAAI,EAAG,IAAiB,CAAC,IAAI,IAAI,EAAE;aACpC;SACF,CAAmD,CACzD;QAED,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,GAAI,CACzF,CACN,CAAC;AACJ,CAAC,CAAC;AASF,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAiB;IACzE,MAAM,WAAW,GAAG,MAAM,CAA+C,IAAI,CAAC,CAAC;IAC/E,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,mBAAmB,GAAG,CAAC,UAAU,IAAI,IAAI,CAAC,mBAAmB,CAAC;IAEpE,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,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,WAAW,CAAC,EACnB,eAAe,CAAC,WAAW,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,YAAY,CAAC,EACjC,mBAAmB,IAAI,MAAM,CAAC,oBAAoB,CAAC,CACpD,EACD,cAAc,EAAE,mBAAmB,EACnC,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,EAAE,IAAI,EAAE,QAAQ,EAAoE,EAAE,EAAE;IAC/G,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';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n position = '1',\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n variant = 'normal',\n linkStyle,\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 {...getAnalyticsMetadataAttribute(\n disabled\n ? {}\n : (analyticsMetadataTransformer!({\n action: 'click',\n detail: {\n position,\n id: item.id,\n label: `.${analyticsLabels['menu-item']}`,\n href: (item as LinkItem).href || '',\n },\n }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n )}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n </li>\n );\n};\n\ninterface MenuItemProps {\n item: InternalItem | InternalCheckboxItem;\n disabled: boolean;\n highlighted: boolean;\n linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\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 'aria-label': item.ariaLabel,\n className: clsx(\n styles['menu-item'],\n analyticsLabels['menu-item'],\n linkStyle && styles['link-style'],\n isCurrentBreadcrumb && styles['current-breadcrumb']\n ),\n 'aria-current': isCurrentBreadcrumb,\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 = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\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"]}
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';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n position = '1',\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n variant = 'normal',\n linkStyle,\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 {...getAnalyticsMetadataAttribute(\n disabled\n ? {}\n : (analyticsMetadataTransformer!({\n action: 'click',\n detail: {\n position,\n id: item.id,\n label: `.${analyticsLabels['menu-item']}`,\n href: (item as LinkItem).href || '',\n },\n }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n )}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n </li>\n );\n};\n\ninterface MenuItemProps {\n item: InternalItem | InternalCheckboxItem;\n disabled: boolean;\n highlighted: boolean;\n linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\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 'aria-label': item.ariaLabel,\n className: clsx(\n styles['menu-item'],\n analyticsLabels['menu-item'],\n linkStyle && styles['link-style'],\n linkStyle && highlighted && styles['link-style-highlighted'],\n isCurrentBreadcrumb && styles['current-breadcrumb']\n ),\n 'aria-current': isCurrentBreadcrumb,\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 = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\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/lib/internal/template/button-dropdown/item-element/styles.css.js CHANGED
@@ -1,19 +1,20 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "item-element": "awsui_item-element_93a1u_1tw25_145",
5
- "disabled": "awsui_disabled_93a1u_1tw25_157",
6
- "show-divider": "awsui_show-divider_93a1u_1tw25_164",
7
- "highlighted": "awsui_highlighted_93a1u_1tw25_167",
8
- "is-focused": "awsui_is-focused_93a1u_1tw25_182",
9
- "menu-item": "awsui_menu-item_93a1u_1tw25_187",
10
- "link-style": "awsui_link-style_93a1u_1tw25_199",
11
- "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1tw25_235",
12
- "has-category-header": "awsui_has-category-header_93a1u_1tw25_246",
13
- "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1tw25_246",
14
- "has-checkmark": "awsui_has-checkmark_93a1u_1tw25_246",
15
- "icon": "awsui_icon_93a1u_1tw25_250",
16
- "checkmark": "awsui_checkmark_93a1u_1tw25_254",
17
- "external-icon": "awsui_external-icon_93a1u_1tw25_261"
4
+ "item-element": "awsui_item-element_93a1u_puqyz_145",
5
+ "disabled": "awsui_disabled_93a1u_puqyz_157",
6
+ "show-divider": "awsui_show-divider_93a1u_puqyz_164",
7
+ "highlighted": "awsui_highlighted_93a1u_puqyz_167",
8
+ "is-focused": "awsui_is-focused_93a1u_puqyz_182",
9
+ "menu-item": "awsui_menu-item_93a1u_puqyz_187",
10
+ "link-style": "awsui_link-style_93a1u_puqyz_199",
11
+ "current-breadcrumb": "awsui_current-breadcrumb_93a1u_puqyz_235",
12
+ "link-style-highlighted": "awsui_link-style-highlighted_93a1u_puqyz_243",
13
+ "has-category-header": "awsui_has-category-header_93a1u_puqyz_249",
14
+ "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_puqyz_249",
15
+ "has-checkmark": "awsui_has-checkmark_93a1u_puqyz_249",
16
+ "icon": "awsui_icon_93a1u_puqyz_253",
17
+ "checkmark": "awsui_checkmark_93a1u_puqyz_257",
18
+ "external-icon": "awsui_external-icon_93a1u_puqyz_264"
18
19
  };
19
20
 
package/lib/internal/template/button-dropdown/item-element/styles.scoped.css CHANGED
@@ -142,7 +142,7 @@
142
142
  */
143
143
  /* Style used for links in slots/components that are text heavy, to help links stand out among
144
144
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
145
- .awsui_item-element_93a1u_1tw25_145:not(#\9) {
145
+ .awsui_item-element_93a1u_puqyz_145:not(#\9) {
146
146
  position: relative;
147
147
  z-index: 1;
148
148
  border-block: var(--border-item-width-bjacxs, 1px) solid transparent;
@@ -154,17 +154,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
154
154
  margin-block-start: calc(-1 * var(--border-width-field-9kmoac, 1px));
155
155
  cursor: pointer;
156
156
  }
157
- .awsui_item-element_93a1u_1tw25_145.awsui_disabled_93a1u_1tw25_157:not(#\9) {
157
+ .awsui_item-element_93a1u_puqyz_145.awsui_disabled_93a1u_puqyz_157:not(#\9) {
158
158
  cursor: default;
159
159
  color: var(--color-text-dropdown-item-disabled-gk1x2u, #aab7b8);
160
160
  }
161
- .awsui_item-element_93a1u_1tw25_145:not(#\9):first-child {
161
+ .awsui_item-element_93a1u_puqyz_145:not(#\9):first-child {
162
162
  margin-block-start: 0;
163
163
  }
164
- .awsui_item-element_93a1u_1tw25_145.awsui_show-divider_93a1u_1tw25_164:not(#\9) {
164
+ .awsui_item-element_93a1u_puqyz_145.awsui_show-divider_93a1u_puqyz_164:not(#\9) {
165
165
  border-block-end: var(--border-item-width-bjacxs, 1px) solid var(--color-border-dropdown-group-ze4esa, #eaeded);
166
166
  }
167
- .awsui_item-element_93a1u_1tw25_145.awsui_highlighted_93a1u_1tw25_167:not(#\9) {
167
+ .awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167:not(#\9) {
168
168
  color: var(--color-text-dropdown-item-highlighted-xxoapj, #16191f);
169
169
  z-index: 2;
170
170
  background-color: var(--color-background-dropdown-item-hover-r5jqv1, #f2f3f3);
@@ -174,17 +174,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
174
174
  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
175
175
  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
176
176
  }
177
- .awsui_item-element_93a1u_1tw25_145.awsui_highlighted_93a1u_1tw25_167.awsui_disabled_93a1u_1tw25_157:not(#\9) {
177
+ .awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167.awsui_disabled_93a1u_puqyz_157:not(#\9) {
178
178
  color: var(--color-text-dropdown-item-dimmed-xe0faj, #aab7b8);
179
179
  border-color: var(--color-border-dropdown-item-dimmed-hover-0rwxkv, #879596);
180
180
  background-color: var(--color-background-dropdown-item-dimmed-dtqtu6, transparent);
181
181
  }
182
- .awsui_item-element_93a1u_1tw25_145.awsui_highlighted_93a1u_1tw25_167.awsui_is-focused_93a1u_1tw25_182:not(#\9) {
182
+ .awsui_item-element_93a1u_puqyz_145.awsui_highlighted_93a1u_puqyz_167.awsui_is-focused_93a1u_puqyz_182:not(#\9) {
183
183
  border-color: var(--color-border-dropdown-item-focused-6wa092, #0073bb);
184
184
  box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-kvz439, 1px) var(--color-border-item-focused-q68bgg, #0073bb);
185
185
  }
186
186
 
187
- .awsui_menu-item_93a1u_1tw25_187:not(#\9) {
187
+ .awsui_menu-item_93a1u_puqyz_187:not(#\9) {
188
188
  min-inline-size: 0;
189
189
  word-break: break-word;
190
190
  display: flex;
@@ -196,7 +196,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
196
196
  /* stylelint-disable selector-max-type */
197
197
  /* stylelint-enable selector-max-type */
198
198
  }
199
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9) {
199
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
200
200
  padding-block-end: calc(var(--space-xxs-y2432o, 4px) + var(--space-xxxs-gn3248, 2px));
201
201
  text-underline-offset: 0.25em;
202
202
  text-decoration-thickness: 1px;
@@ -211,30 +211,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
211
211
  transition-duration: var(--motion-duration-refresh-only-medium-kd6k1u, 0ms);
212
212
  }
213
213
  @media (prefers-reduced-motion: reduce) {
214
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9) {
214
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
215
215
  animation: none;
216
216
  transition: none;
217
217
  }
218
218
  }
219
- .awsui-motion-disabled .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9) {
219
+ .awsui-motion-disabled .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9) {
220
220
  animation: none;
221
221
  transition: none;
222
222
  }
223
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):hover {
223
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):hover {
224
224
  cursor: pointer;
225
225
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
226
226
  }
227
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):focus {
227
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):focus {
228
228
  outline: none;
229
229
  }
230
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):active {
230
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):active {
231
231
  color: var(--color-text-link-hover-jvu4dp, #0a4a74);
232
232
  }
233
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):active, .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):focus, .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199:not(#\9):hover {
233
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):active, .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):focus, .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199:not(#\9):hover {
234
234
  text-decoration-line: underline;
235
235
  text-decoration-color: currentColor;
236
236
  }
237
- .awsui_menu-item_93a1u_1tw25_187.awsui_link-style_93a1u_1tw25_199.awsui_current-breadcrumb_93a1u_1tw25_235:not(#\9) {
237
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199.awsui_current-breadcrumb_93a1u_puqyz_235:not(#\9) {
238
238
  font-weight: var(--font-weight-button-rw26ot, 700);
239
239
  -webkit-font-smoothing: var(--font-smoothing-webkit-trr1e8, auto);
240
240
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-hyxkxc, auto);
@@ -242,24 +242,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
242
242
  font-weight: 700;
243
243
  text-decoration: none;
244
244
  }
245
- .awsui_menu-item_93a1u_1tw25_187:not(#\9):focus {
245
+ .awsui_menu-item_93a1u_puqyz_187.awsui_link-style_93a1u_puqyz_199.awsui_link-style-highlighted_93a1u_puqyz_243:not(#\9) {
246
+ color: var(--color-text-link-hover-jvu4dp, #0a4a74);
247
+ }
248
+ .awsui_menu-item_93a1u_puqyz_187:not(#\9):focus {
246
249
  outline: none;
247
250
  }
248
- .awsui_has-category-header_93a1u_1tw25_246 > .awsui_menu-item_93a1u_1tw25_187:not(#\9), .awsui_has-category-header_93a1u_1tw25_246 > .awsui_item-tooltip-wrapper_93a1u_1tw25_246 > .awsui_menu-item_93a1u_1tw25_187:not(#\9), .awsui_has-category-header_93a1u_1tw25_246:not(#\9):not(.awsui_has-checkmark_93a1u_1tw25_246) > span > .awsui_menu-item_93a1u_1tw25_187 {
251
+ .awsui_has-category-header_93a1u_puqyz_249 > .awsui_menu-item_93a1u_puqyz_187:not(#\9), .awsui_has-category-header_93a1u_puqyz_249 > .awsui_item-tooltip-wrapper_93a1u_puqyz_249 > .awsui_menu-item_93a1u_puqyz_187:not(#\9), .awsui_has-category-header_93a1u_puqyz_249:not(#\9):not(.awsui_has-checkmark_93a1u_puqyz_249) > span > .awsui_menu-item_93a1u_puqyz_187 {
249
252
  padding-inline-start: calc(var(--space-xs-6dgkww, 8px) + var(--space-l-eenfqd, 20px));
250
253
  }
251
254
 
252
- .awsui_icon_93a1u_1tw25_250:not(#\9) {
255
+ .awsui_icon_93a1u_puqyz_253:not(#\9) {
253
256
  padding-inline-end: var(--space-xxs-y2432o, 4px);
254
257
  flex-shrink: 0;
255
258
  }
256
- .awsui_icon_93a1u_1tw25_250.awsui_checkmark_93a1u_1tw25_254:not(#\9) {
259
+ .awsui_icon_93a1u_puqyz_253.awsui_checkmark_93a1u_puqyz_257:not(#\9) {
257
260
  color: var(--color-text-status-info-1ypqr6, #0073bb);
258
261
  }
259
- .awsui_icon_93a1u_1tw25_250.awsui_disabled_93a1u_1tw25_157:not(#\9) {
262
+ .awsui_icon_93a1u_puqyz_253.awsui_disabled_93a1u_puqyz_157:not(#\9) {
260
263
  color: var(--color-text-interactive-disabled-xqzdg5, #aab7b8);
261
264
  }
262
265
 
263
- .awsui_external-icon_93a1u_1tw25_261:not(#\9) {
266
+ .awsui_external-icon_93a1u_puqyz_264:not(#\9) {
264
267
  margin-inline-start: var(--space-xxs-y2432o, 4px);
265
268
  }
package/lib/internal/template/button-dropdown/item-element/styles.selectors.js CHANGED
@@ -2,19 +2,20 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "item-element": "awsui_item-element_93a1u_1tw25_145",
6
- "disabled": "awsui_disabled_93a1u_1tw25_157",
7
- "show-divider": "awsui_show-divider_93a1u_1tw25_164",
8
- "highlighted": "awsui_highlighted_93a1u_1tw25_167",
9
- "is-focused": "awsui_is-focused_93a1u_1tw25_182",
10
- "menu-item": "awsui_menu-item_93a1u_1tw25_187",
11
- "link-style": "awsui_link-style_93a1u_1tw25_199",
12
- "current-breadcrumb": "awsui_current-breadcrumb_93a1u_1tw25_235",
13
- "has-category-header": "awsui_has-category-header_93a1u_1tw25_246",
14
- "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1tw25_246",
15
- "has-checkmark": "awsui_has-checkmark_93a1u_1tw25_246",
16
- "icon": "awsui_icon_93a1u_1tw25_250",
17
- "checkmark": "awsui_checkmark_93a1u_1tw25_254",
18
- "external-icon": "awsui_external-icon_93a1u_1tw25_261"
5
+ "item-element": "awsui_item-element_93a1u_puqyz_145",
6
+ "disabled": "awsui_disabled_93a1u_puqyz_157",
7
+ "show-divider": "awsui_show-divider_93a1u_puqyz_164",
8
+ "highlighted": "awsui_highlighted_93a1u_puqyz_167",
9
+ "is-focused": "awsui_is-focused_93a1u_puqyz_182",
10
+ "menu-item": "awsui_menu-item_93a1u_puqyz_187",
11
+ "link-style": "awsui_link-style_93a1u_puqyz_199",
12
+ "current-breadcrumb": "awsui_current-breadcrumb_93a1u_puqyz_235",
13
+ "link-style-highlighted": "awsui_link-style-highlighted_93a1u_puqyz_243",
14
+ "has-category-header": "awsui_has-category-header_93a1u_puqyz_249",
15
+ "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_puqyz_249",
16
+ "has-checkmark": "awsui_has-checkmark_93a1u_puqyz_249",
17
+ "icon": "awsui_icon_93a1u_puqyz_253",
18
+ "checkmark": "awsui_checkmark_93a1u_puqyz_257",
19
+ "external-icon": "awsui_external-icon_93a1u_puqyz_264"
19
20
  };
20
21
 
package/lib/internal/template/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (2966baaa)";
2
+ export var PACKAGE_VERSION = "3.0.0 (e389b284)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/lib/internal/template/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (2966baaa)",
3
+ "PACKAGE_VERSION": "3.0.0 (e389b284)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.909",
3
+ "version": "3.0.910",
4
4
  "files": [
5
5
  "lib"
6
6
  ],