@headless-adminapp/fluent 1.4.20 → 1.4.22

package/App/App.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.App = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const app_1 = require("@headless-adminapp/app/app");
 const AppUI_1 = require("./AppUI");
 const App = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(app_1.AppProvider, { children: (0, jsx_runtime_1.jsx)(AppUI_1.AppUI, { children: children }) }));
+    return (0, jsx_runtime_1.jsx)(AppUI_1.AppUI, { children: children });
 };
 exports.App = App;

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/LayoutProvider.js

@@ -6,12 +6,13 @@ const react_components_1 = require("@fluentui/react-components");
 const LayoutProvider_1 = require("@headless-adminapp/app/app/LayoutProvider");
 const DialogContainer_1 = require("../DialogContainer");
 const ProgressIndicatorContainer_1 = require("../ProgressIndicatorContainer");
+const QuickCreateContainer_1 = require("../QuickCreateContainer");
 const ToastNotificationContainer_1 = require("../ToastNotificationContainer");
 const LayoutProvider = ({ children, theme, ...rest }) => {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsx)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { theme: theme ?? react_components_1.webLightTheme, children: (0, jsx_runtime_1.jsxs)(LayoutProvider_1.LayoutProvider, { ...rest, containers: {
                 DialogContainer: DialogContainer_1.DialogContainer,
                 ProgressIndicatorContainer: ProgressIndicatorContainer_1.ProgressIndicatorContainer,
                 ToastNotificationContainer: ToastNotificationContainer_1.ToastNotificationContainer,
-            }, children: children }) }));
+            }, children: [children, (0, jsx_runtime_1.jsx)(QuickCreateContainer_1.QuickCreateContainer, {})] }) }));
 };
 exports.LayoutProvider = LayoutProvider;

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/CustomFilter.js

@@ -9,11 +9,12 @@ 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 Header_1 = require("./Header");
 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 }) }));
 };
@@ -79,7 +80,7 @@ const DrawerContent = ({ onClose }) => {
         setSortingInternal(sorting);
         onClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { onClose: handleCancel }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: { padding: react_components_1.tokens.spacingHorizontalM }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+    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,
@@ -134,8 +135,5 @@ const DrawerContent = ({ onClose }) => {
                                     if (!value)
                                         return;
                                     handleAddFilter(value);
-                                }, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(react_components_1.DrawerFooter, { style: {
-                    padding: react_components_1.tokens.spacingHorizontalM,
-                    gap: react_components_1.tokens.spacingHorizontalM,
-                }, 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" })] })] }));
+                                }, 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/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/Insights/charts/BarChart.js

@@ -15,7 +15,7 @@ function BarChart({ dataset, chartInfo, }) {
     const bars = chartInfo.bars;
     const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
     const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, yAxis.tick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: dataset[0], stackOffset: chartInfo.stackOffset, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis), (0, renderers_1.renderBars)(bars, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: dataset[0], stackOffset: chartInfo.stackOffset, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis, dataset[0].length < 3), (0, renderers_1.renderBars)(bars, dataset), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         fill: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.2,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));

package/Insights/charts/LineChart.js

@@ -15,7 +15,7 @@ function LineChart({ dataset, chartInfo, }) {
     const lines = chartInfo.lines;
     const xAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, xAxis.tick);
     const yAxisFullFormatter = (0, formatters_1.createLongAxisFormatter)(locale, yAxis.tick);
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis), (0, renderers_1.renderLines)(lines), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: dataset[0], children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, yAxis), (0, renderers_1.renderXAxis)(locale, xAxis, dataset[0].length < 3), (0, renderers_1.renderLines)(lines), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { cursor: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                         opacity: 0.5,
                     }, content: ({ active, payload, label }) => ((0, jsx_runtime_1.jsx)(CustomTooltipContent_1.CustomTooltipContent, { xAxisFormatter: xAxisFullFormatter, yAxisFormatter: yAxisFullFormatter, active: active, payload: payload, label: label })) })] }) }));

package/Insights/charts/OhlcChart.js

