@headless-adminapp/fluent 0.0.17-alpha.8 → 1.0.1

package/App/App.d.ts

@@ -1,6 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
 interface AppProps {
-    appId: string;
 }
 export declare const App: FC<PropsWithChildren<AppProps>>;
 export {};

package/App/App.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.App = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const app_1 = require("@headless-adminapp/app/app");
-const BodyLoading_1 = require("../components/BodyLoading");
-const PageBroken_1 = require("../components/PageBroken");
 const AppUI_1 = require("./AppUI");
-const App = ({ appId, children }) => {
-    return ((0, jsx_runtime_1.jsx)(app_1.AppProvider, { appId: appId, loadingComponent: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: true }), notFoundComponent: (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "App not found" }), children: (0, jsx_runtime_1.jsx)(AppUI_1.AppUI, { children: children }) }));
+const App = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(app_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(AppUI_1.AppUI, { children: children }) }));
 };
 exports.App = App;

package/App/AppHeaderContianer.d.ts

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const AppHeaderContainer: FC;
+interface AppHeaderContainerProps {
+    onNavToggle?: () => void;
+}
+export declare const AppHeaderContainer: FC<AppHeaderContainerProps>;
+export {};

package/App/AppHeaderContianer.js

@@ -3,65 +3,82 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppHeaderContainer = 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 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 hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const route_1 = require("@headless-adminapp/app/route");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppLogo_1 = require("./AppLogo");
 const AppStringContext_1 = require("./AppStringContext");
 const QuickActionItem_1 = require("./QuickActionItem");
-const AppHeaderContainer = () => {
-    var _a, _b;
-    const { app } = (0, app_1.useAppContext)();
+const AppHeaderContainer = ({ onNavToggle, }) => {
+    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 initials = (0, react_1.useMemo)(() => {
-        return authSession === null || authSession === void 0 ? void 0 : authSession.fullName.split(' ').map((item) => item[0]).slice(0, 2).join('');
-    }, [authSession === null || authSession === void 0 ? void 0 : authSession.fullName]);
+        return authSession?.fullName
+            .split(' ')
+            .map((item) => item[0])
+            .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)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
             height: 50,
             minHeight: 50,
             background: react_components_1.tokens.colorBrandBackground,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 12,
-                    paddingLeft: 20,
-                    paddingRight: 8,
-                    cursor: 'pointer',
-                    color: 'white',
-                }, children: [(0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { children: app.title })] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+            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: {
+                            cursor: 'pointer',
+                        }, 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,
-                    paddingRight: 8,
                     display: 'flex',
                     gap: 16,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: (_a = app.quickActionItems) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
-                            var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, index));
-                        }) }), (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 === null || authSession === void 0 ? void 0 : authSession.profilePicture,
-                                    } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
+                            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 === null || authSession === void 0 ? void 0 : authSession.profilePicture,
+                                                        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 === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] }), (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: [(_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
-                                                var _a, _b;
+                                                }, 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, {}), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, index));
-                                            }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout })] })] })] })] })] }));
+                                                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(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 }))] })] })] }))] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/App/AppLogo.js

@@ -4,13 +4,24 @@ exports.AppLogo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@headless-adminapp/icons");
 const AppLogo = ({ logo, title }) => {
-    var _a;
     if (logo.Icon) {
-        const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
-        return (0, jsx_runtime_1.jsx)(Icon, { size: 24 });
+        const Icon = logo.Icon ?? icons_1.IconPlaceholder;
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 32,
+                height: 32,
+            }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 24 }) }));
     }
     if (logo.image) {
-        return ((0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 24, height: 24 } }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 32,
+                height: 32,
+            }, children: (0, jsx_runtime_1.jsx)("img", { src: logo.image, alt: title, style: { width: 32, height: 32 } }) }));
     }
     return null;
 };

