@cloudscape-design/components 3.0.109 → 3.0.111

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 (86) hide show
  1. package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
  2. package/app-layout/visual-refresh/app-bar.js +2 -1
  3. package/app-layout/visual-refresh/app-bar.js.map +1 -1
  4. package/app-layout/visual-refresh/background.d.ts.map +1 -1
  5. package/app-layout/visual-refresh/background.js +7 -4
  6. package/app-layout/visual-refresh/background.js.map +1 -1
  7. package/app-layout/visual-refresh/context.d.ts +2 -0
  8. package/app-layout/visual-refresh/context.d.ts.map +1 -1
  9. package/app-layout/visual-refresh/context.js +23 -18
  10. package/app-layout/visual-refresh/context.js.map +1 -1
  11. package/app-layout/visual-refresh/styles.css.js +60 -59
  12. package/app-layout/visual-refresh/styles.scoped.css +175 -152
  13. package/app-layout/visual-refresh/styles.selectors.js +60 -59
  14. package/cards/index.d.ts.map +1 -1
  15. package/cards/index.js +1 -1
  16. package/cards/index.js.map +1 -1
  17. package/container/internal.d.ts +2 -1
  18. package/container/internal.d.ts.map +1 -1
  19. package/container/internal.js +21 -6
  20. package/container/internal.js.map +1 -1
  21. package/container/styles.css.js +16 -16
  22. package/container/styles.scoped.css +36 -26
  23. package/container/styles.selectors.js +16 -16
  24. package/internal/environment.js +1 -1
  25. package/internal/hooks/forward-focus/radio-group.d.ts +12 -0
  26. package/internal/hooks/forward-focus/radio-group.d.ts.map +1 -0
  27. package/internal/hooks/forward-focus/radio-group.js +27 -0
  28. package/internal/hooks/forward-focus/radio-group.js.map +1 -0
  29. package/manifest.json +3 -0
  30. package/package.json +1 -1
  31. package/radio-group/index.d.ts +3 -1
  32. package/radio-group/index.d.ts.map +1 -1
  33. package/radio-group/index.js +4 -3
  34. package/radio-group/index.js.map +1 -1
  35. package/radio-group/interfaces.d.ts +6 -0
  36. package/radio-group/interfaces.d.ts.map +1 -1
  37. package/radio-group/interfaces.js.map +1 -1
  38. package/radio-group/internal.d.ts +3 -3
  39. package/radio-group/internal.d.ts.map +1 -1
  40. package/radio-group/internal.js +6 -3
  41. package/radio-group/internal.js.map +1 -1
  42. package/split-panel/icons/bottom-icon-refresh.d.ts.map +1 -1
  43. package/split-panel/icons/bottom-icon-refresh.js +6 -9
  44. package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
  45. package/split-panel/icons/side-position-refresh.d.ts +1 -0
  46. package/split-panel/icons/side-position-refresh.d.ts.map +1 -1
  47. package/split-panel/icons/side-position-refresh.js +6 -9
  48. package/split-panel/icons/side-position-refresh.js.map +1 -1
  49. package/split-panel/styles.css.js +59 -58
  50. package/split-panel/styles.scoped.css +84 -81
  51. package/split-panel/styles.selectors.js +59 -58
  52. package/table/header-cell/index.d.ts +2 -1
  53. package/table/header-cell/index.d.ts.map +1 -1
  54. package/table/header-cell/index.js +2 -1
  55. package/table/header-cell/index.js.map +1 -1
  56. package/table/header-cell/styles.css.js +16 -15
  57. package/table/header-cell/styles.scoped.css +26 -26
  58. package/table/header-cell/styles.selectors.js +16 -15
  59. package/table/internal.d.ts.map +1 -1
  60. package/table/internal.js +7 -3
  61. package/table/internal.js.map +1 -1
  62. package/table/sticky-header.d.ts +1 -0
  63. package/table/sticky-header.d.ts.map +1 -1
  64. package/table/sticky-header.js +2 -1
  65. package/table/sticky-header.js.map +1 -1
  66. package/table/styles.css.js +34 -32
  67. package/table/styles.scoped.css +47 -39
  68. package/table/styles.selectors.js +34 -32
  69. package/table/thead.d.ts.map +1 -1
  70. package/table/thead.js +3 -3
  71. package/table/thead.js.map +1 -1
  72. package/tiles/index.d.ts +3 -1
  73. package/tiles/index.d.ts.map +1 -1
  74. package/tiles/index.js +4 -3
  75. package/tiles/index.js.map +1 -1
  76. package/tiles/interfaces.d.ts +6 -0
  77. package/tiles/interfaces.d.ts.map +1 -1
  78. package/tiles/interfaces.js.map +1 -1
  79. package/tiles/internal.d.ts +3 -3
  80. package/tiles/internal.d.ts.map +1 -1
  81. package/tiles/internal.js +24 -21
  82. package/tiles/internal.js.map +1 -1
  83. package/tiles/tile.d.ts +2 -1
  84. package/tiles/tile.d.ts.map +1 -1
  85. package/tiles/tile.js +7 -5
  86. package/tiles/tile.js.map +1 -1
