@headless-adminapp/fluent 1.0.3 → 1.1.1

package/App/AppHeaderContianer.js

@@ -33,6 +33,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
     const router = (0, route_1.useRouter)();
+    const basePath = (0, route_1.useBasePath)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -53,6 +54,9 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                     display: 'flex',
                     gap: 16,
                 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
+                            if (item.type === 'custom') {
+                                return (0, jsx_runtime_1.jsx)(item.Component, {}, item.__key);
+                            }
                             return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
                         }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { 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,
@@ -76,7 +80,7 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                                                             item.onClick();
                                                         }
                                                         else if (item.link) {
-                                                            router.push(item.link);
+                                                            router.push(basePath + 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 }))] })] })] }))] })] }));

package/App/AppUI.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppUI = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/hooks");
 const react_1 = require("react");
 const AppHeaderContianer_1 = require("./AppHeaderContianer");
-const NavigationContainer_1 = require("./NavigationContainer");
+const Navigation_1 = require("./Navigation");
 const AppUI = ({ children }) => {
     const isMobile = (0, hooks_1.useIsMobile)();
     const [isNavOpen, setIsNavOpen] = (0, react_1.useState)(!isMobile);
@@ -13,7 +14,17 @@ const AppUI = ({ children }) => {
     (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: {
+    return ((0, jsx_runtime_1.jsxs)("main", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'fixed',
+            inset: 0,
+        }, 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',
+                    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: {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,

package/App/Navigation/NavCategoryItemComponent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { NavCategoryInfo } from './types';
+interface NavCategoryItemComponentProps {
+    item: NavCategoryInfo;
+    isActive: boolean;
+}
+export declare const NavCategoryItemComponent: FC<NavCategoryItemComponentProps>;
+export {};

package/App/Navigation/NavCategoryItemComponent.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavCategoryItemComponent = 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 icons_1 = require("@headless-adminapp/icons");
+const useStyles = (0, react_components_1.makeStyles)({
+    activeNavCategoryItem: {
+        '&[aria-expanded="false"]': {
+            backgroundColor: react_components_1.tokens.colorNeutralBackground4Hover,
+        },
+    },
+});
+const NavCategoryItemComponent = ({ item, isActive, }) => {
+    const styles = useStyles();
+    const Icon = item.Icon ?? icons_1.IconPlaceholder;
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavCategoryItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), className: isActive ? styles.activeNavCategoryItem : undefined, children: item.label }));
+};
+exports.NavCategoryItemComponent = NavCategoryItemComponent;

package/App/Navigation/NavItemComponent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { NavItemInfo } from './types';
+interface NavItemComponentProps {
+    item: NavItemInfo;
+    onClick: (item: NavItemInfo) => void;
+}
+export declare const NavItemComponent: FC<NavItemComponentProps>;
+export {};

package/App/Navigation/NavItemComponent.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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) => {
+            event.preventDefault();
+            onClick(item);
+        }, style: {
+            backgroundColor: item.active
+                ? react_components_1.tokens.colorNeutralBackground4Hover
+                : 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, {}) }))] }));
+};
+exports.NavItemComponent = NavItemComponent;

package/App/Navigation/NavSubItemComponent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { NavSubItemInfo } from './types';
+interface NavSubItemComponentProps {
+    item: NavSubItemInfo;
+    onClick: (item: NavSubItemInfo) => void;
+}
+export declare const NavSubItemComponent: FC<NavSubItemComponentProps>;
+export {};

package/App/Navigation/NavSubItemComponent.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavSubItemComponent = 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 NavSubItemComponent = ({ item, onClick, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSubItem, { href: item.link, onClick: (event) => {
+            event.preventDefault();
+            onClick(item);
+        }, style: {
+            backgroundColor: item.active
+                ? react_components_1.tokens.colorNeutralBackground4Hover
+                : undefined,
+        }, value: item.active ? 'active' : '', children: item.label }));
+};
+exports.NavSubItemComponent = NavSubItemComponent;

package/App/Navigation/NavigationContainer.d.ts

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

