@itwin/itwinui-react 2.12.24 → 2.12.26

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.12.26
+
+### Patch Changes
+
+- [#1949](https://github.com/iTwin/iTwinUI/pull/1949): ThemeProvider will now correctly inherit theme changes from a v3 ancestor.
+
+## 2.12.25
+
+### Patch Changes
+
+- b517fd0c: Fixed a bug in `Table` where `initialState.columnOrder` was not being respected.
+
 ## 2.12.24
 
 ### Patch Changes

package/README.md

@@ -27,6 +27,10 @@ The goal of this package is to provide React components that make it easier to u
 
 ---
 
+🆕 **iTwinUI v3** is now available! To upgrade from an older version, check out the [v3 migration guide](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v3-migration-guide).
+
+---
+
 ## Installation
 
 ```

package/cjs/core/Table/Table.js

@@ -298,7 +298,8 @@ const Table = (props) => {
     // This is to avoid the old columnOrder from affecting the new columns' columnOrder
     React.useEffect(() => {
         // Check if columns have changed (by value)
-        if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+        if (lastPassedColumns.current.length > 0 &&
+            JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
             instance.setColumnOrder([]);
         }
         lastPassedColumns.current = columns;

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -62,19 +62,17 @@ const useStyles_js_1 = require("../utils/hooks/useStyles.js");
  * </ThemeProvider>
  */
 exports.ThemeProvider = React.forwardRef((props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     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;
+    const parent = useParentThemeAndContext(rootRef);
+    const theme = themeProp === 'inherit' ? (_a = parent.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);
+    (_b = themeOptions.highContrast) !== null && _b !== void 0 ? _b : (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
     const newStylesLoaded = React.useRef(false);
-    const stylesLoaded = (_d = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
+    const stylesLoaded = (_d = (_c = parent.context) === null || _c === void 0 ? void 0 : _c.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
     const contextValue = React.useMemo(() => ({
         theme,
         themeOptions,
@@ -92,7 +90,7 @@ exports.ThemeProvider = React.forwardRef((props, ref) => {
     ]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
-        return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+        return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : (_e = parent.context) === null || _e === void 0 ? void 0 : _e.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
     return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
@@ -130,3 +128,49 @@ const Styles = (props) => {
     (0, useStyles_js_1.useStyles)({ includeCss, document });
     return null;
 };
+/**
+ * Returns theme information from either parent ThemeContext or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ *
+ * Also returns the ThemeContext itself (if found).
+ */
+const useParentThemeAndContext = (rootRef) => {
+    var _a, _b, _c, _d;
+    const parentContext = React.useContext(exports.ThemeContext);
+    const [parentThemeState, setParentTheme] = React.useState(parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme);
+    const [parentHighContrastState, setParentHighContrastState] = React.useState((_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _a === void 0 ? void 0 : _a.highContrast);
+    const parentThemeRef = (0, index_js_1.useLatestRef)(parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme);
+    (0, index_js_1.useIsomorphicLayoutEffect)(() => {
+        var _a, _b;
+        // bail if we already have theme from context
+        if (parentThemeRef.current) {
+            return;
+        }
+        // find parent theme from closest data-iui-theme attribute
+        const closestRoot = (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.closest('[data-iui-theme]');
+        if (!closestRoot) {
+            return;
+        }
+        // helper function that updates state to match data attributes from closest root
+        const synchronizeTheme = () => {
+            setParentTheme(closestRoot === null || closestRoot === void 0 ? void 0 : closestRoot.getAttribute('data-iui-theme'));
+            setParentHighContrastState((closestRoot === null || closestRoot === void 0 ? void 0 : closestRoot.getAttribute('data-iui-contrast')) === 'high');
+        };
+        // set theme for initial mount
+        synchronizeTheme();
+        // use mutation observers to listen to future updates to data attributes
+        const observer = new MutationObserver(() => synchronizeTheme());
+        observer.observe(closestRoot, {
+            attributes: true,
+            attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [parentThemeRef]);
+    return {
+        theme: (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _b !== void 0 ? _b : parentThemeState,
+        highContrast: (_d = (_c = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _c === void 0 ? void 0 : _c.highContrast) !== null && _d !== void 0 ? _d : parentHighContrastState,
+        context: parentContext,
+    };
+};

package/esm/core/Table/Table.js

@@ -269,7 +269,8 @@ export const Table = (props) => {
     // This is to avoid the old columnOrder from affecting the new columns' columnOrder
     React.useEffect(() => {
         // Check if columns have changed (by value)
-        if (JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
+        if (lastPassedColumns.current.length > 0 &&
+            JSON.stringify(lastPassedColumns.current) !== JSON.stringify(columns)) {
             instance.setColumnOrder([]);
         }
         lastPassedColumns.current = columns;

package/esm/core/ThemeProvider/ThemeProvider.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, } from '../utils/index.js';
+import { useTheme, useMediaQuery, useMergedRefs, useIsThemeAlreadySet, useIsomorphicLayoutEffect, useLatestRef, } from '../utils/index.js';
 import { useStyles } from '../utils/hooks/useStyles.js';
 /**
  * This component provides global styles and applies theme to the entire tree
@@ -33,19 +33,17 @@ import { useStyles } from '../utils/hooks/useStyles.js';
  * </ThemeProvider>
  */
 export const ThemeProvider = React.forwardRef((props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     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;
+    const parent = useParentThemeAndContext(rootRef);
+    const theme = themeProp === 'inherit' ? (_a = parent.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);
+    (_b = themeOptions.highContrast) !== null && _b !== void 0 ? _b : (themeOptions.highContrast = themeProp === 'inherit' ? parent.highContrast : undefined);
     const newStylesLoaded = React.useRef(false);
-    const stylesLoaded = (_d = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
+    const stylesLoaded = (_d = (_c = parent.context) === null || _c === void 0 ? void 0 : _c.stylesLoaded) !== null && _d !== void 0 ? _d : newStylesLoaded;
     const contextValue = React.useMemo(() => ({
         theme,
         themeOptions,
@@ -63,7 +61,7 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
     ]);
     // if no children, then fallback to this wrapper component which calls useTheme
     if (!hasChildren) {
-        return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
+        return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : (_e = parent.context) === null || _e === void 0 ? void 0 : _e.themeOptions }));
     }
     // now that we know there are children, we can render the root and provide the context value
     return (React.createElement(Root, { theme: theme, isInheritingTheme: themeProp === 'inherit', themeOptions: themeOptions, ref: mergedRefs, ...rest },
@@ -101,3 +99,49 @@ const Styles = (props) => {
     useStyles({ includeCss, document });
     return null;
 };
+/**
+ * Returns theme information from either parent ThemeContext or by reading the closest
+ * data-iui-theme attribute if context is not found.
+ *
+ * Also returns the ThemeContext itself (if found).
+ */
+const useParentThemeAndContext = (rootRef) => {
+    var _a, _b, _c, _d;
+    const parentContext = React.useContext(ThemeContext);
+    const [parentThemeState, setParentTheme] = React.useState(parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme);
+    const [parentHighContrastState, setParentHighContrastState] = React.useState((_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _a === void 0 ? void 0 : _a.highContrast);
+    const parentThemeRef = useLatestRef(parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme);
+    useIsomorphicLayoutEffect(() => {
+        var _a, _b;
+        // bail if we already have theme from context
+        if (parentThemeRef.current) {
+            return;
+        }
+        // find parent theme from closest data-iui-theme attribute
+        const closestRoot = (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.closest('[data-iui-theme]');
+        if (!closestRoot) {
+            return;
+        }
+        // helper function that updates state to match data attributes from closest root
+        const synchronizeTheme = () => {
+            setParentTheme(closestRoot === null || closestRoot === void 0 ? void 0 : closestRoot.getAttribute('data-iui-theme'));
+            setParentHighContrastState((closestRoot === null || closestRoot === void 0 ? void 0 : closestRoot.getAttribute('data-iui-contrast')) === 'high');
+        };
+        // set theme for initial mount
+        synchronizeTheme();
+        // use mutation observers to listen to future updates to data attributes
+        const observer = new MutationObserver(() => synchronizeTheme());
+        observer.observe(closestRoot, {
+            attributes: true,
+            attributeFilter: ['data-iui-theme', 'data-iui-contrast'],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [parentThemeRef]);
+    return {
+        theme: (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _b !== void 0 ? _b : parentThemeState,
+        highContrast: (_d = (_c = parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions) === null || _c === void 0 ? void 0 : _c.highContrast) !== null && _d !== void 0 ? _d : parentHighContrastState,
+        context: parentContext,
+    };
+};

package/package.json

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