@headless-adminapp/app 1.3.1 → 1.4.3

package/app/LayoutProvider.js

@@ -9,7 +9,6 @@ const dialog_1 = require("../dialog");
 const locale_1 = require("../locale");
 const metadata_1 = require("../metadata");
 const progress_indicator_1 = require("../progress-indicator");
-const recordset_1 = require("../recordset");
 const route_1 = require("../route");
 const toast_notification_1 = require("../toast-notification");
 const transport_1 = require("../transport");
@@ -40,6 +39,6 @@ const defaultDataService = {
     },
 };
 const LayoutProvider = ({ authPlaceholder, authProps, dataService = defaultDataService, fileService, localeProps, metadataProps, queryClient = defaults_1.queryClient, routeProps, children, containers: { DialogContainer, ProgressIndicatorContainer, ToastNotificationContainer, }, }) => {
-    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: (0, jsx_runtime_1.jsx)(recordset_1.RecordSetProvider, { children: children }) }) })] }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: children }) })] }) }) }) }) }) }) }) }) }));
 };
 exports.LayoutProvider = LayoutProvider;

package/dataform/DataFormProvider/InitialValueResolver.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InitialValueResolver = InitialValueResolver;
+const route_1 = require("@headless-adminapp/app/route");
 const react_1 = require("react");
 const mutable_1 = require("../../mutable");
 const context_1 = require("../context");