package/App/Navigation/NavigationContainer.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationContainer = 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 locale_1 = require("@headless-adminapp/app/locale");
+const hooks_1 = require("@headless-adminapp/app/route/hooks");
+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 NavSubItemComponent_1 = require("./NavSubItemComponent");
+const utils_1 = require("./utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        overflow: 'hidden',
+        display: 'flex',
+        flexShrink: 0,
+        boxShadow: react_components_1.tokens.shadow4,
+        zIndex: 1,
+    },
+});
+const NavigationContainer = ({ open, type, onOpenChange, }) => {
+    const styles = useStyles();
+    const { appExperience: app } = (0, app_1.useAppContext)();
+    const { schemaMetadataDic } = (0, app_1.useAppContext)();
+    const router = (0, hooks_1.useRouter)();
+    const pathname = (0, hooks_1.usePathname)();
+    const { language } = (0, locale_1.useLocale)();
+    const isRouteActive = (0, hooks_1.useIsRouteActive)();
+    const routeResolver = (0, hooks_1.useRouteResolver)();
+    const sections = (0, react_1.useMemo)(() => (0, utils_1.transformNavSections)({
+        navItems: app.navItems,
+        schemaMetadataDic,
+        language,
+        routeResolver,
+        isRouteActive,
+        selectedPath: pathname,
+    }), [
+        app.navItems,
+        schemaMetadataDic,
+        language,
+        routeResolver,
+        isRouteActive,
+        pathname,
+    ]);
+    // const activeCategories = useMemo(
+    //   () =>
+    //     sections
+    //       .map((section) => section.items)
+    //       .flat()
+    //       .filter(
+    //         (item) =>
+    //           item.type === 'category' &&
+    //           item.items.some((subItem) => subItem.active)
+    //       )
+    //       .map((item) => item.key),
+    //   [sections]
+    // );
+    const handleNavigation = (item) => {
+        if (type === 'overlay') {
+            onOpenChange(false);
+        }
+        if (item.isExternal) {
+            window.open(item.link, '_blank');
+        }
+        else {
+            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: () => {
+                // do nothing
+            }, 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) => {
+                            if (item.type === app_2.PageType.Category) {
+                                const isActive = item.items.some((subItem) => subItem.active);
+                                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));
+                        })] }, section.label))) }) }) }));
+};
+exports.NavigationContainer = NavigationContainer;

package/App/Navigation/index.d.ts

@@ -0,0 +1 @@
+export { NavigationContainer } from './NavigationContainer';

package/App/Navigation/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationContainer = void 0;
+var NavigationContainer_1 = require("./NavigationContainer");
+Object.defineProperty(exports, "NavigationContainer", { enumerable: true, get: function () { return NavigationContainer_1.NavigationContainer; } });

package/App/Navigation/types.d.ts

@@ -0,0 +1,39 @@
+import { DrawerProps } from '@fluentui/react-components';
+import { NavPageSection } from '@headless-adminapp/core/experience/app';
+import { Icon } from '@headless-adminapp/icons';
+export type DrawerType = Required<DrawerProps>['type'];
+export type NavPageSectionWithKey = Omit<NavPageSection, 'items'> & {
+    key: string;
+    items: Array<NavItemInfo | NavCategoryInfo>;
+};
+export interface NavItemInfo {
+    type: 'item';
+    key: string;
+    label: string;
+    Icon: Icon;
+    link: string;
+    active: boolean;
+    isExternal: boolean;
+    RightComponent?: React.ComponentType;
+}
+export interface NavCategoryInfo {
+    type: 'category';
+    key: string;
+    label: string;
+    Icon: Icon;
+    items: NavSubItemInfo[];
+}
+export interface NavSubItemInfo {
+    type: 'subItem';
+    key: string;
+    label: string;
+    link: string;
+    active: boolean;
+    isExternal: boolean;
+}
+export interface NavPageItemTransformed {
+    label?: string;
+    Icon?: Icon;
+    link: string;
+    isExternal: boolean;
+}

package/App/Navigation/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/App/Navigation/utils.d.ts

