@headless-adminapp/fluent 1.4.11 → 1.4.13

package/Header/MobileHeaderCommandContainer.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderCommandContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const MobileHeaderRightContent_1 = require("@headless-adminapp/app/header/components/MobileHeaderRightContent");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const QuickActionItem_1 = require("../App/QuickActionItem");
+const MobileHeaderQuickActionButton_1 = require("./MobileHeaderQuickActionButton");
+const useStyles = (0, react_components_1.makeStyles)({
+    dangerMenuItem: {
+        color: react_components_1.tokens.colorStatusDangerForeground1,
+        '&:hover': {
+            backgroundColor: react_components_1.tokens.colorStatusDangerBackground3Hover,
+        },
+        '&:active': {
+            backgroundColor: react_components_1.tokens.colorStatusDangerBackground3Pressed,
+        },
+    },
+});
+function isQuickAction(command) {
+    if (command.type === 'button') {
+        return command.isQuickAction ?? false;
+    }
+    return false;
+}
+const MobileHeaderCommandContainer = ({ commands }) => {
+    const [showMoreActions, setShowMoreActions] = (0, react_1.useState)(false);
+    const quickActions = (0, react_1.useMemo)(() => {
+        return commands.flat().filter((command) => isQuickAction(command));
+    }, [commands]);
+    const moreActions = (0, react_1.useMemo)(() => {
+        return commands
+            .map((group) => {
+            return group.filter((command) => {
+                if (isQuickAction(command)) {
+                    return false;
+                }
+                if (command.type === 'icon') {
+                    return false;
+                }
+                return true;
+            });
+        })
+            .filter((group) => group.length > 0);
+    }, [commands]);
+    return ((0, jsx_runtime_1.jsxs)(MobileHeaderRightContent_1.MobileHeaderRightContent, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingLeft: 8,
+                    display: 'flex',
+                    gap: 16,
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 8 }, children: [quickActions.map((command, index) => {
+                            if (command.hidden || command.type !== 'button') {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsx)(MobileHeaderQuickActionButton_1.MobileHeaderQuickActionButton, { title: command.text, Icon: command.Icon, onClick: command.onClick }, index));
+                        }), moreActions.length > 0 && ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.MoreVertical, label: "More Actions", onClick: () => setShowMoreActions(true) }))] }) }), (0, jsx_runtime_1.jsx)(BottomDrawerMenu, { open: showMoreActions, onClose: () => setShowMoreActions(false), actions: moreActions })] }));
+};
+exports.MobileHeaderCommandContainer = MobileHeaderCommandContainer;
+const BottomDrawerMenu = ({ open, onClose, actions, }) => {
+    const [subMenuStack, setSubMenuStack] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        setSubMenuStack([]);
+    }, [open]);
+    const pushStack = (items) => {
+        setSubMenuStack((prev) => [items, ...prev]);
+    };
+    const popStack = () => {
+        setSubMenuStack((prev) => {
+            if (prev.length > 1) {
+                return prev.slice(1);
+            }
+            return [];
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Drawer, { separator: true, open: open, position: "bottom", size: "small", style: {
+            borderTopLeftRadius: react_components_1.tokens.borderRadiusXLarge,
+            borderTopRightRadius: react_components_1.tokens.borderRadiusXLarge,
+            height: 'unset',
+        }, onOpenChange: () => { }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DrawerBody, { style: {
+                maxHeight: '70vh',
+                padding: 0,
+                overflowY: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        paddingInline: react_components_1.tokens.spacingHorizontalM,
+                        paddingBlock: react_components_1.tokens.spacingVerticalS,
+                        boxShadow: react_components_1.tokens.shadow2,
+                        zIndex: 1,
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }, children: [subMenuStack.length ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, { size: 20 }), appearance: "subtle", onClick: popStack })) : ((0, jsx_runtime_1.jsx)("div", {})), !subMenuStack.length && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 20 }), appearance: "subtle", onClick: onClose }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        overflowY: 'auto',
+                        overflowX: 'hidden',
+                    }, children: [!subMenuStack.length && ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { hasIcons: true, style: { gap: 0 }, children: actions.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { opacity: 0.2, margin: '0px 5px' } })), group.map((item, index) => {
+                                        if (item.hidden) {
+                                            return null;
+                                        }
+                                        if (item.type === 'button') {
+                                            return ((0, jsx_runtime_1.jsx)(ButtonItem, { text: item.text, Icon: item.Icon, danger: item.danger, onClick: () => {
+                                                    onClose();
+                                                    item.onClick?.();
+                                                } }, `${groupIndex}-${index}`));
+                                        }
+                                        if (item.type === 'menu') {
+                                            return ((0, jsx_runtime_1.jsx)(NavigationMenu, { text: item.text, Icon: item.Icon, danger: item.danger, showDivider: item.items.length > 0 && !!item.onClick, showNavigateButton: item.items.length > 0, onNavigate: () => {
+                                                    pushStack(item.items);
+                                                }, onClick: () => {
+                                                    if (item.onClick) {
+                                                        onClose();
+                                                        item.onClick();
+                                                    }
+                                                    else {
+                                                        pushStack(item.items);
+                                                    }
+                                                } }, `${groupIndex}-${index}`));
+                                        }
+                                    })] }, groupIndex))) })), subMenuStack.length > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { hasIcons: true, style: { gap: 0 }, children: subMenuStack[0].map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { opacity: 0.2, margin: '0px 5px' } })), group.map((item, index) => {
+                                        if (item.hidden) {
+                                            return null;
+                                        }
+                                        return ((0, jsx_runtime_1.jsx)(NavigationMenu, { text: item.text, Icon: item.Icon, danger: item.danger, showDivider: !!item.items?.length && !!item.onClick, showNavigateButton: !!item.items?.length, onNavigate: () => {
+                                                if (!item.items?.length) {
+                                                    return;
+                                                }
+                                                pushStack(item.items);
+                                            }, onClick: () => {
+                                                if (item.onClick) {
+                                                    onClose();
+                                                    item.onClick();
+                                                }
+                                                else if (item.items?.length) {
+                                                    pushStack(item.items);
+                                                }
+                                            } }, `${groupIndex}-${index}`));
+                                    })] }, groupIndex))) }))] })] }) }));
+};
+const NavigationMenu = ({ Icon, danger, text, onClick, onNavigate, showDivider, showNavigateButton, }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
+            maxWidth: 'unset',
+            minHeight: 48,
+            alignItems: 'center',
+            paddingInline: react_components_1.tokens.spacingHorizontalM,
+        }, onClick: () => {
+            onClick?.();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { flex: 1 }, children: text }), showNavigateButton && showDivider && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.5, height: '100%' } }) })), showNavigateButton && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, { size: 20 }), onClick: (e) => {
+                        e.stopPropagation();
+                        onNavigate?.();
+                    }, appearance: "subtle" }))] }) }));
+};
+const ButtonItem = ({ Icon, danger, text, onClick }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
+            maxWidth: 'unset',
+            minHeight: 48,
+            alignItems: 'center',
+            paddingInline: react_components_1.tokens.spacingHorizontalM,
+        }, onClick: onClick, children: text }));
+};

