@cloudscape-design/components 3.0.304 → 3.0.306

package/expandable-section/internal.d.ts

@@ -2,6 +2,6 @@
 import { ExpandableSectionProps } from './interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 type InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, ...props }: InternalExpandableSectionProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/expandable-section/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/internal.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,KAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eAwFhC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/internal.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,KAAK,8BAA8B,GAAG,sBAAsB,GAAG,0BAA0B,CAAC;AAE1F,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,QAAQ,EAAE,kBAAkB,EAC5B,eAAe,EACf,QAAQ,EACR,OAAmB,EACnB,QAAQ,EACR,MAAM,EACN,UAAU,EACV,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eA0FhC"}

package/expandable-section/internal.js

@@ -13,7 +13,7 @@ import styles from './styles.css.js';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
 export default function InternalExpandableSection(_a) {
-    var { expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "headerText", "headerCounter", "headerDescription", "headingTagOverride", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
+    var { expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef } = _a, props = __rest(_a, ["expanded", "defaultExpanded", "onChange", "variant", "children", "header", "headerText", "headerCounter", "headerDescription", "headerInfo", "headerActions", "headingTagOverride", "disableContentPaddings", "headerAriaLabel", "__internalRootRef"]);
     const ref = useRef(null);
     const controlId = useUniqueId();
     const triggerControlId = `${controlId}-trigger`;
@@ -50,7 +50,7 @@ export default function InternalExpandableSection(_a) {
         onKeyDown,
         onClick,
     };
-    return (React.createElement(ExpandableSectionContainer, Object.assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, Object.assign({ id: triggerControlId, className: clsx(styles.header, styles[`header-${variant}`]), variant: variant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headingTagOverride: headingTagOverride }, triggerProps)), __internalRootRef: __internalRootRef }),
+    return (React.createElement(ExpandableSectionContainer, Object.assign({}, baseProps, { expanded: expanded, className: clsx(baseProps.className, styles.root), variant: variant, disableContentPaddings: disableContentPaddings, header: React.createElement(ExpandableSectionHeader, Object.assign({ id: triggerControlId, className: clsx(styles.header, styles[`header-${variant}`]), variant: variant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride }, triggerProps)), __internalRootRef: __internalRootRef }),
         React.createElement(CSSTransition, { in: expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
             React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy }, children))));
 }

