@cloudscape-design/components 3.0.406 → 3.0.407

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 (38) hide show
  1. package/breadcrumb-group/internal.d.ts.map +1 -1
  2. package/breadcrumb-group/internal.js +2 -1
  3. package/breadcrumb-group/internal.js.map +1 -1
  4. package/breadcrumb-group/item/item.d.ts.map +1 -1
  5. package/breadcrumb-group/item/item.js +8 -8
  6. package/breadcrumb-group/item/item.js.map +1 -1
  7. package/header/internal.d.ts.map +1 -1
  8. package/header/internal.js +1 -1
  9. package/header/internal.js.map +1 -1
  10. package/header/styles.css.js +34 -33
  11. package/header/styles.scoped.css +53 -49
  12. package/header/styles.selectors.js +34 -33
  13. package/internal/environment.js +1 -1
  14. package/internal/environment.json +1 -1
  15. package/internal/manifest.json +1 -1
  16. package/package.json +1 -1
  17. package/property-filter/controller.d.ts +3 -4
  18. package/property-filter/controller.d.ts.map +1 -1
  19. package/property-filter/controller.js +7 -10
  20. package/property-filter/controller.js.map +1 -1
  21. package/property-filter/index.d.ts.map +1 -1
  22. package/property-filter/index.js +48 -37
  23. package/property-filter/index.js.map +1 -1
  24. package/property-filter/interfaces.d.ts +10 -1
  25. package/property-filter/interfaces.d.ts.map +1 -1
  26. package/property-filter/interfaces.js.map +1 -1
  27. package/property-filter/token-editor.d.ts +4 -4
  28. package/property-filter/token-editor.d.ts.map +1 -1
  29. package/property-filter/token-editor.js +25 -20
  30. package/property-filter/token-editor.js.map +1 -1
  31. package/property-filter/token.d.ts +4 -4
  32. package/property-filter/token.d.ts.map +1 -1
  33. package/property-filter/token.js +6 -5
  34. package/property-filter/token.js.map +1 -1
  35. package/property-filter/utils.d.ts +4 -5
  36. package/property-filter/utils.d.ts.map +1 -1
  37. package/property-filter/utils.js +11 -16
  38. package/property-filter/utils.js.map +1 -1
package/breadcrumb-group/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/internal.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AA6DlF,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAEH,KAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAC/F,oBAAoB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC/G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAiEjC"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/internal.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,cAAc,CAAC;AAI3E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AA6DlF,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAEH,KAAK,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IAC/F,oBAAoB,CAAC,CAAC,CAAC,GAAG,0BAA0B,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,EAAE,EAC/G,KAAU,EACV,SAAS,EACT,eAAe,EACf,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,4BAA4B,CAAC,CAAC,CAAC,eAmEjC"}
package/breadcrumb-group/internal.js CHANGED
@@ -44,8 +44,9 @@ export default function InternalBreadcrumbGroup(_a) {
44
44
  const baseProps = getBaseProps(props);
45
45
  const isMobile = useMobile();
46
46
  let breadcrumbItems = items.map((item, index) => {
47
+ const isLast = index === items.length - 1;
47
48
  return (React.createElement("li", { className: styles.item, key: index },
48
- React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, isCompressed: isMobile, isLast: index === items.length - 1, isDisplayed: !isMobile || index === items.length - 1 || index === 0 })));
49
+ React.createElement(BreadcrumbItem, { item: item, onClick: onClick, onFollow: onFollow, isCompressed: isMobile, isLast: isLast, isDisplayed: !isMobile || isLast || index === 0 })));
49
50
  });
