@cloudscape-design/components 3.0.318 → 3.0.320
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/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +30 -30
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/drawer/interfaces.d.ts +0 -7
- package/app-layout/drawer/interfaces.d.ts.map +1 -1
- package/app-layout/drawer/interfaces.js.map +1 -1
- package/app-layout/drawer/resizable-drawer.d.ts.map +1 -1
- package/app-layout/drawer/resizable-drawer.js +3 -3
- package/app-layout/drawer/resizable-drawer.js.map +1 -1
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/runtime-api.d.ts.map +1 -1
- package/app-layout/runtime-api.js +5 -2
- package/app-layout/runtime-api.js.map +1 -1
- package/app-layout/styles.css.js +17 -13
- package/app-layout/styles.scoped.css +44 -13
- package/app-layout/styles.selectors.js +17 -13
- package/app-layout/utils/interfaces.d.ts +10 -0
- package/app-layout/utils/interfaces.d.ts.map +1 -0
- package/app-layout/utils/interfaces.js +2 -0
- package/app-layout/utils/interfaces.js.map +1 -0
- package/app-layout/utils/use-drawer-focus-control.d.ts.map +1 -1
- package/app-layout/utils/use-drawer-focus-control.js +8 -3
- package/app-layout/utils/use-drawer-focus-control.js.map +1 -1
- package/app-layout/utils/use-keyboard-events.d.ts +4 -0
- package/app-layout/utils/use-keyboard-events.d.ts.map +1 -0
- package/{split-panel → app-layout}/utils/use-keyboard-events.js +10 -11
- package/app-layout/utils/use-keyboard-events.js.map +1 -0
- package/app-layout/utils/use-pointer-events.d.ts +3 -0
- package/app-layout/utils/use-pointer-events.d.ts.map +1 -0
- package/{split-panel → app-layout}/utils/use-pointer-events.js +15 -8
- package/app-layout/utils/use-pointer-events.js.map +1 -0
- package/app-layout/utils/use-resize.d.ts +16 -0
- package/app-layout/utils/use-resize.d.ts.map +1 -0
- package/app-layout/utils/use-resize.js +84 -0
- package/app-layout/utils/use-resize.js.map +1 -0
- package/app-layout/visual-refresh/context.d.ts +11 -6
- package/app-layout/visual-refresh/context.d.ts.map +1 -1
- package/app-layout/visual-refresh/context.js +26 -7
- package/app-layout/visual-refresh/context.js.map +1 -1
- package/app-layout/visual-refresh/drawers.d.ts +1 -33
- package/app-layout/visual-refresh/drawers.d.ts.map +1 -1
- package/app-layout/visual-refresh/drawers.js +14 -7
- package/app-layout/visual-refresh/drawers.js.map +1 -1
- package/app-layout/visual-refresh/styles.css.js +69 -68
- package/app-layout/visual-refresh/styles.scoped.css +294 -298
- package/app-layout/visual-refresh/styles.selectors.js +69 -68
- package/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
- package/app-layout/visual-refresh/trigger-button.js +1 -2
- package/app-layout/visual-refresh/trigger-button.js.map +1 -1
- package/area-chart/{model/async-store.d.ts → async-store/index.d.ts} +1 -1
- package/area-chart/async-store/index.d.ts.map +1 -0
- package/area-chart/{model/async-store.js → async-store/index.js} +1 -1
- package/area-chart/async-store/index.js.map +1 -0
- package/area-chart/elements/area-chart-legend.d.ts.map +1 -1
- package/area-chart/elements/area-chart-legend.js +1 -1
- package/area-chart/elements/area-chart-legend.js.map +1 -1
- package/area-chart/elements/data-series.js +1 -1
- package/area-chart/elements/data-series.js.map +1 -1
- package/area-chart/elements/highlighted-point.js +1 -1
- package/area-chart/elements/highlighted-point.js.map +1 -1
- package/area-chart/elements/use-highlight-details.d.ts.map +1 -1
- package/area-chart/elements/use-highlight-details.js +3 -1
- package/area-chart/elements/use-highlight-details.js.map +1 -1
- package/area-chart/elements/vertical-marker.js +1 -1
- package/area-chart/elements/vertical-marker.js.map +1 -1
- package/area-chart/model/index.d.ts +1 -1
- package/area-chart/model/index.d.ts.map +1 -1
- package/area-chart/model/index.js.map +1 -1
- package/area-chart/model/interactions-store.d.ts +1 -1
- package/area-chart/model/interactions-store.d.ts.map +1 -1
- package/area-chart/model/interactions-store.js +1 -1
- package/area-chart/model/interactions-store.js.map +1 -1
- package/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +1 -1
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/attribute-editor/interfaces.d.ts +1 -1
- package/attribute-editor/interfaces.d.ts.map +1 -1
- package/attribute-editor/interfaces.js.map +1 -1
- package/content-layout/styles.css.js +7 -7
- package/content-layout/styles.scoped.css +13 -13
- package/content-layout/styles.selectors.js +7 -7
- package/expandable-section/expandable-section-container.js +2 -2
- package/expandable-section/expandable-section-container.js.map +1 -1
- package/expandable-section/interfaces.d.ts +3 -1
- package/expandable-section/interfaces.d.ts.map +1 -1
- package/expandable-section/interfaces.js.map +1 -1
- package/expandable-section/internal.d.ts.map +1 -1
- package/expandable-section/internal.js +4 -2
- package/expandable-section/internal.js.map +1 -1
- package/flashbar/styles.css.js +45 -45
- package/flashbar/styles.scoped.css +169 -169
- package/flashbar/styles.selectors.js +45 -45
- package/internal/environment.js +1 -1
- package/internal/generated/custom-css-properties/index.js +39 -39
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/internal/plugins/drawers-controller.d.ts +5 -0
- package/internal/plugins/drawers-controller.d.ts.map +1 -1
- package/internal/plugins/drawers-controller.js.map +1 -1
- package/mixed-line-bar-chart/data-series.d.ts.map +1 -1
- package/mixed-line-bar-chart/data-series.js +8 -2
- package/mixed-line-bar-chart/data-series.js.map +1 -1
- package/package.json +1 -1
- package/split-panel/index.d.ts.map +1 -1
- package/split-panel/index.js +3 -3
- package/split-panel/index.js.map +1 -1
- package/split-panel/interfaces.d.ts +0 -7
- package/split-panel/interfaces.d.ts.map +1 -1
- package/split-panel/interfaces.js.map +1 -1
- package/split-panel/styles.css.js +56 -59
- package/split-panel/styles.scoped.css +77 -93
- package/split-panel/styles.selectors.js +56 -59
- package/table/body-cell/td-element.d.ts +1 -1
- package/table/body-cell/td-element.d.ts.map +1 -1
- package/table/body-cell/td-element.js +1 -1
- package/table/body-cell/td-element.js.map +1 -1
- package/table/header-cell/index.d.ts +1 -1
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +1 -1
- package/table/header-cell/index.js.map +1 -1
- package/table/internal.js +2 -2
- package/table/internal.js.map +1 -1
- package/table/sticky-columns/index.d.ts +2 -0
- package/table/sticky-columns/index.d.ts.map +1 -0
- package/table/sticky-columns/index.js +4 -0
- package/table/sticky-columns/index.js.map +1 -0
- package/table/{use-sticky-columns.d.ts → sticky-columns/use-sticky-columns.d.ts} +1 -1
- package/table/sticky-columns/use-sticky-columns.d.ts.map +1 -0
- package/table/{use-sticky-columns.js → sticky-columns/use-sticky-columns.js} +3 -3
- package/table/sticky-columns/use-sticky-columns.js.map +1 -0
- package/table/sticky-scrollbar/index.d.ts +2 -0
- package/table/sticky-scrollbar/index.d.ts.map +1 -0
- package/table/sticky-scrollbar/index.js +4 -0
- package/table/sticky-scrollbar/index.js.map +1 -0
- package/table/sticky-scrollbar/sticky-scrollbar.d.ts.map +1 -0
- package/table/{sticky-scrollbar.js → sticky-scrollbar/sticky-scrollbar.js} +2 -2
- package/table/sticky-scrollbar/sticky-scrollbar.js.map +1 -0
- package/table/sticky-scrollbar/styles.css.js +9 -0
- package/table/sticky-scrollbar/styles.scoped.css +22 -0
- package/table/sticky-scrollbar/styles.selectors.js +10 -0
- package/table/sticky-scrollbar/use-sticky-scrollbar.d.ts.map +1 -0
- package/table/{use-sticky-scrollbar.js → sticky-scrollbar/use-sticky-scrollbar.js} +3 -3
- package/table/sticky-scrollbar/use-sticky-scrollbar.js.map +1 -0
- package/table/styles.css.js +32 -36
- package/table/styles.scoped.css +40 -59
- package/table/styles.selectors.js +32 -36
- package/table/thead.d.ts +1 -1
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -1
- package/table/thead.js.map +1 -1
- package/table/utils.d.ts +1 -1
- package/table/utils.d.ts.map +1 -1
- package/table/utils.js.map +1 -1
- package/wizard/styles.css.js +31 -31
- package/wizard/styles.scoped.css +63 -63
- package/wizard/styles.selectors.js +31 -31
- package/area-chart/model/async-store.d.ts.map +0 -1
- package/area-chart/model/async-store.js.map +0 -1
- package/split-panel/utils/use-keyboard-events.d.ts +0 -4
- package/split-panel/utils/use-keyboard-events.d.ts.map +0 -1
- package/split-panel/utils/use-keyboard-events.js.map +0 -1
- package/split-panel/utils/use-pointer-events.d.ts +0 -3
- package/split-panel/utils/use-pointer-events.d.ts.map +0 -1
- package/split-panel/utils/use-pointer-events.js.map +0 -1
- package/table/sticky-scrollbar.d.ts.map +0 -1
- package/table/sticky-scrollbar.js.map +0 -1
- package/table/use-sticky-columns.d.ts.map +0 -1
- package/table/use-sticky-columns.js.map +0 -1
- package/table/use-sticky-scrollbar.d.ts.map +0 -1
- package/table/use-sticky-scrollbar.js.map +0 -1
- /package/table/{sticky-scrollbar.d.ts → sticky-scrollbar/sticky-scrollbar.d.ts} +0 -0
- /package/table/{use-sticky-scrollbar.d.ts → sticky-scrollbar/use-sticky-scrollbar.d.ts} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport { default as StickyScrollbar } from './sticky-scrollbar';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sticky-scrollbar.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/sticky-scrollbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,UAAU,oBAAoB;IAC5B,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;CACjD;;AAED,wBAA2C"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
import { useAppLayoutContext } from '../internal/context/app-layout-context';
|
|
5
|
-
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
6
4
|
import { useStickyScrollbar } from './use-sticky-scrollbar';
|
|
5
|
+
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
|
|
6
|
+
import { useAppLayoutContext } from '../../internal/context/app-layout-context';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
export default forwardRef(StickyScrollbar);
|
|
9
9
|
function StickyScrollbar({ wrapperRef, tableRef, onScroll }, ref) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/sticky-scrollbar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,eAAe,UAAU,CAAC,eAAe,CAAC,CAAC;AAE3C,SAAS,eAAe,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAwB,EAAE,GAA8B;IAC/G,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAElD;;;OAGG;IACH,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAEhG,OAAO,CACL,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ;QAC5E,6BAAK,GAAG,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAAI,CAC5E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport { useStickyScrollbar } from './use-sticky-scrollbar';\nimport { useMergeRefs } from '../../internal/hooks/use-merge-refs';\nimport { useAppLayoutContext } from '../../internal/context/app-layout-context';\nimport styles from './styles.css.js';\n\ninterface StickyScrollbarProps {\n wrapperRef: React.RefObject<HTMLDivElement>;\n tableRef: React.RefObject<HTMLTableElement>;\n onScroll?: React.UIEventHandler<HTMLDivElement>;\n}\n\nexport default forwardRef(StickyScrollbar);\n\nfunction StickyScrollbar({ wrapperRef, tableRef, onScroll }: StickyScrollbarProps, ref: React.Ref<HTMLDivElement>) {\n const scrollbarRef = React.useRef<HTMLDivElement>(null);\n const scrollbarContentRef = React.useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(ref, scrollbarRef);\n\n /**\n * Use the appropriate AppLayout context (Classic or Visual Refresh) to determine\n * the offsetBottom value to be used in the useStickyScrollbar hook.\n */\n const { stickyOffsetBottom } = useAppLayoutContext();\n\n useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom);\n\n return (\n <div ref={mergedRef} className={styles['sticky-scrollbar']} onScroll={onScroll}>\n <div ref={scrollbarContentRef} className={styles['sticky-scrollbar-content']} />\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
import './styles.scoped.css';
|
|
3
|
+
export default {
|
|
4
|
+
"sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_4w5vn_5",
|
|
5
|
+
"sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_4w5vn_14",
|
|
6
|
+
"sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_4w5vn_17",
|
|
7
|
+
"sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_4w5vn_20"
|
|
8
|
+
};
|
|
9
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
*/
|
|
5
|
+
.awsui_sticky-scrollbar_faqt8_4w5vn_5:not(#\9) {
|
|
6
|
+
height: 15px;
|
|
7
|
+
position: sticky;
|
|
8
|
+
display: none;
|
|
9
|
+
overflow-x: auto;
|
|
10
|
+
overflow-y: hidden;
|
|
11
|
+
bottom: 0;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
.awsui_sticky-scrollbar-content_faqt8_4w5vn_14:not(#\9) {
|
|
15
|
+
height: 15px;
|
|
16
|
+
}
|
|
17
|
+
.awsui_sticky-scrollbar-visible_faqt8_4w5vn_17:not(#\9) {
|
|
18
|
+
display: block;
|
|
19
|
+
}
|
|
20
|
+
.awsui_sticky-scrollbar-native-invisible_faqt8_4w5vn_20:not(#\9) {
|
|
21
|
+
margin-top: -15px;
|
|
22
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
|
|
2
|
+
// es-module interop with Babel and Typescript
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
module.exports.default = {
|
|
5
|
+
"sticky-scrollbar": "awsui_sticky-scrollbar_faqt8_4w5vn_5",
|
|
6
|
+
"sticky-scrollbar-content": "awsui_sticky-scrollbar-content_faqt8_4w5vn_14",
|
|
7
|
+
"sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_faqt8_4w5vn_17",
|
|
8
|
+
"sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_faqt8_4w5vn_20"
|
|
9
|
+
};
|
|
10
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAMvD,eAAO,MAAM,cAAc,YAChB,WAAW,GAAG,IAAI,aAChB,WAAW,GAAG,IAAI,eAChB,WAAW,GAAG,IAAI,sBACX,WAAW,GAAG,IAAI,sBAClB,OAAO,0BACH,MAAM,SA8C/B,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EACrC,YAAY,EAAE,MAAM,QAiErB"}
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
import { ResizeObserver } from '@juggle/resize-observer';
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import styles from './styles.css.js';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
6
|
+
import { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';
|
|
7
|
+
import { getOverflowParents } from '../../internal/utils/scrollable-containers';
|
|
8
|
+
import { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';
|
|
9
9
|
export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, hasContainingBlock, consideredFooterHeight) => {
|
|
10
10
|
if (!tableEl || !scrollbarEl || !wrapperEl) {
|
|
11
11
|
return;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/sticky-scrollbar/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\nimport { getContainingBlock, supportsStickyPosition } from '../../internal/utils/dom';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../../internal/utils/browser-scrollbar-size';\n\nexport const updatePosition = (\n tableEl: HTMLElement | null,\n wrapperEl: HTMLElement | null,\n scrollbarEl: HTMLElement | null,\n scrollbarContentEl: HTMLElement | null,\n hasContainingBlock: boolean,\n consideredFooterHeight: number\n) => {\n if (!tableEl || !scrollbarEl || !wrapperEl) {\n return;\n }\n\n const { width: tableWidth } = tableEl.getBoundingClientRect();\n const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n // using 15 px as a height of transparent scrollbar on mac\n const scrollbarHeight = browserScrollbarSize().height;\n const areaIsScrollable = tableWidth > wrapperWidth;\n\n if (!areaIsScrollable) {\n scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n } else {\n // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n // that's why syncing it separately\n if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n requestAnimationFrame(() => {\n scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n });\n }\n\n scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n if (!scrollbarHeight) {\n /* istanbul ignore next: covered by screenshot tests */\n scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n }\n }\n\n if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n scrollbarEl.style.height = `${scrollbarHeight}px`;\n scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n }\n\n if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n const wrapperElRect = wrapperEl.getBoundingClientRect();\n const tableElRect = tableEl.getBoundingClientRect();\n scrollbarEl.style.width = `${wrapperElRect.width}px`;\n scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n // when using sticky scrollbars in containers\n // we agreed to ignore dynamic bottom calculations for footer overlap\n scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n }\n};\n\nexport function useStickyScrollbar(\n scrollbarRef: RefObject<HTMLDivElement>,\n scrollbarContentRef: RefObject<HTMLDivElement>,\n tableRef: RefObject<HTMLTableElement>,\n wrapperRef: RefObject<HTMLDivElement>,\n footerHeight: number\n) {\n // We don't take into account containing-block calculations because that would\n // unnecessarily overcomplicate the position logic. For now, we assume that a\n // containing block, if present, is below the app layout and above the overflow\n // parent, which is a pretty safe assumption.\n const [hasContainingBlock, setHasContainingBlock] = useState(false);\n // We don't take into account footer height when the overflow parent is child of document body.\n // Because in this case, we think the footer is outside the overflow parent.\n const [hasOverflowParent, setHasOverflowParent] = useState(false);\n const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n const wrapperEl = wrapperRef.current;\n useEffect(() => {\n if (wrapperEl && supportsStickyPosition()) {\n setHasContainingBlock(!!getContainingBlock(wrapperEl));\n setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n }\n }, [wrapperEl]);\n\n // Update scrollbar position wrapper or table size change.\n useEffect(() => {\n if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n const observer = new ResizeObserver(() => {\n if (scrollbarContentRef.current) {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n }\n });\n // Scrollbar width must be in sync with wrapper width.\n observer.observe(wrapperRef.current);\n // Scrollbar content width must be in sync with table width.\n observer.observe(tableRef.current);\n return () => {\n observer.disconnect();\n };\n }\n }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n // Update scrollbar position when window resizes (vertically).\n useEffect(() => {\n if (supportsStickyPosition()) {\n const resizeHandler = () => {\n updatePosition(\n tableRef.current,\n wrapperRef.current,\n scrollbarRef.current,\n scrollbarContentRef.current,\n hasContainingBlock,\n consideredFooterHeight\n );\n };\n resizeHandler();\n window.addEventListener('resize', resizeHandler);\n return () => {\n window.removeEventListener('resize', resizeHandler);\n };\n }\n }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
|
package/table/styles.css.js
CHANGED
|
@@ -1,41 +1,37 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"tools": "
|
|
6
|
-
"tools-filtering": "awsui_tools-
|
|
7
|
-
"tools-align-right": "awsui_tools-align-
|
|
8
|
-
"tools-pagination": "awsui_tools-
|
|
9
|
-
"tools-preferences": "awsui_tools-
|
|
10
|
-
"tools-small": "awsui_tools-
|
|
11
|
-
"table": "
|
|
12
|
-
"table-layout-fixed": "awsui_table-layout-
|
|
13
|
-
"wrapper": "
|
|
14
|
-
"variant-stacked": "awsui_variant-
|
|
15
|
-
"variant-container": "awsui_variant-
|
|
16
|
-
"variant-embedded": "awsui_variant-
|
|
17
|
-
"variant-borderless": "awsui_variant-
|
|
18
|
-
"has-header": "awsui_has-
|
|
19
|
-
"has-footer": "awsui_has-
|
|
20
|
-
"cell-merged": "awsui_cell-
|
|
21
|
-
"cell-merged-content": "awsui_cell-merged-
|
|
22
|
-
"empty": "
|
|
23
|
-
"loading": "
|
|
24
|
-
"selection-control": "awsui_selection-
|
|
25
|
-
"selection-control-header": "awsui_selection-control-
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"footer": "awsui_footer_wih1l_4eja5_306",
|
|
37
|
-
"thead-active": "awsui_thead-active_wih1l_4eja5_315",
|
|
38
|
-
"row": "awsui_row_wih1l_4eja5_316",
|
|
39
|
-
"row-selected": "awsui_row-selected_wih1l_4eja5_317"
|
|
4
|
+
"root": "awsui_root_wih1l_1tsic_97",
|
|
5
|
+
"tools": "awsui_tools_wih1l_1tsic_108",
|
|
6
|
+
"tools-filtering": "awsui_tools-filtering_wih1l_1tsic_114",
|
|
7
|
+
"tools-align-right": "awsui_tools-align-right_wih1l_1tsic_128",
|
|
8
|
+
"tools-pagination": "awsui_tools-pagination_wih1l_1tsic_132",
|
|
9
|
+
"tools-preferences": "awsui_tools-preferences_wih1l_1tsic_132",
|
|
10
|
+
"tools-small": "awsui_tools-small_wih1l_1tsic_138",
|
|
11
|
+
"table": "awsui_table_wih1l_1tsic_144",
|
|
12
|
+
"table-layout-fixed": "awsui_table-layout-fixed_wih1l_1tsic_150",
|
|
13
|
+
"wrapper": "awsui_wrapper_wih1l_1tsic_154",
|
|
14
|
+
"variant-stacked": "awsui_variant-stacked_wih1l_1tsic_163",
|
|
15
|
+
"variant-container": "awsui_variant-container_wih1l_1tsic_163",
|
|
16
|
+
"variant-embedded": "awsui_variant-embedded_wih1l_1tsic_167",
|
|
17
|
+
"variant-borderless": "awsui_variant-borderless_wih1l_1tsic_167",
|
|
18
|
+
"has-header": "awsui_has-header_wih1l_1tsic_170",
|
|
19
|
+
"has-footer": "awsui_has-footer_wih1l_1tsic_173",
|
|
20
|
+
"cell-merged": "awsui_cell-merged_wih1l_1tsic_190",
|
|
21
|
+
"cell-merged-content": "awsui_cell-merged-content_wih1l_1tsic_201",
|
|
22
|
+
"empty": "awsui_empty_wih1l_1tsic_216",
|
|
23
|
+
"loading": "awsui_loading_wih1l_1tsic_220",
|
|
24
|
+
"selection-control": "awsui_selection-control_wih1l_1tsic_229",
|
|
25
|
+
"selection-control-header": "awsui_selection-control-header_wih1l_1tsic_236",
|
|
26
|
+
"dark-header": "awsui_dark-header_wih1l_1tsic_245",
|
|
27
|
+
"header-secondary": "awsui_header-secondary_wih1l_1tsic_250",
|
|
28
|
+
"table-has-header": "awsui_table-has-header_wih1l_1tsic_266",
|
|
29
|
+
"header-controls": "awsui_header-controls_wih1l_1tsic_270",
|
|
30
|
+
"variant-full-page": "awsui_variant-full-page_wih1l_1tsic_274",
|
|
31
|
+
"footer-wrapper": "awsui_footer-wrapper_wih1l_1tsic_287",
|
|
32
|
+
"footer": "awsui_footer_wih1l_1tsic_287",
|
|
33
|
+
"thead-active": "awsui_thead-active_wih1l_1tsic_296",
|
|
34
|
+
"row": "awsui_row_wih1l_1tsic_297",
|
|
35
|
+
"row-selected": "awsui_row-selected_wih1l_1tsic_298"
|
|
40
36
|
};
|
|
41
37
|
|
package/table/styles.scoped.css
CHANGED
|
@@ -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_wih1l_1tsic_97:not(#\9) {
|
|
98
98
|
font-size: var(--font-body-m-size-7dign1, 14px);
|
|
99
99
|
line-height: var(--font-body-m-line-height-rfgrp9, 22px);
|
|
100
100
|
color: var(--color-text-body-default-mmvcvg, #000716);
|
|
@@ -105,53 +105,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
105
105
|
width: 100%;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
.
|
|
108
|
+
.awsui_tools_wih1l_1tsic_108:not(#\9) {
|
|
109
109
|
display: flex;
|
|
110
110
|
align-items: flex-end;
|
|
111
111
|
flex-wrap: wrap;
|
|
112
112
|
padding: var(--space-scaled-xs-wbfgrv, 8px) 0 var(--space-scaled-xxs-t2t62i, 4px);
|
|
113
113
|
}
|
|
114
|
-
.awsui_tools-
|
|
114
|
+
.awsui_tools-filtering_wih1l_1tsic_114:not(#\9) {
|
|
115
115
|
max-width: 100%;
|
|
116
116
|
margin-right: var(--space-l-f4l5gr, 20px);
|
|
117
117
|
}
|
|
118
118
|
@supports (flex-basis: fit-content) {
|
|
119
|
-
.awsui_tools-
|
|
119
|
+
.awsui_tools-filtering_wih1l_1tsic_114:not(#\9) {
|
|
120
120
|
flex: 1 1 fit-content;
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
@supports not (flex-basis: fit-content) {
|
|
124
|
-
.awsui_tools-
|
|
124
|
+
.awsui_tools-filtering_wih1l_1tsic_114:not(#\9) {
|
|
125
125
|
flex: 1 1 auto;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
.awsui_tools-align-
|
|
128
|
+
.awsui_tools-align-right_wih1l_1tsic_128:not(#\9) {
|
|
129
129
|
display: flex;
|
|
130
130
|
margin-left: auto;
|
|
131
131
|
}
|
|
132
|
-
.awsui_tools-
|
|
132
|
+
.awsui_tools-pagination_wih1l_1tsic_132 + .awsui_tools-preferences_wih1l_1tsic_132:not(#\9) {
|
|
133
133
|
border-left: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
|
|
134
134
|
box-sizing: border-box;
|
|
135
135
|
margin-left: var(--space-xs-edba2s, 8px);
|
|
136
136
|
padding-left: var(--space-xs-edba2s, 8px);
|
|
137
137
|
}
|
|
138
|
-
.awsui_tools-
|
|
138
|
+
.awsui_tools-small_wih1l_1tsic_138 > .awsui_tools-filtering_wih1l_1tsic_114:not(#\9) {
|
|
139
139
|
margin-right: 0;
|
|
140
140
|
margin-bottom: var(--space-scaled-xs-wbfgrv, 8px);
|
|
141
141
|
flex-basis: 100%;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
.
|
|
144
|
+
.awsui_table_wih1l_1tsic_144:not(#\9) {
|
|
145
145
|
width: 100%;
|
|
146
146
|
border-spacing: 0;
|
|
147
147
|
position: relative;
|
|
148
148
|
box-sizing: border-box;
|
|
149
149
|
}
|
|
150
|
-
.awsui_table-layout-
|
|
150
|
+
.awsui_table-layout-fixed_wih1l_1tsic_150:not(#\9) {
|
|
151
151
|
table-layout: fixed;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
-
.
|
|
154
|
+
.awsui_wrapper_wih1l_1tsic_154:not(#\9) {
|
|
155
155
|
position: relative;
|
|
156
156
|
box-sizing: border-box;
|
|
157
157
|
width: 100%;
|
|
@@ -160,45 +160,45 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
160
160
|
overflow-x: auto;
|
|
161
161
|
scrollbar-width: none; /* Hide scrollbar in Firefox */
|
|
162
162
|
}
|
|
163
|
-
.
|
|
163
|
+
.awsui_wrapper_wih1l_1tsic_154.awsui_variant-stacked_wih1l_1tsic_163 > .awsui_table_wih1l_1tsic_144:not(#\9), .awsui_wrapper_wih1l_1tsic_154.awsui_variant-container_wih1l_1tsic_163 > .awsui_table_wih1l_1tsic_144:not(#\9) {
|
|
164
164
|
padding-left: var(--space-table-horizontal-8ca8r3, 20px);
|
|
165
165
|
padding-right: var(--space-table-horizontal-8ca8r3, 20px);
|
|
166
166
|
}
|
|
167
|
-
.
|
|
167
|
+
.awsui_wrapper_wih1l_1tsic_154.awsui_variant-embedded_wih1l_1tsic_167:not(#\9), .awsui_wrapper_wih1l_1tsic_154.awsui_variant-borderless_wih1l_1tsic_167:not(#\9) {
|
|
168
168
|
padding-bottom: var(--space-table-embedded-content-bottom-6xvajo, 0px);
|
|
169
169
|
}
|
|
170
|
-
.
|
|
170
|
+
.awsui_wrapper_wih1l_1tsic_154.awsui_has-header_wih1l_1tsic_170:not(#\9) {
|
|
171
171
|
padding-top: 0px;
|
|
172
172
|
}
|
|
173
|
-
.
|
|
173
|
+
.awsui_wrapper_wih1l_1tsic_154.awsui_has-footer_wih1l_1tsic_173:not(#\9) {
|
|
174
174
|
padding-bottom: 0px;
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.awsui_wrapper_wih1l_1tsic_154:not(#\9):not(.awsui_has-header_wih1l_1tsic_170) {
|
|
177
177
|
border-top-right-radius: var(--border-radius-container-pmtq2d, 16px);
|
|
178
178
|
border-top-left-radius: var(--border-radius-container-pmtq2d, 16px);
|
|
179
179
|
}
|
|
180
|
-
.
|
|
180
|
+
.awsui_wrapper_wih1l_1tsic_154:not(#\9)::-webkit-scrollbar {
|
|
181
181
|
display: none; /* Hide scrollbar in Safari and Chrome */
|
|
182
182
|
}
|
|
183
|
-
body[data-awsui-focus-visible=true] .
|
|
183
|
+
body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_1tsic_154:not(#\9):focus {
|
|
184
184
|
outline: 2px dotted transparent;
|
|
185
185
|
outline-offset: 2px;
|
|
186
186
|
border-radius: var(--border-radius-container-pmtq2d, 16px);
|
|
187
187
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
-
.awsui_cell-
|
|
190
|
+
.awsui_cell-merged_wih1l_1tsic_190:not(#\9) {
|
|
191
191
|
text-align: center;
|
|
192
192
|
padding: 0;
|
|
193
193
|
}
|
|
194
|
-
.awsui_cell-
|
|
194
|
+
.awsui_cell-merged_wih1l_1tsic_190.awsui_has-footer_wih1l_1tsic_173:not(#\9) {
|
|
195
195
|
/*
|
|
196
196
|
Add a bottom border to the body cell of an empty table as a separator between the
|
|
197
197
|
table and the footer
|
|
198
198
|
*/
|
|
199
199
|
border-bottom: var(--border-divider-section-width-orq175, 2px) solid var(--color-border-divider-default-9o8zql, #e9ebed);
|
|
200
200
|
}
|
|
201
|
-
.awsui_cell-merged-
|
|
201
|
+
.awsui_cell-merged-content_wih1l_1tsic_201:not(#\9) {
|
|
202
202
|
box-sizing: border-box;
|
|
203
203
|
width: 100%;
|
|
204
204
|
padding: var(--space-scaled-m-gxhdpl, 16px) var(--space-l-f4l5gr, 20px) var(--space-scaled-l-2rs0gk, 20px);
|
|
@@ -206,18 +206,18 @@ body[data-awsui-focus-visible=true] .awsui_wrapper_wih1l_4eja5_154:not(#\9):focu
|
|
|
206
206
|
/* stylelint-enable plugin/no-unsupported-browser-features */
|
|
207
207
|
}
|
|
208
208
|
@supports (position: sticky) {
|
|
209
|
-
.awsui_cell-merged-
|
|
209
|
+
.awsui_cell-merged-content_wih1l_1tsic_201:not(#\9) {
|
|
210
210
|
position: sticky;
|
|
211
211
|
left: 0;
|
|
212
212
|
margin: 0 calc(-2 * var(--space-table-horizontal-8ca8r3, 20px));
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
|
|
216
|
-
.
|
|
216
|
+
.awsui_empty_wih1l_1tsic_216:not(#\9) {
|
|
217
217
|
color: var(--color-text-empty-v5xueo, #5f6b7a);
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
-
.
|
|
220
|
+
.awsui_loading_wih1l_1tsic_220:not(#\9) {
|
|
221
221
|
/* used in test-utils */
|
|
222
222
|
}
|
|
223
223
|
|
|
@@ -226,47 +226,28 @@ The min/max/width token values in Visual Refresh should align
|
|
|
226
226
|
the table header and body cells selection control with the table
|
|
227
227
|
filter search icon.
|
|
228
228
|
*/
|
|
229
|
-
.awsui_selection-
|
|
229
|
+
.awsui_selection-control_wih1l_1tsic_229:not(#\9) {
|
|
230
230
|
box-sizing: border-box;
|
|
231
231
|
max-width: var(--size-table-selection-horizontal-jcyaue, 40px);
|
|
232
232
|
min-width: var(--size-table-selection-horizontal-jcyaue, 40px);
|
|
233
233
|
position: relative;
|
|
234
234
|
width: var(--size-table-selection-horizontal-jcyaue, 40px);
|
|
235
235
|
}
|
|
236
|
-
.awsui_selection-
|
|
236
|
+
.awsui_selection-control_wih1l_1tsic_229.awsui_selection-control-header_wih1l_1tsic_236:not(#\9) {
|
|
237
237
|
padding: var(--space-scaled-xs-wbfgrv, 8px) var(--space-scaled-l-2rs0gk, 20px);
|
|
238
238
|
border-left: var(--border-item-width-y36svo, 2px) solid transparent;
|
|
239
239
|
}
|
|
240
240
|
|
|
241
|
-
.awsui_sticky-scrollbar_wih1l_4eja5_241:not(#\9) {
|
|
242
|
-
height: 15px;
|
|
243
|
-
position: sticky;
|
|
244
|
-
display: none;
|
|
245
|
-
overflow-x: auto;
|
|
246
|
-
overflow-y: hidden;
|
|
247
|
-
bottom: 0;
|
|
248
|
-
width: 100%;
|
|
249
|
-
}
|
|
250
|
-
.awsui_sticky-scrollbar-content_wih1l_4eja5_250:not(#\9) {
|
|
251
|
-
height: 15px;
|
|
252
|
-
}
|
|
253
|
-
.awsui_sticky-scrollbar-visible_wih1l_4eja5_253:not(#\9) {
|
|
254
|
-
display: block;
|
|
255
|
-
}
|
|
256
|
-
.awsui_sticky-scrollbar-native-invisible_wih1l_4eja5_256:not(#\9) {
|
|
257
|
-
margin-top: -15px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
241
|
/*
|
|
261
242
|
The dynamic height dark header needs a background that will cover
|
|
262
243
|
the default white background of the container component.
|
|
263
244
|
*/
|
|
264
|
-
.awsui_dark-
|
|
245
|
+
.awsui_dark-header_wih1l_1tsic_245:not(#\9) {
|
|
265
246
|
background-color: var(--color-background-layout-main-m49752, #ffffff);
|
|
266
247
|
color: var(--color-text-body-default-mmvcvg, #000716);
|
|
267
248
|
}
|
|
268
249
|
|
|
269
|
-
.awsui_header-
|
|
250
|
+
.awsui_header-secondary_wih1l_1tsic_250:not(#\9) {
|
|
270
251
|
overflow: auto;
|
|
271
252
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
272
253
|
scrollbar-width: none; /* Firefox */
|
|
@@ -275,45 +256,45 @@ the default white background of the container component.
|
|
|
275
256
|
border-radius: 0;
|
|
276
257
|
background: var(--color-background-table-header-oc36ue, #ffffff);
|
|
277
258
|
}
|
|
278
|
-
.awsui_header-
|
|
259
|
+
.awsui_header-secondary_wih1l_1tsic_250.awsui_variant-stacked_wih1l_1tsic_163 > .awsui_table_wih1l_1tsic_144:not(#\9), .awsui_header-secondary_wih1l_1tsic_250.awsui_variant-container_wih1l_1tsic_163 > .awsui_table_wih1l_1tsic_144:not(#\9) {
|
|
279
260
|
padding-left: var(--space-table-horizontal-8ca8r3, 20px);
|
|
280
261
|
padding-right: var(--space-table-horizontal-8ca8r3, 20px);
|
|
281
262
|
}
|
|
282
|
-
.awsui_header-
|
|
263
|
+
.awsui_header-secondary_wih1l_1tsic_250:not(#\9)::-webkit-scrollbar {
|
|
283
264
|
display: none; /* Safari and Chrome */
|
|
284
265
|
}
|
|
285
|
-
.awsui_header-
|
|
266
|
+
.awsui_header-secondary_wih1l_1tsic_250.awsui_table-has-header_wih1l_1tsic_266:not(#\9) {
|
|
286
267
|
border-top: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-container-divider-tildlh, transparent);
|
|
287
268
|
}
|
|
288
269
|
|
|
289
|
-
.awsui_header-
|
|
270
|
+
.awsui_header-controls_wih1l_1tsic_270:not(#\9) {
|
|
290
271
|
padding-top: var(--space-container-header-vertical-di96ce, 12px);
|
|
291
272
|
padding-bottom: var(--space-container-header-vertical-di96ce, 12px);
|
|
292
273
|
}
|
|
293
|
-
.awsui_header-
|
|
274
|
+
.awsui_header-controls_wih1l_1tsic_270.awsui_variant-full-page_wih1l_1tsic_274:not(#\9) {
|
|
294
275
|
padding-top: 0;
|
|
295
276
|
}
|
|
296
|
-
.awsui_header-
|
|
277
|
+
.awsui_header-controls_wih1l_1tsic_270.awsui_variant-stacked_wih1l_1tsic_163:not(#\9), .awsui_header-controls_wih1l_1tsic_270.awsui_variant-container_wih1l_1tsic_163:not(#\9) {
|
|
297
278
|
padding-left: calc(var(--space-table-horizontal-8ca8r3, 20px) + var(--space-table-header-horizontal-gb3iyt, 0px));
|
|
298
279
|
padding-right: calc(var(--space-table-horizontal-8ca8r3, 20px) + var(--space-table-header-horizontal-gb3iyt, 0px));
|
|
299
280
|
}
|
|
300
|
-
.awsui_header-
|
|
281
|
+
.awsui_header-controls_wih1l_1tsic_270.awsui_variant-embedded_wih1l_1tsic_167:not(#\9), .awsui_header-controls_wih1l_1tsic_270.awsui_variant-borderless_wih1l_1tsic_167:not(#\9) {
|
|
301
282
|
padding-left: var(--space-table-header-horizontal-gb3iyt, 0px);
|
|
302
283
|
padding-right: var(--space-table-header-horizontal-gb3iyt, 0px);
|
|
303
284
|
padding-top: var(--space-table-embedded-header-top-mtzve4, 0px);
|
|
304
285
|
}
|
|
305
286
|
|
|
306
|
-
.awsui_footer-
|
|
287
|
+
.awsui_footer-wrapper_wih1l_1tsic_287.awsui_variant-stacked_wih1l_1tsic_163:not(#\9), .awsui_footer-wrapper_wih1l_1tsic_287.awsui_variant-container_wih1l_1tsic_163:not(#\9) {
|
|
307
288
|
padding-left: var(--space-table-horizontal-8ca8r3, 20px);
|
|
308
289
|
padding-right: var(--space-table-horizontal-8ca8r3, 20px);
|
|
309
290
|
}
|
|
310
291
|
|
|
311
|
-
.
|
|
292
|
+
.awsui_footer_wih1l_1tsic_287:not(#\9) {
|
|
312
293
|
padding: var(--space-scaled-s-913kwi, 12px) var(--space-table-footer-horizontal-u2o8yq, 0px);
|
|
313
294
|
}
|
|
314
295
|
|
|
315
|
-
.awsui_thead-
|
|
316
|
-
.
|
|
317
|
-
.awsui_row-
|
|
296
|
+
.awsui_thead-active_wih1l_1tsic_296:not(#\9),
|
|
297
|
+
.awsui_row_wih1l_1tsic_297:not(#\9),
|
|
298
|
+
.awsui_row-selected_wih1l_1tsic_298:not(#\9) {
|
|
318
299
|
/* used in test-utils */
|
|
319
300
|
}
|
|
@@ -2,41 +2,37 @@
|
|
|
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
|
-
"tools": "
|
|
7
|
-
"tools-filtering": "awsui_tools-
|
|
8
|
-
"tools-align-right": "awsui_tools-align-
|
|
9
|
-
"tools-pagination": "awsui_tools-
|
|
10
|
-
"tools-preferences": "awsui_tools-
|
|
11
|
-
"tools-small": "awsui_tools-
|
|
12
|
-
"table": "
|
|
13
|
-
"table-layout-fixed": "awsui_table-layout-
|
|
14
|
-
"wrapper": "
|
|
15
|
-
"variant-stacked": "awsui_variant-
|
|
16
|
-
"variant-container": "awsui_variant-
|
|
17
|
-
"variant-embedded": "awsui_variant-
|
|
18
|
-
"variant-borderless": "awsui_variant-
|
|
19
|
-
"has-header": "awsui_has-
|
|
20
|
-
"has-footer": "awsui_has-
|
|
21
|
-
"cell-merged": "awsui_cell-
|
|
22
|
-
"cell-merged-content": "awsui_cell-merged-
|
|
23
|
-
"empty": "
|
|
24
|
-
"loading": "
|
|
25
|
-
"selection-control": "awsui_selection-
|
|
26
|
-
"selection-control-header": "awsui_selection-control-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"footer": "awsui_footer_wih1l_4eja5_306",
|
|
38
|
-
"thead-active": "awsui_thead-active_wih1l_4eja5_315",
|
|
39
|
-
"row": "awsui_row_wih1l_4eja5_316",
|
|
40
|
-
"row-selected": "awsui_row-selected_wih1l_4eja5_317"
|
|
5
|
+
"root": "awsui_root_wih1l_1tsic_97",
|
|
6
|
+
"tools": "awsui_tools_wih1l_1tsic_108",
|
|
7
|
+
"tools-filtering": "awsui_tools-filtering_wih1l_1tsic_114",
|
|
8
|
+
"tools-align-right": "awsui_tools-align-right_wih1l_1tsic_128",
|
|
9
|
+
"tools-pagination": "awsui_tools-pagination_wih1l_1tsic_132",
|
|
10
|
+
"tools-preferences": "awsui_tools-preferences_wih1l_1tsic_132",
|
|
11
|
+
"tools-small": "awsui_tools-small_wih1l_1tsic_138",
|
|
12
|
+
"table": "awsui_table_wih1l_1tsic_144",
|
|
13
|
+
"table-layout-fixed": "awsui_table-layout-fixed_wih1l_1tsic_150",
|
|
14
|
+
"wrapper": "awsui_wrapper_wih1l_1tsic_154",
|
|
15
|
+
"variant-stacked": "awsui_variant-stacked_wih1l_1tsic_163",
|
|
16
|
+
"variant-container": "awsui_variant-container_wih1l_1tsic_163",
|
|
17
|
+
"variant-embedded": "awsui_variant-embedded_wih1l_1tsic_167",
|
|
18
|
+
"variant-borderless": "awsui_variant-borderless_wih1l_1tsic_167",
|
|
19
|
+
"has-header": "awsui_has-header_wih1l_1tsic_170",
|
|
20
|
+
"has-footer": "awsui_has-footer_wih1l_1tsic_173",
|
|
21
|
+
"cell-merged": "awsui_cell-merged_wih1l_1tsic_190",
|
|
22
|
+
"cell-merged-content": "awsui_cell-merged-content_wih1l_1tsic_201",
|
|
23
|
+
"empty": "awsui_empty_wih1l_1tsic_216",
|
|
24
|
+
"loading": "awsui_loading_wih1l_1tsic_220",
|
|
25
|
+
"selection-control": "awsui_selection-control_wih1l_1tsic_229",
|
|
26
|
+
"selection-control-header": "awsui_selection-control-header_wih1l_1tsic_236",
|
|
27
|
+
"dark-header": "awsui_dark-header_wih1l_1tsic_245",
|
|
28
|
+
"header-secondary": "awsui_header-secondary_wih1l_1tsic_250",
|
|
29
|
+
"table-has-header": "awsui_table-has-header_wih1l_1tsic_266",
|
|
30
|
+
"header-controls": "awsui_header-controls_wih1l_1tsic_270",
|
|
31
|
+
"variant-full-page": "awsui_variant-full-page_wih1l_1tsic_274",
|
|
32
|
+
"footer-wrapper": "awsui_footer-wrapper_wih1l_1tsic_287",
|
|
33
|
+
"footer": "awsui_footer_wih1l_1tsic_287",
|
|
34
|
+
"thead-active": "awsui_thead-active_wih1l_1tsic_296",
|
|
35
|
+
"row": "awsui_row_wih1l_1tsic_297",
|
|
36
|
+
"row-selected": "awsui_row-selected_wih1l_1tsic_298"
|
|
41
37
|
};
|
|
42
38
|
|
package/table/thead.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { TableProps } from './interfaces';
|
|
3
3
|
import { SelectionProps } from './use-selection';
|
|
4
4
|
import { NonCancelableEventHandler } from '../internal/events';
|
|
5
|
-
import { StickyColumnsModel } from './
|
|
5
|
+
import { StickyColumnsModel } from './sticky-columns';
|
|
6
6
|
export type InteractiveComponent = {
|
|
7
7
|
type: 'selection';
|
|
8
8
|
} | {
|
package/table/thead.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.d.ts","sourceRoot":"lib/default/","sources":["table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAgB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"thead.d.ts","sourceRoot":"lib/default/","sources":["table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAgB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,OAAO,EAAE,kBAAkB,EAAuB,MAAM,kBAAkB,CAAC;AAE3E,MAAM,MAAM,oBAAoB,GAC5B;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,MAAM,cAAc,CAAC;IACxC,WAAW,EAAE,CAAC,CAAC,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtG,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,kBAAkB,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAED,QAAA,MAAM,KAAK,wFAgIV,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/table/thead.js
CHANGED
|
@@ -9,11 +9,11 @@ import { getColumnKey, getStickyClassNames } from './utils';
|
|
|
9
9
|
import { TableHeaderCell } from './header-cell';
|
|
10
10
|
import { useColumnWidths } from './use-column-widths';
|
|
11
11
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
12
|
-
import { useStickyCellStyles } from './use-sticky-columns';
|
|
13
12
|
import styles from './styles.css.js';
|
|
14
13
|
import cellStyles from './header-cell/styles.css.js';
|
|
15
14
|
import headerCellStyles from './header-cell/styles.css.js';
|
|
16
15
|
import ScreenreaderOnly from '../internal/components/screenreader-only';
|
|
16
|
+
import { useStickyCellStyles } from './sticky-columns';
|
|
17
17
|
const Thead = React.forwardRef(({ containerWidth, selectionType, getSelectAllProps, columnDefinitions, sortingColumn, sortingDisabled, sortingDescending, resizableColumns, variant, wrapLines, onFocusMove, onSortingChange, onResizeFinish, singleSelectionHeaderAriaLabel, stripedRows, sticky = false, hidden = false, stuck = false, stickyState, selectionColumnId, focusedComponent, onFocusedComponentChange, }, outerRef) => {
|
|
18
18
|
const isVisualRefresh = useVisualRefresh();
|
|
19
19
|
const headerCellClass = clsx(headerCellStyles['header-cell'], headerCellStyles[`header-cell-variant-${variant}`], sticky && headerCellStyles['header-cell-sticky'], stuck && headerCellStyles['header-cell-stuck'], stripedRows && headerCellStyles['has-striped-rows'], isVisualRefresh && headerCellStyles['is-visual-refresh']);
|