@@ -0,0 +1,18 @@
+import { InternalIsRouteActive, InternalRouteResolver } from '@headless-adminapp/app/route/context';
+import { NavPageItem, NavPageSection } from '@headless-adminapp/core/experience/app';
+import { SchemaExperienceMetadata } from '@headless-adminapp/core/experience/schema';
+import { NavPageItemTransformed, NavPageSectionWithKey } from './types';
+export declare function transformNavSections({ navItems, schemaMetadataDic, language, routeResolver, isRouteActive, selectedPath, }: {
+    navItems: NavPageSection[];
+    schemaMetadataDic: Record<string, SchemaExperienceMetadata>;
+    language: string;
+    routeResolver: InternalRouteResolver;
+    isRouteActive: InternalIsRouteActive;
+    selectedPath: string;
+}): NavPageSectionWithKey[];
+export declare function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }: {
+    item: NavPageItem;
+    schemaMetadataDic: Record<string, SchemaExperienceMetadata>;
+    language: string;
+    routeResolver: InternalRouteResolver;
+}): NavPageItemTransformed;

package/App/Navigation/utils.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformNavSections = transformNavSections;
+exports.transformNavPageItem = transformNavPageItem;
+const app_1 = require("@headless-adminapp/core/experience/app");
+const icons_1 = require("@headless-adminapp/icons");
+function transformNavSections({ navItems, schemaMetadataDic, language, routeResolver, isRouteActive, selectedPath, }) {
+    return navItems.map((section, sectionIndex) => {
+        return {
+            ...section,
+            key: `section:${sectionIndex}`,
+            items: section.items.map((item, itemIndex) => {
+                if (item.type === app_1.PageType.Category) {
+                    return {
+                        type: 'category',
+                        key: `category:${sectionIndex}:${itemIndex}`,
+                        Icon: item.Icon ?? icons_1.IconPlaceholder,
+                        label: item.label,
+                        items: item.items.map((item, subItemIndex) => {
+                            const navItem = transformNavPageItem({
+                                item,
+                                schemaMetadataDic: schemaMetadataDic,
+                                language,
+                                routeResolver,
+                            });
+                            return {
+                                type: 'subItem',
+                                key: `item:${sectionIndex}:${itemIndex}:${subItemIndex}`,
+                                label: navItem.label,
+                                link: navItem.link,
+                                active: isRouteActive(selectedPath, item),
+                                isExternal: navItem.isExternal,
+                                RightComponent: item.RightComponent,
+                            };
+                        }),
+                    };
+                }
+                const navItem = transformNavPageItem({
+                    item,
+                    schemaMetadataDic: schemaMetadataDic,
+                    language,
+                    routeResolver,
+                });
+                const Icon = navItem.Icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
+                const isActive = isRouteActive(selectedPath, item);
+                return {
+                    type: 'item',
+                    key: `item:${sectionIndex}:${itemIndex}`,
+                    label: navItem.label,
+                    Icon: Icon,
+                    link: navItem.link,
+                    active: isActive,
+                    isExternal: navItem.isExternal,
+                    RightComponent: item.RightComponent,
+                };
+            }),
+        };
+    });
+}
+function transformNavPageItem({ item, schemaMetadataDic: schemaMetadataObject, language, routeResolver, }) {
+    let Icon = item.Icon;
+    let label = item.localizedLabel?.[language] ?? item.label;
+    let link = routeResolver(item);
+    if (item.type === 'entityview') {
+        const metadata = schemaMetadataObject?.[item.logicalName];
+        if (metadata) {
+            if (!label) {
+                label =
+                    metadata.localizedPluralLabels?.[language] ?? metadata.pluralLabel;
+            }
+            if (!Icon) {
+                Icon = metadata.Icon;
+            }
+        }
+    }
+    return {
+        label,
+        Icon,
+        link,
+        isExternal: item.type === 'external',
+    };
+}

package/App/QuickActionItem.d.ts

@@ -1,3 +1,4 @@
+import { BadgeProps } from '@fluentui/react-components';
 import { Icon } from '@headless-adminapp/icons';
 import { FC } from 'react';
 interface QuickActionItemProps {
@@ -5,6 +6,8 @@ interface QuickActionItemProps {
     Icon: Icon;
     link?: string;
     onClick?: () => void;
+    badgeCount?: number;
+    badgeColor?: BadgeProps['color'];
 }
 export declare const QuickActionItem: FC<QuickActionItemProps>;
 export {};

package/App/QuickActionItem.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.QuickActionItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const route_1 = require("@headless-adminapp/app/route");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         color: 'rgba(255, 255, 255, 1) !important',
@@ -22,11 +23,19 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const QuickActionItem = ({ label, Icon, onClick, link, }) => {
+const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor = 'informative', }) => {
     const styles = useStyles();
-    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) => {
+    const router = (0, route_1.useRouter)();
+    const basePath = (0, route_1.useBasePath)();
+    const fullLink = link ? `${basePath}${link}` : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), !!badgeCount && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: badgeColor, size: "small", children: badgeCount }))] }), appearance: "transparent", style: { position: 'relative' }, as: "a", href: fullLink, title: label, className: styles.root, onClick: (event) => {
             event.preventDefault();
-            onClick?.();
+            if (fullLink) {
+                router.push(fullLink);
+            }
+            else if (onClick) {
+                onClick();
+            }
         } }));
 };
 exports.QuickActionItem = QuickActionItem;