50
51
  const getEventItem = (e) => {
51
52
  const { id } = e.detail;
package/breadcrumb-group/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n ariaLabel,\n triggerRef,\n disabled,\n testUtilsClass,\n isOpen,\n onClick,\n}: CustomTriggerProps) => {\n return (\n <InternalButton\n ref={triggerRef}\n className={testUtilsClass}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n BreadcrumbGroupProps<T> & InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={index === items.length - 1}\n isDisplayed={!isMobile || index === items.length - 1 || index === 0}\n />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 2) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, items.length - 1)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n return (\n <nav\n {...baseProps}\n className={clsx(\n styles['breadcrumb-group'],\n isMobile && styles.mobile,\n items.length <= 2 && styles['mobile-short'],\n baseProps.className\n )}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport InternalButtonDropdown from '../button-dropdown/internal';\nimport { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';\nimport { InternalButton } from '../button/internal';\nimport { BreadcrumbItem } from './item/item';\nimport { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';\nimport { fireCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { useInternalI18n } from '../i18n/context';\n\n/**\n * Provided for backwards compatibility\n */\nconst DEFAULT_EXPAND_ARIA_LABEL = 'Show path';\n\nconst getDropdownTrigger = ({\n ariaLabel,\n triggerRef,\n disabled,\n testUtilsClass,\n isOpen,\n onClick,\n}: CustomTriggerProps) => {\n return (\n <InternalButton\n ref={triggerRef}\n className={testUtilsClass}\n disabled={disabled}\n onClick={event => {\n event.preventDefault();\n onClick();\n }}\n ariaExpanded={isOpen}\n aria-haspopup={true}\n ariaLabel={ariaLabel}\n variant=\"breadcrumb-group\"\n formAction=\"none\"\n >\n ...\n </InternalButton>\n );\n};\n\nconst EllipsisDropdown = ({\n ariaLabel,\n dropdownItems,\n onDropdownItemClick,\n onDropdownItemFollow,\n}: EllipsisDropdownProps) => {\n const i18n = useInternalI18n('breadcrumb-group');\n\n return (\n <li className={styles.ellipsis}>\n <InternalButtonDropdown\n ariaLabel={i18n('expandAriaLabel', ariaLabel) ?? DEFAULT_EXPAND_ARIA_LABEL}\n items={dropdownItems}\n onItemClick={onDropdownItemClick}\n onItemFollow={onDropdownItemFollow}\n customTriggerBuilder={getDropdownTrigger}\n />\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n </li>\n );\n};\n\nexport const getEventDetail = <T extends BreadcrumbGroupProps.Item>(item: T) => ({\n item,\n text: item.text,\n href: item.href,\n});\n\ntype InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n BreadcrumbGroupProps<T> & InternalBaseComponentProps;\n\nexport default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>({\n items = [],\n ariaLabel,\n expandAriaLabel,\n onClick,\n onFollow,\n __internalRootRef,\n ...props\n}: InternalBreadcrumbGroupProps<T>) {\n for (const item of items) {\n checkSafeUrl('BreadcrumbGroup', item.href);\n }\n const baseProps = getBaseProps(props);\n const isMobile = useMobile();\n\n let breadcrumbItems = items.map((item, index) => {\n const isLast = index === items.length - 1;\n\n return (\n <li className={styles.item} key={index}>\n <BreadcrumbItem\n item={item}\n onClick={onClick}\n onFollow={onFollow}\n isCompressed={isMobile}\n isLast={isLast}\n isDisplayed={!isMobile || isLast || index === 0}\n />\n </li>\n );\n });\n\n const getEventItem = (e: CustomEvent<{ id: string }>) => {\n const { id } = e.detail;\n return items[parseInt(id)];\n };\n\n // Add ellipsis\n if (breadcrumbItems.length >= 2) {\n const dropdownItems: Array<LinkItem> = items\n .slice(1, items.length - 1)\n .map((item: BreadcrumbGroupProps.Item, index: number) => ({\n id: (index + 1).toString(), // the first item doesn't get inside dropdown\n text: item.text,\n href: item.href || '#',\n }));\n\n breadcrumbItems = [\n breadcrumbItems[0],\n <EllipsisDropdown\n key={'ellipsis'}\n ariaLabel={expandAriaLabel}\n dropdownItems={dropdownItems}\n onDropdownItemClick={e => fireCancelableEvent(onClick, getEventDetail(getEventItem(e)), e)}\n onDropdownItemFollow={e => fireCancelableEvent(onFollow, getEventDetail(getEventItem(e)), e)}\n />,\n ...breadcrumbItems.slice(1),\n ];\n }\n\n return (\n <nav\n {...baseProps}\n className={clsx(\n styles['breadcrumb-group'],\n isMobile && styles.mobile,\n items.length <= 2 && styles['mobile-short'],\n baseProps.className\n )}\n aria-label={ariaLabel || undefined}\n ref={__internalRootRef}\n >\n <ol className={styles['breadcrumb-group-list']}>{breadcrumbItems}</ol>\n </nav>\n );\n}\n"]}
package/breadcrumb-group/item/item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AA8H1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA2CxB"}
1
+ {"version":3,"file":"item.d.ts","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AA6H1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA8CxB"}
package/breadcrumb-group/item/item.js CHANGED
@@ -15,7 +15,7 @@ import popoverStyles from '../../popover/styles.css.js';
15
15
  import { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';
16
16
  import { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
17
17
  const BreadcrumbItemWithPopover = (_a) => {
18
- var { item, isLast, anchorAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes"]);
18
+ var { item, isLast, anchorAttributes, funnelAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes", "funnelAttributes"]);
19
19
  const [showPopover, setShowPopover] = useState(false);
20
20
  const textRef = useRef(null);
21
21
  const virtualTextRef = useRef(null);
@@ -55,13 +55,13 @@ const BreadcrumbItemWithPopover = (_a) => {
55
55
  }, onBlur: () => setShowPopover(false), onMouseEnter: () => {
56
56
  isTruncated(textRef, virtualTextRef) && setShowPopover(true);
57
57
  }, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }),
58
- React.createElement("span", { className: styles.text, ref: textRef }, item.text),
58
+ React.createElement("span", Object.assign({}, funnelAttributes, { className: styles.text, ref: textRef }), item.text),
59
59
  React.createElement("span", { className: styles['virtual-item'], ref: virtualTextRef }, item.text)),
60
60
  showPopover && popoverContent));
61
61
  };
62
62
  const Item = (_a) => {
63
- var { anchorAttributes, dataAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "dataAttributes", "children", "isLast"]);
64
- return isLast ? (React.createElement("span", Object.assign({}, itemAttributes, dataAttributes), children)) : (React.createElement("a", Object.assign({}, itemAttributes, anchorAttributes, dataAttributes), children));
63
+ var { anchorAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "children", "isLast"]);
64
+ return isLast ? (React.createElement("span", Object.assign({}, itemAttributes), children)) : (React.createElement("a", Object.assign({}, itemAttributes, anchorAttributes), children));
65
65
  };
66
66
  export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast = false, isCompressed = false, }) {
67
67
  const preventDefault = (event) => event.preventDefault();
@@ -78,13 +78,13 @@ export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast =
78
78
  href: item.href || '#',
79
79
  onClick: isLast ? preventDefault : onClickHandler,
80
80
  };
81
- const dataAttibutes = {};
81
+ const funnelAttributes = {};
82
82
  if (isLast) {
83
- dataAttibutes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
83
+ funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
84
84
  }
85
85
  return (React.createElement("div", { className: clsx(styles.breadcrumb, isLast && styles.last) },
86
- isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes, dataAttibutes),
87
- React.createElement("span", { className: styles.text }, item.text))),
86
+ isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes, funnelAttributes: funnelAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes),
87
+ React.createElement("span", Object.assign({}, funnelAttributes, { className: styles.text }), item.text))),
88
88
  !isLast ? (React.createElement("span", { className: styles.icon },
89
89
  React.createElement(InternalIcon, { name: "angle-right" }))) : null));
90
90
  }
