@headless-adminapp/fluent 1.4.19 → 1.4.21

package/App/AppHeaderContianer.js

@@ -40,8 +40,8 @@ const NavBackButton = () => {
             color: 'inherit',
             width: !isMobile ? 44 : undefined,
             maxWidth: !isMobile ? 44 : undefined,
-        }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: () => {
-            router.back();
+        }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ArrowLeft, {}), onClick: async () => {
+            await router.back();
         } }));
 };
 const NavTitle = () => {
@@ -98,12 +98,12 @@ 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: () => {
+                                        return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), onClick: async () => {
                                                 if (item.onClick) {
                                                     item.onClick();
                                                 }
                                                 else if (item.link) {
-                                                    router.push(basePath + item.link);
+                                                    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 }))] })] })] }))] }));

package/App/Navigation/NavigationContainer.js

@@ -4,8 +4,9 @@ exports.NavigationContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const app_1 = require("@headless-adminapp/app/app");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
-const hooks_1 = require("@headless-adminapp/app/route/hooks");
+const hooks_2 = require("@headless-adminapp/app/route/hooks");
 const app_2 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const NavCategoryItemComponent_1 = require("./NavCategoryItemComponent");
@@ -26,11 +27,12 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
     const styles = useStyles();
     const { appExperience: app } = (0, app_1.useAppContext)();
     const { schemaMetadataDic } = (0, app_1.useAppContext)();
-    const router = (0, hooks_1.useRouter)();
-    const pathname = (0, hooks_1.usePathname)();
+    const isMobile = (0, hooks_1.useIsMobile)();
+    const router = (0, hooks_2.useRouter)();
+    const pathname = (0, hooks_2.usePathname)();
     const { language } = (0, locale_1.useLocale)();
-    const isRouteActive = (0, hooks_1.useIsRouteActive)();
-    const routeResolver = (0, hooks_1.useRouteResolver)();
+    const isRouteActive = (0, hooks_2.useIsRouteActive)();
+    const routeResolver = (0, hooks_2.useRouteResolver)();
     const sections = (0, react_1.useMemo)(() => (0, utils_1.transformNavSections)({
         navItems: app.navItems,
         schemaMetadataDic,
@@ -46,7 +48,7 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
         isRouteActive,
         pathname,
     ]);
-    const handleNavigation = (item) => {
+    const handleNavigation = async (item) => {
         if (type === 'overlay') {
             onOpenChange(false);
         }
@@ -54,22 +56,29 @@ const NavigationContainer = ({ open, type, onOpenChange, isMini, }) => {
             window.open(item.link, '_blank');
         }
         else {
-            router.push(item.link);
+            await router.push(item.link);
         }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsx)(react_components_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles.root, children: (0, jsx_runtime_1.jsxs)(react_components_1.NavDrawer, { selectedValue: "active", selectedCategoryValue: "active", defaultOpenCategories: ['active'], open: open || isMini, type: type, onOpenChange: (_value, data) => onOpenChange(data.open), onNavItemSelect: () => {
                 // do nothing
-            }, style: { width: isMini ? 60 : undefined }, children: (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
-                    paddingTop: 8,
-                }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_components_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {
-                            if (item.type === app_2.PageType.Category) {
-                                const isActive = item.items.some((subItem) => subItem.active);
-                                if (isMini) {
-                                    return ((0, jsx_runtime_1.jsx)(NavMiniCategoryMenu_1.NavMiniCategoryMenu, { isActive: isActive, item: item, onSelect: handleNavigation }, item.key));
+            }, style: { width: isMini ? 60 : undefined }, children: [isMobile && ((0, jsx_runtime_1.jsx)(react_components_1.NavDrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            height: 50,
+                            minHeight: 50,
+                            paddingInline: 12,
+                            gap: 8,
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Hamburger, { onClick: () => onOpenChange(false) }) }) })), (0, jsx_runtime_1.jsx)(react_components_1.NavDrawerBody, { style: {
+                        paddingTop: 8,
+                    }, children: sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [!section.hideLabel && !isMini && ((0, jsx_runtime_1.jsx)(react_components_1.NavSectionHeader, { children: section.label })), isMini && index > 0 && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }) })), section.items.map((item) => {
+                                if (item.type === app_2.PageType.Category) {
+                                    const isActive = item.items.some((subItem) => subItem.active);
+                                    if (isMini) {
+                                        return ((0, jsx_runtime_1.jsx)(NavMiniCategoryMenu_1.NavMiniCategoryMenu, { isActive: isActive, item: item, onSelect: handleNavigation }, item.key));
+                                    }
+                                    return ((0, jsx_runtime_1.jsxs)(react_components_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_components_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
                                 }
-                                return ((0, jsx_runtime_1.jsxs)(react_components_1.NavCategory, { value: isActive ? 'active' : '', children: [(0, jsx_runtime_1.jsx)(NavCategoryItemComponent_1.NavCategoryItemComponent, { item: item, isActive: isActive }), (0, jsx_runtime_1.jsx)(react_components_1.NavSubItemGroup, { children: item.items.map((subItem) => ((0, jsx_runtime_1.jsx)(NavSubItemComponent_1.NavSubItemComponent, { item: subItem, onClick: handleNavigation }, subItem.key))) })] }, item.key));
-                            }
-                            return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
-                        })] }, section.label))) }) }) }));
+                                return ((0, jsx_runtime_1.jsx)(NavItemComponent_1.NavItemComponent, { item: item, onClick: handleNavigation, isMini: isMini }, item.key));
+                            })] }, section.label))) })] }) }));
 };
 exports.NavigationContainer = NavigationContainer;