@@ -2,64 +2,65 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "appbar": "awsui_appbar_hyvsj_1al7x_93",
6
- "appbar-nav": "awsui_appbar-nav_hyvsj_1al7x_117",
7
- "breadcrumbs": "awsui_breadcrumbs_hyvsj_1al7x_121",
8
- "appbar-tools": "awsui_appbar-tools_hyvsj_1al7x_125",
9
- "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1al7x_160",
10
- "has-notifications-content": "awsui_has-notifications-content_hyvsj_1al7x_167",
11
- "has-header": "awsui_has-header_hyvsj_1al7x_173",
12
- "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_1al7x_173",
13
- "content-type-wizard": "awsui_content-type-wizard_hyvsj_1al7x_174",
14
- "content-type-cards": "awsui_content-type-cards_hyvsj_1al7x_177",
15
- "content-type-table": "awsui_content-type-table_hyvsj_1al7x_178",
16
- "background": "awsui_background_hyvsj_1al7x_213",
17
- "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_1al7x_216",
18
- "sticky-notifications": "awsui_sticky-notifications_hyvsj_1al7x_228",
19
- "overlap": "awsui_overlap_hyvsj_1al7x_234",
20
- "content": "awsui_content_hyvsj_1al7x_174",
21
- "layout": "awsui_layout_hyvsj_1al7x_322",
22
- "has-max-content-width": "awsui_has-max-content-width_hyvsj_1al7x_404",
23
- "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1al7x_431",
24
- "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1al7x_434",
25
- "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1al7x_438",
26
- "has-split-panel": "awsui_has-split-panel_hyvsj_1al7x_452",
27
- "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1al7x_452",
28
- "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1al7x_464",
29
- "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1al7x_467",
30
- "block-body-scroll": "awsui_block-body-scroll_hyvsj_1al7x_482",
31
- "container": "awsui_container_hyvsj_1al7x_490",
32
- "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1al7x_507",
33
- "is-navigation-open": "awsui_is-navigation-open_hyvsj_1al7x_512",
34
- "is-tools-open": "awsui_is-tools-open_hyvsj_1al7x_515",
35
- "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1al7x_515",
36
- "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1al7x_515",
37
- "content-type-default": "awsui_content-type-default_hyvsj_1al7x_535",
38
- "content-type-form": "awsui_content-type-form_hyvsj_1al7x_535",
39
- "unfocusable": "awsui_unfocusable_hyvsj_1al7x_576",
40
- "navigation-container": "awsui_navigation-container_hyvsj_1al7x_584",
41
- "show-navigation": "awsui_show-navigation_hyvsj_1al7x_608",
42
- "animating": "awsui_animating_hyvsj_1al7x_630",
43
- "showButtons": "awsui_showButtons_hyvsj_1al7x_1",
44
- "navigation": "awsui_navigation_hyvsj_1al7x_584",
45
- "openNavigation": "awsui_openNavigation_hyvsj_1al7x_1",
46
- "animated-content": "awsui_animated-content_hyvsj_1al7x_690",
47
- "hide-navigation": "awsui_hide-navigation_hyvsj_1al7x_699",
48
- "notifications": "awsui_notifications_hyvsj_1al7x_216",
49
- "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1al7x_766",
50
- "position-bottom": "awsui_position-bottom_hyvsj_1al7x_801",
51
- "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1al7x_1",
52
- "split-panel-side": "awsui_split-panel-side_hyvsj_1al7x_830",
53
- "position-side": "awsui_position-side_hyvsj_1al7x_857",
54
- "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1al7x_1",
55
- "tools-container": "awsui_tools-container_hyvsj_1al7x_894",
56
- "tools": "awsui_tools_hyvsj_1al7x_894",
57
- "openTools": "awsui_openTools_hyvsj_1al7x_1",
58
- "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1al7x_977",
59
- "hide-tools": "awsui_hide-tools_hyvsj_1al7x_987",
60
- "show-tools": "awsui_show-tools_hyvsj_1al7x_999",
61
- "has-tools-form": "awsui_has-tools-form_hyvsj_1al7x_977",
62
- "trigger": "awsui_trigger_hyvsj_1al7x_1056",
63
- "selected": "awsui_selected_hyvsj_1al7x_1094"
5
+ "appbar": "awsui_appbar_hyvsj_8eynx_93",
6
+ "appbar-nav": "awsui_appbar-nav_hyvsj_8eynx_117",
7
+ "breadcrumbs": "awsui_breadcrumbs_hyvsj_8eynx_121",
8
+ "appbar-tools": "awsui_appbar-tools_hyvsj_8eynx_125",
9
+ "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_8eynx_166",
10
+ "has-notifications-content": "awsui_has-notifications-content_hyvsj_8eynx_173",
11
+ "has-header": "awsui_has-header_hyvsj_8eynx_179",
12
+ "has-dynamic-overlap-height": "awsui_has-dynamic-overlap-height_hyvsj_8eynx_179",
13
+ "content-type-wizard": "awsui_content-type-wizard_hyvsj_8eynx_180",
14
+ "content-type-cards": "awsui_content-type-cards_hyvsj_8eynx_183",
15
+ "content-type-table": "awsui_content-type-table_hyvsj_8eynx_184",
16
+ "has-sticky-background": "awsui_has-sticky-background_hyvsj_8eynx_187",
17
+ "background": "awsui_background_hyvsj_8eynx_221",
18
+ "notifications-appbar-header": "awsui_notifications-appbar-header_hyvsj_8eynx_224",
19
+ "sticky-notifications": "awsui_sticky-notifications_hyvsj_8eynx_236",
20
+ "overlap": "awsui_overlap_hyvsj_8eynx_242",
21
+ "content": "awsui_content_hyvsj_8eynx_180",
22
+ "layout": "awsui_layout_hyvsj_8eynx_329",
23
+ "has-max-content-width": "awsui_has-max-content-width_hyvsj_8eynx_411",
24
+ "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_8eynx_438",
25
+ "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_8eynx_441",
26
+ "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_8eynx_445",
27
+ "has-split-panel": "awsui_has-split-panel_hyvsj_8eynx_459",
28
+ "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_8eynx_459",
29
+ "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_8eynx_471",
30
+ "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_8eynx_474",
31
+ "block-body-scroll": "awsui_block-body-scroll_hyvsj_8eynx_489",
32
+ "container": "awsui_container_hyvsj_8eynx_497",
33
+ "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_8eynx_514",
34
+ "is-navigation-open": "awsui_is-navigation-open_hyvsj_8eynx_519",
35
+ "is-tools-open": "awsui_is-tools-open_hyvsj_8eynx_522",
36
+ "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_8eynx_522",
37
+ "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_8eynx_522",
38
+ "content-type-default": "awsui_content-type-default_hyvsj_8eynx_542",
39
+ "content-type-form": "awsui_content-type-form_hyvsj_8eynx_542",
40
+ "unfocusable": "awsui_unfocusable_hyvsj_8eynx_583",
41
+ "navigation-container": "awsui_navigation-container_hyvsj_8eynx_591",
42
+ "show-navigation": "awsui_show-navigation_hyvsj_8eynx_626",
43
+ "animating": "awsui_animating_hyvsj_8eynx_648",
44
+ "showButtons": "awsui_showButtons_hyvsj_8eynx_1",
45
+ "navigation": "awsui_navigation_hyvsj_8eynx_591",
46
+ "openNavigation": "awsui_openNavigation_hyvsj_8eynx_1",
47
+ "animated-content": "awsui_animated-content_hyvsj_8eynx_709",
48
+ "hide-navigation": "awsui_hide-navigation_hyvsj_8eynx_718",
49
+ "notifications": "awsui_notifications_hyvsj_8eynx_224",
50
+ "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_8eynx_785",
51
+ "position-bottom": "awsui_position-bottom_hyvsj_8eynx_820",
52
+ "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_8eynx_1",
53
+ "split-panel-side": "awsui_split-panel-side_hyvsj_8eynx_849",
54
+ "position-side": "awsui_position-side_hyvsj_8eynx_877",
55
+ "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_8eynx_1",
56
+ "tools-container": "awsui_tools-container_hyvsj_8eynx_914",
57
+ "tools": "awsui_tools_hyvsj_8eynx_914",
58
+ "openTools": "awsui_openTools_hyvsj_8eynx_1",
59
+ "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_8eynx_999",
60
+ "hide-tools": "awsui_hide-tools_hyvsj_8eynx_1009",
61
+ "show-tools": "awsui_show-tools_hyvsj_8eynx_1021",
62
+ "has-tools-form": "awsui_has-tools-form_hyvsj_8eynx_999",
63
+ "trigger": "awsui_trigger_hyvsj_8eynx_1078",
64
+ "selected": "awsui_selected_hyvsj_8eynx_1117"
64
65
  };