@@ -51,7 +51,7 @@ function OhlcChart({ dataset, chartInfo, }) {
     return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.ScatterChart, { data: data, children: [(0, renderers_1.renderGrid)(), (0, renderers_1.renderYAxis)(locale, {
                     ...chartInfo.yAxis,
                     domain,
-                }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxis.dataKey, name: xAxis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, padding: "gap", axisLine: {
+                }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxis.dataKey, name: xAxis.name, tickFormatter: xAxisFormatter, tickLine: false, minTickGap: 10, padding: "no-gap", axisLine: {
                         stroke: react_components_1.tokens.colorNeutralBackground6,
                     }, fontSize: react_components_1.tokens.fontSizeBase100, tick: {
                         fill: react_components_1.tokens.colorNeutralForeground1,

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/PageEntityForm/SectionContainer.js

@@ -99,7 +99,7 @@ function SectionContainer({ section, skeleton, }) {
                                             recordId,
                                             attributeName: control.attributeName,
                                             logicalName: schema.logicalName,
-                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight, skeleton: skeleton }) }));
+                                        }, autoHeight: control.autoHeight, maxHeight: control.maxHeight, skeleton: skeleton, required: required }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {

package/PageEntityForm/StandardControl.js

@@ -44,7 +44,7 @@ const StandardControl = (props) => {
     // hideLabel,
     hidePlaceholder, readOnly, 
     // quickViewControl,
-    allowNavigation, allowNewRecord, autoHeight, maxHeight, skeleton, } = props;
+    allowNavigation, allowNewRecord, autoHeight, maxHeight, skeleton, required, } = props;
     const isDisabled = readOnly;
     const placeholder = hidePlaceholder
         ? undefined
@@ -192,7 +192,7 @@ const StandardControl = (props) => {
         }
         case 'choice': {
             const Control = componentStore_1.componentStore.getComponent('Form.SelectControl') ?? SelectControl_1.default;
-            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton }));
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, skeleton: skeleton, clearable: !required }));
         }
         case 'choices': {
             const Control = componentStore_1.componentStore.getComponent('Form.MultiSelectControl') ?? MultiSelectControl_1.default;

package/QuickCreateContainer/FormContainer.d.ts

@@ -0,0 +1,8 @@
+import { DataLookup, Id } from '@headless-adminapp/core/attributes';
+import { FC } from 'react';
+interface FormContainerProps {
+    onClose: () => void;
+    onCreate: (value: DataLookup<Id>) => void;
+}
+export declare const FormContainer: FC<FormContainerProps>;
+export {};

package/QuickCreateContainer/FormContainer.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContainer = 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/dataform/hooks");
+const useFormDataState_1 = require("@headless-adminapp/app/dataform/hooks/useFormDataState");
+const useMobileHeaderSetValue_1 = require("@headless-adminapp/app/header/hooks/useMobileHeaderSetValue");
+const useFormSave_1 = require("@headless-adminapp/app/quickcreate/hooks/useFormSave");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const BodyLoading_1 = require("../components/BodyLoading");
+const DrawerFooter_1 = require("../components/DrawerFooter");
+const DrawerHeader_1 = require("../components/DrawerHeader");
+const PageBroken_1 = require("../components/PageBroken");
+const FormTab_1 = require("../form/layout/FormTab");
+const SectionContainer_1 = require("../PageEntityForm/SectionContainer");
+const QuickCreateTabContainer_1 = require("./QuickCreateTabContainer");
+const FormContainer = ({ onClose, onCreate, }) => {
+    const dataState = (0, useFormDataState_1.useFormDataState)();
+    const schema = (0, hooks_1.useDataFormSchema)();
+    (0, useMobileHeaderSetValue_1.useMobileHeaderSetValue)(schema.label, 2, 'title');
+    const formConfig = (0, hooks_1.useSelectedForm)();
+    const notifications = (0, hooks_1.useFormNotifications)();
+    const saveForm = (0, useFormSave_1.useFormSave)();
+    const { mutate: save, isPending: isCreating } = (0, react_query_1.useMutation)({
+        mutationFn: saveForm,
+        onSuccess: (data) => {
+            if (data) {
+                onCreate(data);
+            }
+        },
+    });
+    if (!dataState.isFetching && dataState.isError) {
+        return (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { title: "Error", message: "Unable to load page" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isCreating }), (0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: `Quick Create - ${schema.label}`, showCloseButton: true, onClose: onClose, bottomContent: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(QuickCreateTabContainer_1.QuickCreateTabContainer, {}), notifications.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: react_components_1.tokens.spacingVerticalS,
+                                paddingInline: react_components_1.tokens.spacingHorizontalS,
+                                paddingTop: react_components_1.tokens.spacingVerticalS,
+                            }, children: notifications.map((notification, index) => ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: notification.level, icon: null, children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: notification.message }) }, index))) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    padding: react_components_1.tokens.spacingVerticalM,
+                    // backgroundColor: tokens.colorNeutralBackground2,
+                }, children: formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => save(), children: isCreating ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 8 } }), "Creating..."] })) : ('Create') }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: "Cancel" })] })] }));
+};
+exports.FormContainer = FormContainer;