package/breadcrumb-group/item/item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAQ5E,MAAM,yBAAyB,GAAG,CAAsC,EAKpC,EAAE,EAAE;QALgC,EACtE,IAAI,EACJ,MAAM,EACN,gBAAgB,OAEkB,EAD/B,cAAc,cAJqD,sCAKvE,CADkB;IAEjB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEjD,MAAM,WAAW,GAAG,CAAC,OAAqC,EAAE,cAA4C,EAAE,EAAE;QAC1G,IAAI,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC9E,OAAO,KAAK,CAAC;SACd;QACD,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAC9E,MAAM,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAChE,IAAI,gBAAgB,GAAG,SAAS,EAAE;YAChC,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CACrB,oBAAC,MAAM;QACL,6BAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;YACpC,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,GAAG,EAAE,CAAC,CACL,oBAAC,gBAAgB,IACf,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,QAAQ,EAAE,CAAC,CAAC;oBACpF,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI;oBAChD,6BAAK,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,GAAI,CAC5C,CACP;gBAED,oBAAC,WAAW,IAAC,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,MAAM,EAAE,SAAS,IACnG,IAAI,CAAC,IAAI,CACE,CACG,CACpB,CACU,CACT,CACC,CACV,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;QACH,CAAC,CAAC;QACF,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;SACjD;QACD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL;QACE,oBAAC,IAAI,kBACH,MAAM,EAAE,MAAM,IACV,cAAc,IAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,YAAY,EAAE,GAAG,EAAE;gBACjB,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC;YAC/D,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACzC,gBAAgB,EAAE,gBAAgB;YAElC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,IACvC,IAAI,CAAC,IAAI,CACL;YACP,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,cAAc,IACzD,IAAI,CAAC,IAAI,CACL,CACF;QACN,WAAW,IAAI,cAAc,CAC7B,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,IAAI,GAAG,CAAC,EAAoF,EAAE,EAAE;QAAxF,EAAE,gBAAgB,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,OAAgC,EAA3B,cAAc,cAAvE,4DAAyE,CAAF;IACnF,OAAA,MAAM,CAAC,CAAC,CAAC,CACP,8CAAU,cAAc,EAAM,cAAc,GACzC,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,2CAAO,cAAc,EAAM,gBAAgB,EAAM,cAAc,GAC5D,QAAQ,CACP,CACL,CAAA;CAAA,CAAC;AAEJ,MAAM,UAAU,cAAc,CAAsC,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAM,GAAG,KAAK,EACd,YAAY,GAAG,KAAK,GACG;IACvB,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,MAAM,cAAc,GAAsC;QACxD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;KACtE,CAAC;IACF,MAAM,gBAAgB,GAAkD;QACtE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG;QACtB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc;KAClD,CAAC;IAEF,MAAM,aAAa,GAA2B,EAAE,CAAC;IACjD,IAAI,MAAM,EAAE;QACV,aAAa,CAAC,oBAAoB,CAAC,GAAG,sBAAsB,CAAC;KAC9D;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC;QAC3D,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,CAC7B,oBAAC,yBAAyB,kBACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,IAC9B,cAAc,EAClB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,kBAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,cAAc,EAAM,aAAa;YAC7F,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC3C,CACR;QACA,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;YAC1B,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,GAAG,CAC9B,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n dataAttributes?: React.DataHTMLAttributes<HTMLElement>;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, dataAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes} {...dataAttributes}>\n {children}\n </span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes} {...dataAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const dataAttibutes: Record<string, string> = {};\n if (isLast) {\n dataAttibutes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes} {...dataAttibutes}>\n <span className={styles.text}>{item.text}</span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"item.js","sourceRoot":"lib/default/","sources":["breadcrumb-group/item/item.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, useState } from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\nimport { Transition } from '../../internal/components/transition';\nimport PopoverContainer from '../../popover/container';\nimport PopoverBody from '../../popover/body';\nimport Portal from '../../internal/components/portal';\nimport popoverStyles from '../../popover/styles.css.js';\nimport { DATA_ATTR_FUNNEL_KEY } from '../../internal/analytics/selectors';\nimport { FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n item: T;\n isLast: boolean;\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n funnelAttributes: Record<string, string>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n item,\n isLast,\n anchorAttributes,\n funnelAttributes,\n ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n const [showPopover, setShowPopover] = useState(false);\n const textRef = useRef<HTMLElement>(null);\n const virtualTextRef = useRef<HTMLElement>(null);\n\n const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n return false;\n }\n const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n const textWidth = textRef.current.getBoundingClientRect().width;\n if (virtualTextWidth > textWidth) {\n return true;\n }\n return false;\n };\n\n const popoverContent = (\n <Portal>\n <div className={styles['item-popover']}>\n <Transition in={true}>\n {() => (\n <PopoverContainer\n trackRef={textRef}\n size=\"small\"\n fixedWidth={false}\n position=\"bottom\"\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n >\n <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={() => {}} header={undefined}>\n {item.text}\n </PopoverBody>\n </PopoverContainer>\n )}\n </Transition>\n </div>\n </Portal>\n );\n\n useEffect(() => {\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setShowPopover(false);\n }\n };\n if (showPopover) {\n document.addEventListener('keydown', onKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [showPopover]);\n\n return (\n <>\n <Item\n isLast={isLast}\n {...itemAttributes}\n onFocus={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onBlur={() => setShowPopover(false)}\n onMouseEnter={() => {\n isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n }}\n onMouseLeave={() => setShowPopover(false)}\n anchorAttributes={anchorAttributes}\n >\n <span {...funnelAttributes} className={styles.text} ref={textRef}>\n {item.text}\n </span>\n <span className={styles['virtual-item']} ref={virtualTextRef}>\n {item.text}\n </span>\n </Item>\n {showPopover && popoverContent}\n </>\n );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n isLast ? (\n <span {...itemAttributes}>{children}</span>\n ) : (\n <a {...itemAttributes} {...anchorAttributes}>\n {children}\n </a>\n );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isDisplayed,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n\n const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n };\n const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n href: item.href || '#',\n onClick: isLast ? preventDefault : onClickHandler,\n };\n\n const funnelAttributes: Record<string, string> = {};\n if (isLast) {\n funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n }\n\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n {isDisplayed && isCompressed ? (\n <BreadcrumbItemWithPopover\n item={item}\n isLast={isLast}\n anchorAttributes={anchorAttributes}\n funnelAttributes={funnelAttributes}\n {...itemAttributes}\n />\n ) : (\n <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n <span {...funnelAttributes} className={styles.text}>\n {item.text}\n </span>\n </Item>\n )}\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
package/header/internal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAkErB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,sBAgBhH"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,UAAU,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACpG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,IAAI,EACJ,iBAAwB,EACxB,wBAAwB,EACxB,GAAG,SAAS,EACb,EAAE,mBAAmB,eAuErB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,sBAgBhH"}
package/header/internal.js CHANGED
@@ -38,7 +38,7 @@ export default function InternalHeader(_a) {
38
38
  info && (React.createElement(InfoLinkLabelContext.Provider, { value: headingId },
39
39
  React.createElement("span", { className: styles['virtual-space'] }, " \u00A0"),
40
40
  React.createElement("span", { className: styles.info }, info)))),
41
- actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh) }, actions))),
41
+ actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh, !__disableActionsWrapping && [styles['actions-centered']]) }, actions))),
42
42
  React.createElement(Description, { variantOverride: variantOverride }, description)));
43
43
  }
