@xylabs/sdk-react 2.9.29 → 2.9.33

package/dist/esm2017/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/esm2017/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/esm2017/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/esm2017/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/esm2017/index.js

@@ -1677,27 +1677,29 @@ const resolveThemeColors = (options) => {
         },
     });
 };
-const InvertableThemeProvider = ({ options, children, dark, resolve = false, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
-    var _a, _b;
-    let internalDarkTheme = {};
-    const contextInvertableTheme = useContext(InvertableThemeContext);
-    const clonedOptions = cloneDeep((_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 = useContext(InvertableThemeContext);
+    const clonedOptions = cloneDeep((_a = options !== null && options !== void 0 ? options : parentContext.options) !== null && _a !== void 0 ? _a : {});
+    const clonedDarkOptions = cloneDeep((_b = darkOptions !== null && darkOptions !== void 0 ? darkOptions : darkTheme) !== null && _b !== void 0 ? _b : parentContext.darkOptions);
+    const clonedLightOptions = cloneDeep(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(clonedOptions, internalDarkTheme);
+    const modeOptions = clonedOptions.palette.mode === 'dark' ? clonedDarkOptions : clonedLightOptions;
+    let themeOptions = merge({}, clonedOptions, modeOptions);
     if (resolve) {
         themeOptions = resolveThemeColors(themeOptions);
     }
     const theme = noResponsiveFonts ? createTheme(themeOptions) : responsiveFontSizes(createTheme(themeOptions));
-    return scoped ? (jsx(ScopedCssBaseline, { children: jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0) }, void 0)) : (jsx(InvertableThemeContext.Provider, Object.assign({ value: { options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+    const Provider = () => {
+        return (jsx(InvertableThemeContext.Provider, Object.assign({ value: { darkOptions: clonedDarkOptions, lightOptions: clonedLightOptions, options: clonedOptions } }, { children: jsx(ThemeProvider, Object.assign({ theme: theme }, { children: children }), void 0) }), void 0));
+    };
+    return scoped ? (jsx(ScopedCssBaseline, { children: jsx(Provider, {}, void 0) }, void 0)) : (jsx(Provider, {}, void 0));
 };
 
 // The point of this component it to return to the top of the page on any router navigate
@@ -1793,6 +1795,20 @@ const useBreakpoint = () => {
     }
 };
 
+const useInterval = (callback, delay) => {
+    const intervalRef = useRef(-1);
+    const savedCallback = useRef(callback);
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    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] = useState(() => {
         try {
@@ -1867,6 +1883,20 @@ const useSpacing = (value) => {
     return theme.spacing(typeof value === 'string' ? parseInt(value) : value);
 };
 
+const useTimeout = (callback, delay) => {
+    const timeoutRef = useRef(-1);
+    const savedCallback = useRef(callback);
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        const tick = () => savedCallback.current();
+        timeoutRef.current = window.setTimeout(tick, delay);
+        return () => window.clearTimeout(timeoutRef.current);
+    }, [delay]);
+    return timeoutRef;
+};
+
 const useUserEvents = () => {
     const { userEvents } = useContext(UserEventsContext);
     if (!userEvents) {
@@ -1877,13 +1907,13 @@ const useUserEvents = () => {
 
 let supportsWebP = undefined;
 const useWebP = (webp, alt) => {
-    const [img, setImg] = useState(supportsWebP === true ? webp : supportsWebP === false ? alt : undefined);
+    const [img, setImg] = 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;
@@ -2247,5 +2277,5 @@ const TokenAmount = (_a) => {
     return (jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
 };
 
-export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
+export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MenuEx, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SelectEx, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, resolveThemeColors, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useInterval, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useTimeout, useUserEvents, useWebP, useWindowSize };
 //# sourceMappingURL=index.js.map