@itwin/itwinui-react 1.40.1 → 1.41.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.41.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.1...v1.41.0) (2022-07-13)
+
+### What's new
+
+* **ErrorPage:** Add time-out and redirect status codes ([#715](https://www.github.com/iTwin/iTwinUI-react/issues/715)) ([a5fb85f](https://www.github.com/iTwin/iTwinUI-react/commit/a5fb85f1f0ef9517a065db02384875d7c5d87f95))
+* **Modal:** Update classes through the css package update ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+  - Now `style` and `className` props are applied on the dialog element itself.
+* Border radius was changed from `3px` to `4px` through the css package update in all elements ([#724](https://www.github.com/iTwin/iTwinUI-react/issues/724)) ([d13e0bf](https://www.github.com/iTwin/iTwinUI-react/commit/d13e0bf7941581a3b8d275b744bf77ebd7ae95d4))
+
+### Fixes
+
+* **Combobox:** Allow users to reset the value ([#728](https://www.github.com/iTwin/iTwinUI-react/issues/728)) ([f6c0b0d](https://www.github.com/iTwin/iTwinUI-react/commit/f6c0b0d66ac9ac725a23e07980c9dd7298084ae4))
+* **Table:** Prevent crashing when clearing editable cell ([#732](https://www.github.com/iTwin/iTwinUI-react/issues/732)) ([0dedd3b](https://www.github.com/iTwin/iTwinUI-react/commit/0dedd3b8804ce98ce836d4bbbf58db83a4f9bfde))
+* **Table:** Set correct intersection root for margin to work ([#708](https://www.github.com/iTwin/iTwinUI-react/issues/708)) ([55e4848](https://www.github.com/iTwin/iTwinUI-react/commit/55e48481f95c3351c127d495bd3c20134fd4a77f))
+
 ### [1.40.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.40.0...v1.40.1) (2022-06-17)
 
 ### Fixes

package/cjs/core/ComboBox/ComboBox.js

@@ -74,6 +74,7 @@ var ComboBox = function (props) {
     var inputRef = react_1.default.useRef(null);
     var menuRef = react_1.default.useRef(null);
     var toggleButtonRef = react_1.default.useRef(null);
+    var mounted = react_1.default.useRef(false);
     // Latest value of the onChange prop
     var onChangeProp = react_1.default.useRef(onChange);
     react_1.default.useEffect(function () {
@@ -97,7 +98,9 @@ var ComboBox = function (props) {
     // Reducer where all the component-wide state is stored
     var _e = react_1.default.useReducer(helpers_1.comboBoxReducer, {
         isOpen: false,
-        selectedIndex: -1,
+        selectedIndex: valueProp
+            ? options.findIndex(function (option) { return option.value === valueProp; })
+            : -1,
         focusedIndex: -1,
     }), _f = _e[0], isOpen = _f.isOpen, selectedIndex = _f.selectedIndex, focusedIndex = _f.focusedIndex, dispatch = _e[1];
     react_1.default.useLayoutEffect(function () {
@@ -166,14 +169,14 @@ var ComboBox = function (props) {
     // Call user-defined onChange when the value actually changes
     react_1.default.useEffect(function () {
         var _a, _b;
-        if (selectedIndex != undefined && selectedIndex >= 0) {
-            var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-            if (value === valueProp) {
-                return;
-            }
-            (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+        // Prevent user-defined onChange to be called on mount
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
         }
-    }, [options, selectedIndex, valueProp]);
+        var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+    }, [options, selectedIndex]);
     var getMenuItem = react_1.default.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

package/cjs/core/ErrorPage/ErrorPage.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type ErrorPageType = '401' | '403' | '404' | '500' | '502' | '503' | 'generic';
+export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 export declare type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
     internalServerError: string;
+    redirect?: string;
     pageNotFound: string;
     serviceUnavailable: string;
+    timedOut?: string;
     unauthorized: string;
 };
 export declare type ErrorPageProps = {

package/cjs/core/ErrorPage/ErrorPage.js

@@ -37,6 +37,8 @@ var _500_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/ill
 var _502_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/502"));
 var _503_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/503"));
 var Error_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Error"));
+var Redirect_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect"));
+var TimedOut_1 = __importDefault(require("@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut"));
 var react_1 = __importDefault(require("react"));
 var Button_1 = require("../Buttons/Button");
 var utils_1 = require("../utils");
@@ -50,9 +52,19 @@ require("@itwin/itwinui-css/css/non-ideal-state.css");
 var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, className = props.className, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages", "className"]);
     (0, utils_1.useTheme)();
-    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
+    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', redirect: 'Redirect', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', timedOut: 'Timed out', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return react_1.default.createElement(Redirect_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return react_1.default.createElement(_401_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -62,6 +74,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return react_1.default.createElement(_404_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return react_1.default.createElement(TimedOut_1.default, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return react_1.default.createElement(_500_1.default, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -82,6 +98,16 @@ var ErrorPage = function (props) {
             return errorName;
         }
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return defaultErrorMessages.redirect || '';
+            }
             case '401': {
                 return defaultErrorMessages.unauthorized;
             }
@@ -91,6 +117,10 @@ var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/cjs/core/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import '@itwin/itwinui-css/css/backdrop.css';
 export declare type ModalProps = {
     /**
      * Flag whether modal should be shown.

package/cjs/core/Modal/Modal.js

@@ -36,6 +36,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Close_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Close"));
 var utils_1 = require("../utils");
 require("@itwin/itwinui-css/css/dialog.css");
+require("@itwin/itwinui-css/css/backdrop.css");
 var IconButton_1 = require("../Buttons/IconButton");
 var react_transition_group_1 = require("react-transition-group");
 /**
@@ -118,15 +119,17 @@ var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (react_dom_1.default.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-backdrop', { 'iui-backdrop-visible': isOpen }), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }),
         react_1.default.createElement(utils_1.FocusTrap, null,
-            react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog-backdrop', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                react_1.default.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
-                        react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
-                        isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                            react_1.default.createElement(Close_1.default, null)))),
-                    children)))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(react_transition_group_1.CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+                    react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)('iui-dialog', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), id: id, style: style, role: 'dialog', "aria-modal": 'true' }, rest),
+                        react_1.default.createElement("div", { className: 'iui-dialog-title-bar' },
+                            react_1.default.createElement("div", { className: 'iui-dialog-title' }, title),
+                            isDismissible && (react_1.default.createElement(IconButton_1.IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                                react_1.default.createElement(Close_1.default, null)))),
+                        children))))), container)) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

package/cjs/core/Table/Table.js

@@ -275,22 +275,25 @@ var Table = function (props) {
     });
     var headerRef = react_1.default.useRef(null);
     var bodyRef = react_1.default.useRef(null);
+    // Using `useState` to rerender rows when table body ref is available
+    var _r = react_1.default.useState(null), bodyRefState = _r[0], setBodyRefState = _r[1];
     var getPreparedRow = react_1.default.useCallback(function (index) {
         var row = page[index];
         prepareRow(row);
-        return (react_1.default.createElement(TableRowMemoized_1.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_1.default.createElement(TableRowMemoized_1.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 }));
     }, [
         page,
-        expanderCell,
-        hasAnySubRows,
-        instance,
-        intersectionMargin,
-        isRowDisabled,
-        onRowClickHandler,
         prepareRow,
         rowProps,
+        intersectionMargin,
         state,
+        onRowClickHandler,
         subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        bodyRefState,
     ]);
     var virtualizedItemRenderer = react_1.default.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -366,7 +369,7 @@ var Table = function (props) {
                     'iui-zebra-striping': styleType === 'zebra-rows',
                 }),
                 style: { outline: 0 },
-            }), { ref: bodyRef, onScroll: function () {
+            }), { ref: (0, utils_1.mergeRefs)(bodyRef, setBodyRefState), onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();

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

@@ -20,6 +20,7 @@ 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;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -35,4 +36,5 @@ 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;
 }) => JSX.Element;

package/cjs/core/Table/TableRowMemoized.js

@@ -30,14 +30,25 @@ var TableCell_1 = require("./TableCell");
  * When adding new features check whether it changes state that affects row. If it does then add equality check to `React.memo`.
  */
 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;
     var onIntersect = react_1.default.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 = (0, utils_1.useIntersection)(onIntersect, {
+    var intersectionRoot = react_1.default.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 = (0, utils_1.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), {
@@ -47,7 +58,7 @@ var TableRow = function (props) {
             'iui-disabled': isDisabled,
         }, userRowProps === null || userRowProps === void 0 ? void 0 : userRowProps.className),
     });
-    var refs = (0, utils_1.useMergedRefs)(rowRef, mergedProps.ref);
+    var refs = (0, utils_1.useMergedRefs)(intersectionRef, mergedProps.ref);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", __assign({}, mergedProps, { ref: refs, onClick: function (event) {
                 var _a;
@@ -97,6 +108,7 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
         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/cjs/core/Table/cells/EditableCell.js

@@ -31,6 +31,7 @@ exports.EditableCell = void 0;
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 var react_1 = __importDefault(require("react"));
+var utils_1 = require("../../utils");
 /**
  * Editable cell.
  * It should be passed to `cellRenderer`.
@@ -53,8 +54,9 @@ var EditableCell = function (props) {
     react_1.default.useEffect(function () {
         setValue(sanitizeString(cellProps.value));
     }, [cellProps.value]);
-    var _b = react_1.default.useState(false), isDirty = _b[0], setIsDirty = _b[1];
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true }, rest, { onInput: function (e) {
+    var _b = react_1.default.useState((0, utils_1.getRandomValue)(10)), key = _b[0], setKey = _b[1];
+    var _c = react_1.default.useState(false), isDirty = _c[0], setIsDirty = _c[1];
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, { contentEditable: true, suppressContentEditableWarning: true, key: key }, rest, { onInput: function (e) {
             var _a;
             setValue(sanitizeString(e.target.innerText));
             setIsDirty(true);
@@ -65,6 +67,9 @@ 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((0, utils_1.getRandomValue)(10));
         }, onKeyDown: function (e) {
             var _a;
             // Prevents from adding HTML elements (div, br) inside a cell on Enter press

package/esm/core/ComboBox/ComboBox.js

@@ -68,6 +68,7 @@ export var ComboBox = function (props) {
     var inputRef = React.useRef(null);
     var menuRef = React.useRef(null);
     var toggleButtonRef = React.useRef(null);
+    var mounted = React.useRef(false);
     // Latest value of the onChange prop
     var onChangeProp = React.useRef(onChange);
     React.useEffect(function () {
@@ -91,7 +92,9 @@ export var ComboBox = function (props) {
     // Reducer where all the component-wide state is stored
     var _e = React.useReducer(comboBoxReducer, {
         isOpen: false,
-        selectedIndex: -1,
+        selectedIndex: valueProp
+            ? options.findIndex(function (option) { return option.value === valueProp; })
+            : -1,
         focusedIndex: -1,
     }), _f = _e[0], isOpen = _f.isOpen, selectedIndex = _f.selectedIndex, focusedIndex = _f.focusedIndex, dispatch = _e[1];
     React.useLayoutEffect(function () {
@@ -160,14 +163,14 @@ export var ComboBox = function (props) {
     // Call user-defined onChange when the value actually changes
     React.useEffect(function () {
         var _a, _b;
-        if (selectedIndex != undefined && selectedIndex >= 0) {
-            var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
-            if (value === valueProp) {
-                return;
-            }
-            (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+        // Prevent user-defined onChange to be called on mount
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
         }
-    }, [options, selectedIndex, valueProp]);
+        var value = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+        (_b = onChangeProp.current) === null || _b === void 0 ? void 0 : _b.call(onChangeProp, value);
+    }, [options, selectedIndex]);
     var getMenuItem = React.useCallback(function (option, filteredIndex) {
         var optionId = getOptionId(option, id);
         var __originalIndex = optionsExtraInfoRef.current[optionId].__originalIndex;

package/esm/core/ErrorPage/ErrorPage.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/non-ideal-state.css';
-export declare type ErrorPageType = '401' | '403' | '404' | '500' | '502' | '503' | 'generic';
+export declare type ErrorPageType = '300' | '301' | '302' | '303' | '304' | '305' | '307' | '308' | '401' | '403' | '404' | '408' | '500' | '502' | '503' | '504' | 'generic';
 export declare type ErrorTypeTranslations = {
     badGateway: string;
     error: string;
     forbidden: string;
     internalServerError: string;
+    redirect?: string;
     pageNotFound: string;
     serviceUnavailable: string;
+    timedOut?: string;
     unauthorized: string;
 };
 export declare type ErrorPageProps = {

package/esm/core/ErrorPage/ErrorPage.js

@@ -31,6 +31,8 @@ import Svg500 from '@itwin/itwinui-illustrations-react/cjs/illustrations/500';
 import Svg502 from '@itwin/itwinui-illustrations-react/cjs/illustrations/502';
 import Svg503 from '@itwin/itwinui-illustrations-react/cjs/illustrations/503';
 import SvgError from '@itwin/itwinui-illustrations-react/cjs/illustrations/Error';
+import SvgRedirect from '@itwin/itwinui-illustrations-react/cjs/illustrations/Redirect';
+import SvgTimedOut from '@itwin/itwinui-illustrations-react/cjs/illustrations/TimedOut';
 import React from 'react';
 import { Button } from '../Buttons/Button';
 import { useTheme } from '../utils';
@@ -44,9 +46,19 @@ import '@itwin/itwinui-css/css/non-ideal-state.css';
 export var ErrorPage = function (props) {
     var errorType = props.errorType, errorName = props.errorName, errorMessage = props.errorMessage, primaryButtonHandle = props.primaryButtonHandle, primaryButtonLabel = props.primaryButtonLabel, secondaryButtonHandle = props.secondaryButtonHandle, secondaryButtonLabel = props.secondaryButtonLabel, translatedErrorMessages = props.translatedErrorMessages, className = props.className, rest = __rest(props, ["errorType", "errorName", "errorMessage", "primaryButtonHandle", "primaryButtonLabel", "secondaryButtonHandle", "secondaryButtonLabel", "translatedErrorMessages", "className"]);
     useTheme();
-    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', unauthorized: 'Unauthorized' }, translatedErrorMessages);
+    var defaultErrorMessages = __assign({ badGateway: 'Bad gateway', error: 'Error', forbidden: 'Forbidden', internalServerError: 'Internal server error', redirect: 'Redirect', pageNotFound: 'Page not found', serviceUnavailable: 'Service unavailable', timedOut: 'Timed out', unauthorized: 'Unauthorized' }, translatedErrorMessages);
     function getErrorIcon() {
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return React.createElement(SvgRedirect, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '401': {
                 return React.createElement(Svg401, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -56,6 +68,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return React.createElement(Svg404, { className: 'iui-non-ideal-state-illustration' });
             }
+            case '408':
+            case '504': {
+                return React.createElement(SvgTimedOut, { className: 'iui-non-ideal-state-illustration' });
+            }
             case '500': {
                 return React.createElement(Svg500, { className: 'iui-non-ideal-state-illustration' });
             }
@@ -76,6 +92,16 @@ export var ErrorPage = function (props) {
             return errorName;
         }
         switch (errorType) {
+            case '300':
+            case '301':
+            case '302':
+            case '303':
+            case '304':
+            case '305':
+            case '307':
+            case '308': {
+                return defaultErrorMessages.redirect || '';
+            }
             case '401': {
                 return defaultErrorMessages.unauthorized;
             }
@@ -85,6 +111,10 @@ export var ErrorPage = function (props) {
             case '404': {
                 return defaultErrorMessages.pageNotFound;
             }
+            case '408':
+            case '504': {
+                return defaultErrorMessages.timedOut || '';
+            }
             case '500': {
                 return defaultErrorMessages.internalServerError;
             }

package/esm/core/Modal/Modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import '@itwin/itwinui-css/css/backdrop.css';
 export declare type ModalProps = {
     /**
      * Flag whether modal should be shown.

package/esm/core/Modal/Modal.js

@@ -30,6 +30,7 @@ import cx from 'classnames';
 import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
 import '@itwin/itwinui-css/css/dialog.css';
+import '@itwin/itwinui-css/css/backdrop.css';
 import { IconButton } from '../Buttons/IconButton';
 import { CSSTransition } from 'react-transition-group';
 /**
@@ -112,14 +113,16 @@ export var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+    return !!container ? (ReactDOM.createPortal(React.createElement(React.Fragment, null,
+        React.createElement("div", { className: cx('iui-backdrop', { 'iui-backdrop-visible': isOpen }), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }),
         React.createElement(FocusTrap, null,
-            React.createElement("div", __assign({ className: cx('iui-dialog-backdrop', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-                React.createElement("div", { className: 'iui-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                    React.createElement("div", { className: 'iui-dialog-title-bar' },
-                        React.createElement("div", { className: 'iui-dialog-title' }, title),
-                        isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
-                            React.createElement(SvgClose, null)))),
-                    children)))), container)) : (React.createElement(React.Fragment, null));
+            React.createElement("div", null,
+                React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-dialog-animation', timeout: { exit: 600 }, unmountOnExit: true },
+                    React.createElement("div", __assign({ className: cx('iui-dialog', { 'iui-dialog-default': styleType === 'default' }, { 'iui-dialog-full-page': styleType === 'fullPage' }, { 'iui-dialog-visible': isOpen }, className), id: id, style: style, role: 'dialog', "aria-modal": 'true' }, rest),
+                        React.createElement("div", { className: 'iui-dialog-title-bar' },
+                            React.createElement("div", { className: 'iui-dialog-title' }, title),
+                            isDismissible && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
+                                React.createElement(SvgClose, null)))),
+                        children))))), container)) : (React.createElement(React.Fragment, null));
 };
 export default Modal;

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';
@@ -269,22 +269,25 @@ 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 _r = React.useState(null), bodyRefState = _r[0], setBodyRefState = _r[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 }));
     }, [
         page,
-        expanderCell,
-        hasAnySubRows,
-        instance,
-        intersectionMargin,
-        isRowDisabled,
-        onRowClickHandler,
         prepareRow,
         rowProps,
+        intersectionMargin,
         state,
+        onRowClickHandler,
         subComponent,
+        isRowDisabled,
+        hasAnySubRows,
+        instance,
+        expanderCell,
+        bodyRefState,
     ]);
     var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     var updateStickyState = function () {
@@ -360,7 +363,7 @@ 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();

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

@@ -20,6 +20,7 @@ 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;
 }) => JSX.Element;
 export declare const TableRowMemoized: <T extends Record<string, unknown>>(props: {
     row: Row<T>;
@@ -35,4 +36,5 @@ 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;
 }) => 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;
     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);
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.40.1",
+  "version": "1.41.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -35,15 +35,15 @@
     "clean:coverage": "rimraf coverage",
     "test": "jest",
     "test:watch": "jest --watch",
-    "createComponent": "node scripts/createComponent.js",
     "format": "prettier --config .prettierrc **/*.{tsx,ts,js} --ignore-path .gitignore --write",
     "lint": "eslint \"**/*.{js,ts,tsx}\" --max-warnings=0",
     "lint:fix": "yarn lint --fix && node ../configs/copyrightLinter.js --fix \"*/**/*.{js,ts,tsx}\"",
     "copy-files": "cpy \"../../{README,LICENSE}.md\" .",
-    "dev": "yarn build:watch"
+    "dev": "yarn build:watch",
+    "createComponent": "node ../../scripts/createComponent.js"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.59.2",
+    "@itwin/itwinui-css": "^0.61.0",
     "@itwin/itwinui-icons-react": "^1.10.1",
     "@itwin/itwinui-illustrations-react": "^1.3.1",
     "@tippyjs/react": "^4.2.5",