package/CommandBar/Button.d.ts

@@ -8,5 +8,6 @@ export interface CommandButtonProps {
     danger?: boolean;
     onClick?: () => void;
     disabled?: boolean;
+    appearance?: 'subtle' | 'colored';
 }
 export declare const CommandButton: MemoExoticComponent<ForwardRefComponent<CommandButtonProps>>;

package/CommandBar/Button.js

@@ -27,10 +27,30 @@ const useStyles = (0, react_components_1.makeStyles)({
             },
         },
     },
+    colored: {
+        '&:not(:disabled)': {
+            '& .fui-Button__icon': {
+                color: react_components_1.tokens.colorBrandForeground1,
+            },
+        },
+        '&:hover:not(:disabled)': {
+            color: react_components_1.tokens.colorBrandForeground1,
+        },
+    },
+    dangerColored: {
+        '&:not(:disabled)': {
+            '& .fui-Button__icon': {
+                color: react_components_1.tokens.colorPaletteRedForeground1,
+            },
+        },
+        '&:hover:not(:disabled)': {
+            color: react_components_1.tokens.colorPaletteRedForeground1,
+        },
+    },
 });
 const ToolbarButtonInternal = react_components_1.ToolbarButton;
-exports.CommandButton = (0, react_1.memo)((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', appearance, }, 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 }));
+    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, appearance === 'colored' && styles.colored, danger && styles.danger, appearance === 'colored' && danger && styles.dangerColored), children: text }));
 }));
 exports.CommandButton.displayName = 'CommandButton';

package/CommandBar/IconButton.d.ts

@@ -6,5 +6,6 @@ export interface CommandIconButtonProps {
     disabled?: boolean;
     onClick?: () => void;
     danger?: boolean;
+    appearance?: 'subtle' | 'colored';
 }
 export declare const CommandIconButton: MemoExoticComponent<ForwardRefComponent<CommandIconButtonProps>>;

package/CommandBar/MenuButton.d.ts

@@ -9,6 +9,7 @@ export interface CommandMenuButtonProps {
     disabled?: boolean;
     danger?: boolean;
     onClick?: () => void;
+    appearance?: 'subtle' | 'colored';
     items: ArrayGroupWithAtLeastOne<MenuItemProps>;
 }
 export declare const CommandMenuButton: MemoExoticComponent<ForwardRefComponent<CommandMenuButtonProps>>;

package/CommandBar/MenuItem.d.ts

@@ -6,6 +6,7 @@ export interface MenuItemProps {
     disabled?: boolean;
     danger?: boolean;
     onClick: (() => void) | undefined;
+    appearance?: 'subtle' | 'colored';
     items?: ArrayGroupWithAtLeastOne<MenuItemProps>;
 }
 export declare const MenuItem: React.FC<MenuItemProps>;

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -110,6 +110,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             alignItems: 'center',
             fontWeight: react_components_1.tokens.fontWeightMedium,
             // pointerEvents: disableFilter && disableSort ? 'none' : 'auto',
+            height: '100%',
         }, onClick: (event) => {
             event.preventDefault();
         }, aside: resizable ? ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandle), "data-id": "resize-handle", onClick: (event) => {
@@ -142,7 +143,8 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     if (disableFilter && disableSort) {
         return headerCell;
     }
-    return ((0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
+    const menuPosition = align === 'right' ? 'below-end' : 'below-start';
+    return ((0, jsx_runtime_1.jsxs)("th", { children: [(0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: menuPosition, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: headerCell }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: menuItems.map((x, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), x] }, i))) }) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: visible, onOpenChange: () => setVisible(false), children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: strings.filterBy }), (0, jsx_runtime_1.jsx)(FilterForm_1.FilterForm, { attribute: attribute, defaultValue: filterCondition, onApply: (condition) => {
                                     onChangeFilterCondition(condition);
                                     setVisible(false);
                                 }, onCancel: () => setVisible(false) })] }) }) })] }));

