npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1341 → 3.0.1343 - Mend

@cloudscape-design/components-themeable 3.0.1341 → 3.0.1343

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

package/lib/internal/template/expandable-section/expandable-section-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/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 React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalHeader, { Description as HeaderDescription } from '../header/internal';\nimport InternalIcon from '../icon/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport {\n GeneratedAnalyticsMetadataExpandableSectionCollapse,\n GeneratedAnalyticsMetadataExpandableSectionExpand,\n} from './analytics-metadata/interfaces';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport {\n variantRequiresActionsDivider,\n variantSupportsActions,\n variantSupportsDescription,\n variantSupportsInfoLink,\n} from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst 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: InternalVariant;\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 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 getExpandActionAnalyticsMetadataAttribute = (expanded: boolean) => {\n const metadata:\n \| GeneratedAnalyticsMetadataExpandableSectionExpand\n \| GeneratedAnalyticsMetadataExpandableSectionCollapse = {\n action: !expanded ? 'expand' : 'collapse',\n detail: {\n label: { rootSelector: `.${analyticsSelectors.root}` },\n },\n };\n return getAnalyticsMetadataAttribute(metadata);\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(\n className,\n styles['expand-button'],\n styles['click-target'],\n styles['header-deprecated'],\n analyticsSelectors['header-label']\n )}\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 {...getExpandActionAnalyticsMetadataAttribute(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'], analyticsSelectors['header-label'])}>\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 onClick={onClick}\n {...getExpandActionAnalyticsMetadataAttribute(expanded)}\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 supportsInteractiveElements = variantSupportsActions(variant);\n const restrictClickableArea = supportsInteractiveElements && (headerInfo \|\| headerActions);\n const actions = supportsInteractiveElements && headerActions;\n const description = variantSupportsDescription(variant) && headerDescription && (\n <span id={descriptionId} className={styles[`description-${variant}`]}>\n {headerDescription}\n </span>\n );\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 = restrictClickableArea ? listeners : undefined;\n // For the default and footer variants with description,\n // include also the immediate wrapper around it to include the entire row for backwards compatibility,\n // but exclude the description.\n const headingTagListeners = !headerButtonListeners && !isContainer && description ? listeners : undefined;\n // For all other cases, make the entire header clickable for backwards compatibility.\n const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;\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 {...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span id={id} className={clsx(styles['header-text'], analyticsSelectors['header-label'])}>\n {children}\n </span>\n </span>\n );\n\n return (\n <div\n className={clsx(className, wrapperListeners && styles['click-target'])}\n {...wrapperListeners}\n {...(wrapperListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={description}\n counter={headerCounter}\n info={headerInfo}\n actions={actions}\n headingTagOverride={headingTagOverride}\n __inExpandableSection={true}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <>\n <div className={clsx(actions && styles['header-actions-wrapper'])}>\n <HeadingTag\n className={clsx(styles['header-wrapper'], headingTagListeners && styles['click-target'])}\n {...headingTagListeners}\n {...(headingTagListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n {headerButton}\n </HeadingTag>\n {actions}\n </div>\n {description && <HeaderDescription variantOverride=\"h3\">{description}</HeaderDescription>}\n </>\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 alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;\n const icon = (\n <InternalIcon\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : '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) && !variantSupportsInfoLink(variant) && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter` and `headerInfo` props are only supported for the \"container\" variant.'\n );\n }\n\n if (headerActions && !variantSupportsActions(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerActions\\` prop is only supported for the \"container\" and \"default\" variants.`);\n }\n\n if (headerDescription && !variantSupportsDescription(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerDescription\\` prop is not supported for the ${variant} variant.`);\n }\n\n const wrapperClassName = clsx(\n styles.wrapper,\n styles[`wrapper-${variant}`],\n (expanded \|\| alwaysShowDivider) && styles['wrapper-expanded']\n );\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 \|\| variant === 'inline') {\n if (!headerText && header && variant === 'inline') {\n warnOnce(componentName, 'Only `headerText` instead of `header` is supported for `inline` variant.');\n }\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(\n className,\n wrapperClassName,\n expanded && styles.expanded,\n !expanded && (!headerActions \|\| headerDescription) && styles['wrapper-not-expanded-without-actions']\n )}\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"]}
1	+ {"version":3,"file":"expandable-section-header.js","sourceRoot":"","sources":["../../../src/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 React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalHeader, { Description as HeaderDescription } from '../header/internal';\nimport InternalIcon from '../icon/internal';\nimport { isDevelopment } from '../internal/is-development';\nimport {\n GeneratedAnalyticsMetadataExpandableSectionCollapse,\n GeneratedAnalyticsMetadataExpandableSectionExpand,\n} from './analytics-metadata/interfaces';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport {\n variantRequiresActionsDivider,\n variantSupportsActions,\n variantSupportsDescription,\n variantSupportsInfoLink,\n} from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst componentName = 'ExpandableSection';\n\ninterface ExpandIconButtonProps {\n icon: JSX.Element;\n ariaLabel?: string;\n ariaLabelledBy?: string;\n ariaControls: string;\n expanded: boolean;\n onClick: MouseEventHandler;\n stopPropagation?: boolean;\n className?: string;\n}\n\n/*\n Standalone expand/collapse caret button used when the icon renders OUTSIDE\n * the main clickable header area (navigation variant) or outside the headerButton\n * (end-position with actions/container). This is always an independent interactive\n * element with its own ARIA attributes.\n */\nconst ExpandIconButton = ({\n icon,\n ariaLabel,\n ariaLabelledBy,\n ariaControls,\n expanded,\n onClick,\n stopPropagation,\n className,\n}: ExpandIconButtonProps) => {\n const stopKeyPropagation = stopPropagation\n ? (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.stopPropagation();\n }\n }\n : undefined;\n return (\n <button\n className={clsx(styles['icon-container'], styles['expand-button'], className)}\n type=\"button\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n onClick={\n stopPropagation\n ? event => {\n event.stopPropagation();\n onClick(event);\n }\n : onClick\n }\n onKeyUp={stopKeyPropagation}\n onKeyDown={stopKeyPropagation}\n {...getExpandActionAnalyticsMetadataAttribute(expanded)}\n >\n {icon}\n </button>\n );\n};\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: InternalVariant;\n expandIconPosition: 'start' \| 'end';\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 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 getExpandActionAnalyticsMetadataAttribute = (expanded: boolean) => {\n const metadata:\n \| GeneratedAnalyticsMetadataExpandableSectionExpand\n \| GeneratedAnalyticsMetadataExpandableSectionCollapse = {\n action: !expanded ? 'expand' : 'collapse',\n detail: {\n label: { rootSelector: `.${analyticsSelectors.root}` },\n },\n };\n return getAnalyticsMetadataAttribute(metadata);\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(\n className,\n styles['expand-button'],\n styles['click-target'],\n styles['header-deprecated'],\n analyticsSelectors['header-label']\n )}\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 {...getExpandActionAnalyticsMetadataAttribute(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 expandIconPosition,\n}: ExpandableNavigationHeaderProps) => {\n const expandButton = (\n <ExpandIconButton\n icon={icon}\n ariaLabelledBy={ariaLabelledBy}\n ariaLabel={ariaLabel}\n ariaControls={ariaControls}\n expanded={expanded}\n onClick={onClick}\n className={expandIconPosition === 'end' ? styles['icon-container-end'] : undefined}\n />\n );\n return (\n <div\n id={id}\n className={clsx(\n className,\n styles['click-target'],\n analyticsSelectors['header-label'],\n expandIconPosition === 'end' && styles['header-icon-end']\n )}\n >\n {expandIconPosition === 'end' ? (\n <>\n {children}\n {expandButton}\n </>\n ) : (\n <>\n {expandButton}\n {children}\n </>\n )}\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 expandIconPosition,\n}: ExpandableHeaderTextWrapperProps) => {\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride \|\| 'div';\n const supportsInteractiveElements = variantSupportsActions(variant);\n const restrictClickableArea = supportsInteractiveElements && (headerInfo \|\| headerActions);\n const actions = supportsInteractiveElements && headerActions;\n const description = variantSupportsDescription(variant) && headerDescription && (\n <span id={descriptionId} className={styles[`description-${variant}`]}>\n {headerDescription}\n </span>\n );\n const listeners = { onClick, onKeyDown, onKeyUp };\n const iconAtEnd = expandIconPosition === 'end';\n // For the variants that allow actions, when end placement is active, the icon is rendered outside the\n // InternalHeader so it appears at the inline-end of the wrapper, past any header actions.\n // Other variants render the icon at the end of the headerButton itself.\n const renderIconOutsideHeader = iconAtEnd && (isContainer \|\| !!actions);\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 = restrictClickableArea ? listeners : undefined;\n // For the default and footer variants with description,\n // include also the immediate wrapper around it to include the entire row for backwards compatibility,\n // but exclude the description.\n const headingTagListeners = !headerButtonListeners && !isContainer && description ? listeners : undefined;\n // For all other cases, make the entire header clickable for backwards compatibility.\n const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;\n\n // Standalone caret button — used when the icon is rendered OUTSIDE the headerButton\n // (end-position with container or actions). Must be its own <button> for accessibility.\n const expandButton = (\n <ExpandIconButton\n icon={icon}\n ariaLabel={ariaLabel}\n ariaLabelledBy={!ariaLabel ? id : undefined}\n ariaControls={ariaControls}\n expanded={expanded}\n onClick={onClick}\n stopPropagation={true}\n className={clsx(styles[`icon-container-${variant}`], styles['icon-container-end'])}\n />\n );\n\n // Decorative inline icon — used when the caret is INSIDE the headerButton\n // (which itself is the interactive element). A nested <button> would be illegal.\n const expandIcon = (\n <span\n className={clsx(\n styles['icon-container'],\n styles[`icon-container-${variant}`],\n iconAtEnd && styles['icon-container-end']\n )}\n >\n {icon}\n </span>\n );\n\n const outsideIcon = renderIconOutsideHeader ? expandButton : null;\n\n const textElement = (\n <span id={id} className={clsx(styles['header-text'], analyticsSelectors['header-label'])}>\n {children}\n </span>\n );\n const headerButton = (\n <span\n className={clsx(\n styles['expand-button'],\n isContainer ? styles['header-container-button'] : styles['header-button'],\n iconAtEnd && styles['header-button-icon-end'],\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 {...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n {renderIconOutsideHeader ? (\n textElement\n ) : iconAtEnd ? (\n <>\n {textElement}\n {expandIcon}\n </>\n ) : (\n <>\n {expandIcon}\n {textElement}\n </>\n )}\n </span>\n );\n\n return (\n <div\n className={clsx(className, wrapperListeners && styles['click-target'], iconAtEnd && styles['header-icon-end'])}\n {...wrapperListeners}\n {...(wrapperListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n {isContainer ? (\n <>\n <InternalHeader\n variant=\"h2\"\n description={description}\n counter={headerCounter}\n info={headerInfo}\n actions={actions}\n headingTagOverride={headingTagOverride}\n __inExpandableSection={true}\n >\n {headerButton}\n </InternalHeader>\n {outsideIcon}\n </>\n ) : (\n <>\n <div className={clsx(styles['header-content'], actions && styles['header-actions-wrapper'])}>\n <HeadingTag\n className={clsx(styles['header-wrapper'], headingTagListeners && styles['click-target'])}\n {...headingTagListeners}\n {...(headingTagListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}\n >\n {headerButton}\n </HeadingTag>\n {actions}\n </div>\n {description && <HeaderDescription variantOverride=\"h3\">{description}</HeaderDescription>}\n {outsideIcon}\n </>\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 expandIconPosition,\n}: ExpandableSectionHeaderProps) => {\n const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;\n const icon = (\n <InternalIcon\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : '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 expandIconPosition,\n };\n\n if ((headerCounter \|\| headerInfo) && !variantSupportsInfoLink(variant) && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter` and `headerInfo` props are only supported for the \"container\" variant.'\n );\n }\n\n if (headerActions && !variantSupportsActions(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerActions\\` prop is only supported for the \"container\" and \"default\" variants.`);\n }\n\n if (headerDescription && !variantSupportsDescription(variant) && isDevelopment) {\n warnOnce(componentName, `The \\`headerDescription\\` prop is not supported for the ${variant} variant.`);\n }\n\n const wrapperClassName = clsx(\n styles.wrapper,\n styles[`wrapper-${variant}`],\n (expanded \|\| alwaysShowDivider) && styles['wrapper-expanded']\n );\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n <span className={styles['header-navigation-content']}>{headerText ?? header}</span>\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText \|\| variant === 'inline') {\n if (!headerText && header && variant === 'inline') {\n warnOnce(componentName, 'Only `headerText` instead of `header` is supported for `inline` variant.');\n }\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(\n className,\n wrapperClassName,\n expanded && styles.expanded,\n !expanded && (!headerActions \|\| headerDescription) && styles['wrapper-not-expanded-without-actions']\n )}\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/lib/internal/template/expandable-section/interfaces.d.ts CHANGED Viewed

@@ -41,7 +41,7 @@ export interface ExpandableSectionProps extends BaseComponentProps {
      * */
     variant?: ExpandableSectionProps.Variant;
     /**
-     * Determines whether the content section's default padding is removed. This default padding is only present for the `container` variant.
+     * Determines whether the default padding around the content section is removed.
      */
     disableContentPaddings?: boolean;
     /**

package/lib/internal/template/expandable-section/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../types/base-component';\nimport { NonCancelableEventHandler } from '../types/events';\n\nexport namespace ExpandableSectionProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n }\n\n export type Variant = 'default' \| 'footer' \| 'container' \| 'navigation' \| 'stacked' \| 'inline';\n export interface ChangeDetail {\n expanded: boolean;\n }\n export type HeadingTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n /*\n Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * @analytics\n /\n analyticsMetadata?: ExpandableSectionProps.AnalyticsMetadata;\n\n /\n Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n * manner even if you provide a value for this property.\n /\n defaultExpanded?: boolean;\n\n /\n Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n * manner if you provide a value for this property.\n /\n expanded?: boolean;\n\n /\n The possible variants of an expandable section are as follows:\n * * `default` - Use this variant in any context.\n * * `footer` - Use this variant in container footers.\n * * `container` - Use this variant in a detail page alongside other containers.\n * * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n * It doesn't have any default styles.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * * `inline` - Use this variant in any context where you need reduced padding around the header.\n * @visualrefresh `stacked` variant\n * /\n variant?: ExpandableSectionProps.Variant;\n\n /\n Determines whether the ~~content section's~~ default padding is ~~removed.~~ ~~This~~ ~~default~~ ~~padding~~ is ~~only present for the `container` variant~~.\n /\n disableContentPaddings?: boolean;\n\n /\n Primary content displayed in the expandable section element.\n /\n children?: React.ReactNode;\n\n /\n @deprecated Use `headerText` instead.\n /\n header?: React.ReactNode;\n\n /\n The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.\n /\n headerText?: React.ReactNode;\n\n /\n Supplementary text below the heading. Use with the container, default or footer variants.\n /\n headerDescription?: string;\n\n /\n Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.\n * Behaves similar to the Header component counter.\n /\n headerCounter?: string;\n\n /\n Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n * Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Using this\n * property does not change the visual appearance of the component. Note that this only works with the `headerText`\n * slot (not with the deprecated `header`), and not with the navigation variant.\n /\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n /\n Adds `aria-label` to the header element.\n * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n /\n headerAriaLabel?: string;\n\n /\n Called when the state changes (that is, when the user expands or collapses the component).\n * The event `detail` contains the current value of the `expanded` property.\n /\n onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n\n /\n The area next to the heading, used to display an Info link. Use with the container variant.\n /\n headerInfo?: React.ReactNode;\n\n /\n Actions for the header. Use with the default or container variant.\n */\n headerActions?: React.ReactNode;\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/expandable-section/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../types/base-component';\nimport { NonCancelableEventHandler } from '../types/events';\n\nexport namespace ExpandableSectionProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n }\n\n export type Variant = 'default' \| 'footer' \| 'container' \| 'navigation' \| 'stacked' \| 'inline';\n export interface ChangeDetail {\n expanded: boolean;\n }\n export type HeadingTag = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5';\n}\n\nexport interface ExpandableSectionProps extends BaseComponentProps {\n /*\n Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * @analytics\n /\n analyticsMetadata?: ExpandableSectionProps.AnalyticsMetadata;\n\n /\n Determines whether the component initially displays in expanded state (that is, with content visible). The component operates in an uncontrolled\n * manner even if you provide a value for this property.\n /\n defaultExpanded?: boolean;\n\n /\n Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled\n * manner if you provide a value for this property.\n /\n expanded?: boolean;\n\n /\n The possible variants of an expandable section are as follows:\n * * `default` - Use this variant in any context.\n * * `footer` - Use this variant in container footers.\n * * `container` - Use this variant in a detail page alongside other containers.\n * * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.\n * It doesn't have any default styles.\n * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n * * `inline` - Use this variant in any context where you need reduced padding around the header.\n * @visualrefresh `stacked` variant\n * /\n variant?: ExpandableSectionProps.Variant;\n\n /\n Determines whether the default padding around the content section is removed.\n /\n disableContentPaddings?: boolean;\n\n /\n Primary content displayed in the expandable section element.\n /\n children?: React.ReactNode;\n\n /\n @deprecated Use `headerText` instead.\n /\n header?: React.ReactNode;\n\n /\n The heading text. Use plain text. When using the container variant, you can use additional header props like `headerDescription` and `headerCounter` to display other elements in the header.\n /\n headerText?: React.ReactNode;\n\n /\n Supplementary text below the heading. Use with the container, default or footer variants.\n /\n headerDescription?: string;\n\n /\n Specifies secondary text that's displayed to the right of the heading title. Use with the container variant.\n * Behaves similar to the Header component counter.\n /\n headerCounter?: string;\n\n /\n Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).\n * Use with the container variant (which defaults to H2) or default/footer variants (which default to DIV). Using this\n * property does not change the visual appearance of the component. Note that this only works with the `headerText`\n * slot (not with the deprecated `header`), and not with the navigation variant.\n /\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n\n /\n Adds `aria-label` to the header element.\n * Use to assign unique labels when there are multiple expandable sections with the same header text on one page.\n /\n headerAriaLabel?: string;\n\n /\n Called when the state changes (that is, when the user expands or collapses the component).\n * The event `detail` contains the current value of the `expanded` property.\n /\n onChange?: NonCancelableEventHandler<ExpandableSectionProps.ChangeDetail>;\n\n /\n The area next to the heading, used to display an Info link. Use with the container variant.\n /\n headerInfo?: React.ReactNode;\n\n /\n Actions for the header. Use with the default or container variant.\n */\n headerActions?: React.ReactNode;\n}\n"]}

package/lib/internal/template/expandable-section/internal.d.ts CHANGED Viewed

@@ -4,6 +4,19 @@ import { InternalVariant } from './internal-interfaces';
 export type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> & InternalBaseComponentProps & {
     variant?: InternalVariant;
     __injectAnalyticsComponentMetadata?: boolean;
+    /**
+     * Controls placement of the expand/collapse icon relative to the header content.
+     * Defaults to 'start'. When set to 'end', the icon is rendered after the header
+     * content and pushed to the inline-end of a full-width header.
+     */
+    __expandIconPosition?: 'start' | 'end';
+    /**
+     * Removes default padding from the header wrapper and content wrapper.
+     * Used by side-navigation to zero out expandable-section's own padding so the
+     * parent can control spacing directly, eliminating brittle cross-component
+     * positional selectors.
+     */
+    __disableHeaderPaddings?: boolean;
 };
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, ...props }: InternalExpandableSectionProps): JSX.Element;
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant, children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, __expandIconPosition, __disableHeaderPaddings, ...props }: InternalExpandableSectionProps): JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAClF,0BAA0B,GAAG;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kCAAkC,CAAC,EAAE,OAAO,CAAC;~~CAC9C~~,CAAC;AAEJ,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,kCAAkC,EAClC,GAAG,KAAK,EACT,EAAE,8BAA8B,~~eAiGhC~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMxD,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,GAClF,0BAA0B,GAAG;IAC3B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEJ,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,kCAAkC,EAClC,oBAA8B,EAC9B,uBAA+B,EAC/B,GAAG,KAAK,EACT,EAAE,8BAA8B,eA4GhC"}