package/App/AppUI.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppUI = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const react_1 = require("react");
 const AppHeaderContianer_1 = require("./AppHeaderContianer");
 const NavigationContainer_1 = require("./NavigationContainer");
 const AppUI = ({ children }) => {
-    return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, {}), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: {
+    const isMobile = (0, hooks_1.useIsMobile)();
+    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]);
+    return ((0, jsx_runtime_1.jsxs)("main", { style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(AppHeaderContianer_1.AppHeaderContainer, { onNavToggle: () => setIsNavOpen(!isNavOpen) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, overflow: 'hidden' }, children: [(0, jsx_runtime_1.jsx)(NavigationContainer_1.NavigationContainer, { open: isNavOpen, type: navType, onOpenChange: (open) => setIsNavOpen(open) }), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,

package/App/LayoutProvider.d.ts

@@ -0,0 +1,7 @@
+import { PartialTheme } from '@fluentui/react-components';
+import { LayoutProviderProps as LayoutProviderIntenralProps } from '@headless-adminapp/app/app/LayoutProvider';
+import { FC, PropsWithChildren } from 'react';
+export type LayoutProviderProps = Omit<LayoutProviderIntenralProps, 'containers'> & {
+    theme?: PartialTheme;
+};
+export declare const LayoutProvider: FC<PropsWithChildren<LayoutProviderProps>>;

package/App/LayoutProvider.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const LayoutProvider_1 = require("@headless-adminapp/app/app/LayoutProvider");
+const DialogContainer_1 = require("../DialogContainer");
+const ProgressIndicatorContainer_1 = require("../ProgressIndicatorContainer");
+const ToastNotificationContainer_1 = require("../ToastNotificationContainer");
+const LayoutProvider = ({ children, theme, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
+                DialogContainer: DialogContainer_1.DialogContainer,
+                ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
+                ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,
+            }, children: children }) }));
+};
+exports.LayoutProvider = LayoutProvider;

package/App/NavigationContainer.d.ts

@@ -1 +1,10 @@
-export declare const NavigationContainer: () => import("react/jsx-runtime").JSX.Element;
+import { DrawerProps } from '@fluentui/react-components';
+import { FC } from 'react';
+type DrawerType = Required<DrawerProps>['type'];
+interface NavigationContainerProps {
+    open: boolean;
+    type: DrawerType;
+    onOpenChange: (open: boolean) => void;
+}
+export declare const NavigationContainer: FC<NavigationContainerProps>;
+export {};

package/App/NavigationContainer.js

@@ -15,6 +15,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         overflow: 'hidden',
         display: 'flex',
         flexShrink: 0,
+        boxShadow: react_components_1.tokens.shadow4,
+        zIndex: 1,
     },
     content: {
         flex: '1',
@@ -31,33 +33,36 @@ const useStyles = (0, react_components_1.makeStyles)({
         gridRowGap: react_components_1.tokens.spacingVerticalS,
     },
 });
-const NavigationContainer = () => {
+const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
-    const { app, schemaMetadataDic } = (0, app_1.useAppContext)();
-    const [isOpen] = (0, react_1.useState)(true);
-    const [type] = (0, react_1.useState)('inline');
+    const { appExperience: app } = (0, app_1.useAppContext)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: {
+                    paddingTop: 8,
+                    // borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+                }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, (item.label ?? '') + String(index))))] }, group.label))) }, area.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;
+const Test = ({ item, onOpenChange, drawerType }) => {
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
     const router = (0, hooks_1.useRouter)();
     const pathname = (0, hooks_1.usePathname)();
     const selectedPath = pathname;
     const { language } = (0, locale_1.useLocale)();
     const isRouteActive = (0, hooks_1.useIsRouteActive)();
     const routeResolver = (0, hooks_1.useRouteResolver)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: isOpen, type: type, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
-                                var _a;
-                                const navItem = (0, utils_1.transformNavPageItem)({
-                                    item,
-                                    schemaMetadataDic: schemaMetadataDic,
-                                    language,
-                                    routeResolver,
-                                });
-                                const Icon = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
-                                const isActive = isRouteActive(selectedPath, item);
-                                return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
-                                        event.preventDefault();
-                                        router.push(navItem.link);
-                                    }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive
-                                            ? 'var(--colorNeutralForeground2BrandSelected)'
-                                            : undefined }), value: isActive ? 'active' : '', children: navItem.label }, index));
-                            })] }, group.label))) }, area.label))) }) }) }));
+    const navItem = (0, utils_1.transformNavPageItem)({
+        item,
+        schemaMetadataDic: schemaMetadataDic,
+        language,
+        routeResolver,
+    });
+    const Icon = navItem.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+    const isActive = isRouteActive(selectedPath, item);
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
+            if (drawerType === 'overlay') {
+                onOpenChange(false);
+            }
+            event.preventDefault();
+            router.push(navItem.link);
+        }, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20, filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), value: isActive ? 'active' : '', children: navItem.label }));
 };
