@headless-adminapp/fluent 1.4.25 → 1.4.27

package/App/AppHeaderContianer.js

@@ -14,6 +14,8 @@ const route_1 = require("@headless-adminapp/app/route");
 const color_1 = require("@headless-adminapp/app/utils/color");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
+const FluentProvider_1 = require("../components/fluent/FluentProvider");
 const AppLogo_1 = require("./AppLogo");
 const AppStringContext_1 = require("./AppStringContext");
 const QuickActionItem_1 = require("./QuickActionItem");
@@ -36,10 +38,20 @@ const NavHamburger = ({ onNavToggle }) => {
 const NavBackButton = () => {
     const isMobile = (0, hooks_2.useIsMobile)();
     const router = (0, route_1.useRouter)();
+    const { density } = (0, FluentProvider_1.useExtendedThemeContext)();
+    let size = undefined;
+    if (isMobile) {
+        size = 44;
+    }
+    if (density === 'comfortable') {
+        size = 48;
+    }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { style: {
             color: 'inherit',
-            width: !isMobile ? 44 : undefined,
-            maxWidth: !isMobile ? 44 : undefined,
+            width: size,
+            maxWidth: size,
+            flexShrink: 0,
+            height: size,
         }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: async () => {
             await router.back();
         } }));
@@ -84,7 +96,7 @@ const NavActions = () => {
                     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, { open: accountMenuOpen, onOpenChange: (e, data) => setAccountMenuOpen(data.open), 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: {
+                            } }) }), (0, jsx_runtime_1.jsxs)(fluent_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                     display: 'flex',
                                     gap: 8,
                                     padding: 8,
@@ -99,7 +111,7 @@ const NavActions = () => {
                                             flex: 1,
                                         }, 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, { size: "inherit" }), onClick: async () => {
+                                        return ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
                                                 setAccountMenuOpen(false);
                                                 if (item.onClick) {
                                                     item.onClick();
@@ -108,7 +120,7 @@ const NavActions = () => {
                                                     await 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 }))] })] })] }))] }));
+                                    }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] }));
 };
 const AppDesktopHeader = ({ onNavToggle }) => {
     const isTablet = (0, hooks_2.useIsTablet)();
@@ -120,16 +132,21 @@ const AppDesktopHeader = ({ onNavToggle }) => {
         }
         return (0, color_1.isColorDark)(background) ? '#FFFFFF' : '#000000';
     }, [background]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            height: 50,
-            minHeight: 50,
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             background,
-            paddingInline: 8,
-            gap: 8,
-            color,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isTablet && (0, jsx_runtime_1.jsx)(NavHamburger, { onNavToggle: onNavToggle }), (0, jsx_runtime_1.jsx)(NavTitle, {})] }), (0, jsx_runtime_1.jsx)(NavActions, {})] }));
+            paddingLeft: 'env(safe-area-inset-left)',
+            paddingRight: 'env(safe-area-inset-right)',
+            paddingTop: 'env(safe-area-inset-top)',
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                height: fluent_1.extendedTokens.appBarHeight,
+                minHeight: fluent_1.extendedTokens.appBarHeight,
+                background,
+                paddingInline: 8,
+                gap: 8,
+                color,
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isTablet && (0, jsx_runtime_1.jsx)(NavHamburger, { onNavToggle: onNavToggle }), (0, jsx_runtime_1.jsx)(NavTitle, {})] }), (0, jsx_runtime_1.jsx)(NavActions, {})] }) }));
 };
 const AppMobileHeader = ({ onNavToggle }) => {
     const showCustomHeader = (0, mutable_1.useContextSelector)(header_1.HeaderContext, (state) => state.showBackButton.length > 0);
@@ -147,8 +164,8 @@ const AppMobileHeader = ({ onNavToggle }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
-            height: 50,
-            minHeight: 50,
+            height: fluent_1.extendedTokens.appBarHeight,
+            minHeight: fluent_1.extendedTokens.appBarHeight,
             background,
             paddingInline: 8,
             gap: 8,

package/App/LayoutProvider.d.ts

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

package/App/LayoutProvider.js

@@ -4,12 +4,13 @@ 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 fluent_1 = require("../components/fluent");
 const DialogContainer_1 = require("../DialogContainer");
 const ProgressIndicatorContainer_1 = require("../ProgressIndicatorContainer");
 const QuickCreateContainer_1 = require("../QuickCreateContainer");
 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.jsxs)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
+const LayoutProvider = ({ children, theme, corners, density, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, corners: corners, density: density, children: (0, jsx_runtime_1.jsxs)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
                 DialogContainer: DialogContainer_1.DialogContainer,
                 ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
                 ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,

package/App/Navigation/NavCategoryItemComponent.js

@@ -4,6 +4,7 @@ exports.NavCategoryItemComponent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
+const fluent_1 = require("../../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     activeNavCategoryItem: {
         '&[aria-expanded="false"]': {
@@ -14,6 +15,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 const NavCategoryItemComponent = ({ item, isActive, }) => {
     const styles = useStyles();
     const Icon = item.Icon ?? icons_1.IconPlaceholder;
-    return ((0, jsx_runtime_1.jsx)(react_components_1.NavCategoryItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined }), className: isActive ? styles.activeNavCategoryItem : undefined, children: item.label }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.NavCategoryItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { filled: isActive, color: isActive ? 'var(--colorNeutralForeground2BrandSelected)' : undefined, size: "1.4em" }), className: isActive ? styles.activeNavCategoryItem : undefined, style: {
+            paddingBlock: fluent_1.extendedTokens.navItempaddingVertical,
+        }, children: item.label }));
 };
 exports.NavCategoryItemComponent = NavCategoryItemComponent;