package/App/QuickActionItem.js

@@ -32,7 +32,7 @@ const QuickActionItem = ({ label, Icon, onClick, link, badgeCount, badgeColor =
             position: 'relative',
             fontWeight: react_components_1.tokens.fontWeightRegular,
             minWidth: 'unset',
-        }, as: "a", href: fullLink, title: label, className: styles.root, onClick: (event) => {
+        }, as: "a", href: fullLink, title: label, "aria-label": label, className: styles.root, onClick: (event) => {
             event.preventDefault();
             if (fullLink) {
                 router.push(fullLink);

package/DataGrid/CustomFilter/ColumnFilterItem.d.ts

@@ -0,0 +1,11 @@
+import { Attribute } from '@headless-adminapp/core/attributes';
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { FC } from 'react';
+interface ColumnFilterItemProps {
+    attribute: Attribute;
+    condition: ColumnCondition;
+    onChange?: (condition: ColumnCondition) => void;
+    onRemove?: () => void;
+}
+export declare const ColumnFilterItem: FC<ColumnFilterItemProps>;
+export {};

package/DataGrid/CustomFilter/ColumnFilterItem.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnFilterItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+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 TextControl_1 = require("../../form/controls/TextControl");
+const ConditionValueControl_1 = require("../GridColumnHeader/ConditionValueControl");
+const OperatorSelect_1 = require("../GridColumnHeader/OperatorSelect");
+const ColumnFilterItem = ({ condition, attribute, onChange, onRemove, }) => {
+    const { operatorStrings } = (0, AppStringContext_1.useAppStrings)();
+    const operatorOptions = (0, react_1.useMemo)(() => {
+        return (0, datagrid_1.getLocalizedOperatorOptions)(operatorStrings);
+    }, [operatorStrings]);
+    const selectedOption = (0, react_1.useMemo)(() => {
+        return operatorOptions[attribute.type].find((option) => option.value === condition.operator);
+    }, [condition.operator, attribute.type, operatorOptions]);
+    const handleChangeOperator = (operator) => {
+        onChange?.({
+            ...condition,
+            operator,
+            value: [],
+        });
+    };
+    const handleChangeValue = (value, index) => {
+        const next = [...condition.value];
+        next[index] = value;
+        onChange?.({
+            ...condition,
+            value: next,
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: react_components_1.tokens.spacingVerticalM,
+            border: `1px solid ${react_components_1.tokens.colorNeutralStroke3}`,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            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) => {
+                    handleChangeValue(value, i);
+                } }, x + String(i))))] }));
+};
+exports.ColumnFilterItem = ColumnFilterItem;

