@hitachivantara/uikit-react-core 5.18.0 → 5.18.2

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/providers/ThemeProvider.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useEffect, useMemo } from "react";
+import { createContext, useState, useEffect, useCallback, useMemo } from "react";
 import { parseTheme } from "@hitachivantara/uikit-styles";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import { HvThemeContext as HvThemeContext2 } from "@hitachivantara/uikit-react-shared";
@@ -20,29 +20,31 @@ const HvThemeProvider = ({
   theme,
   emotionCache,
   colorMode,
-  themeRootId
+  themeRootId: rootId
 }) => {
-  let pTheme = parseTheme(themesList, theme, colorMode);
-  const [rootId] = useState(themeRootId);
-  const [activeTheme, setActiveTheme] = useState(pTheme.theme);
-  const [selectedTheme, setSelectedTheme] = useState(pTheme.selectedTheme);
-  const [selectedMode, setThemeMode] = useState(pTheme.selectedMode);
-  const [colorModes, setColorModes] = useState(pTheme.colorModes);
+  const initTheme = parseTheme(themesList, theme, colorMode);
+  const [parsedTheme, setParsedTheme] = useState(initTheme);
+  const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);
+  const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);
+  const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);
+  const [colorModes, setColorModes] = useState(parsedTheme.colorModes);
   const [themes, setThemes] = useState(themesList.map((t) => t.name));
   useEffect(() => {
+    const pTheme = parseTheme(themesList, theme, colorMode);
     setThemes(themesList.map((t) => t.name));
-  }, [themesList]);
-  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {
-    pTheme = parseTheme(themesList, newTheme, newMode);
-    setActiveTheme(pTheme.theme);
-    setSelectedTheme(pTheme.selectedTheme);
-    setThemeMode(pTheme.selectedMode);
-    setColorModes(pTheme.colorModes);
-    setElementAttrs(pTheme.selectedTheme, pTheme.selectedMode, pTheme.colorScheme, rootId);
-  };
+    setParsedTheme(pTheme);
+  }, [themesList, theme, colorMode]);
   useEffect(() => {
-    changeTheme(theme, colorMode);
-  }, [theme, colorMode]);
+    setActiveTheme(parsedTheme.theme);
+    setSelectedTheme(parsedTheme.selectedTheme);
+    setThemeMode(parsedTheme.selectedMode);
+    setColorModes(parsedTheme.colorModes);
+    setElementAttrs(parsedTheme.selectedTheme, parsedTheme.selectedMode, parsedTheme.colorScheme, rootId);
+  }, [parsedTheme, rootId]);
+  const changeTheme = useCallback((newTheme = selectedTheme, newMode = selectedMode) => {
+    const pTheme = parseTheme(themesList, newTheme, newMode);
+    setParsedTheme(pTheme);
+  }, [selectedMode, selectedTheme, themesList]);
   const value = useMemo(() => ({
     themes,
     colorModes,

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport { setElementAttrs } from \"@core/utils\";\nimport { HvTheme } from \"@core/types\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport const defaultCacheKey = \"hv\";\n\nexport const defaultEmotionCache = createCache({\n  key: defaultCacheKey,\n  prepend: true,\n});\n\nexport const EmotionContext = createContext<{ cache: EmotionCache }>({\n  cache: defaultEmotionCache,\n});\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  emotionCache: EmotionCache;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  emotionCache,\n  colorMode,\n  themeRootId,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(themeRootId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.colorScheme,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo<HvThemeContextValue>(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  const emotionCacheValue = useMemo(\n    () => ({ cache: emotionCache }),\n    [emotionCache]\n  );\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        <EmotionContext.Provider value={emotionCacheValue}>\n          {children}\n        </EmotionContext.Provider>\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["defaultCacheKey","defaultEmotionCache","createCache","key","prepend","EmotionContext","createContext","cache","HvThemeProvider","children","themes","themesList","theme","emotionCache","colorMode","themeRootId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","colorScheme","value","useMemo","MuiTheme","createTheme","breakpoints","values","emotionCacheValue","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;;AAeO,MAAMA,kBAAkB;AAExB,MAAMC,sBAAsBC,YAAY;AAAA,EAC7CC,KAAKH;AAAAA,EACLI,SAAS;AACX,CAAC;AAEM,MAAMC,iBAAiBC,cAAuC;AAAA,EACnEC,OAAON;AACT,CAAC;AAWM,MAAMO,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWN,YAAYC,OAAOE,SAAS;AAEpD,QAAM,CAACI,MAAM,IAAIC,SAA6BJ,WAAW;AACzD,QAAM,CAACK,aAAaC,cAAc,IAAIF,SACpCH,OAAOJ,KACT;AACA,QAAM,CAACU,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aACT;AACA,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAAChB,QAAQkB,SAAS,IAAIT,SAAmBR,WAAWkB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUjB,WAAWkB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACpB,UAAU,CAAC;AAEf,QAAMsB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWN,YAAYuB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOJ,KAAK;AAC3BW,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,aACPnB,MACF;AAAA,EAAA;AAGFc,YAAU,MAAM;AACdC,gBAAYrB,OAAOE,SAAS;AAAA,EAAA,GAC3B,CAACF,OAAOE,SAAS,CAAC;AAEfwB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL7B;AAAAA,IACAgB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAf;AAAAA,EAAAA,IAEF,CACER,QACAgB,YACAN,aACAE,eACAE,cACAS,aACAf,MAAM,CAEV;AAEA,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAEKC,QAAAA,oBAAoBL,QACxB,OAAO;AAAA,IAAEhC,OAAOM;AAAAA,EAAAA,IAChB,CAACA,YAAY,CACf;AAEA,6BACGgC,eAAgB;AAAA,IAACjC,OAAO4B;AAAAA,IAAS/B,UAC/BqC,oBAAAA,eAAeC,UAAQ;AAAA,MAACT;AAAAA,MAAa7B,UACnCJ,oBAAAA,eAAe0C,UAAQ;AAAA,QAACT,OAAOM;AAAAA,QAAkBnC;AAAAA,MAAAA,CAEzB;AAAA,IAAA,CACF;AAAA,EAAA,CACT;AAEtB;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport { setElementAttrs } from \"@core/utils\";\nimport { HvTheme } from \"@core/types\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport const defaultCacheKey = \"hv\";\n\nexport const defaultEmotionCache = createCache({\n  key: defaultCacheKey,\n  prepend: true,\n});\n\nexport const EmotionContext = createContext<{ cache: EmotionCache }>({\n  cache: defaultEmotionCache,\n});\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  emotionCache: EmotionCache;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  emotionCache,\n  colorMode,\n  themeRootId: rootId,\n}: HvThemeProviderProps) => {\n  const initTheme = parseTheme(themesList, theme, colorMode);\n\n  const [parsedTheme, setParsedTheme] = useState(initTheme);\n  const [activeTheme, setActiveTheme] = useState(parsedTheme.theme);\n  const [selectedTheme, setSelectedTheme] = useState(parsedTheme.selectedTheme);\n  const [selectedMode, setThemeMode] = useState(parsedTheme.selectedMode);\n  const [colorModes, setColorModes] = useState(parsedTheme.colorModes);\n  const [themes, setThemes] = useState(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    const pTheme = parseTheme(themesList, theme, colorMode);\n    setThemes(themesList.map((t) => t.name));\n    setParsedTheme(pTheme);\n  }, [themesList, theme, colorMode]);\n\n  useEffect(() => {\n    setActiveTheme(parsedTheme.theme);\n    setSelectedTheme(parsedTheme.selectedTheme);\n    setThemeMode(parsedTheme.selectedMode);\n    setColorModes(parsedTheme.colorModes);\n\n    setElementAttrs(\n      parsedTheme.selectedTheme,\n      parsedTheme.selectedMode,\n      parsedTheme.colorScheme,\n      rootId\n    );\n  }, [parsedTheme, rootId]);\n\n  const changeTheme = useCallback(\n    (newTheme = selectedTheme, newMode = selectedMode) => {\n      const pTheme = parseTheme(themesList, newTheme, newMode);\n      setParsedTheme(pTheme);\n    },\n    [selectedMode, selectedTheme, themesList]\n  );\n\n  const value = useMemo<HvThemeContextValue>(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  const emotionCacheValue = useMemo(\n    () => ({ cache: emotionCache }),\n    [emotionCache]\n  );\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        <EmotionContext.Provider value={emotionCacheValue}>\n          {children}\n        </EmotionContext.Provider>\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["defaultCacheKey","defaultEmotionCache","createCache","key","prepend","EmotionContext","createContext","cache","HvThemeProvider","children","themes","themesList","theme","emotionCache","colorMode","themeRootId","rootId","initTheme","parseTheme","parsedTheme","setParsedTheme","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","pTheme","setElementAttrs","colorScheme","changeTheme","useCallback","newTheme","newMode","value","useMemo","MuiTheme","createTheme","breakpoints","values","emotionCacheValue","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;;AAqBO,MAAMA,kBAAkB;AAExB,MAAMC,sBAAsBC,YAAY;AAAA,EAC7CC,KAAKH;AAAAA,EACLI,SAAS;AACX,CAAC;AAEM,MAAMC,iBAAiBC,cAAuC;AAAA,EACnEC,OAAON;AACT,CAAC;AAWM,MAAMO,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAaC;AACO,MAAM;AAC1B,QAAMC,YAAYC,WAAWP,YAAYC,OAAOE,SAAS;AAEzD,QAAM,CAACK,aAAaC,cAAc,IAAIC,SAASJ,SAAS;AACxD,QAAM,CAACK,aAAaC,cAAc,IAAIF,SAASF,YAAYP,KAAK;AAChE,QAAM,CAACY,eAAeC,gBAAgB,IAAIJ,SAASF,YAAYK,aAAa;AAC5E,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAASF,YAAYO,YAAY;AACtE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAASF,YAAYS,UAAU;AAC7D,QAAA,CAAClB,QAAQoB,SAAS,IAAIT,SAASV,WAAWoB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAElEC,YAAU,MAAM;AACd,UAAMC,SAASjB,WAAWP,YAAYC,OAAOE,SAAS;AACtDgB,cAAUnB,WAAWoB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AACvCb,mBAAee,MAAM;AAAA,EACpB,GAAA,CAACxB,YAAYC,OAAOE,SAAS,CAAC;AAEjCoB,YAAU,MAAM;AACdX,mBAAeJ,YAAYP,KAAK;AAChCa,qBAAiBN,YAAYK,aAAa;AAC1CG,iBAAaR,YAAYO,YAAY;AACrCG,kBAAcV,YAAYS,UAAU;AAEpCQ,oBACEjB,YAAYK,eACZL,YAAYO,cACZP,YAAYkB,aACZrB,MACF;AAAA,EAAA,GACC,CAACG,aAAaH,MAAM,CAAC;AAExB,QAAMsB,cAAcC,YAClB,CAACC,WAAWhB,eAAeiB,UAAUf,iBAAiB;AACpD,UAAMS,SAASjB,WAAWP,YAAY6B,UAAUC,OAAO;AACvDrB,mBAAee,MAAM;AAAA,EAEvB,GAAA,CAACT,cAAcF,eAAeb,UAAU,CAC1C;AAEM+B,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLjC;AAAAA,IACAkB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAY;AAAAA,IACAtB;AAAAA,EAAAA,IAEF,CACEN,QACAkB,YACAN,aACAE,eACAE,cACAY,aACAtB,MAAM,CAEV;AAEA,QAAM4B,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGzB,YAAYwB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAEKC,QAAAA,oBAAoBL,QACxB,OAAO;AAAA,IAAEpC,OAAOM;AAAAA,EAAAA,IAChB,CAACA,YAAY,CACf;AAEA,6BACGoC,eAAgB;AAAA,IAACrC,OAAOgC;AAAAA,IAASnC,UAC/ByC,oBAAAA,eAAeC,UAAQ;AAAA,MAACT;AAAAA,MAAajC,UACnCJ,oBAAAA,eAAe8C,UAAQ;AAAA,QAACT,OAAOM;AAAAA,QAAkBvC;AAAAA,MAAAA,CAEzB;AAAA,IAAA,CACF;AAAA,EAAA,CACT;AAEtB;"}