package/App/Navigation/NavItemComponent.js

@@ -3,6 +3,7 @@ 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 fluent_1 = require("../../components/fluent");
 const usePrefetch_1 = require("./usePrefetch");
 const NavItemComponent = ({ item, onClick, isMini, }) => {
     (0, usePrefetch_1.usePrefetch)(item);
@@ -13,7 +14,9 @@ const NavItemComponent = ({ item, onClick, isMini, }) => {
             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
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
+            paddingBlock: fluent_1.extendedTokens.navItempaddingVertical,
+        }, icon: (0, jsx_runtime_1.jsx)(item.Icon, { size: "1.4em", filled: item.active, color: item.active
                 ? 'var(--colorNeutralForeground2BrandSelected)'
                 : undefined }), value: item.active ? 'active' : '', children: !isMini && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.label, !!item.RightComponent && ((0, jsx_runtime_1.jsx)("span", { style: { flex: 1, justifyContent: 'flex-end', display: 'flex' }, children: (0, jsx_runtime_1.jsx)(item.RightComponent, {}) }))] })) }));
 };

package/App/Navigation/NavMiniCategoryMenu.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavMiniCategoryMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../../components/fluent");
 const NavItemComponent_1 = require("./NavItemComponent");
 const usePrefetch_1 = require("./usePrefetch");
 const NavMiniCategoryMenu = ({ item, isActive, onSelect, }) => {
@@ -15,10 +16,10 @@ const NavMiniCategoryMenu = ({ item, isActive, onSelect, }) => {
                             isExternal: false,
                             RightComponent: undefined,
                             type: 'item',
-                        }, onClick: () => { }, isMini: true }, item.key) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavMenuItem, { item: subItem, onSelect: onSelect }, subItem.key))) }) })] }));
+                        }, onClick: () => { }, isMini: true }, item.key) }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavMenuItem, { item: subItem, onSelect: onSelect }, subItem.key))) }) })] }));
 };
 exports.NavMiniCategoryMenu = NavMiniCategoryMenu;
 const NavMenuItem = ({ item, onSelect }) => {
     (0, usePrefetch_1.usePrefetch)(item);
-    return (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => onSelect(item), children: item.label });
+    return (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => onSelect(item), children: item.label });
 };

package/App/QuickActionItem.js

