@itwin/itwinui-react 1.40.1 → 1.43.0

package/esm/core/Modal/ModalContent.js

@@ -1,39 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import React from 'react';
-import cx from 'classnames';
-import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/dialog.css';
+import { DialogContent } from '../Dialog/DialogContent';
 /**
  * Container for content in `Modal`.
  */
-export var ModalContent = function (props) {
-    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
-    useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-dialog-content', className) }, rest), children));
-};
+export var ModalContent = DialogContent;
 export default ModalContent;

package/esm/core/Slider/Slider.d.ts

@@ -96,6 +96,11 @@ export declare type SliderProps = {
      * high-volume of updates will occur when dragging.
      */
     onUpdate?: (values: ReadonlyArray<number>) => void;
+    /**
+     * The orientation of slider
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & Omit<CommonProps, 'title'>;
 /**
  * Slider component that display Thumbs for each value specified along a Rail.
@@ -195,5 +200,10 @@ export declare const Slider: React.ForwardRefExoticComponent<{
      * high-volume of updates will occur when dragging.
      */
     onUpdate?: ((values: ReadonlyArray<number>) => void) | undefined;
+    /**
+     * The orientation of slider
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
 } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
 export default Slider;

package/esm/core/Slider/Slider.js

@@ -39,9 +39,13 @@ import { useTheme, getBoundedValue, useEventListener, } from '../utils';
 import '@itwin/itwinui-css/css/slider.css';
 import { Track } from './Track';
 import { Thumb } from './Thumb';
-var getPercentageOfRectangle = function (rect, pointer) {
-    var position = getBoundedValue(pointer, rect.left, rect.right);
-    return (position - rect.left) / rect.width;
+var getPercentageOfRectangle = function (rect, pointerX, pointerY, orientation) {
+    if (orientation === 'horizontal') {
+        var position_1 = getBoundedValue(pointerX, rect.left, rect.right);
+        return (position_1 - rect.left) / rect.width;
+    }
+    var position = getBoundedValue(pointerY, rect.top, rect.bottom);
+    return (rect.bottom - position) / rect.height;
 };
 var getClosestValueIndex = function (values, pointerValue) {
     if (1 === values.length) {
@@ -88,20 +92,20 @@ var focusThumb = function (sliderContainer, activeIndex) {
  */
 export var Slider = React.forwardRef(function (props, ref) {
     var _a, _b;
-    var _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, values = props.values, _e = props.step, step = _e === void 0 ? 1 : _e, _f = props.setFocus, setFocus = _f === void 0 ? false : _f, tooltipProps = props.tooltipProps, _g = props.disabled, disabled = _g === void 0 ? false : _g, tickLabels = props.tickLabels, minLabel = props.minLabel, maxLabel = props.maxLabel, _h = props.trackDisplayMode, trackDisplayMode = _h === void 0 ? 'auto' : _h, _j = props.thumbMode, thumbMode = _j === void 0 ? 'inhibit-crossing' : _j, onChange = props.onChange, onUpdate = props.onUpdate, thumbProps = props.thumbProps, className = props.className, railContainerProps = props.railContainerProps, rest = __rest(props, ["min", "max", "values", "step", "setFocus", "tooltipProps", "disabled", "tickLabels", "minLabel", "maxLabel", "trackDisplayMode", "thumbMode", "onChange", "onUpdate", "thumbProps", "className", "railContainerProps"]);
-    var _k = React.useState(values), currentValues = _k[0], setCurrentValues = _k[1];
+    var _c = props.min, min = _c === void 0 ? 0 : _c, _d = props.max, max = _d === void 0 ? 100 : _d, values = props.values, _e = props.step, step = _e === void 0 ? 1 : _e, _f = props.setFocus, setFocus = _f === void 0 ? false : _f, tooltipProps = props.tooltipProps, _g = props.disabled, disabled = _g === void 0 ? false : _g, tickLabels = props.tickLabels, minLabel = props.minLabel, maxLabel = props.maxLabel, _h = props.trackDisplayMode, trackDisplayMode = _h === void 0 ? 'auto' : _h, _j = props.thumbMode, thumbMode = _j === void 0 ? 'inhibit-crossing' : _j, onChange = props.onChange, onUpdate = props.onUpdate, thumbProps = props.thumbProps, className = props.className, railContainerProps = props.railContainerProps, _k = props.orientation, orientation = _k === void 0 ? 'horizontal' : _k, rest = __rest(props, ["min", "max", "values", "step", "setFocus", "tooltipProps", "disabled", "tickLabels", "minLabel", "maxLabel", "trackDisplayMode", "thumbMode", "onChange", "onUpdate", "thumbProps", "className", "railContainerProps", "orientation"]);
+    var _l = React.useState(values), currentValues = _l[0], setCurrentValues = _l[1];
     React.useEffect(function () {
         setCurrentValues(values);
     }, [values]);
-    var _l = React.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _l[0], setMinValueLabel = _l[1];
+    var _m = React.useState(function () { return minLabel !== null && minLabel !== void 0 ? minLabel : min.toString(); }), minValueLabel = _m[0], setMinValueLabel = _m[1];
     React.useEffect(function () {
         setMinValueLabel(minLabel !== null && minLabel !== void 0 ? minLabel : min.toString());
     }, [minLabel, min]);
-    var _m = React.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _m[0], setMaxValueLabel = _m[1];
+    var _o = React.useState(function () { return maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString(); }), maxValueLabel = _o[0], setMaxValueLabel = _o[1];
     React.useEffect(function () {
         setMaxValueLabel(maxLabel !== null && maxLabel !== void 0 ? maxLabel : max.toString());
     }, [maxLabel, max]);
-    var _o = React.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _o[0], setTrackDisplay = _o[1];
+    var _p = React.useState(function () { return getDefaultTrackDisplay(trackDisplayMode, currentValues); }), trackDisplay = _p[0], setTrackDisplay = _p[1];
     React.useEffect(function () {
         setTrackDisplay(getDefaultTrackDisplay(trackDisplayMode, currentValues));
     }, [trackDisplayMode, currentValues]);
@@ -127,10 +131,10 @@ export var Slider = React.forwardRef(function (props, ref) {
         }
         return [min, max];
     }, [max, min, step, thumbMode, currentValues]);
-    var _p = React.useState(undefined), activeThumbIndex = _p[0], setActiveThumbIndex = _p[1];
+    var _q = React.useState(undefined), activeThumbIndex = _q[0], setActiveThumbIndex = _q[1];
     var updateThumbValue = React.useCallback(function (event, callbackType) {
         if (containerRef.current && undefined !== activeThumbIndex) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);
+            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var _a = getAllowableThumbRange(activeThumbIndex), minVal = _a[0], maxVal = _a[1];
@@ -156,6 +160,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         currentValues,
         onUpdate,
         onChange,
+        orientation,
     ]);
     var handlePointerMove = React.useCallback(function (event) {
         if (activeThumbIndex === undefined) {
@@ -189,7 +194,7 @@ export var Slider = React.forwardRef(function (props, ref) {
     }, [activeThumbIndex, updateThumbValue]);
     var handlePointerDownOnSlider = React.useCallback(function (event) {
         if (containerRef.current) {
-            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX);
+            var percent = getPercentageOfRectangle(containerRef.current.getBoundingClientRect(), event.clientX, event.clientY, orientation);
             var pointerValue = min + (max - min) * percent;
             pointerValue = roundValueToClosestStep(pointerValue, step, min);
             var closestValueIndex = getClosestValueIndex(currentValues, pointerValue);
@@ -215,6 +220,7 @@ export var Slider = React.forwardRef(function (props, ref) {
         getAllowableThumbRange,
         onChange,
         onUpdate,
+        orientation,
     ]);
     useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
@@ -235,7 +241,7 @@ export var Slider = React.forwardRef(function (props, ref) {
                 ? outProps.content
                 : formatNumberValue(val, step, getNumDecimalPlaces) });
     }, [getNumDecimalPlaces, step, tooltipProps]);
-    return (React.createElement("div", __assign({ ref: ref, className: cx('iui-slider-component-container', { 'iui-disabled': disabled }, className) }, rest),
+    return (React.createElement("div", __assign({ ref: ref, className: cx('iui-slider-component-container', "iui-slider-".concat(orientation), { 'iui-disabled': disabled }, className) }, rest),
         minValueLabel && (React.createElement("span", { className: 'iui-slider-min' }, minValueLabel)),
         React.createElement("div", __assign({ ref: containerRef, className: cx('iui-slider-container', {
                 'iui-grabbing': undefined !== activeThumbIndex,
@@ -245,9 +251,9 @@ export var Slider = React.forwardRef(function (props, ref) {
                 var _a;
                 var _b = getAllowableThumbRange(index), minVal = _b[0], maxVal = _b[1];
                 var thisThumbProps = thumbProps === null || thumbProps === void 0 ? void 0 : thumbProps(index);
-                return (React.createElement(Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max }));
+                return (React.createElement(Thumb, { key: (_a = thisThumbProps === null || thisThumbProps === void 0 ? void 0 : thisThumbProps.id) !== null && _a !== void 0 ? _a : index, index: index, disabled: disabled, isActive: activeThumbIndex === index, onThumbActivated: onThumbActivated, onThumbValueChanged: onThumbValueChanged, minVal: minVal, maxVal: maxVal, value: thumbValue, tooltipProps: generateTooltipProps(index, thumbValue), thumbProps: thisThumbProps, step: step, sliderMin: min, sliderMax: max, orientation: orientation }));
             }),
-            React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues }),
+            React.createElement(Track, { trackDisplayMode: trackDisplay, sliderMin: min, sliderMax: max, values: currentValues, orientation: orientation }),
             tickMarkArea),
         maxValueLabel && (React.createElement("span", { className: 'iui-slider-max' }, maxValueLabel))));
 });

package/esm/core/Slider/Thumb.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TooltipProps } from '../Tooltip';
+import { SliderProps } from './Slider';
 export declare type ThumbProps = {
     /**
      * Thumb value.
@@ -53,7 +54,7 @@ export declare type ThumbProps = {
      * Additional props for Thumb.
      */
     thumbProps?: React.HTMLAttributes<HTMLDivElement>;
-};
+} & Pick<SliderProps, 'orientation'>;
 /**
  * Thumb is a local component used to show and modify the values maintained by the Slider.
  * Only one Thumb can be active at a time. A Thumb is made active when the user selects

package/esm/core/Slider/Thumb.js

@@ -33,7 +33,7 @@ import { Tooltip } from '../Tooltip';
  * it with pointer. Whenever a Thumb is active, focused, or hovered its tooltip is shown.
  */
 export var Thumb = function (props) {
-    var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled;
+    var value = props.value, index = props.index, minVal = props.minVal, maxVal = props.maxVal, step = props.step, sliderMin = props.sliderMin, sliderMax = props.sliderMax, isActive = props.isActive, onThumbActivated = props.onThumbActivated, onThumbValueChanged = props.onThumbValueChanged, tooltipProps = props.tooltipProps, thumbProps = props.thumbProps, disabled = props.disabled, orientation = props.orientation;
     var thumbRef = React.useRef(null);
     var handleOnKeyDown = React.useCallback(function (event) {
         if (disabled || event.altKey) {
@@ -73,7 +73,7 @@ export var Thumb = function (props) {
         }
         return value;
     }, [sliderMax, sliderMin, value]);
-    var leftPercent = React.useMemo(function () {
+    var lowPercent = React.useMemo(function () {
         if (sliderMax === sliderMin) {
             return 0;
         }
@@ -81,5 +81,7 @@ export var Thumb = function (props) {
     }, [adjustedValue, sliderMax, sliderMin]);
     var _c = thumbProps || {}, style = _c.style, className = _c.className, rest = __rest(_c, ["style", "className"]);
     return (React.createElement(Tooltip, __assign({ visible: isActive || hasFocus || isHovered, placement: 'top' }, tooltipProps),
-        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), { left: "".concat(leftPercent, "%") }), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
+        React.createElement("div", __assign({}, rest, { "data-index": index, ref: thumbRef, style: __assign(__assign({}, style), (orientation === 'horizontal'
+                ? { left: "".concat(lowPercent, "%") }
+                : { bottom: "".concat(lowPercent, "%") })), className: cx('iui-slider-thumb', { 'iui-active': isActive }, className), role: 'slider', tabIndex: disabled ? undefined : 0, "aria-valuemin": minVal, "aria-valuenow": value, "aria-valuemax": maxVal, "aria-disabled": disabled, onPointerDown: handlePointerDownOnThumb, onKeyDown: handleOnKeyDown, onFocus: function () { return setHasFocus(true); }, onBlur: function () { return setHasFocus(false); }, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }))));
 };

package/esm/core/Slider/Track.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import { TrackDisplayMode } from './Slider';
+import { SliderProps, TrackDisplayMode } from './Slider';
 export declare type TrackProps = {
     trackDisplayMode: TrackDisplayMode;
     sliderMin: number;
     sliderMax: number;
     values: number[];
+    orientation: SliderProps['orientation'];
 };
 /**
  * Track displays color segments above Rail. Which, if any, segments that are

package/esm/core/Slider/Track.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -44,7 +55,7 @@ function generateSegments(values, min, max) {
  * colorized is based on `trackDisplayMode`.
  */
 export var Track = function (props) {
-    var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values;
+    var trackDisplayMode = props.trackDisplayMode, sliderMin = props.sliderMin, sliderMax = props.sliderMax, values = props.values, orientation = props.orientation;
     var _a = React.useState(function () {
         return generateSegments(values, sliderMin, sliderMax);
     }), segments = _a[0], setSegments = _a[1];
@@ -53,13 +64,21 @@ export var Track = function (props) {
     }, [values, sliderMin, sliderMax]);
     return (React.createElement(React.Fragment, null, 'none' !== trackDisplayMode &&
         segments.map(function (segment, index) {
-            var leftPercent = segment.left >= sliderMin && sliderMax !== sliderMin
+            var lowPercent = segment.left >= sliderMin && sliderMax !== sliderMin
                 ? (100.0 * (segment.left - sliderMin)) / (sliderMax - sliderMin)
                 : 0;
-            var rightPercent = segment.right >= sliderMin && sliderMax !== sliderMin
+            var highPercent = segment.right >= sliderMin && sliderMax !== sliderMin
                 ? 100.0 -
                     (100.0 * (segment.right - sliderMin)) / (sliderMax - sliderMin)
                 : 100;
-            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: { left: "".concat(leftPercent, "%"), right: "".concat(rightPercent, "%") } })) : null));
+            return (React.createElement(React.Fragment, { key: index }, shouldDisplaySegment(index, trackDisplayMode) ? (React.createElement("div", { className: 'iui-slider-track', style: __assign({}, (orientation === 'horizontal'
+                    ? {
+                        left: "".concat(lowPercent, "%"),
+                        right: "".concat(highPercent, "%"),
+                    }
+                    : {
+                        top: "".concat(highPercent, "%"),
+                        bottom: "".concat(lowPercent, "%"),
+                    })) })) : null));
         })));
 };