44
44
  export function Description({ children, variantOverride }) {
package/header/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/internal.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 clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n variant,\n headingTagOverride,\n children,\n actions,\n counter,\n description,\n info,\n __internalRootRef = null,\n __disableActionsWrapping,\n ...restProps\n}: InternalHeaderProps) {\n const isMobile = useMobile();\n const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n const { isStuck } = useContext(StickyHeaderContext);\n const baseProps = getBaseProps(restProps);\n const isRefresh = useVisualRefresh();\n const assignHeaderId = useContext(CollectionLabelContext).assignId;\n const headingId = useUniqueId('heading');\n if (assignHeaderId !== undefined) {\n assignHeaderId(headingId);\n }\n // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n return (\n <div\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n styles[`root-variant-${variantOverride}`],\n isRefresh && styles.refresh,\n !actions && [styles[`root-no-actions`]],\n description && [styles[`root-has-description`]]\n )}\n ref={__internalRootRef}\n >\n <div\n className={clsx(\n styles.main,\n styles[`main-variant-${variantOverride}`],\n isRefresh && styles.refresh,\n __disableActionsWrapping && [styles['no-wrap']]\n )}\n >\n <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n <span\n {...(HeadingTag === 'h2' ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n id={headingId}\n >\n {children}\n </span>\n {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n </HeadingTag>\n {info && (\n <InfoLinkLabelContext.Provider value={headingId}>\n {/* Exists to create a space between heading text and info so that a double-click selection on the last word of the heading doesn't also include info */}\n <span className={styles['virtual-space']}> &nbsp;</span>\n <span className={styles.info}>{info}</span>\n </InfoLinkLabelContext.Provider>\n )}\n </div>\n {actions && (\n <div\n className={clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles.refresh)}\n >\n {actions}\n </div>\n )}\n </div>\n <Description variantOverride={variantOverride}>{description}</Description>\n </div>\n );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n const isRefresh = useVisualRefresh();\n return (\n (children && (\n <p\n className={clsx(\n styles.description,\n styles[`description-variant-${variantOverride}`],\n isRefresh && styles.refresh\n )}\n >\n {children}\n </p>\n )) ||\n null\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/internal.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 clsx from 'clsx';\nimport React, { useContext } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { HeaderProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../internal/analytics/selectors';\n\ninterface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, InternalBaseComponentProps {\n __disableActionsWrapping?: boolean;\n}\n\nexport default function InternalHeader({\n variant,\n headingTagOverride,\n children,\n actions,\n counter,\n description,\n info,\n __internalRootRef = null,\n __disableActionsWrapping,\n ...restProps\n}: InternalHeaderProps) {\n const isMobile = useMobile();\n const HeadingTag = headingTagOverride ?? (variant === 'awsui-h1-sticky' ? 'h1' : variant);\n const { isStuck } = useContext(StickyHeaderContext);\n const baseProps = getBaseProps(restProps);\n const isRefresh = useVisualRefresh();\n const assignHeaderId = useContext(CollectionLabelContext).assignId;\n const headingId = useUniqueId('heading');\n if (assignHeaderId !== undefined) {\n assignHeaderId(headingId);\n }\n // If is mobile there is no need to have the dynamic variant because it's scrolled out of view\n const dynamicVariant = !isMobile && isStuck ? 'h2' : 'h1';\n const variantOverride = variant === 'awsui-h1-sticky' ? (isRefresh ? dynamicVariant : 'h2') : variant;\n\n return (\n <div\n {...baseProps}\n className={clsx(\n styles.root,\n baseProps.className,\n styles[`root-variant-${variantOverride}`],\n isRefresh && styles.refresh,\n !actions && [styles[`root-no-actions`]],\n description && [styles[`root-has-description`]]\n )}\n ref={__internalRootRef}\n >\n <div\n className={clsx(\n styles.main,\n styles[`main-variant-${variantOverride}`],\n isRefresh && styles.refresh,\n __disableActionsWrapping && [styles['no-wrap']]\n )}\n >\n <div className={clsx(styles.title, styles[`title-variant-${variantOverride}`], isRefresh && styles.refresh)}>\n <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n <span\n {...(HeadingTag === 'h2' ? { [DATA_ATTR_FUNNEL_KEY]: FUNNEL_KEY_SUBSTEP_NAME } : {})}\n className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}\n id={headingId}\n >\n {children}\n </span>\n {counter !== undefined && <span className={styles.counter}> {counter}</span>}\n </HeadingTag>\n {info && (\n <InfoLinkLabelContext.Provider value={headingId}>\n {/* Exists to create a space between heading text and info so that a double-click selection on the last word of the heading doesn't also include info */}\n <span className={styles['virtual-space']}> &nbsp;</span>\n <span className={styles.info}>{info}</span>\n </InfoLinkLabelContext.Provider>\n )}\n </div>\n {actions && (\n <div\n className={clsx(\n styles.actions,\n styles[`actions-variant-${variantOverride}`],\n isRefresh && styles.refresh,\n !__disableActionsWrapping && [styles['actions-centered']]\n )}\n >\n {actions}\n </div>\n )}\n </div>\n <Description variantOverride={variantOverride}>{description}</Description>\n </div>\n );\n}\n\nexport function Description({ children, variantOverride }: { children: React.ReactNode; variantOverride: string }) {\n const isRefresh = useVisualRefresh();\n return (\n (children && (\n <p\n className={clsx(\n styles.description,\n styles[`description-variant-${variantOverride}`],\n isRefresh && styles.refresh\n )}\n >\n {children}\n </p>\n )) ||\n null\n );\n}\n"]}
package/header/styles.css.js CHANGED
@@ -1,38 +1,39 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_2qdw9_d8n9o_93",
5
- "refresh": "awsui_refresh_2qdw9_d8n9o_110",
6
- "root-no-actions": "awsui_root-no-actions_2qdw9_d8n9o_110",
7
- "root-variant-h2": "awsui_root-variant-h2_2qdw9_d8n9o_113",
8
- "root-variant-h3": "awsui_root-variant-h3_2qdw9_d8n9o_113",
9
- "root-has-description": "awsui_root-has-description_2qdw9_d8n9o_113",
10
- "root-variant-h1": "awsui_root-variant-h1_2qdw9_d8n9o_122",
11
- "main": "awsui_main_2qdw9_d8n9o_132",
12
- "no-wrap": "awsui_no-wrap_2qdw9_d8n9o_142",
13
- "main-variant-h1": "awsui_main-variant-h1_2qdw9_d8n9o_148",
14
- "actions": "awsui_actions_2qdw9_d8n9o_156",
15
- "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_d8n9o_160",
16
- "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_d8n9o_163",
17
- "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_d8n9o_166",
18
- "title": "awsui_title_2qdw9_d8n9o_179",
19
- "title-variant-h1": "awsui_title-variant-h1_2qdw9_d8n9o_184",
20
- "title-variant-h2": "awsui_title-variant-h2_2qdw9_d8n9o_191",
21
- "title-variant-h3": "awsui_title-variant-h3_2qdw9_d8n9o_197",
22
- "virtual-space": "awsui_virtual-space_2qdw9_d8n9o_218",
23
- "info": "awsui_info_2qdw9_d8n9o_224",
24
- "description": "awsui_description_2qdw9_d8n9o_228",
25
- "description-variant-h1": "awsui_description-variant-h1_2qdw9_d8n9o_233",
26
- "description-variant-h2": "awsui_description-variant-h2_2qdw9_d8n9o_237",
27
- "description-variant-h3": "awsui_description-variant-h3_2qdw9_d8n9o_244",
28
- "heading": "awsui_heading_2qdw9_d8n9o_253",
29
- "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_d8n9o_262",
30
- "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_d8n9o_267",
31
- "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_d8n9o_272",
32
- "heading-text": "awsui_heading-text_2qdw9_d8n9o_278",
33
- "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_d8n9o_281",
34
- "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_d8n9o_289",
35
- "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_d8n9o_297",
36
- "counter": "awsui_counter_2qdw9_d8n9o_306"
4
+ "root": "awsui_root_2qdw9_1xihu_93",
5
+ "refresh": "awsui_refresh_2qdw9_1xihu_110",
6
+ "root-no-actions": "awsui_root-no-actions_2qdw9_1xihu_110",
7
+ "root-variant-h2": "awsui_root-variant-h2_2qdw9_1xihu_113",
8
+ "root-variant-h3": "awsui_root-variant-h3_2qdw9_1xihu_113",
9
+ "root-has-description": "awsui_root-has-description_2qdw9_1xihu_113",
10
+ "root-variant-h1": "awsui_root-variant-h1_2qdw9_1xihu_122",
11
+ "main": "awsui_main_2qdw9_1xihu_132",
12
+ "no-wrap": "awsui_no-wrap_2qdw9_1xihu_142",
13
+ "main-variant-h1": "awsui_main-variant-h1_2qdw9_1xihu_148",
14
+ "actions": "awsui_actions_2qdw9_1xihu_156",
15
+ "actions-centered": "awsui_actions-centered_2qdw9_1xihu_161",
16
+ "actions-variant-h1": "awsui_actions-variant-h1_2qdw9_1xihu_164",
17
+ "actions-variant-h2": "awsui_actions-variant-h2_2qdw9_1xihu_167",
18
+ "actions-variant-h3": "awsui_actions-variant-h3_2qdw9_1xihu_170",
19
+ "title": "awsui_title_2qdw9_1xihu_183",
20
+ "title-variant-h1": "awsui_title-variant-h1_2qdw9_1xihu_188",
21
+ "title-variant-h2": "awsui_title-variant-h2_2qdw9_1xihu_195",
22
+ "title-variant-h3": "awsui_title-variant-h3_2qdw9_1xihu_201",
23
+ "virtual-space": "awsui_virtual-space_2qdw9_1xihu_222",
24
+ "info": "awsui_info_2qdw9_1xihu_228",
25
+ "description": "awsui_description_2qdw9_1xihu_232",
26
+ "description-variant-h1": "awsui_description-variant-h1_2qdw9_1xihu_237",
27
+ "description-variant-h2": "awsui_description-variant-h2_2qdw9_1xihu_241",
28
+ "description-variant-h3": "awsui_description-variant-h3_2qdw9_1xihu_248",
29
+ "heading": "awsui_heading_2qdw9_1xihu_257",
30
+ "heading-variant-h1": "awsui_heading-variant-h1_2qdw9_1xihu_266",
31
+ "heading-variant-h2": "awsui_heading-variant-h2_2qdw9_1xihu_271",
32
+ "heading-variant-h3": "awsui_heading-variant-h3_2qdw9_1xihu_276",
33
+ "heading-text": "awsui_heading-text_2qdw9_1xihu_282",
34
+ "heading-text-variant-h1": "awsui_heading-text-variant-h1_2qdw9_1xihu_285",
35
+ "heading-text-variant-h2": "awsui_heading-text-variant-h2_2qdw9_1xihu_293",
36
+ "heading-text-variant-h3": "awsui_heading-text-variant-h3_2qdw9_1xihu_301",
37
+ "counter": "awsui_counter_2qdw9_1xihu_310"
37
38
  };