-exports.NavigationContainer = NavigationContainer;

package/App/QuickActionItem.js

@@ -24,9 +24,9 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const QuickActionItem = ({ label, Icon, onClick, link, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), appearance: "transparent", as: "a", href: link, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            onClick?.();
         } }));
 };
 exports.QuickActionItem = QuickActionItem;

package/App/utils.js

@@ -2,16 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformNavPageItem = transformNavPageItem;
 function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
-    var _a, _b, _c, _d;
     let icon = item.icon;
-    let label = (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label;
+    let label = item.localizedLabel?.[language] ?? item.label;
     let link = routeResolver(item);
     if (item.type === 'entityview') {
-        const metadata = schemaMetadataObject === null || schemaMetadataObject === void 0 ? void 0 : schemaMetadataObject[item.logicalName];
+        const metadata = schemaMetadataObject?.[item.logicalName];
         if (metadata) {
             if (!label) {
                 label =
-                    (_d = (_c = metadata.localizedPluralLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : metadata.pluralLabel;
+                    metadata.localizedPluralLabels?.[language] ?? metadata.pluralLabel;
             }
             if (!icon) {
                 icon = metadata.icon;

package/CommandBar/Button.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandButtonProps {
     Icon: Icon;
     iconPosition?: 'before' | 'after';
@@ -8,4 +9,4 @@ export interface CommandButtonProps {
     onClick?: () => void;
     disabled?: boolean;
 }
-export declare const CommandButton: ForwardRefComponent<CommandButtonProps>;
+export declare const CommandButton: MemoExoticComponent<ForwardRefComponent<CommandButtonProps>>;

package/CommandBar/Button.js

@@ -29,8 +29,8 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
 });
 const ToolbarButtonInternal = react_components_1.ToolbarButton;
-exports.CommandButton = (0, react_1.forwardRef)(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
+exports.CommandButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandButton({ Icon, text, danger, onClick, disabled, iconPosition = 'before' }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(ToolbarButtonInternal, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, iconPosition: iconPosition, disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger), children: text }));
-});
+}));
 exports.CommandButton.displayName = 'CommandButton';

package/CommandBar/Divider.d.ts

@@ -1,2 +1,3 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
-export declare const CommandDivider: ForwardRefComponent<{}>;
+import { MemoExoticComponent } from 'react';
+export declare const CommandDivider: MemoExoticComponent<ForwardRefComponent<{}>>;

package/CommandBar/Divider.js

@@ -4,7 +4,7 @@ exports.CommandDivider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
-exports.CommandDivider = (0, react_1.forwardRef)(function CommandDivider(_, ref) {
+exports.CommandDivider = (0, react_1.memo)((0, react_1.forwardRef)(function CommandDivider(_, ref) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarDivider, { ref: ref, style: { paddingInline: react_components_1.tokens.spacingHorizontalXS } }));
-});
+}));
 exports.CommandDivider.displayName = 'CommandDivider';

package/CommandBar/IconButton.d.ts

@@ -1,9 +1,10 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandIconButtonProps {
     Icon: Icon;
     disabled?: boolean;
     onClick?: () => void;
     danger?: boolean;
 }
