@etsoo/react 1.5.30 → 1.5.33

package/__tests__/mu/NotifierMUTests.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { INotification, NotificationMessageType, NotifierMU } from '../../src';
 
+// Without it will popup error:
+// The current testing environment is not configured to support act
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
 // Root
 const root = document.body;
 const container: HTMLElement = document.createElement('div');
@@ -10,7 +14,12 @@ root.append(container);
 
 // The state provider
 const Provider = NotifierMU.setup();
-ReactDOM.render(<Provider />, container);
+const reactRoot = createRoot(container); // createRoot(container!) if you use TypeScript
+
+act(() => {
+    // Concorrent renderer needs act block
+    reactRoot.render(<Provider />);
+});
 
 // Notifier
 const notifier = NotifierMU.instance;

package/lib/app/ReactApp.d.ts

@@ -22,7 +22,9 @@ export declare let globalApp: IReactApp<IAppSettings, any, IPageData>;
  * @param props Props
  * @returns Component
  */
-export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{}>;
+export declare function ReactAppStateDetector(props: IStateProps): React.FunctionComponentElement<{
+    children?: React.ReactNode;
+}>;
 /**
  * Core application interface
  */

package/lib/app/ReactUtils.js

@@ -47,8 +47,8 @@ export var ReactUtils;
                     // Go(-1), a, index = 0
                     // View c, index = 1, directly push is wrong
                     if (index < stack.length) {
-                        stack.splice(index, stack.length - index);
-                        states.splice(index, stack.length - index);
+                        stack.splice(index);
+                        states.splice(index);
                     }
                     stack.push({
                         pathname,

package/lib/components/GridColumn.d.ts

@@ -15,7 +15,7 @@ export declare type GridAlign = 'center' | 'inherit' | 'justify' | 'left' | 'rig
  * @param align Align
  * @param type Data type
  */
-export declare const GridAlignGet: (align?: GridAlign | undefined, type?: DataTypes.CombinedEnum | undefined) => GridAlign | undefined;
+export declare const GridAlignGet: (align?: GridAlign, type?: GridDataType) => GridAlign | undefined;
 /**
  * Grid cell value type
  */

package/lib/mu/FabBox.js

@@ -18,12 +18,14 @@ export function FabBox(props) {
         ? { marginTop: spaceGap }
         : { marginLeft: spaceGap };
     // Default style
-    Object.assign(sx, {
-        position: 'fixed',
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: columnDirection ? 'column' : 'row',
-        '& > :not(style) + :not(style)': margin
-    });
+    if (typeof sx === 'object') {
+        Object.assign(sx, {
+            position: 'fixed',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: columnDirection ? 'column' : 'row',
+            '& > :not(style) + :not(style)': margin
+        });
+    }
     return React.createElement(Box, { sx: sx, ...rest });
 }

package/lib/mu/FlexBox.d.ts

@@ -5,10 +5,10 @@ import { StackProps } from '@mui/material';
  * @param props Props
  * @returns Component
  */
-export declare function HBox(props: Exclude<StackProps, 'ref'>): JSX.Element;
+export declare function HBox(props: Omit<StackProps, 'ref'>): JSX.Element;
 /**
  * Vertial box
  * @param props Props
  * @returns Component
  */
-export declare function VBox(props: Exclude<StackProps, 'ref'>): JSX.Element;
+export declare function VBox(props: Omit<StackProps, 'ref'>): JSX.Element;

package/lib/mu/ListMoreDisplay.d.ts

@@ -5,7 +5,7 @@ import { GridData, GridLoader } from '../components/GridLoader';
 /**
  * ListMoreDisplay props
  */
-export interface ListMoreDisplayProps<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends CardProps, GridLoader<T> {
+export interface ListMoreDisplayProps<T, F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate> extends Omit<CardProps, 'children'>, GridLoader<T> {
     /**
      * Children to display the list
      */

package/lib/mu/NotifierMU.d.ts

@@ -29,7 +29,7 @@ export declare class NotifierMU extends NotifierReact {
      * @param className Style class name
      * @returns Provider
      */
-    static setup(className?: string): React.FunctionComponent<import("../notifier/Notifier").NotificationReactRenderProps>;
+    static setup(className?: string): React.FunctionComponent<React.PropsWithChildren<import("../notifier/Notifier").NotificationReactRenderProps>>;
     private static getOrigin;
     /**
      * Create align container

package/lib/mu/NotifierMU.js

@@ -311,8 +311,10 @@ export class NotifierMU extends NotifierReact {
      */
     static setup(className = 'notifier-mu') {
         // Create an instance
-        NotifierReact.updateInstance(new NotifierMU());
-        return NotifierReact.instance.createProvider(className);
+        const instance = new NotifierMU();
+        const provider = instance.createProvider(className);
+        NotifierReact.updateInstance(instance);
+        return provider;
     }
     // Calculate origin from align property
     static getOrigin(align) {

package/lib/mu/pages/CommonPage.js

@@ -18,11 +18,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = {}, ...rest } = props;
-    // Merge style
-    Object.assign(sx, {
-        padding: paddings
-    });
+    const { children, disableGutters = true, fabButtons, fabColumnDirection, fabPaddingAdjust = 1.5, fabSize = 'small', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, supportBack = false, targetFields, sx = { padding: paddings }, ...rest } = props;
     // Fab padding
     const fabPadding = MUGlobal.increase(MUGlobal.pagePaddings, fabPaddingAdjust);
     // Labels

package/lib/mu/pages/ViewPage.d.ts

@@ -31,7 +31,7 @@ declare type ViewPageFieldType<T> = (string & keyof T) | [string & keyof T, Grid
 /**
  * View page props
  */
-export interface ViewPageProps<T extends {}> extends Exclude<CommonPageProps, 'children'> {
+export interface ViewPageProps<T extends {}> extends Omit<CommonPageProps, 'children'> {
     /**
      * Actions
      */

package/lib/notifier/Notifier.d.ts

@@ -125,6 +125,6 @@ export declare abstract class NotifierReact extends NotificationContainer<React.
      * @param className Style class name
      * @returns Provider
      */
-    createProvider(className?: string): React.FunctionComponent<NotificationReactRenderProps>;
+    createProvider(className?: string): React.FunctionComponent<React.PropsWithChildren<NotificationReactRenderProps>>;
 }
 export {};

package/lib/notifier/Notifier.js

@@ -16,7 +16,8 @@ export class NotifierReact extends NotificationContainer {
     constructor() {
         super((notification, dismiss) => {
             // Make sure the state update is set
-            this.stateUpdate({ notification, dismiss });
+            if (this.stateUpdate)
+                this.stateUpdate({ notification, dismiss });
         });
     }
     /**

package/lib/states/CultureState.d.ts

@@ -30,11 +30,11 @@ export declare class CultureState {
     /**
      * Context
      */
-    readonly context: React.Context<CultureCalls>;
+    readonly context: import("react").Context<CultureCalls>;
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<CultureProviderProps>;
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<IProviderProps<CultureAction>>>;
     /**
      * Constructor
      */

package/lib/states/IState.d.ts

@@ -42,5 +42,8 @@ export interface IProviderUpdate<A extends IAction> {
  * State provider props
  */
 export interface IProviderProps<A extends IAction> {
+    /**
+     * Update callback
+     */
     update?: IProviderUpdate<A>;
 }

package/lib/states/PageState.d.ts

@@ -46,11 +46,11 @@ export declare class PageState<D extends IPageData> {
     /**
      * Context
      */
-    readonly context: React.Context<PageCalls<D>>;
+    readonly context: import("react").Context<PageCalls<D>>;
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<PageProviderProps<D>>;
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<IProviderProps<PageAction<D>>>>;
     /**
      * Constructor
      */

package/lib/states/State.d.ts

@@ -13,6 +13,6 @@ export declare class State {
      */
     static create<S extends IState, A extends IAction, U extends IUpdate<S, A>, P extends IProviderProps<A>>(reducer: React.Reducer<S, A>, initState: S, calls: U, uiCreator?: IUICreator<S, A, P>): {
         context: React.Context<U>;
-        provider: React.FunctionComponent<P>;
+        provider: React.FunctionComponent<React.PropsWithChildren<P>>;
     };
 }

package/lib/states/UserState.d.ts

@@ -44,11 +44,11 @@ export declare class UserState<D extends IUser> {
     /**
      * Context
      */
-    readonly context: React.Context<UserCalls<D>>;
+    readonly context: import("react").Context<UserCalls<D>>;
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<UserProviderProps<D>>;
+    readonly provider: import("react").FunctionComponent<import("react").PropsWithChildren<IProviderProps<UserAction<D>>>>;
     /**
      * Constructor
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.30",
+    "version": "1.5.33",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -46,52 +46,53 @@
     },
     "homepage": "https://github.com/ETSOO/AppReact#readme",
     "dependencies": {
-        "@emotion/css": "^11.7.1",
-        "@emotion/react": "^11.8.1",
+        "@emotion/css": "^11.9.0",
+        "@emotion/react": "^11.9.0",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.8.1",
-        "@etsoo/appscript": "^1.2.59",
-        "@etsoo/notificationbase": "^1.1.2",
-        "@etsoo/shared": "^1.1.16",
-        "@mui/icons-material": "^5.4.4",
-        "@mui/material": "^5.4.4",
+        "@etsoo/appscript": "^1.2.60",
+        "@etsoo/notificationbase": "^1.1.3",
+        "@etsoo/shared": "^1.1.38",
+        "@mui/icons-material": "^5.8.0",
+        "@mui/material": "^5.8.1",
         "@reach/router": "^1.3.4",
         "@types/pica": "^9.0.0",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/reach__router": "^1.3.10",
-        "@types/react": "^17.0.39",
+        "@types/react": "^18.0.9",
         "@types/react-avatar-editor": "^12.0.0",
         "@types/react-beautiful-dnd": "^13.1.2",
-        "@types/react-dom": "^17.0.13",
+        "@types/react-dom": "^18.0.5",
         "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
         "pica": "^9.0.1",
         "pulltorefreshjs": "^0.1.22",
-        "react": "^17.0.2",
-        "react-avatar-editor": "^12.0.0",
+        "react": "^18.1.0",
+        "react-avatar-editor": "^13.0.0",
         "react-beautiful-dnd": "^13.1.0",
-        "react-dom": "^17.0.2",
-        "react-draggable": "^4.4.4",
+        "react-dom": "^18.1.0",
+        "react-draggable": "^4.4.5",
         "react-imask": "^6.4.2",
-        "react-window": "^1.8.6"
+        "react-window": "^1.8.7"
     },
     "devDependencies": {
-        "@babel/cli": "^7.17.6",
-        "@babel/core": "^7.17.5",
-        "@babel/plugin-transform-runtime": "^7.17.0",
-        "@babel/preset-env": "^7.16.11",
-        "@babel/runtime-corejs3": "^7.17.2",
-        "@types/jest": "^27.4.1",
-        "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.13.0",
-        "@typescript-eslint/parser": "^5.13.0",
-        "eslint": "^8.10.0",
+        "@babel/cli": "^7.17.10",
+        "@babel/core": "^7.18.0",
+        "@babel/plugin-transform-runtime": "^7.18.0",
+        "@babel/preset-env": "^7.18.0",
+        "@babel/runtime-corejs3": "^7.18.0",
+        "@types/jest": "^27.5.1",
+        "@types/react-test-renderer": "^18.0.0",
+        "@typescript-eslint/eslint-plugin": "^5.26.0",
+        "@typescript-eslint/parser": "^5.26.0",
+        "eslint": "^8.16.0",
         "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-react": "^7.29.2",
-        "jest": "^27.5.1",
-        "react-test-renderer": "^17.0.2",
-        "ts-jest": "^27.1.3",
-        "typescript": "^4.6.2"
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-react": "^7.30.0",
+        "jest": "^28.1.0",
+        "jest-environment-jsdom": "^28.1.0",
+        "react-test-renderer": "^18.1.0",
+        "ts-jest": "^28.0.3",
+        "typescript": "^4.7.2"
     }
 }

package/src/app/ReactUtils.ts

@@ -65,8 +65,8 @@ export namespace ReactUtils {
                     // Go(-1), a, index = 0
                     // View c, index = 1, directly push is wrong
                     if (index < stack.length) {
-                        stack.splice(index, stack.length - index);
-                        states.splice(index, stack.length - index);
+                        stack.splice(index);
+                        states.splice(index);
                     }
 
                     stack.push({

package/src/mu/FabBox.tsx

@@ -37,13 +37,15 @@ export function FabBox(props: FabBoxProps) {
         : { marginLeft: spaceGap };
 
     // Default style
-    Object.assign(sx, {
-        position: 'fixed',
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: columnDirection ? 'column' : 'row',
-        '& > :not(style) + :not(style)': margin
-    });
+    if (typeof sx === 'object') {
+        Object.assign(sx as any, {
+            position: 'fixed',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: columnDirection ? 'column' : 'row',
+            '& > :not(style) + :not(style)': margin
+        });
+    }
 
     return <Box sx={sx} {...rest} />;
 }

package/src/mu/FlexBox.tsx

@@ -6,7 +6,7 @@ import React from 'react';
  * @param props Props
  * @returns Component
  */
-export function HBox(props: Exclude<StackProps, 'ref'>) {
+export function HBox(props: Omit<StackProps, 'ref'>) {
     return <Stack direction="row" width="100%" {...props} />;
 }
 
@@ -15,6 +15,6 @@ export function HBox(props: Exclude<StackProps, 'ref'>) {
  * @param props Props
  * @returns Component
  */
-export function VBox(props: Exclude<StackProps, 'ref'>) {
+export function VBox(props: Omit<StackProps, 'ref'>) {
     return <Stack direction="column" {...props} />;
 }

package/src/mu/ListMoreDisplay.tsx

@@ -24,7 +24,7 @@ import { LoadingButton } from './LoadingButton';
 export interface ListMoreDisplayProps<
     T,
     F extends DataTypes.BasicTemplate = DataTypes.BasicTemplate
-> extends CardProps,
+> extends Omit<CardProps, 'children'>,
         GridLoader<T> {
     /**
      * Children to display the list

package/src/mu/NotifierMU.tsx

@@ -487,8 +487,10 @@ export class NotifierMU extends NotifierReact {
      */
     static setup(className = 'notifier-mu') {
         // Create an instance
-        NotifierReact.updateInstance(new NotifierMU());
-        return NotifierReact.instance.createProvider(className);
+        const instance = new NotifierMU();
+        const provider = instance.createProvider(className);
+        NotifierReact.updateInstance(instance);
+        return provider;
     }
 
     // Calculate origin from align property

package/src/mu/pages/CommonPage.tsx

@@ -37,15 +37,10 @@ export function CommonPage(props: CommonPageProps) {
         scrollContainer,
         supportBack = false,
         targetFields,
-        sx = {},
+        sx = { padding: paddings },
         ...rest
     } = props;
 
-    // Merge style
-    Object.assign(sx, {
-        padding: paddings
-    });
-
     // Fab padding
     const fabPadding = MUGlobal.increase(
         MUGlobal.pagePaddings,

package/src/mu/pages/ViewPage.tsx

@@ -58,7 +58,7 @@ type ViewPageFieldType<T> =
  * View page props
  */
 export interface ViewPageProps<T extends {}>
-    extends Exclude<CommonPageProps, 'children'> {
+    extends Omit<CommonPageProps, 'children'> {
     /**
      * Actions
      */

package/src/notifier/Notifier.ts

@@ -163,7 +163,7 @@ export abstract class NotifierReact
     protected constructor() {
         super((notification, dismiss) => {
             // Make sure the state update is set
-            this.stateUpdate!({ notification, dismiss });
+            if (this.stateUpdate) this.stateUpdate({ notification, dismiss });
         });
     }
 

package/src/states/CultureState.ts

@@ -46,12 +46,12 @@ export class CultureState {
     /**
      * Context
      */
-    readonly context: React.Context<CultureCalls>;
+    readonly context;
 
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<CultureProviderProps>;
+    readonly provider;
 
     /**
      * Constructor

package/src/states/IState.ts

@@ -1,5 +1,5 @@
 import { IAction, IState, UserKey } from '@etsoo/appscript';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 /**
  * State UI creator
@@ -49,5 +49,8 @@ export interface IProviderUpdate<A extends IAction> {
  * State provider props
  */
 export interface IProviderProps<A extends IAction> {
+    /**
+     * Update callback
+     */
     update?: IProviderUpdate<A>;
 }

package/src/states/PageState.ts

@@ -58,12 +58,12 @@ export class PageState<D extends IPageData> {
     /**
      * Context
      */
-    readonly context: React.Context<PageCalls<D>>;
+    readonly context;
 
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<PageProviderProps<D>>;
+    readonly provider;
 
     /**
      * Constructor

package/src/states/RouterProps.ts

@@ -1,6 +1,5 @@
 import { DataTypes } from '@etsoo/shared';
 import { RouteComponentProps } from '@reach/router';
-import { Props } from 'react-input-mask';
 
 /**
  * Add / Edit page router props, include 'id' (/:id) or none when adding query parameter

package/src/states/State.tsx

@@ -27,7 +27,9 @@ export class State {
         const context = React.createContext(calls);
 
         // State context provider
-        const provider: React.FunctionComponent<P> = (props) => {
+        const provider: React.FunctionComponent<React.PropsWithChildren<P>> = (
+            props
+        ) => {
             // Destruct
             const { children, update } = props;
 

package/src/states/UserState.ts

@@ -58,12 +58,12 @@ export class UserState<D extends IUser> {
     /**
      * Context
      */
-    readonly context: React.Context<UserCalls<D>>;
+    readonly context;
 
     /**
      * Provider
      */
-    readonly provider: React.FunctionComponent<UserProviderProps<D>>;
+    readonly provider;
 
     /**
      * Constructor