@@ -13,8 +14,9 @@ function InitialValueResolver() {
     const recordId = (0, hooks_1.useRecordId)();
     const record = (0, mutable_1.useContextSelector)(context_1.DataFormContext, (state) => state.record);
     const formInstance = (0, hooks_1.useFormInstance)();
+    const router = (0, route_1.useRouter)();
     const initialValues = (0, react_1.useMemo)(() => {
-        const defaultParameters = (0, defaultParameters_1.getFormDefaultParameters)(schema, formConfig.experience) ?? {};
+        const defaultParameters = (0, defaultParameters_1.getFormDefaultParameters)(schema, formConfig.experience, router) ?? {};
         return (0, utils_1.getInitialValues)({
             cloneRecord: undefined,
             form: formConfig,
@@ -23,7 +25,7 @@ function InitialValueResolver() {
             schema: schema,
             defaultParameters,
         });
-    }, [formConfig, record, recordId, schema]);
+    }, [formConfig, record, recordId, schema, router]);
     const setValue = (0, mutable_1.useContextSetValue)(context_1.DataFormContext);
     (0, react_1.useEffect)(() => {
         setValue({

package/dataform/DataFormProvider/index.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataFormProvider = DataFormProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const historystate_1 = require("@headless-adminapp/app/historystate");
+const route_1 = require("@headless-adminapp/app/route");
 const store_1 = require("@headless-adminapp/app/store");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -18,12 +20,20 @@ const getRecord_1 = require("./getRecord");
 const InitialValueResolver_1 = require("./InitialValueResolver");
 const ReadonlyInfoResolver_1 = require("./ReadonlyInfoResolver");
 const utils_2 = require("./utils");
+function mergeInitialWithHistory(initialValue, historyState) {
+    return {
+        ...initialValue,
+        ...historyState,
+    };
+}
 function DataFormProvider(props) {
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
     const { language, region } = (0, useLocale_1.useLocale)();
     const formValidationStrings = (0, FormValidationStringContext_1.useFormValidationStrings)();
     const eventManager = (0, react_1.useMemo)(() => new store_1.EventManager(), []);
     const contextKey = (0, react_1.useRef)(0);
+    const router = (0, route_1.useRouter)();
+    const historyKey = (0, historystate_1.useHistoryStateKey)();
     const [formReadOnly, setFormReadOnly] = (0, react_1.useState)(false); // A trick to provide readOnly info to formInstance
     const formInstance = (0, react_hook_form_1.useForm)({
         mode: 'all',
@@ -46,12 +56,12 @@ function DataFormProvider(props) {
             ? saveRecordFnRef.current(options)
             : (0, saveRecord_1.saveRecord)(options);
     }, []);
-    const contextValue = (0, mutable_1.useCreateContextStore)({
+    const contextValue = (0, mutable_1.useCreateContextStore)(() => mergeInitialWithHistory({
         contextKey: contextKey.current,
         schema: props.schema,
         form: props.form,
         commands: props.commands,
-        dataState: { isFetching: false },
+        dataState: { isFetching: true },
         recordId: props.recordId,
         refresh: async () => { }, // Initial value, will be overridden
         cloneId: undefined,
@@ -59,6 +69,8 @@ function DataFormProvider(props) {
         // formInstanceRenderCount: 0,
         initialValues: {},
         saveRecordFn: saveRecordFnInternal,
+        activeTab: props.form.experience.tabs[0]?.name,
+        selectedRelatedItem: null,
         eventManager,
         disabledControls: {},
         requiredFields: {},
@@ -66,7 +78,21 @@ function DataFormProvider(props) {
         hiddenSections: {},
         hiddenTabs: {},
         formInternal: (0, utils_2.transformFormInternal)(props.form),
-    });
+    }, router.getState(historyKey)));
+    (0, react_1.useEffect)(() => {
+        function listener(state, prevState, changes) {
+            if (['activeTab', 'selectedRelatedItem'].some((key) => key in changes)) {
+                router.setState(historyKey, {
+                    activeTab: state.activeTab,
+                    selectedRelatedItem: state.selectedRelatedItem,
+                });
+            }
+        }
+        contextValue.addListener(listener);
+        return () => {
+            contextValue.removeListener(listener);
+        };
+    }, [contextValue, historyKey, router]);
     (0, react_1.useEffect)(() => {
         contextValue.setValue({
             contextKey: ++contextKey.current,

package/dataform/context.d.ts

@@ -4,8 +4,15 @@ import { Tab } from '@headless-adminapp/core/experience/form/Tab';
 import { InferredSchemaType, Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
 import { IEventManager } from '@headless-adminapp/core/store';
 import { Data } from '@headless-adminapp/core/transport';
-import { Nullable } from '@headless-adminapp/core/types';
+import { Localized, Nullable } from '@headless-adminapp/core/types';
 import { SaveRecordFn } from './utils/saveRecord';
+export interface RelatedItemInfo {
+    key: string;
+    logicalName: string;
+    pluralLabel: string;
+    localizedPluralLabels?: Localized<string>;
+    attributeName: string;
+}
 export type DataFormContextState<SA extends SchemaAttributes = SchemaAttributes> = {
     contextKey: number;
     schema: Schema<SA>;
@@ -14,7 +21,8 @@ export type DataFormContextState<SA extends SchemaAttributes = SchemaAttributes>
     cloneId?: string | number;
     commands: EntityMainFormCommandItemExperience[][];
     saveRecordFn: SaveRecordFn;
-    activeTab?: string;
+    activeTab: string;
+    selectedRelatedItem: RelatedItemInfo | null;
     disabledControls: Record<string, boolean>;
     requiredFields: Record<string, boolean>;
     hiddenControls: Record<string, boolean>;

package/dataform/hooks/useFormDataState.d.ts

@@ -0,0 +1,4 @@
+export declare function useFormDataState(): {
+    isFetching: boolean;
+    isError?: boolean;
+};

package/dataform/hooks/useFormDataState.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormDataState = useFormDataState;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const context_1 = require("../context");
+function useFormDataState() {
+    return (0, mutable_1.useContextSelector)(context_1.DataFormContext, (state) => state.dataState);
+}

package/dataform/hooks/useIsDataFetching.d.ts

@@ -0,0 +1 @@
+export declare function useIsFormDataFetching(): boolean;

package/dataform/hooks/useIsDataFetching.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsFormDataFetching = useIsFormDataFetching;
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const context_1 = require("../context");
+function useIsFormDataFetching() {
+    return (0, mutable_1.useContextSelector)(context_1.DataFormContext, (state) => state.dataState.isFetching);
+}

package/dataform/utils/defaultParameters.d.ts

@@ -1,6 +1,6 @@
+import { RouterInstance } from '@headless-adminapp/app/route/context';
 import { FormExperience } from '@headless-adminapp/core/experience/form';
 import { Schema } from '@headless-adminapp/core/schema';
-export declare function getFormDefaultParameters(schema: Schema, formExperience: FormExperience): {
+export declare function getFormDefaultParameters(schema: Schema, formExperience: FormExperience, router: RouterInstance): {
     [x: string]: any;
 };
-export declare function setFormDefaultParameters(logicalName: string, values: Record<string, any>): void;

package/dataform/utils/defaultParameters.js

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFormDefaultParameters = getFormDefaultParameters;
-exports.setFormDefaultParameters = setFormDefaultParameters;
-let formDefaultParameters = null;
-function getFormDefaultParameters(schema, formExperience) {
-    const _values = formDefaultParameters?.values;
-    const _logicalName = formDefaultParameters?.logicalName;
+function getFormDefaultParameters(schema, formExperience, router) {
+    const _values = router.getState('defaultParameters')?.values;
+    const _logicalName = router.getState('defaultParameters')?.logicalName;
     const schemaDefaultValues = Object.keys(schema.attributes).reduce((acc, key) => {
         const attribute = schema.attributes[key];
         let defaultValue = attribute.default;
@@ -39,16 +37,3 @@ function getFormDefaultParameters(schema, formExperience) {
     }
     return defaultValues;
 }
-let defaultParamsTimeout = null;
-function setFormDefaultParameters(logicalName, values) {
-    formDefaultParameters = {
-        logicalName,
-        values,
-    };
-    if (defaultParamsTimeout) {
-        clearTimeout(defaultParamsTimeout);
-    }
-    defaultParamsTimeout = setTimeout(() => {
-        formDefaultParameters = null;
-    }, 5000);
-}

package/datagrid/DataGridProvider/index.js

@@ -2,22 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridProvider = DataGridProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const route_1 = require("@headless-adminapp/app/route");
 const react_1 = require("react");
+const react_use_1 = require("react-use");
+const historystate_1 = require("../../historystate");
 const useLocale_1 = require("../../locale/useLocale");
 const useMetadata_1 = require("../../metadata/hooks/useMetadata");
 const context_1 = require("../../mutable/context");
 const context_2 = require("../context");
 const DataResolver_1 = require("./DataResolver");
 const transformViewColumns_1 = require("./transformViewColumns");
+function mergeInitialStateWithHistory(initialValue, historyState) {
+    return {
+        ...initialValue,
+        ...historyState,
+    };
+}
 function DataGridProvider(props) {
     const onChangeViewRef = (0, react_1.useRef)(props.onChangeView);
     onChangeViewRef.current = props.onChangeView;
     const { schemaStore } = (0, useMetadata_1.useMetadata)();
     const { language } = (0, useLocale_1.useLocale)();
+    const router = (0, route_1.useRouter)();
     const handleViewChange = (0, react_1.useCallback)((viewId) => {
         onChangeViewRef.current?.(viewId);
     }, []);
-    const contextValue = (0, context_1.useCreateContextStore)({
+    const historyKey = (0, historystate_1.useHistoryStateKey)();
+    const contextValue = (0, context_1.useCreateContextStore)(() => mergeInitialStateWithHistory({
         schema: props.schema,
         columnFilters: {},
         data: {
@@ -46,8 +57,24 @@ function DataGridProvider(props) {
         maxRecords: props.maxRecords,
         associated: props.associated,
         disabled: props.disabled ?? false,
-    });
+    }, router.getState(historyKey)));
     (0, react_1.useEffect)(() => {
+        function listener(state, prevState, changes) {
+            if (['searchText', 'columnFilters', 'sorting', 'columns'].some((key) => key in changes)) {
+                router.setState(historyKey, {
+                    searchText: state.searchText,
+                    columnFilters: state.columnFilters,
+                    sorting: state.sorting,
+                    columns: state.columns,
+                });
+            }
+        }
+        contextValue.addListener(listener);
+        return () => {
+            contextValue.removeListener(listener);
+        };
+    }, [contextValue, historyKey, router]);
+    (0, react_use_1.useUpdateEffect)(() => {
         contextValue.setValue({
             view: props.view,
             searchText: '',
@@ -58,24 +85,24 @@ function DataGridProvider(props) {
             maxRecords: props.maxRecords,
         });
     }, [props.view, props.maxRecords, contextValue, schemaStore, language]);
-    (0, react_1.useEffect)(() => {
+    (0, react_use_1.useUpdateEffect)(() => {
         contextValue.setValue({
             schema: props.schema,
             searchText: '',
             selectedIds: [],
         });
     }, [props.schema, contextValue]);
-    (0, react_1.useEffect)(() => {
+    (0, react_use_1.useUpdateEffect)(() => {
         contextValue.setValue({
             extraFilter: props.extraFilter,
         });
     }, [props.extraFilter, contextValue]);
-    (0, react_1.useEffect)(() => {
+    (0, react_use_1.useUpdateEffect)(() => {
         contextValue.setValue({
             commands: props.commands,
         });
     }, [props.commands, contextValue]);
-    (0, react_1.useEffect)(() => {
+    (0, react_use_1.useUpdateEffect)(() => {
         contextValue.setValue({
             isSubGrid: props.isSubGrid ?? false,
             associated: props.associated,

package/datagrid/hooks/useOpenRecord.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenRecord = useOpenRecord;
-const recordset_1 = require("@headless-adminapp/app/recordset");
 const route_1 = require("@headless-adminapp/app/route");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
@@ -12,7 +11,6 @@ function useOpenRecord() {
     const schema = (0, useGridSchema_1.useDataGridSchema)();
     const routeResolver = (0, route_1.useRouteResolver)();
     const router = (0, route_1.useRouter)();
-    const recordSetSetter = (0, recordset_1.useRecordSetSetter)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     return (0, react_1.useCallback)((id, logicalName) => {
@@ -21,15 +19,16 @@ function useOpenRecord() {
             type: app_1.PageType.EntityForm,
             id,
         });
-        if (logicalName === schema.logicalName) {
-            recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? []);
-        }
-        router.push(path);
-    }, [
-        recordSetSetter,
-        routeResolver,
-        router,
-        schema.idAttribute,
-        schema.logicalName,
-    ]);
+        router.push(path, {
+            state: {
+                navigator: logicalName === schema.logicalName
+                    ? {
+                        ids: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
+                        visible: false,
+                        logicalName: schema.logicalName,
+                    }
+                    : null,
+            },
+        });
+    }, [routeResolver, router, schema.idAttribute, schema.logicalName]);
 }

package/historystate/contex.d.ts

@@ -0,0 +1 @@
+export declare const HistoryStateKeyContext: import("react").Context<string>;

package/historystate/contex.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryStateKeyContext = void 0;
+const react_1 = require("react");
+exports.HistoryStateKeyContext = (0, react_1.createContext)('');

package/historystate/index.d.ts

@@ -0,0 +1,2 @@
+export { HistoryStateKeyProvider } from './provider';
+export { useHistoryStateKey } from './useHistoryStateKey';

package/historystate/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHistoryStateKey = exports.HistoryStateKeyProvider = void 0;
+var provider_1 = require("./provider");
+Object.defineProperty(exports, "HistoryStateKeyProvider", { enumerable: true, get: function () { return provider_1.HistoryStateKeyProvider; } });
+var useHistoryStateKey_1 = require("./useHistoryStateKey");
+Object.defineProperty(exports, "useHistoryStateKey", { enumerable: true, get: function () { return useHistoryStateKey_1.useHistoryStateKey; } });

package/historystate/provider.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+type HistoryStateKeyProviderProps = {
+    historyKey: string;
+    nested?: boolean;
+};
+export declare const HistoryStateKeyProvider: FC<PropsWithChildren<HistoryStateKeyProviderProps>>;
+export {};

package/historystate/provider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryStateKeyProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const contex_1 = require("./contex");
+const useHistoryStateKey_1 = require("./useHistoryStateKey");
+const HistoryStateKeyProvider = ({ historyKey, nested, children }) => {
+    const parentHistoryKey = (0, useHistoryStateKey_1.useHistoryStateKey)();
+    if (nested) {
+        if (!parentHistoryKey || parentHistoryKey.startsWith('~')) {
+            return children;
+        }
+        historyKey = `${parentHistoryKey}.${historyKey}`;
+    }
+    return ((0, jsx_runtime_1.jsx)(contex_1.HistoryStateKeyContext.Provider, { value: historyKey, children: children }));
+};
+exports.HistoryStateKeyProvider = HistoryStateKeyProvider;

package/historystate/useHistoryStateKey.d.ts

@@ -0,0 +1 @@
+export declare function useHistoryStateKey(): string;

package/historystate/useHistoryStateKey.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHistoryStateKey = useHistoryStateKey;
+const react_1 = require("react");
+const contex_1 = require("./contex");
+function useHistoryStateKey() {
+    const historyKey = (0, react_1.useContext)(contex_1.HistoryStateKeyContext);
+    return historyKey;
+}

package/mutable/context.d.ts

@@ -3,7 +3,7 @@ import { useMutableValueSelector } from './utils';
 export type ContextValue<T> = MutableValue<T>;
 export declare const useContextSelectorInternal: typeof useMutableValueSelector;
 export declare function createContext<T>(): import("react").Context<ContextValue<T>>;
-export declare function useCreateContextStore<T>(initialValue: T): MutableValue<T>;
+export declare function useCreateContextStore<T>(initialValue: T | (() => T)): MutableValue<T>;
 export declare function useContextValue<T>(context: React.Context<ContextValue<T>>): {
     current: T;
 };

package/mutable/type.d.ts

@@ -1,4 +1,4 @@
-type Listener<T> = (state: T) => void;
+type Listener<T> = (newState: T, prevState: T, changes: Partial<T>) => void;
 export interface MutableValue<T> {
     value: {
         current: T;

package/mutable/utils.d.ts

@@ -1,3 +1,3 @@
 import { MutableValue } from './type';
-export declare function createMutableValue<T>(initialValue: T, isArray?: boolean): MutableValue<T>;
+export declare function createMutableValue<T>(initialValue: T | (() => T), isArray?: boolean): MutableValue<T>;
 export declare function useMutableValueSelector<T, R>(mutableValue: MutableValue<T>, selector: (state: T) => R): R;

package/mutable/utils.js

@@ -5,7 +5,9 @@ exports.useMutableValueSelector = useMutableValueSelector;
 const react_1 = require("react");
 function createMutableValue(initialValue, isArray) {
     let storeValue = {
-        current: initialValue,
+        current: typeof initialValue === 'function'
+            ? initialValue()
+            : initialValue,
     };
     const listeners = new Set();
     return {
@@ -14,13 +16,14 @@ function createMutableValue(initialValue, isArray) {
             if (typeof value === 'function') {
                 value = value(storeValue.current);
             }
+            const prevState = storeValue.current;
             if (isArray) {
                 storeValue.current = value;
             }
             else {
                 storeValue.current = { ...storeValue.current, ...value };
             }
-            listeners.forEach((listener) => listener(storeValue.current));
+            listeners.forEach((listener) => listener(storeValue.current, prevState, value));
         },
         listeners,
         addListener: (listener) => listeners.add(listener),

package/navigation/hooks/useOpenForm.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenForm = useOpenForm;
-const defaultParameters_1 = require("@headless-adminapp/app/dataform/utils/defaultParameters");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const hooks_1 = require("../../route/hooks/");
@@ -15,14 +14,32 @@ function useOpenForm() {
             type: app_1.PageType.EntityForm,
             id: options.id,
         });
+        const state = {};
         if (options.parameters) {
-            (0, defaultParameters_1.setFormDefaultParameters)(options.logicalName, options.parameters);
+            state.defaultParameters = {
+                logicalName: options.logicalName,
+                values: options.parameters,
+            };
+        }
+        if (options.recordSetIds) {
+            state.navigator = {
+                ids: options.recordSetIds,
+                visible: false,
+                logicalName: options.logicalName,
+            };
         }
         if (options.replace) {
-            router.replace(path);
+            router.replace(path, {
+                state: {
+                    ...router.getState(),
+                    ...state,
+                },
+            });
         }
         else {
-            router.push(path);
+            router.push(path, {
+                state,
+            });
         }
     }, [routeResolver, router]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "1.3.1",
+  "version": "1.4.3",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,8 +34,9 @@
     "lodash": "^4.17.21",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-hook-form": "7.52.2",
+    "react-use": "17.6.0",
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "019339a44fae0fcce5466041f922710b08b79172"
+  "gitHead": "5c5739c442d4690430997c7f375fed5966cde046"
 }

package/recordset/RecordSetProvider.js

@@ -5,14 +5,31 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const useMetadata_1 = require("../metadata/hooks/useMetadata");
 const context_1 = require("../mutable/context");
+const route_1 = require("../route");
 const context_2 = require("./context");
 const RecordSetProvider = ({ children }) => {
-    const contextValue = (0, context_1.useCreateContextStore)({
-        logicalName: '',
-        ids: [],
+    const router = (0, route_1.useRouter)();
+    const contextValue = (0, context_1.useCreateContextStore)(() => ({
+        logicalName: router.getState('navigator')?.logicalName ?? '',
+        ids: router.getState('navigator')?.ids ?? [],
         cardView: null,
-        visibleNavigator: false,
-    });
+        visibleNavigator: router.getState('navigator')?.visible ?? false,
+    }));
+    (0, react_1.useEffect)(() => {
+        function listener(state, prevState, changes) {
+            if (['ids', 'logicalName', 'visibleNavigator'].some((key) => key in changes)) {
+                router.setState('navigator', {
+                    logicalName: state.logicalName,
+                    ids: state.ids,
+                    visible: state.visibleNavigator,
+                });
+            }
+        }
+        contextValue.addListener(listener);
+        return () => {
+            contextValue.removeListener(listener);
+        };
+    }, [contextValue, router]);
     return ((0, jsx_runtime_1.jsxs)(context_2.RecordSetContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(CardViewSetter, {}), children] }));
 };
 exports.RecordSetProvider = RecordSetProvider;

package/recordset/hooks/useRecordSetSetter.d.ts

@@ -1 +1,2 @@
+/*** @deprecated */
 export declare function useRecordSetSetter(): (logicalName: string, ids: (string | number)[]) => void;

package/recordset/hooks/useRecordSetSetter.js

@@ -4,6 +4,7 @@ exports.useRecordSetSetter = useRecordSetSetter;
 const react_1 = require("react");
 const context_1 = require("../../mutable/context");
 const context_2 = require("../context");
+/*** @deprecated */
 function useRecordSetSetter() {
     const setValue = (0, context_1.useContextSetValue)(context_2.RecordSetContext);
     const setRecordSet = (0, react_1.useCallback)((logicalName, ids) => {

package/route/context.d.ts

@@ -3,7 +3,7 @@ import { ReadonlyURLSearchParams } from './types';
 export type InternalRouteResolver = (item: NavPageItem) => string;
 export type InternalIsRouteActive = (path: string, item: NavPageItem) => boolean;
 interface NavigateOptions {
-    scroll?: boolean;
+    state?: any;
 }
 export interface RouterInstance {
     back: () => void;
@@ -11,6 +11,10 @@ export interface RouterInstance {
     push(href: string, options?: NavigateOptions): void;
     replace(href: string, options?: NavigateOptions): void;
     prefetch(href: string): void;
+    setState(state: any): void;
+    setState(key: string, state: any): void;
+    getState<T = any>(): T;
+    getState<T = any>(key: string): T | undefined;
 }
 export declare const RouterContext: import("react").Context<RouterInstance>;
 export declare const RouterPathnameContext: import("react").Context<string>;

package/store/HistoryState.d.ts

@@ -0,0 +1,7 @@
+export interface HistoryStatePlugin {
+    getter: () => Record<string, Record<string, unknown>>;
+    setter: (value: Record<string, Record<string, unknown>>) => void;
+}
+export declare function registerHistoryStatePlugin(plugin: HistoryStatePlugin): void;
+export declare function getHistoryState<T extends Record<string, unknown> = Record<string, unknown>>(key: string): Partial<T>;
+export declare function setHistoryState(key: string, value: Record<string, unknown>): void;

package/store/HistoryState.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerHistoryStatePlugin = registerHistoryStatePlugin;
+exports.getHistoryState = getHistoryState;
+exports.setHistoryState = setHistoryState;
+let historyStatePlugin = null;
+function registerHistoryStatePlugin(plugin) {
+    historyStatePlugin = plugin;
+}
+function getHistoryState(key) {
+    if (!historyStatePlugin) {
+        return {};
+    }
+    if (!key || typeof key !== 'string' || key.startsWith('~')) {
+        return {};
+    }
+    const state = historyStatePlugin.getter();
+    return (state[key] || {});
+}
+function setHistoryState(key, value) {
+    if (!historyStatePlugin) {
+        return;
+    }
+    const currentState = historyStatePlugin.getter();
+    historyStatePlugin.setter({
+        ...currentState,
+        [key]: {
+            ...currentState[key],
+            ...value,
+        },
+    });
+}

package/store/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ComponentStore';
 export * from './EventManager';
 export * from './SchemaExperienceStore';
+export * from './HistoryState';

package/store/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ComponentStore"), exports);
 __exportStar(require("./EventManager"), exports);
 __exportStar(require("./SchemaExperienceStore"), exports);
+__exportStar(require("./HistoryState"), exports);

package/transport/hooks/useRetriveRecords.js

@@ -97,6 +97,7 @@ function useRetriveRecordsInternal(queryKey, { columns, expand, filter, maxRecor
             pageIndex: 0,
         },
         enabled: !disabled,
+        staleTime: 1000 * 60 * 5, // 5 minutes
     });
     const finalData = (0, react_1.useMemo)(() => {
         if (!data?.pages.length) {