@headless-adminapp/fluent 0.0.17-alpha.5 → 0.0.17-alpha.50

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,21 +3,26 @@ 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 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 AppHeaderContainer = ({ onNavToggle, }) => {
+    var _a, _b, _c;
     const { 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]);
@@ -27,25 +32,25 @@ const AppHeaderContainer = () => {
             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: {
+                        }) }), (!isSkipAuthCheck || !!((_b = app.accountMenuItems) === null || _b === void 0 ? void 0 : _b.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 === 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: {
+                                    } }) }), (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,
@@ -58,10 +63,10 @@ const AppHeaderContainer = () => {
                                                     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) => {
+                                                }, 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 })] })] })), !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: [(_c = app.accountMenuItems) === null || _c === void 0 ? void 0 : _c.map((item, index) => {
                                                 var _a, _b;
                                                 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: () => { 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));
+                                            }), !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

@@ -7,10 +7,22 @@ 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 });
+        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,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 = (_a) => {
+    var { children, theme } = _a, rest = __rest(_a, ["children", "theme"]);
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, Object.assign({}, 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

@@ -31,33 +31,34 @@ 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 { 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 }, 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 }, index)))] }, group.label))) }, area.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;
+const Test = ({ item, onOpenChange, drawerType }) => {
+    var _a, _b;
+    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 = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : 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,7 +24,7 @@ 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();
         } }));

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, {}), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, 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)) {
-        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, {}), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
+        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, {}), 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, {}), 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;
+    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.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 }) => {
+exports.MenuItems = (0, react_1.memo)(({ 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.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 }) => {
+exports.MenuList = (0, react_1.memo)(({ 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: {
                 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';

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AddColumns = AddColumns;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
@@ -26,7 +26,7 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
     const columnGroups = Object.assign({ root: {
-            label: (0, builders_1.localizedLabel)(language, schema),
+            label: (0, utils_1.localizedLabel)(language, schema),
             columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
@@ -37,9 +37,9 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
             expandedKey: nestedKey,
         })), schemaStore, language);
         acc[key] = {
-            label: (0, builders_1.localizedLabel)(language, attribute) +
+            label: (0, utils_1.localizedLabel)(language, attribute) +
                 ' (' +
-                (0, builders_1.localizedLabel)(language, lookupSchema) +
+                (0, utils_1.localizedLabel)(language, lookupSchema) +
                 ')',
             columns,
         };
@@ -64,7 +64,6 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                             gap: 8,
                             marginBottom: react_components_1.tokens.spacingVerticalXS,
                             paddingInline: react_components_1.tokens.spacingHorizontalS,
-                            width: '100%',
                         }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value) }), (0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { value: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                     setSelectedGroup(data.optionValue);
                                 }, style: { flex: 1, minWidth: 'unset' }, positioning: {

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -71,12 +71,14 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
     drag(drop(ref));
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
             background: react_components_1.tokens.colorNeutralBackground4,
-            padding: react_components_1.tokens.spacingHorizontalXS,
+            paddingBlock: react_components_1.tokens.spacingVerticalXS,
+            paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
             borderRadius: react_components_1.tokens.borderRadiusMedium,
             display: 'flex',
             flexDirection: 'row',
+            alignItems: 'center',
         }, "data-handler-id": handlerId, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { flex: 1 }, children: item.label }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         moveItem(index, index - 1);
                                     }, children: stringSet.moveUp })), !isLast && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {

package/DataGrid/CustomizeColumns/CustomizeColumns.d.ts

@@ -1,6 +1,6 @@
 interface CustomizeColumnsProps {
-    opened: boolean;
-    onClose: () => void;
+    readonly opened: boolean;
+    readonly onClose: () => void;
 }
 export declare function CustomizeColumns({ onClose, opened }: CustomizeColumnsProps): import("react/jsx-runtime").JSX.Element;
 export {};