@headless-adminapp/fluent 1.3.3 → 1.4.0

package/DataGrid/GridListContainer.js

@@ -9,7 +9,6 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const navigation_1 = require("@headless-adminapp/app/navigation");
-const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
@@ -50,16 +49,14 @@ const GridListContainer = () => {
     });
     const virtualItems = virtualizer.getVirtualItems();
     const virtualSize = virtualizer.getTotalSize();
-    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
     const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
-        recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ??
-            []);
         openFormInternal({
             logicalName: schema.logicalName,
             id,
+            recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
         });
-    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
+    }, [openFormInternal, schema.idAttribute, schema.logicalName]);
     return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
             }, children: (0, jsx_runtime_1.jsx)("div", { style: {

package/DataGrid/GridTableContainer.js

@@ -9,7 +9,6 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const navigation_1 = require("@headless-adminapp/app/navigation");
-const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_table_1 = require("@tanstack/react-table");
 const react_virtual_1 = require("@tanstack/react-virtual");
@@ -99,16 +98,14 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
         }));
     }, [sorting]);
     const tableWrapperRef = (0, react_1.useRef)(null);
-    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
     const openFormInternal = (0, navigation_1.useOpenForm)();
     const openRecord = (0, react_1.useCallback)((id) => {
-        recordSetSetter(schema.logicalName, dataRef.current?.records.map((x) => x[schema.idAttribute]) ??
-            []);
         openFormInternal({
             logicalName: schema.logicalName,
             id,
+            recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]),
         });
-    }, [openFormInternal, recordSetSetter, schema.idAttribute, schema.logicalName]);
+    }, [openFormInternal, schema.idAttribute, schema.logicalName]);
     const { direction } = (0, locale_1.useLocale)();
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const dataRef = (0, react_1.useRef)(data);

package/DataGrid/useTableColumns.js

@@ -10,8 +10,7 @@ const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const hooks_4 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_5 = require("@headless-adminapp/app/route/hooks");
+const hooks_4 = require("@headless-adminapp/app/route/hooks");
 const utils_1 = require("@headless-adminapp/app/utils");
 const phone_1 = require("@headless-adminapp/app/utils/phone");
 const app_1 = require("@headless-adminapp/core/experience/app");
@@ -84,9 +83,8 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         return calculatedColumns;
     }, [columns, tableWrapperSize.width, schema.attributes]);
     const gridColumns = (0, hooks_1.useGridColumns)();
-    const routeResolver = (0, hooks_5.useRouteResolver)();
-    const router = (0, hooks_5.useRouter)();
-    const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
+    const routeResolver = (0, hooks_4.useRouteResolver)();
+    const router = (0, hooks_4.useRouter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
     const locale = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
@@ -226,7 +224,6 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                     schemaStore,
                     routeResolver,
                     openRecord,
-                    recordSetSetter,
                     router,
                 }),
                 enableResizing: true,
@@ -247,7 +244,6 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         schemaStore,
         routeResolver,
         openRecord,
-        recordSetSetter,
         router,
     ]);
     return (0, react_1.useMemo)(() => {
@@ -257,7 +253,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
 function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, attribute, }) {
     return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { columnName: column.name, sortDirection: props.column.getIsSorted() || undefined, minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, attribute: attribute, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
-function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, recordSetSetter, router, }) {
+function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, router, }) {
     let attribute;
     let value;
     if (column.expandedKey) {
@@ -317,7 +313,6 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
                 column,
                 schemaStore,
                 routeResolver,
-                recordSetSetter,
                 router,
                 value,
                 attribute,
@@ -330,7 +325,6 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
                 column,
                 schemaStore,
                 routeResolver,
-                recordSetSetter,
                 router,
                 value,
                 attribute,
@@ -392,7 +386,7 @@ function renderPrimaryAttributeAvatar({ info, schema, value, }) {
             src: avatarValue?.url,
         } }));
 }
-function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, recordSetSetter, router, attribute, formattedValue, }) {
+function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, }) {
     if (!value) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
     }
@@ -409,11 +403,10 @@ function renderLookupAttribute({ value, info, column, schemaStore, routeResolver
                     }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
                         src: value.avatar,
                     } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
