@etsoo/react 1.5.33 → 1.5.36

package/lib/app/ReactApp.d.ts

@@ -1,7 +1,6 @@
 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';
@@ -9,6 +8,7 @@ import { IStateProps } from '../states/IState';
 import { IPageData, PageAction, PageState } from '../states/PageState';
 import { UserAction, UserState } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
+import { History } from 'history';
 /**
  * Global application
  */
@@ -36,7 +36,7 @@ export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IP
     /**
      * Router history
      */
-    readonly history?: History;
+    readonly history: History;
     /**
      * Is screen size down 'sm'
      */
@@ -79,7 +79,7 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser, P extends
     /**
      * Router history
      */
-    readonly history?: History;
+    readonly history: History;
     /**
      * Page state
      */

package/lib/app/ReactApp.js

@@ -8,7 +8,7 @@ import { CultureState } from '../states/CultureState';
 import { PageActionType, PageState } from '../states/PageState';
 import { UserActionType, UserState } from '../states/UserState';
 import { Labels } from './Labels';
-import { ReactUtils } from './ReactUtils';
+import { createBrowserHistory, createMemoryHistory } from 'history';
 /**
  * Global application
  */
@@ -65,15 +65,18 @@ export class ReactApp extends CoreApp {
          * User state
          */
         this.userState = new UserState();
-        this.history =
-            BridgeUtils.host == null
-                ? undefined
-                : ReactUtils.getMemoryHistory(BridgeUtils.host.getStartUrl());
         if (BridgeUtils.host) {
+            const startUrl = BridgeUtils.host.getStartUrl();
+            this.history = createMemoryHistory({
+                initialEntries: startUrl == null ? undefined : [startUrl]
+            });
             BridgeUtils.host.onUpdate((app, version) => {
                 this.notifier.message(NotificationMessageType.Success, this.get('updateTip') + `(${[app, version].join(', ')})`, this.get('updateReady'));
             });
         }
+        else {
+            this.history = createBrowserHistory();
+        }
         this.cultureState = new CultureState(settings.currentCulture);
         this.pageState = new PageState();
         globalApp = this;
@@ -204,8 +207,7 @@ export class ReactApp extends CoreApp {
      * @param url Url
      */
     redirectTo(url) {
-        const navigate = ReactUtils.getNavigateFn();
-        navigate(url);
+        this.history.push(url);
     }
     /**
      * Set page data

package/lib/app/ReactUtils.d.ts

@@ -1,38 +1,14 @@
-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 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
      * @returns Formatted value
      */
     function formatInputValue(value: unknown): string | number | any[] | undefined;
-    /**
-     * Get memory history
-     * @param initialPath Initial path
-     * @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
@@ -47,4 +23,3 @@ export declare namespace ReactUtils {
      */
     function triggerChange(input: HTMLInputElement, value: string, cancelable: boolean): void;
 }
-export {};

package/lib/app/ReactUtils.js

@@ -1,77 +1,8 @@
-import { createHistory, navigate } from '@reach/router';
 /**
  * React 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);
-                        states.splice(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
@@ -89,28 +20,6 @@ export var ReactUtils;
         return String(value);
     }
     ReactUtils.formatInputValue = formatInputValue;
-    /**
-     * Get memory history
-     * @param initialPath Initial path
-     * @returns History
-     */
-    function getMemoryHistory(initialPath) {
-        if (memoryHistory == null) {
-            memoryHistory = createHistory(createMemorySource(initialPath !== null && initialPath !== void 0 ? initialPath : '/'));
-        }
-        return memoryHistory;
-    }
-    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

package/lib/components/HRouter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HistoryRouterProps } from 'react-router-dom';
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export declare function HRouter({ basename, children, history }: HistoryRouterProps): JSX.Element;

package/lib/components/HRouter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Router } from 'react-router-dom';
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export function HRouter({ basename, children, history }) {
+    const [state, setState] = React.useState({
+        action: history.action,
+        location: history.location
+    });
+    React.useLayoutEffect(() => history.listen(setState), [history]);
+    return (React.createElement(Router, { basename: basename, children: children, location: state.location, navigationType: state.action, navigator: history }));
+}

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export * from './app/RefreshTokenRQ';
 export * from './app/ServiceApp';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -84,11 +85,11 @@ export * from '@etsoo/notificationbase';
 export * from './states/CultureState';
 export * from './states/IState';
 export * from './states/PageState';
-export * from './states/RouterProps';
 export * from './states/State';
 export * from './states/UserState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/lib/index.js

