npm - @cloudscape-design/components - Versions diffs - 3.0.316 → 3.0.317 - Mend

@cloudscape-design/components 3.0.316 → 3.0.317

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 (20) hide show

package/expandable-section/expandable-section-header.d.ts.map +1 -1
package/expandable-section/expandable-section-header.js +24 -10
package/expandable-section/expandable-section-header.js.map +1 -1
package/expandable-section/internal.d.ts.map +1 -1
package/expandable-section/internal.js +2 -1
package/expandable-section/internal.js.map +1 -1
package/expandable-section/styles.css.js +29 -27
package/expandable-section/styles.scoped.css +64 -57
package/expandable-section/styles.selectors.js +29 -27
package/expandable-section/utils.d.ts +3 -0
package/expandable-section/utils.d.ts.map +1 -0
package/expandable-section/utils.js +4 -0
package/expandable-section/utils.js.map +1 -0
package/header/internal.d.ts +5 -1
package/header/internal.d.ts.map +1 -1
package/header/internal.js +6 -1
package/header/internal.js.map +1 -1
package/internal/environment.js +1 -1
package/internal/manifest.json +1 -1
package/package.json +1 -1

package/expandable-section/expandable-section-header.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAQlF~~,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;~~AAkID~~,eAAO,MAAM,uBAAuB,oOAmBjC,4BAA4B,~~gBAuE9B~~,CAAC"}
1	+ {"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAqJD,eAAO,MAAM,uBAAuB,oOAmBjC,4BAA4B,gBA8E9B,CAAC"}

package/expandable-section/expandable-section-header.js CHANGED Viewed

@@ -2,31 +2,42 @@ import React from 'react';
 import InternalIcon from '../icon/internal';
 import clsx from 'clsx';
 import styles from './styles.css.js';
-import InternalHeader from '../header/internal';
+import InternalHeader, { Description as HeaderDescription } from '../header/internal';
 import { isDevelopment } from '../internal/is-development';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { variantSupportsDescription } from './utils';
 export const componentName = 'ExpandableSection';
