@itwin/itwinui-react 2.12.14 → 2.12.16

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.12.16
+
+### Patch Changes
+
+- fa3a1c35: Made Table's Ctrl+Shift click implementation more consistent with Windows Explorer's implementation.
+- fa3a1c35: Fixed occasional mismatch between the Table's visually selected rows and Table state's selected rows
+- 9f7f66a0: Memoized `useId` fallback for react 17, to prevent unnecessary rerenders.
+
+## 2.12.15
+
+### Patch Changes
+
+- df057f24: Fixed `ThemeProvider` to correctly inherit `highContrast` option when using `theme="inherit"`.
+
 ## 2.12.14
 
 ### Patch Changes

package/cjs/core/Table/actionHandlers/selectHandler.d.ts

@@ -1,4 +1,4 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState, IdType } from 'react-table';
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     lastSelectedRowId: any;
     selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
+    columnOrder: IdType<T>[];
+    expanded: Record<IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: IdType<T>[];
     pageSize: number;
     pageIndex: number;
     rowState: Record<string, {

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onToggleHandler = void 0;
 /**
  * Handles subrow selection and validation.
+ * - Calls onSelect() with selected data
  * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
@@ -83,19 +84,21 @@ const onShiftSelectHandler = (state, action, instance, onSelect, isRowDisabled)
         startIndex = endIndex;
         endIndex = temp;
     }
+    const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
+        !!state.selectedRowIds[state.lastSelectedRowId];
     // If ctrl + shift click, do not lose previous selection
     // If shift click, start new selection
     const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
+        ? { ...state.selectedRowIds }
         : {};
-    // 1. Select all rows between start and end
+    // 1. All rows between start and end are assigned the state of the last selected row
     instance.flatRows
         .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
+        .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+    // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
     // Since lastRow's children come after endIndex + 1 (not selected in step 1)
     const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
         row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.flatRows[endIndex]);

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -62,15 +62,19 @@ const useStyles_js_1 = require("../utils/hooks/useStyles.js");
  * </ThemeProvider>
  */
 exports.ThemeProvider = React.forwardRef((props, ref) => {
-    var _a, _b;
-    const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
+    var _a, _b, _c, _d;
+    const { theme: themeProp, children, themeOptions = {}, includeCss = { withLayer: true }, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
     const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(exports.ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
+    // default inherit highContrast option from parent if also inheriting base theme
+    (_b = themeOptions.highContrast) !== null && _b !== void 0 ? _b : (themeOptions.highContrast = themeProp === 'inherit'
+        ? (_c = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _c === void 0 ? void 0 : _c.highContrast
+        : undefined);
     const newStylesLoaded = React.useRef(false);
-    const stylesLoaded = (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _b !== void 0 ? _b : newStylesLoaded;
+    const stylesLoaded = (_d = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
     const contextValue = React.useMemo(() => ({
         theme,
         themeOptions,

package/cjs/core/utils/hooks/useId.js

@@ -43,4 +43,4 @@ exports.useId = useId;
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => (0, numbers_js_1.getRandomValue)(10));
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => React.useMemo(() => (0, numbers_js_1.getRandomValue)(10), []));

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

@@ -1,4 +1,4 @@
-import type { ActionType, TableInstance, TableState } from 'react-table';
+import type { ActionType, TableInstance, TableState, IdType } from 'react-table';
 /**
  * Handles selection when toggling a row (Ctrl click or checkbox click)
  */
@@ -9,7 +9,7 @@ export declare const onToggleHandler: <T extends Record<string, unknown>>(newSta
 export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(state: TableState<T>, action: ActionType, instance?: TableInstance<T> | undefined, onSelect?: ((selectedData: T[] | undefined, tableState?: TableState<T> | undefined) => void) | undefined, isRowDisabled?: ((rowData: T) => boolean) | undefined) => {
     lastSelectedRowId: any;
     selectedRowIds: Record<string, boolean>;
-    hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    hiddenColumns?: IdType<T>[] | undefined;
     columnResizing: {
         startX?: number | undefined;
         columnWidth?: number | undefined;
@@ -25,11 +25,11 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isScrolledToRight?: boolean | undefined;
         isScrolledToLeft?: boolean | undefined;
     };
-    columnOrder: import("react-table").IdType<T>[];
-    expanded: Record<import("react-table").IdType<T>, boolean>;
+    columnOrder: IdType<T>[];
+    expanded: Record<IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
     globalFilter: any;
-    groupBy: import("react-table").IdType<T>[];
+    groupBy: IdType<T>[];
     pageSize: number;
     pageIndex: number;
     rowState: Record<string, {

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

@@ -1,5 +1,6 @@
 /**
  * Handles subrow selection and validation.
+ * - Calls onSelect() with selected data
  * - Subrow selection: Selecting a row and calling this method automatically selects all the subrows that can be selected
  * - Validation: Ensures that any disabled/unselectable row/subrow is not selected
  */
@@ -78,19 +79,21 @@ export const onShiftSelectHandler = (state, action, instance, onSelect, isRowDis
         startIndex = endIndex;
         endIndex = temp;
     }
+    const isLastSelectedRowIdSelected = state.lastSelectedRowId == null || // When no row is selected before shift click, start selecting from first row to clicked row
+        !!state.selectedRowIds[state.lastSelectedRowId];
     // If ctrl + shift click, do not lose previous selection
     // If shift click, start new selection
     const selectedRowIds = !!action.ctrlPressed
-        ? state.selectedRowIds
+        ? { ...state.selectedRowIds }
         : {};
-    // 1. Select all rows between start and end
+    // 1. All rows between start and end are assigned the state of the last selected row
     instance.flatRows
         .slice(startIndex, endIndex + 1)
-        .forEach((r) => (selectedRowIds[r.id] = true));
-    // 2. Select all children of the last row (endIndex)
+        .forEach((r) => (selectedRowIds[r.id] = isLastSelectedRowIdSelected));
+    // 2. All children of the last row (endIndex) also are assigned the state of the last selected row
     // Since lastRow's children come after endIndex + 1 (not selected in step 1)
     const handleRow = (row) => {
-        selectedRowIds[row.id] = true;
+        selectedRowIds[row.id] = isLastSelectedRowIdSelected;
         row.subRows.forEach((r) => handleRow(r));
     };
     handleRow(instance.flatRows[endIndex]);

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -33,15 +33,19 @@ import { useStyles } from '../utils/hooks/useStyles.js';
  * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a, _b;
-    const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
+    var _a, _b, _c, _d;
+    const { theme: themeProp, children, themeOptions = {}, includeCss = { withLayer: true }, ...rest } = props;
     const rootRef = React.useRef(null);
     const mergedRefs = useMergedRefs(rootRef, ref);
     const hasChildren = React.Children.count(children) > 0;
     const parentContext = React.useContext(ThemeContext);
     const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
+    // default inherit highContrast option from parent if also inheriting base theme
+    (_b = themeOptions.highContrast) !== null && _b !== void 0 ? _b : (themeOptions.highContrast = themeProp === 'inherit'
+        ? (_c = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _c === void 0 ? void 0 : _c.highContrast
+        : undefined);
     const newStylesLoaded = React.useRef(false);
-    const stylesLoaded = (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _b !== void 0 ? _b : newStylesLoaded;
+    const stylesLoaded = (_d = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
     const contextValue = React.useMemo(() => ({
         theme,
         themeOptions,

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

@@ -16,4 +16,4 @@ export const useId = () => {
 // This is needed to avoid bundlers trying to import non-existing export.
 // Read more: https://github.com/webpack/webpack/issues/14814
 const _React = React;
-const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => getRandomValue(10));
+const useUniqueValue = (_a = _React.useId) !== null && _a !== void 0 ? _a : (() => React.useMemo(() => getRandomValue(10), []));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.12.14",
+  "version": "2.12.16",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",