@itwin/itwinui-react 1.34.1 → 1.36.0

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

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-export { EXPANDER_CELL_ID, useExpanderCell } from './useExpanderCell';
-export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
+export { useExpanderCell } from './useExpanderCell';
+export { useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';

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

@@ -1,4 +1,3 @@
 import React from 'react';
 import { CellProps, Hooks, Row } from 'react-table';
-export declare const EXPANDER_CELL_ID = "iui-table-expander";
 export declare const useExpanderCell: <T extends Record<string, unknown>>(subComponent?: ((row: Row<T>) => React.ReactNode) | undefined, expanderCell?: ((cellProps: CellProps<T, any>) => React.ReactNode) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

package/esm/core/Table/hooks/useExpanderCell.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)) {
@@ -7,44 +18,22 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
-import React from 'react';
-import { IconButton } from '../../Buttons';
-export var EXPANDER_CELL_ID = 'iui-table-expander';
+import { ExpanderColumn, EXPANDER_CELL_ID } from '../columns';
 export var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { return function (hooks) {
     if (!subComponent) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: EXPANDER_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Cell: function (props) {
-                var row = props.row;
-                if (!subComponent(row)) {
-                    return null;
-                }
-                else if (expanderCell) {
-                    return expanderCell(props);
-                }
-                else {
-                    return (React.createElement(IconButton, { className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
-                            e.stopPropagation();
-                            row.toggleRowExpanded();
-                        }, disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(props.row.original) }, React.createElement(SvgChevronRight, null)));
-                }
-            },
+    hooks.allColumns.push(function (columns) {
+        var hasExpanderColumn = columns.find(function (c) { return c.id === EXPANDER_CELL_ID; });
+        if (hasExpanderColumn) {
+            return columns;
         }
-    ], columns, true); });
+        var expanderColumn = ExpanderColumn({
+            subComponent: subComponent,
+            isDisabled: isRowDisabled,
+        });
+        return __spreadArray([
+            __assign(__assign({}, expanderColumn), { Cell: expanderCell !== null && expanderCell !== void 0 ? expanderCell : expanderColumn.Cell })
+        ], columns, true);
+    });
 }; };

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

@@ -225,7 +225,10 @@ var useInstanceBeforeDimensions = function (instance) {
 };
 var getPreviousResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(0, headerIndex)
         .reverse()