65
66
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAmB/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBA+Hc,CAAC;AAE1B,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAmB/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,qBAgIc,CAAC;AAE1B,eAAe,KAAK,CAAC"}
package/cards/index.js CHANGED
@@ -70,7 +70,7 @@ var Cards = React.forwardRef(function (_a, ref) {
70
70
  }
71
71
  return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
72
72
  React.createElement(InternalContainer, { header: hasToolsHeader && (React.createElement("div", { className: clsx(styles.header, isRefresh && styles['header-refresh'], styles["header-variant-".concat(computedVariant)]) },
73
- React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId },
73
+ React.createElement(ToolsHeader, { header: header, filter: filter, pagination: pagination, preferences: preferences }))), disableContentPaddings: true, disableHeaderPaddings: computedVariant === 'full-page', variant: computedVariant === 'container' ? 'cards' : computedVariant, __stickyHeader: stickyHeader, __stickyOffset: stickyHeaderVerticalOffset, __headerRef: headerRef, __headerId: cardsHeaderId, __darkHeader: computedVariant === 'full-page' },
74
74
  React.createElement("div", { className: clsx(hasToolsHeader && styles['has-header']) }, status !== null && status !== void 0 ? status : (React.createElement(CardsList, { items: items, cardDefinition: cardDefinition, trackBy: trackBy, selectionType: selectionType, columns: columns, isItemSelected: isItemSelected, getItemSelectionProps: getItemSelectionProps, visibleSections: visibleSections, updateShiftToggle: updateShiftToggle, onFocus: onCardFocus, ariaDescribedby: cardsHeaderId, ariaLabelledby: cardsHeaderId }))))));
75
75
  });