@@ -13,6 +13,7 @@ export * from './app/ServiceApp';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -89,12 +90,12 @@ export * from '@etsoo/notificationbase';
 export * from './states/CultureState';
 export * from './states/IState';
 export * from './states/PageState';
-export * from './states/RouterProps';
 export * from './states/State';
 export * from './states/UserState';
 // uses
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

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 { ReactUtils } from '../app/ReactUtils';
+import { useNavigate } from 'react-router-dom';
 /**
  * BackButton
  * @param props Props
@@ -12,6 +12,8 @@ export function BackButton(props) {
     const { color = 'primary', size = 'small', onClick, ...rest } = props;
     // Theme
     const theme = useTheme();
+    // Navigate
+    const navigate = useNavigate();
     // Color
     const pColor = color != 'inherit' && color != 'default' && color in theme.palette
         ? theme.palette[color]
@@ -21,8 +23,7 @@ export function BackButton(props) {
         if (onClick)
             onClick(event);
         // Navigate
-        const navigate = ReactUtils.getNavigateFn();
-        await navigate(-1);
+        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 React from 'react';
-import { ReactUtils } from '../app/ReactUtils';
+import { useNavigate } from 'react-router-dom';
 /**
  * ButtonLink
  * @param props Props
@@ -10,7 +10,7 @@ export function ButtonLink(props) {
     // Destruct
     const { href, ...rest } = props;
     // Navigate
-    const navigate = ReactUtils.getNavigateFn();
+    const navigate = useNavigate();
     const onClick = href.includes('://')
         ? () => window.open(href, '_blank')
         : () => navigate(href);

package/lib/mu/IconButtonLink.js

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

package/lib/mu/MoreFab.js

@@ -1,7 +1,7 @@
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import React from 'react';
 import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 function getActions(input) {
     // Actions
     const actions = [];

package/lib/mu/RLink.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { LinkProps } from '@mui/material';
-import { LinkProps as RouterLinkProps } from '@reach/router';
+import { LinkProps as RouterLinkProps } from 'react-router-dom';
 /**
  * Router Link props
  */
-export declare type RLinkProps = LinkProps & RouterLinkProps<{}>;
+export declare type RLinkProps = LinkProps & RouterLinkProps;
 /**
  * Router Link
  * @param props Props

package/lib/mu/RLink.js

@@ -1,5 +1,5 @@
 import { Link } from '@mui/material';
-import { Link as RouterLink } from '@reach/router';
+import { Link as RouterLink } from 'react-router-dom';
 import React from 'react';
 /**
  * Router Link

package/lib/mu/TabBox.js

@@ -1,7 +1,7 @@
 import { Utils } from '@etsoo/shared';
 import { Box, Tab, Tabs } from '@mui/material';
-import { Link } from '@reach/router';
 import React from 'react';
+import { Link } from 'react-router-dom';
 /**
  * Tabs with box
  * @param props Props

package/lib/uses/useParamsEx.d.ts

@@ -0,0 +1,6 @@
+import { DataTypes } from '@etsoo/shared';
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export declare function useParamsEx<T extends DataTypes.BasicTemplate>(template: T): DataTypes.BasicTemplateType<T>;

package/lib/uses/useParamsEx.js

@@ -0,0 +1,12 @@
+import { DomUtils } from '@etsoo/shared';
+import { useParams } from 'react-router-dom';
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export function useParamsEx(template) {
+    // Get parameters
+    const params = useParams();
+    // Return
+    return DomUtils.dataAs(params, template, false);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.33",
+    "version": "1.5.36",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -55,10 +55,8 @@
         "@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": "^18.0.9",
         "@types/react-avatar-editor": "^12.0.0",
         "@types/react-beautiful-dnd": "^13.1.2",
@@ -73,14 +71,15 @@
         "react-dom": "^18.1.0",
         "react-draggable": "^4.4.5",
         "react-imask": "^6.4.2",
+        "react-router-dom": "^6.3.0",
         "react-window": "^1.8.7"
     },
     "devDependencies": {
         "@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",
+        "@babel/core": "^7.18.2",
+        "@babel/plugin-transform-runtime": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@babel/runtime-corejs3": "^7.18.3",
         "@types/jest": "^27.5.1",
         "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.26.0",

package/src/app/ReactApp.ts

@@ -15,7 +15,6 @@ import {
     NotificationReturn
 } from '@etsoo/notificationbase';
 import { DataTypes, WindowStorage } from '@etsoo/shared';
-import { History } from '@reach/router';
 import React from 'react';
 import { NotifierMU } from '../mu/NotifierMU';
 import { ProgressCount } from '../mu/ProgressCount';
@@ -36,7 +35,7 @@ import {
 } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 import { Labels } from './Labels';
-import { ReactUtils } from './ReactUtils';
+import { createBrowserHistory, createMemoryHistory, History } from 'history';
 
 /**
  * Global application
@@ -101,7 +100,7 @@ export interface IReactApp<
     /**
      * Router history
      */
