@cloudscape-design/components 3.0.220 → 3.0.222

package/table/resizer/index.js

@@ -9,60 +9,59 @@ import tableStyles from '../styles.css.js';
 import styles from './styles.css.js';
 import { KeyCode } from '../../internal/keycode';
 import { DEFAULT_WIDTH } from '../use-column-widths';
-var AUTO_GROW_START_TIME = 10;
-var AUTO_GROW_INTERVAL = 10;
-var AUTO_GROW_INCREMENT = 5;
-export function Resizer(_a) {
-    var onDragMove = _a.onDragMove, onFinish = _a.onFinish, ariaLabelledby = _a.ariaLabelledby, _b = _a.minWidth, minWidth = _b === void 0 ? DEFAULT_WIDTH : _b;
-    var _c = useState(false), isDragging = _c[0], setIsDragging = _c[1];
-    var _d = useState(), headerCell = _d[0], setHeaderCell = _d[1];
-    var autoGrowTimeout = useRef();
-    var onFinishStable = useStableEventHandler(onFinish);
-    var onDragStable = useStableEventHandler(onDragMove);
-    var _e = useState(false), resizerHasFocus = _e[0], setResizerHasFocus = _e[1];
-    var _f = useState(0), headerCellWidth = _f[0], setHeaderCellWidth = _f[1];
-    useEffect(function () {
+const AUTO_GROW_START_TIME = 10;
+const AUTO_GROW_INTERVAL = 10;
+const AUTO_GROW_INCREMENT = 5;
+export function Resizer({ onDragMove, onFinish, ariaLabelledby, minWidth = DEFAULT_WIDTH, tabIndex, showFocusRing, onFocus, onBlur, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const [headerCell, setHeaderCell] = useState();
+    const autoGrowTimeout = useRef();
+    const onFinishStable = useStableEventHandler(onFinish);
+    const onDragStable = useStableEventHandler(onDragMove);
+    const [resizerHasFocus, setResizerHasFocus] = useState(false);
+    const [headerCellWidth, setHeaderCellWidth] = useState(0);
+    useEffect(() => {
         if ((!isDragging && !resizerHasFocus) || !headerCell) {
             return;
         }
-        var rootElement = findUpUntil(headerCell, function (element) { return element.className.indexOf(tableStyles.root) > -1; });
-        var tableElement = rootElement.querySelector("table");
+        const rootElement = findUpUntil(headerCell, element => element.className.indexOf(tableStyles.root) > -1);
+        const tableElement = rootElement.querySelector(`table`);
         // tracker is rendered inside table wrapper to align with its size
-        var tracker = rootElement.querySelector(".".concat(styles.tracker));
-        var scrollParent = getOverflowParents(headerCell)[0];
-        var _a = scrollParent.getBoundingClientRect(), leftEdge = _a.left, rightEdge = _a.right;
-        var updateTrackerPosition = function (newOffset) {
-            var scrollParentLeft = tableElement.getBoundingClientRect().left;
+        const tracker = rootElement.querySelector(`.${styles.tracker}`);
+        const scrollParent = getOverflowParents(headerCell)[0];
+        const { left: leftEdge, right: rightEdge } = scrollParent.getBoundingClientRect();
+        const updateTrackerPosition = (newOffset) => {
+            const { left: scrollParentLeft } = tableElement.getBoundingClientRect();
             tracker.style.top = headerCell.getBoundingClientRect().height + 'px';
             // minus one pixel to offset the cell border
             tracker.style.left = newOffset - scrollParentLeft - 1 + 'px';
         };
-        var updateColumnWidth = function (newWidth) {
-            var _a = headerCell.getBoundingClientRect(), right = _a.right, width = _a.width;
-            var updatedWidth = newWidth < minWidth ? minWidth : newWidth;
+        const updateColumnWidth = (newWidth) => {
+            const { right, width } = headerCell.getBoundingClientRect();
+            const updatedWidth = newWidth < minWidth ? minWidth : newWidth;
             updateTrackerPosition(right + updatedWidth - width);
             setHeaderCellWidth(newWidth);
             // callbacks must be the last calls in the handler, because they may cause an extra update
             onDragStable(newWidth);
         };
-        var resizeColumn = function (offset) {
+        const resizeColumn = (offset) => {
             if (offset > leftEdge) {
-                var cellLeft = headerCell.getBoundingClientRect().left;
-                var newWidth = offset - cellLeft;
+                const cellLeft = headerCell.getBoundingClientRect().left;
+                const newWidth = offset - cellLeft;
                 // callbacks must be the last calls in the handler, because they may cause an extra update
                 updateColumnWidth(newWidth);
             }
         };
-        var onAutoGrow = function () {
-            var width = headerCell.getBoundingClientRect().width;
+        const onAutoGrow = () => {
+            const width = headerCell.getBoundingClientRect().width;
             autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_INTERVAL);
             // callbacks must be the last calls in the handler, because they may cause an extra update
             updateColumnWidth(width + AUTO_GROW_INCREMENT);
             scrollParent.scrollLeft += AUTO_GROW_INCREMENT;
         };
-        var onMouseMove = function (event) {
+        const onMouseMove = (event) => {
             clearTimeout(autoGrowTimeout.current);
-            var offset = event.pageX;
+            const offset = event.pageX;
             if (offset > rightEdge) {
                 autoGrowTimeout.current = setTimeout(onAutoGrow, AUTO_GROW_START_TIME);
             }
@@ -70,13 +69,13 @@ export function Resizer(_a) {
                 resizeColumn(offset);
             }
         };
-        var onMouseUp = function (event) {
+        const onMouseUp = (event) => {
             resizeColumn(event.pageX);
             setIsDragging(false);
             onFinishStable();
             clearTimeout(autoGrowTimeout.current);
         };
-        var onKeyDown = function (event) {
+        const onKeyDown = (event) => {
             // prevent screenreader cursor move
             if (event.keyCode === KeyCode.left || event.keyCode === KeyCode.right) {
                 event.preventDefault();
@@ -100,7 +99,7 @@ export function Resizer(_a) {
             document.body.classList.add(styles['resize-active-with-focus']);
             headerCell.addEventListener('keydown', onKeyDown);
         }
-        return function () {
+        return () => {
             clearTimeout(autoGrowTimeout.current);
             document.body.classList.remove(styles['resize-active']);
             document.removeEventListener('mousemove', onMouseMove);
@@ -108,22 +107,24 @@ export function Resizer(_a) {
             headerCell.removeEventListener('keydown', onKeyDown);
         };
     }, [headerCell, isDragging, onDragStable, onFinishStable, resizerHasFocus, minWidth]);
-    return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active'], resizerHasFocus && styles['has-focus']), onMouseDown: function (event) {
+    return (React.createElement("span", { className: clsx(styles.resizer, isDragging && styles['resizer-active'], (resizerHasFocus || showFocusRing) && styles['has-focus']), onMouseDown: event => {
             if (event.button !== 0) {
                 return;
             }
             event.preventDefault();
-            var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
+            const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
             setIsDragging(true);
             setHeaderCell(headerCell);
-        }, onFocus: function (event) {
-            var headerCell = findUpUntil(event.currentTarget, function (element) { return element.tagName.toLowerCase() === 'th'; });
+        }, onFocus: event => {
+            const headerCell = findUpUntil(event.currentTarget, element => element.tagName.toLowerCase() === 'th');
             setHeaderCellWidth(headerCell.getBoundingClientRect().width);
             setResizerHasFocus(true);
             setHeaderCell(headerCell);
-        }, onBlur: function () {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        }, onBlur: () => {
             setResizerHasFocus(false);
-        }, role: "separator", "aria-orientation": "vertical", "aria-labelledby": ariaLabelledby, "aria-valuenow": headerCellWidth, "aria-valuetext": headerCellWidth.toString(), "aria-valuemin": minWidth, tabIndex: 0 }));
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+        }, role: "separator", "aria-orientation": "vertical", "aria-labelledby": ariaLabelledby, "aria-valuenow": headerCellWidth, "aria-valuetext": headerCellWidth.toString(), "aria-valuemin": minWidth, tabIndex: tabIndex }));
 }
 export function ResizeTracker() {
     return React.createElement("span", { className: styles.tracker });

package/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 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"]}
+{"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  tabIndex?: number;\n\n  showFocusRing?: boolean;\n  onFocus?: () => void;\n  onBlur?: () => void;\n}\n\nconst AUTO_GROW_START_TIME = 10;\nconst AUTO_GROW_INTERVAL = 10;\nconst AUTO_GROW_INCREMENT = 5;\n\nexport function Resizer({\n  onDragMove,\n  onFinish,\n  ariaLabelledby,\n  minWidth = DEFAULT_WIDTH,\n  tabIndex,\n  showFocusRing,\n  onFocus,\n  onBlur,\n}: 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(\n        styles.resizer,\n        isDragging && styles['resizer-active'],\n        (resizerHasFocus || showFocusRing) && styles['has-focus']\n      )}\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        onFocus?.();\n      }}\n      onBlur={() => {\n        setResizerHasFocus(false);\n        onBlur?.();\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={tabIndex}\n    />\n  );\n}\n\nexport function ResizeTracker() {\n  return <span className={styles.tracker} />;\n}\n"]}

package/table/selection-control/index.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEventHandler } from 'react';
 import { TableProps } from '../interfaces';
+import { InteractiveComponent } from '../thead';
 export interface SelectionControlProps {
     selectionType: TableProps['selectionType'];
     checked: boolean;
@@ -12,6 +13,8 @@ export interface SelectionControlProps {
     onFocusDown?: KeyboardEventHandler;
     ariaLabel?: string;
     tabIndex?: -1;
+    focusedComponent?: InteractiveComponent | null;
+    onFocusedComponentChange?: (element: InteractiveComponent | null) => void;
 }
-export default function SelectionControl({ selectionType, indeterminate, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, ...sharedProps }: SelectionControlProps): JSX.Element;
+export default function SelectionControl({ selectionType, indeterminate, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, focusedComponent, onFocusedComponentChange, ...sharedProps }: SelectionControlProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/table/selection-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/selection-control/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,WAAW,EACf,EAAE,qBAAqB,eAoEvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table/selection-control/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAiB,oBAAoB,EAAc,MAAM,OAAO,CAAC;AAM/E,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAEd,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EAET,gBAAgB,EAChB,wBAAwB,EACxB,GAAG,WAAW,EACf,EAAE,qBAAqB,eA2EvB"}

package/table/selection-control/index.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -9,15 +9,15 @@ import InternalCheckbox from '../../checkbox/internal';
 import RadioButton from '../../radio-group/radio-button';
 import styles from './styles.css.js';
 export default function SelectionControl(_a) {
-    var selectionType = _a.selectionType, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onShiftToggle = _a.onShiftToggle, onFocusUp = _a.onFocusUp, onFocusDown = _a.onFocusDown, name = _a.name, ariaLabel = _a.ariaLabel, sharedProps = __rest(_a, ["selectionType", "indeterminate", "onShiftToggle", "onFocusUp", "onFocusDown", "name", "ariaLabel"]);
-    var controlId = useUniqueId();
-    var isMultiSelection = selectionType === 'multi';
-    var setShiftState = function (event) {
+    var { selectionType, indeterminate = false, onShiftToggle, onFocusUp, onFocusDown, name, ariaLabel, focusedComponent, onFocusedComponentChange } = _a, sharedProps = __rest(_a, ["selectionType", "indeterminate", "onShiftToggle", "onFocusUp", "onFocusDown", "name", "ariaLabel", "focusedComponent", "onFocusedComponentChange"]);
+    const controlId = useUniqueId();
+    const isMultiSelection = selectionType === 'multi';
+    const setShiftState = (event) => {
         if (isMultiSelection) {
             onShiftToggle && onShiftToggle(event.shiftKey);
         }
     };
-    var onMouseDownHandler = function (event) {
+    const onMouseDownHandler = (event) => {
         setShiftState(event);
         if (isMultiSelection) {
             // To overcome an issue
@@ -27,7 +27,7 @@ export default function SelectionControl(_a) {
         }
     };
     // native checkboxes do not have focus move via keyboard, we implement it here programmatically
-    var handleKeyDown = function (event) {
+    const handleKeyDown = (event) => {
         setShiftState(event);
         if (isMultiSelection) {
             if (event.keyCode === KeyCode.up) {
@@ -40,13 +40,13 @@ export default function SelectionControl(_a) {
             }
         }
     };
-    var handleClick = function (event) {
-        var target = event.currentTarget;
-        var nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input'));
+    const handleClick = (event) => {
+        const target = event.currentTarget;
+        const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input'));
         // Clicking on input, does not focus it on Firefox (AWSUI-11345)
         nativeInput === null || nativeInput === void 0 ? void 0 : nativeInput.focus();
     };
-    var selector = isMultiSelection ? (React.createElement(InternalCheckbox, __assign({}, sharedProps, { controlId: controlId, indeterminate: indeterminate }))) : (React.createElement(RadioButton, __assign({}, sharedProps, { controlId: controlId, name: name, value: '', label: '' })));
+    const selector = isMultiSelection ? (React.createElement(InternalCheckbox, Object.assign({}, sharedProps, { showOutline: (focusedComponent === null || focusedComponent === void 0 ? void 0 : focusedComponent.type) === 'selection', onFocus: () => onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange({ type: 'selection' }), onBlur: () => onFocusedComponentChange === null || onFocusedComponentChange === void 0 ? void 0 : onFocusedComponentChange(null), controlId: controlId, indeterminate: indeterminate }))) : (React.createElement(RadioButton, Object.assign({}, sharedProps, { controlId: controlId, name: name, value: '', label: '' })));
     return (React.createElement(React.Fragment, null,
         React.createElement("label", { onKeyDown: handleKeyDown, onKeyUp: setShiftState, onMouseDown: onMouseDownHandler, onMouseUp: setShiftState, onClick: handleClick, htmlFor: controlId, className: clsx(styles.label, styles.root), "aria-label": ariaLabel }, selector),
         React.createElement("span", { className: clsx(styles.stud), "aria-hidden": true }, "\u00A0")));

package/table/selection-control/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/selection-control/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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../radio-group/radio-button';\n\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\n\nexport interface SelectionControlProps {\n  selectionType: TableProps['selectionType'];\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  indeterminate?: boolean;\n  onChange?: () => void;\n  onShiftToggle?(shiftPressed: boolean): void;\n  onFocusUp?: KeyboardEventHandler;\n  onFocusDown?: KeyboardEventHandler;\n  ariaLabel?: string;\n  tabIndex?: -1;\n}\n\nexport default function SelectionControl({\n  selectionType,\n  indeterminate = false,\n  onShiftToggle,\n  onFocusUp,\n  onFocusDown,\n  name,\n  ariaLabel,\n  ...sharedProps\n}: SelectionControlProps) {\n  const controlId = useUniqueId();\n  const isMultiSelection = selectionType === 'multi';\n\n  const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n    if (isMultiSelection) {\n      onShiftToggle && onShiftToggle(event.shiftKey);\n    }\n  };\n\n  const onMouseDownHandler = (event: MouseEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      // To overcome an issue\n      // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n      event.preventDefault();\n    }\n  };\n\n  // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n  const handleKeyDown = (event: KeyboardEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      if (event.keyCode === KeyCode.up) {\n        event.preventDefault();\n        onFocusUp && onFocusUp(event);\n      }\n      if (event.keyCode === KeyCode.down) {\n        event.preventDefault();\n        onFocusDown && onFocusDown(event);\n      }\n    }\n  };\n\n  const handleClick = (event: MouseEvent) => {\n    const target = event.currentTarget;\n    const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n    // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n    nativeInput?.focus();\n  };\n\n  const selector = isMultiSelection ? (\n    <InternalCheckbox {...sharedProps} controlId={controlId} indeterminate={indeterminate} />\n  ) : (\n    <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} label={''} />\n  );\n\n  return (\n    <>\n      <label\n        onKeyDown={handleKeyDown}\n        onKeyUp={setShiftState}\n        onMouseDown={onMouseDownHandler}\n        onMouseUp={setShiftState}\n        onClick={handleClick}\n        htmlFor={controlId}\n        className={clsx(styles.label, styles.root)}\n        aria-label={ariaLabel}\n      >\n        {selector}\n      </label>\n      {/* HACK: IE11 collapses td's height to 0, if it contains only an absouletely positioned label */}\n      <span className={clsx(styles.stud)} aria-hidden={true}>\n        &nbsp;\n      </span>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/table/selection-control/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, { KeyboardEvent, KeyboardEventHandler, MouseEvent } from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalCheckbox from '../../checkbox/internal';\nimport RadioButton from '../../radio-group/radio-button';\n\nimport { TableProps } from '../interfaces';\nimport styles from './styles.css.js';\nimport { InteractiveComponent } from '../thead';\n\nexport interface SelectionControlProps {\n  selectionType: TableProps['selectionType'];\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  indeterminate?: boolean;\n  onChange?: () => void;\n  onShiftToggle?(shiftPressed: boolean): void;\n  onFocusUp?: KeyboardEventHandler;\n  onFocusDown?: KeyboardEventHandler;\n  ariaLabel?: string;\n  tabIndex?: -1;\n\n  focusedComponent?: InteractiveComponent | null;\n  onFocusedComponentChange?: (element: InteractiveComponent | null) => void;\n}\n\nexport default function SelectionControl({\n  selectionType,\n  indeterminate = false,\n  onShiftToggle,\n  onFocusUp,\n  onFocusDown,\n  name,\n  ariaLabel,\n\n  focusedComponent,\n  onFocusedComponentChange,\n  ...sharedProps\n}: SelectionControlProps) {\n  const controlId = useUniqueId();\n  const isMultiSelection = selectionType === 'multi';\n\n  const setShiftState = (event: KeyboardEvent | MouseEvent) => {\n    if (isMultiSelection) {\n      onShiftToggle && onShiftToggle(event.shiftKey);\n    }\n  };\n\n  const onMouseDownHandler = (event: MouseEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      // To overcome an issue\n      // If you shift+click or ctrl+click on a label for a checkbox, checkbox is not checked.\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=559506\n      event.preventDefault();\n    }\n  };\n\n  // native checkboxes do not have focus move via keyboard, we implement it here programmatically\n  const handleKeyDown = (event: KeyboardEvent) => {\n    setShiftState(event);\n    if (isMultiSelection) {\n      if (event.keyCode === KeyCode.up) {\n        event.preventDefault();\n        onFocusUp && onFocusUp(event);\n      }\n      if (event.keyCode === KeyCode.down) {\n        event.preventDefault();\n        onFocusDown && onFocusDown(event);\n      }\n    }\n  };\n\n  const handleClick = (event: MouseEvent) => {\n    const target = event.currentTarget;\n    const nativeInput = (target.tagName === 'INPUT' ? target : target.querySelector('input')) as HTMLInputElement;\n    // Clicking on input, does not focus it on Firefox (AWSUI-11345)\n    nativeInput?.focus();\n  };\n\n  const selector = isMultiSelection ? (\n    <InternalCheckbox\n      {...sharedProps}\n      showOutline={focusedComponent?.type === 'selection'}\n      onFocus={() => onFocusedComponentChange?.({ type: 'selection' })}\n      onBlur={() => onFocusedComponentChange?.(null)}\n      controlId={controlId}\n      indeterminate={indeterminate}\n    />\n  ) : (\n    <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} label={''} />\n  );\n\n  return (\n    <>\n      <label\n        onKeyDown={handleKeyDown}\n        onKeyUp={setShiftState}\n        onMouseDown={onMouseDownHandler}\n        onMouseUp={setShiftState}\n        onClick={handleClick}\n        htmlFor={controlId}\n        className={clsx(styles.label, styles.root)}\n        aria-label={ariaLabel}\n      >\n        {selector}\n      </label>\n      {/* HACK: IE11 collapses td's height to 0, if it contains only an absouletely positioned label */}\n      <span className={clsx(styles.stud)} aria-hidden={true}>\n        &nbsp;\n      </span>\n    </>\n  );\n}\n"]}

package/table/sticky-header.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { TableProps } from './interfaces';
-import { TheadProps } from './thead';
+import { InteractiveComponent, TheadProps } from './thead';
 export interface StickyHeaderRef {
     scrollToTop(): void;
     scrollToRow(node: null | HTMLElement): void;
-    setFocusedColumn(columnIndex: null | number): void;
+    setFocus(element: InteractiveComponent | null): void;
 }
 interface StickyHeaderProps {
     variant: TableProps.Variant;

package/table/sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK5C,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,IAAI,CAAC;IACpB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC;IAC5C,gBAAgB,CAAC,WAAW,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;CACpD;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC/C,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;;AAED,wBAAwC"}
+{"version":3,"file":"sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAc,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKlE,MAAM,WAAW,eAAe;IAC9B,WAAW,IAAI,IAAI,CAAC;IACpB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;CACtD;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC/C,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;;AAED,wBAAwC"}

package/table/sticky-header.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import clsx from 'clsx';
@@ -9,23 +8,25 @@ import { useStickyHeader } from './use-sticky-header';
 import styles from './styles.css.js';
 import { getVisualContextClassname } from '../internal/components/visual-context';
 export default forwardRef(StickyHeader);
-function StickyHeader(_a, ref) {
-    var _b;
-    var variant = _a.variant, theadProps = _a.theadProps, wrapperRef = _a.wrapperRef, theadRef = _a.theadRef, secondaryWrapperRef = _a.secondaryWrapperRef, onScroll = _a.onScroll, tableRef = _a.tableRef, tableHasHeader = _a.tableHasHeader, contentDensity = _a.contentDensity;
-    var secondaryTheadRef = useRef(null);
-    var secondaryTableRef = useRef(null);
-    var isStuck = useContext(StickyHeaderContext).isStuck;
-    var _c = useState(null), focusedColumn = _c[0], setFocusedColumn = _c[1];
-    var _d = useStickyHeader(tableRef, theadRef, secondaryTheadRef, secondaryTableRef, wrapperRef), scrollToRow = _d.scrollToRow, scrollToTop = _d.scrollToTop;
-    useImperativeHandle(ref, function () { return ({ scrollToTop: scrollToTop, scrollToRow: scrollToRow, setFocusedColumn: setFocusedColumn }); });
-    return (React.createElement("div", { className: clsx(styles['header-secondary'], styles["variant-".concat(variant)], (_b = {},
-            _b[styles.stuck] = isStuck,
-            _b[styles['table-has-header']] = tableHasHeader,
-            _b)), "aria-hidden": true, 
+function StickyHeader({ variant, theadProps, wrapperRef, theadRef, secondaryWrapperRef, onScroll, tableRef, tableHasHeader, contentDensity, }, ref) {
+    const secondaryTheadRef = useRef(null);
+    const secondaryTableRef = useRef(null);
+    const { isStuck } = useContext(StickyHeaderContext);
+    const [focusedComponent, setFocusedComponent] = useState(null);
+    const { scrollToRow, scrollToTop } = useStickyHeader(tableRef, theadRef, secondaryTheadRef, secondaryTableRef, wrapperRef);
+    useImperativeHandle(ref, () => ({
+        scrollToTop,
+        scrollToRow,
+        setFocus: setFocusedComponent,
+    }));
+    return (React.createElement("div", { className: clsx(styles['header-secondary'], styles[`variant-${variant}`], {
+            [styles.stuck]: isStuck,
+            [styles['table-has-header']]: tableHasHeader,
+        }), "aria-hidden": true, 
         // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient
         // to scroll the table horizontally
         tabIndex: -1, ref: secondaryWrapperRef, onScroll: onScroll },
         React.createElement("table", { className: clsx(styles.table, styles['table-layout-fixed'], contentDensity === 'compact' && getVisualContextClassname('compact-table')), role: "table", ref: secondaryTableRef },
-            React.createElement(Thead, __assign({ ref: secondaryTheadRef, sticky: true, stuck: isStuck, showFocusRing: focusedColumn }, theadProps)))));
+            React.createElement(Thead, Object.assign({ ref: secondaryTheadRef, sticky: true, stuck: isStuck, focusedComponent: focusedComponent }, theadProps)))));
 }
 //# sourceMappingURL=sticky-header.js.map

package/table/sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-header.js","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAAqB,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAoBlF,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CACnB,EAUoB,EACpB,GAA+B;;QAV7B,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,mBAAmB,yBAAA,EACnB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,cAAc,oBAAA;IAIhB,IAAM,iBAAiB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,IAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACjD,IAAA,OAAO,GAAK,UAAU,CAAC,mBAAmB,CAAC,QAApC,CAAqC;IAE9C,IAAA,KAAoC,QAAQ,CAAgB,IAAI,CAAC,EAAhE,aAAa,QAAA,EAAE,gBAAgB,QAAiC,CAAC;IAClE,IAAA,KAA+B,eAAe,CAClD,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,CACX,EANO,WAAW,iBAAA,EAAE,WAAW,iBAM/B,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,cAAM,OAAA,CAAC,EAAE,WAAW,aAAA,EAAE,WAAW,aAAA,EAAE,gBAAgB,kBAAA,EAAE,CAAC,EAAhD,CAAgD,CAAC,CAAC;IAEjF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,kBAAW,OAAO,CAAE,CAAC;YACtE,GAAC,MAAM,CAAC,KAAK,IAAG,OAAO;YACvB,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,cAAc;gBAC5C,iBACW,IAAI;QACjB,oFAAoF;QACpF,mCAAmC;QACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,QAAQ;QAElB,+BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,oBAAoB,CAAC,EAC5B,cAAc,KAAK,SAAS,IAAI,yBAAyB,CAAC,eAAe,CAAC,CAC3E,EACD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,iBAAiB;YAEtB,oBAAC,KAAK,aAAC,GAAG,EAAE,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,IAAM,UAAU,EAAI,CACvG,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { TableProps } from './interfaces';\nimport Thead, { TheadProps } from './thead';\nimport { useStickyHeader } from './use-sticky-header';\nimport styles from './styles.css.js';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nexport interface StickyHeaderRef {\n  scrollToTop(): void;\n  scrollToRow(node: null | HTMLElement): void;\n  setFocusedColumn(columnIndex: null | number): void;\n}\n\ninterface StickyHeaderProps {\n  variant: TableProps.Variant;\n  theadProps: TheadProps;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  theadRef: React.RefObject<HTMLTableRowElement>;\n  secondaryWrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n  contentDensity?: 'comfortable' | 'compact';\n  tableHasHeader?: boolean;\n}\n\nexport default forwardRef(StickyHeader);\n\nfunction StickyHeader(\n  {\n    variant,\n    theadProps,\n    wrapperRef,\n    theadRef,\n    secondaryWrapperRef,\n    onScroll,\n    tableRef,\n    tableHasHeader,\n    contentDensity,\n  }: StickyHeaderProps,\n  ref: React.Ref<StickyHeaderRef>\n) {\n  const secondaryTheadRef = useRef<HTMLTableRowElement>(null);\n  const secondaryTableRef = useRef<HTMLTableElement>(null);\n  const { isStuck } = useContext(StickyHeaderContext);\n\n  const [focusedColumn, setFocusedColumn] = useState<number | null>(null);\n  const { scrollToRow, scrollToTop } = useStickyHeader(\n    tableRef,\n    theadRef,\n    secondaryTheadRef,\n    secondaryTableRef,\n    wrapperRef\n  );\n\n  useImperativeHandle(ref, () => ({ scrollToTop, scrollToRow, setFocusedColumn }));\n\n  return (\n    <div\n      className={clsx(styles['header-secondary'], styles[`variant-${variant}`], {\n        [styles.stuck]: isStuck,\n        [styles['table-has-header']]: tableHasHeader,\n      })}\n      aria-hidden={true}\n      // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient\n      // to scroll the table horizontally\n      tabIndex={-1}\n      ref={secondaryWrapperRef}\n      onScroll={onScroll}\n    >\n      <table\n        className={clsx(\n          styles.table,\n          styles['table-layout-fixed'],\n          contentDensity === 'compact' && getVisualContextClassname('compact-table')\n        )}\n        role=\"table\"\n        ref={secondaryTableRef}\n      >\n        <Thead ref={secondaryTheadRef} sticky={true} stuck={isStuck} showFocusRing={focusedColumn} {...theadProps} />\n      </table>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"sticky-header.js","sourceRoot":"","sources":["../../../src/table/sticky-header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,KAA2C,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAoBlF,eAAe,UAAU,CAAC,YAAY,CAAC,CAAC;AAExC,SAAS,YAAY,CACnB,EACE,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,cAAc,GACI,EACpB,GAA+B;IAE/B,MAAM,iBAAiB,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAC5D,MAAM,iBAAiB,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAEpD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA8B,IAAI,CAAC,CAAC;IAC5F,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,eAAe,CAClD,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,CACX,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,WAAW;QACX,WAAW;QACX,QAAQ,EAAE,mBAAmB;KAC9B,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACxE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;YACvB,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,cAAc;SAC7C,CAAC,iBACW,IAAI;QACjB,oFAAoF;QACpF,mCAAmC;QACnC,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,mBAAmB,EACxB,QAAQ,EAAE,QAAQ;QAElB,+BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,oBAAoB,CAAC,EAC5B,cAAc,KAAK,SAAS,IAAI,yBAAyB,CAAC,eAAe,CAAC,CAC3E,EACD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,iBAAiB;YAEtB,oBAAC,KAAK,kBACJ,GAAG,EAAE,iBAAiB,EACtB,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,OAAO,EACd,gBAAgB,EAAE,gBAAgB,IAC9B,UAAU,EACd,CACI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';\nimport { StickyHeaderContext } from '../container/use-sticky-header';\nimport { TableProps } from './interfaces';\nimport Thead, { InteractiveComponent, TheadProps } from './thead';\nimport { useStickyHeader } from './use-sticky-header';\nimport styles from './styles.css.js';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nexport interface StickyHeaderRef {\n  scrollToTop(): void;\n  scrollToRow(node: null | HTMLElement): void;\n  setFocus(element: InteractiveComponent | null): void;\n}\n\ninterface StickyHeaderProps {\n  variant: TableProps.Variant;\n  theadProps: TheadProps;\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  theadRef: React.RefObject<HTMLTableRowElement>;\n  secondaryWrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n  contentDensity?: 'comfortable' | 'compact';\n  tableHasHeader?: boolean;\n}\n\nexport default forwardRef(StickyHeader);\n\nfunction StickyHeader(\n  {\n    variant,\n    theadProps,\n    wrapperRef,\n    theadRef,\n    secondaryWrapperRef,\n    onScroll,\n    tableRef,\n    tableHasHeader,\n    contentDensity,\n  }: StickyHeaderProps,\n  ref: React.Ref<StickyHeaderRef>\n) {\n  const secondaryTheadRef = useRef<HTMLTableRowElement>(null);\n  const secondaryTableRef = useRef<HTMLTableElement>(null);\n  const { isStuck } = useContext(StickyHeaderContext);\n\n  const [focusedComponent, setFocusedComponent] = useState<InteractiveComponent | null>(null);\n  const { scrollToRow, scrollToTop } = useStickyHeader(\n    tableRef,\n    theadRef,\n    secondaryTheadRef,\n    secondaryTableRef,\n    wrapperRef\n  );\n\n  useImperativeHandle(ref, () => ({\n    scrollToTop,\n    scrollToRow,\n    setFocus: setFocusedComponent,\n  }));\n\n  return (\n    <div\n      className={clsx(styles['header-secondary'], styles[`variant-${variant}`], {\n        [styles.stuck]: isStuck,\n        [styles['table-has-header']]: tableHasHeader,\n      })}\n      aria-hidden={true}\n      // Prevents receiving focus in Firefox. Focus on the overflowing table is sufficient\n      // to scroll the table horizontally\n      tabIndex={-1}\n      ref={secondaryWrapperRef}\n      onScroll={onScroll}\n    >\n      <table\n        className={clsx(\n          styles.table,\n          styles['table-layout-fixed'],\n          contentDensity === 'compact' && getVisualContextClassname('compact-table')\n        )}\n        role=\"table\"\n        ref={secondaryTableRef}\n      >\n        <Thead\n          ref={secondaryTheadRef}\n          sticky={true}\n          stuck={isStuck}\n          focusedComponent={focusedComponent}\n          {...theadProps}\n        />\n      </table>\n    </div>\n  );\n}\n"]}

package/table/sticky-scrollbar.js

@@ -6,16 +6,15 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useStickyScrollbar } from './use-sticky-scrollbar';
 import styles from './styles.css.js';
 export default forwardRef(StickyScrollbar);
-function StickyScrollbar(_a, ref) {
-    var wrapperRef = _a.wrapperRef, tableRef = _a.tableRef, onScroll = _a.onScroll;
-    var scrollbarRef = React.useRef(null);
-    var scrollbarContentRef = React.useRef(null);
-    var mergedRef = useMergeRefs(ref, scrollbarRef);
+function StickyScrollbar({ wrapperRef, tableRef, onScroll }, ref) {
+    const scrollbarRef = React.useRef(null);
+    const scrollbarContentRef = React.useRef(null);
+    const mergedRef = useMergeRefs(ref, scrollbarRef);
     /**
      * Use the appropriate AppLayout context (Classic or Visual Refresh) to determine
      * the offsetBottom value to be used in the useStickyScrollbar hook.
      */
-    var stickyOffsetBottom = useAppLayoutContext().stickyOffsetBottom;
+    const { stickyOffsetBottom } = useAppLayoutContext();
     useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom);
     return (React.createElement("div", { ref: mergedRef, className: styles['sticky-scrollbar'], onScroll: onScroll },
         React.createElement("div", { ref: scrollbarContentRef, className: styles['sticky-scrollbar-content'] })));

package/table/sticky-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-scrollbar.js","sourceRoot":"","sources":["../../../src/table/sticky-scrollbar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,eAAe,UAAU,CAAC,eAAe,CAAC,CAAC;AAE3C,SAAS,eAAe,CAAC,EAAwD,EAAE,GAA8B;QAAtF,UAAU,gBAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAA;IACvD,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,IAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/D,IAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAElD;;;OAGG;IACK,IAAA,kBAAkB,GAAK,mBAAmB,EAAE,mBAA1B,CAA2B;IAErD,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAEhG,OAAO,CACL,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ;QAC5E,6BAAK,GAAG,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAAI,CAC5E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useStickyScrollbar } from './use-sticky-scrollbar';\nimport styles from './styles.css.js';\n\ninterface StickyScrollbarProps {\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n}\n\nexport default forwardRef(StickyScrollbar);\n\nfunction StickyScrollbar({ wrapperRef, tableRef, onScroll }: StickyScrollbarProps, ref: React.Ref<HTMLDivElement>) {\n  const scrollbarRef = React.useRef<HTMLDivElement>(null);\n  const scrollbarContentRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(ref, scrollbarRef);\n\n  /**\n   * Use the appropriate AppLayout context (Classic or Visual Refresh) to determine\n   * the offsetBottom value to be used in the useStickyScrollbar hook.\n   */\n  const { stickyOffsetBottom } = useAppLayoutContext();\n\n  useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom);\n\n  return (\n    <div ref={mergedRef} className={styles['sticky-scrollbar']} onScroll={onScroll}>\n      <div ref={scrollbarContentRef} className={styles['sticky-scrollbar-content']} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"sticky-scrollbar.js","sourceRoot":"","sources":["../../../src/table/sticky-scrollbar.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,eAAe,UAAU,CAAC,eAAe,CAAC,CAAC;AAE3C,SAAS,eAAe,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAwB,EAAE,GAA8B;IAC/G,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,MAAM,mBAAmB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IAElD;;;OAGG;IACH,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAErD,kBAAkB,CAAC,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAEhG,OAAO,CACL,6BAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ;QAC5E,6BAAK,GAAG,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,GAAI,CAC5E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useStickyScrollbar } from './use-sticky-scrollbar';\nimport styles from './styles.css.js';\n\ninterface StickyScrollbarProps {\n  wrapperRef: React.RefObject<HTMLDivElement>;\n  tableRef: React.RefObject<HTMLTableElement>;\n  onScroll?: React.UIEventHandler<HTMLDivElement>;\n}\n\nexport default forwardRef(StickyScrollbar);\n\nfunction StickyScrollbar({ wrapperRef, tableRef, onScroll }: StickyScrollbarProps, ref: React.Ref<HTMLDivElement>) {\n  const scrollbarRef = React.useRef<HTMLDivElement>(null);\n  const scrollbarContentRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(ref, scrollbarRef);\n\n  /**\n   * Use the appropriate AppLayout context (Classic or Visual Refresh) to determine\n   * the offsetBottom value to be used in the useStickyScrollbar hook.\n   */\n  const { stickyOffsetBottom } = useAppLayoutContext();\n\n  useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, stickyOffsetBottom);\n\n  return (\n    <div ref={mergedRef} className={styles['sticky-scrollbar']} onScroll={onScroll}>\n      <div ref={scrollbarContentRef} className={styles['sticky-scrollbar-content']} />\n    </div>\n  );\n}\n"]}

package/table/sticky-scrolling.js

@@ -8,28 +8,28 @@ import { getOverflowParents } from '../internal/utils/scrollable-containers';
  *                        originating borders or paddings
  */
 export default function stickyScrolling(containerRef, stickyRef) {
-    var scrollToTop = function () {
+    const scrollToTop = () => {
         if (!containerRef.current || !stickyRef.current) {
             return;
         }
-        var scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);
+        const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);
         if (scrollingOffset > 0) {
             scrollUpBy(scrollingOffset, containerRef.current);
         }
     };
-    var scrollToItem = function (item) {
+    const scrollToItem = (item) => {
         if (!item || !containerRef.current || !stickyRef.current) {
             return;
         }
-        var stickyBottom = stickyRef.current.getBoundingClientRect().bottom;
-        var scrollingOffset = stickyBottom - item.getBoundingClientRect().top;
+        const stickyBottom = stickyRef.current.getBoundingClientRect().bottom;
+        const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;
         if (scrollingOffset > 0) {
             scrollUpBy(scrollingOffset, containerRef.current);
         }
     };
     return {
-        scrollToTop: scrollToTop,
-        scrollToItem: scrollToItem
+        scrollToTop,
+        scrollToItem,
     };
 }
 /**
@@ -41,8 +41,8 @@ export default function stickyScrolling(containerRef, stickyRef) {
  * @param containerOffset caused by borders or paddings
  */
 export function calculateScrollingOffset(container, sticky) {
-    var stickyRect = sticky.getBoundingClientRect();
-    var containerRect = container.getBoundingClientRect();
+    const stickyRect = sticky.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
     return stickyRect.top - containerRect.top;
 }
 /**
@@ -51,7 +51,7 @@ export function calculateScrollingOffset(container, sticky) {
  * @param container used to determine next parent element for scrolling
  */
 export function scrollUpBy(amount, container) {
-    var parent = getOverflowParents(container);
+    const parent = getOverflowParents(container);
     if (parent.length) {
         // Take next overflow parent in stack
         parent[0].scrollTop -= amount;

package/table/sticky-scrolling.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,IAAM,WAAW,GAAG;QAClB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,IAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,IAAM,YAAY,GAAG,UAAC,IAAwB;QAC5C,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACxD,OAAO;SACR;QACD,IAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,IAAM,eAAe,GAAG,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACxE,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW,aAAA;QACX,YAAY,cAAA;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,IAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,IAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IACxD,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;AAC5C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,IAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE;QACjB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;KAC/B;SAAM;QACL,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;KACvD;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n *                        originating borders or paddings\n */\nexport default function stickyScrolling(\n  containerRef: React.MutableRefObject<HTMLElement | null>,\n  stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n  const scrollToTop = () => {\n    if (!containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  const scrollToItem = (item: HTMLElement | null) => {\n    if (!item || !containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const stickyBottom = stickyRef.current.getBoundingClientRect().bottom;\n    const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  return {\n    scrollToTop,\n    scrollToItem,\n  };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n  const stickyRect = sticky.getBoundingClientRect();\n  const containerRect = container.getBoundingClientRect();\n  return stickyRect.top - containerRect.top;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n  const parent = getOverflowParents(container);\n  if (parent.length) {\n    // Take next overflow parent in stack\n    parent[0].scrollTop -= amount;\n  } else {\n    window.scrollTo({ top: window.pageYOffset - amount });\n  }\n}\n"]}
+{"version":3,"file":"sticky-scrolling.js","sourceRoot":"","sources":["../../../src/table/sticky-scrolling.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAwD,EACxD,SAAqD;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,MAAM,eAAe,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1F,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,MAAM,YAAY,GAAG,CAAC,IAAwB,EAAE,EAAE;QAChD,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;YACxD,OAAO;SACR;QACD,MAAM,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QACtE,MAAM,eAAe,GAAG,YAAY,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACxE,IAAI,eAAe,GAAG,CAAC,EAAE;YACvB,UAAU,CAAC,eAAe,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC,CAAC;IACF,OAAO;QACL,WAAW;QACX,YAAY;KACb,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,wBAAwB,CAAC,SAAsB,EAAE,MAAmB;IAClF,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IACxD,OAAO,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,CAAC;AAC5C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,SAAsB;IAC/D,MAAM,MAAM,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAC7C,IAAI,MAAM,CAAC,MAAM,EAAE;QACjB,qCAAqC;QACrC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,MAAM,CAAC;KAC/B;SAAM;QACL,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,WAAW,GAAG,MAAM,EAAE,CAAC,CAAC;KACvD;AACH,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\n/**\n * @param containerRef ref to surrounding container with sticky element\n * @param stickyRef ref to sticky element scrolled inside of containerRef\n * @param containerOffset offset between header and container\n *                        originating borders or paddings\n */\nexport default function stickyScrolling(\n  containerRef: React.MutableRefObject<HTMLElement | null>,\n  stickyRef: React.MutableRefObject<HTMLElement | null>\n) {\n  const scrollToTop = () => {\n    if (!containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const scrollingOffset = calculateScrollingOffset(containerRef.current, stickyRef.current);\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  const scrollToItem = (item: HTMLElement | null) => {\n    if (!item || !containerRef.current || !stickyRef.current) {\n      return;\n    }\n    const stickyBottom = stickyRef.current.getBoundingClientRect().bottom;\n    const scrollingOffset = stickyBottom - item.getBoundingClientRect().top;\n    if (scrollingOffset > 0) {\n      scrollUpBy(scrollingOffset, containerRef.current);\n    }\n  };\n  return {\n    scrollToTop,\n    scrollToItem,\n  };\n}\n\n/**\n * Calculates the scrolling offset between container and\n * sticky element with container offset caused by border\n * or padding\n * @param container\n * @param sticky element inside of container\n * @param containerOffset caused by borders or paddings\n */\nexport function calculateScrollingOffset(container: HTMLElement, sticky: HTMLElement) {\n  const stickyRect = sticky.getBoundingClientRect();\n  const containerRect = container.getBoundingClientRect();\n  return stickyRect.top - containerRect.top;\n}\n\n/**\n * Scrolls suitable parent of container up by amount of pixels\n * @param amount pixels to be scrolled up\n * @param container used to determine next parent element for scrolling\n */\nexport function scrollUpBy(amount: number, container: HTMLElement) {\n  const parent = getOverflowParents(container);\n  if (parent.length) {\n    // Take next overflow parent in stack\n    parent[0].scrollTop -= amount;\n  } else {\n    window.scrollTo({ top: window.pageYOffset - amount });\n  }\n}\n"]}

package/table/thead.d.ts

@@ -2,6 +2,15 @@ import React from 'react';
 import { TableProps } from './interfaces';
 import { SelectionControlProps } from './selection-control';
 import { NonCancelableEventHandler } from '../internal/events';
+export type InteractiveComponent = {
+    type: 'selection';
+} | {
+    type: 'column';
+    col: number;
+} | {
+    type: 'resizer';
+    col: number;
+};
 export interface TheadProps {
     containerWidth: number | null;
     selectionType: TableProps.SelectionType | undefined;
@@ -14,16 +23,15 @@ export interface TheadProps {
     resizableColumns: boolean | undefined;
     selectAllProps: SelectionControlProps;
     onFocusMove: ((sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void) | undefined;
-    onCellFocus?: (colIndex: number) => void;
-    onCellBlur?: () => void;
     onResizeFinish: (newWidths: Record<string, number>) => void;
-    showFocusRing?: number | null;
     onSortingChange: NonCancelableEventHandler<TableProps.SortingState<any>> | undefined;
     sticky?: boolean;
     hidden?: boolean;
     stuck?: boolean;
     singleSelectionHeaderAriaLabel?: string;
     stripedRows?: boolean;
+    focusedComponent?: InteractiveComponent | null;
+    onFocusedComponentChange?: (element: InteractiveComponent | null) => void;
 }
 declare const Thead: React.ForwardRefExoticComponent<TheadProps & React.RefAttributes<HTMLTableRowElement>>;
 export default Thead;

package/table/thead.d.ts.map

@@ -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;AASvF,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;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,KAAK,wFAiHV,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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;AASvF,MAAM,MAAM,oBAAoB,GAC5B;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAErC,MAAM,WAAW,UAAU;IACzB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,aAAa,EAAE,UAAU,CAAC,aAAa,GAAG,SAAS,CAAC;IACpD,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,aAAa,EAAE,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;IAC5B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,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,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC;IACrF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,wBAAwB,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3E;AAED,QAAA,MAAM,KAAK,wFAoHV,CAAC;AAEF,eAAe,KAAK,CAAC"}