@@ -4,6 +4,7 @@ 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 fluent_1 = require("../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         color: 'inherit !important',
@@ -28,14 +29,14 @@ const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor =
     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: {
+    return ((0, jsx_runtime_1.jsx)(fluent_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',
             fontWeight: react_components_1.tokens.fontWeightRegular,
-            minWidth: 'unset',
-        }, as: "a", href: fullLink, title: label, "aria-label": label, className: styles.root, onClick: (event) => {
+            minWidth: type === 'button' ? 'unset' : undefined,
+        }, as: "a", href: fullLink, title: label, "aria-label": label, className: styles.root, onClick: async (event) => {
             event.preventDefault();
             if (fullLink) {
-                router.push(fullLink);
+                await router.push(fullLink);
             }
             else if (onClick) {
                 onClick();

package/CommandBar/Button.js

@@ -4,9 +4,9 @@ exports.CommandButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
-        fontWeight: 'normal',
         minWidth: 'unset',
         textWrap: 'nowrap',
         flexShrink: 0,
@@ -48,9 +48,8 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-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', 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, appearance === 'colored' && styles.colored, danger && styles.danger, appearance === 'colored' && danger && styles.dangerColored), children: text }));
+    return ((0, jsx_runtime_1.jsx)(fluent_1.ToolbarButton, { 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.js

@@ -4,6 +4,7 @@ exports.CommandIconButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         flexShrink: 0,
@@ -27,6 +28,6 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 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) }));
+    return ((0, jsx_runtime_1.jsx)(fluent_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.js

@@ -4,9 +4,9 @@ exports.CommandLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
-        fontWeight: 'normal',
         minWidth: 'unset',
         textWrap: 'nowrap',
         flexShrink: 0,
@@ -18,6 +18,6 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 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 }));
+    return ((0, jsx_runtime_1.jsx)(fluent_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.js

@@ -4,10 +4,12 @@ exports.CommandMenuButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
+const MenuPopover_1 = require("../components/fluent/MenuPopover");
 const MenuList_1 = require("./MenuList");
 const useStyles = (0, react_components_1.makeStyles)({
     splitButton: {
-        borderRadius: react_components_1.tokens.borderRadiusMedium,
+        borderRadius: fluent_1.extendedTokens.buttonBorderRadius,
         '& > button:first-child': {
             fontWeight: react_components_1.tokens.fontWeightRegular,
             paddingRight: 0,
@@ -23,6 +25,7 @@ const useStyles = (0, react_components_1.makeStyles)({
     },
     menuButton: {
         fontWeight: react_components_1.tokens.fontWeightRegular,
+        borderRadius: fluent_1.extendedTokens.buttonBorderRadius,
     },
     splitButtonDanger: {
         '&:hover:not(:has(:last-child:hover))': {
@@ -62,6 +65,6 @@ exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function C
     const styles = useStyles();
     return ((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, primaryActionButton: {
                         onClick,
-                    }, 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 }) })] }));
+                    }, 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)(MenuPopover_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 }));
 exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -4,6 +4,7 @@ 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 fluent_1 = require("../components/fluent");
 const MenuList_1 = require("./MenuList");
 const useStyles = (0, react_components_1.makeStyles)({
     splitMenuRight: {
@@ -31,8 +32,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
     const styles = useStyles();
     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.jsx)(fluent_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), onClick: onClick, 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 }) })] }));
+    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)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), onClick: onClick, children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_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)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/CommandBar/MenuList.js

@@ -4,9 +4,10 @@ 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 fluent_1 = require("../components/fluent");
 const MenuItems_1 = require("./MenuItems");
 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: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: !items?.length ? ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { style: {
                 color: react_components_1.tokens.colorNeutralForegroundDisabled,
                 fontStyle: 'italic',
             }, children: "No items" })) : ((0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { items: items })) }));

package/CommandBar/Wrapper.js

@@ -9,6 +9,7 @@ const useStyles = (0, react_components_1.makeStyles)({
         flexWrap: 'nowrap',
         minWidth: 0,
         width: '100%',
+        padding: '4px',
     },
     overflowHidden: {
         overflow: 'hidden',

package/DataGrid/CustomFilter/ColumnFilterItem.js

@@ -7,6 +7,8 @@ const datagrid_1 = require("@headless-adminapp/app/datagrid");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
+const fluent_1 = require("../../components/fluent");
+const Button_1 = require("../../components/fluent/Button");
 const TextControl_1 = require("../../form/controls/TextControl");
 const ConditionValueControl_1 = require("../GridColumnHeader/ConditionValueControl");
 const OperatorSelect_1 = require("../GridColumnHeader/OperatorSelect");
@@ -38,9 +40,9 @@ const ColumnFilterItem = ({ condition, attribute, onChange, onRemove, }) => {
             flexDirection: 'column',
             gap: react_components_1.tokens.spacingVerticalM,
             border: `1px solid ${react_components_1.tokens.colorNeutralStroke3}`,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             padding: react_components_1.tokens.spacingVerticalM,
-        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { readOnly: true, value: attribute.label }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { style: { alignSelf: 'flex-start' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 20 }), appearance: "subtle", onClick: onRemove })] }), (0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: condition.operator }), selectedOption?.controls.map((x, i) => ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: condition.value[i] ?? null, onChange: (value) => {
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: [(0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { readOnly: true, value: attribute.label }), (0, jsx_runtime_1.jsx)(Button_1.Button, { style: { alignSelf: 'flex-start' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 20 }), appearance: "subtle", onClick: onRemove })] }), (0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: condition.operator }), selectedOption?.controls.map((x, i) => ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: condition.value[i] ?? null, onChange: (value) => {
                     handleChangeValue(value, i);
                 } }, x + String(i))))] }));
 };