package/DataGrid/CustomFilter/CustomFilter.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface CustomFilterProps {
+    open: boolean;
+    onClose: () => void;
+}
+export declare const CustomFilter: FC<CustomFilterProps>;
+export {};

package/DataGrid/CustomFilter/CustomFilter.js

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFilter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const constants_1 = require("@headless-adminapp/app/datagrid/column-filter/constants");
+const react_1 = require("react");
+const DrawerFooter_1 = require("../../components/DrawerFooter");
+const DrawerHeader_1 = require("../../components/DrawerHeader");
+const SectionControl_1 = require("../../DataForm/SectionControl");
+const SelectControl_1 = __importDefault(require("../../form/controls/SelectControl"));
+const utils_1 = require("../GridColumnHeader/utils");
+const ColumnFilterItem_1 = require("./ColumnFilterItem");
+const CustomFilter = ({ open, onClose }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Drawer, { open: open, position: "end", size: "small", style: { borderLeftWidth: 0 }, children: (0, jsx_runtime_1.jsx)(DrawerContent, { onClose: onClose }) }));
+};
+exports.CustomFilter = CustomFilter;
+const DrawerContent = ({ onClose }) => {
+    const schema = (0, datagrid_1.useDataGridSchema)();
+    const [sorting, setSorting] = (0, datagrid_1.useGridSorting)();
+    const [columnFilters, , replaceColumnFilters] = (0, datagrid_1.useGridColumnFilter)();
+    const [columnFiltersInternal, setColumnFiltersInternal] = (0, react_1.useState)(columnFilters);
+    const [sortingInternal, setSortingInternal] = (0, react_1.useState)(sorting);
+    (0, react_1.useEffect)(() => {
+        setColumnFiltersInternal(columnFilters);
+    }, [columnFilters]);
+    (0, react_1.useEffect)(() => {
+        setSortingInternal(sorting);
+    }, [sorting]);
+    const attributeOptions = (0, react_1.useMemo)(() => {
+        return Object.entries(schema.attributes).map(([key, attribute]) => ({
+            value: key,
+            label: attribute.label,
+        }));
+    }, [schema.attributes]);
+    const handleAddFilter = (key) => {
+        const attribute = schema.attributes[key];
+        const defaultOperator = (0, utils_1.getDefaultOperator)(undefined, attribute.type);
+        const defaultValues = [];
+        setColumnFiltersInternal((prev) => ({
+            ...prev,
+            [key]: {
+                operator: defaultOperator,
+                value: defaultValues,
+            },
+        }));
+    };
+    const isValid = (0, react_1.useMemo)(() => {
+        const isSortingValid = sortingInternal.every((x) => x.field && x.order);
+        const isColumnFilterValid = Object.entries(columnFiltersInternal).every(([key, condition]) => {
+            if (!condition) {
+                return true;
+            }
+            const attribute = schema.attributes[key];
+            if (!attribute) {
+                return false;
+            }
+            const selectedOption = constants_1.operatorOptions[attribute.type].find((option) => option.value === condition.operator);
+            if (!selectedOption) {
+                return false;
+            }
+            const values = condition.value || [];
+            return (values.filter((value) => {
+                return value !== null && value !== undefined;
+            }).length === selectedOption.controls.length);
+        });
+        return isColumnFilterValid && isSortingValid;
+    }, [columnFiltersInternal, schema, sortingInternal]);
+    const handleApply = () => {
+        replaceColumnFilters(columnFiltersInternal);
+        setSorting(sortingInternal);
+        onClose();
+    };
+    const handleCancel = () => {
+        setColumnFiltersInternal(columnFilters);
+        setSortingInternal(sorting);
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: "Sort and Filter", onClose: handleCancel, showCloseButton: true }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { padding: react_components_1.tokens.spacingHorizontalM }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: react_components_1.tokens.spacingVerticalM,
+                    }, children: [(0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Sort by", labelPosition: "top", children: (0, jsx_runtime_1.jsx)(SelectControl_1.default, { value: sortingInternal[0]?.field ?? null, onChange: (value) => {
+                                    if (!value) {
+                                        return;
+                                    }
+                                    setSortingInternal((prev) => [
+                                        {
+                                            ...prev[0],
+                                            field: value,
+                                            order: prev[0]?.order ?? 'asc',
+                                        },
+                                    ]);
+                                }, options: attributeOptions }) }), (0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Sort order", labelPosition: "top", children: (0, jsx_runtime_1.jsx)(SelectControl_1.default, { value: sortingInternal[0]?.order ?? null, onChange: (value) => {
+                                    if (!value) {
+                                        return;
+                                    }
+                                    setSortingInternal((prev) => [
+                                        {
+                                            ...prev[0],
+                                            order: value,
+                                        },
+                                    ]);
+                                }, options: [
+                                    {
+                                        label: 'Ascending',
+                                        value: 'asc',
+                                    },
+                                    {
+                                        label: 'Descending',
+                                        value: 'desc',
+                                    },
+                                ] }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), Object.entries(columnFiltersInternal).map(([key, condition]) => {
+                            const attribute = schema.attributes[key];
+                            if (!condition) {
+                                return null;
+                            }
+                            return ((0, jsx_runtime_1.jsx)(ColumnFilterItem_1.ColumnFilterItem, { attribute: attribute, condition: condition, onChange: (nextCondition) => {
+                                    setColumnFiltersInternal((prev) => ({
+                                        ...prev,
+                                        [key]: nextCondition,
+                                    }));
+                                }, onRemove: () => {
+                                    setColumnFiltersInternal((prev) => {
+                                        const next = { ...prev };
+                                        delete next[key];
+                                        return next;
+                                    });
+                                } }, key));
+                        }), (0, jsx_runtime_1.jsx)("div", { style: { alignSelf: 'flex-start' }, children: (0, jsx_runtime_1.jsx)(SelectControl_1.default, { value: null, placeholder: "Add filter on", onChange: (value) => {
+                                    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, children: "Apply" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: handleCancel, children: "Cancel" })] })] }));
+};