package/DataGrid/GridHeaderContainer.d.ts

@@ -1,2 +1,3 @@
 import { FC } from 'react';
 export declare const GridHeaderContainer: FC;
+export declare const GridHeaderContainerV2: FC;

package/DataGrid/GridHeaderContainer.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridHeaderContainer = void 0;
+exports.GridHeaderContainerV2 = exports.GridHeaderContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const GridHeaderDesktop_1 = require("./GridHeaderDesktop");
+const GridHeaderDesktopV2_1 = require("./GridHeaderDesktopV2");
 const GridHeaderContainer = () => {
     return (0, jsx_runtime_1.jsx)(GridHeaderDesktop_1.GridHeaderDesktop, {});
 };
 exports.GridHeaderContainer = GridHeaderContainer;
+const GridHeaderContainerV2 = () => {
+    return (0, jsx_runtime_1.jsx)(GridHeaderDesktopV2_1.GridHeaderDesktopV2, {});
+};
+exports.GridHeaderContainerV2 = GridHeaderContainerV2;

package/DataGrid/GridHeaderDesktopV2.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface GridHeaderDesktopProps {
+    headingRight?: React.ReactNode;
+}
+export declare const GridHeaderDesktopV2: FC<GridHeaderDesktopProps>;
+export {};

package/DataGrid/GridHeaderDesktopV2.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridHeaderDesktopV2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const ViewCommandBuilder_1 = require("@headless-adminapp/app/builders/CommandBuilder/ViewCommandBuilder");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const navigation_1 = require("@headless-adminapp/app/navigation");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const AppStringContext_1 = require("../App/AppStringContext");
+const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
+const CustomizeColumns_1 = require("./CustomizeColumns");
+// Exprement component
+const GridHeaderDesktopV2 = (props) => {
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
+    const [isColumnCustomizationOpen, setIsColumnCustomizationOpen] = (0, react_1.useState)(false);
+    const { language } = (0, locale_1.useLocale)();
+    const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
+    const appStrings = (0, AppStringContext_1.useAppStrings)();
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const openForm = (0, navigation_1.useOpenForm)();
+    const commandContext = (0, hooks_1.useMainGridCommandHandlerContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    alignItems: 'center',
+                    gap: 16,
+                    display: 'flex',
+                }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
+                                            fontSize: react_components_1.tokens.fontSizeBase400,
+                                            fontWeight: react_components_1.tokens.fontWeightMedium,
+                                        }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            flex: 1,
+                        } }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 8 }, children: [props.headingRight, ViewCommandBuilder_1.EnabledRules.HasAtLeastOneRecordSelected(commandContext) &&
+                                ViewCommandBuilder_1.EnabledRules.HasDeletePermission(commandContext) && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.processDeleteRecordRequest)(commandContext, {
+                                    stringSet: ViewCommandBuilder_1.ViewCommandBuilder.defaultDeleteRecordStringSet,
+                                }), style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Delete" })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
+                                    openForm({
+                                        logicalName: schema.logicalName,
+                                    });
+                                }, style: { fontWeight: react_components_1.tokens.fontWeightRegular, minWidth: 0 }, children: ["New ", schema.label.toLowerCase()] }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, { size: 24 }), onClick: () => { }, style: { fontWeight: react_components_1.tokens.fontWeightRegular } }) }), (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.EditColumns, { size: 20 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(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)(icons_1.Icons.Export, { size: 20 }), children: "Export" }) }), (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.ExportCsv, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToCSV)(commandContext), children: "Export to CSV" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ExportExcel, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToExcel)(commandContext), children: "Export to Excel" })] }) })] })] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 8 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    alignItems: 'center',
+                    // paddingInline: 8,
+                    gap: 16,
+                    display: 'flex',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "outline", placeholder: appStrings.searchPlaceholder, style: {
+                                width: 300,
+                                borderBottomColor: react_components_1.tokens.colorNeutralStroke1,
+                            }, value: searchText, onChange: (e, data) => setSearchText(data.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] })] }));
+};
+exports.GridHeaderDesktopV2 = GridHeaderDesktopV2;