package/QuickCreateContainer/QuickCreateContainer.d.ts

@@ -0,0 +1 @@
+export declare const QuickCreateContainer: () => import("react/jsx-runtime").JSX.Element;

package/QuickCreateContainer/QuickCreateContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickCreateContainer = 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/quickcreate/hooks");
+const QuickCreateItemContent_1 = require("./QuickCreateItemContent");
+const QuickCreateContainer = () => {
+    const items = (0, hooks_1.useQuickCreateItems)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item) => {
+            const { id, isOpen, ...options } = item;
+            return ((0, jsx_runtime_1.jsx)(QuickCreateItem, { logicalName: options.logicalName, onClose: () => options.onCancel?.(), onCreate: (value) => options.onCreate?.(value), isOpen: isOpen }, id));
+        }) }));
+};
+exports.QuickCreateContainer = QuickCreateContainer;
+const QuickCreateItem = ({ isOpen, logicalName, onClose, onCreate, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Drawer, { separator: true, open: isOpen, position: "end", size: "medium", children: (0, jsx_runtime_1.jsx)(QuickCreateItemContent_1.QuickCreateItemContent, { logicalName: logicalName, onClose: onClose, onCreate: onCreate }) }));
+};

package/QuickCreateContainer/QuickCreateItemContent.d.ts

@@ -0,0 +1,9 @@
+import { DataLookup, Id } from '@headless-adminapp/core/attributes';
+import { FC } from 'react';
+interface QuickCreateItemContentProps {
+    logicalName: string;
+    onClose: () => void;
+    onCreate: (value: DataLookup<Id>) => void;
+}
+export declare const QuickCreateItemContent: FC<QuickCreateItemContentProps>;
+export {};

package/QuickCreateContainer/QuickCreateItemContent.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickCreateItemContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const icons_1 = require("@headless-adminapp/icons");
+const react_1 = require("react");
+const BodyLoading_1 = require("../components/BodyLoading");
+const DrawerHeader_1 = require("../components/DrawerHeader");
+const PageBroken_1 = require("../components/PageBroken");
+const FormContainer_1 = require("./FormContainer");
+const useLoadQuickCreateFormInfo_1 = require("./useLoadQuickCreateFormInfo");
+const QuickCreateItemContent = ({ logicalName, onClose, onCreate, }) => {
+    const result = (0, useLoadQuickCreateFormInfo_1.useLoadQuickCreateFormInfo)(logicalName, undefined);
+    if (result.loading) {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: "Quick Create", showCloseButton: true, onClose: onClose }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: true }) })] }));
+    }
+    if (result.error) {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: "Quick Create", showCloseButton: true, onClose: onClose }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }) })] }));
+    }
+    const { schema, form, commands } = result;
+    if (schema.restrictions?.disableCreate) {
+        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DrawerHeader_1.DrawerHeader, { title: `Quick Create - ${schema.label}`, showCloseButton: true, onClose: onClose }), (0, jsx_runtime_1.jsx)(react_components_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: "Creating is disabled", message: "Creating records is disabled for this entity." }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(dataform_1.DataFormProvider, { schema: schema, form: form, commands: commands, children: (0, jsx_runtime_1.jsx)(FormContainer_1.FormContainer, { onClose: onClose, onCreate: onCreate }) }));
+};
+exports.QuickCreateItemContent = QuickCreateItemContent;

package/QuickCreateContainer/QuickCreateTabContainer.d.ts

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

package/QuickCreateContainer/QuickCreateTabContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickCreateTabContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const TabContainer_1 = require("../PageEntityForm/TabContainer");
+const QuickCreateTabContainer = () => {
+    const formConfig = (0, dataform_1.useSelectedForm)();
+    if (formConfig.experience.tabs.length < 2) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(TabContainer_1.TabContainer, {});
+};
+exports.QuickCreateTabContainer = QuickCreateTabContainer;

package/QuickCreateContainer/index.d.ts

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

package/QuickCreateContainer/index.js

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

package/QuickCreateContainer/useLoadQuickCreateFormInfo.d.ts