package/DataGrid/CustomFilter/CustomFilter.js

@@ -11,6 +11,7 @@ const constants_1 = require("@headless-adminapp/app/datagrid/column-filter/const
 const react_1 = require("react");
 const DrawerFooter_1 = require("../../components/DrawerFooter");
 const DrawerHeader_1 = require("../../components/DrawerHeader");
+const fluent_1 = require("../../components/fluent");
 const SectionControl_1 = require("../../DataForm/SectionControl");
 const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
 const utils_1 = require("../GridColumnHeader/utils");
@@ -135,5 +136,5 @@ const DrawerContent = ({ onClose }) => {
                                     if (!value)
                                         return;
                                     handleAddFilter(value);
-                                }, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: !isValid, onClick: handleApply, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Apply" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: handleCancel, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Cancel" })] })] }));
+                                }, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", disabled: !isValid, onClick: handleApply, children: "Apply" }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: handleCancel, children: "Cancel" })] })] }));
 };

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -13,6 +13,7 @@ const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const DrawerFooter_1 = require("../../components/DrawerFooter");
 const DrawerHeader_1 = require("../../components/DrawerHeader");
+const fluent_1 = require("../../components/fluent");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
     const schema = (0, hooks_1.useDataGridSchema)();
@@ -64,17 +65,16 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
     }, {});
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: strings.addColumns, showCloseButton: true, onClose: onClose, bottomContent: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                                 display: 'flex',
-                                flexDirection: 'column-reverse',
+                                flexDirection: 'column',
                                 gap: 8,
                                 marginBlock: react_components_1.tokens.spacingVerticalS,
                                 paddingInline: react_components_1.tokens.spacingHorizontalS,
-                            }, 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: selectedGroupItem?.label ?? '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
+                            }, children: [(0, jsx_runtime_1.jsx)(fluent_1.Dropdown, { value: selectedGroupItem?.label ?? '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
                                         setSelectedGroup(data.optionValue);
                                     }, style: { flex: 1, minWidth: 'unset' }, positioning: {
                                         align: 'bottom',
                                         position: 'below',
-                                    }, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.key, children: x.label }, x.key))) })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: includedColumnsObj[column.id] ?? false }), style: {
-                        fontWeight: react_components_1.tokens.fontSizeBase400,
+                                    }, children: tableItems.map((x) => ((0, jsx_runtime_1.jsx)(fluent_1.Option, { value: x.key, children: x.label }, x.key))) }), (0, jsx_runtime_1.jsx)(fluent_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.Divider, {})] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: 0 }, children: filteredColumns.map((column) => ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(fluent_1.Checkbox, { checked: includedColumnsObj[column.id] ?? false }), style: {
                         width: '100%',
                         justifyContent: 'flex-start',
                         paddingInline: react_components_1.tokens.spacingHorizontalS,
@@ -85,5 +85,5 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                         else {
                             onColumnAdd(column);
                         }
-                    }, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsx)(DrawerFooter_1.DrawerFooter, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: strings.close }) })] }));
+                    }, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsx)(DrawerFooter_1.DrawerFooter, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: onClose, children: strings.close }) })] }));
 }

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -6,6 +6,7 @@ const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const DndProvider_1 = require("../../components/DndProvider");
+const fluent_1 = require("../../components/fluent");
 exports.ItemTypes = {
     CARD: 'column',
 };
@@ -75,13 +76,13 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             paddingLeft: react_components_1.tokens.spacingHorizontalS,
             cursor: 'move',
             opacity,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
             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: () => {
+        }, "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)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), appearance: "transparent", size: "small" }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: onRemove, children: stringSet.remove }), !isFirst && ((0, jsx_runtime_1.jsx)(fluent_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: () => {
+                                    }, children: stringSet.moveUp })), !isLast && ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
                                         moveItem(index, index + 1);
                                     }, children: stringSet.moveDown }))] }) })] })] }));
 };

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -17,6 +17,7 @@ const Wrapper_1 = require("../../CommandBar/Wrapper");
 const DndProvider_1 = require("../../components/DndProvider");
 const DrawerFooter_1 = require("../../components/DrawerFooter");
 const DrawerHeader_1 = require("../../components/DrawerHeader");
+const fluent_1 = require("../../components/fluent");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const AddColumns_1 = require("./AddColumns");
 const ColumnItem_1 = require("./ColumnItem");