-            recordSetSetter('', []);
             router.push(path);
         } }, column.id));
 }
-function renderRegardingAttribute({ value, info, column, schemaStore, routeResolver, recordSetSetter, router, formattedValue, }) {
+function renderRegardingAttribute({ value, info, column, schemaStore, routeResolver, router, formattedValue, }) {
     if (!value) {
         return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
     }
@@ -435,7 +428,6 @@ function renderRegardingAttribute({ value, info, column, schemaStore, routeResol
                     }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
                         src: value.avatar,
                     } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
-            recordSetSetter('', []);
             router.push(path);
         } }, column.id));
 }

package/PageEntityForm/CommandContainer.d.ts

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const CommandContainer: FC;
+interface CommandContainerProps {
+    skeleton?: boolean;
+}
+export declare const CommandContainer: FC<CommandContainerProps>;
+export {};

package/PageEntityForm/CommandContainer.js

@@ -1,24 +1,31 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const hooks_2 = require("@headless-adminapp/app/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const recordset_1 = require("@headless-adminapp/app/recordset");
 const hooks_3 = require("@headless-adminapp/app/recordset/hooks");
 const hooks_4 = require("@headless-adminapp/app/route/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-const CommandContainer = () => {
+const CommandContainer = ({ skeleton }) => {
+    const { language } = (0, locale_1.useLocale)();
     const gridCommands = (0, hooks_1.useMainFormCommands)();
     const router = (0, hooks_4.useRouter)();
     const isMobile = (0, hooks_2.useIsMobile)();
     const schema = (0, hooks_1.useDataFormSchema)();
     const [recordSetVisible, setRecordSetVisible] = (0, hooks_3.useRecordSetVisibility)();
     const recordSetContext = (0, mutable_1.useContextSelector)(recordset_1.RecordSetContext, (state) => state);
-    const extendedCommands = (0, react_1.useMemo)(() => {
+    const navigationCommands = (0, react_1.useMemo)(() => {
         return [
             [
                 {
@@ -44,10 +51,8 @@ const CommandContainer = () => {
                     ],
                 ]
                 : []),
-            ...gridCommands,
         ];
     }, [
-        gridCommands,
         isMobile,
         recordSetContext.ids.length,
         recordSetContext.logicalName,
@@ -56,6 +61,30 @@ const CommandContainer = () => {
         schema.logicalName,
         setRecordSetVisible,
     ]);
+    const extendedCommands = (0, react_1.useMemo)(() => {
+        return [...navigationCommands, ...gridCommands];
+    }, [gridCommands, navigationCommands]);
+    if (skeleton) {
+        return ((0, jsx_runtime_1.jsxs)(CommandBar_1.default.Wrapper, { overflow: "hidden", children: [navigationCommands.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}), group.map((item, index) => {
+                            const commandType = item.type;
+                            switch (item.type) {
+                                case 'menu':
+                                case 'button':
+                                case 'label':
+                                case 'icon':
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, OverflowCommandBar_1.renderCommandItem)(`${groupIndex}-${index}`, item, language) }, `${groupIndex}-${index}`));
+                                default:
+                                    throw new Error(`Unknown command type: ${commandType}`);
+                            }
+                        })] }, groupIndex))), (0, jsx_runtime_1.jsx)(CommandBar_1.default.Divider, {}), (0, jsx_runtime_1.jsx)(SkeletonCommandButton, {}), (0, jsx_runtime_1.jsx)(SkeletonCommandButton, {}), (0, jsx_runtime_1.jsx)(SkeletonCommandButton, {})] }));
+    }
     return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: extendedCommands });
 };
 exports.CommandContainer = CommandContainer;
+const SkeletonCommandButton = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            gap: react_components_1.tokens.spacingHorizontalS,
+            paddingInline: react_components_1.tokens.spacingHorizontalM,
+        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: { width: 20, height: 20 } }), (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: { width: 60, height: 20 } })] }));
+};

package/PageEntityForm/FormTabRelated.d.ts

