@grafana/components 0.0.60 → 0.0.62

package/dist/cjs/index.cjs

@@ -64,13 +64,135 @@ const useColorModeChange = ({
   return colorMode;
 };
 
-const ColorModeChangeHandler = ({ children, getAppEvents, useTheme2 }) => {
+const LEGACY_THEME_NAMES = [
+  "Aubergine",
+  "Dark",
+  "Debug",
+  "Desert bloom",
+  "Deuteranopia/Protanopia Dark",
+  "Deuteranopia/Protanopia Light",
+  "Gilded grove",
+  "Gloom",
+  "Light",
+  "Mars",
+  "Matrix",
+  "Sapphire dusk",
+  "Synthwave",
+  "Tritanopia Dark",
+  "Tritanopia Light",
+  "Tron",
+  "Victorian",
+  "Zen"
+];
+const LEGACY_THEME_IDS = [
+  "aubergine",
+  "debug",
+  "default",
+  "desertbloom",
+  "deuteranopia_protanopia_dark",
+  "deuteranopia_protanopia_light",
+  "gildedgrove",
+  "gloom",
+  "mars",
+  "matrix",
+  "sapphiredusk",
+  "synthwave",
+  "tritanopia_dark",
+  "tritanopia_light",
+  "tron",
+  "victorian",
+  "zen"
+];
+const THEME_IDS = {
+  Aubergine: "aubergine",
+  Dark: "default",
+  Debug: "debug",
+  "Desert bloom": "desertbloom",
+  "Deuteranopia/Protanopia Dark": "deuteranopia_protanopia_dark",
+  "Deuteranopia/Protanopia Light": "deuteranopia_protanopia_light",
+  "Gilded grove": "gildedgrove",
+  Gloom: "gloom",
+  Light: "default",
+  Mars: "mars",
+  Matrix: "matrix",
+  "Sapphire dusk": "sapphiredusk",
+  Synthwave: "synthwave",
+  "Tritanopia Dark": "tritanopia_dark",
+  "Tritanopia Light": "tritanopia_light",
+  Tron: "tron",
+  Victorian: "victorian",
+  Zen: "zen"
+};
+const ThemeNameContext = React.createContext(void 0);
+const ThemeNameProvider = ({
+  children,
+  defaultThemeId = "default"
+}) => {
+  const [themeId, setThemeId] = React.useState(defaultThemeId);
+  React.useEffect(() => {
+    document.documentElement.setAttribute("data-theme-name", themeId);
+  }, [themeId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeNameContext.Provider, { value: { themeId, setThemeId }, children });
+};
+const useThemeId = () => {
+  const context = React.useContext(ThemeNameContext);
+  if (context === void 0) {
+    throw new Error("useThemeId must be used within a ThemeNameProvider");
+  }
+  return context;
+};
+
+const isLegacyThemeName = (name) => {
+  return LEGACY_THEME_NAMES.includes(name);
+};
+const useThemeNameChange = ({
+  getAppEvents,
+  useTheme2
+}) => {
+  const { themeId, setThemeId } = useThemeId();
+  const appEvents = getAppEvents();
+  const { name } = useTheme2();
+  React.useEffect(() => {
+    const themeChangedEvent = appEvents.subscribe(
+      runtime.ThemeChangedEvent,
+      ({ payload }) => {
+        if (isLegacyThemeName(payload.name)) {
+          setThemeId(THEME_IDS[payload.name]);
+        }
+      }
+    );
+    return () => {
+      themeChangedEvent.unsubscribe();
+    };
+  }, [appEvents, setThemeId]);
+  React.useEffect(() => {
+    if (isLegacyThemeName(name)) {
+      setThemeId(THEME_IDS[name]);
+    }
+  }, [name, setThemeId]);
+  return themeId;
+};
+
+const ColorModeChangeHandler = ({
+  children,
+  getAppEvents,
+  useTheme2
+}) => {
   useColorModeChange({ getAppEvents, useTheme2 });
   return children;
 };
 
+const ThemeNameChangeHandler = ({
+  children,
+  getAppEvents,
+  useTheme2
+}) => {
+  useThemeNameChange({ getAppEvents, useTheme2 });
+  return children;
+};
+
 const ColorMode = ({ children, getAppEvents, useTheme2 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ColorModeChangeHandler, { getAppEvents, useTheme2, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ColorModeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ThemeNameProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ColorModeChangeHandler, { getAppEvents, useTheme2, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeNameChangeHandler, { getAppEvents, useTheme2, children }) }) }) });
 };
 
 const ICON_SIZES = {
@@ -27620,6 +27742,8 @@ exports.Keyboard = Keyboard;
 exports.KeyboardMusic = KeyboardMusic;
 exports.KeyboardOff = KeyboardOff;
 exports.Kubernetes = Kubernetes;
+exports.LEGACY_THEME_IDS = LEGACY_THEME_IDS;
+exports.LEGACY_THEME_NAMES = LEGACY_THEME_NAMES;
 exports.Lamp = Lamp;
 exports.LampCeiling = LampCeiling;
 exports.LampDesk = LampDesk;
@@ -28342,6 +28466,7 @@ exports.Sword = Sword;
 exports.Swords = Swords;
 exports.SyntheticMonitoring = SyntheticMonitoring;
 exports.Syringe = Syringe;
+exports.THEME_IDS = THEME_IDS;
 exports.Table = Table;
 exports.Table2 = Table2;
 exports.TableCellsMerge = TableCellsMerge;
@@ -28388,6 +28513,8 @@ exports.TextSelect = TextSelect;
 exports.TextSelection = TextSelection;
 exports.TextWrap = TextWrap;
 exports.Theater = Theater;
+exports.ThemeNameChangeHandler = ThemeNameChangeHandler;
+exports.ThemeNameProvider = ThemeNameProvider;
 exports.Thermometer = Thermometer;
 exports.ThermometerSnowflake = ThermometerSnowflake;
 exports.ThermometerSun = ThermometerSun;
@@ -28584,4 +28711,6 @@ exports.iconMetaData = iconMetaData;
 exports.useColorMode = useColorMode;
 exports.useColorModeChange = useColorModeChange;
 exports.usePortal = usePortal;
+exports.useThemeId = useThemeId;
+exports.useThemeNameChange = useThemeNameChange;
 //# sourceMappingURL=index.cjs.map