@xylabs/sdk-react 2.9.28 → 2.9.32

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -28,10 +28,13 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
   invert = false,
   noResponsiveFonts,
   darkTheme,
+  darkOptions,
+  lightOptions,
 }) => {
-  let internalDarkTheme = {}
-  const contextInvertableTheme = useContext(InvertableThemeContext)
-  const clonedOptions = cloneDeep(options ?? contextInvertableTheme.options ?? {})
+  const parentContext = useContext(InvertableThemeContext)
+  const clonedOptions = cloneDeep(options ?? parentContext.options ?? {})
+  const clonedDarkOptions = cloneDeep(darkOptions ?? darkTheme ?? parentContext.darkOptions)
+  const clonedLightOptions = cloneDeep(lightOptions ?? parentContext.lightOptions)
 
   clonedOptions.palette = clonedOptions.palette ?? {}
 
@@ -43,11 +46,9 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
     clonedOptions.palette.mode = dark ? 'dark' : 'light'
   }
 
-  if (clonedOptions.palette.mode === 'dark' && darkTheme?.palette) {
-    internalDarkTheme = darkTheme
-  }
+  const modeOptions = clonedOptions.palette.mode === 'dark' ? clonedDarkOptions : clonedLightOptions
 
-  let themeOptions = merge(clonedOptions, internalDarkTheme)
+  let themeOptions = merge({}, clonedOptions, modeOptions)
 
   if (resolve) {
     themeOptions = resolveThemeColors(themeOptions)
@@ -55,15 +56,21 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
 
   const theme: Theme = noResponsiveFonts ? createTheme(themeOptions) : responsiveFontSizes(createTheme(themeOptions))
 
-  return scoped ? (
-    <ScopedCssBaseline>
-      <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
+  const Provider: React.FC = () => {
+    return (
+      <InvertableThemeContext.Provider
+        value={{ darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions }}
+      >
         <ThemeProvider theme={theme}>{children}</ThemeProvider>
       </InvertableThemeContext.Provider>
+    )
+  }
+
+  return scoped ? (
+    <ScopedCssBaseline>
+      <Provider />
     </ScopedCssBaseline>
   ) : (
-    <InvertableThemeContext.Provider value={{ options: clonedOptions }}>
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
-    </InvertableThemeContext.Provider>
+    <Provider />
   )
 }

package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts

@@ -6,7 +6,12 @@ interface InvertableThemeProviderProps {
   invert?: boolean
   noResponsiveFonts?: boolean
   options?: ThemeOptions
+  /**
+   * @deprecated use darkOptions instead
+   */
   darkTheme?: ThemeOptions
+  darkOptions?: ThemeOptions
+  lightOptions?: ThemeOptions
   resolve?: boolean
 }
 

package/src/hooks/useWebP.tsx

@@ -5,16 +5,14 @@ import { useAsyncEffect } from '../lib'
 let supportsWebP: boolean | undefined = undefined
 
 export const useWebP = (webp: string, alt: string) => {
-  const [img, setImg] = useState<string | undefined>(
-    supportsWebP === true ? webp : supportsWebP === false ? alt : undefined
-  )
+  const [img, setImg] = useState<string>()
   useAsyncEffect(
     async (mounted) => {
       if (supportsWebP === undefined) {
         supportsWebP = await getSupportsWebP()
-        if (mounted()) {
-          setImg(supportsWebP ? webp : alt)
-        }
+      }
+      if (mounted()) {
+        setImg(supportsWebP ? webp : alt)
       }
     },
     [supportsWebP]