-const ExpandableDefaultHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
-    return (React.createElement("div", { id: id, role: "button", className: clsx(className, styles['expand-button']), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
+const ExpandableDeprecatedHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
+    return (React.createElement("div", { id: id, role: "button", className: clsx(className, styles['expand-button'], styles['click-target'], styles['header-deprecated']), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
         React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
         children));
 };
 const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, }) => {
-    return (React.createElement("div", { id: id, className: className, onClick: onClick },
+    return (React.createElement("div", { id: id, className: clsx(className, styles['click-target']), onClick: onClick },
         React.createElement("button", { className: clsx(styles['icon-container'], styles['expand-button']), "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
         children));
 };
 const ExpandableHeaderTextWrapper = ({ id, descriptionId, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
     const isContainer = variant === 'container';
+    const isDefault = variant === 'default';
     const HeadingTag = headingTagOverride || 'div';
     const hasInteractiveElements = isContainer && (headerInfo || headerActions);
     const listeners = { onClick, onKeyDown, onKeyUp };
-    const wrapperListeners = hasInteractiveElements ? undefined : listeners;
+    // If interactive elements are present, constrain the clickable area to only the icon and the header text
+    // to prevent nesting interactive elements.
     const headerButtonListeners = hasInteractiveElements ? listeners : undefined;
-    const headerButton = (React.createElement("span", Object.assign({ className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && isContainer ? id : undefined, "aria-describedby": isContainer && headerDescription ? descriptionId : undefined, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
+    // For the default variant, include also the immediate wrapper around it to include the entire row
+    // for backwards compatibility, but exclude the description below.
+    const headingTagListeners = !headerButtonListeners && isDefault ? listeners : undefined;
+    // For all other cases, make the entire header clickable for backwards compatibility.
+    const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;
+    const description = variantSupportsDescription(variant) && headerDescription && (React.createElement("span", { id: descriptionId, className: styles[`description-${variant}`] }, headerDescription));
+    const headerButton = (React.createElement("span", Object.assign({ className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button'], headerButtonListeners && styles['click-target']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && description ? id : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
         React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
         React.createElement("span", { id: id }, children)));
-    return (React.createElement("div", Object.assign({ className: clsx(className, hasInteractiveElements && styles['with-interactive-elements']) }, wrapperListeners), isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: headerDescription && React.createElement("span", { id: descriptionId }, headerDescription), counter: headerCounter, info: headerInfo, actions: headerActions, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, { className: styles['header-wrapper'] }, headerButton))));
+    return (React.createElement("div", Object.assign({ className: clsx(className, wrapperListeners && styles['click-target']) }, wrapperListeners),
+        isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: description, counter: headerCounter, info: headerInfo, actions: headerActions, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, Object.assign({ className: clsx(styles['header-wrapper'], headingTagListeners && styles['click-target']) }, headingTagListeners), headerButton)),
+        isDefault && description && React.createElement(HeaderDescription, { variantOverride: "h3" }, description)));
 };
 export const ExpandableSectionHeader = ({ id, descriptionId, className, variant, header, headerText, headerDescription, headerCounter, headerInfo, headerActions, headingTagOverride, expanded, ariaControls, ariaLabel, ariaLabelledBy, onKeyUp, onKeyDown, onClick, }) => {
     const icon = (React.createElement(InternalIcon, { size: variant === 'container' ? 'medium' : 'normal', className: clsx(styles.icon, expanded && styles.expanded), name: "caret-down-filled" }));
@@ -39,8 +50,11 @@ export const ExpandableSectionHeader = ({ id, descriptionId, className, variant,
         onClick: onClick,
         variant,
     };
-    if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {
-        warnOnce(componentName, 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the "container" variant.');
+    if ((headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {
+        warnOnce(componentName, 'The `headerCounter`, `headerInfo` and `headerActions` props are only supported for the "container" variant.');
+    }
+    if (headerDescription && variant !== 'container' && variant !== 'default' && isDevelopment) {
+        warnOnce(componentName, 'The `headerDescription` prop is only supported for the "default" and "container" variants.');
     }
     const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);
     if (variant === 'navigation') {
@@ -52,6 +66,6 @@ export const ExpandableSectionHeader = ({ id, descriptionId, className, variant,
     if (variant === 'container' && header && isDevelopment) {
         warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');
     }
-    return (React.createElement(ExpandableDefaultHeader, Object.assign({ className: clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded), onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), header));
+    return (React.createElement(ExpandableDeprecatedHeader, Object.assign({ className: clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded), onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), header));
 };
 //# sourceMappingURL=expandable-section-header.js.map

package/expandable-section/expandable-section-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n descriptionId?: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' \| 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' \| 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={clsx(className, styles['expand-button'])}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={className} onClick={onClick}>\n <button\n className={clsx(styles['icon-container'], styles['expand-button'])}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n descriptionId,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride \|\| 'div';\n const hasInteractiveElements = isContainer && (headerInfo \|\| headerActions);\n const listeners = { onClick, onKeyDown, onKeyUp };\n const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n const headerButton = (\n <span\n className={clsx(\n styles['expand-button'],\n isContainer ? styles['header-container-button'] : styles['header-button']\n )}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n aria-labelledby={!ariaLabel && isContainer ? id : undefined}\n aria-describedby={isContainer && headerDescription ? descriptionId : undefined}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span id={id}>{children}</span>\n </span>\n );\n\n return (\n <div\n className={clsx(className, hasInteractiveElements && styles['with-interactive-elements'])}\n {...wrapperListeners}\n >\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={headerDescription && <span id={descriptionId}>{headerDescription}</span>}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n )}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n descriptionId,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerDescription \|\| headerCounter \|\| headerInfo \|\| headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(className, wrapperClassName, expanded && styles.expanded)}\n descriptionId={descriptionId}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDefaultHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDefaultHeader>\n );\n};\n"]}
1	+ {"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.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 { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader, { Description as HeaderDescription } from '../header/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { variantSupportsDescription } from './utils';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n descriptionId?: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' \| 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' \| 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDeprecatedHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={clsx(className, styles['expand-button'], styles['click-target'], styles['header-deprecated'])}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={clsx(className, styles['click-target'])} onClick={onClick}>\n <button\n className={clsx(styles['icon-container'], styles['expand-button'])}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n descriptionId,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const isContainer = variant === 'container';\n const isDefault = variant === 'default';\n const HeadingTag = headingTagOverride \|\| 'div';\n const hasInteractiveElements = isContainer && (headerInfo \|\| headerActions);\n const listeners = { onClick, onKeyDown, onKeyUp };\n\n // If interactive elements are present, constrain the clickable area to only the icon and the header text\n // to prevent nesting interactive elements.\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n // For the default variant, include also the immediate wrapper around it to include the entire row\n // for backwards compatibility, but exclude the description below.\n const headingTagListeners = !headerButtonListeners && isDefault ? listeners : undefined;\n // For all other cases, make the entire header clickable for backwards compatibility.\n const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;\n\n const description = variantSupportsDescription(variant) && headerDescription && (\n <span id={descriptionId} className={styles[`description-${variant}`]}>\n {headerDescription}\n </span>\n );\n\n const headerButton = (\n <span\n className={clsx(\n styles['expand-button'],\n isContainer ? styles['header-container-button'] : styles['header-button'],\n headerButtonListeners && styles['click-target']\n )}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n aria-labelledby={!ariaLabel && description ? id : undefined}\n aria-describedby={description ? descriptionId : undefined}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span id={id}>{children}</span>\n </span>\n );\n\n return (\n <div className={clsx(className, wrapperListeners && styles['click-target'])} {...wrapperListeners}>\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={description}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag\n className={clsx(styles['header-wrapper'], headingTagListeners && styles['click-target'])}\n {...headingTagListeners}\n >\n {headerButton}\n </HeadingTag>\n )}\n {isDefault && description && <HeaderDescription variantOverride=\"h3\">{description}</HeaderDescription>}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n descriptionId,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerCounter \|\| headerInfo \|\| headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n if (headerDescription && variant !== 'container' && variant !== 'default' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerDescription` prop is only supported for the \"default\" and \"container\" variants.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(className, wrapperClassName, expanded && styles.expanded)}\n descriptionId={descriptionId}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDeprecatedHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDeprecatedHeader>\n );\n};\n"]}

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

	@@ -1 +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,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,sBAAsB,EACtB,eAAe,EACf,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,8BAA8B,eA6FhC"}
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;AAGlF,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,eA6FhC"}

package/expandable-section/internal.js CHANGED Viewed

@@ -12,6 +12,7 @@ import { fireNonCancelableEvent } from '../internal/events';
 import styles from './styles.css.js';
 import { ExpandableSectionContainer } from './expandable-section-container';
 import { ExpandableSectionHeader } from './expandable-section-header';
+import { variantSupportsDescription } from './utils';
 export default function InternalExpandableSection(_a) {
     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);
@@ -53,6 +54,6 @@ export default function InternalExpandableSection(_a) {
     };
     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, descriptionId: descriptionId, 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, "aria-describedby": variant === 'container' && headerDescription ? descriptionId : undefined }, children))));
+            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, "aria-describedby": variantSupportsDescription(variant) && headerDescription ? descriptionId : undefined }, children))));
 }
 //# sourceMappingURL=internal.js.map