@@ -57,12 +58,12 @@ function CustomizeColumns({ onClose, opened }) {
                                 gap: react_components_1.tokens.spacingVerticalS,
                                 // padding: tokens.spacingHorizontalS,
                                 paddingBlock: react_components_1.tokens.spacingVerticalS,
-                            }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) })] }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                            }, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(ColumnItem_1.ColumnItem, { index: index, item: item, moveItem: moveItem, isFirst: index === 0, isLast: index === items.length - 1, onRemove: () => onColumnRemove(item), stringSet: strings }, item.id))) }) })] }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: () => {
                             setContextValue({
                                 columns: items,
                             });
                             onClose();
-                        }, appearance: "primary", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                        }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: () => {
                             onClose();
-                        }, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: strings.cancel })] })] }));
+                        }, children: strings.cancel })] })] }));
 }

package/DataGrid/FormSubgridViewSelector.js

@@ -8,6 +8,7 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const icons_1 = require("@headless-adminapp/icons");
+const fluent_1 = require("../components/fluent");
 const FormSubgridViewSelector = () => {
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
@@ -28,10 +29,10 @@ const FormSubgridViewSelector = () => {
                 gap: 16,
                 justifyContent: 'space-between',
                 display: 'flex',
-            }, 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: allowViewSelection ? (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
+            }, 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)(fluent_1.Button, { appearance: "subtle", icon: allowViewSelection ? (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}) : null, iconPosition: "after", style: {
                                 paddingInline: 8,
                                 paddingBlock: 4,
                                 pointerEvents: allowViewSelection ? 'auto' : 'none',
-                            }, 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))) }) })] }) }) }));
+                            }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }) }));
 };
 exports.FormSubgridViewSelector = FormSubgridViewSelector;

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -6,6 +6,7 @@ const react_components_1 = require("@fluentui/react-components");
 const column_filter_1 = require("@headless-adminapp/app/datagrid/column-filter");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
+const fluent_1 = require("../../components/fluent");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const ConditionValueControl_1 = require("./ConditionValueControl");
 const OperatorSelect_1 = require("./OperatorSelect");
@@ -44,7 +45,7 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
                         gap: react_components_1.tokens.spacingVerticalS,
                     }, children: [(0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: operator }), selectedOption?.controls.map((x, i) => ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: values[i] ?? null, onChange: (value) => {
                                 handleChangeValue(value, i);
-                            } }, x + String(i))))] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
+                            } }, x + String(i))))] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.DialogTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", onClick: onCancel, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { type: "submit", appearance: "primary", disabled: !isValid, onClick: () => {
                             onApply?.({
                                 operator,
                                 value: values,

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -7,6 +7,7 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
+const fluent_1 = require("../../components/fluent");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const FilterForm_1 = require("./FilterForm");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -89,8 +90,8 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
     const onChangeFilterCondition = (condition) => {
         setColumnFilters(column.id, condition);
     };
-    const sortMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection?.('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection?.('desc'), children: strings.sortByDescending })] }));
-    const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
+    const sortMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowUp, { size: 16 }), onClick: () => onChangeSortDirection?.('asc'), children: strings.sortByAscending }), (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowDown, { size: 16 }), onClick: () => onChangeSortDirection?.('desc'), children: strings.sortByDescending })] }));
+    const filterMenuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, { size: 16 }), onClick: () => setVisible(!visible), children: strings.filter }), !!filterCondition && ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.FilterDismiss, { size: 16 }), onClick: () => {
                     onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
     const menuItems = [];
@@ -143,7 +144,7 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
         return headerCell;
     }
     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) => {
+    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)(fluent_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)(fluent_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/GridHeaderDesktop.js

@@ -8,6 +8,7 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../App/AppStringContext");
+const fluent_1 = require("../components/fluent");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const CustomizeColumns_1 = require("./CustomizeColumns");
 const GridQuickFilterDesktop_1 = require("./GridQuickFilterDesktop");
@@ -35,9 +36,9 @@ const GridHeaderDesktop = (props) => {
                             gap: 16,
                             justifyContent: 'space-between',
                             display: 'flex',
-                        }, 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: {
+                        }, 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)(fluent_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.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (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), appearance: "filled-darker" })] })] }), (0, jsx_runtime_1.jsx)(GridQuickFilterDesktop_1.GridQuickFilterDesktop, {})] }));
+                                        }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: [props.headingRight, (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 24 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsx)(fluent_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), appearance: "filled-darker" })] })] }), (0, jsx_runtime_1.jsx)(GridQuickFilterDesktop_1.GridQuickFilterDesktop, {})] }));
 };
 exports.GridHeaderDesktop = GridHeaderDesktop;