@xylabs/sdk-react 2.9.16 → 2.9.21

package/dist/node/index.js

@@ -1536,6 +1536,12 @@ const NetworkSettingsLoader = (props) => {
 };
 
 const UserEventsContext = react.createContext({});
+const DebugUserEventsContext = react.createContext({
+    isDebugging: false,
+    setIsDebugging: (value) => {
+        console.warn('set is debugging is not set', value);
+    },
+});
 
 const UserEventsLoader = ({ userEvents, children }) => {
     return jsxRuntime.jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
@@ -1662,8 +1668,9 @@ const InvertableThemeContext = react.createContext({
     options: {},
 });
 
-const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, }) => {
+const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
     var _a, _b;
+    let internalDarkTheme = {};
     const contextInvertableTheme = react.useContext(InvertableThemeContext);
     const clonedOptions = clone__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 : {};
@@ -1673,7 +1680,10 @@ const InvertableThemeProvider = ({ options, children, dark, scoped = false, inve
     if (dark !== undefined) {
         clonedOptions.palette.mode = dark ? 'dark' : 'light';
     }
-    let theme = styles$1.createTheme(clonedOptions);
+    if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
+        internalDarkTheme = darkTheme;
+    }
+    let theme = styles$1.createTheme(clonedOptions, internalDarkTheme);
     if (!noResponsiveFonts) {
         theme = material.responsiveFontSizes(theme);
     }
@@ -1777,7 +1787,7 @@ const useLocalStorage = (key, defaultValue) => {
     const [storedValue, setStoredValue] = react.useState(() => {
         try {
             const item = getLocalStorageObject(key);
-            return item || defaultValue;
+            return Object.keys(item).length ? item : defaultValue;
         }
         catch (ex) {
             //Error is already logged
@@ -2045,6 +2055,24 @@ const NumberStatus = (_a) => {
     return (jsxRuntime.jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsxRuntime.jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorTop, color: theme.palette.getContrastText(bgColorTop), fontSize: calcFontSize, fontFamily: "Source Code Pro,monospace", alignItems: "center", height: sizePixels * 0.75 }, { children: numeral__default["default"](value).format(format) }), void 0), jsxRuntime.jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorBottom, borderTop: "1px", color: theme.palette.getContrastText(bgColorBottom), fontSize: sizePixels * 0.12, fontFamily: theme.typography.fontFamily, height: sizePixels * 0.25 }, { children: title }), void 0)] }), void 0) }), void 0));
 };
 
+const Portal = ({ children, className, el = 'div', target = 'body' }) => {
+    const [container] = react.useState(document.createElement(el));
+    if (className) {
+        container.classList.add(className);
+    }
+    react.useEffect(() => {
+        const targetElement = document.querySelector(target);
+        if (!targetElement) {
+            console.warn(`Unable to find target element: ${target}`);
+        }
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
+        return () => {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
+        };
+    }, [container, target]);
+    return reactDom.createPortal(children, container);
+};
+
 const usePixelAltSendHandler = (altHandler) => {
     const [pixelSend, setPixelSend] = react.useState();
     react.useEffect(() => {
@@ -2068,6 +2096,7 @@ const usePixelAltSendHandler = (altHandler) => {
 };
 
 const PixelDebugger = () => {
+    const { isDebugging } = react.useContext(DebugUserEventsContext);
     //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
     const theme = material.useTheme();
     const [displayEvents, setDisplayEvents] = react.useState(false);
@@ -2075,40 +2104,30 @@ const PixelDebugger = () => {
     usePixelAltSendHandler((event, fields) => {
         setEvents((events) => [{ event, fields }, ...events]);
     });
-    return (jsxRuntime.jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsxRuntime.jsx(material.Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsxRuntime.jsx(material.Card, Object.assign({ variant: "outlined", sx: {
-                    backdropFilter: 'blur(16px) saturate(180%)',
-                    backgroundColor: 'rgba(18, 18, 18, .70)',
-                    overflowY: 'auto',
-                    width: '100%',
-                }, color: theme.palette.primary.main }, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsxRuntime.jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
+    if (!isDebugging) {
+        return null;
+    }
+    return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsxRuntime.jsx(material.Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsxRuntime.jsx(material.Card, Object.assign({ variant: "outlined", sx: {
+                        backdropFilter: 'blur(16px) saturate(180%)',
+                        backgroundColor: 'rgba(18, 18, 18, .70)',
+                        overflowY: 'auto',
+                        width: '100%',
+                    }, color: theme.palette.primary.main }, { children: jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsxRuntime.jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsxRuntime.jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsxRuntime.jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
 };
 const PixelEventDetails = ({ event, fields, index, events, }) => {
     const [isOpen, setIsOpen] = react.useState(false);
     return (jsxRuntime.jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsxRuntime.jsx(material.Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsxRuntime.jsx(material.Divider, {}, void 0)] }), void 0));
 };
 
-const Portal = ({ children, className, el = 'div', target = 'body' }) => {
-    const [container] = react.useState(document.createElement(el));
-    if (className) {
-        container.classList.add(className);
-    }
-    react.useEffect(() => {
-        const targetElement = document.querySelector(target);
-        if (!targetElement) {
-            console.warn(`Unable to find target element: ${target}`);
-        }
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
-        return () => {
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
-        };
-    }, [container, target]);
-    return reactDom.createPortal(children, container);
+const PixelDebuggerProvider = ({ children }) => {
+    const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
+    return (jsxRuntime.jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
 };
 
 const PixelDebuggerToggle = (_a) => {
     var props = __rest(_a, []);
-    const [showDebugger, setDebugger] = useLocalStorage('isDebuggingPixel', false);
-    return (jsxRuntime.jsxs(FlexRow, Object.assign({}, props, { children: [jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.FormLabel, { children: "Enable Debugger" }, void 0), jsxRuntime.jsx(material.Switch, { checked: showDebugger, onClick: () => setDebugger(!showDebugger) }, void 0)] }, void 0), showDebugger && (jsxRuntime.jsx(Portal, Object.assign({ target: "#pixelPortal" }, { children: jsxRuntime.jsx(PixelDebugger, {}, void 0) }), void 0))] }), void 0));
+    const { setIsDebugging, isDebugging } = react.useContext(DebugUserEventsContext);
+    return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsxs(material.FormControl, { children: [jsxRuntime.jsx(material.FormLabel, { children: "Enable Debugger" }, void 0), jsxRuntime.jsx(material.Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
 };
 
 const QuickTipButton = (_a) => {
@@ -2201,6 +2220,7 @@ exports.CookieConsentBody = CookieConsentBody;
 exports.CookieConsentContext = CookieConsentContext;
 exports.CookieConsentLoader = CookieConsentLoader;
 exports.CoverProgress = CoverProgress;
+exports.DebugUserEventsContext = DebugUserEventsContext;
 exports.DripCustomEvent = DripCustomEvent;
 exports.DripStandardEvents = DripStandardEvents;
 exports.ErrorDialog = ErrorDialog;
@@ -2232,6 +2252,7 @@ exports.NetworkSettingsContext = NetworkSettingsContext;
 exports.NetworkSettingsLoader = NetworkSettingsLoader;
 exports.NumberStatus = NumberStatus;
 exports.PixelDebugger = PixelDebugger;
+exports.PixelDebuggerProvider = PixelDebuggerProvider;
 exports.PixelDebuggerToggle = PixelDebuggerToggle;
 exports.Portal = Portal;
 exports.QuickTipButton = QuickTipButton;