@cloudscape-design/components-themeable 3.0.1120 → 3.0.1122

package/lib/internal/template/table/resizer/index.js

@@ -1,13 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';
 import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
+import DragHandleWrapper from '../../internal/components/drag-handle-wrapper';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { KeyCode } from '../../internal/keycode';
 import handleKey, { isEventLike } from '../../internal/utils/handle-key';
+import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
 import { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';
 import { getHeaderWidth, getResizerElements } from './resizer-lookup';
 import styles from './styles.css.js';
@@ -17,14 +19,18 @@ const AUTO_GROW_INCREMENT = 5;
 export function Divider({ className }) {
     return React.createElement("span", { className: clsx(styles.divider, styles['divider-disabled'], className) });
 }
-export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, minWidth = DEFAULT_COLUMN_WIDTH, tabIndex, showFocusRing, focusId, roleDescription, }) {
+export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, minWidth = DEFAULT_COLUMN_WIDTH, tabIndex, showFocusRing, focusId, roleDescription, tooltipText, }) {
     onWidthUpdate = useStableCallback(onWidthUpdate);
     onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);
     const isVisualRefresh = useVisualRefresh();
     const separatorId = useUniqueId();
+    const positioningWrapperRef = useRef(null);
     const resizerToggleRef = useRef(null);
     const resizerSeparatorRef = useRef(null);
+    const [isPointerDown, setIsPointerDown] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
+    const [showUapButtons, setShowUapButtons] = useState(false);
+    const [resizerObscured, setResizerObscured] = useState(false);
     const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);
     const autoGrowTimeout = useRef();
     const [resizerHasFocus, setResizerHasFocus] = useState(false);
@@ -33,38 +39,101 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
     useEffect(() => {
         setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));
     }, []);
+    const isObscured = useCallback(() => {
+        const elements = getResizerElements(resizerToggleRef.current);
+        if (!elements || !positioningWrapperRef.current) {
+            return false;
+        }
+        let scrollPaddingInlineStart = 0;
+        let scrollPaddingInlineEnd = 0;
+        // Calculate size of the headers at the exact moment of the call to deal
+        // with auto-width columns and cached sticky column state.
+        elements.allHeaders.forEach(header => {
+            const { inlineSize } = getLogicalBoundingClientRect(header);
+            if (header.style.insetInlineStart) {
+                scrollPaddingInlineStart += inlineSize;
+            }
+            if (header.style.insetInlineEnd) {
+                scrollPaddingInlineEnd += inlineSize;
+            }
+        });
+        const { insetInlineStart: scrollParentInsetInlineStart, insetInlineEnd: scrollParentInsetInlineEnd } = getLogicalBoundingClientRect(elements.scrollParent);
+        const { insetInlineStart, insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);
+        const relativeInsetInlineStart = insetInlineStart - scrollParentInsetInlineStart;
+        const relativeInsetInlineEnd = scrollParentInsetInlineEnd - insetInlineEnd;
+        const isSticky = !!elements.header.style.insetInlineStart || !!elements.header.style.insetInlineEnd;
+        return (
+        // Is positioningWrapper obscured behind the left edge of scrollParent?
+        Math.ceil(relativeInsetInlineStart + inlineSize) < (isSticky ? 0 : scrollPaddingInlineStart) ||
+            // Is positioningWrapper obscured behind the right edge of scrollParent?
+            Math.ceil(relativeInsetInlineEnd) < (isSticky ? 0 : scrollPaddingInlineEnd));
+    }, []);
+    const scrollIntoViewIfNeeded = useCallback(() => {
+        if (resizerSeparatorRef.current && isObscured()) {
+            scrollElementIntoView(resizerSeparatorRef.current);
+        }
+    }, [isObscured]);
+    useEffect(() => {
+        if (!showUapButtons) {
+            setResizerObscured(false);
+            return;
+        }
+        const elements = getResizerElements(resizerToggleRef.current);
+        if (!elements) {
+            return;
+        }
+        const onScroll = () => setResizerObscured(isObscured());
+        elements.scrollParent.addEventListener('scroll', onScroll);
+        return () => elements.scrollParent.removeEventListener('scroll', onScroll);
+    }, [isObscured, showUapButtons]);
+    useEffect(() => {
+        if (showUapButtons) {
+            setResizerObscured(isObscured());
+        }
+    }, [headerCellWidth, isObscured, showUapButtons]);
+    const updateTrackerPosition = useCallback((newOffset) => {
+        const elements = getResizerElements(resizerToggleRef.current);
+        if (!elements) {
+            return;
+        }
+        const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);
+        elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';
+        // minus one pixel to offset the cell border
+        elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';
+    }, []);
+    const updateColumnWidth = useCallback((newWidth) => {
+        const elements = getResizerElements(resizerToggleRef.current);
+        if (!elements) {
+            return;
+        }
+        const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);
+        const updatedWidth = newWidth < minWidth ? minWidth : newWidth;
+        updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);
+        setHeaderCellWidth(updatedWidth);
+        // callbacks must be the last calls in the handler, because they may cause an extra update
+        onWidthUpdate(newWidth);
+    }, [minWidth, onWidthUpdate, updateTrackerPosition]);
+    const resizeColumn = useCallback((offset) => {
+        const elements = getResizerElements(resizerToggleRef.current);
+        if (!elements) {
+            return;
+        }
+        const { insetInlineStart: inlineStartEdge } = getLogicalBoundingClientRect(elements.scrollParent);
+        if (offset > inlineStartEdge) {
+            const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;
+            const newWidth = offset - cellLeft;
+            // callbacks must be the last calls in the handler, because they may cause an extra update
+            updateColumnWidth(newWidth);
+        }
+    }, [updateColumnWidth]);
     useEffect(() => {
         var _a, _b;
         const elements = getResizerElements(resizerToggleRef.current);
         const document = (_b = (_a = resizerToggleRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : window.document;
-        if ((!isDragging && !resizerHasFocus) || !elements) {
+        if ((!isPointerDown && !resizerHasFocus) || !elements) {
             return;
         }
-        const { insetInlineStart: inlineStartEdge, insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(elements.scrollParent);
-        const updateTrackerPosition = (newOffset) => {
-            const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);
-            elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';
-            // minus one pixel to offset the cell border
-            elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';
-        };
-        const updateColumnWidth = (newWidth) => {
-            const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);
-            const updatedWidth = newWidth < minWidth ? minWidth : newWidth;
-            updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);
-            if (newWidth >= minWidth) {
-                setHeaderCellWidth(newWidth);
-            }
-            // callbacks must be the last calls in the handler, because they may cause an extra update
-            onWidthUpdate(newWidth);
-        };
-        const resizeColumn = (offset) => {
-            if (offset > inlineStartEdge) {
-                const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;
-                const newWidth = offset - cellLeft;
-                // callbacks must be the last calls in the handler, because they may cause an extra update
-                updateColumnWidth(newWidth);
-            }
-        };
+        const { insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(elements.scrollParent);
         const onAutoGrow = () => {
             const inlineSize = getLogicalBoundingClientRect(elements.header).inlineSize;
             autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);
@@ -72,7 +141,8 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
             updateColumnWidth(inlineSize + AUTO_GROW_INCREMENT);
             elements.scrollParent.scrollLeft += AUTO_GROW_INCREMENT * (getIsRtl(elements.scrollParent) ? -1 : 1);
         };
-        const onMouseMove = (event) => {
+        const onPointerMove = (event) => {
+            setIsDragging(true);
             clearTimeout(autoGrowTimeout.current);
             const offset = getLogicalPageX(event);
             if (offset > inlineEndEdge) {
@@ -82,9 +152,15 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
                 resizeColumn(offset);
             }
         };
-        const onMouseUp = (event) => {
-            resizeColumn(getLogicalPageX(event));
-            setIsDragging(false);
+        const onPointerUp = (event) => {
+            setIsPointerDown(false);
+            if (isDragging) {
+                setIsDragging(false);
+                resizeColumn(getLogicalPageX(event));
+            }
+            else {
+                setShowUapButtons(true);
+            }
             onWidthUpdateCommit();
             clearTimeout(autoGrowTimeout.current);
         };
@@ -98,41 +174,57 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
                             onActivate: () => {
                                 var _a;
                                 setIsKeyboardDragging(false);
+                                setShowUapButtons(false);
                                 (_a = resizerToggleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             },
                             onEscape: () => {
                                 var _a;
                                 setIsKeyboardDragging(false);
+                                setShowUapButtons(false);
                                 (_a = resizerToggleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                             },
-                            onInlineStart: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10),
-                            onInlineEnd: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10),
+                            onInlineStart: () => {
+                                updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10);
+                                scrollIntoViewIfNeeded();
+                            },
+                            onInlineEnd: () => {
+                                updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10);
+                                scrollIntoViewIfNeeded();
+                            },
                         });
                     }
                 }
             }