-    readonly history?: History;
+    readonly history: History;
 
     /**
      * Is screen size down 'sm'
@@ -175,7 +174,7 @@ export class ReactApp<
     /**
      * Router history
      */
-    readonly history?: History;
+    readonly history: History;
 
     /**
      * Page state
@@ -221,12 +220,12 @@ export class ReactApp<
             name
         );
 
-        this.history =
-            BridgeUtils.host == null
-                ? undefined
-                : ReactUtils.getMemoryHistory(BridgeUtils.host.getStartUrl());
-
         if (BridgeUtils.host) {
+            const startUrl = BridgeUtils.host.getStartUrl();
+            this.history = createMemoryHistory({
+                initialEntries: startUrl == null ? undefined : [startUrl]
+            });
+
             BridgeUtils.host.onUpdate((app, version) => {
                 this.notifier.message(
                     NotificationMessageType.Success,
@@ -234,6 +233,8 @@ export class ReactApp<
                     this.get('updateReady')
                 );
             });
+        } else {
+            this.history = createBrowserHistory();
         }
 
         this.cultureState = new CultureState(settings.currentCulture);
@@ -381,8 +382,7 @@ export class ReactApp<
      * @param url Url
      */
     override redirectTo(url: string) {
-        const navigate = ReactUtils.getNavigateFn();
-        navigate(url);
+        this.history.push(url);
     }
 
     /**

package/src/app/ReactUtils.ts

@@ -1,98 +1,9 @@
-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 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);
-                        states.splice(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
@@ -110,29 +21,6 @@ export namespace ReactUtils {
         return String(value);
     }
 
-    /**
-     * Get memory history
-     * @param initialPath Initial path
-     * @returns History
-     */
-    export function getMemoryHistory(initialPath?: string | null) {
-        if (memoryHistory == null) {
-            memoryHistory = createHistory(
-                createMemorySource(initialPath ?? '/')
-            );
-        }
-        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/components/HRouter.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { HistoryRouterProps, Router } from 'react-router-dom';
+
+/**
+ * Open to use HistoryRouter of react-router-dom
+ * @param History router properties
+ * @returns Component
+ */
+export function HRouter({ basename, children, history }: HistoryRouterProps) {
+    const [state, setState] = React.useState({
+        action: history.action,
+        location: history.location
+    });
+
+    React.useLayoutEffect(() => history.listen(setState), [history]);
+
+    return (
+        <Router
+            basename={basename}
+            children={children}
+            location={state.location}
+            navigationType={state.action}
+            navigator={history}
+        />
+    );
+}

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './app/ServiceApp';
 // components
 export * from './components/GridColumn';
 export * from './components/GridLoader';
+export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
@@ -95,7 +96,6 @@ export * from '@etsoo/notificationbase';
 export * from './states/CultureState';
 export * from './states/IState';
 export * from './states/PageState';
-export * from './states/RouterProps';
 export * from './states/State';
 export * from './states/UserState';
 
@@ -103,5 +103,6 @@ export * from './states/UserState';
 export * from './uses/useCombinedRefs';
 export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
+export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

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 { ReactUtils } from '../app/ReactUtils';
+import { useNavigate } from 'react-router-dom';
 
 /**
  * BackButton props
@@ -20,6 +20,9 @@ export function BackButton(props: BackButtonProps) {
     // Theme
     const theme = useTheme();
 
+    // Navigate
+    const navigate = useNavigate();
+
     // Color
     const pColor =
         color != 'inherit' && color != 'default' && color in theme.palette
@@ -31,8 +34,7 @@ export function BackButton(props: BackButtonProps) {
         if (onClick) onClick(event);
 
         // Navigate
-        const navigate = ReactUtils.getNavigateFn();
-        await navigate(-1);
+        navigate(-1);
     };
 
     return (

package/src/mu/ButtonLink.tsx

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

package/src/mu/IconButtonLink.tsx

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

package/src/mu/MoreFab.tsx

@@ -13,7 +13,7 @@ import {
     PopoverOrigin
 } from '@mui/material';
 import { ListItemReact } from '../components/ListItemReact';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 
 /**
  * More fab props

package/src/mu/RLink.tsx

@@ -2,13 +2,13 @@ import { Link, LinkProps } from '@mui/material';
 import {
     Link as RouterLink,
     LinkProps as RouterLinkProps
-} from '@reach/router';
+} from 'react-router-dom';
 import React from 'react';
 
 /**
  * Router Link props
  */
-export type RLinkProps = LinkProps & RouterLinkProps<{}>;
+export type RLinkProps = LinkProps & RouterLinkProps;
 
 /**
  * Router Link

package/src/mu/TabBox.tsx

@@ -1,7 +1,7 @@
 import { Utils } from '@etsoo/shared';
 import { Box, BoxProps, Tab, TabProps, Tabs, TabsProps } from '@mui/material';
-import { Link } from '@reach/router';
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 /**
  * Tab with box panel props

package/src/uses/useParamsEx.ts

@@ -0,0 +1,14 @@
+import { DataTypes, DomUtils } from '@etsoo/shared';
+import { useParams } from 'react-router-dom';
+
+/**
+ * Extended useParams of react-router-dom
+ * Provide exact type data
+ */
+export function useParamsEx<T extends DataTypes.BasicTemplate>(template: T) {
+    // Get parameters
+    const params = useParams<{ [K in keyof T]: string }>();
+
+    // Return
+    return DomUtils.dataAs(params, template, false);
+}

package/lib/states/RouterProps.d.ts

@@ -1,39 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { RouteComponentProps } from '@reach/router';
-/**
- * Add / Edit page router props, include 'id' (/:id) or none when adding query parameter
- */
-export declare type EditPageRouterProps = IdRouterProps & WildcardRouterProps;
-/**
- * Get edit page id
- * @param props Route props
- * @param type Target data type
- * @returns Data
- */
-export declare function getEditPageId<T extends DataTypes.BasicNames>(props: EditPageRouterProps, type: T): DataTypes.BasicConditional<T> | undefined;
-/**
- * Id router props, include 'id' (/:id) query parameter
- */
-export declare type IdRouterProps = RouteComponentProps<{
-    id: string;
-}>;
-/**
- * Wildcard router props, (/*) query parameter
- */
-export declare type WildcardRouterProps = RouteComponentProps<{
-    '*': string;
-}>;
-/**
- * Id state router props, include 'id' in location.state
- */
-export declare type IdStateRouterProps<T extends DataTypes.IdType = number> = StateRouterProps<{
-    id: T;
-}>;
-/**
- * State router props, include data in location.state
- */
-export declare type StateRouterProps<T extends Readonly<DataTypes.StringRecord>> = RouteComponentProps<{
-    location: {
-        state: T;
-    };
-}>;

package/lib/states/RouterProps.js

@@ -1,14 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-/**
- * Get edit page id
- * @param props Route props
- * @param type Target data type
- * @returns Data
- */
-export function getEditPageId(props, type) {
-    var _a;
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : props['*'];
-    if (id == null || id === '')
-        return undefined;
-    return DataTypes.convertByType(id, type);
-}

package/src/states/RouterProps.ts

@@ -1,46 +0,0 @@
-import { DataTypes } from '@etsoo/shared';
-import { RouteComponentProps } from '@reach/router';
-
-/**
- * Add / Edit page router props, include 'id' (/:id) or none when adding query parameter
- */
-export type EditPageRouterProps = IdRouterProps & WildcardRouterProps;
-
-/**
- * Get edit page id
- * @param props Route props
- * @param type Target data type
- * @returns Data
- */
-export function getEditPageId<T extends DataTypes.BasicNames>(
-    props: EditPageRouterProps,
-    type: T
-): DataTypes.BasicConditional<T> | undefined {
-    const id = props.id ?? props['*'];
-    if (id == null || id === '') return undefined;
-    return DataTypes.convertByType(id, type);
-}
-
-/**
- * Id router props, include 'id' (/:id) query parameter
- */
-export type IdRouterProps = RouteComponentProps<{ id: string }>;
-
-/**
- * Wildcard router props, (/*) query parameter
- */
-export type WildcardRouterProps = RouteComponentProps<{ '*': string }>;
-
-/**
- * Id state router props, include 'id' in location.state
- */
-export type IdStateRouterProps<T extends DataTypes.IdType = number> =
-    StateRouterProps<{ id: T }>;
-
-/**
- * State router props, include data in location.state
- */
-export type StateRouterProps<T extends Readonly<DataTypes.StringRecord>> =
-    RouteComponentProps<{
-        location: { state: T };
-    }>;