@@ -1,4 +1,4 @@
-import { RelatedItemInfo } from './RelatedViewSelector';
+import { RelatedItemInfo } from '@headless-adminapp/app/dataform/context';
 interface FormTabRelatedProps {
     selectedRelatedItem: RelatedItemInfo | null;
 }

package/PageEntityForm/FormTabRelated.js

@@ -4,11 +4,13 @@ exports.FormTabRelated = FormTabRelated;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
 function FormTabRelated({ selectedRelatedItem }) {
     const recordId = (0, hooks_1.useRecordId)();
     const schema = (0, hooks_1.useDataFormSchema)();
+    const historyKey = (0, historystate_1.useHistoryStateKey)();
     return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
@@ -32,9 +34,9 @@ function FormTabRelated({ selectedRelatedItem }) {
                                 flex: 1,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: selectedRelatedItem.logicalName, allowViewSelection: true, associated: {
-                                    logicalName: schema.logicalName,
-                                    id: recordId,
-                                    refAttributeName: selectedRelatedItem.attributeName,
-                                } })) }) }) }) }) }) }));
+                            }, children: !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: `related.${selectedRelatedItem.key}`, nested: true, children: (0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: selectedRelatedItem.logicalName, allowViewSelection: true, associated: {
+                                        logicalName: schema.logicalName,
+                                        id: recordId,
+                                        refAttributeName: selectedRelatedItem.attributeName,
+                                    } }) })) }) }) }) }) }) }));
 }

package/PageEntityForm/PageEntityForm.js

@@ -4,7 +4,9 @@ exports.PageEntityForm = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const PageEntityFormProvider_1 = require("@headless-adminapp/app/providers/PageEntityFormProvider");
+const recordset_1 = require("@headless-adminapp/app/recordset");
 const icons_1 = require("@headless-adminapp/icons");
 const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
@@ -27,12 +29,12 @@ const PageEntityForm = ({ logicalName, formId, recordId, }) => {
             return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: "Creating is disabled", message: "Creating records is disabled for this entity." }));
         }
     }
-    return ((0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flex: 1,
-                flexDirection: 'row',
-                backgroundColor: react_components_1.tokens.colorNeutralBackground2,
-                overflow: 'hidden',
-            }, children: [(0, jsx_runtime_1.jsx)(RecordSetNavigatorContainer_1.RecordSetNavigatorContainer, {}), (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {})] }) }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-form.' + logicalName, children: (0, jsx_runtime_1.jsx)(recordset_1.RecordSetProvider, { children: (0, jsx_runtime_1.jsx)(PageEntityFormProvider_1.PageEntityFormProvider, { schema: schema, form: form, recordId: recordId, commands: commands, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flex: 1,
+                        flexDirection: 'row',
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        overflow: 'hidden',
+                    }, children: [(0, jsx_runtime_1.jsx)(RecordSetNavigatorContainer_1.RecordSetNavigatorContainer, {}), (0, jsx_runtime_1.jsx)(PageEntityFormDesktopContainer_1.PageEntityFormDesktopContainer, {})] }) }) }) }));
 };
 exports.PageEntityForm = PageEntityForm;

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const useFormDataState_1 = require("@headless-adminapp/app/dataform/hooks/useFormDataState");
 const locale_1 = require("@headless-adminapp/app/locale");
 const utils_1 = require("@headless-adminapp/app/locale/utils");
 const mutable_1 = require("@headless-adminapp/app/mutable");
@@ -12,9 +13,9 @@ const utils_2 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const PageBroken_1 = require("../components/PageBroken");
-const PageLoading_1 = require("../components/PageLoading");
 const FormBody_1 = require("../form/layout/FormBody");
 const FormTab_1 = require("../form/layout/FormTab");
+const TextSkeleton_1 = require("../Skeleton/TextSkeleton");
 const CommandContainer_1 = require("./CommandContainer");
 const FormTabRelated_1 = require("./FormTabRelated");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
@@ -22,52 +23,37 @@ const ProcessFlow_1 = require("./ProcessFlow");
 const RecordAvatar_1 = require("./RecordAvatar");
 const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
