@headless-adminapp/fluent 1.4.47 → 1.4.49

package/App/AppHeaderContianer.d.ts

@@ -3,4 +3,5 @@ interface AppHeaderContainerProps {
     onNavToggle?: () => void;
 }
 export declare const AppHeaderContainer: FC<AppHeaderContainerProps>;
+export declare const AccountAvatar: FC;
 export {};

package/App/AppHeaderContianer.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppHeaderContainer = void 0;
+exports.AccountAvatar = exports.AppHeaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const app_1 = require("@headless-adminapp/app/app");
@@ -65,13 +65,13 @@ const NavTitle = () => {
             color: 'inherit',
         }, 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 AccountAvatar = () => {
     const { appExperience: app } = (0, app_1.useAppContext)();
+    const { language } = (0, locale_1.useLocale)();
     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 [accountMenuOpen, setAccountMenuOpen] = (0, react_1.useState)(false);
     const initials = (0, react_1.useMemo)(() => {
         return authSession?.fullName
@@ -81,10 +81,50 @@ const NavActions = () => {
             .slice(0, 2)
             .join('');
     }, [authSession?.fullName]);
-    const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
     const router = (0, route_1.useRouter)();
     const basePath = (0, route_1.useBasePath)();
+    if (isSkipAuthCheck && !accountMenuItems?.length) {
+        // if auth check is skipped and there is no account menu item, we don't show the avatar and menu
+        return null;
+    }
+    const content = ((0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+            src: authSession?.profilePicture,
+        } }));
+    if (!accountMenuItems?.length) {
+        return content;
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { open: accountMenuOpen, onOpenChange: (e, data) => setAccountMenuOpen(data.open), children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: content }), (0, jsx_runtime_1.jsxs)(fluent_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)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
+                                        setAccountMenuOpen(false);
+                                        if (item.onClick) {
+                                            item.onClick();
+                                        }
+                                        else if (item.link) {
+                                            await router.push(basePath + item.link);
+                                        }
+                                    }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
+                            }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }));
+};
+exports.AccountAvatar = AccountAvatar;
+const NavActions = () => {
+    const { appExperience: app } = (0, app_1.useAppContext)();
+    const { language } = (0, locale_1.useLocale)();
+    const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             paddingLeft: 8,
             display: 'flex',
@@ -94,33 +134,7 @@ const NavActions = () => {
                         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, { open: accountMenuOpen, onOpenChange: (e, data) => setAccountMenuOpen(data.open), 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)(fluent_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)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
-                                                setAccountMenuOpen(false);
-                                                if (item.onClick) {
-                                                    item.onClick();
-                                                }
-                                                else if (item.link) {
-                                                    await router.push(basePath + item.link);
-                                                }
-                                            }, children: item.localizedLabel?.[language] ?? item.label }, item.__key));
-                                    }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] }));
+                }) }), (0, jsx_runtime_1.jsx)(exports.AccountAvatar, {})] }));
 };
 const AppDesktopHeader = ({ onNavToggle }) => {
     const isTablet = (0, hooks_2.useIsTablet)();

package/App/Navigation/NavigationContainer.js

@@ -14,6 +14,7 @@ const NavItemComponent_1 = require("./NavItemComponent");
 const NavMiniCategoryMenu_1 = require("./NavMiniCategoryMenu");
 const NavSubItemComponent_1 = require("./NavSubItemComponent");
 const utils_1 = require("./utils");
+const AppHeaderContianer_1 = require("../AppHeaderContianer");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         overflow: 'hidden',
@@ -61,14 +62,15 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsxs)(react_components_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
                 // do nothing
-            }, style: { width: isMini ? 60 : undefined }, children: [isMobile && ((0, jsx_runtime_1.jsx)(react_components_1.NavDrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+            }, style: { width: isMini ? 60 : undefined }, children: [isMobile && ((0, jsx_runtime_1.jsx)(react_components_1.NavDrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             alignItems: 'center',
+                            justifyContent: 'space-between',
                             height: 50,
                             minHeight: 50,
                             paddingInline: 12,
                             gap: 8,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { onClick: () => onOpenChange(false) }) }) })), (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
+                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { onClick: () => onOpenChange(false) }), (0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AccountAvatar, {})] }) })), (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
                         paddingTop: 8,
                         paddingBottom: 8,
                     }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_components_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {

package/DataForm/SectionControl.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 interface SectionControlWrapperProps {
     label: string;
     labelPosition?: 'top' | 'left';
+    description?: string;
     labelHidden?: boolean;
     required?: boolean;
     isError?: boolean;

package/DataForm/SectionControl.js

@@ -9,7 +9,12 @@ function SectionControlWrapper(props) {
         : props.labelPosition === 'top' && !props.labelHidden
             ? 'auto 1fr auto auto'
             : '1fr auto auto auto';
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Field, { label: props.labelHidden ? undefined : props.label, orientation: props.labelPosition === 'top' ? 'vertical' : 'horizontal', required: props.labelHidden ? undefined : props.required, validationState: props.isError ? 'error' : undefined, validationMessage: props.errorMessage, validationMessageIcon: null, style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Field, { label: props.labelHidden
+            ? undefined
+            : {
+                children: props.label,
+                title: props.description,
+            }, orientation: props.labelPosition === 'top' ? 'vertical' : 'horizontal', required: props.labelHidden ? undefined : props.required, validationState: props.isError ? 'error' : undefined, validationMessage: props.errorMessage, validationMessageIcon: null, style: {
             paddingLeft: props.labelHidden ? 0 : undefined,
             gridTemplateRows,
             flexGrow: props.grow ? 1 : undefined,

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -130,7 +130,7 @@ const Wrapper = ({ children, formHeaderDivRef, }) => {
     const tabContainerHeight = 36;
     const visible = !!rect && rect.bottom < headerHeight + tabContainerHeight;
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+        return ((0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { flexColumn: true, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                         background: react_components_1.tokens.colorNeutralBackgroundAlpha2,
                         backdropFilter: 'blur(20px)',
                         position: 'fixed',

package/PageEntityForm/SectionContainer.js

@@ -93,7 +93,7 @@ function SectionContainer({ section, skeleton, }) {
                                     control.label ??
                                     attribute.label;
                                 const labelHidden = control.labelHidden;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelHidden: labelHidden, labelPosition: isMobile ? 'top' : section.labelPosition, required: required, isError: isError, errorMessage: errorMessage, grow: control.fullHeight, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelHidden: labelHidden, labelPosition: isMobile ? 'top' : section.labelPosition, description: attribute.description, required: required, isError: isError, errorMessage: errorMessage, grow: control.fullHeight, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: (value) => {
                                             const previousValue = field.value;
                                             field.onChange(value);
                                             eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, control.attributeName, value, previousValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.47",
+  "version": "1.4.49",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/lodash": "4.17.20"
   },
-  "gitHead": "bf25872bd5633ce7bc68f6aedb5356b4890b6bde"
+  "gitHead": "bb4bc9454aebb0910a9e74be20c4342bb9b06afc"
 }