76
76
  export default Cards;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport { useSupportsStickyHeader } from '../container/use-sticky-header';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards');\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const computedVariant = isRefresh ? variant : 'container';\n\n const instanceUniqueId = useUniqueId('cards');\n const cardsId = baseProps?.id || instanceUniqueId;\n const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ width }) => getCardsPerRow(width, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n\n const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const headerRef = useRef<HTMLDivElement>(null);\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = useSupportsStickyHeader() && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n if (stickyHeader) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">{loadingText}</InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainer\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </div>\n )\n }\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __headerId={cardsHeaderId}\n >\n <div className={clsx(hasToolsHeader && styles['has-header'])}>\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n updateShiftToggle={updateShiftToggle}\n onFocus={onCardFocus}\n ariaDescribedby={cardsHeaderId}\n ariaLabelledby={cardsHeaderId}\n />\n )}\n </div>\n </InternalContainer>\n </div>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n updateShiftToggle,\n onFocus,\n ariaLabelledby,\n ariaDescribedby,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps: (item: T) => SelectionControlProps;\n updateShiftToggle: (state: boolean) => void;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n\n const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div className={styles['card-inner']}>\n <div className={styles['card-header']}>\n <span className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </span>\n {selectable && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n onShiftToggle={updateShiftToggle}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { FocusEventHandler, useImperativeHandle, useRef } from 'react';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { getBaseProps } from '../internal/base-component';\nimport { useContainerQuery } from '../internal/hooks/container-queries/use-container-query';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport { focusMarkers, useFocusMove, useSelection } from '../table/use-selection';\nimport SelectionControl, { SelectionControlProps } from '../table/selection-control';\nimport InternalContainer from '../container/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport { useSupportsStickyHeader } from '../container/use-sticky-header';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n {\n items = [],\n cardDefinition,\n cardsPerRow = [],\n header,\n filter,\n pagination,\n preferences,\n empty,\n loading,\n loadingText,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n visibleSections,\n stickyHeader,\n stickyHeaderVerticalOffset,\n variant = 'container',\n ...rest\n }: CardsProps<T>,\n ref: React.Ref<CardsProps.Ref>\n) {\n const { __internalRootRef } = useBaseComponent('Cards');\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n const computedVariant = isRefresh ? variant : 'container';\n\n const instanceUniqueId = useUniqueId('cards');\n const cardsId = baseProps?.id || instanceUniqueId;\n const cardsHeaderId = header ? `${cardsId}-header` : undefined;\n\n const [columns, measureRef] = useContainerQuery<number>(\n ({ width }) => getCardsPerRow(width, cardsPerRow),\n [cardsPerRow]\n );\n const refObject = useRef(null);\n const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n\n const { isItemSelected, getItemSelectionProps, updateShiftToggle } = useSelection({\n items,\n trackBy,\n selectedItems,\n selectionType,\n isItemDisabled,\n onSelectionChange,\n ariaLabels,\n });\n const hasToolsHeader = header || filter || pagination || preferences;\n const headerRef = useRef<HTMLDivElement>(null);\n const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n stickyHeader = useSupportsStickyHeader() && stickyHeader;\n const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n if (stickyHeader) {\n scrollToItem(event.currentTarget);\n }\n };\n useImperativeHandle(\n ref,\n () => ({\n scrollToTop: () => {\n if (stickyHeader) {\n scrollToTop();\n }\n },\n }),\n [stickyHeader, scrollToTop]\n );\n let status;\n if (loading) {\n status = (\n <div className={styles.loading}>\n <InternalStatusIndicator type=\"loading\">{loadingText}</InternalStatusIndicator>\n </div>\n );\n } else if (empty && !items.length) {\n status = <div className={styles.empty}>{empty}</div>;\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef}>\n <InternalContainer\n header={\n hasToolsHeader && (\n <div\n className={clsx(\n styles.header,\n isRefresh && styles['header-refresh'],\n styles[`header-variant-${computedVariant}`]\n )}\n >\n <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n </div>\n )\n }\n disableContentPaddings={true}\n disableHeaderPaddings={computedVariant === 'full-page'}\n variant={computedVariant === 'container' ? 'cards' : computedVariant}\n __stickyHeader={stickyHeader}\n __stickyOffset={stickyHeaderVerticalOffset}\n __headerRef={headerRef}\n __headerId={cardsHeaderId}\n __darkHeader={computedVariant === 'full-page'}\n >\n <div className={clsx(hasToolsHeader && styles['has-header'])}>\n {status ?? (\n <CardsList\n items={items}\n cardDefinition={cardDefinition}\n trackBy={trackBy}\n selectionType={selectionType}\n columns={columns}\n isItemSelected={isItemSelected}\n getItemSelectionProps={getItemSelectionProps}\n visibleSections={visibleSections}\n updateShiftToggle={updateShiftToggle}\n onFocus={onCardFocus}\n ariaDescribedby={cardsHeaderId}\n ariaLabelledby={cardsHeaderId}\n />\n )}\n </div>\n </InternalContainer>\n </div>\n );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n items,\n cardDefinition,\n trackBy,\n selectionType,\n columns,\n isItemSelected,\n getItemSelectionProps,\n visibleSections,\n updateShiftToggle,\n onFocus,\n ariaLabelledby,\n ariaDescribedby,\n}: Pick<CardsProps<T>, 'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections'> & {\n columns: number | null;\n isItemSelected: (item: T) => boolean;\n getItemSelectionProps: (item: T) => SelectionControlProps;\n updateShiftToggle: (state: boolean) => void;\n onFocus: FocusEventHandler<HTMLElement>;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n}) => {\n const selectable = !!selectionType;\n\n const { moveFocusDown, moveFocusUp } = useFocusMove(selectionType, items.length);\n\n let visibleSectionsDefinition = cardDefinition.sections || [];\n visibleSectionsDefinition = visibleSections\n ? visibleSectionsDefinition.filter(\n (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n )\n : visibleSectionsDefinition;\n\n let listRole: 'group' | undefined = undefined;\n let listItemRole: 'presentation' | undefined = undefined;\n\n if (selectable) {\n listRole = 'group';\n listItemRole = 'presentation';\n }\n\n return (\n <ol\n className={clsx(styles.list, styles[`list-grid-${columns || 1}`])}\n role={listRole}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n {...(focusMarkers && focusMarkers.root)}\n >\n {items.map((item, index) => (\n <li\n className={clsx(styles.card, {\n [styles['card-selectable']]: selectable,\n [styles['card-selected']]: selectable && isItemSelected(item),\n })}\n key={getItemKey(trackBy, item, index)}\n onFocus={onFocus}\n {...(focusMarkers && focusMarkers.item)}\n role={listItemRole}\n >\n <div className={styles['card-inner']}>\n <div className={styles['card-header']}>\n <span className={styles['card-header-inner']}>\n {cardDefinition.header ? cardDefinition.header(item) : ''}\n </span>\n {selectable && (\n <div className={styles['selection-control']}>\n <SelectionControl\n onFocusDown={moveFocusDown}\n onFocusUp={moveFocusUp}\n onShiftToggle={updateShiftToggle}\n {...getItemSelectionProps(item)}\n />\n </div>\n )}\n </div>\n {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n {header ? <div className={styles['section-header']}>{header}</div> : ''}\n {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n </div>\n ))}\n </div>\n </li>\n ))}\n </ol>\n );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
@@ -9,6 +9,7 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
9
9
  __hiddenContent?: boolean;
10
10
  __headerRef?: React.RefObject<HTMLDivElement>;
11
11
  __headerId?: string;
12
+ __darkHeader?: boolean;
12
13
  /**
13
14
  * Additional internal variant:
14
15
  * * `embedded` - Use this variant within a parent container (such as a modal,
@@ -17,5 +18,5 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
17
18
  */
18
19
  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';
19
20
  }
20
- export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, __stickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __disableFooterPaddings, __hiddenContent, __headerRef, __headerId, ...restProps }: InternalContainerProps): JSX.Element;
21
+ export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, __stickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __disableFooterPaddings, __hiddenContent, __headerRef, __headerId, __darkHeader, ...restProps }: InternalContainerProps): JSX.Element;
21
22
  //# sourceMappingURL=internal.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,GAAG,SAAS,EACb,EAAE,sBAAsB,eA8DxB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;CAC1E;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,cAAc,EACd,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,GAAG,SAAS,EACb,EAAE,sBAAsB,eAiFxB"}
@@ -2,26 +2,41 @@ import { __assign, __rest } from "tslib";
2
2
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  // SPDX-License-Identifier: Apache-2.0
4
4
  import clsx from 'clsx';
