@lidofinance/lido-ui 3.0.0-next.13 → 3.0.0-next.15

package/dist/cjs/theme/cookie-theme-provider.js

@@ -14,12 +14,12 @@ _export(exports, {
 });
 const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _styledComponents = require("styled-components");
 const _constants = require("./constants");
 const _themes = require("./themes");
 const _cookies = require("./utils/cookies");
 const _documentHeadContents = require("./document-head-contents/index");
 const _elementThemeScript = require("./document-head-contents/element-theme-script");
-const _styledComponents = require("styled-components");
 const defaultThemeContext = {};
 const ThemeToggleContext = /*#__PURE__*/ (0, _react.createContext)(defaultThemeContext);
 // we need to initialize this before react component code if we're using this provider or ThemeProvider
@@ -65,6 +65,17 @@ const CookieThemeProvider = /*#__PURE__*/ _react.default.memo((param)=>{
         // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event
         _constants.prefersDarkThemeMediaQuery === null || _constants.prefersDarkThemeMediaQuery === void 0 ? void 0 : _constants.prefersDarkThemeMediaQuery.addEventListener('change', setTheme);
         setTheme();
+        // This code check that the theme cookie was changed on other tab or site (the same second-level domain)
+        const checkCookieThemeWasChanged = ()=>{
+            const themeNameCookie = (0, _cookies.getThemeNameFromCookies)();
+            if (themeNameCookie && (themeNameCookie === _constants.ThemeName.dark || themeNameCookie === _constants.ThemeName.light)) {
+                setThemeName(themeNameCookie);
+            }
+        };
+        window.addEventListener('focus', checkCookieThemeWasChanged);
+        return ()=>{
+            window.removeEventListener('focus', checkCookieThemeWasChanged);
+        };
     }, [
         initialThemeName,
         isTopLevelProvider,

package/dist/cjs/theme/cookie-theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants'\nimport { themeMap } from './themes'\nimport { getThemeNameFromCookies } from './utils/cookies'\nimport { initColors } from './document-head-contents'\nimport { updateGlobalTheme } from './document-head-contents/element-theme-script'\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components'\nimport { ThemeContext } from './types'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = React.memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = parentTheme === defaultThemeContext\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName]\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    }\n  }\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["ThemeToggleContext","CookieThemeProvider","defaultThemeContext","createContext","initColors","React","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","internalThemeName","setThemeName","useState","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","value","useMemo","toggleTheme","updateGlobalTheme","Provider","StyledThemeProvider","div","style","display","data-lido-theme","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants'\nimport { themeMap } from './themes'\nimport { getThemeNameFromCookies } from './utils/cookies'\nimport { initColors } from './document-head-contents'\nimport { updateGlobalTheme } from './document-head-contents/element-theme-script'\nimport { ThemeContext } from './types'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = React.memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = parentTheme === defaultThemeContext\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName]\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    }\n  }\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["ThemeToggleContext","CookieThemeProvider","defaultThemeContext","createContext","initColors","React","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","internalThemeName","setThemeName","useState","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","useMemo","toggleTheme","updateGlobalTheme","Provider","StyledThemeProvider","div","style","display","data-lido-theme","displayName"],"mappings":"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"}

package/dist/esm/theme/cookie-theme-provider.js

@@ -1,10 +1,10 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
 import { DEFAULT_THEME_NAME, prefersDarkThemeMediaQuery, ThemeName } from "./constants";
 import { themeMap } from "./themes";
 import { getThemeNameFromCookies } from "./utils/cookies";
 import { initColors } from "./document-head-contents/index";
 import { updateGlobalTheme } from "./document-head-contents/element-theme-script";
-import { ThemeProvider as StyledThemeProvider } from "styled-components";
 const defaultThemeContext = {};
 export const ThemeToggleContext = /*#__PURE__*/ createContext(defaultThemeContext);
 // we need to initialize this before react component code if we're using this provider or ThemeProvider
@@ -57,6 +57,17 @@ initColors();
         // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event
         prefersDarkThemeMediaQuery === null || prefersDarkThemeMediaQuery === void 0 ? void 0 : prefersDarkThemeMediaQuery.addEventListener('change', setTheme);
         setTheme();
+        // This code check that the theme cookie was changed on other tab or site (the same second-level domain)
+        const checkCookieThemeWasChanged = ()=>{
+            const themeNameCookie = getThemeNameFromCookies();
+            if (themeNameCookie && (themeNameCookie === ThemeName.dark || themeNameCookie === ThemeName.light)) {
+                setThemeName(themeNameCookie);
+            }
+        };
+        window.addEventListener('focus', checkCookieThemeWasChanged);
+        return ()=>{
+            window.removeEventListener('focus', checkCookieThemeWasChanged);
+        };
     }, [
         initialThemeName,
         isTopLevelProvider,

package/dist/esm/theme/cookie-theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants'\nimport { themeMap } from './themes'\nimport { getThemeNameFromCookies } from './utils/cookies'\nimport { initColors } from './document-head-contents'\nimport { updateGlobalTheme } from './document-head-contents/element-theme-script'\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components'\nimport { ThemeContext } from './types'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = React.memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = parentTheme === defaultThemeContext\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName]\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    }\n  }\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","DEFAULT_THEME_NAME","prefersDarkThemeMediaQuery","ThemeName","themeMap","getThemeNameFromCookies","initColors","updateGlobalTheme","ThemeProvider","StyledThemeProvider","defaultThemeContext","ThemeToggleContext","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","isTopLevelProvider","internalThemeName","setThemeName","themeName","theme","setTheme","systemThemeName","matches","dark","light","themeNameCookie","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","value","toggleTheme","Provider","div","style","display","data-lido-theme","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants'\nimport { themeMap } from './themes'\nimport { getThemeNameFromCookies } from './utils/cookies'\nimport { initColors } from './document-head-contents'\nimport { updateGlobalTheme } from './document-head-contents/element-theme-script'\nimport { ThemeContext } from './types'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = React.memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = parentTheme === defaultThemeContext\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName]\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    }\n  }\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["React","createContext","useContext","useEffect","useMemo","useState","ThemeProvider","StyledThemeProvider","DEFAULT_THEME_NAME","prefersDarkThemeMediaQuery","ThemeName","themeMap","getThemeNameFromCookies","initColors","updateGlobalTheme","defaultThemeContext","ThemeToggleContext","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","isTopLevelProvider","internalThemeName","setThemeName","themeName","theme","setTheme","systemThemeName","matches","dark","light","themeNameCookie","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","toggleTheme","Provider","div","style","display","data-lido-theme","displayName"],"mappings":"AAAA,OAAOA,KAAK,IACVC,aAAa,EAGbC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QACH,OAAO,CAAA;AACd,SAASC,aAAa,IAAIC,mBAAmB,QAAQ,mBAAmB,CAAA;AACxE,SACEC,kBAAkB,EAClBC,0BAA0B,EAC1BC,SAAS,QACJ,aAAa,CAAA;AACpB,SAASC,QAAQ,QAAQ,UAAU,CAAA;AACnC,SAASC,uBAAuB,QAAQ,iBAAiB,CAAA;AACzD,SAASC,UAAU,QAAQ,gCAA0B,CAAA;AACrD,SAASC,iBAAiB,QAAQ,+CAA+C,CAAA;AAGjF,MAAMC,mBAAmB,GAAG,EAAE,AAAgB;AAC9C,OAAO,MAAMC,kBAAkB,iBAC7Bf,aAAa,CAAec,mBAAmB,CAAC,CAAA;AAElD,uGAAuG;AACvGF,UAAU,EAAE;AAEZ;;;;;;;GAOG,GAEH,OAAO,MAAMI,mBAAmB,iBAM5BjB,KAAK,CAACkB,IAAI,CACZ,SAKM;QALL,EACCC,QAAQ,CAAA,EACRC,gBAAgB,CAAA,EAChB,iDAAiD;IACjDC,iBAAiB,CAAA,IAClB;IACC,MAAMC,WAAW,GAAGpB,UAAU,CAACc,kBAAkB,CAAC;IAClD,6DAA6D;IAC7D,6DAA6D;IAC7D,MAAMO,kBAAkB,GAAGD,WAAW,KAAKP,mBAAmB;IAC9D,qEAAqE;IACrE,+EAA+E;IAC/E,MAAM,CAACS,iBAAiB,EAAEC,YAAY,CAAC,GAAGpB,QAAQ,CAChDe,gBAAgB,IAAIZ,kBAAkB,CACvC;IACD,4DAA4D;IAC5D,6EAA6E;IAC7E,2DAA2D;IAC3D,uFAAuF;IACvF,MAAMkB,SAAS,GAAGJ,WAAW,CAACI,SAAS,IAAIF,iBAAiB;IAE5D,MAAMG,KAAK,GAAGhB,QAAQ,CAACe,SAAS,CAAC;IAEjC,iGAAiG;IACjG,uCAAuC;IACvCvB,SAAS,CAAC,IAAM;QACd,mFAAmF;QACnF,IAAI,CAACoB,kBAAkB,EAAE;YACvB,OAAM;QACR,CAAC;QAED,MAAMK,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGpB,CAAAA,0BAA0B,aAA1BA,0BAA0B,WAAS,GAAnCA,KAAAA,CAAmC,GAAnCA,0BAA0B,CAAEqB,OAAO,CAAA,GACvDpB,SAAS,CAACqB,IAAI,GACdrB,SAAS,CAACsB,KAAK;YACnB,MAAMC,eAAe,GAAGrB,uBAAuB,EAAE;YACjD,MAAMsB,YAAY,GAChB,qEAAqE;YACrEb,iBAAiB,IACjB,0DAA0D;YAC1DY,eAAe,IACf,wEAAwE;YACxE,qFAAqF;YACrFb,gBAAgB,IAChB,uFAAuF;YACvFS,eAAe,IACf,wCAAwC;YACxCrB,kBAAkB;YACpBiB,YAAY,CAACS,YAAY,CAAC;YAC1B,qFAAqF;YACrF,6CAA6C;YAC7CC,QAAQ,CAACC,eAAe,CAACC,OAAO,CAACC,SAAS,GAAGJ,YAAY;QAC3D,CAAC;QAED,8GAA8G;QAC9GzB,0BAA0B,aAA1BA,0BAA0B,WAAkB,GAA5CA,KAAAA,CAA4C,GAA5CA,0BAA0B,CAAE8B,gBAAgB,CAAC,QAAQ,EAAEX,QAAQ,CAAC,CAAA;QAChEA,QAAQ,EAAE;QAEV,wGAAwG;QACxG,MAAMY,0BAA0B,GAAG,IAAM;YACvC,MAAMP,eAAe,GAAGrB,uBAAuB,EAAE;YAEjD,IACEqB,eAAe,IACf,CAACA,eAAe,KAAKvB,SAAS,CAACqB,IAAI,IACjCE,eAAe,KAAKvB,SAAS,CAACsB,KAAK,CAAC,EACtC;gBACAP,YAAY,CAACQ,eAAe,CAAC;YAC/B,CAAC;QACH,CAAC;QACDQ,MAAM,CAACF,gBAAgB,CAAC,OAAO,EAAEC,0BAA0B,CAAC;QAE5D,OAAO,IAAM;YACXC,MAAM,CAACC,mBAAmB,CAAC,OAAO,EAAEF,0BAA0B,CAAC;QACjE,CAAC,CAAA;IACH,CAAC,EAAE;QACDpB,gBAAgB;QAChBG,kBAAkB;QAClBF,iBAAiB;QACjBC,WAAW;QACXK,KAAK;KACN,CAAC;IAEF,MAAMgB,KAAK,GAAGvC,OAAO,CACnB,IAAM,CAAC;YACLsB,SAAS;YACTkB,WAAW,IAAG;gBACZnB,YAAY,CAAC,CAACC,SAAS,GAAK;oBAC1B,MAAMQ,YAAY,GAChBR,SAAS,KAAKhB,SAAS,CAACsB,KAAK,GAAGtB,SAAS,CAACqB,IAAI,GAAGrB,SAAS,CAACsB,KAAK;oBAClE,+DAA+D;oBAC/D,uCAAuC;oBACvClB,iBAAiB,CAACoB,YAAY,CAAC;oBAC/B,8DAA8D;oBAC9D,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACR,SAAS;KAAC,CACZ;IAED,IAAIH,kBAAkB,EAAE;QACtB,0EAA0E;QAC1E,0CAA0C;QAC1C,qBACE,oBAACP,kBAAkB,CAAC6B,QAAQ;YAACF,KAAK,EAAEA,KAAK;yBACvC,oBAACpC,mBAAmB;YAACoB,KAAK,EAAEA,KAAK;WAAGR,QAAQ,CAAuB,CACvC,CAC/B;IACH,OAAO;QACL,qBACE,oBAAC2B,KAAG;YAACC,KAAK,EAAE;gBAAEC,OAAO,EAAE,UAAU;aAAE;YAAEC,iBAAe,EAAEvB,SAAS;yBAC7D,oBAACnB,mBAAmB;YAACoB,KAAK,EAAEA,KAAK;WAAGR,QAAQ,CAAuB,CAC/D,CACP;IACH,CAAC;AACH,CAAC,CACF,CAAA;AAEDF,mBAAmB,CAACiC,WAAW,GAAG,qBAAqB"}

