@xylabs/sdk-react 2.9.23 → 2.9.27

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

@@ -1,5 +1,12 @@
-import { Theme, ThemeOptions } from '@mui/material/styles';
+import { ThemeOptions } from '@mui/material/styles';
 import React from 'react';
 import { InvertableThemeProviderProps } from './InvertableThemeProviderProps';
-export declare const resolveThemeColors: (theme: Theme, options: ThemeOptions) => Theme;
+export declare const resolveThemeColors: (options: ThemeOptions) => ThemeOptions & {
+    palette: {
+        text: {
+            primary: string;
+            secondary: string;
+        };
+    };
+};
 export declare const InvertableThemeProvider: React.FC<InvertableThemeProviderProps>;

package/dist/cjs5/components/MenuEx.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuProps, PaletteMode } from '@mui/material';
+export interface MenuExProps extends MenuProps {
+    colorize?: 'primary' | 'secondary';
+    mode?: PaletteMode;
+}
+export declare const MenuEx: React.FC<MenuExProps>;

package/dist/cjs5/components/RedirectWithQuery.d.ts

@@ -3,6 +3,7 @@ import { NavigateOptions, To } from 'react-router-dom';
 interface RedirectProps {
     to: To;
     toOptions?: NavigateOptions;
+    href?: string;
 }
 declare const RedirectWithQuery: React.ComponentType<RedirectProps>;
 export { RedirectWithQuery };

package/dist/cjs5/components/SelectEx.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PaletteMode, SelectProps } from '@mui/material';
+export interface SelectExProps<T> extends SelectProps<T> {
+    colorize?: 'primary' | 'secondary';
+    mode?: PaletteMode;
+}
+export declare const SelectEx: <T>(props: SelectExProps<T>) => JSX.Element;

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

@@ -15,11 +15,13 @@ export * from './Experiments';
 export * from './FlexBox';
 export * from './InvertableThemeProvider';
 export * from './LinkEx';
+export * from './MenuEx';
 export * from './NumberStatus';
 export * from './Pixel';
 export * from './Portal';
 export * from './QuickTipButton';
 export * from './RichResult';
 export * from './ScrollToTop';
+export * from './SelectEx';
 export * from './TokenAmount';
 export { Background, CoverProgress, HoverScale, Identicon, RedirectWithQuery, ScrollToTopButton };

package/dist/cjs5/index.js

@@ -16,7 +16,7 @@ var sdkJs = require('@xylabs/sdk-js');
 var pixel = require('@xylabs/pixel');
 var queryString = require('query-string');
 var styles$1 = require('@mui/material/styles');
-var clone = require('lodash/clone');
+var cloneDeep = require('lodash/cloneDeep');
 var merge = require('lodash/merge');
 var numeral = require('numeral');
 var reactDom = require('react-dom');
@@ -24,7 +24,7 @@ var reactDom = require('react-dom');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
-var clone__default = /*#__PURE__*/_interopDefaultLegacy(clone);
+var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var numeral__default = /*#__PURE__*/_interopDefaultLegacy(numeral);
 
@@ -202,13 +202,18 @@ const Identicon = (_a) => {
     return (jsxRuntime.jsx(FlexRow, Object.assign({}, props, { children: jsxRuntime.jsx("canvas", { className: className, ref: canvas, style: { height: size, width: size } }, void 0) }), void 0));
 };
 