package/DataGrid/CustomFilter/index.d.ts

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

package/DataGrid/CustomFilter/index.js

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

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -11,6 +11,8 @@ const hooks_2 = require("@headless-adminapp/app/metadata/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../../App/AppStringContext");
+const DrawerFooter_1 = require("../../components/DrawerFooter");
+const DrawerHeader_1 = require("../../components/DrawerHeader");
 const PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, }) {
     const schema = (0, hooks_1.useDataGridSchema)();
@@ -60,18 +62,18 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
         acc[column.id] = true;
         return acc;
     }, {});
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", children: [(0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { children: (0, jsx_runtime_1.jsx)(react_components_1.DrawerHeaderTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}), onClick: onClose }), children: strings.addColumns }) }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column-reverse',
-                            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: 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: {
+    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',
+                                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) => {
+                                        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,
                         width: '100%',
                         justifyContent: 'flex-start',
@@ -83,10 +85,5 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                         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,
-                            justifyContent: 'flex-end',
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: strings.close }) })] })] }));
+                    }, 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, children: strings.close }) })] }));
 }

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -12,7 +12,11 @@ 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 Button_1 = require("../../CommandBar/Button");
+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 PageEntityViewStringContext_1 = require("../../PageEntityView/PageEntityViewStringContext");
 const AddColumns_1 = require("./AddColumns");
 const ColumnItem_1 = require("./ColumnItem");
