@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.
- package/app-layout/visual-refresh/app-bar.d.ts.map +1 -1
- package/app-layout/visual-refresh/app-bar.js +2 -1
- package/app-layout/visual-refresh/app-bar.js.map +1 -1
- package/app-layout/visual-refresh/background.d.ts.map +1 -1
- package/app-layout/visual-refresh/background.js +7 -4
- package/app-layout/visual-refresh/background.js.map +1 -1
- package/app-layout/visual-refresh/context.d.ts +2 -0
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +23 -18
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +60 -59
- package/app-layout/visual-refresh/styles.scoped.css +175 -152
- package/app-layout/visual-refresh/styles.selectors.js +60 -59
- package/cards/index.d.ts.map +1 -1
- package/cards/index.js +1 -1
- package/cards/index.js.map +1 -1
- package/container/internal.d.ts +2 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +21 -6
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +16 -16
- package/container/styles.scoped.css +36 -26
- package/container/styles.selectors.js +16 -16
- package/internal/environment.js +1 -1
- package/internal/hooks/forward-focus/radio-group.d.ts +12 -0
- package/internal/hooks/forward-focus/radio-group.d.ts.map +1 -0
- package/internal/hooks/forward-focus/radio-group.js +27 -0
- package/internal/hooks/forward-focus/radio-group.js.map +1 -0
- package/manifest.json +3 -0
- package/package.json +1 -1
- package/radio-group/index.d.ts +3 -1
- package/radio-group/index.d.ts.map +1 -1
- package/radio-group/index.js +4 -3
- package/radio-group/index.js.map +1 -1
- package/radio-group/interfaces.d.ts +6 -0
- package/radio-group/interfaces.d.ts.map +1 -1
- package/radio-group/interfaces.js.map +1 -1
- package/radio-group/internal.d.ts +3 -3
- package/radio-group/internal.d.ts.map +1 -1
- package/radio-group/internal.js +6 -3
- package/radio-group/internal.js.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.d.ts.map +1 -1
- package/split-panel/icons/bottom-icon-refresh.js +6 -9
- package/split-panel/icons/bottom-icon-refresh.js.map +1 -1
- package/split-panel/icons/side-position-refresh.d.ts +1 -0
- package/split-panel/icons/side-position-refresh.d.ts.map +1 -1
- package/split-panel/icons/side-position-refresh.js +6 -9
- package/split-panel/icons/side-position-refresh.js.map +1 -1
- package/split-panel/styles.css.js +59 -58
- package/split-panel/styles.scoped.css +84 -81
- package/split-panel/styles.selectors.js +59 -58
- package/table/header-cell/index.d.ts +2 -1
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +2 -1
- package/table/header-cell/index.js.map +1 -1
- package/table/header-cell/styles.css.js +16 -15
- package/table/header-cell/styles.scoped.css +26 -26
- package/table/header-cell/styles.selectors.js +16 -15
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +7 -3
- package/table/internal.js.map +1 -1
- package/table/sticky-header.d.ts +1 -0
- package/table/sticky-header.d.ts.map +1 -1
- package/table/sticky-header.js +2 -1
- package/table/sticky-header.js.map +1 -1
- package/table/styles.css.js +34 -32
- package/table/styles.scoped.css +47 -39
- package/table/styles.selectors.js +34 -32
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +3 -3
- package/table/thead.js.map +1 -1
- package/tiles/index.d.ts +3 -1
- package/tiles/index.d.ts.map +1 -1
- package/tiles/index.js +4 -3
- package/tiles/index.js.map +1 -1
- package/tiles/interfaces.d.ts +6 -0
- package/tiles/interfaces.d.ts.map +1 -1
- package/tiles/interfaces.js.map +1 -1
- package/tiles/internal.d.ts +3 -3
- package/tiles/internal.d.ts.map +1 -1
- package/tiles/internal.js +24 -21
- package/tiles/internal.js.map +1 -1
- package/tiles/tile.d.ts +2 -1
- package/tiles/tile.d.ts.map +1 -1
- package/tiles/tile.js +7 -5
- 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": "
|
|
6
|
-
"appbar-nav": "awsui_appbar-
|
|
7
|
-
"breadcrumbs": "
|
|
8
|
-
"appbar-tools": "awsui_appbar-
|
|
9
|
-
"has-breadcrumbs": "awsui_has-
|
|
10
|
-
"has-notifications-content": "awsui_has-notifications-
|
|
11
|
-
"has-header": "awsui_has-
|
|
12
|
-
"has-dynamic-overlap-height": "awsui_has-dynamic-overlap-
|
|
13
|
-
"content-type-wizard": "awsui_content-type-
|
|
14
|
-
"content-type-cards": "awsui_content-type-
|
|
15
|
-
"content-type-table": "awsui_content-type-
|
|
16
|
-
"background": "
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"has-
|
|
27
|
-
"split-panel
|
|
28
|
-
"
|
|
29
|
-
"has-content-gap-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"is-
|
|
35
|
-
"is-
|
|
36
|
-
"split-panel-
|
|
37
|
-
"
|
|
38
|
-
"content-type-
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"tools": "
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
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
|
|
package/cards/index.d.ts.map
CHANGED
|
@@ -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,
|
|
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;
|
package/cards/index.js.map
CHANGED
|
@@ -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"]}
|
package/container/internal.d.ts
CHANGED
|
@@ -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,
|
|
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"}
|
package/container/internal.js
CHANGED
|
@@ -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 {
|
|
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
|
|
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 }),
|
|
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;
|
|
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"]}
|
package/container/styles.css.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"variant-default": "awsui_variant-
|
|
6
|
-
"variant-stacked": "awsui_variant-
|
|
7
|
-
"header": "
|
|
8
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
9
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
10
|
-
"header-stuck": "awsui_header-
|
|
11
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
12
|
-
"with-paddings": "awsui_with-
|
|
13
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
14
|
-
"header-variant-cards": "awsui_header-variant-
|
|
15
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
16
|
-
"dark-header": "awsui_dark-
|
|
17
|
-
"content": "
|
|
18
|
-
"footer": "
|
|
19
|
-
"with-divider": "awsui_with-
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
.
|
|
239
|
+
.awsui_content_14iqq_uvfcm_213:not(#\9) {
|
|
230
240
|
flex: 1 0 auto;
|
|
231
241
|
}
|
|
232
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
249
|
+
.awsui_footer_14iqq_uvfcm_223:not(#\9) {
|
|
240
250
|
flex: 0 0 auto;
|
|
241
251
|
}
|
|
242
|
-
.
|
|
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
|
-
.
|
|
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": "
|
|
6
|
-
"variant-default": "awsui_variant-
|
|
7
|
-
"variant-stacked": "awsui_variant-
|
|
8
|
-
"header": "
|
|
9
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
10
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
11
|
-
"header-stuck": "awsui_header-
|
|
12
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
13
|
-
"with-paddings": "awsui_with-
|
|
14
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
15
|
-
"header-variant-cards": "awsui_header-variant-
|
|
16
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
17
|
-
"dark-header": "awsui_dark-
|
|
18
|
-
"content": "
|
|
19
|
-
"footer": "
|
|
20
|
-
"with-divider": "awsui_with-
|
|
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
|
|
package/internal/environment.js
CHANGED