@headless-adminapp/fluent 1.4.12 → 1.4.14

package/App/AppHeaderContianer.js

@@ -7,8 +7,10 @@ const react_nav_preview_1 = require("@fluentui/react-nav-preview");
 const app_1 = require("@headless-adminapp/app/app");
 const hooks_1 = require("@headless-adminapp/app/auth/hooks");
 const useIsSkipAuthCheck_1 = require("@headless-adminapp/app/auth/hooks/useIsSkipAuthCheck");
+const header_1 = require("@headless-adminapp/app/header");
 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 route_1 = require("@headless-adminapp/app/route");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
@@ -16,14 +18,48 @@ const AppLogo_1 = require("./AppLogo");
 const AppStringContext_1 = require("./AppStringContext");
 const QuickActionItem_1 = require("./QuickActionItem");
 const AppHeaderContainer = ({ onNavToggle, }) => {
+    const isMobile = (0, hooks_2.useIsMobile)();
+    if (isMobile) {
+        return (0, jsx_runtime_1.jsx)(AppMobileHeader, { onNavToggle: onNavToggle });
+    }
+    return (0, jsx_runtime_1.jsx)(AppDesktopHeader, { onNavToggle: onNavToggle });
+};
+exports.AppHeaderContainer = AppHeaderContainer;
+const NavHamburger = ({ onNavToggle }) => {
+    const isMobile = (0, hooks_2.useIsMobile)();
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: {
+            color: 'inherit',
+            width: !isMobile ? 44 : undefined,
+            maxWidth: !isMobile ? 44 : undefined,
+        }, onClick: onNavToggle }));
+};
+const NavBackButton = () => {
+    const isMobile = (0, hooks_2.useIsMobile)();
+    const router = (0, route_1.useRouter)();
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: {
+            color: 'inherit',
+            width: !isMobile ? 44 : undefined,
+            maxWidth: !isMobile ? 44 : undefined,
+        }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: () => {
+            router.back();
+        } }));
+};
+const NavTitle = () => {
+    const { appExperience: app } = (0, app_1.useAppContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            color: 'white',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: (0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] }));
+};
+const NavActions = () => {
     const { appExperience: app } = (0, app_1.useAppContext)();
     const authSession = (0, hooks_1.useAuthSession)();
     const isSkipAuthCheck = (0, useIsSkipAuthCheck_1.useIsSkipAuthCheck)();
     const logout = (0, hooks_1.useLogout)();
     const strings = (0, AppStringContext_1.useAppStrings)();
     const { language } = (0, locale_1.useLocale)();
-    const isMobile = (0, hooks_2.useIsMobile)();
-    const isTablet = (0, hooks_2.useIsTablet)();
     const initials = (0, react_1.useMemo)(() => {
         return authSession?.fullName
             .split(' ')
@@ -35,6 +71,60 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
     const router = (0, route_1.useRouter)();
     const basePath = (0, route_1.useBasePath)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            paddingLeft: 8,
+            display: 'flex',
+            gap: 16,
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
+                    if (item.type === 'custom') {
+                        return (0, jsx_runtime_1.jsx)(item.Component, {}, item.__key);
+                    }
+                    return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
+                }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+                                src: authSession?.profilePicture,
+                            } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    gap: 8,
+                                    padding: 8,
+                                    overflow: 'hidden',
+                                    width: 200,
+                                }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", image: {
+                                                src: authSession?.profilePicture,
+                                            } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            overflow: 'hidden',
+                                            flex: 1,
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
+                                        const Icon = item.icon;
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => {
+                                                if (item.onClick) {
+                                                    item.onClick();
+                                                }
+                                                else if (item.link) {
+                                                    router.push(basePath + item.link);
+                                                }
+                                            }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
+                                    }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] }));
+};
+const AppDesktopHeader = ({ onNavToggle }) => {
+    const isTablet = (0, hooks_2.useIsTablet)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            height: 50,
+            minHeight: 50,
+            background: react_components_1.tokens.colorBrandBackground,
+            paddingInline: 8,
+            gap: 8,
+            color: 'white',
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isTablet && (0, jsx_runtime_1.jsx)(NavHamburger, { onNavToggle: onNavToggle }), (0, jsx_runtime_1.jsx)(NavTitle, {})] }), (0, jsx_runtime_1.jsx)(NavActions, {})] }));
+};
+const AppMobileHeader = ({ onNavToggle }) => {
+    const showCustomHeader = (0, mutable_1.useContextSelector)(header_1.HeaderContext, (state) => state.showBackButton.length > 0);
+    const headerTitle = (0, header_1.useHeaderValue)('title');
+    const rightComponent = (0, header_1.useHeaderValue)('rightComponent');
+    const showBackButton = (0, header_1.useHeaderValue)('showBackButton');
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -43,52 +133,18 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
             background: react_components_1.tokens.colorBrandBackground,
             paddingInline: 8,
             gap: 8,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isTablet && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
-                            cursor: 'pointer',
-                            width: !isMobile ? 44 : undefined,
-                            display: 'flex',
-                            flexDirection: 'row',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                        }, onClick: onNavToggle, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.Hamburger, { style: { color: 'white' } }) })), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                            color: 'white',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: (0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                    paddingLeft: 8,
+            color: 'white',
+            zIndex: 10,
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
-                    gap: 16,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
-                            if (item.type === 'custom') {
-                                return (0, jsx_runtime_1.jsx)(item.Component, {}, item.__key);
-                            }
-                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
-                        }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
-                                        src: authSession?.profilePicture,
-                                    } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                            display: 'flex',
-                                            gap: 8,
-                                            padding: 8,
-                                            overflow: 'hidden',
-                                            width: 200,
-                                        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", image: {
-                                                        src: authSession?.profilePicture,
-                                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    overflow: 'hidden',
-                                                    flex: 1,
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
-                                                const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => {
-                                                        if (item.onClick) {
-                                                            item.onClick();
-                                                        }
-                                                        else if (item.link) {
-                                                            router.push(basePath + item.link);
-                                                        }
-                                                    }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
-                                            }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
+                    flex: 1,
+                    alignItems: 'center',
+                    gap: 8,
+                    overflow: 'hidden',
+                }, children: [showBackButton ? ((0, jsx_runtime_1.jsx)(NavBackButton, {})) : ((0, jsx_runtime_1.jsx)(NavHamburger, { onNavToggle: onNavToggle })), showCustomHeader ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof headerTitle === 'string' ? ((0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: {
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                flex: 1,
+                            }, children: headerTitle })) : (headerTitle) })) : ((0, jsx_runtime_1.jsx)(NavTitle, {}))] }), showCustomHeader ? rightComponent : (0, jsx_runtime_1.jsx)(NavActions, {})] }));
 };