-const RedirectWithQuery = ({ to, toOptions }) => {
+const RedirectWithQuery = ({ href, to, toOptions }) => {
     const newPath = `${to}${document.location.search}`;
     const navigate = reactRouterDom.useNavigate();
     const { pathname } = reactRouterDom.useLocation();
     react.useEffect(() => {
-        if (newPath !== pathname) {
-            navigate(newPath, Object.assign({ replace: true }, toOptions));
+        if (href) {
+            window.location.href = href;
+        }
+        else {
+            if (newPath !== pathname) {
+                navigate(newPath, Object.assign({ replace: true }, toOptions));
+            }
         }
     });
     return jsxRuntime.jsx("div", {}, void 0);
@@ -1670,9 +1675,10 @@ const InvertableThemeContext = react.createContext({
     options: {},
 });
 
-const resolveThemeColors = (theme, options) => {
+const resolveThemeColors = (options) => {
     var _a, _b;
-    const newTheme = styles$1.createTheme(options, {
+    const theme = styles$1.createTheme(options);
+    return merge__default["default"]({}, options, {
         palette: {
             text: {
                 primary: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.getContrastText(theme.palette.primary.main),
@@ -1680,13 +1686,12 @@ const resolveThemeColors = (theme, options) => {
             },
         },
     });
-    return newTheme;
 };
 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 = clone__default["default"]((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
+    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 : {};
     if (invert) {
         clonedOptions.palette.mode = clonedOptions.palette.mode === 'dark' ? 'light' : 'dark';
@@ -1697,13 +1702,11 @@ const InvertableThemeProvider = ({ options, children, dark, resolve = false, sco
     if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
         internalDarkTheme = darkTheme;
     }
-    let theme = styles$1.createTheme(clonedOptions, internalDarkTheme);
+    let themeOptions = merge__default["default"](clonedOptions, internalDarkTheme);
     if (resolve) {
-        theme = resolveThemeColors(theme, merge__default["default"]({}, clonedOptions, internalDarkTheme));
-    }
-    if (!noResponsiveFonts) {
-        theme = material.responsiveFontSizes(theme);
+        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));
 };
 
@@ -2076,6 +2079,13 @@ const LinkToEx = (_a) => {
     return jsxRuntime.jsx(material.Link, Object.assign({ component: reactRouterDom.Link, to: to }, props), void 0);
 };
 
+const MenuEx = (_a) => {
+    var { MenuListProps = {}, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuListProps", "mode", "colorize"]);
+    const theme = material.useTheme();
+    const colorizeMenuListProps = colorize ? { sx: { backgroundColor: theme.palette[colorize][mode] } } : {};
+    return jsxRuntime.jsx(material.Menu, Object.assign({ MenuListProps: merge__default["default"](MenuListProps, colorizeMenuListProps) }, props), void 0);
+};
+
 const NumberStatus = (_a) => {
     var _b, _c;
     var { error, format = '0[.]0a', color = 'primary', title, value, size, fontSize, rounded = false, autoWidth = false, style } = _a, props = __rest(_a, ["error", "format", "color", "title", "value", "size", "fontSize", "rounded", "autoWidth", "style"]);
@@ -2220,6 +2230,15 @@ exports.MapCategoryType = void 0;
     MapCategoryType["VenueMap"] = "VenueMap";
 })(exports.MapCategoryType || (exports.MapCategoryType = {}));
 
+const SelectEx = (_a) => {
+    var { MenuProps, mode = 'light', colorize } = _a, props = __rest(_a, ["MenuProps", "mode", "colorize"]);
+    const theme = material.useTheme();
+    const colorizeMenuProps = colorize
+        ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
+        : {};
+    return jsxRuntime.jsx(material.Select, Object.assign({ MenuProps: merge__default["default"](MenuProps, colorizeMenuProps) }, props), void 0);
+};
+
 var img = "data:image/svg+xml,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 238'%3e%3cdefs%3e%3cstyle%3e.cls-1%7bfill:%23999%3b%7d%3c/style%3e%3c/defs%3e%3ctitle%3eicon_gray%3c/title%3e%3cpath class='cls-1' d='M74.5%2c28.33%2c21.29%2c120.5%2c74.5%2c212.67H180.94l1.76-3%2c51.46-89.13L180.94%2c28.33ZM84.65%2c40.54h78.83L111.65%2c56.93a15.85%2c15.85%2c0%2c0%2c1%2c2%2c5l59.66-18.81L185.22%2c101a20.12%2c20.12%2c0%2c0%2c1%2c5.36-.78l-10-47.91%2c37.87%2c65.53h-7.62a24.21%2c24.21%2c0%2c0%2c1%2c.15%2c2.68%2c23.29%2c23.29%2c0%2c0%2c1-.15%2c2.68h7.62l-39.1%2c67.75%2c10.92-50.13A20.57%2c20.57%2c0%2c0%2c1%2c185%2c140l-12.88%2c59-58.37-19.53a17.61%2c17.61%2c0%2c0%2c1-1.7%2c5l47.5%2c15.92H84.65l4-6.85A20.17%2c20.17%2c0%2c0%2c1%2c83.93%2c191L80%2c197.78%2c42.67%2c133.13l37%2c32.66a20.52%2c20.52%2c0%2c0%2c1%2c3.6-4L36.69%2c120.66%2c85%2c77.79a17.45%2c17.45%2c0%2c0%2c1-3.19-4.32l-39.46%2c35L80%2c43.22l5.56%2c9.69A17.51%2c17.51%2c0%2c0%2c1%2c90.12%2c50Zm28.24%2c31.17a16.15%2c16.15%2c0%2c0%2c1-2.68%2c4.64l62%2c35.81a19.74%2c19.74%2c0%2c0%2c1%2c2.83-4.54Zm-20%2c10.51v75.33a18%2c18%2c0%2c0%2c1%2c2.47-.16%2c17.18%2c17.18%2c0%2c0%2c1%2c2.89.21v-75a11.21%2c11.21%2c0%2c0%2c1-1.29%2c0%2c17.57%2c17.57%2c0%2c0%2c1-4.07-.47Zm79.34%2c46.63-62.08%2c35.81a18.45%2c18.45%2c0%2c0%2c1%2c2.68%2c4.68l62.23-36a19.68%2c19.68%2c0%2c0%2c1-2.83-4.53Z'/%3e%3cpath class='cls-1' d='M97%2c48.58a17.06%2c17.06%2c0%2c1%2c0%2c17%2c17%2c17.08%2c17.08%2c0%2c0%2c0-17-17Zm0%2c5.36a11.7%2c11.7%2c0%2c1%2c1-11.7%2c11.69A11.65%2c11.65%2c0%2c0%2c1%2c97%2c53.94Z'/%3e%3cpath class='cls-1' d='M95.37%2c157.39a18.73%2c18.73%2c0%2c1%2c0%2c18.7%2c18.7%2c18.74%2c18.74%2c0%2c0%2c0-18.7-18.7Zm0%2c5.31A13.4%2c13.4%2c0%2c1%2c1%2c82%2c176.09a13.37%2c13.37%2c0%2c0%2c1%2c13.4-13.39Z'/%3e%3cpath class='cls-1' d='M190.73%2c100.2A20.3%2c20.3%2c0%2c1%2c0%2c211%2c120.5a20.34%2c20.34%2c0%2c0%2c0-20.3-20.3Zm0%2c5.36a14.94%2c14.94%2c0%2c1%2c1-14.94%2c14.94%2c14.88%2c14.88%2c0%2c0%2c1%2c14.94-14.94Z'/%3e%3c/svg%3e";
 
 const base10Shift = (bn, places) => {
@@ -2280,6 +2299,7 @@ exports.HoverScale = HoverScale;
 exports.Identicon = Identicon;
 exports.InvertableThemeProvider = InvertableThemeProvider;
 exports.LinkToEx = LinkToEx;
+exports.MenuEx = MenuEx;
 exports.MessageDialog = MessageDialog;
 exports.NetworkSettingsContext = NetworkSettingsContext;
 exports.NetworkSettingsLoader = NetworkSettingsLoader;
@@ -2297,6 +2317,7 @@ exports.Referrer = Referrer;
 exports.RichResult = RichResult;
 exports.ScrollToTop = ScrollToTop;
 exports.ScrollToTopButton = ScrollToTopButton;
+exports.SelectEx = SelectEx;
 exports.SnapTr = SnapTr;
 exports.SnapchatStandardEvents = SnapchatStandardEvents;
 exports.TiktokCustomEvent = TiktokCustomEvent;