-export declare const CommandIconButton: ForwardRefComponent<CommandIconButtonProps>;
+export declare const CommandIconButton: MemoExoticComponent<ForwardRefComponent<CommandIconButtonProps>>;

package/CommandBar/IconButton.js

@@ -25,8 +25,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandIconButton = (0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
+exports.CommandIconButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandIconButton({ Icon, disabled, onClick, danger }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), disabled: disabled, onClick: onClick, className: (0, react_components_1.mergeClasses)(styles.root, danger && styles.danger) }));
-});
+}));
 exports.CommandIconButton.displayName = 'CommandIconButton';

package/CommandBar/Label.d.ts

@@ -1,7 +1,8 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 export interface CommandLabelProps {
     Icon?: Icon;
     text: string;
 }
-export declare const CommandLabel: ForwardRefComponent<CommandLabelProps>;
+export declare const CommandLabel: MemoExoticComponent<ForwardRefComponent<CommandLabelProps>>;

package/CommandBar/Label.js

@@ -16,8 +16,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandLabel = (0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
+exports.CommandLabel = (0, react_1.memo)((0, react_1.forwardRef)(function CommandLabel({ Icon, text }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: !!Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : undefined, className: (0, react_components_1.mergeClasses)(styles.root), children: text }));
-});
+}));
 exports.CommandLabel.displayName = 'CommandLabel';

package/CommandBar/MenuButton.d.ts

@@ -1,6 +1,7 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
 import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
 import { Icon } from '@headless-adminapp/icons';
+import { MemoExoticComponent } from 'react';
 import { MenuItemProps } from './MenuItem';
 export interface CommandMenuButtonProps {
     Icon: Icon;
@@ -10,4 +11,4 @@ export interface CommandMenuButtonProps {
     onClick?: () => void;
     items: ArrayGroupWithAtLeastOne<MenuItemProps>;
 }
-export declare const CommandMenuButton: ForwardRefComponent<CommandMenuButtonProps>;
+export declare const CommandMenuButton: MemoExoticComponent<ForwardRefComponent<CommandMenuButtonProps>>;

package/CommandBar/MenuButton.js

@@ -32,12 +32,12 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-exports.CommandMenuButton = (0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
+exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
     const styles = useStyles();
     return (
     // <div ref={ref}>
-    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
+    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
     // </div>
     );
-});
+}));
 exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const MenuList_1 = require("./MenuList");
 const useStyles = (0, react_components_1.makeStyles)({
     splitMenuRight: {
@@ -27,11 +28,11 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const MenuItem = ({ Icon, text, disabled, danger, onClick, items, }) => {
+exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
     const styles = useStyles();
-    if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    if (!items?.length) {
         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
-};
-exports.MenuItem = MenuItem;
+});
+exports.MenuItem.displayName = 'MenuItem';

package/CommandBar/MenuItems.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const MenuItem_1 = require("./MenuItem");
-const MenuItems = ({ items }) => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items === null || items === void 0 ? void 0 : items.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, index)))] }, index))) }));
-};
-exports.MenuItems = MenuItems;
+exports.MenuItems = (0, react_1.memo)(({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: items?.map((group, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), group.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { Icon: item.Icon, onClick: item.onClick, text: item.text, danger: item.danger, disabled: item.disabled, items: item.items }, (item.text ?? '') + index)))] }, index))) }));
+});
+exports.MenuItems.displayName = 'MenuItems';

package/CommandBar/MenuList.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
 const MenuItems_1 = require("./MenuItems");
-const MenuList = ({ items }) => {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !(items === null || items === void 0 ? void 0 : items.length) ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
+exports.MenuList = (0, react_1.memo)(({ items }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !items?.length ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { style: {
                 color: react_components_1.tokens.colorNeutralForegroundDisabled,
                 fontStyle: 'italic',
             }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));
-};
-exports.MenuList = MenuList;
+});
+exports.MenuList.displayName = 'MenuList';

package/CommandBar/Wrapper.d.ts

