@headless-adminapp/fluent 1.1.8 → 1.1.10

package/App/AppHeaderContianer.js

@@ -23,6 +23,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     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(' ')
@@ -42,8 +43,13 @@ 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: [isMobile && ((0, jsx_runtime_1.jsx)("div", { role: "button", style: {
+        }, 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',

package/App/AppUI.js

@@ -9,11 +9,12 @@ const AppHeaderContianer_1 = require("./AppHeaderContianer");
 const Navigation_1 = require("./Navigation");
 const AppUI = ({ children }) => {
     const isMobile = (0, hooks_1.useIsMobile)();
+    const isTablet = (0, hooks_1.useIsTablet)();
     const [isNavOpen, setIsNavOpen] = (0, react_1.useState)(!isMobile);
     const navType = (0, react_1.useMemo)(() => (isMobile ? 'overlay' : 'inline'), [isMobile]);
     (0, react_1.useEffect)(() => {
-        setIsNavOpen(!isMobile);
-    }, [isMobile]);
+        setIsNavOpen(!isTablet);
+    }, [isMobile, isTablet]);
     return ((0, jsx_runtime_1.jsxs)("main", { style: {
             display: 'flex',
             flexDirection: 'column',
@@ -24,7 +25,7 @@ const AppUI = ({ children }) => {
                     flex: 1,
                     overflow: 'hidden',
                     background: react_components_1.tokens.colorNeutralBackground1,
-                }, children: [(0, jsx_runtime_1.jsx)(Navigation_1.NavigationContainer, { open: isNavOpen, type: navType, onOpenChange: (open) => setIsNavOpen(open) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(Navigation_1.NavigationContainer, { open: isNavOpen, type: navType, isMini: !isMobile && isTablet && !isNavOpen, onOpenChange: (open) => setIsNavOpen(open) }), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,

package/App/Navigation/NavItemComponent.d.ts

@@ -3,6 +3,7 @@ import { NavItemInfo } from './types';
 interface NavItemComponentProps {
     item: NavItemInfo;
     onClick: (item: NavItemInfo) => void;
+    isMini?: boolean;
 }
 export declare const NavItemComponent: FC<NavItemComponentProps>;
 export {};

package/App/Navigation/NavItemComponent.js

@@ -4,8 +4,8 @@ exports.NavItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_nav_preview_1 = require("@fluentui/react-nav-preview");
-const NavItemComponent = ({ item, onClick, }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_nav_preview_1.NavItem, { href: item.link, onClick: (event) => {
+const NavItemComponent = ({ item, onClick, isMini, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: item.link, onClick: (event) => {
             event.preventDefault();
             onClick(item);
         }, style: {
@@ -14,6 +14,6 @@ const NavItemComponent = ({ item, onClick, }) => {
                 : undefined,
         }, icon: (0, jsx_runtime_1.jsx)(item.Icon, { size: 20, filled: item.active, color: item.active
                 ? 'var(--colorNeutralForeground2BrandSelected)'
-                : undefined }), value: item.active ? 'active' : '', children: [item.label, !!item.RightComponent && ((0, jsx_runtime_1.jsx)("span", { style: { flex: 1, justifyContent: 'flex-end', display: 'flex' }, children: (0, jsx_runtime_1.jsx)(item.RightComponent, {}) }))] }));
+                : undefined }), value: item.active ? 'active' : '', children: !isMini && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.label, !!item.RightComponent && ((0, jsx_runtime_1.jsx)("span", { style: { flex: 1, justifyContent: 'flex-end', display: 'flex' }, children: (0, jsx_runtime_1.jsx)(item.RightComponent, {}) }))] })) }));
 };
 exports.NavItemComponent = NavItemComponent;

package/App/Navigation/NavMiniCategoryMenu.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { NavCategoryInfo, NavSubItemInfo } from './types';
+interface NavMiniCategoryMenuProps {
+    item: NavCategoryInfo;
+    isActive: boolean;
+    onSelect: (item: NavSubItemInfo) => void;
+}
+export declare const NavMiniCategoryMenu: FC<NavMiniCategoryMenuProps>;
+export {};

package/App/Navigation/NavMiniCategoryMenu.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavMiniCategoryMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const NavItemComponent_1 = require("./NavItemComponent");
+const NavMiniCategoryMenu = ({ item, isActive, onSelect, }) => {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "after-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: {
+                            key: item.key,
+                            active: isActive,
+                            Icon: item.Icon,
+                            label: item.label,
+                            link: '',
+                            isExternal: false,
+                            RightComponent: undefined,
+                            type: 'item',
+                        }, onClick: () => { }, isMini: true }, item.key) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => onSelect(subItem), children: subItem.label }, subItem.key))) }) })] }));
+};
+exports.NavMiniCategoryMenu = NavMiniCategoryMenu;

