@headless-adminapp/fluent 0.0.17-alpha.52 → 0.0.17-alpha.55

package/App/AppHeaderContianer.js

@@ -23,8 +23,12 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
     const { language } = (0, locale_1.useLocale)();
     const isMobile = (0, hooks_2.useIsMobile)();
     const initials = (0, react_1.useMemo)(() => {
-        return authSession === null || authSession === void 0 ? void 0 : authSession.fullName.split(' ').map((item) => item[0]).slice(0, 2).join('');
-    }, [authSession === null || authSession === void 0 ? void 0 : authSession.fullName]);
+        return authSession?.fullName
+            .split(' ')
+            .map((item) => item[0])
+            .slice(0, 2)
+            .join('');
+    }, [authSession?.fullName]);
     const quickActionItems = (0, hooks_2.useItemsWithKey)(app.quickActionItems);
     const accountMenuItems = (0, hooks_2.useItemsWithKey)(app.accountMenuItems);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -46,11 +50,10 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                     paddingLeft: 8,
                     display: 'flex',
                     gap: 16,
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems === null || quickActionItems === void 0 ? void 0 : quickActionItems.map((item) => {
-                            var _a, _b;
-                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label, onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, link: item.link }, item.__key));
-                        }) }), (!isSkipAuthCheck || !!(accountMenuItems === null || accountMenuItems === void 0 ? void 0 : 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 === null || authSession === void 0 ? void 0 : authSession.profilePicture,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: 8 }, children: quickActionItems?.map((item) => {
+                            return ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: item.icon, label: item.localizedLabel?.[language] ?? item.label, onClick: () => item.onClick?.(), link: item.link }, item.__key));
+                        }) }), (!isSkipAuthCheck || !!accountMenuItems?.length) && ((0, jsx_runtime_1.jsxs)(react_components_1.Popover, { children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", style: { cursor: 'pointer' }, image: {
+                                        src: authSession?.profilePicture,
                                     } }) }), (0, jsx_runtime_1.jsxs)(react_components_1.PopoverSurface, { tabIndex: -1, style: { padding: 0 }, children: [!isSkipAuthCheck && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             gap: 8,
@@ -58,16 +61,15 @@ const AppHeaderContainer = ({ onNavToggle, }) => {
                                             overflow: 'hidden',
                                             width: 200,
                                         }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Avatar, { initials: initials, color: "neutral", image: {
-                                                        src: authSession === null || authSession === void 0 ? void 0 : authSession.profilePicture,
+                                                        src: authSession?.profilePicture,
                                                     } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                                     display: 'flex',
                                                     flexDirection: 'column',
                                                     overflow: 'hidden',
                                                     flex: 1,
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession === null || authSession === void 0 ? void 0 : authSession.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession === null || authSession === void 0 ? void 0 : authSession.email })] })] })), !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 === null || accountMenuItems === void 0 ? void 0 : accountMenuItems.map((item) => {
-                                                var _a, _b;
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Caption1Strong, { children: authSession?.fullName }), (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { textOverflow: 'ellipsis', overflow: 'hidden' }, children: authSession?.email })] })] })), !isSkipAuthCheck && (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { marginInline: 0 } }), (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { style: { width: 200, marginBottom: 4 }, children: [accountMenuItems?.map((item) => {
                                                 const Icon = item.icon;
-                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => { var _a; return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); }, children: (_b = (_a = item.localizedLabel) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.label }, item.__key));
+                                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: () => item.onClick?.(), children: item.localizedLabel?.[language] ?? item.label }, item.__key));
                                             }), !isSkipAuthCheck && ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.SignOut, {}), onClick: () => logout(), children: strings.logout }))] })] })] }))] })] }));
 };
 exports.AppHeaderContainer = AppHeaderContainer;

package/App/AppLogo.js

@@ -4,9 +4,8 @@ exports.AppLogo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@headless-adminapp/icons");
 const AppLogo = ({ logo, title }) => {
-    var _a;
     if (logo.Icon) {
-        const Icon = (_a = logo.Icon) !== null && _a !== void 0 ? _a : icons_1.IconPlaceholder;
+        const Icon = logo.Icon ?? icons_1.IconPlaceholder;
         return ((0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 alignItems: 'center',

package/App/LayoutProvider.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -18,12 +7,11 @@ const LayoutProvider_1 = require("@headless-adminapp/app/app/LayoutProvider");
 const DialogContainer_1 = require("../DialogContainer");
 const ProgressIndicatorContainer_1 = require("../ProgressIndicatorContainer");
 const ToastNotificationContainer_1 = require("../ToastNotificationContainer");
-const LayoutProvider = (_a) => {
-    var { children, theme } = _a, rest = __rest(_a, ["children", "theme"]);
-    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme !== null && theme !== void 0 ? theme : react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, Object.assign({}, rest, { containers: {
+const LayoutProvider = ({ children, theme, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
                 DialogContainer: DialogContainer_1.DialogContainer,
                 ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
                 ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,
-            }, children: children })) }));
+            }, children: children }) }));
 };
 exports.LayoutProvider = LayoutProvider;