@@ -44,34 +48,21 @@ function CustomizeColumns({ onClose, opened }) {
     const onColumnRemove = (0, react_1.useCallback)((column) => {
         setItems((prev) => prev.filter((x) => x.id !== column.id));
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", size: "small", children: [(0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { children: (0, jsx_runtime_1.jsx)(react_components_1.DrawerHeaderTitle, { action: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", "aria-label": "Close", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, {}), onClick: onClose }), children: strings.editColumns }) }), (0, jsx_runtime_1.jsxs)("div", { style: { width: '100%', display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            gap: 8,
-                            marginBottom: react_components_1.tokens.spacingVerticalXS,
-                            paddingInline: react_components_1.tokens.spacingHorizontalS,
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), style: {
-                                    fontWeight: react_components_1.tokens.fontSizeBase400,
-                                    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)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            width: '100%',
-                            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)("div", { style: { display: 'flex', flexDirection: 'column', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            padding: 8,
-                            gap: 8,
-                            justifyContent: 'flex-end',
-                        }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
-                                    setContextValue({
-                                        columns: items,
-                                    });
-                                    onClose();
-                                }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
-                                    onClose();
-                                }, children: strings.cancel })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Drawer, { separator: true, open: opened, position: "end", size: "small", children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: strings.editColumns, showCloseButton: true, onClose: onClose }), (0, jsx_runtime_1.jsxs)(react_components_1.DrawerBody, { style: { paddingInline: react_components_1.tokens.spacingHorizontalM }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginInline: -8, marginTop: 8 }, children: [(0, jsx_runtime_1.jsxs)(Wrapper_1.CommandBarWrapper, { children: [(0, jsx_runtime_1.jsx)(Button_1.CommandButton, { Icon: icons_1.Icons.Add, text: strings.add, onClick: () => setShowAddColumns(true) }), (0, jsx_runtime_1.jsx)(Button_1.CommandButton, { Icon: icons_1.Icons.Edit, text: strings.reset, disabled: !isDirty, onClick: () => {
+                                            setItems(columns);
+                                        } })] }), (0, jsx_runtime_1.jsx)(AddColumns_1.AddColumns, { onColumnAdd: onColumnAdd, onColumnRemove: onColumnRemove, columns: items, opened: showAddColumns, onClose: () => setShowAddColumns(false) })] }), (0, jsx_runtime_1.jsx)(DndProvider_1.DndProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                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: () => {
+                            setContextValue({
+                                columns: items,
+                            });
+                            onClose();
+                        }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                            onClose();
+                        }, children: strings.cancel })] })] }));
 }

package/DataGrid/GridColumnHeader/TableHeaderFilterCell.js

@@ -81,7 +81,7 @@ const TableHeaderFilterCell = ({ children, sortDirection, onChangeSortDirection,
             default:
                 return 'left';
         }
-    }, [attribute]);
+    }, [attribute, column.name, schema.primaryAttribute]);
     const styles = useStyles();
     const isResizingRef = (0, react_1.useRef)(false);
     const [columnFilters, setColumnFilters] = (0, hooks_1.useGridColumnFilter)();

package/DataGrid/GridColumnHeader/utils.js

@@ -12,6 +12,9 @@ function getDefaultOperator(operator, attributeType) {
     if (attributeType === 'choice' || attributeType === 'lookup') {
         return 'in';
     }
+    if (attributeType === 'string') {
+        return 'like';
+    }
     return 'eq';
 }
 function getDefaultValues(operator, value, _attributeType) {

package/DataGrid/GridHeaderMobile.js

@@ -4,26 +4,26 @@ exports.GridHeaderMobile = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
-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 CustomFilter_1 = require("./CustomFilter");
+const MobileHeaderTitleContainer_1 = require("./MobileHeaderTitleContainer");
 const GridHeaderMobile = () => {
-    const viewLookup = (0, hooks_1.useGridViewLookupData)();
-    const selectedView = (0, hooks_1.useSelectedView)();
-    const changeView = (0, hooks_1.useChangeView)();
+    const [columnFilters] = (0, hooks_1.useGridColumnFilter)();
+    const [showCustomFilters, setShowCustomFilters] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, hooks_1.useSearchText)();
-    const { language } = (0, locale_1.useLocale)();
     const appStrings = (0, AppStringContext_1.useAppStrings)();
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             alignItems: 'center',
             paddingInline: 8,
             gap: 8,
             display: 'flex',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, 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), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, 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), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     alignItems: 'center',
                     gap: 16,
                     justifyContent: 'space-between',
                     display: 'flex',
-                }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), iconPosition: "after" }) }), (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), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: { position: 'relative' }, icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), Object.keys(columnFilters).length > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: "danger", size: "tiny" }))] }), iconPosition: "after", onClick: () => setShowCustomFilters(true) }), (0, jsx_runtime_1.jsx)(CustomFilter_1.CustomFilter, { open: showCustomFilters, onClose: () => setShowCustomFilters(false) })] })] }));
 };
 exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.js

