@cloudscape-design/components 3.0.1345 → 3.0.1347

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 (122) hide show
  1. package/app-layout/visual-refresh-toolbar/drawer/styles.css.js +32 -32
  2. package/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +90 -87
  3. package/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +32 -32
  4. package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
  5. package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +11 -11
  6. package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
  7. package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +30 -30
  8. package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +60 -60
  9. package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +30 -30
  10. package/app-layout-toolbar/index.d.ts.map +1 -1
  11. package/app-layout-toolbar/index.js +1 -0
  12. package/app-layout-toolbar/index.js.map +1 -1
  13. package/button-dropdown/index.d.ts.map +1 -1
  14. package/button-dropdown/index.js +5 -1
  15. package/button-dropdown/index.js.map +1 -1
  16. package/button-dropdown/interfaces.d.ts +2 -0
  17. package/button-dropdown/interfaces.d.ts.map +1 -1
  18. package/button-dropdown/interfaces.js.map +1 -1
  19. package/expandable-section/expandable-section-container.d.ts +0 -2
  20. package/expandable-section/expandable-section-container.d.ts.map +1 -1
  21. package/expandable-section/expandable-section-container.js +2 -2
  22. package/expandable-section/expandable-section-container.js.map +1 -1
  23. package/expandable-section/expandable-section-header.d.ts +3 -1
  24. package/expandable-section/expandable-section-header.d.ts.map +1 -1
  25. package/expandable-section/expandable-section-header.js +4 -4
  26. package/expandable-section/expandable-section-header.js.map +1 -1
  27. package/expandable-section/internal.d.ts +8 -2
  28. package/expandable-section/internal.d.ts.map +1 -1
  29. package/expandable-section/internal.js +24 -10
  30. package/expandable-section/internal.js.map +1 -1
  31. package/expandable-section/styles.css.js +43 -42
  32. package/expandable-section/styles.scoped.css +198 -143
  33. package/expandable-section/styles.selectors.js +43 -42
  34. package/flashbar/styles.css.js +50 -50
  35. package/flashbar/styles.scoped.css +153 -153
  36. package/flashbar/styles.selectors.js +50 -50
  37. package/help-panel/styles.css.js +6 -6
  38. package/help-panel/styles.scoped.css +68 -68
  39. package/help-panel/styles.selectors.js +6 -6
  40. package/i18n/messages/all.all.js +1 -1
  41. package/i18n/messages/all.all.json +1 -1
  42. package/i18n/messages/all.ar.js +1 -1
  43. package/i18n/messages/all.ar.json +1 -1
  44. package/i18n/messages/all.de.js +1 -1
  45. package/i18n/messages/all.de.json +1 -1
  46. package/i18n/messages/all.en-GB.js +1 -1
  47. package/i18n/messages/all.en-GB.json +1 -1
  48. package/i18n/messages/all.en.js +1 -1
  49. package/i18n/messages/all.en.json +1 -1
  50. package/i18n/messages/all.es.js +1 -1
  51. package/i18n/messages/all.es.json +1 -1
  52. package/i18n/messages/all.fr.js +1 -1
  53. package/i18n/messages/all.fr.json +1 -1
  54. package/i18n/messages/all.id.js +1 -1
  55. package/i18n/messages/all.id.json +1 -1
  56. package/i18n/messages/all.it.js +1 -1
  57. package/i18n/messages/all.it.json +1 -1
  58. package/i18n/messages/all.ja.js +1 -1
  59. package/i18n/messages/all.ja.json +1 -1
  60. package/i18n/messages/all.ko.js +1 -1
  61. package/i18n/messages/all.ko.json +1 -1
  62. package/i18n/messages/all.pt-BR.js +1 -1
  63. package/i18n/messages/all.pt-BR.json +1 -1
  64. package/i18n/messages/all.tr.js +1 -1
  65. package/i18n/messages/all.tr.json +1 -1
  66. package/i18n/messages/all.zh-CN.js +1 -1
  67. package/i18n/messages/all.zh-CN.json +1 -1
  68. package/i18n/messages/all.zh-TW.js +1 -1
  69. package/i18n/messages/all.zh-TW.json +1 -1
  70. package/i18n/messages-types.d.ts +8 -0
  71. package/i18n/messages-types.d.ts.map +1 -1
  72. package/i18n/messages-types.js.map +1 -1
  73. package/internal/base-component/index.d.ts +1 -0
  74. package/internal/base-component/index.d.ts.map +1 -1
  75. package/internal/base-component/index.js +1 -0
  76. package/internal/base-component/index.js.map +1 -1
  77. package/internal/base-component/styles.scoped.css +1 -2640
  78. package/internal/base-theme/styles.css.js +4 -0
  79. package/internal/base-theme/styles.scoped.css +2651 -0
  80. package/internal/base-theme/styles.selectors.js +5 -0
  81. package/internal/components/drag-handle/styles.css.js +14 -14
  82. package/internal/components/drag-handle/styles.scoped.css +28 -19
  83. package/internal/components/drag-handle/styles.selectors.js +14 -14
  84. package/internal/components/token-list/styles.css.js +10 -10
  85. package/internal/components/token-list/styles.scoped.css +24 -24
  86. package/internal/components/token-list/styles.selectors.js +10 -10
  87. package/internal/components/transition/index.d.ts +7 -7
  88. package/internal/components/transition/index.d.ts.map +1 -1
  89. package/internal/components/transition/index.js +4 -4
  90. package/internal/components/transition/index.js.map +1 -1
  91. package/internal/environment.js +2 -2
  92. package/internal/environment.json +2 -2
  93. package/internal/generated/styles/tokens.d.ts +11 -0
  94. package/internal/generated/styles/tokens.js +12 -1
  95. package/internal/generated/theming/index.cjs +140 -15
  96. package/internal/generated/theming/index.cjs.d.ts +18 -0
  97. package/internal/generated/theming/index.d.ts +18 -0
  98. package/internal/generated/theming/index.js +140 -15
  99. package/internal/hooks/use-base-component/index.d.ts +2 -5
  100. package/internal/hooks/use-base-component/index.d.ts.map +1 -1
  101. package/internal/hooks/use-base-component/index.js +11 -2
  102. package/internal/hooks/use-base-component/index.js.map +1 -1
  103. package/internal/manifest.json +1 -1
  104. package/link/styles.css.js +21 -21
  105. package/link/styles.scoped.css +86 -86
  106. package/link/styles.selectors.js +21 -21
  107. package/manifest.json +2 -2
  108. package/package.json +2 -1
  109. package/side-navigation/implementation.d.ts.map +1 -1
  110. package/side-navigation/implementation.js +6 -3
  111. package/side-navigation/implementation.js.map +1 -1
  112. package/side-navigation/parts.d.ts +2 -0
  113. package/side-navigation/parts.d.ts.map +1 -1
  114. package/side-navigation/parts.js +86 -76
  115. package/side-navigation/parts.js.map +1 -1
  116. package/side-navigation/styles.css.js +64 -50
  117. package/side-navigation/styles.scoped.css +552 -106
  118. package/side-navigation/styles.selectors.js +64 -50
  119. package/side-navigation/util.d.ts +10 -0
  120. package/side-navigation/util.d.ts.map +1 -1
  121. package/side-navigation/util.js +48 -0
  122. package/side-navigation/util.js.map +1 -1
