@headless-adminapp/fluent 1.4.12 → 1.4.14

package/PageEntityForm/MobileHeaderRightContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderRightContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const MobileHeaderCommandContainer_1 = require("../Header/MobileHeaderCommandContainer");
+const MobileHeaderRightContainer = () => {
+    const commands = (0, dataform_1.useMainFormCommands)();
+    return (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.MobileHeaderCommandContainer, { commands: commands });
+};
+exports.MobileHeaderRightContainer = MobileHeaderRightContainer;

package/PageEntityForm/MobileHeaderTitleContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MobileHeaderTitleContainer: FC;

package/PageEntityForm/MobileHeaderTitleContainer.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderTitleContainer = void 0;
+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 useFormDataState_1 = require("@headless-adminapp/app/dataform/hooks/useFormDataState");
+const MobileHeaderTitle_1 = require("@headless-adminapp/app/header/components/MobileHeaderTitle");
+const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
+const MobileHeaderTitleContainer = () => {
+    const [recordTitle] = (0, dataform_1.useRecordTitle)();
+    const { language } = (0, locale_1.useLocale)();
+    const schema = (0, dataform_1.useDataFormSchema)();
+    const dataState = (0, useFormDataState_1.useFormDataState)();
+    if (dataState.isFetching || dataState.isError) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { order: 3, title: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                flex: 1,
+                overflow: 'hidden',
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflow: 'hidden',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            gap: react_components_1.tokens.spacingHorizontalXS,
+                            alignItems: 'center',
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: {
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                            }, children: recordTitle }) }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { opacity: 0.8 }, children: (0, utils_1.localizedLabel)(language, schema) })] }) }) }));
+};
+exports.MobileHeaderTitleContainer = MobileHeaderTitleContainer;

package/PageEntityForm/PageEntityForm.js