@@ -98,7 +98,10 @@ const GridListContainer = () => {
                                     width: '100%',
                                     position: 'absolute',
                                     transform: `translateY(${virtualSize}px)`,
-                                }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } }), (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.BottomDrawerMenu, { open: showContextMenu, onClose: () => setShowContextMenu(false), actions: contextCommands })] }) }));
+                                }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(RecordCardLoading_1.RecordCardLoading, { cardView: view.experience.card }, index))) }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: 'env(safe-area-inset-bottom)' } }), (0, jsx_runtime_1.jsx)(MobileHeaderCommandContainer_1.BottomDrawerMenu, { open: showContextMenu, onClose: () => {
+                        setShowContextMenu(false);
+                        setSelectedIds([]);
+                    }, actions: contextCommands })] }) }));
 };
 exports.GridListContainer = GridListContainer;
 const Item = ({ onClick, onLongPress, card, record, schema, selected, }) => {

package/DataGrid/MobileHeaderTitleContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const MobileHeaderTitleContainer: FC;

package/DataGrid/MobileHeaderTitleContainer.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileHeaderTitleContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const MobileHeaderTitle_1 = require("@headless-adminapp/app/header/components/MobileHeaderTitle");
+const locale_1 = require("@headless-adminapp/app/locale");
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const MobileHeaderTitleContainer = () => {
+    const { language } = (0, locale_1.useLocale)();
+    const viewLookup = (0, hooks_1.useGridViewLookupData)();
+    const selectedView = (0, hooks_1.useSelectedView)();
+    const changeView = (0, hooks_1.useChangeView)();
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const { experienceStore } = (0, metadata_1.useMetadata)();
+    const { data: defaultViewId, isPending } = (0, react_query_1.useQuery)({
+        queryKey: ['experience-schema-default-view-id', schema.logicalName],
+        queryFn: () => experienceStore.getDefaultViewId(schema.logicalName),
+    });
+    if (viewLookup.length < 2) {
+        if (isPending || selectedView.id === defaultViewId) {
+            return null;
+        }
+    }
+    return ((0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { order: 3, title: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: {
+                            style: { color: 'inherit' },
+                            children: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}),
+                        }, iconPosition: "after", style: {
+                            fontSize: react_components_1.tokens.fontSizeBase400,
+                            fontWeight: react_components_1.tokens.fontWeightSemibold,
+                            lineHeight: react_components_1.tokens.lineHeightBase400,
+                            color: 'inherit',
+                            backgroundColor: 'transparent',
+                            paddingInline: 0,
+                            justifyContent: 'flex-start',
+                        }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                            }, 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), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }));
+};
+exports.MobileHeaderTitleContainer = MobileHeaderTitleContainer;

package/Header/MobileHeaderCommandContainer.js

@@ -77,7 +77,11 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
             borderTopLeftRadius: react_components_1.tokens.borderRadiusXLarge,
             borderTopRightRadius: react_components_1.tokens.borderRadiusXLarge,
             height: 'unset',
-        }, onOpenChange: () => { }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DrawerBody, { style: {
+        }, onOpenChange: () => {
+            if (!subMenuStack.length) {
+                onClose();
+            }
+        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DrawerBody, { style: {
                 maxHeight: '70vh',
                 padding: 0,
                 overflowY: 'hidden',

package/PageEntityForm/CommandContainer.js

@@ -31,8 +31,8 @@ const CommandContainer = ({ skeleton }) => {
                 {
                     type: 'icon',
                     Icon: icons_1.Icons.ArrowLeft,
-                    onClick: () => {
-                        router.back();
+                    onClick: async () => {
+                        await router.back();
                     },
                 },
             ],

package/PageEntityForm/EditableGridControl/CardUi.js

@@ -61,7 +61,7 @@ const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, ali
                                 }, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: `${alias}.${index}.${attributeName}`, control: formControl, render: ({ field, fieldState, formState }) => {
                                         const isError = (fieldState.isTouched || formState.isSubmitted) &&
                                             !!fieldState.error?.message;
-                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
+                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "top", isError: isError, required: attribute.required, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
                                                     const previousValue = field.value;
                                                     field.onChange(value);
                                                     eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);

package/PageEntityView/PageEntityView.js

@@ -34,6 +34,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, useV2, }) => {
     else {
         content = (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainerV2, {});
     }
-    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-view.' + logicalName, children: (0, jsx_runtime_1.jsxs)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { title: schema.label, order: 2 }), content] }) }));
+    return ((0, jsx_runtime_1.jsx)(historystate_1.HistoryStateKeyProvider, { historyKey: 'page-entity-view.' + logicalName, children: (0, jsx_runtime_1.jsxs)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { title: schema.pluralLabel, order: 2 }), content] }) }));
 };
 exports.PageEntityView = PageEntityView;