@@ -13,10 +13,15 @@ export type InternalExpandableSectionProps = Omit<ExpandableSectionProps, 'varia
13
13
  /**
14
14
  * Removes default padding from the header wrapper and content wrapper.
15
15
  * Used by side-navigation to zero out expandable-section's own padding so the
16
- * parent can control spacing directly, eliminating brittle cross-component
17
- * positional selectors.
16
+ * parent can control spacing directly.
18
17
  */
19
18
  __disableHeaderPaddings?: boolean;
19
+ /**
20
+ * When true, the expand/collapse icon button is hidden from assistive technology
21
+ * and removed from the tab order. Used by side-navigation when the nav is collapsed
22
+ * and the caret is visually clipped but still present in the DOM.
23
+ */
24
+ __hideExpandIcon?: boolean;
20
25
  };
21
26
  export default function InternalExpandableSection({
22
27
  expanded: controlledExpanded,
@@ -37,5 +42,6 @@ export default function InternalExpandableSection({
37
42
  __injectAnalyticsComponentMetadata,
38
43
  __expandIconPosition,
39
44
  __disableHeaderPaddings,
45
+ __hideExpandIcon,
40
46
  ...props
41
47
  }: InternalExpandableSectionProps): JSX.Element;
@@ -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;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"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/expandable-section/internal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,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;;;;OAIG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,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,gBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,8BAA8B,eA+IhC"}
@@ -1,21 +1,23 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import React, { useCallback, useRef } from 'react';
4
- import { CSSTransition } from 'react-transition-group';
3
+ import React, { useCallback, useEffect, useRef } from 'react';
5
4
  import clsx from 'clsx';
6
5
  import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
7
6
  import { getBaseProps } from '../internal/base-component';
8
7
  import { screenReaderTextClass } from '../internal/components/chart-series-details/series-details-text';
8
+ import { Transition } from '../internal/components/transition';
9
9
  import { fireNonCancelableEvent } from '../internal/events';
10
10
  import { useControllable } from '../internal/hooks/use-controllable';
11
+ import { useOneTheme } from '../internal/hooks/use-visual-mode';
11
12
  import { KeyCode } from '../internal/keycode';
12
13
  import { ExpandableSectionContainer } from './expandable-section-container';
13
14
  import { ExpandableSectionHeader } from './expandable-section-header';
14
15
  import { variantSupportsDescription } from './utils';
15
16
  import analyticsSelectors from './analytics-metadata/styles.css.js';
16
17
  import styles from './styles.css.js';
17
- 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 }) {
18
- const ref = useRef(null);
18
+ 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, __hideExpandIcon = false, ...props }) {
19
+ const contentInnerRef = useRef(null);
20
+ const isOneTheme = useOneTheme();
19
21
  const controlId = useUniqueId();
20
22
  const triggerControlId = `${controlId}-trigger`;
21
23
  const descriptionId = `${controlId}-description`;
@@ -25,9 +27,9 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
25
27
  controlledProp: 'expanded',
26
28
  changeHandler: 'onChange',
27
29
  });
