@jetbrains/ring-ui 6.0.51 → 6.0.52

package/components/global/theme.d.ts

@@ -4,6 +4,9 @@ declare enum Theme {
     LIGHT = "light",
     DARK = "dark"
 }
+export declare const ThemeContext: import("react").Context<{
+    theme: Theme.LIGHT | Theme.DARK;
+}>;
 export declare function useTheme(): Theme.LIGHT | Theme.DARK;
 export declare function useThemeClasses(theme: Theme): string;
 export interface WithThemeClassesProps {

package/components/global/theme.js

@@ -1,4 +1,4 @@
-import { useMemo, useState, useEffect, forwardRef, useContext } from 'react';
+import { useMemo, useState, useEffect, forwardRef, useContext, createContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTarget, PopupTargetContext } from '../popup/popup.target';
@@ -12,6 +12,8 @@ var Theme;
     Theme["LIGHT"] = "light";
     Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
+export const ThemeContext = createContext({ theme: Theme.LIGHT });
+const GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
 const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 export function useTheme() {
     const [dark, setDark] = useState(darkMatcher.matches);
@@ -27,6 +29,7 @@ export function useThemeClasses(theme) {
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     return classNames({
         [styles.dark]: resolvedTheme === Theme.DARK,
+        [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
         [defaultStyles.light]: resolvedTheme === Theme.LIGHT
     });
 }
@@ -38,11 +41,11 @@ export function applyTheme(theme, container) {
     if (theme === Theme.DARK) {
         container.classList.remove(defaultStyles.light);
         container.classList.add(styles.dark);
-        container.classList.add('ring-ui-theme-dark');
+        container.classList.add(GLOBAL_DARK_CLASS_NAME);
     }
     else {
         container.classList.remove(styles.dark);
-        container.classList.remove('ring-ui-theme-dark');
+        container.classList.remove(GLOBAL_DARK_CLASS_NAME);
         container.classList.add(defaultStyles.light);
     }
 }
@@ -50,6 +53,7 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     const systemTheme = useTheme();
     const resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
     const id = useMemo(() => getUID('popups-with-theme-'), []);
+    const themeValue = useMemo(() => ({ theme: resolvedTheme }), [resolvedTheme]);
     useEffect(() => {
         if (target != null) {
             applyTheme(resolvedTheme, target);
@@ -57,14 +61,16 @@ export const ThemeProvider = forwardRef(function ThemeProvider({ theme = Theme.A
     }, [resolvedTheme, target]);
     const themeClasses = useThemeClasses(theme);
     const parentTarget = useContext(PopupTargetContext);
-    return (<div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
+    return (<ThemeContext.Provider value={themeValue}>
+      <div ref={ref} className={target != null ? undefined : classNames(className, themeClasses)} {...restProps}>{passToPopups
             ? (<PopupTarget id={id}>
-              {popupTarget => (<>
-                  {children}
-                  {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
-                </>)}
-            </PopupTarget>)
+                {popupTarget => (<>
+                    {children}
+                    {createPortal(<div className={themeClasses}>{popupTarget}</div>, parentTarget && getPopupContainer(parentTarget) || document.body)}
+                  </>)}
+              </PopupTarget>)
             : children}
-    </div>);
+      </div>
+    </ThemeContext.Provider>);
 });
 export default Theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.51",
+  "version": "6.0.52",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",