package/Header/MobileHeaderQuickActionButton.d.ts

@@ -0,0 +1,10 @@
+import { Icon } from '@headless-adminapp/icons';
+import { FC } from 'react';
+interface MobileHeaderQuickActionButtonProps {
+    disabled?: boolean;
+    title: string;
+    Icon: Icon;
+    onClick?: () => void;
+}
+export declare const MobileHeaderQuickActionButton: FC<MobileHeaderQuickActionButtonProps>;
+export {};

package/Header/MobileHeaderQuickActionButton.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderQuickActionButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        color: 'inherit !important',
+        background: 'rgba(0, 0, 0, 0)',
+        transition: 'background 0.3s',
+        '&:hover:enabled': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.1)',
+        },
+        '&:active:enabled': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.2)',
+        },
+        '&:focus:enabled': {
+            color: 'rgba(255, 255, 255, 1)',
+            background: 'rgba(0, 0, 0, 0.2)',
+        },
+        '&:disabled': {
+            color: `${react_components_1.tokens.colorNeutralForegroundDisabled} !important`,
+        },
+    },
+});
+const MobileHeaderQuickActionButton = ({ disabled, title, Icon, onClick }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), disabled: disabled, appearance: "transparent", style: {
+            position: 'relative',
+            fontWeight: react_components_1.tokens.fontWeightRegular,
+            minWidth: 'unset',
+        }, className: styles.root, onClick: onClick, children: title }));
+};
+exports.MobileHeaderQuickActionButton = MobileHeaderQuickActionButton;