28
- const onExpandChange = useCallback((expanded) => {
29
- setExpanded(expanded);
30
- fireNonCancelableEvent(onChange, { expanded });
30
+ const onExpandChange = useCallback((newExpanded) => {
31
+ setExpanded(newExpanded);
32
+ fireNonCancelableEvent(onChange, { expanded: newExpanded });
31
33
  }, [onChange, setExpanded]);
32
34
  const onClick = useCallback(() => {
33
35
  onExpandChange(!expanded);
@@ -44,6 +46,14 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
44
46
  event.preventDefault();
45
47
  }
46
48
  }, []);
49
+ // Set inert on collapsed content to block pointer/focus events and hide from
50
+ // assistive technology. Direct DOM manipulation needed until React supports
51
+ // the inert attribute natively. https://github.com/facebook/react/issues/17157
52
+ useEffect(() => {
53
+ if (contentInnerRef.current) {
54
+ contentInnerRef.current.inert = !expanded;
55
+ }
56
+ }, [expanded]);
47
57
  const triggerProps = {
48
58
  ariaControls: controlId,
49
59
  ariaLabel: headerAriaLabel,
@@ -54,8 +64,12 @@ export default function InternalExpandableSection({ expanded: controlledExpanded
54
64
  };
55
65
  // Map stacked variant to container to avoid code duplication
56
66
  const baseVariant = variant === 'stacked' ? 'container' : variant;
57
- 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 },
58
- React.createElement(CSSTransition, { in: expanded, timeout: 30, classNames: { enter: styles['content-enter'] }, nodeRef: ref },
59
- 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))));
67
+ return (React.createElement(ExpandableSectionContainer, { ...props, expanded: expanded, className: clsx(baseProps.className, styles.root, analyticsSelectors.root), variant: variant, __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, hideExpandIcon: __hideExpandIcon, ...triggerProps }), __internalRootRef: __internalRootRef },
68
+ React.createElement(Transition, { in: !!expanded, disabled: !isOneTheme }, (transitionState, transitionEventsRef, motionDisabled) => {
69
+ const contentSettled = !!expanded && (motionDisabled || transitionState === 'entered');
70
+ return (React.createElement("div", { ref: transitionEventsRef, id: controlId, 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 },
71
+ React.createElement("div", { ref: contentInnerRef, className: clsx(styles['content-inner'], expanded && styles['content-inner-expanded'], contentSettled && styles['content-inner-settled']) },
72
+ React.createElement("div", { className: clsx(styles['content-inner-body'], styles[`content-inner-body-${baseVariant}`], disableContentPaddings && styles['disable-content-paddings']) }, children))));
73
+ })));
60
74
  }
61
75
  //# sourceMappingURL=internal.js.map