package/App/NavigationContainer.js

@@ -34,14 +34,10 @@ const useStyles = (0, react_components_1.makeStyles)({
 const NavigationContainer = ({ open, type, onOpenChange, }) => {
     const styles = useStyles();
     const { app } = (0, app_1.useAppContext)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, ((_a = item.label) !== null && _a !== void 0 ? _a : '') + String(index)));
-                            })] }, group.label))) }, area.label))) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawer, { selectedValue: "active", open: open, type: type, onOpenChange: (value, data) => onOpenChange(data.open), children: (0, jsx_runtime_1.jsx)(react_nav_preview_1.NavDrawerBody, { style: { paddingTop: 8 }, children: app.navItems.map((area) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: area.groups.map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!group.hideLabel && ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavSectionHeader, { children: group.label })), group.items.map((item, index) => ((0, jsx_runtime_1.jsx)(Test, { item: item, drawerType: type, onOpenChange: onOpenChange }, (item.label ?? '') + String(index))))] }, group.label))) }, area.label))) }) }) }));
 };
 exports.NavigationContainer = NavigationContainer;
 const Test = ({ item, onOpenChange, drawerType }) => {
-    var _a, _b;
     const { schemaMetadataDic } = (0, app_1.useAppContext)();
     const router = (0, hooks_1.useRouter)();
     const pathname = (0, hooks_1.usePathname)();
@@ -55,7 +51,7 @@ const Test = ({ item, onOpenChange, drawerType }) => {
         language,
         routeResolver,
     });
-    const Icon = (_b = (_a = navItem.icon) !== null && _a !== void 0 ? _a : icons_1.Icons.Entity) !== null && _b !== void 0 ? _b : icons_1.IconPlaceholder;
+    const Icon = navItem.icon ?? icons_1.Icons.Entity ?? icons_1.IconPlaceholder;
     const isActive = isRouteActive(selectedPath, item);
     return ((0, jsx_runtime_1.jsx)(react_nav_preview_1.NavItem, { href: navItem.link, onClick: (event) => {
             if (drawerType === 'overlay') {

package/App/QuickActionItem.js

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

package/App/utils.d.ts

@@ -8,7 +8,7 @@ export declare function transformNavPageItem({ item, schemaMetadataDic: schemaMe
     routeResolver: InternalRouteResolver;
 }): {
     label: string | undefined;
-    icon: import("@headless-adminapp/icons").Icon | undefined;
+    icon: any;
     link: string;
     isExternal: boolean;
 };

package/App/utils.js

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

package/CommandBar/MenuItem.js

@@ -30,7 +30,7 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, items }) => {
     const styles = useStyles();
-    if (!(items === null || items === void 0 ? void 0 : items.length)) {
+    if (!items?.length) {
         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
     return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));

package/CommandBar/MenuItems.js

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

package/CommandBar/MenuList.js

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

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -13,7 +13,6 @@ const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
-    var _a;
     const schema = (0, hooks_1.useDataGridSchema)();
     const { schemaStore } = (0, hooks_2.useMetadata)();
     const { language } = (0, locale_1.useLocale)();
@@ -25,26 +24,29 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
         attribute,
     }))
         .filter(({ attribute }) => attribute.type === 'lookup');
-    const columnGroups = Object.assign({ root: {
+    const columnGroups = {
+        root: {
             label: (0, utils_1.localizedLabel)(language, schema),
             columns: (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(schema.attributes).map((key) => ({
                 name: key,
             })), schemaStore, language),
-        } }, lookupAttributes.reduce((acc, { key, attribute }) => {
-        const lookupSchema = schemaStore.getSchema(attribute.entity);
-        const columns = (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
-            name: key,
-            expandedKey: nestedKey,
-        })), schemaStore, language);
-        acc[key] = {
-            label: (0, utils_1.localizedLabel)(language, attribute) +
-                ' (' +
-                (0, utils_1.localizedLabel)(language, lookupSchema) +
-                ')',
-            columns,
-        };
-        return acc;
-    }, {}));
+        },
+        ...lookupAttributes.reduce((acc, { key, attribute }) => {
+            const lookupSchema = schemaStore.getSchema(attribute.entity);
+            const columns = (0, datagrid_1.transformViewColumns)(schema.logicalName, Object.keys(lookupSchema.attributes).map((nestedKey) => ({
+                name: key,
+                expandedKey: nestedKey,
+            })), schemaStore, language);
+            acc[key] = {
+                label: (0, utils_1.localizedLabel)(language, attribute) +
+                    ' (' +
+                    (0, utils_1.localizedLabel)(language, lookupSchema) +
+                    ')',
+                columns,
+            };
+            return acc;
+        }, {}),
+    };
     const tableItems = Object.entries(columnGroups).map(([key, group]) => ({
         key,
         label: group.label,
@@ -64,27 +66,24 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                             gap: 8,
                             marginBottom: react_components_1.tokens.spacingVerticalXS,
                             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: (_a = selectedGroupItem === null || selectedGroupItem === void 0 ? void 0 : selectedGroupItem.label) !== null && _a !== void 0 ? _a : '', selectedOptions: selectedGroupItem ? [String(selectedGroupItem.key)] : [], onOptionSelect: (event, data) => {
+                        }, 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) => {
                                     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) => {
-                    var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: (_a = includedColumnsObj[column.id]) !== null && _a !== void 0 ? _a : false }), style: {
-                            fontWeight: react_components_1.tokens.fontSizeBase400,
-                            width: '100%',
-                            justifyContent: 'flex-start',
-                            paddingInline: react_components_1.tokens.spacingHorizontalS,
-                        }, onClick: () => {
-                            if (includedColumnsObj[column.id]) {
-                                onColumnRemove(column);
-                            }
-                            else {
-                                onColumnAdd(column);
-                            }
-                        }, children: column.label }, column.id));
-                }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: {
+                                }, 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,
+                        width: '100%',
+                        justifyContent: 'flex-start',
+                        paddingInline: react_components_1.tokens.spacingHorizontalS,
+                    }, onClick: () => {
+                        if (includedColumnsObj[column.id]) {
+                            onColumnRemove(column);
+                        }
+                        else {
+                            onColumnAdd(column);
+                        }
+                    }, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             padding: 8,
                             gap: 8,