5
- import React, { useRef } from 'react';
6
- import { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';
5
+ import React, { useContext, useLayoutEffect, useRef } from 'react';
6
+ import { AppLayoutContext } from '../app-layout/visual-refresh/context';
7
7
  import { getBaseProps } from '../internal/base-component';
8
8
  import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
9
+ import { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';
9
10
  import { useMergeRefs } from '../internal/hooks/use-merge-refs';
10
11
  import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
11
12
  import styles from './styles.css.js';
12
13
  export default function InternalContainer(_a) {
13
14
  var _b, _c, _d;
14
- var header = _a.header, footer = _a.footer, children = _a.children, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.disableHeaderPaddings, disableHeaderPaddings = _f === void 0 ? false : _f, _g = _a.disableContentPaddings, disableContentPaddings = _g === void 0 ? false : _g, __stickyOffset = _a.__stickyOffset, _h = _a.__stickyHeader, __stickyHeader = _h === void 0 ? false : _h, _j = _a.__internalRootRef, __internalRootRef = _j === void 0 ? null : _j, _k = _a.__disableFooterDivider, __disableFooterDivider = _k === void 0 ? false : _k, _l = _a.__disableFooterPaddings, __disableFooterPaddings = _l === void 0 ? false : _l, _m = _a.__hiddenContent, __hiddenContent = _m === void 0 ? false : _m, __headerRef = _a.__headerRef, __headerId = _a.__headerId, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "__stickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId"]);
15
+ var header = _a.header, footer = _a.footer, children = _a.children, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.disableHeaderPaddings, disableHeaderPaddings = _f === void 0 ? false : _f, _g = _a.disableContentPaddings, disableContentPaddings = _g === void 0 ? false : _g, __stickyOffset = _a.__stickyOffset, _h = _a.__stickyHeader, __stickyHeader = _h === void 0 ? false : _h, _j = _a.__internalRootRef, __internalRootRef = _j === void 0 ? null : _j, _k = _a.__disableFooterDivider, __disableFooterDivider = _k === void 0 ? false : _k, _l = _a.__disableFooterPaddings, __disableFooterPaddings = _l === void 0 ? false : _l, _m = _a.__hiddenContent, __hiddenContent = _m === void 0 ? false : _m, __headerRef = _a.__headerRef, __headerId = _a.__headerId, _o = _a.__darkHeader, __darkHeader = _o === void 0 ? false : _o, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "__stickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__disableFooterPaddings", "__hiddenContent", "__headerRef", "__headerId", "__darkHeader"]);
15
16
  var baseProps = getBaseProps(restProps);
16
17
  var rootRef = useRef(null);
17
18
  var headerRef = useRef(null);
18
- var _o = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset), isSticky = _o.isSticky, isStuck = _o.isStuck, stickyStyles = _o.stickyStyles;
19
+ var _p = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset), isSticky = _p.isSticky, isStuck = _p.isStuck, stickyStyles = _p.stickyStyles;
20
+ var setHasStickyBackground = useContext(AppLayoutContext).setHasStickyBackground;
19
21
  var isRefresh = useVisualRefresh();
20
22
  var hasDynamicHeight = isRefresh && variant === 'full-page';
21
- var overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight });
23
+ var overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });
22
24
  var mergedRef = useMergeRefs(rootRef, __internalRootRef);
23
25
  var headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);
24
26
  var headerIdProp = __headerId ? { id: __headerId } : {};
27
+ /**
28
+ * The visual refresh AppLayout component needs to know if a child component
29
+ * has a high constrast sticky header. This is to make sure the background element
30
+ * stays in the same vertical position as the header content.
31
+ */
32
+ useLayoutEffect(function handleHasStickyBackground() {
33
+ if (isRefresh && isSticky && variant === 'full-page') {
34
+ setHasStickyBackground(true);
35
+ }
36
+ return function cleanup() {
37
+ setHasStickyBackground(false);
38
+ };
39
+ }, [isRefresh, isSticky, setHasStickyBackground, variant]);
25
40
  return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles["variant-".concat(variant)]), ref: mergedRef }),