package/lib/internal/template/expandable-section/internal.js CHANGED Viewed

@@ -14,7 +14,7 @@ import { ExpandableSectionHeader } from './expandable-section-header';
 import { variantSupportsDescription } from './utils';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, ...props }) {
+export default function InternalExpandableSection({ expanded: controlledExpanded, defaultExpanded, onChange, variant = 'default', children, header, headerText, headerCounter, headerDescription, headerInfo, headerActions, headingTagOverride, disableContentPaddings, headerAriaLabel, __internalRootRef, __injectAnalyticsComponentMetadata, __expandIconPosition = 'start', __disableHeaderPaddings = false, ...props }) {
     const ref = useRef(null);
     const controlId = useUniqueId();
     const triggerControlId = `${controlId}-trigger`;
@@ -54,8 +54,8 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
     };
     // Map stacked variant to container to avoid code duplication
     const baseVariant = variant === 'stacked' ? 'container' : variant;
-    return (React.createElement(ExpandableSectionContainer, { ...props, expanded: expanded, className: clsx(baseProps.className, styles.root, analyticsSelectors.root), variant: variant, disableContentPaddings: disableContentPaddings, __injectAnalyticsComponentMetadata: __injectAnalyticsComponentMetadata, header: React.createElement(ExpandableSectionHeader, { id: triggerControlId, descriptionId: descriptionId, className: clsx(styles.header, styles[`header-${baseVariant}`], screenReaderTextClass), variant: baseVariant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, ...triggerProps }), __internalRootRef: __internalRootRef },
+    return (React.createElement(ExpandableSectionContainer, { ...props, expanded: expanded, className: clsx(baseProps.className, styles.root, analyticsSelectors.root), variant: variant, disableContentPaddings: disableContentPaddings, __injectAnalyticsComponentMetadata: __injectAnalyticsComponentMetadata, header: React.createElement(ExpandableSectionHeader, { id: triggerControlId, descriptionId: descriptionId, className: clsx(styles.header, styles[`header-${baseVariant}`], screenReaderTextClass, __disableHeaderPaddings && styles['disable-header-paddings']), variant: baseVariant, expanded: !!expanded, header: header, headerText: headerText, headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, expandIconPosition: __expandIconPosition, ...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-${baseVariant}`], expanded && styles['content-expanded']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy, "aria-describedby": variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined }, children))));
+            React.createElement("div", { id: controlId, ref: ref, className: clsx(styles.content, styles[`content-${baseVariant}`], expanded && styles['content-expanded'], disableContentPaddings && styles['disable-content-paddings']), role: "group", "aria-label": triggerProps.ariaLabel, "aria-labelledby": triggerProps.ariaLabelledBy, "aria-describedby": variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined }, children))));
 }
 //# sourceMappingURL=internal.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/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,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AACxG,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAErD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;~~AAQrC~~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~~CAAC~~,MAAM,CAAC,MAAM,~~EAAE~~,MAAM,CAAC,UAAU,WAAW,EAAE,CAAC,~~EAAE~~,qBAAqB,CAAC,~~EACtF~~,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,kBAAkB,~~KAClC~~,YAAY,GAChB,EAEJ,iBAAiB,EAAE,iBAAiB;QAEpC,oBAAC,aAAa,IAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG;YACpG,6BACE,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,~~CAAC~~,MAAM,CAAC,OAAO,~~EAAE~~,MAAM,CAAC,WAAW,WAAW,EAAE,CAAC,~~EAAE~~,QAAQ,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC,~~EACzG~~,IAAI,EAAC,OAAO,gBACA,YAAY,CAAC,SAAS,qBACjB,YAAY,CAAC,cAAc,sBAC1B,0BAA0B,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,IAEzG,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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { KeyCode } from '../internal/keycode';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport { variantSupportsDescription } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &\n InternalBaseComponentProps & {\n variant?: InternalVariant;\n __injectAnalyticsComponentMetadata?: boolean;\n };\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 __injectAnalyticsComponentMetadata,\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 // Map stacked variant to container to avoid code duplication\n const baseVariant: InternalVariant = variant === 'stacked' ? 'container' : variant;\n\n return (\n <ExpandableSectionContainer\n {...props}\n expanded={expanded}\n className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}\n variant={variant}\n disableContentPaddings={disableContentPaddings}\n __injectAnalyticsComponentMetadata={__injectAnalyticsComponentMetadata}\n header={\n <ExpandableSectionHeader\n id={triggerControlId}\n descriptionId={descriptionId}\n className={clsx(styles.header, styles[`header-${baseVariant}`], ~~screenReaderTextClass~~)}\n variant={baseVariant}\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-${baseVariant}`], expanded && styles['content-expanded'])}\n role=\"group\"\n aria-label={triggerProps.ariaLabel}\n aria-labelledby={triggerProps.ariaLabelledBy}\n aria-describedby={variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined}\n >\n {children}\n </div>\n </CSSTransition>\n </ExpandableSectionContainer>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { KeyCode } from '../internal/keycode';\nimport { ExpandableSectionContainer } from './expandable-section-container';\nimport { ExpandableSectionHeader } from './expandable-section-header';\nimport { ExpandableSectionProps } from './interfaces';\nimport { InternalVariant } from './internal-interfaces';\nimport { variantSupportsDescription } from './utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'variant'> &\n InternalBaseComponentProps & {\n variant?: InternalVariant;\n __injectAnalyticsComponentMetadata?: boolean;\n /*\n Controls placement of the expand/collapse icon relative to the header content.\n * Defaults to 'start'. When set to 'end', the icon is rendered after the header\n * content and pushed to the inline-end of a full-width header.\n /\n __expandIconPosition?: 'start' \| 'end';\n /\n Removes default padding from the header wrapper and content wrapper.\n * Used by side-navigation to zero out expandable-section's own padding so the\n * parent can control spacing directly, eliminating brittle cross-component\n * positional selectors.\n */\n __disableHeaderPaddings?: boolean;\n };\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 __injectAnalyticsComponentMetadata,\n __expandIconPosition = 'start',\n __disableHeaderPaddings = false,\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 // Map stacked variant to container to avoid code duplication\n const baseVariant: InternalVariant = variant === 'stacked' ? 'container' : variant;\n\n return (\n <ExpandableSectionContainer\n {...props}\n expanded={expanded}\n className={clsx(baseProps.className, styles.root, analyticsSelectors.root)}\n variant={variant}\n disableContentPaddings={disableContentPaddings}\n __injectAnalyticsComponentMetadata={__injectAnalyticsComponentMetadata}\n header={\n <ExpandableSectionHeader\n id={triggerControlId}\n descriptionId={descriptionId}\n className={clsx(\n styles.header,\n styles[`header-${baseVariant}`],\n screenReaderTextClass,\n __disableHeaderPaddings && styles['disable-header-paddings']\n )}\n variant={baseVariant}\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 expandIconPosition={__expandIconPosition}\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(\n styles.content,\n styles[`content-${baseVariant}`],\n expanded && styles['content-expanded'],\n disableContentPaddings && styles['disable-content-paddings']\n )}\n role=\"group\"\n aria-label={triggerProps.ariaLabel}\n aria-labelledby={triggerProps.ariaLabelledBy}\n aria-describedby={variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined}\n >\n {children}\n </div>\n </CSSTransition>\n </ExpandableSectionContainer>\n );\n}\n"]}

package/lib/internal/template/expandable-section/styles.css.js CHANGED Viewed

@@ -1,40 +1,47 @@
     import './styles.scoped.css';
     export default {
-  "content-enter": "awsui_content-enter_gwq0h_12v4w_161",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_12v4w_1",
-  "trigger-expanded": "awsui_trigger-expanded_gwq0h_12v4w_183",
-  "icon": "awsui_icon_gwq0h_12v4w_197",
-  "root": "awsui_root_gwq0h_12v4w_211",
-  "expand-button": "awsui_expand-button_gwq0h_12v4w_246",
-  "expanded": "awsui_expanded_gwq0h_12v4w_254",
-  "icon-container": "awsui_icon-container_gwq0h_12v4w_264",
-  "icon-container-container": "awsui_icon-container-container_gwq0h_12v4w_268",
-  "wrapper": "awsui_wrapper_gwq0h_12v4w_284",
-  "wrapper-default": "awsui_wrapper-default_gwq0h_12v4w_292",
-  "wrapper-inline": "awsui_wrapper-inline_gwq0h_12v4w_292",
-  "wrapper-footer": "awsui_wrapper-footer_gwq0h_12v4w_292",
-  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_12v4w_296",
-  "wrapper-container": "awsui_wrapper-container_gwq0h_12v4w_299",
-  "wrapper-compact": "awsui_wrapper-compact_gwq0h_12v4w_303",
-  "header-deprecated": "awsui_header-deprecated_gwq0h_12v4w_316",
-  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_12v4w_322",
-  "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_12v4w_345",
-  "header": "awsui_header_gwq0h_12v4w_316",
-  "header-wrapper": "awsui_header-wrapper_gwq0h_12v4w_362",
-  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_12v4w_374",
-  "header-button": "awsui_header-button_gwq0h_12v4w_380",
-  "header-container-button": "awsui_header-container-button_gwq0h_12v4w_380",
-  "header-container": "awsui_header-container_gwq0h_12v4w_380",
-  "header-navigation": "awsui_header-navigation_gwq0h_12v4w_415",
-  "header-text": "awsui_header-text_gwq0h_12v4w_452",
-  "content": "awsui_content_gwq0h_12v4w_161",
-  "content-default": "awsui_content-default_gwq0h_12v4w_465",
-  "content-inline": "awsui_content-inline_gwq0h_12v4w_465",
-  "content-footer": "awsui_content-footer_gwq0h_12v4w_469",
-  "content-expanded": "awsui_content-expanded_gwq0h_12v4w_473",
-  "content-compact": "awsui_content-compact_gwq0h_12v4w_476",
-  "focusable": "awsui_focusable_gwq0h_12v4w_480",
-  "click-target": "awsui_click-target_gwq0h_12v4w_495"
+  "content-enter": "awsui_content-enter_gwq0h_1sevs_161",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1sevs_1",
+  "trigger-expanded": "awsui_trigger-expanded_gwq0h_1sevs_183",
+  "icon": "awsui_icon_gwq0h_1sevs_197",
+  "root": "awsui_root_gwq0h_1sevs_211",
+  "expand-button": "awsui_expand-button_gwq0h_1sevs_246",
+  "expanded": "awsui_expanded_gwq0h_1sevs_254",
+  "icon-container": "awsui_icon-container_gwq0h_1sevs_264",
+  "icon-container-container": "awsui_icon-container-container_gwq0h_1sevs_268",
+  "wrapper": "awsui_wrapper_gwq0h_1sevs_284",
+  "wrapper-default": "awsui_wrapper-default_gwq0h_1sevs_292",
+  "wrapper-inline": "awsui_wrapper-inline_gwq0h_1sevs_292",
+  "wrapper-footer": "awsui_wrapper-footer_gwq0h_1sevs_292",
+  "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1sevs_296",
+  "wrapper-container": "awsui_wrapper-container_gwq0h_1sevs_299",
+  "wrapper-compact": "awsui_wrapper-compact_gwq0h_1sevs_303",
+  "header-deprecated": "awsui_header-deprecated_gwq0h_1sevs_316",
+  "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1sevs_322",
+  "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_1sevs_345",
+  "header": "awsui_header_gwq0h_1sevs_316",
+  "header-wrapper": "awsui_header-wrapper_gwq0h_1sevs_362",
+  "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1sevs_374",
+  "header-button": "awsui_header-button_gwq0h_1sevs_382",
+  "header-container-button": "awsui_header-container-button_gwq0h_1sevs_382",
+  "header-container": "awsui_header-container_gwq0h_1sevs_382",
+  "header-navigation": "awsui_header-navigation_gwq0h_1sevs_417",
+  "header-text": "awsui_header-text_gwq0h_1sevs_454",
+  "content": "awsui_content_gwq0h_1sevs_161",
+  "content-default": "awsui_content-default_gwq0h_1sevs_467",
+  "content-inline": "awsui_content-inline_gwq0h_1sevs_467",
+  "content-footer": "awsui_content-footer_gwq0h_1sevs_471",
+  "content-expanded": "awsui_content-expanded_gwq0h_1sevs_475",
+  "content-compact": "awsui_content-compact_gwq0h_1sevs_478",
+  "disable-header-paddings": "awsui_disable-header-paddings_gwq0h_1sevs_482",
+  "disable-content-paddings": "awsui_disable-content-paddings_gwq0h_1sevs_487",
+  "focusable": "awsui_focusable_gwq0h_1sevs_492",
+  "click-target": "awsui_click-target_gwq0h_1sevs_507",
+  "header-icon-end": "awsui_header-icon-end_gwq0h_1sevs_514",
+  "header-button-icon-end": "awsui_header-button-icon-end_gwq0h_1sevs_531",
+  "icon-container-end": "awsui_icon-container-end_gwq0h_1sevs_545",
+  "header-content": "awsui_header-content_gwq0h_1sevs_594",
+  "header-navigation-content": "awsui_header-navigation-content_gwq0h_1sevs_599"
 };