package/DataGrid/CustomizeColumns/ColumnItem.js

@@ -5,14 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-const react_dnd_1 = require("react-dnd");
+const DndProvider_1 = require("../../components/DndProvider");
 exports.ItemTypes = {
     CARD: 'column',
 };
 const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSet = {}, // defaultCustomizeColumnStrings,
  }) => {
+    const { useDrag, useDrop } = (0, DndProvider_1.useDndContext)();
     const ref = (0, react_1.useRef)(null);
-    const [{ handlerId }, drop] = (0, react_dnd_1.useDrop)({
+    const [{ handlerId }, drop] = useDrop({
         accept: exports.ItemTypes.CARD,
         collect(monitor) {
             return {
@@ -20,7 +21,6 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             };
         },
         hover(item, monitor) {
-            var _a;
             if (!ref.current) {
                 return;
             }
@@ -31,7 +31,7 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
                 return;
             }
             // Determine rectangle on screen
-            const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            const hoverBoundingRect = ref.current?.getBoundingClientRect();
             // Get vertical middle
             const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
             // Determine mouse position
@@ -58,7 +58,7 @@ const ColumnItem = ({ item, index, moveItem, isFirst, isLast, onRemove, stringSe
             item.index = hoverIndex;
         },
     });
-    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)({
+    const [{ isDragging }, drag] = useDrag({
         type: exports.ItemTypes.CARD,
         item: () => {
             return { id: item.id, index };

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -12,8 +12,7 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const icons_1 = require("@headless-adminapp/icons");
 const immutability_helper_1 = __importDefault(require("immutability-helper"));
 const react_1 = require("react");
-const react_dnd_1 = require("react-dnd");
-const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const DndProvider_1 = require("../../components/DndProvider");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const AddColumns_1 = require("./AddColumns");
 const ColumnItem_1 = require("./ColumnItem");
@@ -55,7 +54,7 @@ function CustomizeColumns({ onClose, opened }) {
                                     minWidth: 'unset',
                                 }, onClick: () => setShowAddColumns(true), children: strings.add }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), style: { fontWeight: react_components_1.tokens.fontSizeBase400, minWidth: 'unset' }, disabled: !isDirty, onClick: () => {
                                     setItems(columns);
-                                }, children: strings.reset })] }), (0, jsx_runtime_1.jsx)(AddColumns_1.AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.HTML5Backend, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                }, children: strings.reset })] }), (0, jsx_runtime_1.jsx)(AddColumns_1.AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, {})] }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { paddingInline: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             width: '100%',

package/DataGrid/FormSubgridViewSelector.js

@@ -9,7 +9,6 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const icons_1 = require("@headless-adminapp/icons");
 const FormSubgridViewSelector = () => {
-    var _a, _b;
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
     const changeView = (0, hooks_1.useChangeView)();
@@ -33,9 +32,6 @@ const FormSubgridViewSelector = () => {
                                 paddingInline: 8,
                                 paddingBlock: 4,
                                 pointerEvents: allowViewSelection ? 'auto' : 'none',
-                            }, children: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : 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) => {
-                                var _a, _b;
-                                return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : view.name }, view.id));
-                            }) }) })] }) }) }));
+                            }, 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))) }) })] }) }) }));
 };
 exports.FormSubgridViewSelector = FormSubgridViewSelector;