-let previousCachedActiveTabInfo = null;
 const PageEntityFormDesktopContainer = () => {
-    const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
+    const dataState = (0, useFormDataState_1.useFormDataState)();
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const locale = (0, locale_1.useLocale)();
     const recordId = (0, hooks_1.useRecordId)();
     const record = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.record);
     const activeTab = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.activeTab);
+    const selectedRelatedItem = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.selectedRelatedItem);
     const { language } = (0, locale_1.useLocale)();
     const schema = (0, hooks_1.useDataFormSchema)();
     const formConfig = (0, hooks_1.useSelectedForm)();
     const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
     const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
-        setValue((state) => ({
-            ...state,
+        setValue(() => ({
             activeTab: value,
         }));
     });
-    (0, react_1.useEffect)(() => {
-        if (previousCachedActiveTabInfo &&
-            previousCachedActiveTabInfo.logicalName === schema.logicalName) {
-            setActiveTab(previousCachedActiveTabInfo.name);
-            setSelectedRelatedItem(previousCachedActiveTabInfo.relatedItem);
-        }
-        else {
-            setActiveTab(formConfig.experience.tabs[0].name);
-            previousCachedActiveTabInfo = {
-                logicalName: schema.logicalName,
-                name: formConfig.experience.tabs[0].name,
-                relatedItem: null,
-            };
-        }
-    }, [setActiveTab, formConfig, schema]);
+    const setSelectedRelatedItem = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (item) => {
+        setValue(() => ({
+            selectedRelatedItem: item,
+        }));
+    });
     const [recordTitle] = (0, hooks_1.useRecordTitle)();
     // const readonly = useIsFormReadonly();
     const formInstance = (0, hooks_1.useFormInstance)();
     const isDirty = (0, hooks_1.useFormIsDirty)();
     const notifications = (0, hooks_1.useFormNotifications)();
-    const [selectedRelatedItem, setSelectedRelatedItem] = (0, react_1.useState)(null);
-    if (dataState.isFetching) {
-        return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
-    }
-    if (dataState.isError) {
+    if (!dataState.isFetching && dataState.isError) {
         return (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Error", message: "Unable to load page" });
     }
-    if (recordId && !record) {
+    if (recordId && !record && !dataState.isFetching) {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Record not found", message: "Requested record not found in system or you may not have enought permission." }));
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -89,7 +75,7 @@ const PageEntityFormDesktopContainer = () => {
                             background: react_components_1.tokens.colorNeutralBackground1,
                             display: 'flex',
                             // overflow: 'hidden',
-                        }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}) }), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        }, children: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, { skeleton: dataState.isFetching }) }), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             boxShadow: react_components_1.tokens.shadow4,
@@ -103,7 +89,11 @@ const PageEntityFormDesktopContainer = () => {
                                     paddingInline: react_components_1.tokens.spacingHorizontalM,
                                     paddingTop: react_components_1.tokens.spacingVerticalS,
                                     marginBottom: react_components_1.tokens.spacingVerticalS,
-                                }, children: [(0, jsx_runtime_1.jsx)(RecordAvatar_1.RecordAvatar, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, children: [(0, jsx_runtime_1.jsx)(RecordAvatar_1.RecordAvatar, {}), dataState.isFetching ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            flex: 1,
+                                        }, children: [(0, jsx_runtime_1.jsx)(TextSkeleton_1.Subtitle2Skeleton, { width: 200 }), (0, jsx_runtime_1.jsx)(TextSkeleton_1.Body1Skeleton, { width: 80 })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', flex: 1 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     gap: react_components_1.tokens.spacingHorizontalXS,
                                                     alignItems: 'center',
@@ -111,7 +101,7 @@ const PageEntityFormDesktopContainer = () => {
                                                             ? `- ${strings.unsaved}`
                                                             : !!record
                                                                 ? `- ${strings.saved}`
-                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] })), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls?.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
                                             if (!attribute) {
                                                 console.warn(`Attribute ${controlName} not found`);
@@ -121,24 +111,17 @@ const PageEntityFormDesktopContainer = () => {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
                                                         } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
+                                                                    if (dataState.isFetching) {
+                                                                        return (0, jsx_runtime_1.jsx)(TextSkeleton_1.Body1Skeleton, { width: 100 });
+                                                                    }
                                                                     return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value, locale) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
