@headless-adminapp/fluent 1.4.11 → 1.4.13

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/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/DataGrid/TableCell/TableCellBase.d.ts

@@ -1,7 +1,9 @@
 import { CSSProperties, FC, MouseEventHandler, ReactNode } from 'react';
+export type CellDisplayType = 'flex' | 'table-cell';
 export interface TableCellBaseProps {
     children?: ReactNode;
     onClick?: MouseEventHandler;
     style?: CSSProperties;
+    display?: CellDisplayType;
 }
 export declare const TableCellBase: FC<TableCellBaseProps>;

package/DataGrid/TableCell/TableCellBase.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellBase = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const TableCellBase = ({ children, onClick, style, }) => {
+const TableCellBase = ({ children, onClick, style, display = 'flex', }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { onClick: onClick, style: {
-            display: 'flex',
+            display,
             alignItems: 'center',
             height: '100%',
             // borderBottom: `var(--strokeWidthThin) solid var(--colorNeutralStroke2)`,

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -1,9 +1,11 @@
 import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { CellDisplayType } from './TableCellBase';
 interface TableCellChoiceProps {
     value: unknown;
     attribute: ChoiceAttribute<string | number>;
     formattedValue: string;
-    width: number;
+    width?: number;
+    display?: CellDisplayType;
 }
 export declare function TableCellChoice(props: Readonly<TableCellChoiceProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/DataGrid/TableCell/TableCellChoice.js

@@ -12,5 +12,5 @@ function TableCellChoice(props) {
             width: props.width,
             minWidth: props.width,
             maxWidth: props.width,
-        }, children: (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }) }));
+        }, display: props.display, children: (0, jsx_runtime_1.jsx)(ChoiceBadge_1.ChoiceBadge, { attribute: props.attribute, formattedValue: props.formattedValue, value: props.value }) }));
 }

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -1,9 +1,11 @@
 import { FC } from 'react';
+import { CellDisplayType } from './TableCellBase';
 export interface TableCellLinkProps {
     value: React.ReactNode | undefined | null;
     href?: string;
     onClick?: () => void;
-    width: number;
+    width?: number;
     target?: string;
+    display?: CellDisplayType;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;

package/DataGrid/TableCell/TableCellLink.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
 const react_1 = require("react");
-exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target }) => {
+exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target, display = 'flex' }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -14,7 +14,7 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target
             width,
             minWidth: width,
             maxWidth: width,
