@xylabs/sdk-react 2.10.6 → 2.11.3

package/package.json

@@ -9,13 +9,13 @@
     "url": "https://github.com/xylabs/sdk-react/issues"
   },
   "dependencies": {
-    "@emotion/react": "^11.8.2",
+    "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@ethersproject/abstract-signer": "^5.6.0",
     "@ethersproject/providers": "^5.6.2",
-    "@mui/icons-material": "^5.5.1",
-    "@mui/material": "^5.5.3",
-    "@mui/styles": "^5.5.3",
+    "@mui/icons-material": "^5.6.0",
+    "@mui/material": "^5.6.0",
+    "@mui/styles": "^5.6.0",
     "@xylabs/pixel": "^1.3.7",
     "@xylabs/sdk-js": "^2.4.3",
     "axios": "^0.26.1",
@@ -24,15 +24,13 @@
     "md5": "^2.3.0",
     "numeral": "^2.0.6",
     "query-string": "^7.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0"
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -50,8 +48,8 @@
     "@types/md5": "^2.3.2",
     "@types/node": "^17.0.23",
     "@types/numeral": "^2.0.2",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-helmet": "^6.1.5",
     "@xylabs/eslint-config-react": "^2.1.3",
     "@xylabs/rollup-config": "^1.1.15",
@@ -64,6 +62,8 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
     "prettier": "^2.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollbar": "^2.24.1",
     "rollup": "^2.70.1",
@@ -71,7 +71,15 @@
     "ts-node": "^10.7.0",
     "tslib": "^2.3.1",
     "typescript": "^4.6.3",
-    "webpack": "^5.71.0"
+    "webpack": "^5.72.0"
+  },
+  "peerDependencies": {
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "resolutions": {
+    "react": "^18",
+    "react-dom": "^18"
   },
   "esm5": "dist/esm5/index.js",
   "exports": {
@@ -111,6 +119,6 @@
   },
   "sideEffects": false,
   "types": "dist/index.d.ts",
-  "version": "2.10.6",
+  "version": "2.11.3",
   "packageManager": "yarn@3.1.1"
 }

package/src/WithChildren.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export type WithChildren<T = unknown> = Omit<T, 'children'> & {
+  children?: ReactNode
+}

package/src/components/FlexBox/BusyBox.tsx

@@ -1,16 +1,15 @@
 import { Box, BoxProps, Paper, useTheme } from '@mui/material'
-import React from 'react'
 
 import { BusyProps } from '../../BusyProps'
 import { BusyCircularProgress } from '../BusyCircularProgress'
 import { BusyLinearProgress } from '../BusyLinearProgress'
 
-interface BusyBoxProps extends BusyProps, BoxProps {
+export interface BusyBoxProps extends BusyProps, BoxProps {
   paper?: boolean
   background?: boolean
 }
 
-const BusyBox: React.FC<BusyBoxProps> = ({
+export const BusyBox: React.FC<BusyBoxProps> = ({
   background,
   children,
   component,
@@ -51,6 +50,3 @@ const BusyBox: React.FC<BusyBoxProps> = ({
     </Box>
   )
 }
-
-export { BusyBox }
-export type { BusyBoxProps }

package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts

@@ -1,4 +1,5 @@
 import { ThemeOptions } from '@mui/material'
+import { ReactNode } from 'react'
 
 interface InvertableThemeProviderProps {
   dark?: boolean
@@ -13,6 +14,7 @@ interface InvertableThemeProviderProps {
   darkOptions?: ThemeOptions
   lightOptions?: ThemeOptions
   resolve?: boolean
+  children?: ReactNode
 }
 
 export type { InvertableThemeProviderProps }

package/src/components/Pixel/PixelDebuggerProvider.tsx

@@ -1,7 +1,8 @@
 import { DebugUserEventsContext } from '../../contexts'
 import { useLocalStorage } from '../../hooks'
+import { WithChildren } from '../../WithChildren'
 
-export const PixelDebuggerProvider: React.FC = ({ children }) => {
+export const PixelDebuggerProvider: React.FC<WithChildren> = ({ children }) => {
   const [isDebugging, setIsDebugging] = useLocalStorage<boolean>('isDebuggingPixel', false)
   return (
     <DebugUserEventsContext.Provider value={{ isDebugging, setIsDebugging }}>

package/src/contexts/CookieConsent/Loader.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 
+import { WithChildren } from '../../WithChildren'
 import { CookieConsentContext } from './Context'
 
 const CookiesAcceptedLocalStorageName = 'CookiesAccepted'
 
-const CookieConsentLoader: React.FC = ({ children }) => {
+const CookieConsentLoader: React.FC<WithChildren> = ({ children }) => {
   const getAcceptedFromLocalStorage = () => {
     return localStorage.getItem(CookiesAcceptedLocalStorageName) === 'true'
   }

package/src/contexts/Ethers/Loader.tsx

@@ -1,14 +1,17 @@
+import { ReactNode } from 'react'
+
 import { InfuraEthersLoader } from './Infura'
 import { MetaMaskEthersLoader } from './MetaMask'
 import { MyEtherWalletEthersLoader } from './MyEtherWallet'
 import { OperaEthersLoader } from './Opera'
 import { TrustEthersLoader } from './Trust'
 
-interface Props {
+export interface EthersLoaderProps {
   enabled?: boolean
+  children?: ReactNode
 }
 
-export const EthersLoader: React.FC<Props> = (props) => {
+export const EthersLoader: React.FC<EthersLoaderProps> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const global = window as any
   const { children } = props

package/src/contexts/NetworkSettings/Loader.tsx

@@ -1,13 +1,13 @@
 import { EthAddress } from '@xylabs/sdk-js'
-import React from 'react'
 
+import { WithChildren } from '../../WithChildren'
 import { NetworkSettingsContext } from './Context'
 
-interface Props {
+export interface NetworkSettingsLoaderProps {
   enabled?: boolean
 }
 
-export const NetworkSettingsLoader: React.FC<Props> = (props) => {
+export const NetworkSettingsLoader: React.FC<WithChildren<NetworkSettingsLoaderProps>> = (props) => {
   const { children } = props
 
   return (

package/src/contexts/UserEvents/Provider.tsx

@@ -1,14 +1,17 @@
 import { UserEventHandler } from '@xylabs/pixel'
-import React from 'react'
 
 import { XyoUserEventHandler } from '../../lib'
+import { WithChildren } from '../../WithChildren'
 import { UserEventsContext } from './Context'
 
-interface Props<T> {
+export interface UserEventsProviderProps<T> {
   userEvents: UserEventHandler<T>
 }
 
-export const UserEventsProvider: React.FC<Props<unknown>> = ({ userEvents, children }) => {
+export const UserEventsProvider: React.FC<WithChildren<UserEventsProviderProps<unknown>>> = ({
+  userEvents,
+  children,
+}) => {
   return (
     <UserEventsContext.Provider value={{ userEvents: userEvents ?? XyoUserEventHandler.get() }}>
       {children}

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components'
 export * from './contexts'
 export * from './hooks'
 export * from './lib'
+export * from './WithChildren'