package/esm/core/Table/Table.d.ts

@@ -182,6 +182,30 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @default false
      */
     enableColumnReordering?: boolean;
+    /**
+     * Function that returns index of the row that you want to scroll to.
+     *
+     * When using with lazy-loading table, you need to take care that row is already loaded.
+     * It doesn't work with paginated tables.
+     * @beta
+     * @example
+     * <Table
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original === data[250]),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     * @example
+     * <Table
+     *   scrollToRow={React.useCallback(
+     *     (rows, data) => rows.findIndex((row) => row.original.id === data[250].id),
+     *     []
+     *   )}
+     *   {...restProps}
+     * />
+     */
+    scrollToRow?: (rows: Row<T>[], data: T[]) => number;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/esm/core/Table/Table.js

@@ -28,7 +28,7 @@ import React from 'react';
 import cx from 'classnames';
 import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
-import { useTheme, useResizeObserver } from '../utils';
+import { useTheme, useResizeObserver, mergeRefs } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import SvgSortDown from '@itwin/itwinui-icons-react/cjs/icons/SortDown';
 import SvgSortUp from '@itwin/itwinui-icons-react/cjs/icons/SortUp';
@@ -36,7 +36,7 @@ import { getCellStyle, getStickyStyle } from './utils';
 import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
-import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useStickyColumns, } from './hooks';
+import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, useScrollToRow, useStickyColumns, } from './hooks';
 import { onExpandHandler, onFilterHandler, onSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
 import { SELECTION_CELL_ID } from './columns';
@@ -234,6 +234,7 @@ export var Table = function (props) {
         state.pageIndex,
         state.pageSize,
     ]);