package/components/DrawerFooter.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+interface DrawerFooterProps {
+    justify?: CSSProperties['justifyContent'];
+}
+export declare const DrawerFooter: FC<PropsWithChildren<DrawerFooterProps>>;
+export {};

package/components/DrawerFooter.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerFooter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const DrawerFooter = ({ children, justify, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerFooter, { style: {
+            padding: react_components_1.tokens.spacingHorizontalM,
+            gap: react_components_1.tokens.spacingHorizontalM,
+            background: react_components_1.tokens.colorNeutralBackground2,
+            justifyContent: justify,
+        }, children: children }));
+};
+exports.DrawerFooter = DrawerFooter;

package/components/DrawerHeader.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface DrawerHeaderProps {
+    title: string;
+    onClose?: () => void;
+    showCloseButton: boolean;
+    rightContent?: React.ReactNode;
+    bottomContent?: React.ReactNode;
+}
+export declare const DrawerHeader: FC<DrawerHeaderProps>;
+export {};

package/components/DrawerHeader.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerHeader = 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 QuickActionItem_1 = require("../App/QuickActionItem");
+const DrawerHeader = ({ title, onClose, showCloseButton, rightContent, bottomContent, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        height: 50,
+                        minHeight: 50,
+                        background: react_components_1.tokens.colorNeutralBackground3,
+                        paddingInline: 8,
+                        gap: 8,
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: title }) }), rightContent, showCloseButton && ((0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.Close, label: "Close", onClick: onClose }))] }), bottomContent] }) }));
+};
+exports.DrawerHeader = DrawerHeader;

package/form/controls/LookupControl.js

@@ -55,13 +55,13 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             id: value.id,
         });
     }, [allowNavigation, routeResolver, schema.logicalName, value]);
-    const handleOpenRecord = (0, react_1.useCallback)((event) => {
+    const handleOpenRecord = (0, react_1.useCallback)(async (event) => {
         event.preventDefault();
         event.stopPropagation();
         if (!path) {
             return;
         }
-        router.push(path);
+        await router.push(path);
     }, [path, router]);
     (0, react_1.useEffect)(() => {
         if (open)
@@ -118,8 +118,8 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                 }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, children: [data?.records.map((item) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: item[schema.idAttribute], className: (0, react_components_1.mergeClasses)(styles.option), text: item[schema.primaryAttribute], children: view?.experience.card ? ((0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: view.experience.card, record: item, schema: schema })) : item[schema.primaryAttribute] }, item[schema.idAttribute]))), !isLoading && !data?.records.length && ((0, jsx_runtime_1.jsx)("div", { style: {
                             paddingInline: react_components_1.tokens.spacingHorizontalL,
                             paddingBlock: react_components_1.tokens.spacingVerticalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
-                                        router.push(routeResolver({
+                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: lookupStrings.noRecordsFound }) })), allowNewRecord && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, {}), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: react_components_1.tokens.spacingVerticalXXS }, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { style: { fontWeight: 'normal' }, icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: async () => {
+                                        await router.push(routeResolver({
                                             logicalName: schema.logicalName,
                                             type: app_2.PageType.EntityForm,
                                         }));

package/form/controls/useLookupData.js

@@ -94,7 +94,7 @@ function useLookupData({ schema, view, searchText, dataService, enabled, }) {
         columns,
         expand,
         schema,
-        search: '',
+        search,
         filter: recentQueryFilter,
         disabled: !enabled || !recentIds.length,
         sorting: view?.defaultSorting,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -51,5 +51,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "65c5192a870badd4de4c135261d5aeafae063756"
+  "gitHead": "2a993d2eb239ff24ffd73df81aba26240aaf1b2f"
 }