@@ -0,0 +1,18 @@
+import { EntityMainFormCommandItemExperience, Form } from '@headless-adminapp/core/experience/form';
+import { Schema } from '@headless-adminapp/core/schema';
+type UseLoadMainFormPageResult = {
+    loading: true;
+} | {
+    loading: false;
+    error: true;
+    title: string;
+    message: string;
+} | {
+    loading: false;
+    error: false;
+    schema: Schema;
+    form: Form;
+    commands: EntityMainFormCommandItemExperience[][];
+};
+export declare function useLoadQuickCreateFormInfo(logicalName: string, formId: string | undefined): UseLoadMainFormPageResult;
+export {};

package/QuickCreateContainer/useLoadQuickCreateFormInfo.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoadQuickCreateFormInfo = useLoadQuickCreateFormInfo;
+const metadata_1 = require("@headless-adminapp/app/metadata");
+const react_query_1 = require("@tanstack/react-query");
+function useLoadQuickCreateFormInfo(logicalName, formId) {
+    const schema = (0, metadata_1.useSchema)(logicalName);
+    const experienceStore = (0, metadata_1.useExperienceStore)();
+    const { data: form, isFetching: isFetchingForm } = (0, react_query_1.useQuery)({
+        queryKey: ['experience-schema-quick-create-form', logicalName, formId],
+        queryFn: async () => {
+            return experienceStore.getQuickCreateForm(logicalName, formId);
+        },
+        placeholderData: react_query_1.keepPreviousData,
+    });
+    const { data: commands } = (0, react_query_1.useQuery)({
+        queryKey: ['experience-schema-form-commands', logicalName],
+        queryFn: async () => {
+            return [];
+        },
+        initialData: [],
+    });
+    if (!schema) {
+        return {
+            loading: false,
+            error: true,
+            title: 'Schema not found',
+            message: `The schema "${logicalName}" was not found`,
+        };
+    }
+    if (!form) {
+        if (isFetchingForm) {
+            return {
+                loading: true,
+            };
+        }
+        return {
+            loading: false,
+            error: true,
+            title: 'Form not found',
+            message: `The form was not found for "${logicalName}"`,
+        };
+    }
+    if (form.logicalName !== schema.logicalName) {
+        if (isFetchingForm) {
+            return {
+                loading: true,
+            };
+        }
+        return {
+            loading: false,
+            error: true,
+            title: 'Form not found',
+            message: 'The form was not found (missmatch)',
+        };
+    }
+    return {
+        loading: false,
+        error: false,
+        schema,
+        form,
+        commands,
+    };
+}

package/components/BodyLoading.js

@@ -12,13 +12,14 @@ const BodyLoading = ({ loading }) => {
                     inset: 0,
                     backgroundColor: react_components_1.tokens.colorNeutralBackground1,
                     opacity: 0.7,
-                    zIndex: 1,
+                    zIndex: 10,
                 } }), (0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
+                    zIndex: 11,
                 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }));
 };
 exports.BodyLoading = BodyLoading;

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,15 @@
+"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,
+            background: react_components_1.tokens.colorNeutralBackground2,
+            gap: react_components_1.tokens.spacingHorizontalM,
+            justifyContent: justify,
+            paddingBottom: `max(env(safe-area-inset-bottom), ${react_components_1.tokens.spacingHorizontalM})`,
+        }, 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

@@ -6,7 +6,8 @@ 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 useRecentItemStore_1 = require("@headless-adminapp/app/metadata/hooks/useRecentItemStore");
-const hooks_2 = require("@headless-adminapp/app/route/hooks");
+const hooks_2 = require("@headless-adminapp/app/quickcreate/hooks");
+const hooks_3 = require("@headless-adminapp/app/route/hooks");
 const app_2 = require("@headless-adminapp/core/experience/app");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