package/App/Navigation/NavigationContainer.d.ts

@@ -3,6 +3,7 @@ import { DrawerType } from './types';
 interface NavigationContainerProps {
     open: boolean;
     type: DrawerType;
+    isMini: boolean;
     onOpenChange: (open: boolean) => void;
 }
 export declare const NavigationContainer: FC<NavigationContainerProps>;

package/App/Navigation/NavigationContainer.js

@@ -11,6 +11,7 @@ const app_2 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const NavCategoryItemComponent_1 = require("./NavCategoryItemComponent");
 const NavItemComponent_1 = require("./NavItemComponent");
+const NavMiniCategoryMenu_1 = require("./NavMiniCategoryMenu");
 const NavSubItemComponent_1 = require("./NavSubItemComponent");
 const utils_1 = require("./utils");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -22,7 +23,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         zIndex: 1,
     },
 });
-const NavigationContainer = ({ open, type, onOpenChange, }) => {
+const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
     const styles = useStyles();
     const { appExperience: app } = (0, app_1.useAppContext)();
     const { schemaMetadataDic } = (0, app_1.useAppContext)();
@@ -70,16 +71,19 @@ const NavigationContainer = ({ open, type, onOpenChange, }) => {
             router.push(item.link);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
                 // do nothing
-            }, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: {
+            }, style: { width: isMini ? 60 : undefined }, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: {
                     paddingTop: 8,
-                }, children: sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: section.label })), section.items.map((item) => {
+                }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_nav_preview_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) => {
                             if (item.type === app_2.PageType.Category) {
                                 const isActive = item.items.some((subItem) => subItem.active);
+                                if (isMini) {
+                                    return ((0, jsx_runtime_1.jsx)(NavMiniCategoryMenu_1.NavMiniCategoryMenu, { isActive: isActive, item: item, onSelect: handleNavigation }, item.key));
+                                }
                                 return ((0, jsx_runtime_1.jsxs)(react_nav_preview_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
                             }
-                            return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation }, item.key));
+                            return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
                         })] }, section.label))) }) }) }));
 };
 exports.NavigationContainer = NavigationContainer;

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -78,11 +78,14 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
         switch (attribute.type) {
             case 'money':
             case 'number':
-                return 'right';
+                return attribute.type === 'number' &&
+                    ['duration', 'time'].includes(attribute.format)
+                    ? 'left'
+                    : 'right';
             default:
                 return 'left';
         }
-    }, [attribute.type]);
+    }, [attribute]);
     const styles = useStyles();
     const isResizingRef = (0, react_1.useRef)(false);
     const [columnFilters, setColumnFilters] = (0, hooks_1.useGridColumnFilter)();

package/DataGrid/useTableColumns.js

@@ -306,7 +306,10 @@ function renderCellContent({ info, column, schema, schemaStore, locale, routeRes
     switch (attribute?.type) {
         case 'money':
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: "right" }, column.id));
+            return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize(), textAlignment: attribute.type === 'number' &&
+                    ['duration', 'time'].includes(attribute.format)
+                    ? 'left'
+                    : 'right' }, column.id));
         case 'lookup': {
             return renderLookupAttribute({
                 info,

package/components/DialogLogin.d.ts

@@ -1,6 +1,9 @@
 interface LoginFormProps {
     logoImageUrl?: string;
     onLogin: (username: string, password: string) => Promise<void>;
+    beforeLoginContent?: React.ReactNode;
+    afterLoginContent?: React.ReactNode;
+    subtitle?: string;
 }
-export declare function DialogLogin(props: LoginFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogLogin(props: Readonly<LoginFormProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DialogLogin.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const LoginForm_1 = require("./LoginForm");
 function DialogLogin(props) {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }) }) }) }));
 }

package/form/controls/useLookupData.js

@@ -47,21 +47,14 @@ function useLookupData({ schema, view, searchText, dataService, enabled, }) {
     const columns = (0, react_1.useMemo)(() => {
         return extractColumns(schema, view);
     }, [schema, view]);
-    const expand = (0, react_1.useMemo)(() => extractExpand(view), [view?.card?.secondaryColumns]);
+    const expand = (0, react_1.useMemo)(() => extractExpand(view), [view]);
     const queryKey = (0, react_1.useMemo)(() => getKey({
         columns,
         expand,
         schema,
         search,
         view,
-    }), [
-        columns,
-        expand,
-        schema.logicalName,
-        search,
-        view?.filter,
-        view?.defaultSorting,
-    ]);
+    }), [columns, expand, schema, search, view]);
     const { data, isFetching } = (0, react_query_1.useQuery)({
         queryKey: queryKey,
         queryFn: async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "918b655a582c5c63864e8bbe6999289ec959b917"
+  "gitHead": "3920cedff7216fb37b07dff95c50499c0f56f57c"
 }