@itwin/itwinui-react 2.12.11 → 2.12.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/cjs/core/ThemeProvider/ThemeProvider.d.ts +1 -0
  3. package/cjs/core/ThemeProvider/ThemeProvider.js +18 -2
  4. package/cjs/core/utils/hooks/useStyles.js +15 -10
  5. package/esm/core/ThemeProvider/ThemeProvider.d.ts +1 -0
  6. package/esm/core/ThemeProvider/ThemeProvider.js +18 -2
  7. package/esm/core/utils/hooks/useStyles.js +15 -10
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 2.12.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1625](https://github.com/iTwin/iTwinUI/pull/1625): Fixed an issue where components rendered in a popout window were throwing a stylesheet-related error.
8
+
3
9
  ## 2.12.11
4
10
 
5
11
  ### Patch Changes
package/cjs/core/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -94,4 +94,5 @@ export declare const ThemeContext: React.Context<{
94
94
  themeOptions?: ThemeOptions | undefined;
95
95
  rootRef: React.RefObject<HTMLElement>;
96
96
  includeCss?: IncludeCssProps['includeCss'];
97
+ stylesLoaded: React.MutableRefObject<boolean>;
97
98
  } | undefined>;
package/cjs/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -62,14 +62,30 @@ const useStyles_js_1 = require("../utils/hooks/useStyles.js");
62
62
  * </ThemeProvider>
63
63
  */
64
64
  exports.ThemeProvider = React.forwardRef((props, ref) => {
65
- var _a;
65
+ var _a, _b;
66
66
  const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
67
67
  const rootRef = React.useRef(null);
68
68
  const mergedRefs = (0, index_js_1.useMergedRefs)(rootRef, ref);
69
69
  const hasChildren = React.Children.count(children) > 0;
70
70
  const parentContext = React.useContext(exports.ThemeContext);
71
71
  const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
72
- const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef, includeCss }), [theme, themeOptions, includeCss]);
72
+ const newStylesLoaded = React.useRef(false);
73
+ const stylesLoaded = (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _b !== void 0 ? _b : newStylesLoaded;
74
+ const contextValue = React.useMemo(() => ({
75
+ theme,
76
+ themeOptions,
77
+ rootRef,
78
+ includeCss,
79
+ stylesLoaded,
80
+ }),
81
+ // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
82
+ // eslint-disable-next-line react-hooks/exhaustive-deps
83
+ [
84
+ theme,
85
+ JSON.stringify(themeOptions),
86
+ JSON.stringify(includeCss),
87
+ stylesLoaded,
88
+ ]);
73
89
  // if no children, then fallback to this wrapper component which calls useTheme
74
90
  if (!hasChildren) {
75
91
  return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
package/cjs/core/utils/hooks/useStyles.js CHANGED
@@ -39,25 +39,30 @@ const styles_js_1 = __importStar(require("../../../styles.js"));
39
39
  // react <18 fallback for useInsertionEffect, with workaround for webpack getting rid of React namespace
40
40
  const _React = React;
41
41
  const useIsomorphicInsertionEffect = (_a = _React.useInsertionEffect) !== null && _a !== void 0 ? _a : useIsomorphicLayoutEffect_js_1.useIsomorphicLayoutEffect;
42
+ /** This lives outside the hook because we only want to load styles once even when context is not provided. */
43
+ let globalLoaded = false;
42
44
  /**
43
45
  * Dynamically loads the iTwinUI styles as a constructed stylesheet,
44
46
  * falling back to a regular `<style>` tag in `<head>`.
45
47
  */
46
48
  const useStyles = (options) => {
47
- var _a, _b;
48
49
  const context = _React.useContext(ThemeProvider_js_1.ThemeContext);
49
- const loaded = _React.useRef(false);
50
- const includeCss = (_b = (_a = options === null || options === void 0 ? void 0 : options.includeCss) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.includeCss) !== null && _b !== void 0 ? _b : { withLayer: true };
51
50
  useIsomorphicInsertionEffect(() => {
52
- var _a;
53
- if (loaded.current || !includeCss) {
51
+ var _a, _b, _c;
52
+ const includeCss = (_b = (_a = options === null || options === void 0 ? void 0 : options.includeCss) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.includeCss) !== null && _b !== void 0 ? _b : { withLayer: true };
53
+ if ((context === null || context === void 0 ? void 0 : context.stylesLoaded.current) || globalLoaded || !includeCss) {
54
54
  return;
55
55
  }
56
56
  const withLayer = typeof includeCss === 'object' ? includeCss === null || includeCss === void 0 ? void 0 : includeCss.withLayer : false;
57
- const document = (_a = options === null || options === void 0 ? void 0 : options.document) !== null && _a !== void 0 ? _a : (() => { var _a, _b; return (_b = (_a = context === null || context === void 0 ? void 0 : context.rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : (0, dom_js_1.getDocument)(); });
57
+ const document = (_c = options === null || options === void 0 ? void 0 : options.document) !== null && _c !== void 0 ? _c : (() => { var _a, _b; return (_b = (_a = context === null || context === void 0 ? void 0 : context.rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : (0, dom_js_1.getDocument)(); });
58
58
  loadStyles({ withLayer, document });
59
- loaded.current = true;
60
- }, [context, options, includeCss]);
59
+ if (context) {
60
+ context.stylesLoaded.current = true;
61
+ }
62
+ else {
63
+ globalLoaded = true;
64
+ }
65
+ }, [context, options]);
61
66
  };
62
67
  exports.useStyles = useStyles;
63
68
  // ----------------------------------------------------------------------------
@@ -77,8 +82,8 @@ const loadStyles = ({ withLayer = true, document = () => (0, dom_js_1.getDocumen
77
82
  : `@charset "utf-8";\n${styles_js_1.revertV1Css}\n${styles_js_1.default}`;
78
83
  const supportsAdopting = 'adoptedStyleSheets' in Document.prototype &&
79
84
  'replaceSync' in CSSStyleSheet.prototype;
80
- if (supportsAdopting) {
81
- const sheet = new CSSStyleSheet();
85
+ if (supportsAdopting && _document.defaultView) {
86
+ const sheet = new _document.defaultView.CSSStyleSheet();
82
87
  sheet.replaceSync(cssText);
83
88
  _document.adoptedStyleSheets = [..._document.adoptedStyleSheets, sheet];
84
89
  }
package/esm/core/ThemeProvider/ThemeProvider.d.ts CHANGED
@@ -94,4 +94,5 @@ export declare const ThemeContext: React.Context<{
94
94
  themeOptions?: ThemeOptions | undefined;
95
95
  rootRef: React.RefObject<HTMLElement>;
96
96
  includeCss?: IncludeCssProps['includeCss'];
97
+ stylesLoaded: React.MutableRefObject<boolean>;
97
98
  } | undefined>;
package/esm/core/ThemeProvider/ThemeProvider.js CHANGED
@@ -33,14 +33,30 @@ import { useStyles } from '../utils/hooks/useStyles.js';
33
33
  * </ThemeProvider>
34
34
  */
35
35
  export const ThemeProvider = React.forwardRef((props, ref) => {
36
- var _a;
36
+ var _a, _b;
37
37
  const { theme: themeProp, children, themeOptions, includeCss = { withLayer: true }, ...rest } = props;
38
38
  const rootRef = React.useRef(null);
39
39
  const mergedRefs = useMergedRefs(rootRef, ref);
40
40
  const hasChildren = React.Children.count(children) > 0;
41
41
  const parentContext = React.useContext(ThemeContext);
42
42
  const theme = themeProp === 'inherit' ? (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.theme) !== null && _a !== void 0 ? _a : 'light' : themeProp;
43
- const contextValue = React.useMemo(() => ({ theme, themeOptions, rootRef, includeCss }), [theme, themeOptions, includeCss]);
43
+ const newStylesLoaded = React.useRef(false);
44
+ const stylesLoaded = (_b = parentContext === null || parentContext === void 0 ? void 0 : parentContext.stylesLoaded) !== null && _b !== void 0 ? _b : newStylesLoaded;
45
+ const contextValue = React.useMemo(() => ({
46
+ theme,
47
+ themeOptions,
48
+ rootRef,
49
+ includeCss,
50
+ stylesLoaded,
51
+ }),
52
+ // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
53
+ // eslint-disable-next-line react-hooks/exhaustive-deps
54
+ [
55
+ theme,
56
+ JSON.stringify(themeOptions),
57
+ JSON.stringify(includeCss),
58
+ stylesLoaded,
59
+ ]);
44
60
  // if no children, then fallback to this wrapper component which calls useTheme
45
61
  if (!hasChildren) {
46
62
  return (React.createElement(ThemeLogicWrapper, { theme: theme, themeOptions: themeOptions !== null && themeOptions !== void 0 ? themeOptions : parentContext === null || parentContext === void 0 ? void 0 : parentContext.themeOptions }));
package/esm/core/utils/hooks/useStyles.js CHANGED
@@ -13,25 +13,30 @@ import allCss, { revertV1Css } from '../../../styles.js';
13
13
  // react <18 fallback for useInsertionEffect, with workaround for webpack getting rid of React namespace
14
14
  const _React = React;
15
15
  const useIsomorphicInsertionEffect = (_a = _React.useInsertionEffect) !== null && _a !== void 0 ? _a : useIsomorphicLayoutEffect;
16
+ /** This lives outside the hook because we only want to load styles once even when context is not provided. */
17
+ let globalLoaded = false;
16
18
  /**
17
19
  * Dynamically loads the iTwinUI styles as a constructed stylesheet,
18
20
  * falling back to a regular `<style>` tag in `<head>`.
19
21
  */
20
22
  export const useStyles = (options) => {
21
- var _a, _b;
22
23
  const context = _React.useContext(ThemeContext);
23
- const loaded = _React.useRef(false);
24
- const includeCss = (_b = (_a = options === null || options === void 0 ? void 0 : options.includeCss) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.includeCss) !== null && _b !== void 0 ? _b : { withLayer: true };
25
24
  useIsomorphicInsertionEffect(() => {
26
- var _a;
27
- if (loaded.current || !includeCss) {
25
+ var _a, _b, _c;
26
+ const includeCss = (_b = (_a = options === null || options === void 0 ? void 0 : options.includeCss) !== null && _a !== void 0 ? _a : context === null || context === void 0 ? void 0 : context.includeCss) !== null && _b !== void 0 ? _b : { withLayer: true };
27
+ if ((context === null || context === void 0 ? void 0 : context.stylesLoaded.current) || globalLoaded || !includeCss) {
28
28
  return;
29
29
  }
30
30
  const withLayer = typeof includeCss === 'object' ? includeCss === null || includeCss === void 0 ? void 0 : includeCss.withLayer : false;
31
- const document = (_a = options === null || options === void 0 ? void 0 : options.document) !== null && _a !== void 0 ? _a : (() => { var _a, _b; return (_b = (_a = context === null || context === void 0 ? void 0 : context.rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : getDocument(); });
31
+ const document = (_c = options === null || options === void 0 ? void 0 : options.document) !== null && _c !== void 0 ? _c : (() => { var _a, _b; return (_b = (_a = context === null || context === void 0 ? void 0 : context.rootRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : getDocument(); });
32
32
  loadStyles({ withLayer, document });
33
- loaded.current = true;
34
- }, [context, options, includeCss]);
33
+ if (context) {
34
+ context.stylesLoaded.current = true;
35
+ }
36
+ else {
37
+ globalLoaded = true;
38
+ }
39
+ }, [context, options]);
35
40
  };
36
41
  // ----------------------------------------------------------------------------
37
42
  const layers = `@layer itwinui-v1, itwinui.v1, itwinui.v2, itwinui.v3;`;
@@ -50,8 +55,8 @@ const loadStyles = ({ withLayer = true, document = () => getDocument() }) => {
50
55
  : `@charset "utf-8";\n${revertV1Css}\n${allCss}`;
51
56
  const supportsAdopting = 'adoptedStyleSheets' in Document.prototype &&
52
57
  'replaceSync' in CSSStyleSheet.prototype;
53
- if (supportsAdopting) {
54
- const sheet = new CSSStyleSheet();
58
+ if (supportsAdopting && _document.defaultView) {
59
+ const sheet = new _document.defaultView.CSSStyleSheet();
55
60
  sheet.replaceSync(cssText);
56
61
  _document.adoptedStyleSheets = [..._document.adoptedStyleSheets, sheet];
57
62
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-react",
3
- "version": "2.12.11",
3
+ "version": "2.12.12",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "cjs/index.js",