package/expandable-section/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["expandable-section/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAI5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;~~AAKtE~~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~~KAAK~~,~~WAAW,~~IAAI,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,~~IAEzF~~,QAAQ,CACL,CACQ,CACW,CAC9B,CAAC;AACJ,CAAC","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 const descriptionId = `${controlId}-description`;\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 descriptionId={descriptionId}\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 aria-describedby={variant ~~=== 'container'~~ && headerDescription ? descriptionId : undefined}\n >\n {children}\n </div>\n </CSSTransition>\n </ExpandableSectionContainer>\n );\n}\n"]}
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';\nimport { variantSupportsDescription } from './utils';\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 const descriptionId = `${controlId}-description`;\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 descriptionId={descriptionId}\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 aria-describedby={variantSupportsDescription(variant) && headerDescription ? descriptionId : undefined}\n >\n {children}\n </div>\n </CSSTransition>\n </ExpandableSectionContainer>\n );\n}\n"]}

package/expandable-section/styles.css.js CHANGED Viewed

@@ -1,32 +1,34 @@
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
-  "icon": "awsui_icon_gwq0h_ohtdp_133",
-  "root": "awsui_root_gwq0h_ohtdp_151",
-  "expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
-  "expanded": "awsui_expanded_gwq0h_ohtdp_175",
-  "icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
-  "wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
-  "header": "awsui_header_gwq0h_ohtdp_229",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
-  "header-button": "awsui_header-button_gwq0h_ohtdp_239",
-  "header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
-  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
-  "header-container": "awsui_header-container_gwq0h_ohtdp_243",
-  "header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
-  "content": "awsui_content_gwq0h_ohtdp_97",
-  "content-default": "awsui_content-default_gwq0h_ohtdp_309",
-  "content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
-  "content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
-  "focusable": "awsui_focusable_gwq0h_ohtdp_319"
+  "content-enter": "awsui_content-enter_gwq0h_1g5j6_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g5j6_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g5j6_119",
+  "icon": "awsui_icon_gwq0h_1g5j6_133",
+  "root": "awsui_root_gwq0h_1g5j6_151",
+  "expand-button": "awsui_expand-button_gwq0h_1g5j6_168",
+  "expanded": "awsui_expanded_gwq0h_1g5j6_175",
+  "icon-container": "awsui_icon-container_gwq0h_1g5j6_179",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g5j6_184",
+  "wrapper": "awsui_wrapper_gwq0h_1g5j6_188",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g5j6_195",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g5j6_198",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g5j6_204",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g5j6_207",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g5j6_224",
+  "header": "awsui_header_gwq0h_1g5j6_228",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g5j6_231",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1g5j6_231",
+  "header-button": "awsui_header-button_gwq0h_1g5j6_241",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g5j6_245",
+  "header-container": "awsui_header-container_gwq0h_1g5j6_245",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g5j6_269",
+  "content": "awsui_content_gwq0h_1g5j6_97",
+  "content-default": "awsui_content-default_gwq0h_1g5j6_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g5j6_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g5j6_311",
+  "focusable": "awsui_focusable_gwq0h_1g5j6_315",
+  "click-target": "awsui_click-target_gwq0h_1g5j6_326",
+  "description-default": "awsui_description-default_gwq0h_1g5j6_333"
 };