38
39
 
package/header/styles.scoped.css CHANGED
@@ -90,7 +90,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_root_2qdw9_d8n9o_93:not(#\9) {
93
+ .awsui_root_2qdw9_1xihu_93:not(#\9) {
94
94
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
95
95
  border-collapse: separate;
96
96
  border-spacing: 0;
@@ -133,29 +133,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
133
133
  flex-wrap: wrap;
134
134
  justify-content: space-between;
135
135
  }
136
- .awsui_root_2qdw9_d8n9o_93.awsui_refresh_2qdw9_d8n9o_110:not(#\9), .awsui_root_2qdw9_d8n9o_93:not(#\9):not(.awsui_root-no-actions_2qdw9_d8n9o_110) {
136
+ .awsui_root_2qdw9_1xihu_93.awsui_refresh_2qdw9_1xihu_110:not(#\9), .awsui_root_2qdw9_1xihu_93:not(#\9):not(.awsui_root-no-actions_2qdw9_1xihu_110) {
137
137
  row-gap: var(--space-scaled-xxs-7597g1, 4px);
138
138
  }
139
- .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_root-variant-h2_2qdw9_d8n9o_113:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110), .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_root-variant-h3_2qdw9_d8n9o_113:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110), .awsui_root-has-description_2qdw9_d8n9o_113.awsui_root-variant-h2_2qdw9_d8n9o_113:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110), .awsui_root-has-description_2qdw9_d8n9o_113.awsui_root-variant-h3_2qdw9_d8n9o_113:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
139
+ .awsui_root-no-actions_2qdw9_1xihu_110.awsui_root-variant-h2_2qdw9_1xihu_113:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110), .awsui_root-no-actions_2qdw9_1xihu_110.awsui_root-variant-h3_2qdw9_1xihu_113:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110), .awsui_root-has-description_2qdw9_1xihu_113.awsui_root-variant-h2_2qdw9_1xihu_113:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110), .awsui_root-has-description_2qdw9_1xihu_113.awsui_root-variant-h3_2qdw9_1xihu_113:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
140
140
  padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