26
41
  header && (React.createElement(StickyHeaderContext.Provider, { value: { isStuck: isStuck } },
27
42
  React.createElement("div", __assign({ className: clsx(styles.header, styles["header-variant-".concat(variant)], (_b = {},
@@ -31,7 +46,7 @@ export default function InternalContainer(_a) {
31
46
  _b[styles['header-stuck']] = isStuck,
32
47
  _b[styles['with-paddings']] = !disableHeaderPaddings,
33
48
  _b[styles['with-hidden-content']] = __hiddenContent,
34
- _b)) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), hasDynamicHeight ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
49
+ _b)) }, headerIdProp, stickyStyles, { ref: headerMergedRef }), __darkHeader ? (React.createElement("div", { className: clsx(styles['dark-header'], 'awsui-context-content-header') }, header)) : (header)))),
35
50
  React.createElement("div", { className: clsx(styles.content, (_c = {},
36
51
  _c[styles['with-paddings']] = !disableContentPaddings,
37
52
  _c)) }, children),
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAmBrC,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAgBjB;;IAfvB,IAAA,MAAM,YAAA,EACN,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,6BAA6B,EAA7B,qBAAqB,mBAAG,KAAK,KAAA,EAC7B,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,cAAc,oBAAA,EACd,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACxB,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC9B,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,WAAW,iBAAA,EACX,UAAU,gBAAA,EACP,SAAS,cAf4B,4PAgBzC,CADa;IAEZ,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,IAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,KAAsC,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,CAAC,EAAvG,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,YAAY,kBAAwE,CAAC;IAChH,IAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,IAAM,gBAAgB,GAAG,SAAS,IAAI,OAAO,KAAK,WAAW,CAAC;IAC9D,IAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAE1E,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;IAC3D,IAAM,eAAe,GAAG,YAAY,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IAE7E,IAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE1D,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC,CAAC,EAC/E,GAAG,EAAE,SAAS;QAEb,MAAM,IAAI,CACT,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,SAAA,EAAE;YAC9C,sCACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,yBAAkB,OAAO,CAAE,CAAC;oBAChE,GAAC,MAAM,CAAC,wBAAwB,CAAC,IAAG,cAAc,IAAI,CAAC,QAAQ;oBAC/D,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,QAAQ;oBAC3C,GAAC,MAAM,CAAC,uBAAuB,CAAC,IAAG,gBAAgB;oBACnD,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,OAAO;oBACjC,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,qBAAqB;oBACjD,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,eAAe;wBAChD,IACE,YAAY,EACZ,YAAY,IAChB,GAAG,EAAE,eAAe,KAEnB,gBAAgB,CAAC,CAAC,CAAC,CAClB,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,8BAA8B,CAAC,IAAG,MAAM,CAAO,CAC5F,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CACG,CACuB,CAChC;QACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;gBAC5B,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,sBAAsB;oBAClD,IAED,QAAQ,CACL;QACL,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM;gBAC3B,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,CAAC,sBAAsB;gBACjD,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,uBAAuB;oBACnD,IAED,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __headerId?: string;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n __stickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __headerId,\n ...restProps\n}: InternalContainerProps) {\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n const isRefresh = useVisualRefresh();\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight });\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n\n const headerIdProp = __headerId ? { id: __headerId } : {};\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles[`variant-${variant}`])}\n ref={mergedRef}\n >\n {header && (\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: __hiddenContent,\n })}\n {...headerIdProp}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {hasDynamicHeight ? (\n <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n ) : (\n header\n )}\n </div>\n </StickyHeaderContext.Provider>\n )}\n <div\n className={clsx(styles.content, {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useContext, useLayoutEffect, useRef } from 'react';\nimport { AppLayoutContext } from '../app-layout/visual-refresh/context';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __headerId?: string;\n __darkHeader?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n __stickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __headerId,\n __darkHeader = false,\n ...restProps\n}: InternalContainerProps) {\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(rootRef, headerRef, __stickyHeader, __stickyOffset);\n const { setHasStickyBackground } = useContext(AppLayoutContext);\n const isRefresh = useVisualRefresh();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n const overlapElement = useDynamicOverlap({ disabled: !hasDynamicHeight || !__darkHeader });\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, overlapElement, __headerRef);\n const headerIdProp = __headerId ? { id: __headerId } : {};\n\n /**\n * The visual refresh AppLayout component needs to know if a child component\n * has a high constrast sticky header. This is to make sure the background element\n * stays in the same vertical position as the header content.\n */\n useLayoutEffect(\n function handleHasStickyBackground() {\n if (isRefresh && isSticky && variant === 'full-page') {\n setHasStickyBackground(true);\n }\n\n return function cleanup() {\n setHasStickyBackground(false);\n };\n },\n [isRefresh, isSticky, setHasStickyBackground, variant]\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, styles[`variant-${variant}`])}\n ref={mergedRef}\n >\n {header && (\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: __hiddenContent,\n })}\n {...headerIdProp}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {__darkHeader ? (\n <div className={clsx(styles['dark-header'], 'awsui-context-content-header')}>{header}</div>\n ) : (\n header\n )}\n </div>\n </StickyHeaderContext.Provider>\n )}\n <div\n className={clsx(styles.content, {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n );\n}\n"]}
@@ -1,21 +1,21 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_14iqq_xfc54_97",
5
- "variant-default": "awsui_variant-default_14iqq_xfc54_110",
6
- "variant-stacked": "awsui_variant-stacked_14iqq_xfc54_110",
7
- "header": "awsui_header_14iqq_xfc54_133",
8
- "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_xfc54_139",
9
- "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_xfc54_143",
10
- "header-stuck": "awsui_header-stuck_14iqq_xfc54_149",
11
- "header-dynamic-height": "awsui_header-dynamic-height_14iqq_xfc54_154",
12
- "with-paddings": "awsui_with-paddings_14iqq_xfc54_160",
13
- "with-hidden-content": "awsui_with-hidden-content_14iqq_xfc54_163",
14
- "header-variant-cards": "awsui_header-variant-cards_14iqq_xfc54_167",
15
- "header-variant-full-page": "awsui_header-variant-full-page_14iqq_xfc54_191",
16
- "dark-header": "awsui_dark-header_14iqq_xfc54_199",
17
- "content": "awsui_content_14iqq_xfc54_203",
18
- "footer": "awsui_footer_14iqq_xfc54_213",
19
- "with-divider": "awsui_with-divider_14iqq_xfc54_219"
4
+ "root": "awsui_root_14iqq_uvfcm_97",
5
+ "variant-default": "awsui_variant-default_14iqq_uvfcm_110",
6
+ "variant-stacked": "awsui_variant-stacked_14iqq_uvfcm_110",
7
+ "header": "awsui_header_14iqq_uvfcm_133",
8
+ "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_uvfcm_139",
9
+ "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_uvfcm_143",
10
+ "header-stuck": "awsui_header-stuck_14iqq_uvfcm_149",
11
+ "header-dynamic-height": "awsui_header-dynamic-height_14iqq_uvfcm_154",
12
+ "with-paddings": "awsui_with-paddings_14iqq_uvfcm_160",
13
+ "with-hidden-content": "awsui_with-hidden-content_14iqq_uvfcm_163",
14
+ "header-variant-cards": "awsui_header-variant-cards_14iqq_uvfcm_167",
15
+ "header-variant-full-page": "awsui_header-variant-full-page_14iqq_uvfcm_191",
16
+ "dark-header": "awsui_dark-header_14iqq_uvfcm_209",
17
+ "content": "awsui_content_14iqq_uvfcm_213",
18
+ "footer": "awsui_footer_14iqq_uvfcm_223",
19
+ "with-divider": "awsui_with-divider_14iqq_uvfcm_229"
20
20
  };
21
21
 
@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
94
94
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
95
95
  SPDX-License-Identifier: Apache-2.0
96
96
  */