+                                        }) })] }), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps, skeleton: dataState.isFetching })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => {
                                             setActiveTab(value.value);
-                                            previousCachedActiveTabInfo = {
-                                                logicalName: schema.logicalName,
-                                                name: value.value,
-                                                relatedItem: null,
-                                            };
                                         }, children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: selectedRelatedItem.localizedPluralLabels?.[language] ??
                                                     selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
                                             setSelectedRelatedItem(item);
                                             setActiveTab('related');
-                                            previousCachedActiveTabInfo = {
-                                                logicalName: schema.logicalName,
-                                                name: 'related',
-                                                relatedItem: item,
-                                            };
-                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));
 };
 exports.PageEntityFormDesktopContainer = PageEntityFormDesktopContainer;

package/PageEntityForm/ProcessFlow.d.ts

@@ -5,6 +5,7 @@ interface ProcessFlowProps {
         label: string;
         isActivated?: boolean;
     }>;
+    skeleton?: boolean;
 }
-export declare function ProcessFlow({ height, rounded, items, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProcessFlow({ height, rounded, items, skeleton, }: ProcessFlowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/ProcessFlow.js

@@ -3,17 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProcessFlow = ProcessFlow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-function ProcessFlow({ height = 32, rounded = true, items, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', height }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                display: 'flex',
-                overflow: 'hidden',
-                borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
-            }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1 }, index))) }) }));
+const useStyles = (0, react_components_1.makeStyles)({
+    skeleton: {
+        backgroundColor: 'transparent',
+        '&:after': {
+            backgroundImage: 'linear-gradient(to right, transparent 0%, var(--colorNeutralStencil2) 50%, transparent 100%)',
+        },
+    },
+});
+function ProcessFlow({ height = 32, rounded = true, items, skeleton, }) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', height }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    overflow: 'hidden',
+                    borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
+                }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ProcessFlowItem, { height: height, label: item.label, isActivated: item.isActivated, isFirst: index === 0, isLast: index === items.length - 1, skeleton: skeleton }, index))) }), skeleton && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, zIndex: 1 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                        height: '100%',
+                        borderRadius: rounded ? react_components_1.tokens.borderRadiusMedium : 0,
+                    }, className: styles.skeleton }) }))] }));
 }
-const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
-    const backgroundColor = isActivated
-        ? react_components_1.tokens.colorBrandBackground
-        : react_components_1.tokens.colorNeutralStrokeDisabled;
+const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, skeleton, }) => {
+    let backgroundColor = react_components_1.tokens.colorNeutralStencil1;
+    if (!skeleton) {
+        backgroundColor = isActivated
+            ? react_components_1.tokens.colorBrandBackground
+            : react_components_1.tokens.colorNeutralStrokeDisabled;
+    }
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             flex: 1,
             position: 'relative',
@@ -72,7 +87,7 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                             borderRight: isLast
                                 ? 'none'
                                 : `1px solid ${react_components_1.tokens.colorNeutralBackground1}`,
-                        } })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        } })] }), !skeleton && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
                     flex: 1,
@@ -80,5 +95,5 @@ const ProcessFlowItem = ({ label, height, isActivated, isFirst, isLast, }) => {
                     gap: react_components_1.tokens.spacingVerticalS,
                     color: isActivated ? 'white' : undefined,
                     zIndex: 2,
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) })] }));
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { children: label }) }))] }));
 };

package/PageEntityForm/RecordAvatar.js

@@ -6,6 +6,7 @@ const react_components_1 = require("@fluentui/react-components");
 const app_1 = require("@headless-adminapp/app/app");
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const useIsDataFetching_1 = require("@headless-adminapp/app/dataform/hooks/useIsDataFetching");
 const dialog_1 = require("@headless-adminapp/app/dialog");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const progress_indicator_1 = require("@headless-adminapp/app/progress-indicator");
@@ -23,6 +24,7 @@ const RecordAvatar = () => {
     const dataService = (0, transport_1.useDataService)();
     const refresh = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.refresh);
     const [showAvatarChangeDialog, setShowAvatarChangeDialog] = (0, react_1.useState)(false);