package/DataGrid/GridColumnHeader/ConditionValueControl.js

@@ -9,28 +9,27 @@ const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
 const FormControl_1 = __importDefault(require("../../form/FormControl"));
 function ConditionValueControl({ attribute, type, value, onChange, }) {
-    var _a, _b, _c, _d;
     const dataService = (0, transport_1.useDataService)();
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     switch (type) {
         case 'string':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "text", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "text", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'number':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "number", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "number", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'money':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "currency", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "currency", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'lookup':
             if (attribute.type !== 'lookup') {
                 return null;
             }
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value !== null && value !== void 0 ? value : []);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "lookups", async: true, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, value: value ?? null, onChange: (value) => {
+                    onChange?.(value ?? []);
                 } }));
         // return (
         //   <FormControl
@@ -46,8 +45,8 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
         //   />
         // );
         case 'date':
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "date", value: value !== null && value !== void 0 ? value : null, onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "date", value: value ?? null, onChange: (value) => {
+                    onChange?.(value);
                 } }));
         case 'boolean':
             if (attribute.type !== 'boolean') {
@@ -55,16 +54,15 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
             }
             return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: [
                     {
-                        label: (_a = attribute.trueLabel) !== null && _a !== void 0 ? _a : 'Yes',
+                        label: attribute.trueLabel ?? 'Yes',
                         value: 'true',
                     },
                     {
-                        label: (_b = attribute.falseLabel) !== null && _b !== void 0 ? _b : 'No',
+                        label: attribute.falseLabel ?? 'No',
                         value: 'false',
                     },
-                ], value: (_c = value === null || value === void 0 ? void 0 : value.map((x) => (x === true ? 'true' : 'false'))) !== null && _c !== void 0 ? _c : [], onChange: (value) => {
-                    var _a;
-                    onChange === null || onChange === void 0 ? void 0 : onChange((_a = value === null || value === void 0 ? void 0 : value.map((x) => x === 'true')) !== null && _a !== void 0 ? _a : []);
+                ], value: value?.map((x) => (x === true ? 'true' : 'false')) ?? [], onChange: (value) => {
+                    onChange?.(value?.map((x) => x === 'true') ?? []);
                 } }));
         case 'choice':
         case 'choices':
@@ -73,15 +71,11 @@ function ConditionValueControl({ attribute, type, value, onChange, }) {
             }
             const isNumeric = 'number' in attribute && attribute.number === true;
             // const isString = 'string' in attribute && attribute.string === true;