+    var _r = useScrollToRow(__assign(__assign({}, props), { page: page })), scrollToIndex = _r.scrollToIndex, tableRowRef = _r.tableRowRef;
     var columnRefs = React.useRef({});
     var previousTableWidth = React.useRef(0);
     var onTableResize = React.useCallback(function (_a) {
@@ -269,22 +270,27 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
+    // Using `useState` to rerender rows when table body ref is available
+    var _s = React.useState(null), bodyRefState = _s[0], setBodyRefState = _s[1];
     var getPreparedRow = React.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell }));
+        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: index === page.length - 1, onRowInViewport: onRowInViewportRef, onBottomReached: onBottomReachedRef, intersectionMargin: intersectionMargin, state: state, key: row.getRowProps().key, onClick: onRowClickHandler, subComponent: subComponent, isDisabled: !!(isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original)), tableHasSubRows: hasAnySubRows, tableInstance: instance, expanderCell: expanderCell, bodyRef: bodyRefState, tableRowRef: enableVirtualization ? undefined : tableRowRef(row) }));
     }, [
         page,
-        expanderCell,
-        hasAnySubRows,
-        instance,
-        intersectionMargin,
-        isRowDisabled,
-        onRowClickHandler,
         prepareRow,
         rowProps,
+        intersectionMargin,
         state,
+        onRowClickHandler,
         subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        bodyRefState,
+        enableVirtualization,
+        tableRowRef,
     ]);
     var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -321,7 +327,12 @@ export var Table = function (props) {
             className: cx('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
             style: __assign({ minWidth: 0 }, style),
         }), ariaDataAttributes),
