@xylabs/sdk-react 2.9.29 → 2.9.33

package/dist/cjs5/components/InvertableThemeProvider/InvertableTheme.d.ts

@@ -1,5 +1,7 @@
 import { ThemeOptions } from '@mui/material';
 interface InvertableTheme {
     options: ThemeOptions;
+    lightOptions?: ThemeOptions;
+    darkOptions?: ThemeOptions;
 }
 export type { InvertableTheme };

package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts

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

package/dist/cjs5/hooks/index.d.ts

@@ -1,9 +1,11 @@
 export * from './useBreakpoint';
+export * from './useInterval';
 export * from './useLocalStorage';
 export * from './useMediaQuery';
 export * from './useMounted';
 export * from './useNavigateToEthAddress';
 export * from './useSpacing';
+export * from './useTimeout';
 export * from './useUserEvents';
 export * from './useWebP';
 export * from './useWindowSize';

package/dist/cjs5/hooks/useInterval.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useInterval: (callback: () => void, delay: number) => import("react").MutableRefObject<number>;

package/dist/cjs5/hooks/useTimeout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useTimeout: (callback: () => void, delay: number) => import("react").MutableRefObject<number>;

package/dist/cjs5/index.js

@@ -1687,27 +1687,29 @@ const resolveThemeColors = (options) => {
         },
     });
 };
-const InvertableThemeProvider = ({ options, children, dark, resolve = false, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
-    var _a, _b;
-    let internalDarkTheme = {};
-    const contextInvertableTheme = react.useContext(InvertableThemeContext);
-    const clonedOptions = cloneDeep__default["default"]((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
-    clonedOptions.palette = (_b = clonedOptions.palette) !== null && _b !== void 0 ? _b : {};
+const InvertableThemeProvider = ({ options, children, dark, resolve = false, scoped = false, invert = false, noResponsiveFonts, darkTheme, darkOptions, lightOptions, }) => {
+    var _a, _b, _c;
+    const parentContext = react.useContext(InvertableThemeContext);
+    const clonedOptions = cloneDeep__default["default"]((_a = options !== null && options !== void 0 ? options : parentContext.options) !== null && _a !== void 0 ? _a : {});
+    const clonedDarkOptions = cloneDeep__default["default"]((_b = darkOptions !== null && darkOptions !== void 0 ? darkOptions : darkTheme) !== null && _b !== void 0 ? _b : parentContext.darkOptions);
+    const clonedLightOptions = cloneDeep__default["default"](lightOptions !== null && lightOptions !== void 0 ? lightOptions : parentContext.lightOptions);
+    clonedOptions.palette = (_c = clonedOptions.palette) !== null && _c !== void 0 ? _c : {};
     if (invert) {
         clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark';
     }
     if (dark !== undefined) {
         clonedOptions.palette.mode = dark ? 'dark' : 'light';
     }
-    if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
-        internalDarkTheme = darkTheme;
-    }
-    let themeOptions = merge__default["default"](clonedOptions, internalDarkTheme);
+    const modeOptions = clonedOptions.palette.mode === 'dark' ? clonedDarkOptions : clonedLightOptions;
+    let themeOptions = merge__default["default"]({}, clonedOptions, modeOptions);
     if (resolve) {
         themeOptions = resolveThemeColors(themeOptions);
     }
     const theme = noResponsiveFonts ? styles$1.createTheme(themeOptions) : material.responsiveFontSizes(styles$1.createTheme(themeOptions));
-    return scoped ? (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0) }, void 0)) : (jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+    const Provider = () => {
+        return (jsxRuntime.jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsxRuntime.jsx(material.ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+    };
+    return scoped ? (jsxRuntime.jsx(material.ScopedCssBaseline, { children: jsxRuntime.jsx(Provider, {}, void 0) }, void 0)) : (jsxRuntime.jsx(Provider, {}, void 0));
 };
 
 // The point of this component it to return to the top of the page on any router navigate
@@ -1803,6 +1805,20 @@ const useBreakpoint = () => {
     }
 };
 
+const useInterval = (callback, delay) => {
+    const intervalRef = react.useRef(-1);
+    const savedCallback = react.useRef(callback);
+    react.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        const tick = () => savedCallback.current();
+        intervalRef.current = window.setInterval(tick, delay);
+        return () => window.clearInterval(intervalRef.current);
+    }, [delay]);
+    return intervalRef;
+};
+
 const useLocalStorage = (key, defaultValue) => {
     const [storedValue, setStoredValue] = react.useState(() => {
         try {
@@ -1877,6 +1893,20 @@ const useSpacing = (value) => {
     return theme.spacing(typeof value === 'string' ? parseInt(value) : value);
 };
 
+const useTimeout = (callback, delay) => {
+    const timeoutRef = react.useRef(-1);
+    const savedCallback = react.useRef(callback);
+    react.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        const tick = () => savedCallback.current();
+        timeoutRef.current = window.setTimeout(tick, delay);
+        return () => window.clearTimeout(timeoutRef.current);
+    }, [delay]);
+    return timeoutRef;
+};
+
 const useUserEvents = () => {
     const { userEvents } = react.useContext(UserEventsContext);
     if (!userEvents) {
@@ -1887,13 +1917,13 @@ const useUserEvents = () => {
 
 let supportsWebP = undefined;
 const useWebP = (webp, alt) => {
-    const [img, setImg] = react.useState(supportsWebP === true ? webp : supportsWebP === false ? alt : undefined);
+    const [img, setImg] = react.useState();
     useAsyncEffect((mounted) => __awaiter(void 0, void 0, void 0, function* () {
         if (supportsWebP === undefined) {
             supportsWebP = yield getSupportsWebP();
-            if (mounted()) {
-                setImg(supportsWebP ? webp : alt);
-            }
+        }
+        if (mounted()) {
+            setImg(supportsWebP ? webp : alt);
         }
     }), [supportsWebP]);
     return img;
@@ -2343,10 +2373,12 @@ exports.setSessionStorageObject = setSessionStorageObject;
 exports.useAsyncEffect = useAsyncEffect;
 exports.useBreakpoint = useBreakpoint;
 exports.useCookieConsent = useCookieConsent;
+exports.useInterval = useInterval;
 exports.useLocalStorage = useLocalStorage;
 exports.useMounted = useMounted;
 exports.useNavigateToEthAddress = useNavigateToEthAddress;
 exports.useSpacing = useSpacing;
+exports.useTimeout = useTimeout;
 exports.useUserEvents = useUserEvents;
 exports.useWebP = useWebP;
 exports.useWindowSize = useWindowSize;