-exports.AppHeaderContainer = AppHeaderContainer;

package/App/QuickActionItem.d.ts

@@ -8,6 +8,7 @@ interface QuickActionItemProps {
     onClick?: () => void;
     badgeCount?: number;
     badgeColor?: BadgeProps['color'];
+    type?: 'button' | 'icon';
 }
 export declare const QuickActionItem: FC<QuickActionItemProps>;
 export {};

package/App/QuickActionItem.js

@@ -23,12 +23,16 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor = 'informative', }) => {
+const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor = 'informative', type = 'icon', }) => {
     const styles = useStyles();
     const router = (0, route_1.useRouter)();
     const basePath = (0, route_1.useBasePath)();
     const fullLink = link ? `${basePath}${link}` : undefined;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), !!badgeCount && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: badgeColor, size: "small", children: badgeCount }))] }), appearance: "transparent", style: { position: 'relative' }, as: "a", href: fullLink, title: label, className: styles.root, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), !!badgeCount && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: badgeColor, size: "small", children: badgeCount }))] }), appearance: "transparent", style: {
+            position: 'relative',
+            fontWeight: react_components_1.tokens.fontWeightRegular,
+            minWidth: 'unset',
+        }, as: "a", href: fullLink, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
             if (fullLink) {
                 router.push(fullLink);
@@ -36,6 +40,6 @@ const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor =
             else if (onClick) {
                 onClick();
             }
-        } }));
+        }, children: type === 'button' ? label : '' }));
 };
 exports.QuickActionItem = QuickActionItem;

package/DataGrid/GridListContainer.js

@@ -6,12 +6,14 @@ const react_components_1 = require("@fluentui/react-components");
 const ScrollbarWithMoreDataRequest_1 = require("@headless-adminapp/app/components/ScrollbarWithMoreDataRequest");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/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 navigation_1 = require("@headless-adminapp/app/navigation");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