-            // Enter keyboard dragging mode
-            else if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
-                event.preventDefault();
-                if (isEventLike(event)) {
-                    handleKey(event, {
-                        onActivate: () => {
-                            var _a;
-                            setIsKeyboardDragging(true);
-                            (_a = resizerSeparatorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        },
-                    });
+            else {
+                if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {
+                    // Enter keyboard dragging mode
+                    event.preventDefault();
+                    if (isEventLike(event)) {
+                        handleKey(event, {
+                            onActivate: () => {
+                                var _a;
+                                setShowUapButtons(true);
+                                setIsKeyboardDragging(true);
+                                (_a = resizerSeparatorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            },
+                        });
+                    }
+                }
+                else {
+                    // Showing the UAP buttons when the button is only focused and not activated
+                    // gives a false impression that you can resize with the arrow keys.
+                    setShowUapButtons(false);
                 }
             }
         };
         updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);
         const controller = new AbortController();
-        if (isDragging) {
+        if (isPointerDown) {
             document.body.classList.add(styles['resize-active']);
-            document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
-            document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
+            document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });
+            document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });
         }
-        if (resizerHasFocus) {
+        else if (resizerHasFocus) {
             document.body.classList.add(styles['resize-active-with-focus']);
             elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });
         }
@@ -140,44 +232,85 @@ export function Resizer({ onWidthUpdate, onWidthUpdateCommit, ariaLabelledby, mi
             document.body.classList.add(styles['resize-active']);
         }
         return () => {
-            clearTimeout(autoGrowTimeout.current);
             document.body.classList.remove(styles['resize-active']);
             document.body.classList.remove(styles['resize-active-with-focus']);
             controller.abort();
         };
-    }, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);
+    }, [
+        isDragging,
+        isKeyboardDragging,
+        isPointerDown,
+        resizerHasFocus,
+        scrollIntoViewIfNeeded,
+        onWidthUpdateCommit,
+        resizeColumn,
+        updateColumnWidth,
+        updateTrackerPosition,
+    ]);
+    useEffect(() => {
+        if (isDragging) {
+            return () => clearTimeout(autoGrowTimeout.current);
+        }
+    }, [isDragging]);
     const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { ref: resizerToggleRef, className: clsx(styles.resizer, (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'], isVisualRefresh && styles['is-visual-refresh']), onMouseDown: event => {
-                if (event.button !== 0) {
+    return (React.createElement("div", { className: clsx(styles['resizer-wrapper'], isVisualRefresh && styles['is-visual-refresh']), ref: positioningWrapperRef },
+        React.createElement(DragHandleWrapper, { clickDragThreshold: 3, hideButtonsOnDrag: false, directions: {
+                'inline-start': resizerObscured ? undefined : headerCellWidth > minWidth ? 'active' : 'disabled',
+                'inline-end': resizerObscured ? undefined : 'active',
+            }, triggerMode: "controlled", controlledShowButtons: showUapButtons && !resizerObscured, wrapperClassName: styles['resizer-button-wrapper'], tooltipText: tooltipText, "data-obscured": resizerObscured, onDirectionClick: direction => {
+                const elements = getResizerElements(resizerToggleRef.current);
+                if (!elements) {
                     return;
                 }
-                event.preventDefault();
-                setIsDragging(true);
-            }, onClick: () => {
-                var _a;
-                // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.
-                setIsDragging(false);
-                setResizerHasFocus(true);
-                setIsKeyboardDragging(true);
-                (_a = resizerSeparatorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }, onFocus: () => {
-                setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));
-                setResizerHasFocus(true);
-            }, onBlur: event => {
-                // Ignoring blur event when focus moves to the resizer separator element.
-                // (This focus transition is done programmatically when the resizer button is clicked).
-                if (event.relatedTarget !== resizerSeparatorRef.current) {
-                    setResizerHasFocus(false);
+                if (direction === 'inline-start') {
+                    updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 20);
+                    requestAnimationFrame(() => {
+                        onWidthUpdateCommit();
+                        scrollIntoViewIfNeeded();
+                    });
                 }
-            }, "aria-roledescription": roleDescription, "aria-labelledby": ariaLabelledby, tabIndex: resizerTabIndex, "data-focus-id": focusId }),
-        React.createElement("span", { className: clsx(styles['divider-interactive'], isDragging && styles['divider-active'], isVisualRefresh && styles['is-visual-refresh']), "data-awsui-table-suppress-navigation": true, ref: resizerSeparatorRef, id: separatorId, role: "slider", tabIndex: -1, "aria-labelledby": ariaLabelledby, "aria-hidden": !isKeyboardDragging, "aria-valuemin": minWidth, "aria-valuemax": Number.MAX_SAFE_INTEGER, "aria-valuenow": headerCellWidth, "data-focus-id": focusId, onBlur: () => {
-                setResizerHasFocus(false);
-                if (isKeyboardDragging) {
-                    setIsKeyboardDragging(false);
+                else if (direction === 'inline-end') {
+                    updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 20);
+                    requestAnimationFrame(() => {
+                        onWidthUpdateCommit();
+                        scrollIntoViewIfNeeded();
+                    });
                 }
-                onWidthUpdateCommit();
-            } })));
+            } },
+            React.createElement("button", { ref: resizerToggleRef, className: clsx(styles.resizer, (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'], isVisualRefresh && styles['is-visual-refresh']), onPointerDown: event => {
+                    if (event.pointerType === 'mouse' && event.button !== 0) {
+                        return;
+                    }
+                    setIsPointerDown(true);
+                }, onClick: () => {
+                    var _a;
+                    // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.
+                    setIsPointerDown(false);
+                    setIsDragging(false);
+                    setShowUapButtons(true);
+                    setResizerHasFocus(true);
+                    setIsKeyboardDragging(true);
+                    (_a = resizerSeparatorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, onFocus: () => {
+                    setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));
+                    setResizerHasFocus(true);
+                }, onBlur: event => {
+                    // Ignoring blur event when focus moves to the resizer separator element.
+                    // (This focus transition is done programmatically when the resizer button is clicked).
+                    if (event.relatedTarget !== resizerSeparatorRef.current) {
+                        setResizerHasFocus(false);
+                        setShowUapButtons(false);
+                        return;
+                    }
+                }, "aria-roledescription": roleDescription, "aria-labelledby": ariaLabelledby, tabIndex: resizerTabIndex, "data-focus-id": focusId }),
+            React.createElement("span", { className: clsx(styles['divider-interactive'], (isPointerDown || isDragging) && styles['divider-active'], isVisualRefresh && styles['is-visual-refresh']), "data-awsui-table-suppress-navigation": true, ref: resizerSeparatorRef, id: separatorId, role: "slider", tabIndex: -1, "aria-labelledby": ariaLabelledby, "aria-hidden": !isKeyboardDragging, "aria-valuemin": minWidth, "aria-valuemax": Number.MAX_SAFE_INTEGER, "aria-valuenow": headerCellWidth, "data-focus-id": focusId, onBlur: event => {
+                    setIsKeyboardDragging(false);
+                    if (event.relatedTarget !== resizerToggleRef.current) {
+                        setResizerHasFocus(false);
+                        setShowUapButtons(false);
+                    }
+                    onWidthUpdateCommit();
+                } }))));
 }
 export function ResizeTracker() {
     return React.createElement("span", { className: styles.tracker });

package/lib/internal/template/table/resizer/index.js.map

@@ -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 React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../../internal/keycode';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { getHeaderWidth, getResizerElements } from './resizer-lookup';\n\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n  onWidthUpdate: (newWidth: number) => void;\n  onWidthUpdateCommit: () => void;\n  ariaLabelledby?: string;\n  minWidth?: number;\n  tabIndex?: number;\n  focusId?: string;\n  showFocusRing?: boolean;\n  roleDescription?: string;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Divider({ className }: { className?: string }) {\n  return <span className={clsx(styles.divider, styles['divider-disabled'], className)} />;\n}\n\nexport function Resizer({\n  onWidthUpdate,\n  onWidthUpdateCommit,\n  ariaLabelledby,\n  minWidth = DEFAULT_COLUMN_WIDTH,\n  tabIndex,\n  showFocusRing,\n  focusId,\n  roleDescription,\n}: ResizerProps) {\n  onWidthUpdate = useStableCallback(onWidthUpdate);\n  onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const separatorId = useUniqueId();\n  const resizerToggleRef = useRef<HTMLButtonElement>(null);\n  const resizerSeparatorRef = useRef<HTMLSpanElement>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n  const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n  const [resizerHasFocus, setResizerHasFocus] = useState(false);\n  const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n  // Read header width after mounting for it to be available in the element's ARIA label before it gets focused.\n  useEffect(() => {\n    setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n  }, []);\n\n  useEffect(() => {\n    const elements = getResizerElements(resizerToggleRef.current);\n    const document = resizerToggleRef.current?.ownerDocument ?? window.document;\n\n    if ((!isDragging && !resizerHasFocus) || !elements) {\n      return;\n    }\n\n    const { insetInlineStart: inlineStartEdge, insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(\n      elements.scrollParent\n    );\n\n    const updateTrackerPosition = (newOffset: number) => {\n      const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);\n      elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';\n      // minus one pixel to offset the cell border\n      elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';\n    };\n\n    const updateColumnWidth = (newWidth: number) => {\n      const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);\n      const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n      updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);\n      if (newWidth >= minWidth) {\n        setHeaderCellWidth(newWidth);\n      }\n      // callbacks must be the last calls in the handler, because they may cause an extra update\n      onWidthUpdate(newWidth);\n    };\n\n    const resizeColumn = (offset: number) => {\n      if (offset > inlineStartEdge) {\n        const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;\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 inlineSize = getLogicalBoundingClientRect(elements.header).inlineSize;\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(inlineSize + AUTO_GROW_INCREMENT);\n      elements.scrollParent.scrollLeft += AUTO_GROW_INCREMENT * (getIsRtl(elements.scrollParent) ? -1 : 1);\n    };\n\n    const onMouseMove = (event: MouseEvent) => {\n      clearTimeout(autoGrowTimeout.current);\n      const offset = getLogicalPageX(event);\n      if (offset > inlineEndEdge) {\n        autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n      } else {\n        resizeColumn(offset);\n      }\n    };\n\n    const onMouseUp = (event: MouseEvent) => {\n      resizeColumn(getLogicalPageX(event));\n      setIsDragging(false);\n      onWidthUpdateCommit();\n      clearTimeout(autoGrowTimeout.current);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isKeyboardDragging) {\n        const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.right, KeyCode.space, KeyCode.escape];\n\n        if (keys.indexOf(event.keyCode) !== -1) {\n          event.preventDefault();\n\n          if (isEventLike(event)) {\n            handleKey(event, {\n              onActivate: () => {\n                setIsKeyboardDragging(false);\n                resizerToggleRef.current?.focus();\n              },\n              onEscape: () => {\n                setIsKeyboardDragging(false);\n                resizerToggleRef.current?.focus();\n              },\n              onInlineStart: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10),\n              onInlineEnd: () => updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10),\n            });\n          }\n        }\n      }\n      // Enter keyboard dragging mode\n      else if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n        event.preventDefault();\n\n        if (isEventLike(event)) {\n          handleKey(event, {\n            onActivate: () => {\n              setIsKeyboardDragging(true);\n              resizerSeparatorRef.current?.focus();\n            },\n          });\n        }\n      }\n    };\n\n    updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);\n    const controller = new AbortController();\n\n    if (isDragging) {\n      document.body.classList.add(styles['resize-active']);\n      document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });\n      document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });\n    }\n    if (resizerHasFocus) {\n      document.body.classList.add(styles['resize-active-with-focus']);\n      elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });\n    }\n    if (isKeyboardDragging) {\n      document.body.classList.add(styles['resize-active']);\n    }\n\n    return () => {\n      clearTimeout(autoGrowTimeout.current);\n      document.body.classList.remove(styles['resize-active']);\n      document.body.classList.remove(styles['resize-active-with-focus']);\n      controller.abort();\n    };\n  }, [minWidth, isDragging, isKeyboardDragging, resizerHasFocus, onWidthUpdate, onWidthUpdateCommit]);\n\n  const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });\n\n  return (\n    <>\n      <button\n        ref={resizerToggleRef}\n        className={clsx(\n          styles.resizer,\n          (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'],\n          isVisualRefresh && styles['is-visual-refresh']\n        )}\n        onMouseDown={event => {\n          if (event.button !== 0) {\n            return;\n          }\n          event.preventDefault();\n          setIsDragging(true);\n        }}\n        onClick={() => {\n          // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.\n          setIsDragging(false);\n          setResizerHasFocus(true);\n          setIsKeyboardDragging(true);\n          resizerSeparatorRef.current?.focus();\n        }}\n        onFocus={() => {\n          setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n          setResizerHasFocus(true);\n        }}\n        onBlur={event => {\n          // Ignoring blur event when focus moves to the resizer separator element.\n          // (This focus transition is done programmatically when the resizer button is clicked).\n          if (event.relatedTarget !== resizerSeparatorRef.current) {\n            setResizerHasFocus(false);\n          }\n        }}\n        // Using a custom role-description to make the element's purpose better clear.\n        // The role-description must include the word \"button\" to imply the interaction model.\n        // See https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription\n        aria-roledescription={roleDescription}\n        aria-labelledby={ariaLabelledby}\n        tabIndex={resizerTabIndex}\n        data-focus-id={focusId}\n      />\n      <span\n        className={clsx(\n          styles['divider-interactive'],\n          isDragging && styles['divider-active'],\n          isVisualRefresh && styles['is-visual-refresh']\n        )}\n        data-awsui-table-suppress-navigation={true}\n        ref={resizerSeparatorRef}\n        id={separatorId}\n        role=\"slider\"\n        tabIndex={-1}\n        aria-labelledby={ariaLabelledby}\n        aria-hidden={!isKeyboardDragging}\n        aria-valuemin={minWidth}\n        // aria-valuemax is needed because the slider is inoperable in VoiceOver without it\n        aria-valuemax={Number.MAX_SAFE_INTEGER}\n        aria-valuenow={headerCellWidth}\n        data-focus-id={focusId}\n        onBlur={() => {\n          setResizerHasFocus(false);\n          if (isKeyboardDragging) {\n            setIsKeyboardDragging(false);\n          }\n          onWidthUpdateCommit();\n        }}\n      />\n    </>\n  );\n}\n\nexport function ResizeTracker() {\n  return <span className={styles.tracker} />;\n}\n"]}
+{"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 React, { useCallback, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getIsRtl, getLogicalBoundingClientRect, getLogicalPageX } from '@cloudscape-design/component-toolkit/internal';\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport DragHandleWrapper from '../../internal/components/drag-handle-wrapper';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { KeyCode } from '../../internal/keycode';\nimport handleKey, { isEventLike } from '../../internal/utils/handle-key';\nimport { scrollElementIntoView } from '../../internal/utils/scrollable-containers';\nimport { DEFAULT_COLUMN_WIDTH } from '../use-column-widths';\nimport { getHeaderWidth, getResizerElements } from './resizer-lookup';\n\nimport styles from './styles.css.js';\n\ninterface ResizerProps {\n  onWidthUpdate: (newWidth: number) => void;\n  onWidthUpdateCommit: () => void;\n  ariaLabelledby?: string;\n  minWidth?: number;\n  tabIndex?: number;\n  focusId?: string;\n  showFocusRing?: boolean;\n  roleDescription?: string;\n  tooltipText?: string;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Divider({ className }: { className?: string }) {\n  return <span className={clsx(styles.divider, styles['divider-disabled'], className)} />;\n}\n\nexport function Resizer({\n  onWidthUpdate,\n  onWidthUpdateCommit,\n  ariaLabelledby,\n  minWidth = DEFAULT_COLUMN_WIDTH,\n  tabIndex,\n  showFocusRing,\n  focusId,\n  roleDescription,\n  tooltipText,\n}: ResizerProps) {\n  onWidthUpdate = useStableCallback(onWidthUpdate);\n  onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const separatorId = useUniqueId();\n  const positioningWrapperRef = useRef<HTMLDivElement | null>(null);\n  const resizerToggleRef = useRef<HTMLButtonElement | null>(null);\n  const resizerSeparatorRef = useRef<HTMLSpanElement | null>(null);\n\n  const [isPointerDown, setIsPointerDown] = useState(false);\n  const [isDragging, setIsDragging] = useState(false);\n  const [showUapButtons, setShowUapButtons] = useState(false);\n  const [resizerObscured, setResizerObscured] = useState(false);\n  const [isKeyboardDragging, setIsKeyboardDragging] = useState(false);\n  const autoGrowTimeout = useRef<ReturnType<typeof setTimeout> | undefined>();\n  const [resizerHasFocus, setResizerHasFocus] = useState(false);\n  const [headerCellWidth, setHeaderCellWidth] = useState(0);\n\n  // Read header width after mounting for it to be available in the element's ARIA label before it gets focused.\n  useEffect(() => {\n    setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n  }, []);\n\n  const isObscured = useCallback(() => {\n    const elements = getResizerElements(resizerToggleRef.current);\n    if (!elements || !positioningWrapperRef.current) {\n      return false;\n    }\n\n    let scrollPaddingInlineStart = 0;\n    let scrollPaddingInlineEnd = 0;\n\n    // Calculate size of the headers at the exact moment of the call to deal\n    // with auto-width columns and cached sticky column state.\n    elements.allHeaders.forEach(header => {\n      const { inlineSize } = getLogicalBoundingClientRect(header);\n      if (header.style.insetInlineStart) {\n        scrollPaddingInlineStart += inlineSize;\n      }\n      if (header.style.insetInlineEnd) {\n        scrollPaddingInlineEnd += inlineSize;\n      }\n    });\n\n    const { insetInlineStart: scrollParentInsetInlineStart, insetInlineEnd: scrollParentInsetInlineEnd } =\n      getLogicalBoundingClientRect(elements.scrollParent);\n    const { insetInlineStart, insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);\n    const relativeInsetInlineStart = insetInlineStart - scrollParentInsetInlineStart;\n    const relativeInsetInlineEnd = scrollParentInsetInlineEnd - insetInlineEnd;\n    const isSticky = !!elements.header.style.insetInlineStart || !!elements.header.style.insetInlineEnd;\n\n    return (\n      // Is positioningWrapper obscured behind the left edge of scrollParent?\n      Math.ceil(relativeInsetInlineStart + inlineSize) < (isSticky ? 0 : scrollPaddingInlineStart) ||\n      // Is positioningWrapper obscured behind the right edge of scrollParent?\n      Math.ceil(relativeInsetInlineEnd) < (isSticky ? 0 : scrollPaddingInlineEnd)\n    );\n  }, []);\n\n  const scrollIntoViewIfNeeded = useCallback(() => {\n    if (resizerSeparatorRef.current && isObscured()) {\n      scrollElementIntoView(resizerSeparatorRef.current);\n    }\n  }, [isObscured]);\n\n  useEffect(() => {\n    if (!showUapButtons) {\n      setResizerObscured(false);\n      return;\n    }\n\n    const elements = getResizerElements(resizerToggleRef.current);\n    if (!elements) {\n      return;\n    }\n\n    const onScroll = () => setResizerObscured(isObscured());\n    elements.scrollParent.addEventListener('scroll', onScroll);\n    return () => elements.scrollParent.removeEventListener('scroll', onScroll);\n  }, [isObscured, showUapButtons]);\n\n  useEffect(() => {\n    if (showUapButtons) {\n      setResizerObscured(isObscured());\n    }\n  }, [headerCellWidth, isObscured, showUapButtons]);\n\n  const updateTrackerPosition = useCallback((newOffset: number) => {\n    const elements = getResizerElements(resizerToggleRef.current);\n    if (!elements) {\n      return;\n    }\n\n    const { insetInlineStart: scrollParentInsetInlineStart } = getLogicalBoundingClientRect(elements.table);\n    elements.tracker.style.insetBlockStart = getLogicalBoundingClientRect(elements.header).blockSize + 'px';\n    // minus one pixel to offset the cell border\n    elements.tracker.style.insetInlineStart = newOffset - scrollParentInsetInlineStart - 1 + 'px';\n  }, []);\n\n  const updateColumnWidth = useCallback(\n    (newWidth: number) => {\n      const elements = getResizerElements(resizerToggleRef.current);\n      if (!elements) {\n        return;\n      }\n\n      const { insetInlineEnd, inlineSize } = getLogicalBoundingClientRect(elements.header);\n      const updatedWidth = newWidth < minWidth ? minWidth : newWidth;\n      updateTrackerPosition(insetInlineEnd + updatedWidth - inlineSize);\n      setHeaderCellWidth(updatedWidth);\n\n      // callbacks must be the last calls in the handler, because they may cause an extra update\n      onWidthUpdate(newWidth);\n    },\n    [minWidth, onWidthUpdate, updateTrackerPosition]\n  );\n\n  const resizeColumn = useCallback(\n    (offset: number) => {\n      const elements = getResizerElements(resizerToggleRef.current);\n      if (!elements) {\n        return;\n      }\n\n      const { insetInlineStart: inlineStartEdge } = getLogicalBoundingClientRect(elements.scrollParent);\n      if (offset > inlineStartEdge) {\n        const cellLeft = getLogicalBoundingClientRect(elements.header).insetInlineStart;\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    [updateColumnWidth]\n  );\n\n  useEffect(() => {\n    const elements = getResizerElements(resizerToggleRef.current);\n    const document = resizerToggleRef.current?.ownerDocument ?? window.document;\n\n    if ((!isPointerDown && !resizerHasFocus) || !elements) {\n      return;\n    }\n\n    const { insetInlineEnd: inlineEndEdge } = getLogicalBoundingClientRect(elements.scrollParent);\n\n    const onAutoGrow = () => {\n      const inlineSize = getLogicalBoundingClientRect(elements.header).inlineSize;\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(inlineSize + AUTO_GROW_INCREMENT);\n      elements.scrollParent.scrollLeft += AUTO_GROW_INCREMENT * (getIsRtl(elements.scrollParent) ? -1 : 1);\n    };\n\n    const onPointerMove = (event: PointerEvent) => {\n      setIsDragging(true);\n      clearTimeout(autoGrowTimeout.current);\n      const offset = getLogicalPageX(event);\n      if (offset > inlineEndEdge) {\n        autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);\n      } else {\n        resizeColumn(offset);\n      }\n    };\n\n    const onPointerUp = (event: PointerEvent) => {\n      setIsPointerDown(false);\n      if (isDragging) {\n        setIsDragging(false);\n        resizeColumn(getLogicalPageX(event));\n      } else {\n        setShowUapButtons(true);\n      }\n      onWidthUpdateCommit();\n      clearTimeout(autoGrowTimeout.current);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (isKeyboardDragging) {\n        const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.right, KeyCode.space, KeyCode.escape];\n\n        if (keys.indexOf(event.keyCode) !== -1) {\n          event.preventDefault();\n\n          if (isEventLike(event)) {\n            handleKey(event, {\n              onActivate: () => {\n                setIsKeyboardDragging(false);\n                setShowUapButtons(false);\n                resizerToggleRef.current?.focus();\n              },\n              onEscape: () => {\n                setIsKeyboardDragging(false);\n                setShowUapButtons(false);\n                resizerToggleRef.current?.focus();\n              },\n              onInlineStart: () => {\n                updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 10);\n                scrollIntoViewIfNeeded();\n              },\n              onInlineEnd: () => {\n                updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 10);\n                scrollIntoViewIfNeeded();\n              },\n            });\n          }\n        }\n      } else {\n        if (event.keyCode === KeyCode.enter || event.keyCode === KeyCode.space) {\n          // Enter keyboard dragging mode\n          event.preventDefault();\n\n          if (isEventLike(event)) {\n            handleKey(event, {\n              onActivate: () => {\n                setShowUapButtons(true);\n                setIsKeyboardDragging(true);\n                resizerSeparatorRef.current?.focus();\n              },\n            });\n          }\n        } else {\n          // Showing the UAP buttons when the button is only focused and not activated\n          // gives a false impression that you can resize with the arrow keys.\n          setShowUapButtons(false);\n        }\n      }\n    };\n\n    updateTrackerPosition(getLogicalBoundingClientRect(elements.header).insetInlineEnd);\n    const controller = new AbortController();\n\n    if (isPointerDown) {\n      document.body.classList.add(styles['resize-active']);\n      document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });\n      document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });\n    } else if (resizerHasFocus) {\n      document.body.classList.add(styles['resize-active-with-focus']);\n      elements.header.addEventListener('keydown', onKeyDown, { signal: controller.signal });\n    }\n    if (isKeyboardDragging) {\n      document.body.classList.add(styles['resize-active']);\n    }\n\n    return () => {\n      document.body.classList.remove(styles['resize-active']);\n      document.body.classList.remove(styles['resize-active-with-focus']);\n      controller.abort();\n    };\n  }, [\n    isDragging,\n    isKeyboardDragging,\n    isPointerDown,\n    resizerHasFocus,\n    scrollIntoViewIfNeeded,\n    onWidthUpdateCommit,\n    resizeColumn,\n    updateColumnWidth,\n    updateTrackerPosition,\n  ]);\n\n  useEffect(() => {\n    if (isDragging) {\n      return () => clearTimeout(autoGrowTimeout.current);\n    }\n  }, [isDragging]);\n\n  const { tabIndex: resizerTabIndex } = useSingleTabStopNavigation(resizerToggleRef, { tabIndex });\n\n  return (\n    <div\n      className={clsx(styles['resizer-wrapper'], isVisualRefresh && styles['is-visual-refresh'])}\n      ref={positioningWrapperRef}\n    >\n      <DragHandleWrapper\n        clickDragThreshold={3}\n        hideButtonsOnDrag={false}\n        directions={{\n          'inline-start': resizerObscured ? undefined : headerCellWidth > minWidth ? 'active' : 'disabled',\n          'inline-end': resizerObscured ? undefined : 'active',\n        }}\n        triggerMode=\"controlled\"\n        controlledShowButtons={showUapButtons && !resizerObscured}\n        wrapperClassName={styles['resizer-button-wrapper']}\n        tooltipText={tooltipText}\n        data-obscured={resizerObscured}\n        onDirectionClick={direction => {\n          const elements = getResizerElements(resizerToggleRef.current);\n          if (!elements) {\n            return;\n          }\n\n          if (direction === 'inline-start') {\n            updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize - 20);\n            requestAnimationFrame(() => {\n              onWidthUpdateCommit();\n              scrollIntoViewIfNeeded();\n            });\n          } else if (direction === 'inline-end') {\n            updateColumnWidth(getLogicalBoundingClientRect(elements.header).inlineSize + 20);\n            requestAnimationFrame(() => {\n              onWidthUpdateCommit();\n              scrollIntoViewIfNeeded();\n            });\n          }\n        }}\n      >\n        <button\n          ref={resizerToggleRef}\n          className={clsx(\n            styles.resizer,\n            (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'],\n            isVisualRefresh && styles['is-visual-refresh']\n          )}\n          onPointerDown={event => {\n            if (event.pointerType === 'mouse' && event.button !== 0) {\n              return;\n            }\n            setIsPointerDown(true);\n          }}\n          onClick={() => {\n            // Prevent mouse drag activation and activate keyboard dragging for VO+Space click.\n            setIsPointerDown(false);\n            setIsDragging(false);\n            setShowUapButtons(true);\n            setResizerHasFocus(true);\n            setIsKeyboardDragging(true);\n            resizerSeparatorRef.current?.focus();\n          }}\n          onFocus={() => {\n            setHeaderCellWidth(getHeaderWidth(resizerToggleRef.current));\n            setResizerHasFocus(true);\n          }}\n          onBlur={event => {\n            // Ignoring blur event when focus moves to the resizer separator element.\n            // (This focus transition is done programmatically when the resizer button is clicked).\n            if (event.relatedTarget !== resizerSeparatorRef.current) {\n              setResizerHasFocus(false);\n              setShowUapButtons(false);\n              return;\n            }\n          }}\n          // Using a custom role-description to make the element's purpose better clear.\n          // The role-description must include the word \"button\" to imply the interaction model.\n          // See https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription\n          aria-roledescription={roleDescription}\n          aria-labelledby={ariaLabelledby}\n          tabIndex={resizerTabIndex}\n          data-focus-id={focusId}\n        />\n        <span\n          className={clsx(\n            styles['divider-interactive'],\n            (isPointerDown || isDragging) && styles['divider-active'],\n            isVisualRefresh && styles['is-visual-refresh']\n          )}\n          data-awsui-table-suppress-navigation={true}\n          ref={resizerSeparatorRef}\n          id={separatorId}\n          role=\"slider\"\n          tabIndex={-1}\n          aria-labelledby={ariaLabelledby}\n          aria-hidden={!isKeyboardDragging}\n          aria-valuemin={minWidth}\n          // aria-valuemax is needed because the slider is inoperable in VoiceOver without it\n          aria-valuemax={Number.MAX_SAFE_INTEGER}\n          aria-valuenow={headerCellWidth}\n          data-focus-id={focusId}\n          onBlur={event => {\n            setIsKeyboardDragging(false);\n            if (event.relatedTarget !== resizerToggleRef.current) {\n              setResizerHasFocus(false);\n              setShowUapButtons(false);\n            }\n            onWidthUpdateCommit();\n          }}\n        />\n      </DragHandleWrapper>\n    </div>\n  );\n}\n\nexport function ResizeTracker() {\n  return <span className={styles.tracker} />;\n}\n"]}

package/lib/internal/template/table/resizer/resizer-lookup.d.ts

@@ -1,6 +1,7 @@
 export declare function getResizerElements(resizerElement: null | HTMLElement): {
     header: HTMLElement;
-    table: HTMLElement;
+    table: HTMLTableElement;
+    allHeaders: NodeListOf<HTMLTableCellElement>;
     tracker: HTMLElement;
     scrollParent: HTMLElement;
 } | null;

package/lib/internal/template/table/resizer/resizer-lookup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizer-lookup.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/resizer-lookup.ts"],"names":[],"mappings":"AAWA,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,IAAI,GAAG,WAAW;;;;;SAgCpE;AAED,wBAAgB,cAAc,CAAC,cAAc,EAAE,IAAI,GAAG,WAAW,GAAG,MAAM,CAGzE"}
+{"version":3,"file":"resizer-lookup.d.ts","sourceRoot":"","sources":["../../../../src/table/resizer/resizer-lookup.ts"],"names":[],"mappings":"AAWA,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,IAAI,GAAG,WAAW;;;;;;SAkCpE;AAED,wBAAgB,cAAc,CAAC,cAAc,EAAE,IAAI,GAAG,WAAW,GAAG,MAAM,CAGzE"}

package/lib/internal/template/table/resizer/resizer-lookup.js

@@ -9,7 +9,7 @@ export function getResizerElements(resizerElement) {
     if (!resizerElement) {
         return null;
     }
-    const header = findUpUntil(resizerElement, element => element.tagName.toLowerCase() === 'th');
+    const header = findUpUntil(resizerElement, element => element.tagName === 'TH');
     if (!header) {
         return null;
     }
@@ -21,6 +21,7 @@ export function getResizerElements(resizerElement) {
     if (!table) {
         return null;
     }
+    const allHeaders = tableRoot.querySelectorAll(`thead th`);
     // tracker is rendered inside table wrapper to align with its size
     const tracker = tableRoot.querySelector(`.${resizerStyles.tracker}`);
     if (!tracker) {
@@ -30,7 +31,7 @@ export function getResizerElements(resizerElement) {
     if (!scrollParent) {
         return null;
     }
-    return { header, table, tracker, scrollParent };
+    return { header, table, allHeaders, tracker, scrollParent };
 }
 export function getHeaderWidth(resizerElement) {
     const header = resizerElement && findUpUntil(resizerElement, element => element.tagName.toLowerCase() === 'th');

package/lib/internal/template/table/resizer/resizer-lookup.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizer-lookup.js","sourceRoot":"","sources":["../../../../src/table/resizer/resizer-lookup.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AAEnF,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,MAAM,UAAU,kBAAkB,CAAC,cAAkC;IACnE,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;IAC9F,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnG,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAc,OAAO,CAAC,CAAC;IAC5D,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,kEAAkE;IAClE,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAc,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;IAClF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,cAAkC;IAC/D,MAAM,MAAM,GAAG,cAAc,IAAI,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;IAChH,OAAO,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers.js';\n\nimport tableStyles from '../styles.css.js';\nimport resizerStyles from './styles.css.js';\n\nexport function getResizerElements(resizerElement: null | HTMLElement) {\n  if (!resizerElement) {\n    return null;\n  }\n\n  const header = findUpUntil(resizerElement, element => element.tagName.toLowerCase() === 'th');\n  if (!header) {\n    return null;\n  }\n\n  const tableRoot = findUpUntil(header, element => element.className.indexOf(tableStyles.root) > -1);\n  if (!tableRoot) {\n    return null;\n  }\n\n  const table = tableRoot.querySelector<HTMLElement>(`table`);\n  if (!table) {\n    return null;\n  }\n\n  // tracker is rendered inside table wrapper to align with its size\n  const tracker = tableRoot.querySelector<HTMLElement>(`.${resizerStyles.tracker}`);\n  if (!tracker) {\n    return null;\n  }\n\n  const scrollParent = getOverflowParents(header)[0];\n  if (!scrollParent) {\n    return null;\n  }\n\n  return { header, table, tracker, scrollParent };\n}\n\nexport function getHeaderWidth(resizerElement: null | HTMLElement): number {\n  const header = resizerElement && findUpUntil(resizerElement, element => element.tagName.toLowerCase() === 'th');\n  return header ? getLogicalBoundingClientRect(header).inlineSize : 0;\n}\n"]}
+{"version":3,"file":"resizer-lookup.js","sourceRoot":"","sources":["../../../../src/table/resizer/resizer-lookup.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,kBAAkB,EAAE,MAAM,+CAA+C,CAAC;AAEnF,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,MAAM,UAAU,kBAAkB,CAAC,cAAkC;IACnE,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,MAAM,GAAG,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC;IAChF,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACnG,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAmB,OAAO,CAAC,CAAC;IACjE,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,MAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAuB,UAAU,CAAC,CAAC;IAEhF,kEAAkE;IAClE,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAc,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;IAClF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,MAAM,YAAY,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,YAAY,EAAE;QACjB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AAC9D,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,cAAkC;IAC/D,MAAM,MAAM,GAAG,cAAc,IAAI,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;IAChH,OAAO,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getOverflowParents } from '../../internal/utils/scrollable-containers.js';\n\nimport tableStyles from '../styles.css.js';\nimport resizerStyles from './styles.css.js';\n\nexport function getResizerElements(resizerElement: null | HTMLElement) {\n  if (!resizerElement) {\n    return null;\n  }\n\n  const header = findUpUntil(resizerElement, element => element.tagName === 'TH');\n  if (!header) {\n    return null;\n  }\n\n  const tableRoot = findUpUntil(header, element => element.className.indexOf(tableStyles.root) > -1);\n  if (!tableRoot) {\n    return null;\n  }\n\n  const table = tableRoot.querySelector<HTMLTableElement>(`table`);\n  if (!table) {\n    return null;\n  }\n\n  const allHeaders = tableRoot.querySelectorAll<HTMLTableCellElement>(`thead th`);\n\n  // tracker is rendered inside table wrapper to align with its size\n  const tracker = tableRoot.querySelector<HTMLElement>(`.${resizerStyles.tracker}`);\n  if (!tracker) {\n    return null;\n  }\n\n  const scrollParent = getOverflowParents(header)[0];\n  if (!scrollParent) {\n    return null;\n  }\n\n  return { header, table, allHeaders, tracker, scrollParent };\n}\n\nexport function getHeaderWidth(resizerElement: null | HTMLElement): number {\n  const header = resizerElement && findUpUntil(resizerElement, element => element.tagName.toLowerCase() === 'th');\n  return header ? getLogicalBoundingClientRect(header).inlineSize : 0;\n}\n"]}

package/lib/internal/template/table/resizer/styles.css.js

@@ -1,17 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "resize-active": "awsui_resize-active_x7peu_1bu3d_145",
-  "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_1bu3d_145",
-  "divider": "awsui_divider_x7peu_1bu3d_150",
-  "divider-interactive": "awsui_divider-interactive_x7peu_1bu3d_151",
-  "divider-disabled": "awsui_divider-disabled_x7peu_1bu3d_165",
-  "divider-interactive-disabled": "awsui_divider-interactive-disabled_x7peu_1bu3d_166",
-  "divider-active": "awsui_divider-active_x7peu_1bu3d_169",
-  "divider-interactive-active": "awsui_divider-interactive-active_x7peu_1bu3d_170",
-  "is-visual-refresh": "awsui_is-visual-refresh_x7peu_1bu3d_174",
-  "resizer": "awsui_resizer_x7peu_1bu3d_178",
-  "has-focus": "awsui_has-focus_x7peu_1bu3d_228",
-  "tracker": "awsui_tracker_x7peu_1bu3d_257"
+  "resize-active": "awsui_resize-active_x7peu_8ay32_145",
+  "resize-active-with-focus": "awsui_resize-active-with-focus_x7peu_8ay32_145",
+  "resizer-wrapper": "awsui_resizer-wrapper_x7peu_8ay32_150",
+  "divider-interactive": "awsui_divider-interactive_x7peu_8ay32_158",
+  "is-visual-refresh": "awsui_is-visual-refresh_x7peu_8ay32_158",
+  "resizer-button-wrapper": "awsui_resizer-button-wrapper_x7peu_8ay32_162",
+  "divider": "awsui_divider_x7peu_8ay32_158",
+  "divider-disabled": "awsui_divider-disabled_x7peu_8ay32_182",
+  "divider-active": "awsui_divider-active_x7peu_8ay32_190",
+  "resizer": "awsui_resizer_x7peu_8ay32_150",
+  "has-focus": "awsui_has-focus_x7peu_8ay32_242",
+  "tracker": "awsui_tracker_x7peu_8ay32_268"
 };