-            React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef },
+            React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
+                    if (headerRef.current && bodyRef.current) {
+                        bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+                        updateStickyState();
+                    }
+                } },
                 React.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
                     var headerGroupProps = headerGroup.getHeaderGroupProps({
                         className: 'iui-row',
@@ -360,13 +371,13 @@ export var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }), { ref: mergeRefs(bodyRef, setBodyRefState), onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
                 isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-row' },

package/esm/core/Table/TableRowMemoized.d.ts

@@ -20,6 +20,8 @@ export declare const TableRow: <T extends Record<string, unknown>>(props: {
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    bodyRef: HTMLDivElement | null;
+    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -35,4 +37,6 @@ export declare const TableRowMemoized: <T extends Record<string, unknown>>(props
     tableHasSubRows: boolean;
     tableInstance: TableInstance<T>;
     expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined;
+    bodyRef: HTMLDivElement | null;
+    tableRowRef?: React.Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;

package/esm/core/Table/TableRowMemoized.js

@@ -24,14 +24,25 @@ import { TableCell } from './TableCell';
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 export var TableRow = function (props) {
-    var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
+    var row = props.row, rowProps = props.rowProps, isLast = props.isLast, onRowInViewport = props.onRowInViewport, onBottomReached = props.onBottomReached, intersectionMargin = props.intersectionMargin, onClick = props.onClick, subComponent = props.subComponent, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell, bodyRef = props.bodyRef, tableRowRef = props.tableRowRef;
     var onIntersect = React.useCallback(function () {
         var _a, _b;
         (_a = onRowInViewport.current) === null || _a === void 0 ? void 0 : _a.call(onRowInViewport, row.original);
         isLast && ((_b = onBottomReached.current) === null || _b === void 0 ? void 0 : _b.call(onBottomReached));
     }, [isLast, onBottomReached, onRowInViewport, row.original]);
-    var rowRef = useIntersection(onIntersect, {
+    var intersectionRoot = React.useMemo(function () {
+        var _a, _b;
+        var isTableBodyScrollable = ((_a = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.scrollHeight) !== null && _a !== void 0 ? _a : 0) > ((_b = bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.offsetHeight) !== null && _b !== void 0 ? _b : 0);
+        // If table body is scrollable, make it the intersection root
+        if (isTableBodyScrollable) {
+            return bodyRef;
+        }
+        // Otherwise, make the viewport the intersection root
+        return undefined;
+    }, [bodyRef]);
+    var intersectionRef = useIntersection(onIntersect, {
         rootMargin: "".concat(intersectionMargin, "px"),
+        root: intersectionRoot,
     });
     var userRowProps = rowProps === null || rowProps === void 0 ? void 0 : rowProps(row);
     var mergedProps = __assign(__assign(__assign({}, row.getRowProps({ style: { flex: "0 0 auto", minWidth: '100%' } })), userRowProps), {
@@ -41,7 +52,7 @@ export var TableRow = function (props) {
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = useMergedRefs(rowRef, mergedProps.ref);
+    var refs = useMergedRefs(intersectionRef, mergedProps.ref, tableRowRef);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;
@@ -90,6 +101,7 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         prevProp.rowProps === nextProp.rowProps &&
         prevProp.expanderCell === nextProp.expanderCell &&
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+        prevProp.bodyRef === nextProp.bodyRef &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
         prevProp.state.isTableResizing === nextProp.state.isTableResizing &&

package/esm/core/Table/cells/EditableCell.js

@@ -25,6 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
+import { getRandomValue } from '../../utils';
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -47,8 +48,9 @@ export var EditableCell = function (props) {
     React.useEffect(function () {
         setValue(sanitizeString(cellProps.value));
     }, [cellProps.value]);
-    var _b = React.useState(false), isDirty = _b[0], setIsDirty = _b[1];
-    return (React.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true }, rest, { onInput: function (e) {
+    var _b = React.useState(getRandomValue(10)), key = _b[0], setKey = _b[1];
+    var _c = React.useState(false), isDirty = _c[0], setIsDirty = _c[1];
+    return (React.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true, key: key }, rest, { onInput: function (e) {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
@@ -59,6 +61,9 @@ export var EditableCell = function (props) {
                 onCellEdit(cellProps.column.id, value, cellProps.row.original);
             }
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            // Prevents error when text is cleared.
+            // New key makes React to reattach with the DOM so it won't complain about deleted text node.
+            setKey(getRandomValue(10));
         }, onKeyDown: function (e) {
             var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press

package/esm/core/Table/columns/actionColumn.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="react" />
 import { HeaderProps } from 'react-table';
+import { DropdownMenuProps } from '../../DropdownMenu';
+declare type ActionColumnProps = {
+    columnManager?: boolean | {
+        dropdownMenuProps: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+    };
+};
 /**
  * Action column that adds column manager to the Table header.
  * It is recommended to add this column to the end of the Table
@@ -19,9 +25,7 @@ import { HeaderProps } from 'react-table';
  *   ),
  * },
  */
-export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: {
-    columnManager?: boolean | undefined;
-}) => {
+export declare const ActionColumn: <T extends Record<string, unknown>>({ columnManager, }?: ActionColumnProps) => {
     id: string;
     disableResizing: boolean;
     disableGroupBy: boolean;
@@ -33,3 +37,4 @@ export declare const ActionColumn: <T extends Record<string, unknown>>({ columnM
     disableReordering: boolean;
     Header: ({ allColumns, dispatch, state }: HeaderProps<T>) => JSX.Element | null;
 };
+export {};

package/esm/core/Table/columns/actionColumn.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -11,6 +22,7 @@ import { MenuItem } from '../../Menu';
 import { tableResizeStartAction } from '../Table';
 import { SELECTION_CELL_ID } from './selectionColumn';
 import { EXPANDER_CELL_ID } from './expanderColumn';
+import cx from 'classnames';
 var ACTION_CELL_ID = 'iui-table-action';
 /**
  * Action column that adds column manager to the Table header.
@@ -46,6 +58,7 @@ export var ActionColumn = function (_a) {
         Header: function (_a) {
             var allColumns = _a.allColumns, dispatch = _a.dispatch, state = _a.state;
             var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+            var buttonRef = React.useRef(null);
             if (!columnManager) {
                 return null;
             }
@@ -71,13 +84,31 @@ export var ActionColumn = function (_a) {
                         }
                         // Triggers an update to resize the widths of all visible columns
                         dispatch({ type: tableResizeStartAction });
+                        // If some columns were resized and some columns visibility was enabled, then horizontal scrollbar appears
+                        // and table is scrolled to the very left which means our visibility dropdown menu is not visible.
+                        // So for better UX we need to scroll to that dropdown menu.
+                        queueMicrotask(function () {
+                            var _a;
+                            (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+                        });
                     };
                     return (React.createElement(MenuItem, { key: column.id, icon: React.createElement(Checkbox, { checked: checked, disabled: column.disableToggleVisibility, onClick: function (e) { return e.stopPropagation(); }, onChange: onClick, "aria-labelledby": "iui-column-".concat(column.id) }), onClick: onClick, disabled: column.disableToggleVisibility },
                         React.createElement("div", { id: "iui-column-".concat(column.id) }, column.render('Header'))));
                 });
             };
-            return (React.createElement(DropdownMenu, { menuItems: headerCheckBoxes, onHide: function () { return setIsOpen(false); }, onShow: function () { return setIsOpen(true); } },
-                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen },
+            var dropdownMenuProps = typeof columnManager !== 'boolean'
+                ? columnManager.dropdownMenuProps
+                : {};
+            return (React.createElement(DropdownMenu, __assign({}, dropdownMenuProps, { menuItems: headerCheckBoxes, onHide: function (i) {
+                    var _a;
+                    setIsOpen(false);
+                    (_a = dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, onShow: function (i) {
+                    var _a;
+                    setIsOpen(true);
+                    (_a = dropdownMenuProps.onShow) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, i);
+                }, style: __assign({ maxHeight: '315px' }, dropdownMenuProps.style), className: cx('iui-scroll', dropdownMenuProps.className) }),
+                React.createElement(IconButton, { styleType: 'borderless', isActive: isOpen, ref: buttonRef },
                     React.createElement(SvgColumnManager, null))));
         },
     };

package/esm/core/Table/hooks/index.d.ts

@@ -4,4 +4,5 @@ export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';
 export { useColumnDragAndDrop } from './useColumnDragAndDrop';
+export { useScrollToRow } from './useScrollToRow';
 export { useStickyColumns } from './useStickyColumns';

package/esm/core/Table/hooks/index.js

@@ -8,4 +8,5 @@ export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';
 export { useColumnDragAndDrop } from './useColumnDragAndDrop';
+export { useScrollToRow } from './useScrollToRow';
 export { useStickyColumns } from './useStickyColumns';

package/esm/core/Table/hooks/useScrollToRow.d.ts

@@ -0,0 +1,11 @@
+import type { Row } from 'react-table';
+import { TableProps } from '../Table';
+declare type ScrollToRow<T extends Record<string, unknown>> = {
+    scrollToIndex: number | undefined;
+    tableRowRef: (row: Row<T>) => (element: HTMLDivElement) => void;
+};
+declare type ScrollToRowProps<T extends Record<string, unknown>> = TableProps<T> & {
+    page: Row<T>[];
+};
+export declare function useScrollToRow<T extends Record<string, unknown>>({ data, enableVirtualization, page, paginatorRenderer, scrollToRow, }: ScrollToRowProps<T>): ScrollToRow<T>;
+export {};