141
141
  }
142
- .awsui_root-no-actions_2qdw9_d8n9o_110:not(#\9):not(.awsui_root-has-description_2qdw9_d8n9o_113):not(.awsui_refresh_2qdw9_d8n9o_110) {
142
+ .awsui_root-no-actions_2qdw9_1xihu_110:not(#\9):not(.awsui_root-has-description_2qdw9_1xihu_113):not(.awsui_refresh_2qdw9_1xihu_110) {
143
143
  padding-bottom: calc(var(--space-scaled-xs-26e2du, 8px) + var(--space-xxxs-zbmxqb, 2px));
144
144
  }
145
- .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_refresh_2qdw9_d8n9o_110.awsui_root-variant-h2_2qdw9_d8n9o_113:not(#\9), .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_refresh_2qdw9_d8n9o_110.awsui_root-variant-h3_2qdw9_d8n9o_113:not(#\9) {
145
+ .awsui_root-no-actions_2qdw9_1xihu_110.awsui_refresh_2qdw9_1xihu_110.awsui_root-variant-h2_2qdw9_1xihu_113:not(#\9), .awsui_root-no-actions_2qdw9_1xihu_110.awsui_refresh_2qdw9_1xihu_110.awsui_root-variant-h3_2qdw9_1xihu_113:not(#\9) {
146
146
  row-gap: var(--space-scaled-xxxs-27y4hv, 2px);
147
147
  }
148
- .awsui_root_2qdw9_d8n9o_93.awsui_root-variant-h1_2qdw9_d8n9o_122:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
148
+ .awsui_root_2qdw9_1xihu_93.awsui_root-variant-h1_2qdw9_1xihu_122:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
149
149
  row-gap: var(--space-scaled-xxs-7597g1, 4px);
150
150
  }
151
- .awsui_root-no-actions_2qdw9_d8n9o_110:not(#\9):not(.awsui_root-has-description_2qdw9_d8n9o_113).awsui_refresh_2qdw9_d8n9o_110.awsui_root-variant-h3_2qdw9_d8n9o_113 {
151
+ .awsui_root-no-actions_2qdw9_1xihu_110:not(#\9):not(.awsui_root-has-description_2qdw9_1xihu_113).awsui_refresh_2qdw9_1xihu_110.awsui_root-variant-h3_2qdw9_1xihu_113 {
152
152
  padding-bottom: var(--space-scaled-xs-26e2du, 8px);
153
153
  }
154
- .awsui_root_2qdw9_d8n9o_93.awsui_root-variant-h1_2qdw9_d8n9o_122.awsui_root-has-description_2qdw9_d8n9o_113:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
154
+ .awsui_root_2qdw9_1xihu_93.awsui_root-variant-h1_2qdw9_1xihu_122.awsui_root-has-description_2qdw9_1xihu_113:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
155
155
  padding-bottom: var(--space-scaled-2x-xxs-7v8ivz, 4px);
156
156
  }
157
157
 
158
- .awsui_main_2qdw9_d8n9o_132:not(#\9) {
158
+ .awsui_main_2qdw9_1xihu_132:not(#\9) {
159
159
  word-wrap: break-word;
160
160
  max-width: 100%;
161
161
  display: flex;
@@ -165,146 +165,150 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
165
165
  column-gap: var(--space-xs-zb16t3, 8px);
166
166
  row-gap: calc(var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxxs-27y4hv, 2px));
167
167
  }
168
- .awsui_main_2qdw9_d8n9o_132.awsui_no-wrap_2qdw9_d8n9o_142:not(#\9) {
168
+ .awsui_main_2qdw9_1xihu_132.awsui_no-wrap_2qdw9_1xihu_142:not(#\9) {
169
169
  flex-wrap: nowrap;
170
170
  }
171
- .awsui_main_2qdw9_d8n9o_132.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
171
+ .awsui_main_2qdw9_1xihu_132.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
172
172
  row-gap: var(--space-xxs-p8yyaw, 4px);
173
173
  }
174
- .awsui_main-variant-h1_2qdw9_d8n9o_148:not(#\9) {
174
+ .awsui_main-variant-h1_2qdw9_1xihu_148:not(#\9) {
175
175
  row-gap: var(--space-scaled-2x-xxs-7v8ivz, 4px);
176
176
  }
177
177
 
178
- .awsui_root-has-description_2qdw9_d8n9o_113 > .awsui_main_2qdw9_d8n9o_132:not(#\9) {
178
+ .awsui_root-has-description_2qdw9_1xihu_113 > .awsui_main_2qdw9_1xihu_132:not(#\9) {
179
179
  row-gap: var(--space-scaled-2x-xxs-7v8ivz, 4px);
180
180
  }
181
181
 
182
- .awsui_actions_2qdw9_d8n9o_156:not(#\9) {
182
+ .awsui_actions_2qdw9_1xihu_156:not(#\9) {
183
183
  display: flex;
184
184
  align-items: flex-start;
185
+ min-height: var(--size-vertical-input-v5iwwf, 32px);
185
186
  }
186
- .awsui_actions-variant-h1_2qdw9_d8n9o_160.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
187
+ .awsui_actions-centered_2qdw9_1xihu_161:not(#\9) {
188
+ align-items: center;
189
+ }
190
+ .awsui_actions-variant-h1_2qdw9_1xihu_164.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
187
191
  padding: calc((var(--line-height-heading-xl-avbttk, 30px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
188
192
  }
189
- .awsui_actions-variant-h2_2qdw9_d8n9o_163.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
193
+ .awsui_actions-variant-h2_2qdw9_1xihu_167.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
190
194
  padding: calc((var(--line-height-heading-l-mmm3my, 24px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
191
195
  }
192
- .awsui_actions-variant-h3_2qdw9_d8n9o_166.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
196
+ .awsui_actions-variant-h3_2qdw9_1xihu_170.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
193
197
  padding: calc((var(--line-height-heading-m-50evfk, 22px) - var(--size-vertical-input-v5iwwf, 32px)) / 2) 0;
194
198
  }
195
- .awsui_actions-variant-h1_2qdw9_d8n9o_160:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
199
+ .awsui_actions-variant-h1_2qdw9_1xihu_164:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
196
200
  padding: var(--space-scaled-xs-26e2du, 8px) 0;
197
201
  }
198
- .awsui_actions-variant-h2_2qdw9_d8n9o_163:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110), .awsui_actions-variant-h3_2qdw9_d8n9o_166:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
202
+ .awsui_actions-variant-h2_2qdw9_1xihu_167:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110), .awsui_actions-variant-h3_2qdw9_1xihu_170:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
199
203
  padding: var(--space-scaled-xxs-7597g1, 4px) 0;
200
204
  }
201
- .awsui_root-has-description_2qdw9_d8n9o_113 > .awsui_main_2qdw9_d8n9o_132 > .awsui_actions_2qdw9_d8n9o_156:not(#\9) {
205
+ .awsui_root-has-description_2qdw9_1xihu_113 > .awsui_main_2qdw9_1xihu_132 > .awsui_actions_2qdw9_1xihu_156:not(#\9) {
202
206
  padding-bottom: 0;
203
207
  }
204
208
 
205
- .awsui_title_2qdw9_d8n9o_179:not(#\9) {
209
+ .awsui_title_2qdw9_1xihu_183:not(#\9) {
206
210
  min-width: 0;
207
211
  word-break: break-word;
208
212
  color: var(--color-text-heading-default-rtslvy, #000716);
209
213
  }
210
- .awsui_title-variant-h1_2qdw9_d8n9o_184:not(#\9) {
214
+ .awsui_title-variant-h1_2qdw9_1xihu_188:not(#\9) {
211
215
  font-size: var(--font-size-heading-xl-ypc05a, 24px);
212
216
  padding-top: var(--space-scaled-2x-xxs-7v8ivz, 4px);
213
217
  }
214
- .awsui_title-variant-h1_2qdw9_d8n9o_184.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
218
+ .awsui_title-variant-h1_2qdw9_1xihu_188.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
215
219
  padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-xl-avbttk, 30px)) / 2);
216
220
  }
217
- .awsui_title-variant-h2_2qdw9_d8n9o_191:not(#\9) {
221
+ .awsui_title-variant-h2_2qdw9_1xihu_195:not(#\9) {
218
222
  font-size: var(--font-size-heading-l-ou0d0l, 20px);
219
223
  }
220
- .awsui_title-variant-h2_2qdw9_d8n9o_191.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
224
+ .awsui_title-variant-h2_2qdw9_1xihu_195.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
221
225
  padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-l-mmm3my, 24px)) / 2);
222
226
  }
