@itwin/itwinui-react 1.34.2 → 1.37.0

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

@@ -45,6 +45,11 @@ export declare type ModalProps = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Type of the modal.
+     * @default 'default'
+     */
+    styleType?: 'default' | 'fullPage';
     /**
      * Content of the modal.
      */

package/esm/core/Modal/Modal.js

@@ -31,6 +31,7 @@ import SvgClose from '@itwin/itwinui-icons-react/cjs/icons/Close';
 import { useTheme, getContainer, getDocument, FocusTrap, } from '../utils';
 import '@itwin/itwinui-css/css/modal.css';
 import { IconButton } from '../Buttons/IconButton';
+import { CSSTransition } from 'react-transition-group';
 /**
  * Modal component which can wrap any content.
  * @example
@@ -53,7 +54,7 @@ import { IconButton } from '../Buttons/IconButton';
  * </Modal>
  */
 export var Modal = function (props) {
-    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.modalRootId, modalRootId = _e === void 0 ? 'iui-react-portal-container' : _e, _f = props.ownerDocument, ownerDocument = _f === void 0 ? getDocument() : _f, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "modalRootId", "ownerDocument"]);
+    var _a = props.isOpen, isOpen = _a === void 0 ? false : _a, _b = props.isDismissible, isDismissible = _b === void 0 ? true : _b, _c = props.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = props.closeOnExternalClick, closeOnExternalClick = _d === void 0 ? true : _d, onClose = props.onClose, title = props.title, onKeyDown = props.onKeyDown, id = props.id, className = props.className, style = props.style, children = props.children, _e = props.styleType, styleType = _e === void 0 ? 'default' : _e, _f = props.modalRootId, modalRootId = _f === void 0 ? 'iui-react-portal-container' : _f, _g = props.ownerDocument, ownerDocument = _g === void 0 ? getDocument() : _g, rest = __rest(props, ["isOpen", "isDismissible", "closeOnEsc", "closeOnExternalClick", "onClose", "title", "onKeyDown", "id", "className", "style", "children", "styleType", "modalRootId", "ownerDocument"]);
     useTheme();
     var container = getContainer(modalRootId, ownerDocument);
     var overlayRef = React.useRef(null);
@@ -111,13 +112,14 @@ export var Modal = function (props) {
             onClose(event);
         }
     };
