@xylabs/sdk-react 2.9.24 → 2.9.28

package/package.json

@@ -125,6 +125,6 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.9.24",
+  "version": "2.9.28",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { responsiveFontSizes, ScopedCssBaseline, Theme, ThemeProvider } from '@mui/material'
 import { createTheme, ThemeOptions } from '@mui/material/styles'
-import clone from 'lodash/clone'
+import cloneDeep from 'lodash/cloneDeep'
 import merge from 'lodash/merge'
 import React, { useContext } from 'react'
 
@@ -31,7 +31,7 @@ export const InvertableThemeProvider: React.FC<InvertableThemeProviderProps> = (
 }) => {
   let internalDarkTheme = {}
   const contextInvertableTheme = useContext(InvertableThemeContext)
-  const clonedOptions = clone(options ?? contextInvertableTheme.options ?? {})
+  const clonedOptions = cloneDeep(options ?? contextInvertableTheme.options ?? {})
 
   clonedOptions.palette = clonedOptions.palette ?? {}
 

package/src/components/MenuEx.tsx

@@ -0,0 +1,13 @@
+import { Menu, MenuProps, PaletteMode, useTheme } from '@mui/material'
+import merge from 'lodash/merge'
+
+export interface MenuExProps extends MenuProps {
+  colorize?: 'primary' | 'secondary'
+  mode?: PaletteMode
+}
+
+export const MenuEx: React.FC<MenuExProps> = ({ MenuListProps = {}, mode = 'light', colorize, ...props }) => {
+  const theme = useTheme()
+  const colorizeMenuListProps = colorize ? { sx: { backgroundColor: theme.palette[colorize][mode] } } : {}
+  return <Menu MenuListProps={merge(MenuListProps, colorizeMenuListProps)} {...props} />
+}

package/src/components/RedirectWithQuery.tsx

@@ -2,18 +2,23 @@ import React, { useEffect } from 'react'
 import { NavigateOptions, To, useLocation, useNavigate } from 'react-router-dom'
 
 interface RedirectProps {
-  to: To
+  to?: To
   toOptions?: NavigateOptions
+  href?: string
 }
 
-const RedirectWithQuery: React.ComponentType<RedirectProps> = ({ to, toOptions }) => {
+const RedirectWithQuery: React.ComponentType<RedirectProps> = ({ href, to, toOptions }) => {
   const newPath = `${to}${document.location.search}`
   const navigate = useNavigate()
   const { pathname } = useLocation()
 
   useEffect(() => {
-    if (newPath !== pathname) {
-      navigate(newPath, { replace: true, ...toOptions })
+    if (href) {
+      window.location.href = href
+    } else {
+      if (newPath !== pathname) {
+        navigate(newPath, { replace: true, ...toOptions })
+      }
     }
   })
 

package/src/components/SelectEx.tsx

@@ -0,0 +1,21 @@
+import { PaletteMode, Select, SelectProps, useTheme } from '@mui/material'
+import merge from 'lodash/merge'
+
+export interface SelectExProps<T> extends SelectProps<T> {
+  colorize?: 'primary' | 'secondary'
+  mode?: PaletteMode
+}
+
+export const SelectEx: <T>(props: SelectExProps<T>) => JSX.Element = ({
+  MenuProps,
+  mode = 'light',
+  colorize,
+  ...props
+}) => {
+  const theme = useTheme()
+  const colorizeMenuProps = colorize
+    ? { MenuListProps: { sx: { backgroundColor: theme.palette[colorize][mode] } } }
+    : {}
+
+  return <Select MenuProps={merge(MenuProps, colorizeMenuProps)} {...props} />
+}

package/src/components/index.ts

@@ -16,12 +16,14 @@ 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 }