@@ -233,7 +236,10 @@ var getPreviousResizableHeader = function (headerColumn, instance) {
 };
 var getNextResizableHeader = function (headerColumn, instance) {
     var _a;
-    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headersList = (((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders).filter(function (_a) {
+        var isVisible = _a.isVisible;
+        return isVisible;
+    });
     var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
     return __spreadArray([], headersList, true).slice(headerIndex + 1)
         .find(function (h) { return !h.disableResizing; });

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

@@ -1,3 +1,2 @@
 import { Hooks } from 'react-table';
-export declare const SELECTION_CELL_ID = "iui-table-checkbox-selector";
 export declare const useSelectionCell: <T extends Record<string, unknown>>(isSelectable: boolean, isRowDisabled?: ((rowData: T) => boolean) | undefined) => (hooks: Hooks<T>) => void;

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

@@ -1,14 +1,3 @@
-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)) {
@@ -18,46 +7,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-/*---------------------------------------------------------------------------------------------
- * 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 { Checkbox } from '../../Checkbox';
-export var SELECTION_CELL_ID = 'iui-table-checkbox-selector';
+import { SelectionColumn, SELECTION_CELL_ID } from '../columns';
 export var useSelectionCell = function (isSelectable, isRowDisabled) { return function (hooks) {
     if (!isSelectable) {
         return;
     }
-    hooks.allColumns.push(function (columns) { return __spreadArray([
-        {
-            id: SELECTION_CELL_ID,
-            disableResizing: true,
-            disableGroupBy: true,
-            minWidth: 48,
-            width: 48,
-            maxWidth: 48,
-            columnClassName: 'iui-slot',
-            cellClassName: 'iui-slot',
-            disableReordering: true,
-            Header: function (_a) {
-                var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
-                var disabled = rows.every(function (row) { return isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original); });
-                var checked = initialRows.every(function (row) {
-                    return state.selectedRowIds[row.id] || (isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original));
-                });
-                return (React.createElement(Checkbox, __assign({}, getToggleAllRowsSelectedProps(), { checked: checked && !disabled, indeterminate: !checked && Object.keys(state.selectedRowIds).length > 0, disabled: disabled })));
-            },
-            Cell: function (_a) {
-                var row = _a.row;
-                return (React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
-            },
-        }
-    ], columns, true); });
-    hooks.useInstanceBeforeDimensions.push(function (_a) {
-        var headerGroups = _a.headerGroups;
-        // Fix the parent group of the selection button to not be resizable
-        var selectionGroupHeader = headerGroups[0].headers[0];
-        selectionGroupHeader.canResize = false;
+    hooks.allColumns.push(function (columns) {
+        return columns.find(function (c) { return c.id === SELECTION_CELL_ID; })
+            ? columns
+            : __spreadArray([SelectionColumn({ isDisabled: isRowDisabled })], columns, true);
     });
 }; };

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

@@ -6,5 +6,6 @@ export { DefaultCell, EditableCell } from './cells';
 export type { DefaultCellProps, EditableCellProps } from './cells';
 export { TablePaginator } from './TablePaginator';
 export type { TablePaginatorProps } from './TablePaginator';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns';
 declare const _default: "./Table";
 export default _default;

package/esm/core/Table/index.js

@@ -6,4 +6,5 @@ export { Table } from './Table';
 export { BaseFilter, FilterButtonBar, tableFilters } from './filters';
 export { DefaultCell, EditableCell } from './cells';
 export { TablePaginator } from './TablePaginator';
+export { ActionColumn, ExpanderColumn, SelectionColumn } from './columns';
 export default './Table';

package/esm/core/Table/utils.js

@@ -6,7 +6,7 @@ export var getCellStyle = function (column, isTableResizing) {
         style.width = width;
         // This allows flexbox to handle the width of the column on table resize
         if (isTableResizing && column.canResize) {
-            style.flex = Number(column.width) + " 1 " + width;
+            style.flex = Number(column.width) + " " + Number(column.width) + " " + width;
         }
         else {
             style.flex = "0 0 " + width;

package/esm/core/Toast/Toast.js

@@ -136,7 +136,7 @@ export var ToastPresentation = function (props) {
     return (React.createElement("div", __assign({ className: cx("iui-toast iui-" + category, className) }, rest),
         React.createElement("div", { className: 'iui-status-area' }, React.createElement(StatusIcon, { className: 'iui-icon' })),
         React.createElement("div", { className: 'iui-message' }, content),
-        link && (React.createElement("a", { className: 'iui-anchor', onClick: link.onClick }, link.title)),
+        link && (React.createElement("a", { className: 'iui-toast-anchor', onClick: link.onClick }, link.title)),
         (type === 'persisting' || hasCloseButton) && (React.createElement(IconButton, { size: 'small', styleType: 'borderless', onClick: onClose, "aria-label": 'Close' },
             React.createElement(SvgCloseSmall, null)))));
 };

package/esm/core/Typography/Anchor/Anchor.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import '@itwin/itwinui-css/css/anchor.css';
 export declare const Anchor: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>> & React.RefAttributes<HTMLAnchorElement>>;
 export default Anchor;

package/esm/core/Typography/Anchor/Anchor.js

@@ -27,6 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import cx from 'classnames';
 import { useTheme } from '../../utils';
+import '@itwin/itwinui-css/css/anchor.css';
 export var Anchor = React.forwardRef(function (_a, ref) {
     var className = _a.className, rest = __rest(_a, ["className"]);
     useTheme();

package/esm/core/index.d.ts

@@ -8,6 +8,8 @@ export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from '.
 export type { ButtonProps, DropdownButtonProps, IconButtonProps, IdeasButtonProps, SplitButtonProps, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
@@ -48,8 +50,8 @@ export { LabeledTextarea } from './LabeledTextarea';
 export type { LabeledTextareaProps } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
 export type { MenuProps, MenuItemProps, MenuDividerProps, MenuExtraContentProps, } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
-export type { ModalProps, ModalButtonBarProps } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
+export type { ModalProps, ModalButtonBarProps, ModalContentProps, } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export type { ProgressLinearProps, ProgressRadialProps, } from './ProgressIndicators';
 export { Radio } from './Radio';
@@ -64,7 +66,7 @@ export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
 export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export type { TagProps, TagContainerProps } from './Tag';

package/esm/core/index.js

@@ -7,6 +7,7 @@ export { Badge } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button, DropdownButton, IconButton, IdeasButton, SplitButton, } from './Buttons';
 export { ButtonGroup } from './ButtonGroup';
+export { Carousel } from './Carousel';
 export { Checkbox } from './Checkbox';
 export { ColorPicker, ColorSwatch, ColorBuilder, ColorInputPanel, ColorPalette, } from './ColorPicker';
 export { ComboBox } from './ComboBox';
@@ -27,7 +28,7 @@ export { InputGroup } from './InputGroup';
 export { LabeledSelect } from './LabeledSelect';
 export { LabeledTextarea } from './LabeledTextarea';
 export { Menu, MenuItem, MenuDivider, MenuExtraContent } from './Menu';
-export { Modal, ModalButtonBar } from './Modal';
+export { Modal, ModalButtonBar, ModalContent } from './Modal';
 export { ProgressLinear, ProgressRadial } from './ProgressIndicators';
 export { Radio } from './Radio';
 export { RadioTile, RadioTileGroup } from './RadioTiles';
@@ -35,7 +36,7 @@ export { Select } from './Select';
 export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, } from './SideNavigation';
 export { Slider } from './Slider';
 export { StatusMessage } from './StatusMessage';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
+export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export { Textarea } from './Textarea';
 export { Tile } from './Tile';

package/esm/core/utils/components/Popover.js

@@ -72,7 +72,19 @@ export var Popover = React.forwardRef(function (props, ref) {
         };
     }
     else {
-        computedProps.content = mounted ? props.content : '';
+        // Fixing issue where elements below Popover gets click events.
+        // Tippy uses react Portal, which propagates events by react tree, not dom tree.
+        // Read more: https://reactjs.org/docs/portals.html#event-bubbling-through-portals
+        var clonedContent = React.isValidElement(props.content)
+            ? React.cloneElement(props.content, {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.stopPropagation();
+                    (_b = (_a = props.content.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            })
+            : props.content;
+        computedProps.content = mounted ? clonedContent : '';
     }
     return React.createElement(Tippy, __assign({}, computedProps, { ref: refs }));
 });

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

@@ -5,3 +5,4 @@ export * from './useResizeObserver';
 export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
+export * from './useMediaQuery';

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

@@ -9,3 +9,4 @@ export * from './useResizeObserver';
 export * from './useContainerWidth';
 export * from './useTheme';
 export * from './useIntersection';
+export * from './useMediaQuery';

package/esm/core/utils/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare const useMediaQuery: (queryString: string) => boolean;
+export default useMediaQuery;

package/esm/core/utils/hooks/useMediaQuery.js

@@ -0,0 +1,39 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { getWindow } from '../functions';
+export var useMediaQuery = function (queryString) {
+    var _a = React.useState(), matches = _a[0], setMatches = _a[1];
+    React.useLayoutEffect(function () {
+        var _a, _b, _c;
+        var mediaQueryList = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.matchMedia) === null || _b === void 0 ? void 0 : _b.call(_a, queryString);
+        var handleChange = function (_a) {
+            var matches = _a.matches;
+            return setMatches(matches);
+        };
+        if (mediaQueryList != undefined) {
+            setMatches(mediaQueryList.matches);
+            try {
+                mediaQueryList.addEventListener('change', handleChange);
+            }
+            catch (_d) {
+                // Safari 13 fallback
+                (_c = mediaQueryList.addListener) === null || _c === void 0 ? void 0 : _c.call(mediaQueryList, handleChange);
+            }
+        }
+        return function () {
+            var _a;
+            try {
+                mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeEventListener('change', handleChange);
+            }
+            catch (_b) {
+                // Safari 13 fallback
+                (_a = mediaQueryList === null || mediaQueryList === void 0 ? void 0 : mediaQueryList.removeListener) === null || _a === void 0 ? void 0 : _a.call(mediaQueryList, handleChange);
+            }
+        };
+    }, [queryString]);
+    return !!matches;
+};
+export default useMediaQuery;

package/esm/core/utils/hooks/useTheme.d.ts

@@ -6,6 +6,11 @@ export declare type ThemeOptions = {
      * @default document
      */
     ownerDocument?: Document;
+    /**
+     * Whether to apply high-contrast versions of light and dark themes.
+     * Will default to user preference if browser supports it.
+     */
+    highContrast?: boolean;
 };
 export declare type ThemeType = 'light' | 'dark' | 'os';
 /**

package/esm/core/utils/hooks/useTheme.js

@@ -5,6 +5,7 @@
 import React from 'react';
 import '@itwin/itwinui-css/css/global.css';
 import { getDocument, getWindow } from '../functions/dom';
+import { useMediaQuery } from './useMediaQuery';
 /**
  * Hook that applies styling and theme to all components.
  * Defaults to light theme if none provided or set elsewhere.
@@ -14,6 +15,8 @@ import { getDocument, getWindow } from '../functions/dom';
 export var useTheme = function (theme, themeOptions) {
     var _a;
     var ownerDocument = (_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.ownerDocument) !== null && _a !== void 0 ? _a : getDocument();
+    var prefersHighContrast = useMediaQuery('(prefers-contrast: more)');
+    var highContrast = React.useMemo(function () { var _a; return !!((_a = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast) !== null && _a !== void 0 ? _a : prefersHighContrast); }, [prefersHighContrast, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.highContrast]);
     React.useLayoutEffect(function () {
         if (!(ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.contains('iui-body'))) {
             ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body.classList.add('iui-body');
@@ -28,20 +31,20 @@ export var useTheme = function (theme, themeOptions) {
         var addOSTheme = function (_a) {
             var isDark = _a.matches;
             if (isDark) {
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
             else {
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
             }
         };
         switch (theme) {
             case 'light':
                 (_c = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addLightTheme(ownerDocument);
+                applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'dark':
                 (_d = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _d === void 0 ? void 0 : _d.call(prefersDarkMediaQuery, 'change', addOSTheme);
-                addDarkTheme(ownerDocument);
+                applyTheme('dark', { ownerDocument: ownerDocument, highContrast: highContrast });
                 break;
             case 'os':
                 if (prefersDarkMediaQuery != undefined) {
@@ -49,25 +52,28 @@ export var useTheme = function (theme, themeOptions) {
                     (_e = prefersDarkMediaQuery.addEventListener) === null || _e === void 0 ? void 0 : _e.call(prefersDarkMediaQuery, 'change', addOSTheme);
                 }
                 else {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
                 break;
             default:
                 if (ownerDocument.documentElement.className.indexOf('iui-theme') === -1) {
-                    addLightTheme(ownerDocument);
+                    applyTheme('light', { ownerDocument: ownerDocument, highContrast: highContrast });
                 }
         }
         return function () {
             var _a;
             (_a = prefersDarkMediaQuery === null || prefersDarkMediaQuery === void 0 ? void 0 : prefersDarkMediaQuery.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prefersDarkMediaQuery, 'change', addOSTheme);
         };
-    }, [ownerDocument, theme]);
+    }, [highContrast, ownerDocument, theme]);
 };
-var addLightTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-light');
-    ownerDocument.documentElement.classList.remove('iui-theme-dark');
-};
-var addDarkTheme = function (ownerDocument) {
-    ownerDocument.documentElement.classList.add('iui-theme-dark');
-    ownerDocument.documentElement.classList.remove('iui-theme-light');
+var applyTheme = function (theme, _a) {
+    var ownerDocument = _a.ownerDocument, highContrast = _a.highContrast;
+    var classList = ownerDocument.documentElement.classList;
+    var currentTheme = Array.from(classList).find(function (cls) {
+        return cls.startsWith('iui-theme');
+    });
+    if (currentTheme) {
+        classList.remove(currentTheme);
+    }
+    classList.add("iui-theme-" + theme + (highContrast ? '-hc' : ''));
 };

package/esm/types/react-table-config.d.ts

@@ -2,9 +2,22 @@
 declare module 'react-table' {
     type FieldType = 'text' | 'number' | 'date' | string;
     type CellRendererProps<D extends object = {}> = {
+        /**
+         * Cell HTML props passed from the Table.
+         */
         cellElementProps: TableCellProps;
+        /**
+         * Table specific cell props like `column`, `row`.
+         */
         cellProps: CellProps<D>;
+        /**
+         * Cell's content.
+         */
         children: React.ReactNode;
+        /**
+         * Function that returns whether the cell is disabled.
+         */
+        isDisabled?: (rowData: D) => boolean;
     };
     interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
@@ -73,6 +86,11 @@ declare module 'react-table' {
          * @default false
          */
         disableReordering?: boolean;
+        /**
+         * If true, column's visibility cannot be toggled.
+         * @default false
+         */
+        disableToggleVisibility?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.34.1",
+  "version": "1.36.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.52.0",
+    "@itwin/itwinui-css": "^0.54.1",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-essentials": "~6.4.19",
     "@storybook/addon-storysource": "~6.4.19",
     "@storybook/addons": "~6.4.19",