@@ -4,6 +4,7 @@ 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 hooks_2 = require("@headless-adminapp/app/header/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");
@@ -14,6 +15,7 @@ const PageEntityFormDesktopContainer_1 = require("./PageEntityFormDesktopContain
 const RecordSetNavigatorContainer_1 = require("./RecordSetNavigatorContainer");
 const PageEntityForm = ({ logicalName, formId, recordId, }) => {
     const result = (0, hooks_1.useLoadFormGridPage)(logicalName, formId);
+    (0, hooks_2.useMobileHeader)(true);
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -3,9 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityFormDesktopContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 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 useMobileHeaderSetValue_1 = require("@headless-adminapp/app/header/hooks/useMobileHeaderSetValue");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 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");
@@ -18,33 +21,27 @@ const FormTab_1 = require("../form/layout/FormTab");
 const TextSkeleton_1 = require("../Skeleton/TextSkeleton");
 const CommandContainer_1 = require("./CommandContainer");
 const FormTabRelated_1 = require("./FormTabRelated");
+const MobileHeaderRightContainer_1 = require("./MobileHeaderRightContainer");
+const MobileHeaderTitleContainer_1 = require("./MobileHeaderTitleContainer");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 const ProcessFlow_1 = require("./ProcessFlow");
 const RecordAvatar_1 = require("./RecordAvatar");
-const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
+const TabContainer_1 = require("./TabContainer");
 const PageEntityFormDesktopContainer = () => {
+    const formHeaderDivRef = (0, react_1.useRef)(null);
     const dataState = (0, useFormDataState_1.useFormDataState)();
+    const isMobile = (0, hooks_2.useIsMobile)();
     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)();
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(schema.label, 2, 'title');
     const formConfig = (0, hooks_1.useSelectedForm)();
     const processFlowSteps = (0, hooks_1.useProcessFlowSteps)();
-    const setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
-        setValue(() => ({
-            activeTab: value,
-        }));
-    });
-    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)();
@@ -56,72 +53,90 @@ const PageEntityFormDesktopContainer = () => {
     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: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             // backgroundColor: tokens.colorNeutralBackground2,
             overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: react_components_1.tokens.spacingVerticalM,
-                    paddingTop: react_components_1.tokens.spacingVerticalM,
-                    paddingInline: react_components_1.tokens.spacingHorizontalM,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                            // padding: 4,
-                            boxShadow: react_components_1.tokens.shadow2,
-                            borderRadius: react_components_1.tokens.borderRadiusMedium,
-                            background: react_components_1.tokens.colorNeutralBackground1,
-                            display: 'flex',
-                            // overflow: 'hidden',
-                        }, 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,
-                            borderRadius: react_components_1.tokens.borderRadiusMedium,
-                            background: react_components_1.tokens.colorNeutralBackground1,
-                            overflow: 'hidden',
-                            zIndex: 2,
-                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    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, {}), 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',
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: recordTitle }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: isDirty
-                                                            ? `- ${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) => {
-                                            const attribute = schema.attributes[controlName];
-                                            if (!attribute) {
-                                                console.warn(`Attribute ${controlName} not found`);
-                                                return null;
-                                            }
-                                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
-                                                            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, 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);
-                                        }, 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');
-                                        } })] })] })] }), (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 })] })] }));
+        }, children: (0, jsx_runtime_1.jsxs)(Wrapper, { formHeaderDivRef: formHeaderDivRef, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: react_components_1.tokens.spacingVerticalM,
+                        paddingTop: react_components_1.tokens.spacingVerticalM,
+                        paddingInline: react_components_1.tokens.spacingHorizontalM,
+                    }, children: [!isMobile && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                // padding: 4,
+                                boxShadow: react_components_1.tokens.shadow2,
+                                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                                background: react_components_1.tokens.colorNeutralBackground1,
+                                display: 'flex',
+                                // overflow: 'hidden',
+                            }, 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,
+                                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                                background: react_components_1.tokens.colorNeutralBackground1,
+                                overflow: 'hidden',
+                                zIndex: 2,
+                            }, ref: formHeaderDivRef, children: [(!!formConfig.experience.headerControls?.length || !isMobile) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        paddingInline: react_components_1.tokens.spacingHorizontalM,
+                                        paddingTop: react_components_1.tokens.spacingVerticalS,
+                                        marginBottom: react_components_1.tokens.spacingVerticalS,
+                                    }, children: [!isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { 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',
+                                                            }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: recordTitle }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: isDirty
+                                                                        ? `- ${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) => {
+                                                const attribute = schema.attributes[controlName];
+                                                if (!attribute) {
+                                                    console.warn(`Attribute ${controlName} not found`);
+                                                    return null;
+                                                }
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
+                                                                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));
+                                            }) })] })), (0, jsx_runtime_1.jsx)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)(MobileHeaderRightContainer_1.MobileHeaderRightContainer, {}), !!processFlowSteps?.length && ((0, jsx_runtime_1.jsx)(ProcessFlow_1.ProcessFlow, { height: 28, rounded: false, items: processFlowSteps, skeleton: dataState.isFetching })), (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {})] })] }), (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;
+const Wrapper = ({ children, formHeaderDivRef, }) => {
+    const isMobile = (0, hooks_2.useIsMobile)();
+    const rect = (0, hooks_2.useElementSize)(formHeaderDivRef, isMobile ? 100 : 5000);
+    const headerHeight = 50;
+    const tabContainerHeight = 36;
+    const visible = !!rect && rect.bottom < headerHeight + tabContainerHeight;
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        background: react_components_1.tokens.colorNeutralBackground1,
+                        position: 'fixed',
+                        transition: 'all 0.2s',
+                        top: visible ? headerHeight : -headerHeight,
+                        left: 0,
+                        right: 0,
+                        zIndex: visible ? 3 : 0,
+                        boxShadow: react_components_1.tokens.shadow4,
+                    }, children: (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {}) }), children, (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } })] }));
+    }
+    return children;
+};

package/PageEntityForm/RecordCard.js

@@ -8,24 +8,22 @@ const utils_1 = require("@headless-adminapp/app/utils");
 const ChoiceBadge_1 = require("../components/ChoiceBadge");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
+        minHeight: '44px',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    inner: {
         width: '100%',
         display: 'flex',
         flexDirection: 'row',
         paddingInline: react_components_1.tokens.spacingHorizontalL,
         paddingBlock: react_components_1.tokens.spacingVerticalS,
         gap: react_components_1.tokens.spacingHorizontalS,
-        // cursor: 'pointer',
-        // '&:hover': {
-        //   background: tokens.colorNeutralBackground1Hover,
-        // },
-        // '&:active': {
-        //   background: tokens.colorNeutralBackground1Pressed,
-        // },
     },