@@ -34,13 +35,23 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
+const recordToDataLookup = (value, schema) => {
+    return {
+        id: value[schema.idAttribute],
+        name: value[schema.primaryAttribute],
+        logicalName: schema.logicalName,
+        avatar: schema.avatarAttribute
+            ? value[schema.avatarAttribute]
+            : undefined,
+    };
+};
 const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, autoFocus, readOnly, dataService, schema, viewId, allowNavigation, allowNewRecord, skeleton, }) => {
     const [lookupEnabled, setLookupEnabled] = (0, react_1.useState)(false);
     const [open, setOpen] = (0, react_1.useState)(false);
     const [searchText, setSearchText] = (0, react_1.useState)('');
     const { lookupStrings } = (0, AppStringContext_1.useAppStrings)();
-    const routeResolver = (0, hooks_2.useRouteResolver)();
-    const router = (0, hooks_2.useRouter)();
+    const routeResolver = (0, hooks_3.useRouteResolver)();
+    const router = (0, hooks_3.useRouter)();
     const recentItemStore = (0, useRecentItemStore_1.useRecentItemStore)();
     const path = (0, react_1.useMemo)(() => {
         if (!value) {
@@ -55,13 +66,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)
@@ -77,6 +88,8 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
         dataService,
         enabled: lookupEnabled && !isViewLoading && !value && !readOnly && !disabled,
     });
+    const isQuickCreateSupported = (0, hooks_2.useIsQuickCreateSupported)(schema.logicalName);
+    const openQuickCreate = (0, hooks_2.useOpenQuickCreate)();
     (0, react_1.useEffect)(() => {
         if (value) {
             setSearchText(value.name);
@@ -91,11 +104,7 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
             return onChange?.(null);
         }
         else {
-            return onChange?.({
-                id: value[schema.idAttribute],
-                name: value[schema.primaryAttribute],
-                logicalName: schema.logicalName,
-            });
+            return onChange?.(recordToDataLookup(value, schema));
         }
     };
     if (skeleton) {
@@ -115,14 +124,26 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
                         recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), _item[schema.idAttribute], _item[schema.idAttribute]);
                     }
                     handleChange(_item ?? null);
-                }, 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: {
+                }, disableAutoFocus: true, onBlur: onBlur, onFocus: onFocus, id: id, autoFocus: autoFocus, autoCapitalize: "none", autoCorrect: "off", spellCheck: false, 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({
-                                            logicalName: schema.logicalName,
-                                            type: app_2.PageType.EntityForm,
-                                        }));
+                        }, 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 () => {
+                                        if (isQuickCreateSupported) {
+                                            const result = await openQuickCreate({
+                                                logicalName: schema.logicalName,
+                                            });
+                                            if (result) {
+                                                setSearchText('');
+                                                onChange?.(result);
+                                                recentItemStore.addItem((0, useLookupData_1.createLookupRecentKey)(schema.logicalName), result.id, result.id);
+                                            }
+                                        }
+                                        else {
+                                            await router.push(routeResolver({
+                                                logicalName: schema.logicalName,
+                                                type: app_2.PageType.EntityForm,
+                                            }));
+                                        }
                                     }, children: lookupStrings.newRecord }) })] }))] }), !!value && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     inset: 0,

package/form/controls/SelectControl.d.ts

@@ -5,5 +5,6 @@ export interface Lookup<T = string> {
 }
 export interface SelectControlProps<T> extends ControlProps<T> {
     options: Lookup<T>[];
+    clearable?: boolean;
 }
-export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, }: Readonly<SelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default function SelectControl<T extends string | number>({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, }: Readonly<SelectControlProps<T>>): import("react/jsx-runtime").JSX.Element;

package/form/controls/SelectControl.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
 const SkeletonControl_1 = require("./SkeletonControl");
-function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, }) {
+function SelectControl({ value, onChange, options, id, name, disabled, onBlur, onFocus, placeholder, skeleton, clearable, }) {
     const transformedOptions = (0, react_1.useMemo)(() => options.map((x) => ({ label: x.label, value: String(x.value) })), [options]);
     const handleChange = (value) => {
         const option = options.find((x) => String(x.value) === value);
@@ -30,5 +30,5 @@ function SelectControl({ value, onChange, options, id, name, disabled, onBlur, o
             pointerEvents: disabled ? 'none' : undefined,
             width: '100%',
             minWidth: 'unset',
-        }, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
+        }, clearable: clearable, children: transformedOptions.map((x) => ((0, jsx_runtime_1.jsx)(react_components_1.Option, { value: x.value, children: x.label }, x.value))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.20",
+  "version": "1.4.22",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -51,5 +51,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "be1677e04dcd2ac91082078c0b59f81b0799d469"
+  "gitHead": "8f687a2b8c3151c30c57f43105ac47c5d8c3ee79"
 }

package/DataGrid/CustomFilter/Header.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-interface HeaderProps {
-    onClose: () => void;
-}
-export declare const Header: FC<HeaderProps>;
-export {};

package/DataGrid/CustomFilter/Header.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = 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 Header = ({ onClose }) => {
-    return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { style: { padding: 0 }, 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: "Sort and Filter" }) }), (0, jsx_runtime_1.jsx)(QuickActionItem_1.QuickActionItem, { Icon: icons_1.Icons.Close, label: "Close", onClick: onClose })] }) }));
-};
-exports.Header = Header;