@etsoo/react 1.4.96 → 1.5.0

package/lib/app/ReactApp.d.ts

@@ -138,6 +138,11 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * @param callback Callback
      */
     freshCountdownUI(callback?: () => PromiseLike<unknown>): void;
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    redirectTo(url: string): void;
     /**
      * Set page data
      * @param data Page data

package/lib/app/ReactApp.js

@@ -1,5 +1,6 @@
-import { ActionResultError, CoreApp, createClient } from '@etsoo/appscript';
+import { ActionResultError, BridgeUtils, CoreApp, createClient } from '@etsoo/appscript';
 import { WindowStorage } from '@etsoo/shared';
+import { redirectTo } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -110,7 +111,7 @@ export class ReactApp extends CoreApp {
      * @param culture New culture definition
      */
     changeCulture(culture) {
-        var _a;
+        var _a, _b;
         // Super call to update cultrue
         super.changeCulture(culture);
         // Update component labels
@@ -126,8 +127,10 @@ export class ReactApp extends CoreApp {
                 promptOK: 'ok'
             }
         });
+        // Notify host
+        (_a = BridgeUtils.host) === null || _a === void 0 ? void 0 : _a.changeCulture(culture.name);
         // Document title
-        document.title = (_a = this.get(this.name)) !== null && _a !== void 0 ? _a : this.name;
+        document.title = (_b = this.get(this.name)) !== null && _b !== void 0 ? _b : this.name;
     }
     /**
      * Change culture extended
@@ -186,6 +189,13 @@ export class ReactApp extends CoreApp {
             inputs: progress
         });
     }
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    redirectTo(url) {
+        redirectTo(url);
+    }
     /**
      * Set page data
      * @param data Page data

package/lib/mu/BridgeCloseButton.js

@@ -24,8 +24,9 @@ export function BridgeCloseButton(props) {
             onClick(event);
         host.exit();
     };
-    return (React.createElement(IconButton, { "aria-label": "close", color: "primary", onClick: onClickLocal, sx: {
+    return (React.createElement(IconButton, { "aria-label": "close", color: "secondary", onClick: onClickLocal, title: title, sx: {
             position: 'absolute',
+            zIndex: (theme) => theme.zIndex.appBar + 1,
             top: (theme) => theme.spacing(0.5),
             right: (theme) => theme.spacing(0.5)
         }, ...rest },

package/lib/mu/ComboBox.js

@@ -75,6 +75,7 @@ export function ComboBox(props) {
             }
         }
     };
+    // When value change
     React.useEffect(() => {
         if (loadData) {
             loadData().then((result) => {
@@ -88,6 +89,8 @@ export function ComboBox(props) {
                 setOptions(result);
             });
         }
+    }, [localValue]);
+    React.useEffect(() => {
         return () => {
             isMounted.current = false;
         };

package/lib/mu/SelectEx.js

@@ -81,16 +81,8 @@ export function SelectEx(props) {
     };
     // Refs
     const divRef = React.useRef();
-    // When layout ready
+    // When value change
     React.useEffect(() => {
-        var _a;
-        const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-        const inputChange = (event) => {
-            // Reset case
-            if (event.cancelable)
-                setValueState(multiple ? [] : '');
-        };
-        input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
         if (loadData) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current)
@@ -103,6 +95,17 @@ export function SelectEx(props) {
                 setOptions(result);
             });
         }
+    }, [localValue]);
+    // When layout ready
+    React.useEffect(() => {
+        var _a;
+        const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+        const inputChange = (event) => {
+            // Reset case
+            if (event.cancelable)
+                setValueState(multiple ? [] : '');
+        };
+        input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
         return () => {
             isMounted.current = false;
             input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
@@ -113,7 +116,9 @@ export function SelectEx(props) {
         React.createElement(InputLabel, { id: labelId, shrink: search
                 ? MUGlobal.searchFieldShrink
                 : MUGlobal.inputFieldShrink }, label),
-        React.createElement(Select, { ref: divRef, value: localOptions.length > 0 ? valueState !== null && valueState !== void 0 ? valueState : '' : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+        React.createElement(Select, { ref: divRef, value: localOptions.some((option) => itemChecked(getId(option)))
+                ? valueState !== null && valueState !== void 0 ? valueState : ''
+                : '', input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                 if (onChange)
                     onChange(event, child);
                 if (multiple)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.96",
+    "version": "1.5.0",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.39",
+        "@etsoo/appscript": "^1.2.43",
         "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.11",
         "@mui/icons-material": "^5.4.1",
@@ -72,7 +72,7 @@
         "react-beautiful-dnd": "^13.1.0",
         "react-dom": "^17.0.2",
         "react-draggable": "^4.4.4",
-        "react-imask": "^6.4.0",
+        "react-imask": "^6.4.2",
         "react-window": "^1.8.6"
     },
     "devDependencies": {

package/src/app/ReactApp.ts

@@ -1,5 +1,6 @@
 import {
     ActionResultError,
+    BridgeUtils,
     CoreApp,
     createClient,
     IActionResult,
@@ -13,6 +14,7 @@ import {
     NotificationReturn
 } from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
+import { redirectTo } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -271,6 +273,9 @@ export class ReactApp<
             }
         });
 
+        // Notify host
+        BridgeUtils.host?.changeCulture(culture.name);
+
         // Document title
         document.title = this.get(this.name) ?? this.name;
     }
@@ -345,6 +350,14 @@ export class ReactApp<
         );
     }
 
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    override redirectTo(url: string) {
+        redirectTo(url);
+    }
+
     /**
      * Set page data
      * @param data Page data

package/src/mu/BridgeCloseButton.tsx

@@ -47,10 +47,12 @@ export function BridgeCloseButton(props: BridgeCloseButtonProps) {
     return (
         <IconButton
             aria-label="close"
-            color="primary"
+            color="secondary"
             onClick={onClickLocal}
+            title={title}
             sx={{
                 position: 'absolute',
+                zIndex: (theme) => theme.zIndex.appBar + 1,
                 top: (theme) => theme.spacing(0.5),
                 right: (theme) => theme.spacing(0.5)
             }}

package/src/mu/ComboBox.tsx

@@ -157,6 +157,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         }
     };
 
+    // When value change
     React.useEffect(() => {
         if (loadData) {
             loadData().then((result) => {
@@ -168,7 +169,9 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 setOptions(result);
             });
         }
+    }, [localValue]);
 
+    React.useEffect(() => {
         return () => {
             isMounted.current = false;
         };

package/src/mu/SelectEx.tsx

@@ -165,15 +165,8 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
     // Refs
     const divRef = React.useRef<HTMLDivElement>();
 
-    // When layout ready
+    // When value change
     React.useEffect(() => {
-        const input = divRef.current?.querySelector('input');
-        const inputChange = (event: Event) => {
-            // Reset case
-            if (event.cancelable) setValueState(multiple ? [] : '');
-        };
-        input?.addEventListener('change', inputChange);
-
         if (loadData) {
             loadData().then((result) => {
                 if (result == null || !isMounted.current) return;
@@ -184,6 +177,16 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
                 setOptions(result);
             });
         }
+    }, [localValue]);
+
+    // When layout ready
+    React.useEffect(() => {
+        const input = divRef.current?.querySelector('input');
+        const inputChange = (event: Event) => {
+            // Reset case
+            if (event.cancelable) setValueState(multiple ? [] : '');
+        };
+        input?.addEventListener('change', inputChange);
 
         return () => {
             isMounted.current = false;
@@ -208,7 +211,11 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             </InputLabel>
             <Select
                 ref={divRef}
-                value={localOptions.length > 0 ? valueState ?? '' : ''}
+                value={
+                    localOptions.some((option) => itemChecked(getId(option)))
+                        ? valueState ?? ''
+                        : ''
+                }
                 input={<OutlinedInput notched label={label} />}
                 labelId={labelId}
                 name={name}