223
- .awsui_title-variant-h3_2qdw9_d8n9o_197:not(#\9) {
227
+ .awsui_title-variant-h3_2qdw9_1xihu_201:not(#\9) {
224
228
  font-size: var(--font-size-heading-m-sjd256, 18px);
225
229
  }
226
- .awsui_title-variant-h3_2qdw9_d8n9o_197.awsui_refresh_2qdw9_d8n9o_110:not(#\9) {
230
+ .awsui_title-variant-h3_2qdw9_1xihu_201.awsui_refresh_2qdw9_1xihu_110:not(#\9) {
227
231
  padding-top: calc((var(--size-vertical-input-v5iwwf, 32px) - var(--line-height-heading-m-50evfk, 22px)) / 2);
228
232
  }
229
- .awsui_title-variant-h2_2qdw9_d8n9o_191:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110), .awsui_title-variant-h3_2qdw9_d8n9o_197:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
233
+ .awsui_title-variant-h2_2qdw9_1xihu_195:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110), .awsui_title-variant-h3_2qdw9_1xihu_201:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
230
234
  padding-top: var(--space-scaled-xs-26e2du, 8px);
231
235
  }
232
- .awsui_no-wrap_2qdw9_d8n9o_142 > .awsui_title_2qdw9_d8n9o_179:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
236
+ .awsui_no-wrap_2qdw9_1xihu_142 > .awsui_title_2qdw9_1xihu_183:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
233
237
  padding-bottom: calc(var(--space-scaled-xxs-7597g1, 4px) + var(--space-scaled-xxxs-27y4hv, 2px));
234
238
  }
235
239
 
