@etsoo/react 1.5.15 → 1.5.19

package/lib/app/ReactApp.js

@@ -1,6 +1,5 @@
 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';
@@ -8,7 +7,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';
+import { ReactUtils } from './ReactUtils';
 /**
  * Global application
  */
@@ -68,7 +67,7 @@ export class ReactApp extends CoreApp {
         this.history =
             BridgeUtils.host == null
                 ? undefined
-                : Utils.getMemoryHistory(BridgeUtils.host.getStartUrl());
+                : ReactUtils.getMemoryHistory(BridgeUtils.host.getStartUrl());
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState();
         globalApp = this;
@@ -199,7 +198,8 @@ export class ReactApp extends CoreApp {
      * @param url Url
      */
     redirectTo(url) {
-        (this.history == null ? navigate : this.history.navigate)(url);
+        const navigate = ReactUtils.getNavigateFn();
+        navigate(url);
     }
     /**
      * Set page data

package/lib/app/{Utils.d.ts → ReactUtils.d.ts}

@@ -1,9 +1,21 @@
-import { History } from '@reach/router';
+import { History, HistorySource } from '@reach/router';
 import React from 'react';
+declare type MemoryHistorySource = HistorySource & {
+    history: {
+        get entries(): any;
+        get index(): number;
+        go(to: number): void;
+    };
+};
 /**
  * React utils
  */
-export declare namespace Utils {
+export declare namespace ReactUtils {
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    function createMemorySource(initialPath?: string): MemoryHistorySource;
     /**
      * Format input value
      * @param value Input value
@@ -16,6 +28,11 @@ export declare namespace Utils {
      * @returns History
      */
     function getMemoryHistory(initialPath?: string | null): History;
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    function getNavigateFn(): import("@reach/router").NavigateFn;
     /**
      * Is safe click
      * @param event Mouse event
@@ -30,3 +47,4 @@ export declare namespace Utils {
      */
     function triggerChange(input: HTMLInputElement, value: string, cancelable: boolean): void;
 }
+export {};

package/lib/app/{Utils.js → ReactUtils.js}

@@ -1,12 +1,77 @@
-import { createHistory, createMemorySource } from '@reach/router';
+import { createHistory, navigate } from '@reach/router';
 /**
  * React utils
  */
-export var Utils;
-(function (Utils) {
+export var ReactUtils;
+(function (ReactUtils) {
     // Memory history
     // https://github.com/reach/router/issues/225
     let memoryHistory;
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    function createMemorySource(initialPath = '/') {
+        const searchIndex = initialPath.indexOf('?');
+        const pathname = searchIndex > -1
+            ? initialPath.substring(0, searchIndex)
+            : initialPath;
+        const initialLocation = {
+            pathname,
+            search: searchIndex > -1 ? initialPath.substring(searchIndex) : ''
+        };
+        let index = 0;
+        const stack = [initialLocation];
+        const states = [null];
+        return {
+            get location() {
+                return stack[index];
+            },
+            addEventListener(name, fn) { },
+            removeEventListener(name, fn) { },
+            history: {
+                get entries() {
+                    return stack;
+                },
+                get index() {
+                    return index;
+                },
+                get state() {
+                    return states[index];
+                },
+                pushState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    index++;
+                    // View a, index = 0
+                    // View b, index = 1
+                    // 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.push({
+                        pathname,
+                        search: search.length ? `?${search}` : search
+                    });
+                    states.push(state);
+                },
+                replaceState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    stack[index] = { pathname, search };
+                    states[index] = state;
+                },
+                go(to) {
+                    const newIndex = index + to;
+                    if (newIndex < 0 || newIndex > states.length - 1) {
+                        return;
+                    }
+                    index = newIndex;
+                }
+            }
+        };
+    }
+    ReactUtils.createMemorySource = createMemorySource;
     /**
      * Format input value
      * @param value Input value
@@ -23,7 +88,7 @@ export var Utils;
             return value;
         return String(value);
     }
-    Utils.formatInputValue = formatInputValue;
+    ReactUtils.formatInputValue = formatInputValue;
     /**
      * Get memory history
      * @param initialPath Initial path
@@ -35,7 +100,17 @@ export var Utils;
         }
         return memoryHistory;
     }
-    Utils.getMemoryHistory = getMemoryHistory;
+    ReactUtils.getMemoryHistory = getMemoryHistory;
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    function getNavigateFn() {
+        if (memoryHistory == null)
+            return navigate;
+        return memoryHistory.navigate;
+    }
+    ReactUtils.getNavigateFn = getNavigateFn;
     /**
      * Is safe click
      * @param event Mouse event
@@ -61,7 +136,7 @@ export var Utils;
         }
         return true;
     }
-    Utils.isSafeClick = isSafeClick;
+    ReactUtils.isSafeClick = isSafeClick;
     /**
      * Trigger input change event
      * @param input Form input
@@ -99,5 +174,5 @@ export var Utils;
             input.dispatchEvent(inputEvent);
         }
     }
-    Utils.triggerChange = triggerChange;
-})(Utils || (Utils = {}));
+    ReactUtils.triggerChange = triggerChange;
+})(ReactUtils || (ReactUtils = {}));

package/lib/index.d.ts

@@ -6,9 +6,9 @@ export * from './app/IServiceUser';
 export * from './app/ISmartERPUser';
 export * from './app/Labels';
 export * from './app/ReactApp';
+export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
-export * from './app/Utils';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/ListItemReact';

package/lib/index.js

@@ -7,9 +7,9 @@ export * from './app/IServiceUser';
 export * from './app/ISmartERPUser';
 export * from './app/Labels';
 export * from './app/ReactApp';
+export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
-export * from './app/Utils';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';

package/lib/mu/BackButton.js

@@ -1,7 +1,7 @@
 import { IconButton, useTheme } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import React from 'react';
-import { useNavigate } from '@reach/router';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * BackButton
  * @param props Props
@@ -10,8 +10,6 @@ import { useNavigate } from '@reach/router';
 export function BackButton(props) {
     // Destruct
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
-    // Navigate
-    const navigate = useNavigate();
     // Theme
     const theme = useTheme();
     // Color
@@ -19,10 +17,12 @@ export function BackButton(props) {
         ? theme.palette[color]
         : theme.palette.primary;
     // Click handler
-    const onClickLocal = (event) => {
+    const onClickLocal = async (event) => {
         if (onClick)
             onClick(event);
-        navigate(-1);
+        // Navigate
+        const navigate = ReactUtils.getNavigateFn();
+        await navigate(-1);
     };
     return (React.createElement(IconButton, { "aria-label": "Back", color: color, size: size, onClick: onClickLocal, sx: {
             backgroundColor: pColor.contrastText,

package/lib/mu/ButtonLink.js

@@ -1,6 +1,6 @@
 import { Button } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * ButtonLink
  * @param props Props
@@ -10,7 +10,7 @@ export function ButtonLink(props) {
     // Destruct
     const { href, ...rest } = props;
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
     const onClick = href.includes('://')
         ? () => window.open(href, '_blank')
         : () => navigate(href);

package/lib/mu/ComboBox.js

@@ -1,10 +1,10 @@
 import { Keyboard } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
 import { Utils as SharedUtils } from '@etsoo/shared';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * ComboBox
  * @param props Props
@@ -71,7 +71,7 @@ export function ComboBox(props) {
             const newValue = value != null ? `${Reflect.get(value, idField)}` : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/lib/mu/IconButtonLink.js

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * IconButtonLink
  * @param props Props
@@ -10,7 +10,7 @@ export function IconButtonLink(props) {
     // Destruct
     const { href, ...rest } = props;
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
     // Layout
     return React.createElement(IconButton, { ...rest, onClick: () => navigate(href) });
 }

package/lib/mu/ResponsibleContainer.js

@@ -1,7 +1,7 @@
 import { Box, Stack } from '@mui/material';
 import React from 'react';
 import { Labels } from '../app/Labels';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { GridDataGet } from '../components/GridLoader';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { useDimensions } from '../uses/useDimensions';
@@ -126,7 +126,7 @@ export function ResponsibleContainer(props) {
         return [
             React.createElement(Box, { className: "ListBox", sx: { height: heightLocal } },
                 React.createElement(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction &&
-                        Utils.isSafeClick(event) &&
+                        ReactUtils.isSafeClick(event) &&
                         quickAction(data), oRef: (element) => {
                         if (element != null && elementReady)
                             elementReady(element, false);

package/lib/mu/SearchBar.js

@@ -2,9 +2,9 @@ import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
 import React from 'react';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { useDimensions } from '../uses/useDimensions';
-import { Utils as AppUtils } from '../app/Utils';
 import { DomUtils } from '@etsoo/shared';
 import { Labels } from '../app/Labels';
+import { ReactUtils } from '../app/ReactUtils';
 // Cached width attribute name
 const cachedWidthName = 'data-cached-width';
 // Reset form
@@ -20,7 +20,7 @@ const resetForm = (form) => {
                 continue;
             // Ignore readOnly without data-reset=true inputs
             if (!input.readOnly || input.dataset.reset === 'true') {
-                AppUtils.triggerChange(input, '', true);
+                ReactUtils.triggerChange(input, '', true);
             }
             continue;
         }

package/lib/mu/SelectEx.js

@@ -1,9 +1,9 @@
-import { Utils as AppUtils } from '../app/Utils';
 import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '../app/ReactUtils';
 /**
  * Extended select component
  * @param props Props
@@ -65,7 +65,7 @@ export function SelectEx(props) {
             const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                AppUtils.triggerChange(input, id, false);
+                ReactUtils.triggerChange(input, id, false);
             }
         }
     };

package/lib/mu/Tiplist.js

@@ -1,7 +1,7 @@
 import { DataTypes } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
 /**
@@ -75,7 +75,7 @@ export function Tiplist(props) {
             const input = inputRef.current;
             if (input && input.value !== '') {
                 // Different value, trigger change event
-                Utils.triggerChange(input, '', false);
+                ReactUtils.triggerChange(input, '', false);
             }
             if (states.options.length > 0) {
                 // Reset options
@@ -106,7 +106,7 @@ export function Tiplist(props) {
             const newValue = (_a = DataTypes.getStringValue(value, idField)) !== null && _a !== void 0 ? _a : '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.15",
+    "version": "1.5.19",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/app/ReactApp.ts

@@ -14,7 +14,7 @@ import {
     NotificationReturn
 } from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
-import { History, navigate } from '@reach/router';
+import { History } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -35,7 +35,7 @@ import {
 } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
-import { Utils } from './Utils';
+import { ReactUtils } from './ReactUtils';
 
 /**
  * Global application
@@ -223,7 +223,7 @@ export class ReactApp<
         this.history =
             BridgeUtils.host == null
                 ? undefined
-                : Utils.getMemoryHistory(BridgeUtils.host.getStartUrl());
+                : ReactUtils.getMemoryHistory(BridgeUtils.host.getStartUrl());
 
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState<P>();
@@ -370,7 +370,8 @@ export class ReactApp<
      * @param url Url
      */
     override redirectTo(url: string) {
-        (this.history == null ? navigate : this.history.navigate)(url);
+        const navigate = ReactUtils.getNavigateFn();
+        navigate(url);
     }
 
     /**

package/src/app/{Utils.ts → ReactUtils.ts}

@@ -1,14 +1,98 @@
-import { createHistory, createMemorySource, History } from '@reach/router';
+import { createHistory, History, HistorySource, navigate } from '@reach/router';
 import React from 'react';
 
+type MemoryHistorySource = HistorySource & {
+    history: {
+        get entries(): any;
+        get index(): number;
+        go(to: number): void;
+    };
+};
+
 /**
  * React utils
  */
-export namespace Utils {
+export namespace ReactUtils {
     // Memory history
     // https://github.com/reach/router/issues/225
     let memoryHistory: History | null;
 
+    /**
+     * Cretae memory source to fix go back bug
+     * @param initialPath Initial path
+     */
+    export function createMemorySource(
+        initialPath: string = '/'
+    ): MemoryHistorySource {
+        const searchIndex = initialPath.indexOf('?');
+        const pathname =
+            searchIndex > -1
+                ? initialPath.substring(0, searchIndex)
+                : initialPath;
+
+        const initialLocation: any = {
+            pathname,
+            search: searchIndex > -1 ? initialPath.substring(searchIndex) : ''
+        };
+
+        let index = 0;
+
+        const stack = [initialLocation];
+        const states = [null];
+
+        return {
+            get location() {
+                return stack[index];
+            },
+            addEventListener(name, fn) {},
+            removeEventListener(name, fn) {},
+            history: {
+                get entries() {
+                    return stack;
+                },
+                get index() {
+                    return index;
+                },
+                get state() {
+                    return states[index];
+                },
+                pushState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    index++;
+
+                    // View a, index = 0
+                    // View b, index = 1
+                    // 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.push({
+                        pathname,
+                        search: search.length ? `?${search}` : search
+                    });
+                    states.push(state);
+                },
+                replaceState(state, _, uri) {
+                    const [pathname, search = ''] = uri.split('?');
+                    stack[index] = { pathname, search };
+                    states[index] = state;
+                },
+                go(to: number) {
+                    const newIndex = index + to;
+
+                    if (newIndex < 0 || newIndex > states.length - 1) {
+                        return;
+                    }
+
+                    index = newIndex;
+                }
+            }
+        };
+    }
+
     /**
      * Format input value
      * @param value Input value
@@ -40,6 +124,15 @@ export namespace Utils {
         return memoryHistory;
     }
 
+    /**
+     * Get navigate function, works with memory history
+     * @returns NavigateFn
+     */
+    export function getNavigateFn() {
+        if (memoryHistory == null) return navigate;
+        return memoryHistory.navigate;
+    }
+
     /**
      * Is safe click
      * @param event Mouse event

package/src/index.ts

@@ -7,9 +7,9 @@ export * from './app/IServiceUser';
 export * from './app/ISmartERPUser';
 export * from './app/Labels';
 export * from './app/ReactApp';
+export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
-export * from './app/Utils';
 
 // components
 export * from './components/GridColumn';

package/src/mu/BackButton.tsx

@@ -1,7 +1,7 @@
 import { IconButton, IconButtonProps, useTheme } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import React from 'react';
-import { useNavigate } from '@reach/router';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * BackButton props
@@ -17,9 +17,6 @@ export function BackButton(props: BackButtonProps) {
     // Destruct
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
 
-    // Navigate
-    const navigate = useNavigate();
-
     // Theme
     const theme = useTheme();
 
@@ -30,9 +27,12 @@ export function BackButton(props: BackButtonProps) {
             : theme.palette.primary;
 
     // Click handler
-    const onClickLocal = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const onClickLocal = async (event: React.MouseEvent<HTMLButtonElement>) => {
         if (onClick) onClick(event);
-        navigate(-1);
+
+        // Navigate
+        const navigate = ReactUtils.getNavigateFn();
+        await navigate(-1);
     };
 
     return (

package/src/mu/ButtonLink.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonProps } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * ButtonLink props
@@ -22,7 +22,8 @@ export function ButtonLink(props: ButtonLinkProps) {
     const { href, ...rest } = props;
 
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
+
     const onClick = href.includes('://')
         ? () => window.open(href, '_blank')
         : () => navigate(href);

package/src/mu/ComboBox.tsx

@@ -2,11 +2,11 @@ import { IdLabelDto } from '@etsoo/appscript';
 import { Keyboard } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
 import { Utils as SharedUtils } from '@etsoo/shared';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * ComboBox props
@@ -152,7 +152,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
 
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };

package/src/mu/IconButtonLink.tsx

@@ -1,6 +1,6 @@
 import { IconButton, IconButtonProps } from '@mui/material';
-import { useNavigate } from '@reach/router';
 import React from 'react';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * IconButtonLink props
@@ -22,7 +22,7 @@ export function IconButtonLink(props: IconButtonLinkProps) {
     const { href, ...rest } = props;
 
     // Navigate
-    const navigate = useNavigate();
+    const navigate = ReactUtils.getNavigateFn();
 
     // Layout
     return <IconButton {...rest} onClick={() => navigate(href)} />;

package/src/mu/ResponsibleContainer.tsx

@@ -3,7 +3,7 @@ import { Box, Stack, SxProps, Theme } from '@mui/material';
 import React from 'react';
 import { ListChildComponentProps } from 'react-window';
 import { Labels } from '../app/Labels';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { GridColumn } from '../components/GridColumn';
 import {
     GridDataGet,
@@ -326,7 +326,7 @@ export function ResponsibleContainer<
                     mRef={mRefs}
                     onClick={(event, data) =>
                         quickAction &&
-                        Utils.isSafeClick(event) &&
+                        ReactUtils.isSafeClick(event) &&
                         quickAction(data)
                     }
                     oRef={(element) => {

package/src/mu/SearchBar.tsx

@@ -2,9 +2,9 @@ import { Button, Drawer, IconButton, Stack, useTheme } from '@mui/material';
 import React from 'react';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { useDimensions } from '../uses/useDimensions';
-import { Utils as AppUtils } from '../app/Utils';
 import { DomUtils } from '@etsoo/shared';
 import { Labels } from '../app/Labels';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Search bar props
@@ -48,7 +48,7 @@ const resetForm = (form: HTMLFormElement) => {
 
             // Ignore readOnly without data-reset=true inputs
             if (!input.readOnly || input.dataset.reset === 'true') {
-                AppUtils.triggerChange(input, '', true);
+                ReactUtils.triggerChange(input, '', true);
             }
             continue;
         }

package/src/mu/SelectEx.tsx

@@ -1,4 +1,3 @@
-import { Utils as AppUtils } from '../app/Utils';
 import {
     Checkbox,
     FormControl,
@@ -15,6 +14,7 @@ import { MUGlobal } from './MUGlobal';
 import { IdLabelDto } from '@etsoo/appscript';
 import { ListItemRightIcon } from './ListItemRightIcon';
 import { Utils } from '@etsoo/shared';
+import { ReactUtils } from '../app/ReactUtils';
 
 /**
  * Extended select component props
@@ -145,7 +145,7 @@ export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
             const input = divRef.current?.querySelector('input');
             if (input) {
                 // Different value, trigger change event
-                AppUtils.triggerChange(input, id as string, false);
+                ReactUtils.triggerChange(input, id as string, false);
             }
         }
     };

package/src/mu/Tiplist.tsx

@@ -2,7 +2,7 @@ import { IdLabelDto } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
-import { Utils } from '../app/Utils';
+import { ReactUtils } from '../app/ReactUtils';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
@@ -152,7 +152,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
 
             if (input && input.value !== '') {
                 // Different value, trigger change event
-                Utils.triggerChange(input, '', false);
+                ReactUtils.triggerChange(input, '', false);
             }
 
             if (states.options.length > 0) {
@@ -186,7 +186,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
             const newValue = DataTypes.getStringValue(value, idField) ?? '';
             if (newValue !== input.value) {
                 // Different value, trigger change event
-                Utils.triggerChange(input, newValue, false);
+                ReactUtils.triggerChange(input, newValue, false);
             }
         }
     };