+    const isDataFetching = (0, useIsDataFetching_1.useIsFormDataFetching)();
     const fileService = (0, transport_1.useFileService)();
     const { showProgressIndicator, hideProgressIndicator } = (0, progress_indicator_1.useProgressIndicator)();
     const openErrorDialog = (0, dialog_1.useOpenErrorDialog)();
@@ -59,6 +61,18 @@ const RecordAvatar = () => {
     if (!experienceSchema) {
         return null;
     }
+    if (isDataFetching) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+                marginRight: react_components_1.tokens.spacingHorizontalM,
+                marginTop: 2,
+            }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { style: {
+                    width: 36,
+                    height: 36,
+                    borderRadius: react_components_1.tokens.borderRadiusCircular,
+                } }) }));
+    }
     if (isPlaceholder && !value) {
         const Icon = experienceSchema.Icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
         return ((0, jsx_runtime_1.jsx)("div", { style: {

package/PageEntityForm/RelatedViewSelector.d.ts

@@ -1,11 +1,4 @@
-import { Localized } from '@headless-adminapp/core/types';
-export interface RelatedItemInfo {
-    key: string;
-    logicalName: string;
-    pluralLabel: string;
-    localizedPluralLabels?: Localized<string>;
-    attributeName: string;
-}
+import { RelatedItemInfo } from '@headless-adminapp/app/dataform/context';
 interface RelatedViewSelectorProps {
     onSelect: (item: RelatedItemInfo) => void;
 }

package/PageEntityForm/SectionContainer.d.ts

@@ -1,6 +1,7 @@
 import { Section } from '@headless-adminapp/core/experience/form';
 import type { SchemaAttributes } from '@headless-adminapp/core/schema';
-export declare function SectionContainer<S extends SchemaAttributes = SchemaAttributes>({ section }: Readonly<{
+export declare function SectionContainer<S extends SchemaAttributes = SchemaAttributes>({ section, skeleton, }: Readonly<{
     section: Section<S>;
     readOnly: boolean;
+    skeleton?: boolean;
 }>): import("react/jsx-runtime").JSX.Element | null;

package/PageEntityForm/SectionContainer.js

@@ -7,6 +7,7 @@ const constants_1 = require("@headless-adminapp/app/dataform/constants");
 const utils_1 = require("@headless-adminapp/app/dataform/DataFormProvider/utils");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const useEventManager_1 = require("@headless-adminapp/app/dataform/hooks/useEventManager");
+const historystate_1 = require("@headless-adminapp/app/historystate");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const utils_2 = require("@headless-adminapp/app/locale/utils");
@@ -19,7 +20,7 @@ const layout_1 = require("../form/layout");
 const EditableGridControl_1 = require("./EditableGridControl/EditableGridControl");
 const StandardControl_1 = require("./StandardControl");
 const SubgridControl_1 = require("./SubgridControl");
-function SectionContainer({ section }) {
+function SectionContainer({ section, skeleton, }) {
     const schema = (0, hooks_1.useDataFormSchema)();
     const formInstance = (0, hooks_1.useFormInstance)();
     const recordId = (0, hooks_1.useRecordId)();
@@ -95,7 +96,7 @@ function SectionContainer({ section }) {
                                             recordId,
                                             attributeName: control.attributeName,
                                             logicalName: schema.logicalName,
-                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight }) }));
+                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight, skeleton: skeleton }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {
@@ -119,13 +120,14 @@ function SectionContainer({ section }) {
                             ContainerComponent = componentStore_1.componentStore.getComponent(control.component);
                         }
                     }
-                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
-                            ? false
-                            : {
-                                logicalName: schema.logicalName,
-                                id: recordId,
-                                refAttributeName: control.associatedAttribute,
-                            } }, index));
+                    const key = control.key ?? `${control.logicalName}-${index}`;
+                    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: `subgrid.${key}`, nested: true, children: (0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
+                                ? false
+                                : {
+                                    logicalName: schema.logicalName,
+                                    id: recordId,
+                                    refAttributeName: control.associatedAttribute,
+                                } }, key) }));
                 }
                 case 'component': {
                     const Component = control.component === 'string'