+const MobileHeaderCommandContainer_1 = require("../Header/MobileHeaderCommandContainer");
 const RecordCard_1 = require("../PageEntityForm/RecordCard");
 const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -23,12 +25,13 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const fallbackData = [];
 const GridListContainer = () => {
-    const styles = useStyles();
     const data = (0, hooks_1.useGridData)();
     const dataState = (0, hooks_1.useGridDataState)();
     const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
     const schema = (0, hooks_1.useDataGridSchema)();
     const view = (0, hooks_1.useSelectedView)();
+    const [showContextMenu, setShowContextMenu] = (0, react_1.useState)(false);
+    const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
     const tableWrapperRef = (0, react_1.useRef)(null);
     const { direction } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
@@ -57,38 +60,63 @@ const GridListContainer = () => {
             recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
         });
     }, [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: () => {
+    const isSubgrid = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.isSubGrid);
+    const contextCommands = isSubgrid
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useSubGridContextCommands)()
+        : // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, hooks_1.useMainGridContextCommands)();
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data?.records, hasMore: dataState?.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
                 fetchNextPage();
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    position: 'relative',
-                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        width: '100%',
-                        height: virtualizer.getTotalSize(),
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                            }, children: virtualItems.map((virtualRow) => {
-                                const row = rows[virtualRow.index];
-                                return ((0, jsx_runtime_1.jsxs)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, style: {
-                                        width: '100%',
-                                        position: 'absolute',
-                                        transform: `translateY(${virtualRow.start}px)`,
-                                    }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
-                                                width: '100%',
-                                                cursor: 'pointer',
-                                                borderRadius: react_components_1.tokens.borderRadiusMedium,
-                                            }, onClick: () => {
-                                                const id = row[schema.idAttribute];
-                                                openRecord(id);
-                                            }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: row, schema: schema, selected: false }) })] }, virtualRow.key));
-                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                width: '100%',
-                                position: 'absolute',
-                                transform: `translateY(${virtualSize}px)`,
-                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }) }) }));
+            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                        position: 'relative',
+                    }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            width: '100%',
+                            height: virtualizer.getTotalSize(),
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }, children: virtualItems.map((virtualRow) => {
+                                    const row = rows[virtualRow.index];
+                                    return ((0, jsx_runtime_1.jsxs)("div", { ref: virtualizer.measureElement, "data-index": virtualRow.index, style: {
+                                            width: '100%',
+                                            position: 'absolute',
+                                            transform: `translateY(${virtualRow.start}px)`,
+                                        }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)(Item, { card: view.experience.card, record: row, schema: schema, onClick: () => {
+                                                    const id = row[schema.idAttribute];
+                                                    openRecord(id);
+                                                }, onLongPress: () => {
+                                                    const id = row[schema.idAttribute];
+                                                    setSelectedIds([id]);
+                                                    setShowContextMenu(true);
+                                                }, selected: selectedIds.includes(row[schema.idAttribute]) })] }, virtualRow.key));
+                                }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    width: '100%',
+                                    position: 'absolute',
+                                    transform: `translateY(${virtualSize}px)`,
+                                }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } }), (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.BottomDrawerMenu, { open: showContextMenu, onClose: () => setShowContextMenu(false), actions: contextCommands })] }) }));
 };
 exports.GridListContainer = GridListContainer;
+const Item = ({ onClick, onLongPress, card, record, schema, selected, }) => {
+    const styles = useStyles();
+    const isLongPress = (0, react_1.useRef)(false);
+    const onLongPressInternal = () => {
+        onLongPress?.();
+        isLongPress.current = true;
+    };
+    const longPressEvent = (0, hooks_2.useLongPress)(onLongPressInternal, {
+        isPreventDefault: false,
+        delay: 500,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
+            width: '100%',
+            cursor: 'pointer',
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        }, ...longPressEvent, onClick: onClick, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: card, record: record, schema: schema, selected: selected }) }));
+};

package/DataGrid/MobileHeaderRightContainer.d.ts

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

package/DataGrid/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 datagrid_1 = require("@headless-adminapp/app/datagrid");
+const MobileHeaderCommandContainer_1 = require("../Header/MobileHeaderCommandContainer");
+const MobileHeaderRightContainer = () => {
+    const commands = (0, datagrid_1.useMainGridCommands)();
+    return (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.MobileHeaderCommandContainer, { commands: commands });
+};
+exports.MobileHeaderRightContainer = MobileHeaderRightContainer;

package/Header/MobileHeaderCommandContainer.d.ts

@@ -0,0 +1,13 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+import { FC } from 'react';
+interface MobileHeaderCommandContainerProps {
+    commands: CommandItemState[][];
+}
+export declare const MobileHeaderCommandContainer: FC<MobileHeaderCommandContainerProps>;
+interface BottomDrawerMenuProps {
+    open: boolean;
+    onClose: () => void;
+    actions: CommandItemState[][];
+}
+export declare const BottomDrawerMenu: FC<BottomDrawerMenuProps>;
+export {};

package/Header/MobileHeaderCommandContainer.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomDrawerMenu = 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)(exports.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))) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } })] }) }));
+};
+exports.BottomDrawerMenu = BottomDrawerMenu;
+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/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;