@etsoo/react 1.4.99 → 1.5.3

package/lib/app/ReactApp.d.ts

@@ -1,6 +1,7 @@
 import { CoreApp, IActionResult, IAppSettings, ICoreApp, IUser, IUserData } from '@etsoo/appscript';
 import { NotificationRenderProps, NotificationReturn } from '@etsoo/notificationbase';
 import { DataTypes } from '@etsoo/shared';
+import { History } from '@reach/router';
 import React from 'react';
 import { NotificationReactCallProps } from '../notifier/Notifier';
 import { CultureAction, CultureState } from '../states/CultureState';
@@ -30,6 +31,10 @@ export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IP
      * User state
      */
     readonly userState: UserState<D>;
+    /**
+     * Router history
+     */
+    readonly history?: History;
     /**
      * Is screen size down 'sm'
      */
@@ -69,6 +74,10 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
      * Culture state
      */
     readonly cultureState: CultureState;
+    /**
+     * Router history
+     */
+    readonly history?: History;
     /**
      * Page state
      */
@@ -138,6 +147,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, BridgeUtils, CoreApp, createClient } from '@etsoo/appscript';
 import { WindowStorage } from '@etsoo/shared';
+import { navigate } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -7,6 +8,7 @@ import { CultureState } from '../states/CultureState';
 import { PageActionType, PageState } from '../states/PageState';
 import { UserActionType, UserState } from '../states/UserState';
 import { Labels } from './Labels';
+import { Utils } from './Utils';
 /**
  * Global application
  */
@@ -63,6 +65,10 @@ export class ReactApp extends CoreApp {
          * User state
          */
         this.userState = new UserState();
+        this.history =
+            window.location.hostname === ''
+                ? Utils.getMemoryHistory()
+                : undefined;
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState();
         globalApp = this;
@@ -188,6 +194,13 @@ export class ReactApp extends CoreApp {
             inputs: progress
         });
     }
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    redirectTo(url) {
+        (this.history == null ? navigate : this.history.navigate)(url);
+    }
     /**
      * Set page data
      * @param data Page data

package/lib/app/Utils.d.ts

@@ -1,3 +1,4 @@
+import { History } from '@reach/router';
 import React from 'react';
 /**
  * React utils
@@ -9,6 +10,11 @@ export declare namespace Utils {
      * @returns Formatted value
      */
     function formatInputValue(value: unknown): string | number | any[] | undefined;
+    /**
+     * Get memory history
+     * @returns History
+     */
+    function getMemoryHistory(): History;
     /**
      * Is safe click
      * @param event Mouse event

package/lib/app/Utils.js

@@ -1,8 +1,12 @@
+import { createHistory, createMemorySource } from '@reach/router';
 /**
  * React utils
  */
 export var Utils;
 (function (Utils) {
+    // Memory history
+    // https://github.com/reach/router/issues/225
+    let memoryHistory;
     /**
      * Format input value
      * @param value Input value
@@ -20,6 +24,17 @@ export var Utils;
         return String(value);
     }
     Utils.formatInputValue = formatInputValue;
+    /**
+     * Get memory history
+     * @returns History
+     */
+    function getMemoryHistory() {
+        if (memoryHistory == null) {
+            memoryHistory = createHistory(createMemorySource('/'));
+        }
+        return memoryHistory;
+    }
+    Utils.getMemoryHistory = getMemoryHistory;
     /**
      * Is safe click
      * @param event Mouse event

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/SelectEx.js

@@ -116,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.99",
+    "version": "1.5.3",
     "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.42",
+        "@etsoo/appscript": "^1.2.43",
         "@etsoo/notificationbase": "^1.1.1",
         "@etsoo/shared": "^1.1.11",
         "@mui/icons-material": "^5.4.1",

package/src/app/ReactApp.ts

@@ -14,6 +14,7 @@ import {
     NotificationReturn
 } from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
+import { History, navigate } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -34,6 +35,7 @@ import {
 } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
+import { Utils } from './Utils';
 
 /**
  * Global application
@@ -97,6 +99,11 @@ export interface IReactApp<
      */
     readonly userState: UserState<D>;
 
+    /**
+     * Router history
+     */
+    readonly history?: History;
+
     /**
      * Is screen size down 'sm'
      */
@@ -166,6 +173,11 @@ export class ReactApp<
      */
     readonly cultureState: CultureState;
 
+    /**
+     * Router history
+     */
+    readonly history?: History;
+
     /**
      * Page state
      */
@@ -209,6 +221,10 @@ export class ReactApp<
             new WindowStorage(),
             name
         );
+        this.history =
+            window.location.hostname === ''
+                ? Utils.getMemoryHistory()
+                : undefined;
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState<P>();
 
@@ -349,6 +365,14 @@ export class ReactApp<
         );
     }
 
+    /**
+     * Redirect to the Url
+     * @param url Url
+     */
+    override redirectTo(url: string) {
+        (this.history == null ? navigate : this.history.navigate)(url);
+    }
+
     /**
      * Set page data
      * @param data Page data

package/src/app/Utils.ts

@@ -1,9 +1,14 @@
+import { createHistory, createMemorySource, History } from '@reach/router';
 import React from 'react';
 
 /**
  * React utils
  */
 export namespace Utils {
+    // Memory history
+    // https://github.com/reach/router/issues/225
+    let memoryHistory: History | null;
+
     /**
      * Format input value
      * @param value Input value
@@ -21,6 +26,17 @@ export namespace Utils {
         return String(value);
     }
 
+    /**
+     * Get memory history
+     * @returns History
+     */
+    export function getMemoryHistory() {
+        if (memoryHistory == null) {
+            memoryHistory = createHistory(createMemorySource('/'));
+        }
+        return memoryHistory;
+    }
+
     /**
      * Is safe click
      * @param event Mouse event

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/SelectEx.tsx

@@ -211,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}