package/Insights/Header.js

@@ -35,7 +35,7 @@ const Header = () => {
                     display: 'flex',
                     alignItems: 'center',
                     gap: react_components_1.tokens.spacingHorizontalM,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: "Dashboard" }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: "Dashboard for insights" })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { color: react_components_1.tokens.colorNeutralForeground1 }, children: config.title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { color: react_components_1.tokens.colorNeutralForeground2 }, children: config.subtitle })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,

package/Insights/WidgetTableContainer.d.ts

@@ -8,7 +8,14 @@ interface WidgetTableContainerProps {
     isPending?: boolean;
     isFetching?: boolean;
     commands?: CommandItemState[][];
+    headerRightContent?: React.ReactNode;
     data: any[];
 }
 export declare const WidgetTableContainer: FC<WidgetTableContainerProps>;
+interface WidgetTableProps {
+    columns: string[];
+    attributes: Record<string, Attribute>;
+    data: any[];
+}
+export declare const WidgetTable: FC<WidgetTableProps>;
 export {};

package/Insights/WidgetTableContainer.js

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WidgetTableContainer = void 0;
+exports.WidgetTable = exports.WidgetTableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const route_1 = require("@headless-adminapp/app/route");
 const utils_1 = require("@headless-adminapp/app/utils");
 const BodyLoading_1 = require("../components/BodyLoading");