package/dist/types/theme/cookie-theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-provider.d.ts","sourceRoot":"","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,EAAE,EACF,iBAAiB,EAKlB,MAAM,OAAO,CAAA;AACd,OAAO,EAGL,SAAS,EACV,MAAM,aAAa,CAAA;AAMpB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,eAAO,MAAM,kBAAkB,6BACmB,CAAA;AAKlD;;;;;;;KAOK;AAEL,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAClC,iBAAiB,CAAC;IAEhB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAC,CAqGH,CAAA"}
+{"version":3,"file":"cookie-theme-provider.d.ts","sourceRoot":"","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,EAAE,EACF,iBAAiB,EAKlB,MAAM,OAAO,CAAA;AAEd,OAAO,EAGL,SAAS,EACV,MAAM,aAAa,CAAA;AAKpB,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAGtC,eAAO,MAAM,kBAAkB,6BACmB,CAAA;AAKlD;;;;;;;KAOK;AAEL,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAClC,iBAAiB,CAAC;IAEhB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAC,CAuHH,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.0.0-next.13",
+  "version": "3.0.0-next.15",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",
@@ -45,6 +45,7 @@
     "react-toastify": "7.0.4",
     "react-transition-group": "4",
     "styled-system": "5.1.5",
+    "ua-parser-js": "^1.0.2",
     "use-callback-ref": "1.2.5"
   },
   "devDependencies": {
@@ -62,6 +63,10 @@
     "@storybook/react": "^6.5.10",
     "@storybook/storybook-deployer": "^2.8.12",
     "@storybook/theming": "^6.5.10",
+    "@svgr/core": "5.5.0",
+    "@svgr/plugin-jsx": "5.5.0",
+    "@svgr/plugin-prettier": "5.5.0",
+    "@svgr/plugin-svgo": "5.5.0",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.2.245",
     "@swc/jest": "^0.2.22",
@@ -74,6 +79,7 @@
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.15",
     "@types/styled-system__should-forward-prop": "^5.1.2",
+    "@types/ua-parser-js": "^0.7.36",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "browserslist": "^4.21.3",
@@ -103,10 +109,6 @@
     "styled-components": "^5.3.5",
     "tslib": "2.3.1",
     "typescript": "4.8",
-    "zx": "^7.0.8",
-    "@svgr/core": "5.5.0",
-    "@svgr/plugin-jsx": "5.5.0",
-    "@svgr/plugin-prettier": "5.5.0",
-    "@svgr/plugin-svgo": "5.5.0"
+    "zx": "^7.0.8"
   }
 }