package/expandable-section/styles.scoped.css CHANGED Viewed

@@ -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_ohtdp_97:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
+.awsui_content-enter_gwq0h_1g5j6_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_gwq0h_1g5j6_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 {
+@keyframes awsui_awsui-motion-fade-in_gwq0h_1g5j6_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_ohtdp_97:not(#\9) {
+  .awsui_content-enter_gwq0h_1g5j6_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-enter_gwq0h_ohtdp_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
+.awsui-motion-disabled .awsui_content-enter_gwq0h_1g5j6_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1g5j6_97:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
+.awsui_trigger-expanded_gwq0h_1g5j6_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_ohtdp_119:not(#\9) {
+  .awsui_trigger-expanded_gwq0h_1g5j6_119:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
+.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1g5j6_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1g5j6_119:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_icon_gwq0h_ohtdp_133:not(#\9) {
+.awsui_icon_gwq0h_1g5j6_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_ohtdp_133:not(#\9) {
+  .awsui_icon_gwq0h_1g5j6_133:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon_gwq0h_ohtdp_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
+.awsui-motion-disabled .awsui_icon_gwq0h_1g5j6_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1g5j6_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_ohtdp_151:not(#\9) {
+.awsui_root_gwq0h_1g5j6_151:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -191,89 +191,91 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: block;
 }
-.awsui_expand-button_gwq0h_ohtdp_168:not(#\9) {
+.awsui_expand-button_gwq0h_1g5j6_168:not(#\9) {
   /* used in test-utils */
 }
-.awsui_icon_gwq0h_ohtdp_133:not(#\9) {
+.awsui_icon_gwq0h_1g5j6_133:not(#\9) {
   transform: rotate(-90deg);
 }
-.awsui_icon_gwq0h_ohtdp_133.awsui_expanded_gwq0h_ohtdp_175:not(#\9) {
+.awsui_icon_gwq0h_1g5j6_133.awsui_expanded_gwq0h_1g5j6_175:not(#\9) {
   transform: rotate(0deg);
 }
-.awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
+.awsui_icon-container_gwq0h_1g5j6_179: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_ohtdp_184:not(#\9) {
+.awsui_icon-container-container_gwq0h_1g5j6_184:not(#\9) {
   margin-right: var(--space-xs-edba2s, 8px);
 }
-.awsui_wrapper_gwq0h_ohtdp_188:not(#\9) {
+.awsui_wrapper_gwq0h_1g5j6_188:not(#\9) {
   box-sizing: border-box;
-  display: flex;
   border: none;
   width: 100%;
   line-height: var(--font-body-m-line-height-rfgrp9, 22px);
   text-align: left;
 }
-.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g5j6_195:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) var(--space-xxs-ja5cp8, 4px);
 }
-.awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
+.awsui_wrapper-footer_gwq0h_1g5j6_198:not(#\9) {
   padding: var(--space-scaled-xxs-t2t62i, 4px) 0;
 }
-.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g5j6_195:not(#\9), .awsui_wrapper-footer_gwq0h_1g5j6_198:not(#\9) {
   border: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9) {
+.awsui_wrapper-navigation_gwq0h_1g5j6_204:not(#\9) {
   border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
 }
-.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
-  color: var(--color-text-expandable-section-default-fvf8va, #000716);
+.awsui_wrapper-navigation_gwq0h_1g5j6_204:not(#\9), .awsui_wrapper-container_gwq0h_1g5j6_207:not(#\9) {
+  display: flex;
   font-weight: var(--font-heading-s-weight-5y5giq, 800);
+}
+.awsui_wrapper-default_gwq0h_1g5j6_195:not(#\9), .awsui_wrapper-navigation_gwq0h_1g5j6_204:not(#\9), .awsui_wrapper-footer_gwq0h_1g5j6_198:not(#\9) {
+  color: var(--color-text-expandable-section-default-fvf8va, #000716);
   -webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-pa2uqe, grayscale);
   font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
   letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
 }
-.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9):hover, .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9):hover {
-  color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
-}
-.awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9) {
+.awsui_wrapper-container_gwq0h_1g5j6_207:not(#\9) {
   padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1g5j6_207: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_wrapper-default_gwq0h_ohtdp_196.awsui_wrapper-expanded_gwq0h_ohtdp_225:not(#\9) {
+.awsui_wrapper-default_gwq0h_1g5j6_195.awsui_wrapper-expanded_gwq0h_1g5j6_224:not(#\9) {
   border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
 }
-.awsui_header_gwq0h_ohtdp_229:not(#\9) {
+.awsui_header_gwq0h_1g5j6_228:not(#\9) {
+  /* used in test-utils */
+}
+.awsui_header-wrapper_gwq0h_1g5j6_231:not(#\9), .awsui_header-deprecated_gwq0h_1g5j6_231:not(#\9) {
   display: flex;
+  font-weight: var(--font-heading-s-weight-5y5giq, 800);
 }
-.awsui_header-wrapper_gwq0h_ohtdp_232:not(#\9) {
-  font-weight: inherit;
+.awsui_header-wrapper_gwq0h_1g5j6_231:not(#\9) {
   font-size: inherit;
   letter-spacing: inherit;
   margin: 0;
   padding: 0;
 }
-.awsui_header-button_gwq0h_ohtdp_239:not(#\9) {
+.awsui_header-button_gwq0h_1g5j6_241:not(#\9) {
   box-sizing: border-box;
   display: flex;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g5j6_241:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g5j6_245:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g5j6_241:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g5j6_245:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g5j6_241:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1g5j6_245:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -284,19 +286,13 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239: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_gwq0h_ohtdp_229:not(#\9):not(.awsui_with-interactive-elements_gwq0h_ohtdp_261) {
-  cursor: pointer;
-}
-.awsui_header-container_gwq0h_ohtdp_243:not(#\9) {
+.awsui_header-container_gwq0h_1g5j6_245:not(#\9) {
   width: 100%;
 }
-.awsui_header-container_gwq0h_ohtdp_243 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
+.awsui_header-container_gwq0h_1g5j6_245 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9) {
   margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
 }
-.awsui_header-container_gwq0h_ohtdp_243.awsui_with-interactive-elements_gwq0h_ohtdp_261 .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9) {
-  cursor: pointer;
-}
-.awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
+.awsui_header-navigation_gwq0h_1g5j6_269 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9) {
   display: inline-flex;
   cursor: pointer;
   color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
@@ -307,17 +303,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9
   text-decoration: none;
   flex-direction: column;
 }
-.awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):hover {
+.awsui_header-navigation_gwq0h_1g5j6_269 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9):hover {
   color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g5j6_269 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g5j6_269 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g5j6_269 > .awsui_icon-container_gwq0h_1g5j6_179:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -329,26 +325,37 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .
   box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
 }
-.awsui_content_gwq0h_ohtdp_97:not(#\9) {
+.awsui_content_gwq0h_1g5j6_97:not(#\9) {
   display: none;
 }
-.awsui_content-default_gwq0h_ohtdp_309:not(#\9) {
+.awsui_content-default_gwq0h_1g5j6_305:not(#\9) {
   padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
 }
-.awsui_content-footer_gwq0h_ohtdp_312:not(#\9) {
+.awsui_content-footer_gwq0h_1g5j6_308:not(#\9) {
   padding: var(--space-xs-edba2s, 8px) 0;
 }
-.awsui_content-expanded_gwq0h_ohtdp_315:not(#\9) {
+.awsui_content-expanded_gwq0h_1g5j6_311:not(#\9) {
   display: block;
 }
-.awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
+.awsui_focusable_gwq0h_1g5j6_315:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1g5j6_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);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
+}
+.awsui_click-target_gwq0h_1g5j6_326:not(#\9) {
+  cursor: pointer;
+}
+.awsui_click-target_gwq0h_1g5j6_326:not(#\9):not(.awsui_wrapper-container_gwq0h_1g5j6_207):not(.awsui_header-container-button_gwq0h_1g5j6_245):hover {
+  color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
+}
+.awsui_description-default_gwq0h_1g5j6_333:not(#\9) {
+  padding-left: calc(var(--size-icon-normal-jq6jat, 16px) + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
 }

package/expandable-section/styles.selectors.js CHANGED Viewed

@@ -2,32 +2,34 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
-  "icon": "awsui_icon_gwq0h_ohtdp_133",
-  "root": "awsui_root_gwq0h_ohtdp_151",
-  "expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
-  "expanded": "awsui_expanded_gwq0h_ohtdp_175",
-  "icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
-  "wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
-  "header": "awsui_header_gwq0h_ohtdp_229",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
-  "header-button": "awsui_header-button_gwq0h_ohtdp_239",
-  "header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
-  "with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
-  "header-container": "awsui_header-container_gwq0h_ohtdp_243",
-  "header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
-  "content": "awsui_content_gwq0h_ohtdp_97",
-  "content-default": "awsui_content-default_gwq0h_ohtdp_309",
-  "content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
-  "content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
-  "focusable": "awsui_focusable_gwq0h_ohtdp_319"
+  "content-enter": "awsui_content-enter_gwq0h_1g5j6_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1g5j6_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1g5j6_119",
+  "icon": "awsui_icon_gwq0h_1g5j6_133",
+  "root": "awsui_root_gwq0h_1g5j6_151",
+  "expand-button": "awsui_expand-button_gwq0h_1g5j6_168",
+  "expanded": "awsui_expanded_gwq0h_1g5j6_175",
+  "icon-container": "awsui_icon-container_gwq0h_1g5j6_179",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1g5j6_184",
+  "wrapper": "awsui_wrapper_gwq0h_1g5j6_188",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1g5j6_195",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1g5j6_198",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1g5j6_204",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1g5j6_207",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1g5j6_224",
+  "header": "awsui_header_gwq0h_1g5j6_228",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1g5j6_231",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1g5j6_231",
+  "header-button": "awsui_header-button_gwq0h_1g5j6_241",
+  "header-container-button": "awsui_header-container-button_gwq0h_1g5j6_245",
+  "header-container": "awsui_header-container_gwq0h_1g5j6_245",
+  "header-navigation": "awsui_header-navigation_gwq0h_1g5j6_269",
+  "content": "awsui_content_gwq0h_1g5j6_97",
+  "content-default": "awsui_content-default_gwq0h_1g5j6_305",
+  "content-footer": "awsui_content-footer_gwq0h_1g5j6_308",
+  "content-expanded": "awsui_content-expanded_gwq0h_1g5j6_311",
+  "focusable": "awsui_focusable_gwq0h_1g5j6_315",
+  "click-target": "awsui_click-target_gwq0h_1g5j6_326",
+  "description-default": "awsui_description-default_gwq0h_1g5j6_333"
 };

package/expandable-section/utils.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { ExpandableSectionProps } from './interfaces';
+export declare function variantSupportsDescription(variant: ExpandableSectionProps.Variant): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/expandable-section/utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEtD,wBAAgB,0BAA0B,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,WAEjF"}

package/expandable-section/utils.js ADDED Viewed

@@ -0,0 +1,4 @@
+export function variantSupportsDescription(variant) {
+    return variant === 'container' || variant === 'default';
+}
+//# sourceMappingURL=utils.js.map

package/expandable-section/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["expandable-section/utils.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,0BAA0B,CAAC,OAAuC;IAChF,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,KAAK,SAAS,CAAC;AAC1D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\n\nexport function variantSupportsDescription(variant: ExpandableSectionProps.Variant) {\n return variant === 'container' || variant === 'default';\n}\n"]}

package/header/internal.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { HeaderProps } from './interfaces';
 import { SomeRequired } from '../internal/types';
@@ -6,5 +6,9 @@ interface InternalHeaderProps extends SomeRequired<HeaderProps, 'variant'>, Inte
     __disableActionsWrapping?: boolean;
 }
 export default function InternalHeader({ variant, headingTagOverride, children, actions, counter, description, info, __internalRootRef, __disableActionsWrapping, ...restProps }: InternalHeaderProps): JSX.Element;
+export declare function Description({ children, variantOverride }: {
+    children: React.ReactNode;
+    variantOverride: string;
+}): JSX.Element | null;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/header/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":";~~AAMA~~,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAMjD,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,~~eA8ErB~~"}
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;AAMjD,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,eAoErB;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 Viewed

@@ -31,7 +31,12 @@ export default function InternalHeader(_a) {
                         " ",
                         counter)),
                 React.createElement(InfoLinkLabelContext.Provider, { value: headingId }, info && React.createElement("span", { className: styles.info }, info))),
-            description && (React.createElement("p", { className: clsx(styles.description, styles[`description-variant-${variantOverride}`], isRefresh && styles[`description-variant-${variantOverride}-refresh`]) }, description))),
+            React.createElement(Description, { variantOverride: variantOverride }, description)),
         actions && (React.createElement("div", { className: clsx(styles.actions, styles[`actions-variant-${variantOverride}`], isRefresh && styles[`actions-variant-${variantOverride}-refresh`]) }, actions))));
 }
+export function Description({ children, variantOverride }) {
+    const isRefresh = useVisualRefresh();
+    return ((children && (React.createElement("p", { className: clsx(styles.description, styles[`description-variant-${variantOverride}`], isRefresh && styles[`description-variant-${variantOverride}-refresh`]) }, children))) ||
+        null);
+}
 //# sourceMappingURL=internal.js.map

package/header/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["header/internal.tsx"],"names":[],"mappings":"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~~YACL~~,WAAW,IAAI,~~CACd~~,~~2BACE~~,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,~~WAAW~~,~~EAClB~~,MAAM,CAAC,~~uBAAuB~~,eAAe,EAAE,CAAC,~~EAChD~~,SAAS,IAAI,MAAM,CAAC,~~uBAAuB~~,eAAe,UAAU,CAAC,~~CACtE~~,IAEA,~~WAAW~~,~~CACV~~,~~CACL~~,CACG;~~QACL~~,OAAO,IAAI,~~CACV~~,~~6BACE~~,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,~~OAAO~~,~~EACd~~,MAAM,CAAC,~~mBAAmB~~,eAAe,EAAE,CAAC,~~EAC5C~~,SAAS,IAAI,MAAM,CAAC,~~mBAAmB~~,eAAe,UAAU,CAAC,~~CAClE~~,IAEA,~~OAAO~~,~~CACJ,~~CACP,~~CACG~~,~~CACP~~,CAAC;AACJ,CAAC","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 { 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 headingId = useUniqueId('heading');\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[`root-variant-${variantOverride}-refresh`],\n !actions && [styles[`root-no-actions`]],\n description && [styles[`root-has-description`]],\n __disableActionsWrapping && [styles['root-no-wrap']]\n )}\n ref={__internalRootRef}\n >\n <div\n className={clsx(\n styles.main,\n styles[`main-variant-${variantOverride}`],\n isRefresh && styles[`main-variant-${variantOverride}-refresh`]\n )}\n >\n <div\n className={clsx(\n styles.title,\n styles[`title-variant-${variantOverride}`],\n isRefresh && styles[`title-variant-${variantOverride}-refresh`]\n )}\n >\n <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n <span\n {...{ [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 <InfoLinkLabelContext.Provider value={headingId}>\n {info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n {description && (\n <p\n className={clsx(\n styles.~~description~~,\n styles[`~~description~~-variant-${variantOverride}`],\n isRefresh && styles[`~~description~~-variant-${variantOverride}-refresh`]\n )}\n >\n {~~description~~}\n </p>\n )}\n </div>\n {~~actions~~ && (\n <~~div~~\n className={clsx(\n styles.~~actions~~,\n styles[`~~actions~~-variant-${variantOverride}`],\n isRefresh && styles[`~~actions~~-variant-${variantOverride}-refresh`]\n )}\n >\n {~~actions~~}\n </~~div~~>\n )}\n ~~</div>\~~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 { 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 headingId = useUniqueId('heading');\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[`root-variant-${variantOverride}-refresh`],\n !actions && [styles[`root-no-actions`]],\n description && [styles[`root-has-description`]],\n __disableActionsWrapping && [styles['root-no-wrap']]\n )}\n ref={__internalRootRef}\n >\n <div\n className={clsx(\n styles.main,\n styles[`main-variant-${variantOverride}`],\n isRefresh && styles[`main-variant-${variantOverride}-refresh`]\n )}\n >\n <div\n className={clsx(\n styles.title,\n styles[`title-variant-${variantOverride}`],\n isRefresh && styles[`title-variant-${variantOverride}-refresh`]\n )}\n >\n <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>\n <span\n {...{ [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 <InfoLinkLabelContext.Provider value={headingId}>\n {info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n <Description variantOverride={variantOverride}>{description}</Description>\n </div>\n {actions && (\n <div\n className={clsx(\n styles.actions,\n styles[`actions-variant-${variantOverride}`],\n isRefresh && styles[`actions-variant-${variantOverride}-refresh`]\n )}\n >\n {actions}\n </div>\n )}\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[`description-variant-${variantOverride}-refresh`]\n )}\n >\n {children}\n </p>\n )) \|\|\n null\n );\n}\n"]}

package/internal/environment.js CHANGED Viewed

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

package/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "ec2ddd92e84dd4ed9500a850fbb19ba4c3641366"
+  "commit": "c511e1c1dbae1b1d16dab62deb58f22fd1744e27"
 }

package/package.json CHANGED Viewed

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