+const TableCell_1 = require("../DataGrid/TableCell");
+const TableCellChoice_1 = require("../DataGrid/TableCell/TableCellChoice");
+const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
+const useTableColumns_1 = require("../DataGrid/useTableColumns");
 const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -35,35 +41,61 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetching, commands, data, }) => {
+const WidgetTableContainer = ({ title, columns, attributes, isPending, isFetching, commands, headerRightContent, data, }) => {
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: commands, rightContent: headerRightContent }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsx)(exports.WidgetTable, { columns: columns, attributes: attributes, data: data })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
+};
+exports.WidgetTableContainer = WidgetTableContainer;
+const WidgetTable = ({ columns, attributes, data, }) => {
     const locale = (0, locale_1.useLocale)();
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: commands }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, position: 'relative', overflow: 'auto' }, children: [!isPending && ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
-                                    position: 'sticky',
-                                    top: 0,
-                                    background: react_components_1.tokens.colorNeutralBackground3,
-                                    zIndex: 2,
-                                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
-                                        position: 'sticky',
-                                        top: 0,
-                                        minWidth: 'calc(100% - 16px)',
-                                    }, children: columns.map((column, index) => {
-                                        const attribute = attributes[column];
-                                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { align: "right", className: attribute?.type === 'money'
-                                                ? styles.headerAlignRight
-                                                : '', children: attribute.label }, column + String(index)));
-                                    }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: columns.map((column) => {
-                                        const attribute = attributes[column];
-                                        const value = row[column];
-                                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ??
-                                            '';
-                                        switch (attribute?.type) {
-                                            case 'money':
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { textAlign: 'right' }, children: formattedValue }, column));
-                                            case 'lookup':
-                                                return null;
-                                        }
-                                        return (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column);
-                                    }) }, index))) })] })), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching })] })] }));
+    const router = (0, route_1.useRouter)();
+    const routeResolver = (0, route_1.useRouteResolver)();
+    const { schemaStore } = (0, metadata_1.useMetadata)();
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                    position: 'sticky',
+                    top: 0,
+                    background: react_components_1.tokens.colorNeutralBackground3,
+                    zIndex: 2,
+                }, children: (0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                        position: 'sticky',
+                        top: 0,
+                        minWidth: 'calc(100% - 16px)',
+                    }, children: columns.map((column, index) => {
+                        const attribute = attributes[column];
+                        return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { align: "right", className: attribute?.type === 'money' ? styles.headerAlignRight : '', children: attribute.label }, column + String(index)));
+                    }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: data.map((row, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { children: columns.map((column) => {
+                        const attribute = attributes[column];
+                        const value = row[column];
+                        const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ?? '';
+                        switch (attribute?.type) {
+                            case 'money':
+                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { textAlign: 'right' }, children: formattedValue }, column));
+                            case 'lookup':
+                                return (0, useTableColumns_1.renderLookupAttribute)({
+                                    column: {
+                                        id: column,
+                                        label: attribute.label,
+                                        name: column,
+                                    },
+                                    value,
+                                    attribute,
+                                    router,
+                                    routeResolver,
+                                    schemaStore,
+                                    formattedValue,
+                                    display: 'table-cell',
+                                });
+                            case 'choice':
+                                return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { value: value, attribute: attribute, formattedValue: formattedValue, display: "table-cell" }, column));
+                            case 'attachment': {
+                                const url = value?.url;
+                                if (!url) {
+                                    return (0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "" }, column);
+                                }
+                                return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, href: url, target: "_blank", display: "table-cell" }, column));
+                            }
+                        }
+                        return (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: formattedValue }, column);
+                    }) }, index))) })] }));
 };
-exports.WidgetTableContainer = WidgetTableContainer;
+exports.WidgetTable = WidgetTable;

package/Insights/WidgetTitleBar.d.ts

@@ -2,6 +2,7 @@ import { CommandItemState } from '@headless-adminapp/app/command';
 interface WidgetTitleBarProps {
     title: string;
     commands?: CommandItemState[][];
+    rightContent?: React.ReactNode;
 }
-export declare function WidgetTitleBar({ title, commands, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetTitleBar({ title, commands, rightContent, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetTitleBar.js

@@ -9,13 +9,13 @@ const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function WidgetTitleBar({ title, commands, }) {
+function WidgetTitleBar({ title, commands, rightContent, }) {
     const { language } = (0, locale_1.useLocale)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
-                    paddingInline: 16,
+                    paddingLeft: 16,
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { marginRight: -20 }, children: (0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), rightContent, !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
 }

package/PageEntityForm/CommandContainer.js

@@ -19,7 +19,7 @@ const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
 const CommandContainer = ({ skeleton }) => {
     const { language } = (0, locale_1.useLocale)();
-    const gridCommands = (0, hooks_1.useMainFormCommands)();
+    const formCommands = (0, hooks_1.useMainFormCommands)();
     const router = (0, hooks_4.useRouter)();
     const isMobile = (0, hooks_2.useIsMobile)();
     const schema = (0, hooks_1.useDataFormSchema)();
@@ -62,8 +62,8 @@ const CommandContainer = ({ skeleton }) => {
         setRecordSetVisible,
     ]);
     const extendedCommands = (0, react_1.useMemo)(() => {
-        return [...navigationCommands, ...gridCommands];
-    }, [gridCommands, navigationCommands]);
+        return [...navigationCommands, ...formCommands];
+    }, [formCommands, 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;

package/PageEntityForm/MobileHeaderRightContainer.d.ts

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

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, {});
     }