-    // selected: {
-    //   background: tokens.colorNeutralBackground1Selected,
-    // },
-    selected: {},
+    selected: {
+        background: react_components_1.tokens.colorNeutralBackground1Hover,
+    },
 });
 function createIntial(name) {
     return name
@@ -56,32 +54,32 @@ function RecordCard({ schema, cardView, record, selected, }) {
             }
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", size: !cardView.secondaryColumns?.length ? 20 : 32, style: { cursor: 'pointer' }, image: {
-                    src: avatarSrc,
-                } })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn], locale) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema, locale: locale }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-end',
-                }, children: cardView.rightColumn.map((column) => {
-                    const value = _record[column.name];
-                    if (!value) {
-                        return null;
-                    }
-                    const attribute = schema.attributes[column.name];
-                    if (column.variant === 'choice') {
-                        if (attribute.type === 'choice') {
-                            return ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value }, column.name));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root, selected && styles.selected), children: (0, jsx_runtime_1.jsxs)("div", { className: styles.inner, children: [cardView.showAvatar && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", size: !cardView.secondaryColumns?.length ? 20 : 32, style: { cursor: 'pointer' }, image: {
+                        src: avatarSrc,
+                    } })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flex: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { wordBreak: 'break-all' }, children: (0, utils_1.getAttributeFormattedValue)(schema.attributes[cardView.primaryColumn], _record[cardView.primaryColumn], locale) }), cardView.secondaryColumns?.map((column) => ((0, jsx_runtime_1.jsx)(SecondaryColumnContent, { record: _record, column: column, schema: schema, locale: locale }, column.name)))] }), !!cardView.rightColumn?.length && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-end',
+                    }, children: cardView.rightColumn.map((column) => {
+                        const value = _record[column.name];
+                        if (!value) {
+                            return null;
+                        }
+                        const attribute = schema.attributes[column.name];
+                        if (column.variant === 'choice') {
+                            if (attribute.type === 'choice') {
+                                return ((0, jsx_runtime_1.jsx)(ChoiceTag, { attribute: attribute, value: value }, column.name));
+                            }
+                        }
+                        if (column.variant === 'strong') {
+                            return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
                         }
-                    }
-                    if (column.variant === 'strong') {
-                        return ((0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
-                    }
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
-                }) }))] }));
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) }, column.name));
+                    }) }))] }) }));
 }
 function SecondaryColumnContent({ record: _record, column, schema, locale, }) {
     const value = _record[column.name];

package/PageEntityForm/TabContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TabContainer: FC;

package/PageEntityForm/TabContainer.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContainer = void 0;
+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 locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const RelatedViewSelector_1 = require("./RelatedViewSelector");
+const TabContainer = () => {
+    const formConfig = (0, hooks_1.useSelectedForm)();
+    const { language } = (0, locale_1.useLocale)();
+    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 setActiveTab = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (value) => {
+        setValue(() => ({
+            activeTab: value,
+        }));
+    });
+    const setSelectedRelatedItem = (0, mutable_1.useContextValueSetter)(dataform_1.DataFormContext, (setValue) => (item) => {
+        setValue(() => ({
+            selectedRelatedItem: item,
+        }));
+    });
+    return ((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);
+                }, 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');
+                } })] }));
+};
+exports.TabContainer = TabContainer;

package/PageEntityView/PageEntityView.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const header_1 = require("@headless-adminapp/app/header");
+const MobileHeaderTitle_1 = require("@headless-adminapp/app/header/components/MobileHeaderTitle");
 const historystate_1 = require("@headless-adminapp/app/historystate");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
@@ -14,6 +16,7 @@ const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer
 const PageEntityView = ({ logicalName, viewId, onChangeView, useV2, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
     const isMobile = (0, hooks_1.useIsMobile)();
+    (0, header_1.useMobileHeader)(false);
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
@@ -31,6 +34,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, useV2, }) => {
     else {
         content = (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainerV2, {});
     }
-    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-view.' + logicalName, children: (0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: content }) }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-view.' + logicalName, children: (0, jsx_runtime_1.jsxs)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { title: schema.label, order: 2 }), content] }) }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -2,11 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewMobileContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CommandContainer_1 = require("../DataGrid/CommandContainer");
 const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
 const GridListContainer_1 = require("../DataGrid/GridListContainer");
 const PageEntityViewMobileFrame_1 = require("./PageEntityViewMobileFrame");
 const PageEntityViewMobileContainer = () => {
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewMobileFrame_1.PageEntityViewMobileFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewMobileFrame_1.PageEntityViewMobileFrame, { header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}) }));
 };
 exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/PageEntityView/PageEntityViewMobileFrame.d.ts

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 interface PageEntityViewMobileFrameProps {
-    commandBar: React.ReactNode;
     header: React.ReactNode;
     content: React.ReactNode;
 }

