@jetbrains/ring-ui-built 6.0.51 → 6.0.52

package/components/_helpers/theme.js

@@ -1,5 +1,5 @@
 import { i as _slicedToArray, c as _objectWithoutProperties, d as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { useState, useEffect, forwardRef, useMemo, useContext } from 'react';
+import { createContext, useState, useEffect, forwardRef, useMemo, useContext } from 'react';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
 import { PopupTargetContext, PopupTarget } from '../popup/popup.target.js';
@@ -18,6 +18,10 @@ var Theme;
   Theme["LIGHT"] = "light";
   Theme["DARK"] = "dark";
 })(Theme || (Theme = {}));
+var ThemeContext = /*#__PURE__*/createContext({
+  theme: Theme.LIGHT
+});
+var GLOBAL_DARK_CLASS_NAME = 'ring-ui-theme-dark';
 var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
 function useTheme() {
   var _useState = useState(darkMatcher.matches),
@@ -40,6 +44,7 @@ function useThemeClasses(theme) {
   var resolvedTheme = theme === Theme.AUTO ? systemTheme : theme;
   return classNames({
     [modules_59717246.dark]: resolvedTheme === Theme.DARK,
+    [GLOBAL_DARK_CLASS_NAME]: resolvedTheme === Theme.DARK,
     [modules_6381a4b3.light]: resolvedTheme === Theme.LIGHT
   });
 }
@@ -53,10 +58,10 @@ function applyTheme(theme, container) {
   if (theme === Theme.DARK) {
     container.classList.remove(modules_6381a4b3.light);
     container.classList.add(modules_59717246.dark);
-    container.classList.add('ring-ui-theme-dark');
+    container.classList.add(GLOBAL_DARK_CLASS_NAME);
   } else {
     container.classList.remove(modules_59717246.dark);
-    container.classList.remove('ring-ui-theme-dark');
+    container.classList.remove(GLOBAL_DARK_CLASS_NAME);
     container.classList.add(modules_6381a4b3.light);
   }
 }
@@ -73,6 +78,11 @@ var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   var id = useMemo(function () {
     return getUID('popups-with-theme-');
   }, []);
+  var themeValue = useMemo(function () {
+    return {
+      theme: resolvedTheme
+    };
+  }, [resolvedTheme]);
   useEffect(function () {
     if (target != null) {
       applyTheme(resolvedTheme, target);
@@ -80,23 +90,26 @@ var ThemeProvider = /*#__PURE__*/forwardRef(function ThemeProvider(_ref2, ref) {
   }, [resolvedTheme, target]);
   var themeClasses = useThemeClasses(theme);
   var parentTarget = useContext(PopupTargetContext);
-  return /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
-    ref: ref,
-    className: target != null ? undefined : classNames(className, themeClasses)
-  }, restProps), {}, {
-    children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
-      id: id,
-      children: function children(popupTarget) {
-        return /*#__PURE__*/jsxs(Fragment, {
-          children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
-            className: themeClasses,
-            children: popupTarget
-          }), parentTarget && getPopupContainer(parentTarget) || document.body)]
-        });
-      }
-    }) : _children
-  }));
+  return /*#__PURE__*/jsx(ThemeContext.Provider, {
+    value: themeValue,
+    children: /*#__PURE__*/jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: target != null ? undefined : classNames(className, themeClasses)
+    }, restProps), {}, {
+      children: passToPopups ? /*#__PURE__*/jsx(PopupTarget, {
+        id: id,
+        children: function children(popupTarget) {
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [_children, /*#__PURE__*/createPortal( /*#__PURE__*/jsx("div", {
+              className: themeClasses,
+              children: popupTarget
+            }), parentTarget && getPopupContainer(parentTarget) || document.body)]
+          });
+        }
+      }) : _children
+    }))
+  });
 });
 var Theme$1 = Theme;
 
-export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, useThemeClasses as b, applyTheme as c, modules_59717246 as m, useTheme as u };
+export { Theme$1 as T, WithThemeClasses as W, ThemeProvider as a, ThemeContext as b, useThemeClasses as c, applyTheme as d, modules_59717246 as m, useTheme as u };

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

@@ -4,7 +4,7 @@ import 'classnames';
 import 'react-dom';
 import '../popup/popup.target.js';
 import '../popup/popup.js';
-export { a as ThemeProvider, W as WithThemeClasses, c as applyTheme, T as default, u as useTheme, b as useThemeClasses } from '../_helpers/theme.js';
+export { b as ThemeContext, a as ThemeProvider, W as WithThemeClasses, d as applyTheme, T as default, u as useTheme, c as useThemeClasses } from '../_helpers/theme.js';
 import './get-uid.js';
 import 'react/jsx-runtime';
 import 'prop-types';

package/package.json

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