@@ -1,8 +1,8 @@
 import { ForwardRefComponent } from '@fluentui/react-components';
-import { PropsWithChildren } from 'react';
+import { MemoExoticComponent, PropsWithChildren } from 'react';
 export interface CommandBarWrapperProps {
     overflow?: 'hidden' | 'auto';
     className?: string;
     align?: 'start' | 'end';
 }
-export declare const CommandBarWrapper: ForwardRefComponent<PropsWithChildren<CommandBarWrapperProps>>;
+export declare const CommandBarWrapper: MemoExoticComponent<ForwardRefComponent<PropsWithChildren<CommandBarWrapperProps>>>;

package/CommandBar/Wrapper.js

@@ -17,8 +17,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         overflow: 'auto',
     },
 });
-exports.CommandBarWrapper = (0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
+exports.CommandBarWrapper = (0, react_1.memo)((0, react_1.forwardRef)(function CommandBarWrapper({ children, overflow, className, align = 'start' }, ref) {
     const styles = useStyles();
     return ((0, jsx_runtime_1.jsx)(react_components_1.Toolbar, { ref: ref, style: { justifyContent: 'flex-' + align }, className: (0, react_components_1.mergeClasses)(styles.root, overflow === 'hidden' ? styles.overflowHidden : styles.overflowAuto, className), children: children }));
-});
+}));
 exports.CommandBarWrapper.displayName = 'CommandBarWrapper';

package/CommandBar/index.d.ts

@@ -1,9 +1,9 @@
 declare const CommandBar: {
-    Wrapper: import("@fluentui/react-components").ForwardRefComponent<import("react").PropsWithChildren<import("./Wrapper").CommandBarWrapperProps>>;
-    Button: import("@fluentui/react-components").ForwardRefComponent<import("./Button").CommandButtonProps>;
-    MenuButton: import("@fluentui/react-components").ForwardRefComponent<import("./MenuButton").CommandMenuButtonProps>;
-    Divider: import("@fluentui/react-components").ForwardRefComponent<{}>;
-    IconButton: import("@fluentui/react-components").ForwardRefComponent<import("./IconButton").CommandIconButtonProps>;
-    Label: import("@fluentui/react-components").ForwardRefComponent<import("./Label").CommandLabelProps>;
+    Wrapper: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("react").PropsWithChildren<import("./Wrapper").CommandBarWrapperProps>>>;
+    Button: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./Button").CommandButtonProps>>;
+    MenuButton: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./MenuButton").CommandMenuButtonProps>>;
+    Divider: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<{}>>;
+    IconButton: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./IconButton").CommandIconButtonProps>>;
+    Label: import("react").MemoExoticComponent<import("@fluentui/react-components").ForwardRefComponent<import("./Label").CommandLabelProps>>;
 };
 export default CommandBar;

package/DataGrid/ActionCell.d.ts

@@ -4,5 +4,5 @@ interface ActionCellProps {
     onOpen: () => void;
     mutableState: MutableState<MenuItemCommandState[][]>;
 }
-export declare function ActionCell({ onOpen, mutableState }: ActionCellProps): import("react/jsx-runtime").JSX.Element;
+export declare const ActionCell: import("react").NamedExoticComponent<ActionCellProps>;
 export {};

package/DataGrid/ActionCell.js

@@ -1,11 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionCell = ActionCell;
+exports.ActionCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
 const TableCell_1 = require("../DataGrid/TableCell");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function ActionCell({ onOpen, mutableState }) {
+exports.ActionCell = (0, react_1.memo)(function ActionCell({ onOpen, mutableState, }) {
     const transformedCommands = (0, mutable_1.useMutableStateSelector)(mutableState, (state) => state);
-    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, 'en')) }));
-}
+    const { language } = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellAction, { onOpen: onOpen, items: transformedCommands.map((item) => (0, OverflowCommandBar_1.transformMenuItems)(item, language)) }));
+});
+exports.ActionCell.displayName = 'ActionCell';