package/PageEntityView/PageEntityViewMobileFrame.js

@@ -3,36 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewMobileFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const PageEntityViewMobileFrame = ({ commandBar, header, content, }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
+const MobileHeaderRightContainer_1 = require("../DataGrid/MobileHeaderRightContainer");
+const PageEntityViewMobileFrame = ({ header, content, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             background: react_components_1.tokens.colorNeutralBackground1,
             overflow: 'hidden',
-        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                gap: 4,
-                flex: 1,
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                        boxShadow: react_components_1.tokens.shadow2,
-                        background: react_components_1.tokens.colorNeutralBackground1,
-                        display: 'flex',
-                        minHeight: 40,
-                        flexDirection: 'column',
-                        gap: 4,
-                        paddingBottom: 8,
-                    }, children: [commandBar, header] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        flex: 1,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
-                    }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                            gap: 8,
+        }, children: [(0, jsx_runtime_1.jsx)(MobileHeaderRightContainer_1.MobileHeaderRightContainer, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    gap: 4,
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            boxShadow: react_components_1.tokens.shadow2,
+                            background: react_components_1.tokens.colorNeutralBackground1,
                             display: 'flex',
+                            minHeight: 40,
                             flexDirection: 'column',
+                            gap: 4,
+                            paddingTop: 8,
+                            paddingBottom: 8,
+                        }, children: header }), (0, jsx_runtime_1.jsx)("div", { style: {
                             flex: 1,
-                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex' }, children: content }) }) })] }) }));
+                            display: 'flex',
+                            flexDirection: 'column',
+                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                gap: 8,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                flex: 1,
+                            }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex' }, children: content }) }) })] })] }));
 };
 exports.PageEntityViewMobileFrame = PageEntityViewMobileFrame;

package/ToastNotificationContainer/index.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToastNotificationContainer = 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/toast-notification/hooks");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const hooks_2 = require("@headless-adminapp/app/toast-notification/hooks");
 const react_1 = require("react");
 const ToastNotificationContainer = () => {
-    const items = (0, hooks_1.useToastNotificationItems)();
+    const items = (0, hooks_2.useToastNotificationItems)();
     const toasterId = (0, react_components_1.useId)('toaster');
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Toaster, { toasterId: toasterId }), items.map((item) => {
                 return (0, jsx_runtime_1.jsx)(Item, { item: item, toasterId: toasterId }, item.id);
@@ -15,8 +16,9 @@ const ToastNotificationContainer = () => {
 exports.ToastNotificationContainer = ToastNotificationContainer;
 const Item = ({ item, toasterId, }) => {
     const { dispatchToast, dismissToast } = (0, react_components_1.useToastController)(toasterId);
-    const closeToastNotification = (0, hooks_1.useCloseToastNotification)();
+    const closeToastNotification = (0, hooks_2.useCloseToastNotification)();
     const opened = (0, react_1.useRef)(false);
+    const isMobile = (0, hooks_1.useIsMobile)();
     (0, react_1.useEffect)(() => {
         if (!item.isOpen) {
             dismissToast(item.id);
@@ -31,13 +33,13 @@ const Item = ({ item, toasterId, }) => {
             intent: item.type,
             pauseOnHover: true,
             pauseOnWindowBlur: true,
-            position: 'top-end',
+            position: isMobile ? 'bottom' : 'top-end',
             onStatusChange: (event, data) => {
                 if (data.status === 'dismissed') {
                     closeToastNotification(item.id);
                 }
             },
         });
-    }, [dispatchToast, closeToastNotification, item, dismissToast]);
+    }, [dispatchToast, closeToastNotification, item, dismissToast, isMobile]);
     return null;
 };

package/components/DialogLogin.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogLogin = DialogLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const LoginForm_1 = require("./LoginForm");
 const hooks_1 = require("@headless-adminapp/app/hooks");
+const LoginForm_1 = require("./LoginForm");
 function DialogLogin(props) {
     const isMobile = (0, hooks_1.useIsMobile)();
     if (isMobile) {