97
- .awsui_root_14iqq_xfc54_97:not(#\9) {
97
+ .awsui_root_14iqq_uvfcm_97:not(#\9) {
98
98
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
99
99
  border-collapse: separate;
100
100
  border-spacing: 0;
@@ -133,7 +133,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
133
133
  flex-flow: column nowrap;
134
134
  word-wrap: break-word;
135
135
  }
136
- .awsui_root_14iqq_xfc54_97.awsui_variant-default_14iqq_xfc54_110:not(#\9), .awsui_root_14iqq_xfc54_97.awsui_variant-stacked_14iqq_xfc54_110:not(#\9) {
136
+ .awsui_root_14iqq_uvfcm_97.awsui_variant-default_14iqq_uvfcm_110:not(#\9), .awsui_root_14iqq_uvfcm_97.awsui_variant-stacked_14iqq_uvfcm_110:not(#\9) {
137
137
  box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
138
138
  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
139
139
  border-radius: var(--border-radius-container-gh9ysk, 16px);
@@ -141,107 +141,117 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
141
141
  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
142
142
  }
143
143
  @media screen and (-ms-high-contrast: active) {
144
- .awsui_root_14iqq_xfc54_97.awsui_variant-default_14iqq_xfc54_110:not(#\9), .awsui_root_14iqq_xfc54_97.awsui_variant-stacked_14iqq_xfc54_110:not(#\9) {
144
+ .awsui_root_14iqq_uvfcm_97.awsui_variant-default_14iqq_uvfcm_110:not(#\9), .awsui_root_14iqq_uvfcm_97.awsui_variant-stacked_14iqq_uvfcm_110:not(#\9) {
145
145
  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
146
146
  }
147
147
  }
148
- .awsui_root_14iqq_xfc54_97.awsui_variant-stacked_14iqq_xfc54_110:not(#\9):not(:last-child) {
148
+ .awsui_root_14iqq_uvfcm_97.awsui_variant-stacked_14iqq_uvfcm_110:not(#\9):not(:last-child) {
149
149
  border-bottom-right-radius: 0;
150
150
  border-bottom-left-radius: 0;
151
151
  }
152
- .awsui_root_14iqq_xfc54_97.awsui_variant-stacked_14iqq_xfc54_110 + .awsui_root_14iqq_xfc54_97.awsui_variant-stacked_14iqq_xfc54_110:not(#\9) {
152
+ .awsui_root_14iqq_uvfcm_97.awsui_variant-stacked_14iqq_uvfcm_110 + .awsui_root_14iqq_uvfcm_97.awsui_variant-stacked_14iqq_uvfcm_110:not(#\9) {
153
153
  border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
154
154
  border-top-left-radius: 0;
155
155
  border-top-right-radius: 0;
156
156
  box-shadow: var(--shadow-container-stacked-lumzae, -1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgba(0, 7, 22, 0.12), 8px 0px 8px -7px rgba(0, 7, 22, 0.12), -8px 0px 8px -7px rgba(0, 7, 22, 0.12));
157
157
  }
158
158
 
159
- .awsui_header_14iqq_xfc54_133:not(#\9) {
159
+ .awsui_header_14iqq_uvfcm_133:not(#\9) {
160
160
  flex: 0 0 auto;
161
161
  background-color: var(--color-background-container-header-4flbq5, #ffffff);
162
162
  border-top-left-radius: var(--border-radius-container-gh9ysk, 16px);
163
163
  border-top-right-radius: var(--border-radius-container-gh9ysk, 16px);
164
164
  }
165
- .awsui_header-sticky-disabled_14iqq_xfc54_139:not(#\9) {
165
+ .awsui_header-sticky-disabled_14iqq_uvfcm_139:not(#\9) {
166
166
  position: relative;
167
167
  z-index: 1;
168
168
  }
169
- .awsui_header-sticky-enabled_14iqq_xfc54_143:not(#\9) {
169
+ .awsui_header-sticky-enabled_14iqq_uvfcm_143:not(#\9) {
170
170
  top: 0;
171
171
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
172
172
  position: sticky;
173
173
  z-index: 800;
174
174
  }
175
- .awsui_header-stuck_14iqq_xfc54_149:not(#\9) {
175
+ .awsui_header-stuck_14iqq_uvfcm_149:not(#\9) {
176
176
  box-shadow: var(--shadow-sticky-embedded-qit8ba, 0px 2px 0px 0px #e9ebed, 0px 16px 16px -12px rgba(0, 7, 22, 0.1));
177
177
  border: 0;
178
178
  border-radius: 0;
179
179
  }
180
- .awsui_header-dynamic-height_14iqq_xfc54_154.awsui_header-stuck_14iqq_xfc54_149:not(#\9) {
180
+ .awsui_header-dynamic-height_14iqq_uvfcm_154.awsui_header-stuck_14iqq_uvfcm_149:not(#\9) {
181
181
  margin-bottom: calc(var(--font-heading-xl-line-height-doxfdj, 40px) - var(--font-heading-l-line-height-gev4n1, 30px));
182
182
  }
183
- .awsui_header_14iqq_xfc54_133:not(#\9):not(:empty) {
183
+ .awsui_header_14iqq_uvfcm_133:not(#\9):not(:empty) {
184
184
  border-bottom: var(--border-container-sticky-width-i7t7xe, 0px) solid var(--color-border-container-divider-4ade7z, transparent);
185
185
  }
186
- .awsui_header_14iqq_xfc54_133.awsui_with-paddings_14iqq_xfc54_160:not(#\9) {
186
+ .awsui_header_14iqq_uvfcm_133.awsui_with-paddings_14iqq_uvfcm_160:not(#\9) {
187
187
  padding: var(--space-container-header-vertical-zsjhel, 12px) var(--space-container-horizontal-ddrezg, 24px);
188
188
  }
189
- .awsui_header_14iqq_xfc54_133.awsui_with-hidden-content_14iqq_xfc54_163:not(#\9) {
189
+ .awsui_header_14iqq_uvfcm_133.awsui_with-hidden-content_14iqq_uvfcm_163:not(#\9) {
190
190
  border-bottom-left-radius: var(--border-radius-container-gh9ysk, 16px);
191
191
  border-bottom-right-radius: var(--border-radius-container-gh9ysk, 16px);
192
192
  }
193
- .awsui_header-variant-cards_14iqq_xfc54_167:not(#\9) {
193
+ .awsui_header-variant-cards_14iqq_uvfcm_167:not(#\9) {
194
194
  box-shadow: var(--shadow-container-7nblnj, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
195
195
  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
196
196
  border-radius: var(--border-radius-container-gh9ysk, 16px);
197
197
  box-sizing: border-box;
198
198
  }
199
199
  @media screen and (-ms-high-contrast: active) {
200
- .awsui_header-variant-cards_14iqq_xfc54_167:not(#\9) {
200
+ .awsui_header-variant-cards_14iqq_uvfcm_167:not(#\9) {
201
201
  border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
202
202
  }
203
203
  }
204
- .awsui_header-variant-cards_14iqq_xfc54_167:not(#\9):not(:empty) {
204
+ .awsui_header-variant-cards_14iqq_uvfcm_167:not(#\9):not(:empty) {
205
205
  border-bottom: 1px solid #d5dbdb;
206
206
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
207
207
  }
208
208
  @supports (--css-variable-support-check: #000) {
209
- .awsui_header-variant-cards_14iqq_xfc54_167:not(#\9):not(:empty) {
209
+ .awsui_header-variant-cards_14iqq_uvfcm_167:not(#\9):not(:empty) {
210
210
  border-bottom: 0;
211
211
  }
212
212
  }
213
- .awsui_header-variant-cards_14iqq_xfc54_167.awsui_header-stuck_14iqq_xfc54_149:not(#\9) {
213
+ .awsui_header-variant-cards_14iqq_uvfcm_167.awsui_header-stuck_14iqq_uvfcm_149:not(#\9) {
214
214
  border-top-left-radius: 0;
215
215
  border-top-right-radius: 0;
216
216
  }
217
- .awsui_header-variant-full-page_14iqq_xfc54_191.awsui_header-stuck_14iqq_xfc54_149:not(#\9) {
217
+ .awsui_header-variant-full-page_14iqq_uvfcm_191.awsui_header-stuck_14iqq_uvfcm_149:not(#\9) {
218
+ box-shadow: none;
219
+ }
220
+ .awsui_header-variant-full-page_14iqq_uvfcm_191.awsui_header-stuck_14iqq_uvfcm_149:not(#\9)::after {
221
+ content: "";
222
+ position: absolute;
223
+ right: 0;
224
+ left: 0;
225
+ bottom: 0;
226
+ top: 0;
218
227
  box-shadow: var(--shadow-sticky-aijlo6, 0px 4px 20px 1px rgba(0, 7, 22, 0.1));
228
+ clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
219
229
  }
220
230
 
221
231
  /*
222
232
  The dynamic height dark header needs a background that will cover
223
233
  the default white background of the container component.
224
234
  */
225
- .awsui_dark-header_14iqq_xfc54_199:not(#\9) {
235
+ .awsui_dark-header_14iqq_uvfcm_209:not(#\9) {
226
236
  background-color: var(--color-background-layout-main-sfhm4y, #ffffff);
227
237
  }
228
238
 
229
- .awsui_content_14iqq_xfc54_203:not(#\9) {
239
+ .awsui_content_14iqq_uvfcm_213:not(#\9) {
230
240
  flex: 1 0 auto;
231
241
  }
232
- .awsui_content_14iqq_xfc54_203.awsui_with-paddings_14iqq_xfc54_160:not(#\9) {
242
+ .awsui_content_14iqq_uvfcm_213.awsui_with-paddings_14iqq_uvfcm_160:not(#\9) {
233
243
  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-ddrezg, 24px);
234
244
  }
235
- .awsui_header_14iqq_xfc54_133 + .awsui_content_14iqq_xfc54_203.awsui_with-paddings_14iqq_xfc54_160:not(#\9) {
245
+ .awsui_header_14iqq_uvfcm_133 + .awsui_content_14iqq_uvfcm_213.awsui_with-paddings_14iqq_uvfcm_160:not(#\9) {
236
246
  padding-top: var(--space-container-content-top-fsd8nr, 0px);
237
247
  }
238
248
 
239
- .awsui_footer_14iqq_xfc54_213:not(#\9) {
249
+ .awsui_footer_14iqq_uvfcm_223:not(#\9) {
240
250
  flex: 0 0 auto;
241
251
  }
242
- .awsui_footer_14iqq_xfc54_213.awsui_with-paddings_14iqq_xfc54_160:not(#\9) {
252
+ .awsui_footer_14iqq_uvfcm_223.awsui_with-paddings_14iqq_uvfcm_160:not(#\9) {
243
253
  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-ddrezg, 24px);
244
254
  }
245
- .awsui_footer_14iqq_xfc54_213.awsui_with-divider_14iqq_xfc54_219:not(#\9) {
255
+ .awsui_footer_14iqq_uvfcm_223.awsui_with-divider_14iqq_uvfcm_229:not(#\9) {
246
256
  border-top: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
247
257
  }
@@ -2,21 +2,21 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_14iqq_xfc54_97",
6
- "variant-default": "awsui_variant-default_14iqq_xfc54_110",
7
- "variant-stacked": "awsui_variant-stacked_14iqq_xfc54_110",
8
- "header": "awsui_header_14iqq_xfc54_133",
9
- "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_xfc54_139",
10
- "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_xfc54_143",
11
- "header-stuck": "awsui_header-stuck_14iqq_xfc54_149",
12
- "header-dynamic-height": "awsui_header-dynamic-height_14iqq_xfc54_154",
13
- "with-paddings": "awsui_with-paddings_14iqq_xfc54_160",
14
- "with-hidden-content": "awsui_with-hidden-content_14iqq_xfc54_163",
15
- "header-variant-cards": "awsui_header-variant-cards_14iqq_xfc54_167",
16
- "header-variant-full-page": "awsui_header-variant-full-page_14iqq_xfc54_191",
17
- "dark-header": "awsui_dark-header_14iqq_xfc54_199",
18
- "content": "awsui_content_14iqq_xfc54_203",
19
- "footer": "awsui_footer_14iqq_xfc54_213",
20
- "with-divider": "awsui_with-divider_14iqq_xfc54_219"
5
+ "root": "awsui_root_14iqq_uvfcm_97",
6
+ "variant-default": "awsui_variant-default_14iqq_uvfcm_110",
7
+ "variant-stacked": "awsui_variant-stacked_14iqq_uvfcm_110",
8
+ "header": "awsui_header_14iqq_uvfcm_133",
9
+ "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_uvfcm_139",
10
+ "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_uvfcm_143",
11
+ "header-stuck": "awsui_header-stuck_14iqq_uvfcm_149",
12
+ "header-dynamic-height": "awsui_header-dynamic-height_14iqq_uvfcm_154",
13
+ "with-paddings": "awsui_with-paddings_14iqq_uvfcm_160",
14
+ "with-hidden-content": "awsui_with-hidden-content_14iqq_uvfcm_163",
15
+ "header-variant-cards": "awsui_header-variant-cards_14iqq_uvfcm_167",
16
+ "header-variant-full-page": "awsui_header-variant-full-page_14iqq_uvfcm_191",
17
+ "dark-header": "awsui_dark-header_14iqq_uvfcm_209",
18
+ "content": "awsui_content_14iqq_uvfcm_213",
19
+ "footer": "awsui_footer_14iqq_uvfcm_223",
20
+ "with-divider": "awsui_with-divider_14iqq_uvfcm_229"
21
21
  };
22
22
 
@@ -1,5 +1,5 @@
1
1
 
2
- export var PACKAGE_VERSION = '3.0.0 (cff1447)';
2
+ export var PACKAGE_VERSION = '3.0.0 (b69613f)';
3
3
  export var THEME = 'open-source-visual-refresh';
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
5
5