@headless-adminapp/fluent 1.1.7 → 1.1.9

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/PageCalendar/PageCalendar.js

@@ -232,5 +232,5 @@ function PageCalendar(props) {
                 gap: react_components_1.tokens.spacingVerticalM,
                 padding: react_components_1.tokens.spacingHorizontalM,
                 background: react_components_1.tokens.colorNeutralBackground2,
-            }, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { filterForm: filterForm, onCreateButtonClick: handleCreateButtonClick }), (0, jsx_runtime_1.jsx)(CalendarSection, { startDate: currentStartDate, endDate: currentEndDate, viewType: viewType, onRangeChange: onRangeChange, events: events ?? [], onEventClick: handleEventClick, onDateSelect: handleDateSelect, loading: loading })] }) }));
+            }, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { filterForm: filterForm, onCreateButtonClick: handleCreateButtonClick }), (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(CalendarSection, { startDate: currentStartDate, endDate: currentEndDate, viewType: viewType, onRangeChange: onRangeChange, events: events ?? [], onEventClick: handleEventClick, onDateSelect: handleDateSelect, loading: loading }) })] }) }));
 }

package/components/DndProvider.js

@@ -56,7 +56,7 @@ const DndProvider = ({ children }) => {
     if (!context) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(DndContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(DndProviderIntenral, { backend: context.backend, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(DndContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(DndProviderIntenral, { backend: context.backend, children: children }) }) }));
 };
 exports.DndProvider = DndProvider;
 function useDndContext() {

package/form/controls/RichTextControl.js

@@ -28,6 +28,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ReactQuill = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('react-quill'))));
 const RichTextControl = ({ value, onChange, id, onBlur, onFocus, disabled, readOnly, }) => {
-    return ((0, jsx_runtime_1.jsx)(ReactQuill, { value: value ?? '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { children: (0, jsx_runtime_1.jsx)(ReactQuill, { value: value ?? '', onChange: onChange, className: "hdlapp_rte", readOnly: disabled || readOnly, style: { maxHeight: '400px', minHeight: '200px' }, onFocus: onFocus, onBlur: onBlur, id: id }) }));
 };
 exports.RichTextControl = RichTextControl;

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.7",
+  "version": "1.1.9",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -50,5 +50,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "e5d75e8b5da3f818064090455eefd3cb27b5a2ce"
+  "gitHead": "5ee9022d0e1bc4c75ef4777a4cfbd4557ae34a99"
 }