236
- .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_root-has-description_2qdw9_d8n9o_113 > .awsui_main_2qdw9_d8n9o_132 > :not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110).awsui_title-variant-h2_2qdw9_d8n9o_191, .awsui_root-no-actions_2qdw9_d8n9o_110.awsui_root-has-description_2qdw9_d8n9o_113 > .awsui_main_2qdw9_d8n9o_132 > :not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110).awsui_title-variant-h3_2qdw9_d8n9o_197 {
240
+ .awsui_root-no-actions_2qdw9_1xihu_110.awsui_root-has-description_2qdw9_1xihu_113 > .awsui_main_2qdw9_1xihu_132 > :not(#\9):not(.awsui_refresh_2qdw9_1xihu_110).awsui_title-variant-h2_2qdw9_1xihu_195, .awsui_root-no-actions_2qdw9_1xihu_110.awsui_root-has-description_2qdw9_1xihu_113 > .awsui_main_2qdw9_1xihu_132 > :not(#\9):not(.awsui_refresh_2qdw9_1xihu_110).awsui_title-variant-h3_2qdw9_1xihu_201 {
237
241
  padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
238
242
  }
239
243
 
240
- .awsui_root-variant-h1_2qdw9_d8n9o_122.awsui_root-no-actions_2qdw9_d8n9o_110:not(#\9):not(.awsui_root-has-description_2qdw9_d8n9o_113):not(.awsui_refresh_2qdw9_d8n9o_110) {
244
+ .awsui_root-variant-h1_2qdw9_1xihu_122.awsui_root-no-actions_2qdw9_1xihu_110:not(#\9):not(.awsui_root-has-description_2qdw9_1xihu_113):not(.awsui_refresh_2qdw9_1xihu_110) {
241
245
  padding-bottom: var(--space-scaled-2x-xxs-7v8ivz, 4px);
242
246
  }
243
247
 
244
- .awsui_virtual-space_2qdw9_d8n9o_218:not(#\9) {
248
+ .awsui_virtual-space_2qdw9_1xihu_222:not(#\9) {
245
249
  position: absolute !important;
246
250
  top: -9999px !important;
247
251
  left: -9999px !important;
248
252
  }
249
253
 
250
- .awsui_info_2qdw9_d8n9o_224:not(#\9) {
254
+ .awsui_info_2qdw9_1xihu_228:not(#\9) {
251
255
  padding-right: var(--space-s-34lx8l, 12px);
252
256
  }
253
257
 
254
- .awsui_description_2qdw9_d8n9o_228:not(#\9) {
258
+ .awsui_description_2qdw9_1xihu_232:not(#\9) {
255
259
  margin: 0;
256
260
  padding: 0;
257
261
  color: var(--color-text-heading-secondary-37b2tq, #414d5c);
258
262
  }
259
- .awsui_description-variant-h1_2qdw9_d8n9o_233:not(#\9) {
263
+ .awsui_description-variant-h1_2qdw9_1xihu_237:not(#\9) {
260
264
  font-size: var(--font-size-body-m-x4okxb, 14px);
261
265
  line-height: var(--line-height-body-m-30ar75, 20px);
262
266
  }
263
- .awsui_description-variant-h2_2qdw9_d8n9o_237:not(#\9) {
267
+ .awsui_description-variant-h2_2qdw9_1xihu_241:not(#\9) {
264
268
  font-size: var(--font-header-h2-description-size-2hj97p, 14px);
265
269
  line-height: var(--font-header-h2-description-line-height-rtewek, 20px);
266
270
  }
267
- .awsui_description-variant-h2_2qdw9_d8n9o_237:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
271
+ .awsui_description-variant-h2_2qdw9_1xihu_241:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
268
272
  padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
269
273
  }
270
- .awsui_description-variant-h3_2qdw9_d8n9o_244:not(#\9) {
274
+ .awsui_description-variant-h3_2qdw9_1xihu_248:not(#\9) {
271
275
  font-size: var(--font-size-body-s-asqx2i, 12px);
272
276
  line-height: var(--line-height-body-s-7zv1j5, 16px);
273
277
  letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
274
278
  }
275
- .awsui_description-variant-h3_2qdw9_d8n9o_244:not(#\9):not(.awsui_refresh_2qdw9_d8n9o_110) {
279
+ .awsui_description-variant-h3_2qdw9_1xihu_248:not(#\9):not(.awsui_refresh_2qdw9_1xihu_110) {
276
280
  padding-bottom: var(--space-scaled-xxs-7597g1, 4px);
277
281
  }
278
282
 
279
- .awsui_heading_2qdw9_d8n9o_253:not(#\9) {
283
+ .awsui_heading_2qdw9_1xihu_257:not(#\9) {
280
284
  margin: 0;
281
285
  display: inline;
282
286
  font-size: inherit;
283
287
  margin-right: var(--space-xs-zb16t3, 8px);
284
288
  }
285
- .awsui_heading_2qdw9_d8n9o_253:not(#\9):only-child {
289
+ .awsui_heading_2qdw9_1xihu_257:not(#\9):only-child {
286
290
  margin: 0;
287
291
  }
288
- .awsui_heading-variant-h1_2qdw9_d8n9o_262:not(#\9) {
292
+ .awsui_heading-variant-h1_2qdw9_1xihu_266:not(#\9) {
289
293
  font-size: var(--font-size-heading-xl-ypc05a, 24px);
290
294
  line-height: var(--line-height-heading-xl-avbttk, 30px);
291
295
  letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
292
296
  }
293
- .awsui_heading-variant-h2_2qdw9_d8n9o_267:not(#\9) {
297
+ .awsui_heading-variant-h2_2qdw9_1xihu_271:not(#\9) {
294
298
  font-size: var(--font-size-heading-l-ou0d0l, 20px);
295
299
  line-height: var(--line-height-heading-l-mmm3my, 24px);
296
300
  letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
297
301
  }
298
- .awsui_heading-variant-h3_2qdw9_d8n9o_272:not(#\9) {
302
+ .awsui_heading-variant-h3_2qdw9_1xihu_276:not(#\9) {
299
303
  font-size: var(--font-size-heading-m-sjd256, 18px);
300
304
  line-height: var(--line-height-heading-m-50evfk, 22px);
301
305
  letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
302
306
  }
303
307
 
304
- .awsui_heading-text_2qdw9_d8n9o_278:not(#\9) {
308
+ .awsui_heading-text_2qdw9_1xihu_282:not(#\9) {
305
309
  /* used in test-utils */
306
310
  }
307
- .awsui_heading-text-variant-h1_2qdw9_d8n9o_281:not(#\9) {
311
+ .awsui_heading-text-variant-h1_2qdw9_1xihu_285:not(#\9) {
308
312
  font-size: var(--font-size-heading-xl-ypc05a, 24px);
309
313
  line-height: var(--line-height-heading-xl-avbttk, 30px);
310
314
  letter-spacing: var(--letter-spacing-heading-xl-sagq9c, -0.02em);
@@ -312,7 +316,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
312
316
  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
313
317
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
314
318
  }
315
- .awsui_heading-text-variant-h2_2qdw9_d8n9o_289:not(#\9) {
319
+ .awsui_heading-text-variant-h2_2qdw9_1xihu_293:not(#\9) {
316
320
  font-size: var(--font-size-heading-l-ou0d0l, 20px);
317
321
  line-height: var(--line-height-heading-l-mmm3my, 24px);
318
322
  letter-spacing: var(--letter-spacing-heading-l-qqjd4y, -0.015em);
@@ -320,7 +324,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
320
324
  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
321
325
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
322
326
  }
323
- .awsui_heading-text-variant-h3_2qdw9_d8n9o_297:not(#\9) {
327
+ .awsui_heading-text-variant-h3_2qdw9_1xihu_301:not(#\9) {
324
328
  font-size: var(--font-size-heading-m-sjd256, 18px);
325
329
  line-height: var(--line-height-heading-m-50evfk, 22px);
326
330
  letter-spacing: var(--letter-spacing-heading-m-0w575i, -0.01em);
@@ -329,7 +333,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
329
333
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
330
334
  }
331
335
 
332
- .awsui_counter_2qdw9_d8n9o_306:not(#\9) {
336
+ .awsui_counter_2qdw9_1xihu_310:not(#\9) {
333
337
  color: var(--color-text-counter-zqugin, #5f6b7a);
334
338
  font-weight: 400;
335
339
  }