@cloudscape-design/components 3.0.104 → 3.0.106
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/annotation-popover.d.ts.map +1 -1
- package/annotation-context/annotation/annotation-popover.js +4 -8
- package/annotation-context/annotation/annotation-popover.js.map +1 -1
- package/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +2 -1
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/internal/components/chart-popover/index.d.ts.map +1 -1
- package/internal/components/chart-popover/index.js +1 -1
- package/internal/components/chart-popover/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +2 -1
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/package.json +1 -1
- package/pie-chart/pie-chart.js +2 -2
- package/pie-chart/pie-chart.js.map +1 -1
- package/pie-chart/segments.d.ts +2 -2
- package/pie-chart/segments.d.ts.map +1 -1
- package/pie-chart/segments.js +5 -2
- package/pie-chart/segments.js.map +1 -1
- package/popover/body.d.ts +1 -4
- package/popover/body.d.ts.map +1 -1
- package/popover/body.js +16 -4
- package/popover/body.js.map +1 -1
- package/popover/internal.js +6 -1
- package/popover/internal.js.map +1 -1
- package/table/header-cell/index.d.ts +5 -2
- package/table/header-cell/index.d.ts.map +1 -1
- package/table/header-cell/index.js +8 -4
- package/table/header-cell/index.js.map +1 -1
- package/table/resizer/index.d.ts +3 -1
- package/table/resizer/index.d.ts.map +1 -1
- package/table/resizer/index.js +45 -11
- package/table/resizer/index.js.map +1 -1
- package/table/resizer/styles.css.js +6 -4
- package/table/resizer/styles.scoped.css +29 -7
- package/table/resizer/styles.selectors.js +6 -4
- package/table/thead.d.ts.map +1 -1
- package/table/thead.js +1 -2
- package/table/thead.js.map +1 -1
package/table/resizer/index.js
CHANGED
|
@@ -7,18 +7,22 @@ import { getOverflowParents } from '../../internal/utils/scrollable-containers';
|
|
|
7
7
|
import { findUpUntil } from '../../internal/utils/dom';
|
|
8
8
|
import tableStyles from '../styles.css.js';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
|
+
import { KeyCode } from '../../internal/keycode';
|
|
11
|
+
import { DEFAULT_WIDTH } from '../use-column-widths';
|
|
10
12
|
var AUTO_GROW_START_TIME = 10;
|
|
11
13
|
var AUTO_GROW_INTERVAL = 10;
|
|
12
14
|
var AUTO_GROW_INCREMENT = 5;
|
|
13
15
|
export function Resizer(_a) {
|
|
14
|
-
var onDragMove = _a.onDragMove, onFinish = _a.onFinish;
|
|
15
|
-
var
|
|
16
|
-
var
|
|
16
|
+
var onDragMove = _a.onDragMove, onFinish = _a.onFinish, ariaLabelledby = _a.ariaLabelledby, _b = _a.minWidth, minWidth = _b === void 0 ? DEFAULT_WIDTH : _b;
|
|
17
|
+
var _c = useState(false), isDragging = _c[0], setIsDragging = _c[1];
|
|
18
|
+
var _d = useState(), headerCell = _d[0], setHeaderCell = _d[1];
|
|
17
19
|
var autoGrowTimeout = useRef();
|
|
18
20
|
var onFinishStable = useStableEventHandler(onFinish);
|
|
19
21
|
var onDragStable = useStableEventHandler(onDragMove);
|
|
22
|
+
var _e = useState(false), resizerHasFocus = _e[0], setResizerHasFocus = _e[1];
|
|
23
|
+
var _f = useState(0), headerCellWidth = _f[0], setHeaderCellWidth = _f[1];
|
|
20
24
|
useEffect(function () {
|
|
21
|
-
if (!isDragging || !headerCell) {
|
|
25
|
+
if ((!isDragging && !resizerHasFocus) || !headerCell) {
|
|
22
26
|
return;
|
|
23
27
|
}
|
|
24
28
|
var rootElement = findUpUntil(headerCell, function (element) { return element.className.indexOf(tableStyles.root) > -1; });
|
|
@@ -34,10 +38,12 @@ export function Resizer(_a) {
|
|
|
34
38
|
tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';
|
|
35
39
|
};
|
|
36
40
|
var updateColumnWidth = function (newWidth) {
|
|
41
|
+
var _a = headerCell.getBoundingClientRect(), right = _a.right, width = _a.width;
|
|
42
|
+
var updatedWidth = newWidth < minWidth ? minWidth : newWidth;
|
|
43
|
+
updateTrackerPosition(right + updatedWidth - width);
|
|
44
|
+
setHeaderCellWidth(newWidth);
|
|
37
45
|
// callbacks must be the last calls in the handler, because they may cause an extra update
|
|
38
46
|
onDragStable(newWidth);
|
|
39
|
-
// we read the element size again because the previous callback changes it
|
|
40
|
-
updateTrackerPosition(headerCell.getBoundingClientRect().right);
|
|
41
47
|
};
|
|
42
48
|
var resizeColumn = function (offset) {
|
|
43
49
|
if (offset > leftEdge) {
|
|
@@ -70,18 +76,39 @@ export function Resizer(_a) {
|
|
|
70
76
|
onFinishStable();
|
|
71
77
|
clearTimeout(autoGrowTimeout.current);
|
|
72
78
|
};
|
|
79
|
+
var onKeyDown = function (event) {
|
|
80
|
+
// prevent screenreader cursor move
|
|
81
|
+
if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {
|
|
82
|
+
event.preventDefault();
|
|
83
|
+
}
|
|
84
|
+
// update width
|
|
85
|
+
if (event.keyCode === KeyCode.left) {
|
|
86
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width - 10);
|
|
87
|
+
}
|
|
88
|
+
if (event.keyCode === KeyCode.right) {
|
|
89
|
+
updateColumnWidth(headerCell.getBoundingClientRect().width + 10);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
73
92
|
updateTrackerPosition(headerCell.getBoundingClientRect().right);
|
|
74
93
|
document.body.classList.add(styles['resize-active']);
|
|
75
|
-
document.
|
|
76
|
-
|
|
94
|
+
document.body.classList.remove(styles['resize-active-with-focus']);
|
|
95
|
+
if (isDragging) {
|
|
96
|
+
document.addEventListener('mousemove', onMouseMove);
|
|
97
|
+
document.addEventListener('mouseup', onMouseUp);
|
|
98
|
+
}
|
|
99
|
+
if (resizerHasFocus) {
|
|
100
|
+
document.body.classList.add(styles['resize-active-with-focus']);
|
|
101
|
+
headerCell.addEventListener('keydown', onKeyDown);
|
|
102
|
+
}
|
|
77
103
|
return function () {
|
|
78
104
|
clearTimeout(autoGrowTimeout.current);
|
|
79
105
|
document.body.classList.remove(styles['resize-active']);
|
|
80
106
|
document.removeEventListener('mousemove', onMouseMove);
|
|
81
107
|
document.removeEventListener('mouseup', onMouseUp);
|
|
108
|
+
headerCell.removeEventListener('keydown', onKeyDown);
|
|
82
109
|
};
|
|
83
|
-
}, [headerCell, isDragging, onDragStable, onFinishStable]);
|
|
84
|
-
return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active']), onMouseDown: function (event) {
|
|
110
|
+
}, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);
|
|
111
|
+
return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active'], resizerHasFocus && styles['has-focus']), onMouseDown: function (event) {
|
|
85
112
|
if (event.button !== 0) {
|
|
86
113
|
return;
|
|
87
114
|
}
|
|
@@ -89,7 +116,14 @@ export function Resizer(_a) {
|
|
|
89
116
|
var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
|
|
90
117
|
setIsDragging(true);
|
|
91
118
|
setHeaderCell(headerCell);
|
|
92
|
-
}
|
|
119
|
+
}, onFocus: function (event) {
|
|
120
|
+
var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
|
|
121
|
+
setHeaderCellWidth(headerCell.getBoundingClientRect().width);
|
|
122
|
+
setResizerHasFocus(true);
|
|
123
|
+
setHeaderCell(headerCell);
|
|
124
|
+
}, onBlur: function () {
|
|
125
|
+
setResizerHasFocus(false);
|
|
126
|
+
}, role: "separator", "aria-orientation": "vertical", "aria-labelledby": ariaLabelledby, "aria-valuenow": headerCellWidth, "aria-valuetext": headerCellWidth.toString(), "aria-valuemin": minWidth, tabIndex: 0 }));
|
|
93
127
|
}
|
|
94
128
|
export function ResizeTracker() {
|
|
95
129
|
return React.createElement("span", { className: styles.tracker });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/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, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({ onDragMove, onFinish }: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableEventHandler(onFinish);\n const onDragStable = useStableEventHandler(onDragMove);\n useEffect(() => {\n if (!isDragging || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n // we read the element size again because the previous callback changes it\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable]);\n return (\n <span\n className={clsx(styles.resizer, isDragging && styles['resizer-active'])}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/resizer/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, { useEffect, useRef, useState } from 'react';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport tableStyles from '../styles.css.js';\nimport styles from './styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { DEFAULT_WIDTH } from '../use-column-widths';\n\ninterface ResizerProps {\n onDragMove: (newWidth: number) => void;\n onFinish: () => void;\n ariaLabelledby?: string;\n minWidth?: number;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAULT_WIDTH }: ResizerProps) {\n const [isDragging, setIsDragging] = useState(false);\n const [headerCell, setHeaderCell] = useState<HTMLElement>();\n const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n const onFinishStable = useStableEventHandler(onFinish);\n const onDragStable = useStableEventHandler(onDragMove);\n const [resizerHasFocus, setResizerHasFocus] = useState(false);\n const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n useEffect(() => {\n if ((!isDragging && !resizerHasFocus) || !headerCell) {\n return;\n }\n const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1)!;\n const tableElement = rootElement.querySelector<HTMLElement>(`table`)!;\n // tracker is rendered inside table wrapper to align with its size\n const tracker = rootElement.querySelector<HTMLElement>(`.${styles.tracker}`)!;\n const scrollParent = getOverflowParents(headerCell)[0];\n const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();\n\n const updateTrackerPosition = (newOffset: number) => {\n const { left: scrollParentLeft } = tableElement.getBoundingClientRect();\n tracker.style.top = headerCell.getBoundingClientRect().height + 'px';\n // minus one pixel to offset the cell border\n tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';\n };\n\n const updateColumnWidth = (newWidth: number) => {\n const { right, width } = headerCell.getBoundingClientRect();\n const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n updateTrackerPosition(right + updatedWidth - width);\n setHeaderCellWidth(newWidth);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n onDragStable(newWidth);\n };\n\n const resizeColumn = (offset: number) => {\n if (offset > leftEdge) {\n const cellLeft = headerCell.getBoundingClientRect().left;\n const newWidth = offset - cellLeft;\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(newWidth);\n }\n };\n\n const onAutoGrow = () => {\n const width = headerCell.getBoundingClientRect().width;\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);\n // callbacks must be the last calls in the handler, because they may cause an extra update\n updateColumnWidth(width + AUTO_GROW_INCREMENT);\n scrollParent.scrollLeft += AUTO_GROW_INCREMENT;\n };\n const onMouseMove = (event: MouseEvent) => {\n clearTimeout(autoGrowTimeout.current);\n const offset = event.pageX;\n if (offset > rightEdge) {\n autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n } else {\n resizeColumn(offset);\n }\n };\n const onMouseUp = (event: MouseEvent) => {\n resizeColumn(event.pageX);\n setIsDragging(false);\n onFinishStable();\n clearTimeout(autoGrowTimeout.current);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n // prevent screenreader cursor move\n if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {\n event.preventDefault();\n }\n // update width\n if (event.keyCode === KeyCode.left) {\n updateColumnWidth(headerCell.getBoundingClientRect().width - 10);\n }\n if (event.keyCode === KeyCode.right) {\n updateColumnWidth(headerCell.getBoundingClientRect().width + 10);\n }\n };\n\n updateTrackerPosition(headerCell.getBoundingClientRect().right);\n document.body.classList.add(styles['resize-active']);\n document.body.classList.remove(styles['resize-active-with-focus']);\n if (isDragging) {\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n }\n if (resizerHasFocus) {\n document.body.classList.add(styles['resize-active-with-focus']);\n headerCell.addEventListener('keydown', onKeyDown);\n }\n\n return () => {\n clearTimeout(autoGrowTimeout.current);\n document.body.classList.remove(styles['resize-active']);\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n headerCell.removeEventListener('keydown', onKeyDown);\n };\n }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);\n return (\n <span\n className={clsx(styles.resizer, isDragging && styles['resizer-active'], resizerHasFocus && styles['has-focus'])}\n onMouseDown={event => {\n if (event.button !== 0) {\n return;\n }\n event.preventDefault();\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setIsDragging(true);\n setHeaderCell(headerCell);\n }}\n onFocus={event => {\n const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th')!;\n setHeaderCellWidth(headerCell.getBoundingClientRect().width);\n setResizerHasFocus(true);\n setHeaderCell(headerCell);\n }}\n onBlur={() => {\n setResizerHasFocus(false);\n }}\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-labelledby={ariaLabelledby}\n aria-valuenow={headerCellWidth}\n // aria-valuetext is needed because the VO announces \"collapsed\" when only aria-valuenow set without aria-valuemax\n aria-valuetext={headerCellWidth.toString()}\n aria-valuemin={minWidth}\n tabIndex={0}\n />\n );\n}\n\nexport function ResizeTracker() {\n return <span className={styles.tracker} />;\n}\n"]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"resize-active": "awsui_resize-
|
|
5
|
-
"
|
|
6
|
-
"resizer
|
|
7
|
-
"
|
|
4
|
+
"resize-active": "awsui_resize-active_x7peu_1tckh_93",
|
|
5
|
+
"resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1tckh_93",
|
|
6
|
+
"resizer": "awsui_resizer_x7peu_1tckh_98",
|
|
7
|
+
"resizer-active": "awsui_resizer-active_x7peu_1tckh_114",
|
|
8
|
+
"has-focus": "awsui_has-focus_x7peu_1tckh_123",
|
|
9
|
+
"tracker": "awsui_tracker_x7peu_1tckh_146"
|
|
8
10
|
};
|
|
9
11
|
|
|
@@ -90,13 +90,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.awsui_resize-
|
|
93
|
+
.awsui_resize-active_x7peu_1tckh_93:not(#\9):not(.awsui_resize-active-with-focus_x7peu_1tckh_93) * {
|
|
94
94
|
cursor: col-resize;
|
|
95
95
|
-webkit-user-select: none;
|
|
96
96
|
user-select: none;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.
|
|
99
|
+
.awsui_resizer_x7peu_1tckh_98:not(#\9) {
|
|
100
100
|
bottom: 0;
|
|
101
101
|
cursor: col-resize;
|
|
102
102
|
position: absolute;
|
|
@@ -105,14 +105,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
105
105
|
width: var(--space-l-4vl6xu, 20px);
|
|
106
106
|
z-index: 10;
|
|
107
107
|
}
|
|
108
|
-
.awsui_resize-
|
|
108
|
+
.awsui_resize-active_x7peu_1tckh_93 .awsui_resizer_x7peu_1tckh_98:not(#\9) {
|
|
109
109
|
pointer-events: none;
|
|
110
110
|
}
|
|
111
|
-
th:not(#\9):last-child > .
|
|
111
|
+
th:not(#\9):last-child > .awsui_resizer_x7peu_1tckh_98 {
|
|
112
112
|
width: calc(var(--space-l-4vl6xu, 20px) / 2);
|
|
113
113
|
right: 0;
|
|
114
114
|
}
|
|
115
|
-
th:not(#\9):not(:last-child) > .
|
|
115
|
+
th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1tckh_98:hover::before, th:not(#\9):not(:last-child) > .awsui_resizer-active_x7peu_1tckh_114::before {
|
|
116
116
|
content: "";
|
|
117
117
|
position: absolute;
|
|
118
118
|
left: calc(var(--space-l-4vl6xu, 20px) / 2 - 2px);
|
|
@@ -121,8 +121,30 @@ th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1luui_98:hover::before, th:n
|
|
|
121
121
|
box-sizing: border-box;
|
|
122
122
|
border-left: 2px solid var(--color-border-divider-active-nnnfx9, #7d8998);
|
|
123
123
|
}
|
|
124
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9) {
|
|
125
|
+
position: relative;
|
|
126
|
+
position: absolute;
|
|
127
|
+
}
|
|
128
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9) {
|
|
129
|
+
outline: 2px dotted transparent;
|
|
130
|
+
outline-offset: calc(var(--space-table-header-focus-outline-gutter-rbx7m7, 0px) - 1px);
|
|
131
|
+
}
|
|
132
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9)::before {
|
|
133
|
+
content: " ";
|
|
134
|
+
display: block;
|
|
135
|
+
position: absolute;
|
|
136
|
+
left: calc(-1 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
137
|
+
top: calc(-1 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
138
|
+
width: calc(100% + 2 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
139
|
+
height: calc(100% + 2 * var(--space-table-header-focus-outline-gutter-rbx7m7, 0px));
|
|
140
|
+
border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
|
|
141
|
+
box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
142
|
+
}
|
|
143
|
+
.awsui_resizer_x7peu_1tckh_98.awsui_has-focus_x7peu_1tckh_123:not(#\9)::before {
|
|
144
|
+
box-shadow: inset 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
|
|
145
|
+
}
|
|
124
146
|
|
|
125
|
-
.
|
|
147
|
+
.awsui_tracker_x7peu_1tckh_146:not(#\9) {
|
|
126
148
|
display: none;
|
|
127
149
|
position: absolute;
|
|
128
150
|
border-left: var(--border-divider-list-width-hacikr, 1px) dashed var(--color-border-divider-active-nnnfx9, #7d8998);
|
|
@@ -130,6 +152,6 @@ th:not(#\9):not(:last-child) > .awsui_resizer_x7peu_1luui_98:hover::before, th:n
|
|
|
130
152
|
top: 0;
|
|
131
153
|
bottom: 0;
|
|
132
154
|
}
|
|
133
|
-
.awsui_resize-
|
|
155
|
+
.awsui_resize-active_x7peu_1tckh_93 .awsui_tracker_x7peu_1tckh_146:not(#\9) {
|
|
134
156
|
display: block;
|
|
135
157
|
}
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"resize-active": "awsui_resize-
|
|
6
|
-
"
|
|
7
|
-
"resizer
|
|
8
|
-
"
|
|
5
|
+
"resize-active": "awsui_resize-active_x7peu_1tckh_93",
|
|
6
|
+
"resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1tckh_93",
|
|
7
|
+
"resizer": "awsui_resizer_x7peu_1tckh_98",
|
|
8
|
+
"resizer-active": "awsui_resizer-active_x7peu_1tckh_114",
|
|
9
|
+
"has-focus": "awsui_has-focus_x7peu_1tckh_123",
|
|
10
|
+
"tracker": "awsui_tracker_x7peu_1tckh_146"
|
|
9
11
|
};
|
|
10
12
|
|
package/table/thead.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAyB,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAQvF,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,cAAc,EAAE,qBAAqB,CAAC;IACtC,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,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,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;CACzC;AAED,QAAA,MAAM,KAAK,wFA8FV,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/table/thead.js
CHANGED
|
@@ -8,7 +8,6 @@ import { focusMarkers } from './use-selection';
|
|
|
8
8
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
9
9
|
import { getColumnKey } from './utils';
|
|
10
10
|
import { TableHeaderCell } from './header-cell';
|
|
11
|
-
import { Resizer } from './resizer';
|
|
12
11
|
import { useColumnWidths } from './use-column-widths';
|
|
13
12
|
import styles from './styles.css.js';
|
|
14
13
|
import headerCellStyles from './header-cell/styles.css.js';
|
|
@@ -40,7 +39,7 @@ var Thead = React.forwardRef(function (_a, outerRef) {
|
|
|
40
39
|
width: widthOverride || column.width,
|
|
41
40
|
minWidth: sticky ? undefined : column.minWidth,
|
|
42
41
|
maxWidth: resizableColumns || sticky ? undefined : column.maxWidth
|
|
43
|
-
}, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines,
|
|
42
|
+
}, tabIndex: sticky ? -1 : 0, showFocusRing: colIndex === showFocusRing, column: column, activeSortingColumn: sortingColumn, sortingDescending: sortingDescending, sortingDisabled: sortingDisabled, wrapLines: wrapLines, colIndex: colIndex, updateColumn: updateColumn, onResizeFinish: function () { return onResizeFinish(columnWidths); }, resizableColumns: resizableColumns, onClick: function (detail) { return fireNonCancelableEvent(onSortingChange, detail); }, onFocus: function () { return onCellFocus === null || onCellFocus === void 0 ? void 0 : onCellFocus(colIndex); }, onBlur: onCellBlur }));
|
|
44
43
|
}))));
|
|
45
44
|
});
|
|
46
45
|
export default Thead;
|
package/table/thead.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAA2C,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"thead.js","sourceRoot":"","sources":["../../../src/table/thead.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 from 'react';\nimport { TableProps } from './interfaces';\nimport SelectionControl, { SelectionControlProps } from './selection-control';\nimport { focusMarkers } from './use-selection';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { getColumnKey } from './utils';\nimport { TableHeaderCell } from './header-cell';\nimport { useColumnWidths } from './use-column-widths';\nimport styles from './styles.css.js';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\n\nexport interface TheadProps {\n containerWidth: number | null;\n selectionType: TableProps.SelectionType | undefined;\n columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n sortingColumn: TableProps.SortingColumn<any> | undefined;\n sortingDescending: boolean | undefined;\n sortingDisabled: boolean | undefined;\n variant: TableProps.Variant;\n wrapLines: boolean | undefined;\n resizableColumns: boolean | undefined;\n selectAllProps: SelectionControlProps;\n onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;\n onCellFocus?: (colIndex: number) => void;\n onCellBlur?: () => void;\n onResizeFinish: (newWidths: Record<string, number>) => void;\n showFocusRing?: number | null;\n onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;\n sticky?: boolean;\n hidden?: boolean;\n stuck?: boolean;\n singleSelectionHeaderAriaLabel?: string;\n}\n\nconst Thead = React.forwardRef(\n (\n {\n containerWidth,\n selectionType,\n selectAllProps,\n columnDefinitions,\n sortingColumn,\n sortingDisabled,\n sortingDescending,\n resizableColumns,\n variant,\n wrapLines,\n onFocusMove,\n onCellFocus,\n onCellBlur,\n onSortingChange,\n onResizeFinish,\n singleSelectionHeaderAriaLabel,\n showFocusRing = null,\n sticky = false,\n hidden = false,\n stuck = false,\n }: TheadProps,\n outerRef: React.Ref<HTMLTableRowElement>\n ) => {\n const headerCellClass = clsx(\n headerCellStyles['header-cell'],\n headerCellStyles[`header-cell-variant-${variant}`],\n sticky && headerCellStyles['header-cell-sticky'],\n stuck && headerCellStyles['header-cell-stuck']\n );\n const selectionCellClass = clsx(styles['selection-control'], styles['selection-control-header']);\n const { columnWidths, totalWidth, updateColumn } = useColumnWidths();\n\n return (\n <thead className={clsx(!hidden && styles['thead-active'])}>\n <tr {...focusMarkers.all} ref={outerRef}>\n {selectionType === 'multi' && (\n <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n <SelectionControl\n onFocusDown={event => onFocusMove!(event.target as HTMLElement, -1, +1)}\n {...selectAllProps}\n {...(hidden ? { tabIndex: -1 } : {})}\n />\n </th>\n )}\n {selectionType === 'single' && (\n <th className={clsx(headerCellClass, selectionCellClass)} scope=\"col\">\n <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>\n </th>\n )}\n {columnDefinitions.map((column, colIndex) => {\n let widthOverride;\n if (resizableColumns) {\n if (columnWidths) {\n // use stateful value if available\n widthOverride = columnWidths[getColumnKey(column, colIndex)];\n }\n if (colIndex === columnDefinitions.length - 1 && containerWidth && containerWidth > totalWidth) {\n // let the last column grow and fill the container width\n widthOverride = 'auto';\n }\n }\n return (\n <TableHeaderCell\n key={getColumnKey(column, colIndex)}\n className={headerCellClass}\n style={{\n width: widthOverride || column.width,\n minWidth: sticky ? undefined : column.minWidth,\n maxWidth: resizableColumns || sticky ? undefined : column.maxWidth,\n }}\n tabIndex={sticky ? -1 : 0}\n showFocusRing={colIndex === showFocusRing}\n column={column}\n activeSortingColumn={sortingColumn}\n sortingDescending={sortingDescending}\n sortingDisabled={sortingDisabled}\n wrapLines={wrapLines}\n colIndex={colIndex}\n updateColumn={updateColumn}\n onResizeFinish={() => onResizeFinish(columnWidths)}\n resizableColumns={resizableColumns}\n onClick={detail => fireNonCancelableEvent(onSortingChange, detail)}\n onFocus={() => onCellFocus?.(colIndex)}\n onBlur={onCellBlur}\n />\n );\n })}\n </tr>\n </thead>\n );\n }\n);\n\nexport default Thead;\n"]}
|