-            display: 'flex',
+            display,
             alignItems: 'center',
             height: '100%',
         }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {

package/DataGrid/TableCell/TableCellText.d.ts

@@ -1,7 +1,9 @@
 import { FC } from 'react';
+import { CellDisplayType } from './TableCellBase';
 export interface TableCellTextProps {
     value: string;
-    width: number;
+    width?: number;
     textAlignment?: 'left' | 'center' | 'right';
+    display?: CellDisplayType;
 }
 export declare const TableCellText: FC<TableCellTextProps>;

package/DataGrid/TableCell/TableCellText.js

@@ -4,8 +4,8 @@ exports.TableCellText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TableCellBase_1 = require("./TableCellBase");
-exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment }) => {
-    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+exports.TableCellText = (0, react_1.memo)(({ value, width, textAlignment, display }) => {
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { display: display, style: {
             textAlign: textAlignment ?? 'left',
             textOverflow: 'ellipsis',
             overflow: 'hidden',

package/DataGrid/useTableColumns.d.ts

@@ -1,3 +1,10 @@
+import { TransformedViewColumn } from '@headless-adminapp/app/datagrid';
+import { InternalRouteResolver, RouterInstance } from '@headless-adminapp/app/route/context';
+import { LookupAttribute } from '@headless-adminapp/core/attributes';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { ISchemaStore } from '@headless-adminapp/core/store';
+import { CellContext } from '@tanstack/react-table';
+import { CellDisplayType } from './TableCell';
 import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
@@ -7,3 +14,14 @@ export declare function useTableColumns({ disableSelection, disableContextMenu,
     disableColumnSort?: boolean;
     tableWrapperRef: React.RefObject<HTMLDivElement>;
 }): import("@tanstack/react-table").AccessorFnColumnDef<UniqueRecord, unknown>[];
+export declare function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, display, }: {
+    value: unknown;
+    info?: CellContext<UniqueRecord, unknown>;
+    column?: TransformedViewColumn<SchemaAttributes>;
+    schemaStore: ISchemaStore;
+    routeResolver: InternalRouteResolver;
+    router: RouterInstance;
+    attribute: LookupAttribute;
+    formattedValue: string;
+    display?: CellDisplayType;
+}): import("react/jsx-runtime").JSX.Element;

package/DataGrid/useTableColumns.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTableColumns = useTableColumns;
+exports.renderLookupAttribute = renderLookupAttribute;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
@@ -218,12 +219,15 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                 cell: (info) => renderCellContent({
                     info,
                     column,
-                    schema,
+                    attributes: schema.attributes,
                     locale,
                     schemaStore,
                     routeResolver,
                     openRecord,
                     router,
+                    primaryAttributeName: schema.primaryAttribute,
+                    idAttributeName: schema.idAttribute,
+                    avatarAttributeName: schema.avatarAttribute,
                 }),
                 enableResizing: true,
                 size: columnWidths[index],
@@ -252,19 +256,19 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
 function renderCellHeaderContent({ column, props, disableColumnResize, disableColumnFilter, disableColumnSort, onChangeSortDirection, }) {
     return ((0, jsx_runtime_1.jsx)(GridColumnHeader_1.TableHeaderFilterCell, { sortDirection: props.column.getIsSorted(), minWidth: props.header.getSize(), column: column, resizable: !disableColumnResize, disableFilter: disableColumnFilter, disableSort: disableColumnSort, onChangeSortDirection: onChangeSortDirection, onResetSize: props.column.resetSize, resizeHandler: props.header.getResizeHandler(), children: column.label }, column.id));
 }
-function renderCellContent({ info, column, schema, schemaStore, locale, routeResolver, openRecord, router, }) {
+function renderCellContent({ info, column, attributes, schemaStore, locale, routeResolver, openRecord, router, primaryAttributeName, idAttributeName, avatarAttributeName, }) {
     let attribute;
     let value;
     if (column.expandedKey) {
         const lookup = column.name;
         const field = column.expandedKey;
-        const entity = schema.attributes[lookup].entity;
+        const entity = attributes[lookup].entity;
         const lookupSchema = schemaStore.getSchema(entity);
         attribute = lookupSchema.attributes[field];
         value = info.row.original.$expand?.[lookup]?.[field];
     }
     else {
-        attribute = schema.attributes[column.name];
+        attribute = attributes[column.name];
         value = info.getValue();
     }
     const formattedValue = (0, utils_1.getAttributeFormattedValue)(attribute, value, locale) ?? '';
@@ -287,15 +291,17 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
         if (!Component) {
             throw new Error(`Component with name ${column.component} not found`);
         }
-        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
+        return ((0, jsx_runtime_1.jsx)(Component, { column: column, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
     }
-    if (schema.primaryAttribute === column.name) {
+    if (idAttributeName && primaryAttributeName === column.name) {
         return renderPrimaryAttribute({
             info,
             column,
             routeResolver,
             openRecord,
-            schema,
+            attributes,
+            idAttributeName,
+            avatarAttributeName,
             value: value,
         });
     }
@@ -354,29 +360,30 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
     }
     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
 }
-function renderPrimaryAttribute({ info, column, schema, routeResolver, openRecord, value, }) {
+function renderPrimaryAttribute({ info, column, attributes, routeResolver, openRecord, value, idAttributeName, avatarAttributeName, }) {
     const path = routeResolver({
         logicalName: info.row.original.$entity,
         type: app_1.PageType.EntityForm,
-        id: info.row.original[schema.idAttribute],
+        id: info.row.original[idAttributeName],
     });
     return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [renderPrimaryAttributeAvatar({
                     info,
-                    schema,
                     value,
+                    avatarAttributeName,
+                    attributes,
                 }), value] }), width: info.column.getSize(), href: path, onClick: () => {
-            openRecord(info.row.original[schema.idAttribute], info.row.original.$entity);
+            openRecord?.(info.row.original[idAttributeName], info.row.original.$entity);
         } }, column.id));
 }
-function renderPrimaryAttributeAvatar({ info, schema, value, }) {
-    if (!schema.avatarAttribute) {
+function renderPrimaryAttributeAvatar({ info, value, avatarAttributeName, attributes, }) {
+    if (!avatarAttributeName) {
         return null;
     }
-    const avatarAttribute = schema.attributes[schema.avatarAttribute];
+    const avatarAttribute = attributes[avatarAttributeName];
     if (avatarAttribute.type !== 'attachment') {
         return null;
     }
-    const avatarValue = info.row.original[schema.avatarAttribute];
+    const avatarValue = info.row.original[avatarAttributeName];
     return ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
             width: 24,
             height: 24,
@@ -385,9 +392,9 @@ function renderPrimaryAttributeAvatar({ info, schema, value, }) {
             src: avatarValue?.url,
         } }));
 }
-function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, }) {
+function renderLookupAttribute({ value, info, column, schemaStore, routeResolver, router, attribute, formattedValue, display, }) {
     if (!value) {
-        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info?.column.getSize(), display: display }, column?.id));
     }
     const lookupSchema = schemaStore.getSchema(attribute.entity);
     const path = routeResolver({
@@ -395,15 +402,15 @@ function renderLookupAttribute({ value, info, column, schemaStore, routeResolver
         type: app_1.PageType.EntityForm,
         id: value.id,
     });
-    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
+    return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { display: display, value: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!!lookupSchema.avatarAttribute && ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { style: {
                         width: 24,
                         height: 24,
                         fontSize: react_components_1.tokens.fontSizeBase100,
                     }, name: formattedValue, color: (0, avatar_1.getAvatarColor)(formattedValue), image: {
                         src: value.avatar,
-                    } })), formattedValue] }), width: info.column.getSize(), href: path, onClick: () => {
+                    } })), formattedValue] }), width: info?.column.getSize(), href: path, onClick: () => {
             router.push(path);
-        } }, column.id));
+        } }, column?.id));
 }
 function renderRegardingAttribute({ value, info, column, schemaStore, routeResolver, router, formattedValue, }) {
     if (!value) {

package/Header/MobileHeaderCommandContainer.d.ts

@@ -0,0 +1,7 @@
+import { CommandItemState } from '@headless-adminapp/app/command';
+import { FC } from 'react';
+interface MobileHeaderCommandContainerProps {
+    commands: CommandItemState[][];
+}
+export declare const MobileHeaderCommandContainer: FC<MobileHeaderCommandContainerProps>;
+export {};