-    return !!container ? (ReactDOM.createPortal(isOpen && (React.createElement(FocusTrap, null,
-        React.createElement("div", __assign({ className: cx('iui-modal', 'iui-modal-visible', className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
-            React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
-                React.createElement("div", { className: 'iui-title-bar' },
-                    React.createElement("div", { className: 'iui-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));
+    return !!container ? (ReactDOM.createPortal(React.createElement(CSSTransition, { in: isOpen, classNames: 'iui-modal-animation', timeout: { exit: 600 }, unmountOnExit: true },
+        React.createElement(FocusTrap, null,
+            React.createElement("div", __assign({ className: cx('iui-modal', { 'iui-modal-full-page': styleType === 'fullPage' }, { 'iui-modal-visible': isOpen }, className), tabIndex: -1, onKeyDown: handleKeyDown, ref: overlayRef, onMouseDown: handleMouseDown }, rest),
+                React.createElement("div", { className: 'iui-modal-dialog', id: id, style: style, role: 'dialog', "aria-modal": 'true' },
+                    React.createElement("div", { className: 'iui-title-bar' },
+                        React.createElement("div", { className: 'iui-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/Modal/ModalContent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/modal.css';
+export declare type ModalContentProps = {
+    /**
+     * Main content in the `Modal`.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * Container for content in `Modal`.
+ */
+export declare const ModalContent: (props: ModalContentProps) => JSX.Element;
+export default ModalContent;

package/esm/core/Modal/ModalContent.js

@@ -0,0 +1,39 @@
+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/modal.css';
+/**
+ * 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-modal-content', className) }, rest), children));
+};
+export default ModalContent;

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

@@ -2,5 +2,7 @@ export { Modal } from './Modal';
 export type { ModalProps } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
 export type { ModalButtonBarProps } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
+export type { ModalContentProps } from './ModalContent';
 declare const _default: "./Modal";
 export default _default;

package/esm/core/Modal/index.js

@@ -4,4 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { Modal } from './Modal';
 export { ModalButtonBar } from './ModalButtonBar';
+export { ModalContent } from './ModalContent';
 export default './Modal';

package/esm/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/skip-to-content.css';
+export declare type SkipToContentLinkProps = {
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<'a'>, 'href'>;
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export declare const SkipToContentLink: React.ForwardRefExoticComponent<{
+    /**
+     * The id of the main content that the link directs to. Don't forget the #!
+     */
+    href: string;
+    /**
+     * Localize 'Skip to main content' label.
+     * @default 'Skip to main content'
+     */
+    children?: React.ReactNode;
+} & Omit<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href"> & React.RefAttributes<HTMLAnchorElement>>;
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -0,0 +1,44 @@
+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/skip-to-content.css';
+/**
+ * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
+ * Provides a shortcut to the main content of the page without navigating through the header, etc.
+ * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
+ * @example
+ * <body><SkipToContentLink href='#main-content-id' /> ... </body>
+ * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
+ */
+export var SkipToContentLink = React.forwardRef(function (props, ref) {
+    var _a = props.children, children = _a === void 0 ? 'Skip to main content' : _a, className = props.className, rest = __rest(props, ["children", "className"]);
+    useTheme();
+    return (React.createElement("a", __assign({ ref: ref, className: cx('iui-skip-to-content-link', className) }, rest), children));
+});
+export default SkipToContentLink;

package/esm/core/SkipToContentLink/index.d.ts

@@ -0,0 +1,4 @@
+export { SkipToContentLink } from './SkipToContentLink';
+export type { SkipToContentLinkProps } from './SkipToContentLink';
+declare const _default: "./SkipToContentLink";
+export default _default;

package/esm/core/SkipToContentLink/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { SkipToContentLink } from './SkipToContentLink';
+export default './SkipToContentLink';

package/esm/core/Surface/Surface.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CommonProps } from '../utils';
+import '@itwin/itwinui-css/css/surface.css';
+export declare type SurfaceProps = {
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, 'title'>;
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+export declare const Surface: React.ForwardRefExoticComponent<{
+    /**
+     * Sets the elevation of the surface
+     * @default 0
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+    /**
+     * Content in the surface.
+     */
+    children: React.ReactNode;
+} & Omit<CommonProps, "title"> & React.RefAttributes<HTMLDivElement>>;
+export default Surface;

package/esm/core/Surface/Surface.js

@@ -0,0 +1,64 @@
+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, getWindow } from '../utils';
+import '@itwin/itwinui-css/css/surface.css';
+/**
+ * Helper function that returns one of the preset surface elevation values.
+ */
+var getSurfaceElevationValue = function (elevation) {
+    switch (elevation) {
+        case 1:
+            return '0 1px 5px rgba(0, 0, 0, 0.25)';
+        case 2:
+            return '0 1px 10px rgba(0, 0, 0, 0.25)';
+        case 3:
+            return '0 3px 14px rgba(0, 0, 0, 0.25)';
+        case 4:
+            return '0 6px 30px rgba(0, 0, 0, 0.25)';
+        case 5:
+            return '0 9px 46px rgba(0, 0, 0, 0.25)';
+        default:
+            return 'none';
+    }
+};
+/**
+ * The Surface container allows content to appear elevated through the use of a drop shadow
+ * @example
+ * <Surface>Surface Content</Surface>
+ * <Surface elevation={2}>Surface Content</Surface>
+ */
+export var Surface = React.forwardRef(function (props, ref) {
+    var _a, _b, _c;
+    var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    useTheme();
+    var _style = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: " + getSurfaceElevationValue(elevation)))
+        ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
+    return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
+});
+export default Surface;

package/esm/core/Surface/index.d.ts

@@ -0,0 +1,4 @@
+export { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+declare const _default: "./Surface";
+export default _default;

package/esm/core/Surface/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { Surface } from './Surface';
+export default './Surface';

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

@@ -3,6 +3,7 @@ import { CellProps, TableOptions, Row, TableState } from 'react-table';
 import { CommonProps } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
 import { TableFilterValue } from './filters';
+export declare const tableResizeStartAction = "tableResizeStart";
 export declare type TablePaginatorRendererProps = {
     /**
      * The zero-based index of the current page.
@@ -63,6 +64,12 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * Handler for when a row is clicked. Must be memoized.
      */
     onRowClick?: (event: React.MouseEvent, row: Row<T>) => void;
+    /**
+     * Modify the selection mode of the table.
+     * The column with checkboxes will not be present with 'single' selection mode.
+     * @default 'multi'
+     */
+    selectionMode?: 'multi' | 'single';
     /**
      * Flag whether table columns can be sortable.
      * @default false

package/esm/core/Table/Table.js

@@ -37,12 +37,11 @@ import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
 import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, } from './hooks';
-import { onExpandHandler, onFilterHandler, onSelectHandler, } from './actionHandlers';
-import { onSingleSelectHandler } from './actionHandlers/selectHandler';
-import { onTableResizeEnd, onTableResizeStart, } from './actionHandlers/resizeHandler';
+import { onExpandHandler, onFilterHandler, onSelectHandler, onSingleSelectHandler, onTableResizeEnd, onTableResizeStart, } from './actionHandlers';
 import VirtualScroll from '../utils/components/VirtualScroll';
+import { SELECTION_CELL_ID } from './columns';
 var singleRowSelectedAction = 'singleRowSelected';
-var tableResizeStartAction = 'tableResizeStart';
+export var tableResizeStartAction = 'tableResizeStart';
 var tableResizeEndAction = 'tableResizeEnd';
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
@@ -88,9 +87,10 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 export var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, _o = props.enableColumnReordering, enableColumnReordering = _o === void 0 ? false : _o, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var _b;
+    var data = props.data, columns = props.columns, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _d = props.isSelectable, isSelectable = _d === void 0 ? false : _d, onSelect = props.onSelect, onRowClick = props.onRowClick, _e = props.selectionMode, selectionMode = _e === void 0 ? 'multi' : _e, _f = props.isSortable, isSortable = _f === void 0 ? false : _f, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _g = props.intersectionMargin, intersectionMargin = _g === void 0 ? 300 : _g, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _h = props.density, density = _h === void 0 ? 'default' : _h, _j = props.selectSubRows, selectSubRows = _j === void 0 ? true : _j, getSubRows = props.getSubRows, _k = props.selectRowOnClick, selectRowOnClick = _k === void 0 ? true : _k, paginatorRenderer = props.paginatorRenderer, _l = props.pageSize, pageSize = _l === void 0 ? 25 : _l, _m = props.isResizable, isResizable = _m === void 0 ? false : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     useTheme();
-    var _p = React.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
+    var _r = React.useState(), ownerDocument = _r[0], setOwnerDocument = _r[1];
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -103,6 +103,7 @@ export var Table = function (props) {
         onBottomReachedRef.current = onBottomReached;
         onRowInViewportRef.current = onRowInViewport;
     }, [onBottomReached, onRowInViewport]);
+    var hasManualSelectionColumn = (_b = columns[0]) === null || _b === void 0 ? void 0 : _b.columns.some(function (column) { return column.id === SELECTION_CELL_ID; });
     var tableStateReducer = React.useCallback(function (newState, action, previousState, instance) {
         switch (action.type) {
             case TableActions.toggleSortBy:
@@ -116,13 +117,17 @@ export var Table = function (props) {
                 onExpandHandler(newState, instance, onExpand);
                 break;
             case singleRowSelectedAction: {
-                newState = onSingleSelectHandler(newState, action, instance, onSelect, isRowDisabled);
+                newState = onSingleSelectHandler(newState, action, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case TableActions.toggleRowSelected:
             case TableActions.toggleAllRowsSelected:
             case TableActions.toggleAllPageRowsSelected: {
-                onSelectHandler(newState, instance, onSelect, isRowDisabled);
+                onSelectHandler(newState, instance, onSelect, 
+                // If it has manual selection column, then we can't check whether row is disabled
+                hasManualSelectionColumn ? undefined : isRowDisabled);
                 break;
             }
             case tableResizeStartAction: {
@@ -139,14 +144,22 @@ export var Table = function (props) {
         return stateReducer
             ? stateReducer(newState, action, previousState, instance)
             : newState;
-    }, [isRowDisabled, onExpand, onFilter, onSelect, onSort, stateReducer]);
+    }, [
+        hasManualSelectionColumn,
+        isRowDisabled,
+        onExpand,
+        onFilter,
+        onSelect,
+        onSort,
+        stateReducer,
+    ]);
     var filterTypes = React.useMemo(function () { return (__assign(__assign({}, customFilterFunctions), filterFunctions)); }, [filterFunctions]);
     var hasAnySubRows = React.useMemo(function () {
         return data.some(function (item, index) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
+    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, selectionMode, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -158,8 +171,14 @@ export var Table = function (props) {
     var areFiltersSet = allColumns.some(function (column) { return !!column.filterValue; });
     var onRowClickHandler = React.useCallback(function (event, row) {
         var isDisabled = isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original);
-        if (isSelectable && !isDisabled && selectRowOnClick) {
-            if (!row.isSelected && !event.ctrlKey) {
+        if (!isDisabled) {
+            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
+        }
+        if (isSelectable &&
+            !isDisabled &&
+            selectRowOnClick &&
+            !event.isDefaultPrevented()) {
+            if (!row.isSelected && (selectionMode === 'single' || !event.ctrlKey)) {
                 dispatch({
                     type: singleRowSelectedAction,
                     id: row.id,
@@ -169,10 +188,14 @@ export var Table = function (props) {
                 row.toggleRowSelected(!row.isSelected);
             }
         }
-        if (!isDisabled) {
-            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(event, row);
-        }
-    }, [isRowDisabled, isSelectable, selectRowOnClick, dispatch, onRowClick]);
+    }, [
+        isRowDisabled,
+        isSelectable,
+        selectRowOnClick,
+        selectionMode,
+        dispatch,
+        onRowClick,
+    ]);
     React.useEffect(function () {
         setPageSize(pageSize);
     }, [pageSize, setPageSize]);
@@ -228,11 +251,12 @@ export var Table = function (props) {
     });
     var headerRef = React.useRef(null);
     var bodyRef = React.useRef(null);
-    var getPreparedRow = React.useCallback(function (row) {
+    var getPreparedRow = React.useCallback(function (index) {
+        var row = page[index];
         prepareRow(row);
-        return (React.createElement(TableRowMemoized, { row: row, rowProps: rowProps, isLast: row.index === data.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 }));
     }, [
-        data.length,
+        page,
         expanderCell,
         hasAnySubRows,
         instance,
@@ -244,7 +268,7 @@ export var Table = function (props) {
         state,
         subComponent,
     ]);
-    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(page[index]); }, [getPreparedRow, page]);
+    var virtualizedItemRenderer = React.useCallback(function (index) { return getPreparedRow(index); }, [getPreparedRow]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({ ref: function (element) {
                 setOwnerDocument(element === null || element === void 0 ? void 0 : element.ownerDocument);
@@ -268,8 +292,8 @@ export var Table = function (props) {
                             }
                         } }),
                         column.render('Header'),
-                        !isLoading && (data.length != 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
-                        !isLoading && data.length != 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
+                        (data.length !== 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
+                        data.length !== 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
@@ -287,7 +311,7 @@ export var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                     }
                 }, tabIndex: -1 }),
-                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (page.map(function (row) { return getPreparedRow(row); })))),
+                data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer })) : (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/TableCell.js

@@ -17,7 +17,7 @@ import React from 'react';
 import cx from 'classnames';
 import { getCellStyle } from './utils';
 import { SubRowExpander } from './SubRowExpander';
-import { SELECTION_CELL_ID } from './hooks';
+import { SELECTION_CELL_ID } from './columns';
 import { DefaultCell } from './cells';
 export var TableCell = function (props) {
     var cell = props.cell, cellIndex = props.cellIndex, isDisabled = props.isDisabled, tableHasSubRows = props.tableHasSubRows, tableInstance = props.tableInstance, expanderCell = props.expanderCell;
@@ -46,6 +46,6 @@ export var TableCell = function (props) {
         cellProps: cellProps,
         children: cellContent,
     };
-    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(cellRendererProps)) : (React.createElement(DefaultCell, __assign({}, cellRendererProps)))));
+    return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (React.createElement(DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
 };
 export default TableCell;

package/esm/core/Table/TableRowMemoized.js

@@ -51,7 +51,9 @@ export var TableRow = function (props) {
             return (React.createElement(TableCell, { key: cell.getCellProps().key, cell: cell, cellIndex: index, isDisabled: isDisabled, tableHasSubRows: tableHasSubRows, tableInstance: tableInstance, expanderCell: expanderCell }));
         })),
         subComponent && (React.createElement(WithCSSTransition, { in: row.isExpanded },
-            React.createElement("div", { className: 'iui-row iui-expanded-content' }, subComponent(row))))));
+            React.createElement("div", { className: cx('iui-row', 'iui-expanded-content', {
+                    'iui-disabled': isDisabled,
+                }) }, subComponent(row))))));
 };
 var hasAnySelectedSubRow = function (row, selectedRowIds) {
     if (selectedRowIds === null || selectedRowIds === void 0 ? void 0 : selectedRowIds[row.id]) {
@@ -62,14 +64,17 @@ var hasAnySelectedSubRow = function (row, selectedRowIds) {
     });
 };
 export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g;
     return prevProp.isLast === nextProp.isLast &&
+        ((_a = prevProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a.length) ===
+            ((_b = nextProp.state.hiddenColumns) === null || _b === void 0 ? void 0 : _b.length) &&
+        !!((_c = prevProp.state.hiddenColumns) === null || _c === void 0 ? void 0 : _c.every(function (column, index) { var _a; return ((_a = nextProp.state.hiddenColumns) === null || _a === void 0 ? void 0 : _a[index]) === column; })) &&
         prevProp.onRowInViewport === nextProp.onRowInViewport &&
         prevProp.onBottomReached === nextProp.onBottomReached &&
         prevProp.onClick === nextProp.onClick &&
         prevProp.row.original === nextProp.row.original &&
-        ((_a = prevProp.state.selectedRowIds) === null || _a === void 0 ? void 0 : _a[prevProp.row.id]) ===
-            ((_b = nextProp.state.selectedRowIds) === null || _b === void 0 ? void 0 : _b[nextProp.row.id]) &&
+        ((_d = prevProp.state.selectedRowIds) === null || _d === void 0 ? void 0 : _d[prevProp.row.id]) ===
+            ((_e = nextProp.state.selectedRowIds) === null || _e === void 0 ? void 0 : _e[nextProp.row.id]) &&
         // Check if sub-rows selection has changed and whether to show indeterminate state or not
         prevProp.row.subRows.some(function (subRow) {
             return hasAnySelectedSubRow(subRow, prevProp.state.selectedRowIds);
@@ -77,8 +82,8 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
             nextProp.row.subRows.some(function (subRow) {
                 return hasAnySelectedSubRow(subRow, nextProp.state.selectedRowIds);
             }) &&
-        ((_c = prevProp.state.expanded) === null || _c === void 0 ? void 0 : _c[prevProp.row.id]) ===
-            ((_d = nextProp.state.expanded) === null || _d === void 0 ? void 0 : _d[nextProp.row.id]) &&
+        ((_f = prevProp.state.expanded) === null || _f === void 0 ? void 0 : _f[prevProp.row.id]) ===
+            ((_g = nextProp.state.expanded) === null || _g === void 0 ? void 0 : _g[nextProp.row.id]) &&
         prevProp.subComponent === nextProp.subComponent &&
         prevProp.row.cells.every(function (cell, index) { return nextProp.row.cells[index].column === cell.column; }) &&
         prevProp.isDisabled === nextProp.isDisabled &&
@@ -87,5 +92,5 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
         prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
-        !nextProp.state.isTableResizing;
+        prevProp.state.isTableResizing === nextProp.state.isTableResizing;
 });

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

@@ -1,3 +1,4 @@
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

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

@@ -4,4 +4,5 @@
  *--------------------------------------------------------------------------------------------*/
 export { onExpandHandler } from './expandHandler';
 export { onFilterHandler } from './filterHandler';
-export { onSelectHandler } from './selectHandler';
+export { onSelectHandler, onSingleSelectHandler } from './selectHandler';
+export { onTableResizeStart, onTableResizeEnd } from './resizeHandler';

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

@@ -12,5 +12,5 @@ export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRe
  *   cellRenderer: (props) => <DefaultCell {...props} />,
  * }
  */
-export declare const DefaultCell: <T extends Record<string, unknown>>(props: CellRendererProps<T>) => JSX.Element;
+export declare const DefaultCell: <T extends Record<string, unknown>>(props: DefaultCellProps<T>) => JSX.Element;
 export default DefaultCell;