-            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: attribute.options.map((x) => {
-                    var _a;
-                    return ({
-                        label: x.label,
-                        value: isNumeric ? (_a = x.value) === null || _a === void 0 ? void 0 : _a.toString() : x.value,
-                    });
-                }), value: (_d = value === null || value === void 0 ? void 0 : value.map((x) => (isNumeric ? x.toString() : x))) !== null && _d !== void 0 ? _d : [], onChange: (value) => {
-                    var _a;
-                    onChange === null || onChange === void 0 ? void 0 : onChange((_a = value === null || value === void 0 ? void 0 : value.map((x) => (isNumeric ? +x : x))) !== null && _a !== void 0 ? _a : []);
+            return ((0, jsx_runtime_1.jsx)(FormControl_1.default, { type: "multi-select", options: attribute.options.map((x) => ({
+                    label: x.label,
+                    value: isNumeric ? x.value?.toString() : x.value,
+                })), value: value?.map((x) => (isNumeric ? x.toString() : x)) ?? [], onChange: (value) => {
+                    onChange?.(value?.map((x) => (isNumeric ? +x : x)) ?? []);
                 } }));
         default:
             return null;

package/DataGrid/GridColumnHeader/FilterForm.js

@@ -11,7 +11,7 @@ const ConditionValueControl_1 = require("./ConditionValueControl");
 const OperatorSelect_1 = require("./OperatorSelect");
 const utils_1 = require("./utils");
 const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
-    const [operator, setOperator] = (0, react_1.useState)((0, utils_1.getDefaultOperator)(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.operator, attribute.type));
+    const [operator, setOperator] = (0, react_1.useState)((0, utils_1.getDefaultOperator)(defaultValue?.operator, attribute.type));
     const strings = (0, PageEntityViewStringContext_1.usePageEntityViewStrings)();
     const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
     const operatorOptions = (0, react_1.useMemo)(() => {
@@ -20,7 +20,7 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
     const selectedOption = (0, react_1.useMemo)(() => {
         return operatorOptions[attribute.type].find((option) => option.value === operator);
     }, [operator, attribute.type, operatorOptions]);
-    const [values, setValues] = (0, react_1.useState)((0, utils_1.getDefaultValues)(selectedOption, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value, attribute.type));
+    const [values, setValues] = (0, react_1.useState)((0, utils_1.getDefaultValues)(selectedOption, defaultValue?.value, attribute.type));
     const handleChangeOperator = (operator) => {
         setOperator(operator);
         setValues([]);
@@ -42,13 +42,10 @@ const FilterForm = ({ defaultValue, attribute, onApply, onCancel, }) => {
                         display: 'flex',
                         flexDirection: 'column',
                         gap: react_components_1.tokens.spacingVerticalS,
-                    }, children: [(0, jsx_runtime_1.jsx)(OperatorSelect_1.OperatorSelect, { attribute: attribute, onChange: (value) => handleChangeOperator(value), value: operator }), selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.controls.map((x, i) => {
-                            var _a;
-                            return ((0, jsx_runtime_1.jsx)(ConditionValueControl_1.ConditionValueControl, { type: x, attribute: attribute, value: (_a = values[i]) !== null && _a !== void 0 ? _a : 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: () => {
-                            onApply === null || onApply === void 0 ? void 0 : onApply({
+                    }, 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: () => {
+                            onApply?.({
                                 operator,
                                 value: values,
                             });

package/DataGrid/GridColumnHeader/OperatorSelect.js

@@ -24,5 +24,5 @@ function OperatorSelect({ attribute, value, onChange, }) {
         }
         return operators;
     }, [attribute.type, operatorOptions, dataService]);
-    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange === null || onChange === void 0 ? void 0 : onChange(value), value: value }));
+    return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { options: options, onChange: (value) => onChange?.(value), value: value }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -90,7 +90,7 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
     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 === null || onChangeSortDirection === void 0 ? void 0 : 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 === null || onChangeSortDirection === void 0 ? void 0 : onChangeSortDirection('desc'), children: strings.sortByDescending })] }));
+    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: () => {
                     onChangeFilterCondition(undefined);
                 }, children: strings.clearFilter }))] }));
@@ -118,18 +118,18 @@ column, onResetSize, resizeHandler, resizable, disableFilter, disableSort, }) =>
             }, onDoubleClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                onResetSize === null || onResetSize === void 0 ? void 0 : onResetSize();
+                onResetSize?.();
             }, onMouseDown: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+                resizeHandler?.(event);
             }, onMouseUp: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
             }, onTouchStart: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
-                resizeHandler === null || resizeHandler === void 0 ? void 0 : resizeHandler(event);
+                resizeHandler?.(event);
             }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.resizeHandleInner) }) })) : null, onMouseUp: (event) => {
             event.preventDefault();
             if (isResizingRef.current) {

package/DataGrid/GridHeaderDesktop.js

@@ -11,7 +11,6 @@ const AppStringContext_1 = require("../App/AppStringContext");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const CustomizeColumns_1 = require("./CustomizeColumns");
 const GridHeaderDesktop = (props) => {
-    var _a, _b;
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
     const selectedView = (0, hooks_1.useSelectedView)();
     const changeView = (0, hooks_1.useChangeView)();
@@ -34,9 +33,6 @@ const GridHeaderDesktop = (props) => {
                 }, 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: (_b = (_a = selectedView.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : 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) => {
-                                    var _a, _b;
-                                    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: (_b = (_a = view.localizedNames) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : 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" })] })] }));
+                                }, 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" })] })] }));
 };
 exports.GridHeaderDesktop = GridHeaderDesktop;