package/expandable-section/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["expandable-section/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, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headingTagOverride={headingTagOverride}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["expandable-section/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, { KeyboardEvent, useCallback, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { KeyCode } from '../internal/keycode';\nimport { fireNonCancelableEvent } from '../internal/events';\n\nimport { ExpandableSectionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalExpandableSectionProps = ExpandableSectionProps & InternalBaseComponentProps;\n\nexport default function InternalExpandableSection({\n  expanded: controlledExpanded,\n  defaultExpanded,\n  onChange,\n  variant = 'default',\n  children,\n  header,\n  headerText,\n  headerCounter,\n  headerDescription,\n  headerInfo,\n  headerActions,\n  headingTagOverride,\n  disableContentPaddings,\n  headerAriaLabel,\n  __internalRootRef,\n  ...props\n}: InternalExpandableSectionProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const controlId = useUniqueId();\n  const triggerControlId = `${controlId}-trigger`;\n\n  const baseProps = getBaseProps(props);\n  const [expanded, setExpanded] = useControllable(controlledExpanded, onChange, defaultExpanded, {\n    componentName: 'ExpandableSection',\n    controlledProp: 'expanded',\n    changeHandler: 'onChange',\n  });\n\n  const onExpandChange = useCallback(\n    (expanded: boolean) => {\n      setExpanded(expanded);\n      fireNonCancelableEvent(onChange, { expanded });\n    },\n    [onChange, setExpanded]\n  );\n\n  const onClick = useCallback(() => {\n    onExpandChange(!expanded);\n  }, [onExpandChange, expanded]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent<Element>) => {\n      const interactionKeys = [KeyCode.enter, KeyCode.space];\n\n      if (interactionKeys.indexOf(event.keyCode) !== -1) {\n        onExpandChange(!expanded);\n      }\n    },\n    [onExpandChange, expanded]\n  );\n\n  const onKeyDown = useCallback((event: KeyboardEvent<Element>) => {\n    if (event.keyCode === KeyCode.space) {\n      // Prevent the page from scrolling when toggling the component with the space bar.\n      event.preventDefault();\n    }\n  }, []);\n\n  const triggerProps = {\n    ariaControls: controlId,\n    ariaLabel: headerAriaLabel,\n    ariaLabelledBy: headerAriaLabel ? undefined : triggerControlId,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n  };\n\n  return (\n    <ExpandableSectionContainer\n      {...baseProps}\n      expanded={expanded}\n      className={clsx(baseProps.className, styles.root)}\n      variant={variant}\n      disableContentPaddings={disableContentPaddings}\n      header={\n        <ExpandableSectionHeader\n          id={triggerControlId}\n          className={clsx(styles.header, styles[`header-${variant}`])}\n          variant={variant}\n          expanded={!!expanded}\n          header={header}\n          headerText={headerText}\n          headerDescription={headerDescription}\n          headerCounter={headerCounter}\n          headerInfo={headerInfo}\n          headerActions={headerActions}\n          headingTagOverride={headingTagOverride}\n          {...triggerProps}\n        />\n      }\n      __internalRootRef={__internalRootRef}\n    >\n      <CSSTransition in={expanded} timeout={30} classNames={{ enter: styles['content-enter'] }} nodeRef={ref}>\n        <div\n          id={controlId}\n          ref={ref}\n          className={clsx(styles.content, styles[`content-${variant}`], expanded && styles['content-expanded'])}\n          role=\"group\"\n          aria-label={triggerProps.ariaLabel}\n          aria-labelledby={triggerProps.ariaLabelledBy}\n        >\n          {children}\n        </div>\n      </CSSTransition>\n    </ExpandableSectionContainer>\n  );\n}\n"]}

package/expandable-section/styles.css.js

@@ -1,29 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_1rozr_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1rozr_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1rozr_119",
-  "icon": "awsui_icon_gwq0h_1rozr_133",
-  "root": "awsui_root_gwq0h_1rozr_151",
-  "expanded": "awsui_expanded_gwq0h_1rozr_171",
-  "icon-container": "awsui_icon-container_gwq0h_1rozr_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1rozr_180",
-  "trigger": "awsui_trigger_gwq0h_1rozr_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1rozr_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1rozr_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1rozr_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_1rozr_216",
-  "header": "awsui_header_gwq0h_1rozr_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1rozr_229",
-  "header-button": "awsui_header-button_gwq0h_1rozr_236",
-  "header-container": "awsui_header-container_gwq0h_1rozr_258",
-  "header-container-button": "awsui_header-container-button_gwq0h_1rozr_273",
-  "header-navigation": "awsui_header-navigation_gwq0h_1rozr_277",
-  "content": "awsui_content_gwq0h_1rozr_97",
-  "content-default": "awsui_content-default_gwq0h_1rozr_313",
-  "content-footer": "awsui_content-footer_gwq0h_1rozr_316",
-  "content-expanded": "awsui_content-expanded_gwq0h_1rozr_319",
-  "focusable": "awsui_focusable_gwq0h_1rozr_323"
+  "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
+  "icon": "awsui_icon_gwq0h_1g95t_133",
+  "root": "awsui_root_gwq0h_1g95t_151",
+  "expanded": "awsui_expanded_gwq0h_1g95t_171",
+  "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
+  "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
+  "header": "awsui_header_gwq0h_1g95t_225",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
+  "header-button": "awsui_header-button_gwq0h_1g95t_235",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
+  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
+  "header-container": "awsui_header-container_gwq0h_1g95t_239",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
+  "content": "awsui_content_gwq0h_1g95t_97",
+  "content-default": "awsui_content-default_gwq0h_1g95t_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
+  "focusable": "awsui_focusable_gwq0h_1g95t_315"
 };
   

package/expandable-section/styles.scoped.css

@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_1rozr_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
+.awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_1g95t_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_1rozr_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_1g95t_1 {
   from {
     opacity: 0.2;
   }
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
+  .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_1rozr_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1rozr_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_1g95t_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1g95t_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
   transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1g95t_119:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133:not(#\9) {
   transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon_gwq0h_1rozr_133:not(#\9) {
+  .awsui_icon_gwq0h_1g95t_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_1rozr_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_1g95t_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1g95t_133:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_gwq0h_1rozr_151:not(#\9) {
+.awsui_root_gwq0h_1g95t_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,24 +191,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
 
-.awsui_icon_gwq0h_1rozr_133:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_1rozr_133.awsui_expanded_gwq0h_1rozr_171:not(#\9) {
+.awsui_icon_gwq0h_1g95t_133.awsui_expanded_gwq0h_1g95t_171:not(#\9) {
   transform: rotate(0deg);
 }
 
-.awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   position: relative;
   margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
   margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
 }
-.awsui_icon-container-container_gwq0h_1rozr_180:not(#\9) {
+.awsui_icon-container-container_gwq0h_1g95t_180:not(#\9) {
   margin-right: var(--space-xs-edba2s, 8px);
 }
 
-.awsui_trigger_gwq0h_1rozr_119:not(#\9) {
-  cursor: pointer;
+.awsui_wrapper_gwq0h_1g95t_184:not(#\9) {
   box-sizing: border-box;
   display: flex;
   border: none;
@@ -216,19 +215,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   line-height: var(--font-body-m-line-height-rfgrp9, 22px);
   text-align: left;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) var(--space-xxs-ja5cp8, 4px);
 }
-.awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) 0;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9), .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   border: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9) {
   border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9), .awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9), .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9), .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9), .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9) {
   color: var(--color-text-expandable-section-default-fvf8va, #000716);
   font-weight: var(--font-heading-s-weight-5y5giq, 800);
   -webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
@@ -236,41 +235,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
   letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
 }
-.awsui_trigger-default_gwq0h_1rozr_193:not(#\9):hover, .awsui_trigger-navigation_gwq0h_1rozr_202:not(#\9):hover, .awsui_trigger-footer_gwq0h_1rozr_196:not(#\9):hover {
+.awsui_wrapper-default_gwq0h_1g95t_192:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_1g95t_201:not(#\9):hover, .awsui_wrapper-footer_gwq0h_1g95t_195:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
 }
-.awsui_trigger-container_gwq0h_1rozr_216:not(#\9) {
+.awsui_wrapper-container_gwq0h_1g95t_215:not(#\9) {
   padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger-container_gwq0h_1rozr_216:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1g95t_215:not(#\9):focus {
   padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
 }
-.awsui_trigger-default_gwq0h_1rozr_193.awsui_trigger-expanded_gwq0h_1rozr_119:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g95t_192.awsui_wrapper-expanded_gwq0h_1g95t_221:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
 }
 
-.awsui_header_gwq0h_1rozr_226:not(#\9) {
+.awsui_header_gwq0h_1g95t_225:not(#\9) {
   display: flex;
 }
-.awsui_header-wrapper_gwq0h_1rozr_229:not(#\9) {
+.awsui_header-wrapper_gwq0h_1g95t_228:not(#\9) {
   font-weight: inherit;
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-button_gwq0h_1rozr_236:not(#\9) {
+.awsui_header-button_gwq0h_1g95t_235:not(#\9) {
   box-sizing: border-box;
   display: flex;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g95t_239:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -281,26 +280,19 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1rozr_236:not(#\9
   border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
 }
-.awsui_header-container_gwq0h_1rozr_258:not(#\9) {
+.awsui_header_gwq0h_1g95t_225:not(#\9):not(.awsui_with-interactive-elements_gwq0h_1g95t_257) {
+  cursor: pointer;
+}
+.awsui_header-container_gwq0h_1g95t_239:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_1rozr_258 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_header-container_gwq0h_1g95t_239 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-container_gwq0h_1rozr_258:not(#\9):focus-within {
-  outline: none;
-  text-decoration: none;
-  padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
-  outline: 2px dotted transparent;
-  border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
-  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
-  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
-}
-body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1rozr_273:not(#\9):focus {
-  outline: none;
-  text-decoration: none;
+.awsui_header-container_gwq0h_1g95t_239.awsui_with-interactive-elements_gwq0h_1g95t_257 .awsui_header-container-button_gwq0h_1g95t_239:not(#\9) {
+  cursor: pointer;
 }
-.awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9) {
+.awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
@@ -311,17 +303,17 @@ body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1rozr_2
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):hover {
+.awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .awsui_icon-container_gwq0h_1rozr_175:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .awsui_icon-container_gwq0h_1g95t_175:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -333,24 +325,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1rozr_277 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
 }
 
-.awsui_content_gwq0h_1rozr_97:not(#\9) {
+.awsui_content_gwq0h_1g95t_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_1rozr_313:not(#\9) {
+.awsui_content-default_gwq0h_1g95t_305:not(#\9) {
   padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
 }
-.awsui_content-footer_gwq0h_1rozr_316:not(#\9) {
+.awsui_content-footer_gwq0h_1g95t_308:not(#\9) {
   padding: var(--space-xs-edba2s, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_1rozr_319:not(#\9) {
+.awsui_content-expanded_gwq0h_1g95t_311:not(#\9) {
   display: block;
 }
 
-.awsui_focusable_gwq0h_1rozr_323:not(#\9):focus {
+.awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1rozr_323:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1g95t_315:not(#\9):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
   border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);

package/expandable-section/styles.selectors.js

@@ -2,29 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_1rozr_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1rozr_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1rozr_119",
-  "icon": "awsui_icon_gwq0h_1rozr_133",
-  "root": "awsui_root_gwq0h_1rozr_151",
-  "expanded": "awsui_expanded_gwq0h_1rozr_171",
-  "icon-container": "awsui_icon-container_gwq0h_1rozr_175",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_1rozr_180",
-  "trigger": "awsui_trigger_gwq0h_1rozr_119",
-  "trigger-default": "awsui_trigger-default_gwq0h_1rozr_193",
-  "trigger-footer": "awsui_trigger-footer_gwq0h_1rozr_196",
-  "trigger-navigation": "awsui_trigger-navigation_gwq0h_1rozr_202",
-  "trigger-container": "awsui_trigger-container_gwq0h_1rozr_216",
-  "header": "awsui_header_gwq0h_1rozr_226",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_1rozr_229",
-  "header-button": "awsui_header-button_gwq0h_1rozr_236",
-  "header-container": "awsui_header-container_gwq0h_1rozr_258",
-  "header-container-button": "awsui_header-container-button_gwq0h_1rozr_273",
-  "header-navigation": "awsui_header-navigation_gwq0h_1rozr_277",
-  "content": "awsui_content_gwq0h_1rozr_97",
-  "content-default": "awsui_content-default_gwq0h_1rozr_313",
-  "content-footer": "awsui_content-footer_gwq0h_1rozr_316",
-  "content-expanded": "awsui_content-expanded_gwq0h_1rozr_319",
-  "focusable": "awsui_focusable_gwq0h_1rozr_323"
+  "content-enter": "awsui_content-enter_gwq0h_1g95t_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g95t_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g95t_119",
+  "icon": "awsui_icon_gwq0h_1g95t_133",
+  "root": "awsui_root_gwq0h_1g95t_151",
+  "expanded": "awsui_expanded_gwq0h_1g95t_171",
+  "icon-container": "awsui_icon-container_gwq0h_1g95t_175",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g95t_180",
+  "wrapper": "awsui_wrapper_gwq0h_1g95t_184",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g95t_192",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g95t_195",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g95t_201",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g95t_215",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g95t_221",
+  "header": "awsui_header_gwq0h_1g95t_225",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g95t_228",
+  "header-button": "awsui_header-button_gwq0h_1g95t_235",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g95t_239",
+  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_1g95t_257",
+  "header-container": "awsui_header-container_gwq0h_1g95t_239",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g95t_269",
+  "content": "awsui_content_gwq0h_1g95t_97",
+  "content-default": "awsui_content-default_gwq0h_1g95t_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g95t_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g95t_311",
+  "focusable": "awsui_focusable_gwq0h_1g95t_315"
 };
   

package/internal/components/chart-plot/index.js

@@ -99,7 +99,7 @@ function ChartPlot(_a, ref) {
                 [styles.precise]: isPrecise,
             }), onMouseDown: onPlotMouseDown, onFocus: onPlotFocus, onBlur: onPlotBlur, onKeyDown: onPlotKeyDown }),
             React.createElement(FocusOutline, { elementRef: svgRef, elementKey: isPlotFocused, offset: focusOffset }),
-            React.createElement("g", { transform: transform, role: "group" },
+            React.createElement("g", { transform: transform },
                 React.createElement(ApplicationController, { activeElementKey: activeElementKey || null, activeElementRef: activeElementRef, ref: applicationRef, onFocus: onApplicationFocus, onBlur: onApplicationBlur, onKeyDown: onApplicationKeyDown }),
                 ariaDescription && plotFocusable && (React.createElement("desc", { "aria-hidden": "true", id: internalDescriptionId }, ariaDescription)),
                 children,

package/internal/components/chart-plot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../i18n/context.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number;\n  height: number;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onMouseDown && onMouseDown(event);\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        width={width}\n        height={height}\n        style={{\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform} role=\"group\">\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/components/chart-plot/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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport { Offset } from '../interfaces';\nimport { useInternalI18n } from '../../i18n/context.js';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n  svg: SVGSVGElement;\n  focusPlot(): void;\n  focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n  width: number;\n  height: number;\n  transform?: string;\n  offsetTop?: number;\n  offsetBottom?: number;\n  offsetLeft?: number;\n  offsetRight?: number;\n  focusOffset?: number;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescription?: string;\n  ariaDescribedby?: string;\n  ariaRoleDescription?: string;\n  activeElementKey?: null | string | number | boolean;\n  activeElementRef?: React.RefObject<SVGGElement>;\n  activeElementFocusOffset?: Offset;\n  ariaLiveRegion?: React.ReactNode;\n  isClickable?: boolean;\n  isPrecise?: boolean;\n  onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n  onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n  onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n  onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n  children: React.ReactNode;\n}\n\n/**\n  An extension for the SVG to be used for charts. It includes a controller element to\n  handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n  The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n  activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n  the focus transition was made.\n\n  Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n  {\n    width,\n    height,\n    transform,\n    offsetTop,\n    offsetBottom,\n    offsetLeft,\n    offsetRight,\n    ariaLabel,\n    ariaLabelledby,\n    ariaRoleDescription,\n    ariaDescription,\n    ariaDescribedby,\n    activeElementKey,\n    activeElementRef,\n    ariaLiveRegion,\n    isClickable,\n    isPrecise,\n    children,\n    onMouseDown,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n    activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n    ...restProps\n  }: ChartPlotProps,\n  ref: React.Ref<ChartPlotRef>\n) {\n  const i18n = useInternalI18n('[charts]');\n  const svgRef = useRef<SVGSVGElement>(null);\n  const applicationRef = useRef<ApplicationRef>(null);\n  const plotClickedRef = useRef(false);\n  const [isPlotFocused, setPlotFocused] = useState(false);\n  const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n  const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n  const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n  useImperativeHandle(ref, () => ({\n    svg: svgRef.current!,\n    focusPlot: () => svgRef.current!.focus(),\n    focusApplication: () => applicationRef.current!.focus(),\n  }));\n\n  const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n    onMouseDown && onMouseDown(event);\n    // Record the click was made for the application focus handler.\n    plotClickedRef.current = true;\n  };\n  const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current && !plotClickedRef.current) {\n      setPlotFocused(true);\n    }\n    // The click should focus the underling application bypassing the svg.\n    else if (plotClickedRef.current) {\n      applicationRef.current!.focus();\n    }\n  };\n  const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n    if (event.target === svgRef.current) {\n      setPlotFocused(false);\n    }\n  };\n  // Once one of the expected keys is pressed the focus is delegated to the application controller.\n  const onPlotKeyDown = (event: React.KeyboardEvent) => {\n    if (isPlotFocused) {\n      // Delegate the focus to the application if one of the expected keys was pressed.\n      const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n      if (codes.indexOf(event.keyCode) !== -1) {\n        applicationRef.current!.focus();\n      }\n    }\n  };\n\n  const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n    onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n    // \"Release\" the click reference to not affect the next call of this handler.\n    plotClickedRef.current = false;\n    setApplicationFocused(true);\n  };\n  const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n    onBlur && onBlur(event);\n    setApplicationFocused(false);\n  };\n  const onApplicationKeyDown = onKeyDown;\n\n  const plotFocusable = !isApplicationFocused;\n  const plotTabIndex = plotFocusable ? 0 : -1;\n  const plotAria = !isApplicationFocused\n    ? {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescriptionId,\n        'aria-roledescription': i18n('i18nStrings.chartAriaRoleDescription', ariaRoleDescription),\n      }\n    : {};\n\n  return (\n    <>\n      <svg\n        {...restProps}\n        focusable={plotFocusable}\n        tabIndex={plotTabIndex}\n        role=\"application\"\n        aria-hidden=\"false\"\n        {...plotAria}\n        ref={svgRef}\n        width={width}\n        height={height}\n        style={{\n          marginTop: offsetTop,\n          marginBottom: offsetBottom,\n          marginLeft: offsetLeft,\n          marginRight: offsetRight,\n        }}\n        className={clsx(styles.root, {\n          [styles.clickable]: isClickable,\n          [styles.precise]: isPrecise,\n        })}\n        onMouseDown={onPlotMouseDown}\n        onFocus={onPlotFocus}\n        onBlur={onPlotBlur}\n        onKeyDown={onPlotKeyDown}\n      >\n        <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n        <g transform={transform}>\n          <ApplicationController\n            activeElementKey={activeElementKey || null}\n            activeElementRef={activeElementRef}\n            ref={applicationRef}\n            onFocus={onApplicationFocus}\n            onBlur={onApplicationBlur}\n            onKeyDown={onApplicationKeyDown}\n          />\n\n          {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n          {ariaDescription && plotFocusable && (\n            <desc aria-hidden=\"true\" id={internalDescriptionId}>\n              {ariaDescription}\n            </desc>\n          )}\n\n          {children}\n\n          <FocusOutline\n            elementRef={activeElementRef}\n            elementKey={isApplicationFocused && activeElementKey}\n            offset={activeElementFocusOffset}\n          />\n        </g>\n      </svg>\n\n      <LiveRegion>{ariaLiveRegion}</LiveRegion>\n    </>\n  );\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (d6b4e10)';
+    export var PACKAGE_VERSION = '3.0.0 (bfa6bc4)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "d6b4e10cdd6684bbe9c86149d649902bca3b73af"
+  "commit": "bfa6bc4f3a10f4d47841c4324d617db0adea028b"
 }

package/package.json

@@ -136,7 +136,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.304",
+  "version": "3.0.306",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/tag-editor/index.js

@@ -166,7 +166,7 @@ const TagEditor = React.forwardRef((_a, ref) => {
                 React.createElement(LiveRegion, { visible: true }, i18n('i18nStrings.loading', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.loading)))));
     }
     const baseProps = getBaseProps(restProps);
-    return (React.createElement(InternalAttributeEditor, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx(styles.root, baseProps.className), items: internalTags, isItemRemovable: isItemRemovable, onAddButtonClick: onAddButtonClick, onRemoveButtonClick: onRemoveButtonClick, addButtonText: (_b = i18n('i18nStrings.addButton', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : '', removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n('i18nStrings.emptyTags', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), additionalInfo: remainingTags < 0 ? (React.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n('i18nStrings.tagLimitExceeded', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _d !== void 0 ? _d : '')) : remainingTags === 0 ? ((_f = i18n('i18nStrings.tagLimitReached', (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _f !== void 0 ? _f : '') : (i18n('i18nStrings.tagLimit', (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), format => format({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags }))), definition: definition, i18nStrings: forwardedI18nStrings })));
+    return (React.createElement(InternalAttributeEditor, Object.assign({}, baseProps, baseComponentProps, { ref: attributeEditorRef, className: clsx(styles.root, baseProps.className), items: internalTags, isItemRemovable: isItemRemovable, onAddButtonClick: onAddButtonClick, onRemoveButtonClick: onRemoveButtonClick, addButtonText: (_b = i18n('i18nStrings.addButton', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.addButton)) !== null && _b !== void 0 ? _b : '', removeButtonText: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeButton, disableAddButton: remainingTags <= 0, empty: i18n('i18nStrings.emptyTags', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.emptyTags), additionalInfo: remainingTags < 0 ? (React.createElement(FormFieldError, { errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, (_d = i18n('i18nStrings.tagLimitExceeded', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitExceeded) === null || _c === void 0 ? void 0 : _c.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _d !== void 0 ? _d : '')) : remainingTags === 0 ? ((_f = i18n('i18nStrings.tagLimitReached', (_e = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimitReached) === null || _e === void 0 ? void 0 : _e.call(i18nStrings, tagLimit), format => format({ tagLimit }))) !== null && _f !== void 0 ? _f : '') : (i18n('i18nStrings.tagLimit', (_g = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tagLimit) === null || _g === void 0 ? void 0 : _g.call(i18nStrings, remainingTags, tagLimit), format => format({ tagLimitAvailable: `${remainingTags === tagLimit}`, availableTags: remainingTags, tagLimit }))), definition: definition, i18nStrings: forwardedI18nStrings })));
 });
 applyDisplayName(TagEditor, 'TagEditor');
 export default TagEditor;