@@ -1 +1 @@
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"]}
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, useEffect, useRef } from 'react';\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 { Transition } from '../internal/components/transition';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useOneTheme } from '../internal/hooks/use-visual-mode';\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.\n */\n __disableHeaderPaddings?: boolean;\n /**\n * When true, the expand/collapse icon button is hidden from assistive technology\n * and removed from the tab order. Used by side-navigation when the nav is collapsed\n * and the caret is visually clipped but still present in the DOM.\n */\n __hideExpandIcon?: 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 __hideExpandIcon = false,\n ...props\n}: InternalExpandableSectionProps) {\n const contentInnerRef = useRef<HTMLDivElement>(null);\n const isOneTheme = useOneTheme();\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 (newExpanded: boolean) => {\n setExpanded(newExpanded);\n fireNonCancelableEvent(onChange, { expanded: newExpanded });\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 // Set inert on collapsed content to block pointer/focus events and hide from\n // assistive technology. Direct DOM manipulation needed until React supports\n // the inert attribute natively. https://github.com/facebook/react/issues/17157\n useEffect(() => {\n if (contentInnerRef.current) {\n contentInnerRef.current.inert = !expanded;\n }\n }, [expanded]);\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 __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 hideExpandIcon={__hideExpandIcon}\n {...triggerProps}\n />\n }\n __internalRootRef={__internalRootRef}\n >\n <Transition<HTMLDivElement> in={!!expanded} disabled={!isOneTheme}>\n {(transitionState, transitionEventsRef, motionDisabled) => {\n const contentSettled = !!expanded && (motionDisabled || transitionState === 'entered');\n\n return (\n <div\n ref={transitionEventsRef}\n id={controlId}\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={\n variantSupportsDescription(baseVariant) && headerDescription ? descriptionId : undefined\n }\n >\n <div\n ref={contentInnerRef}\n className={clsx(\n styles['content-inner'],\n expanded && styles['content-inner-expanded'],\n contentSettled && styles['content-inner-settled']\n )}\n >\n <div\n className={clsx(\n styles['content-inner-body'],\n styles[`content-inner-body-${baseVariant}`],\n disableContentPaddings && styles['disable-content-paddings']\n )}\n >\n {children}\n </div>\n </div>\n </div>\n );\n }}\n </Transition>\n </ExpandableSectionContainer>\n );\n}\n"]}
@@ -1,47 +1,48 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "content-enter": "awsui_content-enter_gwq0h_1gu2g_161",
5
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1gu2g_1",
6
- "trigger-expanded": "awsui_trigger-expanded_gwq0h_1gu2g_183",
7
- "icon": "awsui_icon_gwq0h_1gu2g_197",
8
- "root": "awsui_root_gwq0h_1gu2g_211",
9
- "expand-button": "awsui_expand-button_gwq0h_1gu2g_246",
10
- "expanded": "awsui_expanded_gwq0h_1gu2g_254",
11
- "icon-container": "awsui_icon-container_gwq0h_1gu2g_264",
12
- "icon-container-container": "awsui_icon-container-container_gwq0h_1gu2g_268",
13
- "wrapper": "awsui_wrapper_gwq0h_1gu2g_284",
14
- "wrapper-default": "awsui_wrapper-default_gwq0h_1gu2g_292",
15
- "wrapper-inline": "awsui_wrapper-inline_gwq0h_1gu2g_292",
16
- "wrapper-footer": "awsui_wrapper-footer_gwq0h_1gu2g_292",
17
- "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1gu2g_296",
18
- "wrapper-container": "awsui_wrapper-container_gwq0h_1gu2g_299",
19
- "wrapper-compact": "awsui_wrapper-compact_gwq0h_1gu2g_303",
20
- "header-deprecated": "awsui_header-deprecated_gwq0h_1gu2g_316",
21
- "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1gu2g_322",
22
- "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_1gu2g_345",
23
- "header": "awsui_header_gwq0h_1gu2g_316",
24
- "header-wrapper": "awsui_header-wrapper_gwq0h_1gu2g_362",
25
- "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_1gu2g_374",
26
- "header-button": "awsui_header-button_gwq0h_1gu2g_382",
27
- "header-container-button": "awsui_header-container-button_gwq0h_1gu2g_382",
28
- "header-container": "awsui_header-container_gwq0h_1gu2g_382",
29
- "header-navigation": "awsui_header-navigation_gwq0h_1gu2g_417",
30
- "header-text": "awsui_header-text_gwq0h_1gu2g_454",
31
- "content": "awsui_content_gwq0h_1gu2g_161",
32
- "content-default": "awsui_content-default_gwq0h_1gu2g_467",
33
- "content-inline": "awsui_content-inline_gwq0h_1gu2g_467",
34
- "content-footer": "awsui_content-footer_gwq0h_1gu2g_471",
35
- "content-expanded": "awsui_content-expanded_gwq0h_1gu2g_475",
36
- "content-compact": "awsui_content-compact_gwq0h_1gu2g_478",
37
- "disable-header-paddings": "awsui_disable-header-paddings_gwq0h_1gu2g_482",
38
- "disable-content-paddings": "awsui_disable-content-paddings_gwq0h_1gu2g_487",
39
- "focusable": "awsui_focusable_gwq0h_1gu2g_492",
40
- "click-target": "awsui_click-target_gwq0h_1gu2g_507",
41
- "header-icon-end": "awsui_header-icon-end_gwq0h_1gu2g_514",
42
- "header-button-icon-end": "awsui_header-button-icon-end_gwq0h_1gu2g_531",
43
- "icon-container-end": "awsui_icon-container-end_gwq0h_1gu2g_545",
44
- "header-content": "awsui_header-content_gwq0h_1gu2g_594",
45
- "header-navigation-content": "awsui_header-navigation-content_gwq0h_1gu2g_599"
4
+ "root": "awsui_root_gwq0h_10ou0_153",
5
+ "expand-button": "awsui_expand-button_gwq0h_10ou0_188",
6
+ "icon": "awsui_icon_gwq0h_10ou0_192",
7
+ "expanded": "awsui_expanded_gwq0h_10ou0_207",
8
+ "icon-container": "awsui_icon-container_gwq0h_10ou0_217",
9
+ "icon-container-container": "awsui_icon-container-container_gwq0h_10ou0_221",
10
+ "wrapper": "awsui_wrapper_gwq0h_10ou0_237",
11
+ "wrapper-default": "awsui_wrapper-default_gwq0h_10ou0_245",
12
+ "wrapper-inline": "awsui_wrapper-inline_gwq0h_10ou0_245",
13
+ "wrapper-footer": "awsui_wrapper-footer_gwq0h_10ou0_245",
14
+ "wrapper-navigation": "awsui_wrapper-navigation_gwq0h_10ou0_249",
15
+ "wrapper-container": "awsui_wrapper-container_gwq0h_10ou0_252",
16
+ "wrapper-compact": "awsui_wrapper-compact_gwq0h_10ou0_256",
17
+ "header-deprecated": "awsui_header-deprecated_gwq0h_10ou0_269",
18
+ "wrapper-expanded": "awsui_wrapper-expanded_gwq0h_10ou0_288",
19
+ "wrapper-not-expanded-without-actions": "awsui_wrapper-not-expanded-without-actions_gwq0h_10ou0_333",
20
+ "header": "awsui_header_gwq0h_10ou0_269",
21
+ "header-wrapper": "awsui_header-wrapper_gwq0h_10ou0_350",
22
+ "header-actions-wrapper": "awsui_header-actions-wrapper_gwq0h_10ou0_362",
23
+ "header-button": "awsui_header-button_gwq0h_10ou0_370",
24
+ "header-container-button": "awsui_header-container-button_gwq0h_10ou0_370",
25
+ "header-container": "awsui_header-container_gwq0h_10ou0_370",
26
+ "header-navigation": "awsui_header-navigation_gwq0h_10ou0_405",
27
+ "header-text": "awsui_header-text_gwq0h_10ou0_442",
28
+ "content": "awsui_content_gwq0h_10ou0_452",
29
+ "content-expanded": "awsui_content-expanded_gwq0h_10ou0_455",
30
+ "content-compact": "awsui_content-compact_gwq0h_10ou0_458",
31
+ "content-inner": "awsui_content-inner_gwq0h_10ou0_491",
32
+ "content-inner-expanded": "awsui_content-inner-expanded_gwq0h_10ou0_508",
33
+ "content-inner-settled": "awsui_content-inner-settled_gwq0h_10ou0_522",
34
+ "content-inner-body-default": "awsui_content-inner-body-default_gwq0h_10ou0_526",
35
+ "content-inner-body-inline": "awsui_content-inner-body-inline_gwq0h_10ou0_526",
36
+ "content-inner-body-footer": "awsui_content-inner-body-footer_gwq0h_10ou0_529",
37
+ "content-inner-body-container": "awsui_content-inner-body-container_gwq0h_10ou0_532",
38
+ "disable-header-paddings": "awsui_disable-header-paddings_gwq0h_10ou0_537",
39
+ "disable-content-paddings": "awsui_disable-content-paddings_gwq0h_10ou0_542",
40
+ "focusable": "awsui_focusable_gwq0h_10ou0_547",
41
+ "click-target": "awsui_click-target_gwq0h_10ou0_562",
42
+ "header-icon-end": "awsui_header-icon-end_gwq0h_10ou0_569",
43
+ "header-button-icon-end": "awsui_header-button-icon-end_gwq0h_10ou0_586",
44
+ "icon-container-end": "awsui_icon-container-end_gwq0h_10ou0_600",
45
+ "header-content": "awsui_header-content_gwq0h_10ou0_649",
46
+ "header-navigation-content": "awsui_header-navigation-content_gwq0h_10ou0_654"
46
47
  };
47
48