@headless-adminapp/fluent 1.4.21 → 1.4.23

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/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/CommandBar/MenuButton.js

@@ -7,26 +7,52 @@ const react_1 = require("react");
 const MenuList_1 = require("./MenuList");
 const useStyles = (0, react_components_1.makeStyles)({
     splitButton: {
+        borderRadius: react_components_1.tokens.borderRadiusMedium,
         '& > button:first-child': {
             fontWeight: react_components_1.tokens.fontWeightRegular,
-            borderRightColor: react_components_1.tokens.colorNeutralStroke3,
+            paddingRight: 0,
+            minWidth: 'unset',
+            backgroundColor: 'transparent !important',
+        },
+        '&:hover:not(:has(:last-child:hover))': {
+            backgroundColor: react_components_1.tokens.colorSubtleBackgroundHover,
+            '&:active': {
+                backgroundColor: react_components_1.tokens.colorSubtleBackgroundPressed,
+            },
         },
     },
     menuButton: {
         fontWeight: react_components_1.tokens.fontWeightRegular,
     },
     splitButtonDanger: {
-        '& > button:first-child:hover': {
-            color: react_components_1.tokens.colorPaletteRedForeground1,
-            background: react_components_1.tokens.colorPaletteRedBackground1,
-            '& .fui-Button__icon': {
-                color: react_components_1.tokens.colorPaletteRedForeground1,
-            },
+        '&:hover:not(:has(:last-child:hover))': {
+            backgroundColor: react_components_1.tokens.colorStatusDangerBackground1,
             '&:active': {
-                color: react_components_1.tokens.colorPaletteRedForeground2,
-                background: react_components_1.tokens.colorPaletteRedBackground2,
+                backgroundColor: react_components_1.tokens.colorStatusDangerBackground2,
+            },
+        },
+        '&:hover': {
+            '& > button:first-child': {
+                color: react_components_1.tokens.colorStatusDangerForeground1,
+                // color: tokens.colorPaletteRedForeground1,
+                // background: tokens.colorPaletteRedBackground1,
                 '& .fui-Button__icon': {
-                    color: react_components_1.tokens.colorPaletteRedForeground2,
+                    color: react_components_1.tokens.colorStatusDangerForeground1,
+                },
+                '&:active': {
+                    color: react_components_1.tokens.colorStatusDangerForeground2,
+                    // background: tokens.colorPaletteRedBackground2,
+                    '& .fui-Button__icon': {
+                        color: react_components_1.tokens.colorStatusDangerForeground2,
+                    },
+                },
+            },
+        },
+        '& > button:last-child': {
+            '&:hover, &[aria-expanded="true"]': {
+                backgroundColor: react_components_1.tokens.colorStatusDangerBackground1,
+                '&:active': {
+                    backgroundColor: react_components_1.tokens.colorStatusDangerBackground2,
                 },
             },
         },
@@ -34,10 +60,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 exports.CommandMenuButton = (0, react_1.memo)((0, react_1.forwardRef)(function CommandMenuButton({ Icon, items, text, danger, disabled, onClick }, ref) {
     const styles = useStyles();
-    return (
-    // <div ref={ref}>
-    (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] })
-    // </div>
-    );
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, positioning: "below-end", children: [onClick ? ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => ((0, jsx_runtime_1.jsx)(react_components_1.SplitButton, { ref: ref, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), appearance: "subtle", className: (0, react_components_1.mergeClasses)(styles.splitButton, danger && styles.splitButtonDanger), menuButton: triggerProps, disabled: disabled, primaryActionButton: {
+                        onClick,
+                    }, children: text })) })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuButton, { ref: ref, appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(styles.menuButton), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 }));
 exports.CommandMenuButton.displayName = 'CommandMenuButton';

package/CommandBar/MenuItem.js

@@ -33,6 +33,6 @@ exports.MenuItem = (0, react_1.memo)(({ Icon, text, disabled, danger, onClick, i
     if (!items?.length) {
         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { disabled: disabled, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [onClick ? ((0, jsx_runtime_1.jsxs)(react_components_1.MenuSplitGroup, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.danger), onClick: onClick, children: text }), (0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { className: (0, react_components_1.mergeClasses)(styles.splitMenuRight) }) })] })) : ((0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: 20 }), children: text }) })), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }));
 });
 exports.MenuItem.displayName = 'MenuItem';

package/DataGrid/CustomFilter/CustomFilter.js

@@ -135,5 +135,5 @@ const DrawerContent = ({ onClose }) => {
                                     if (!value)
                                         return;
                                     handleAddFilter(value);
-                                }, options: attributeOptions.filter((x) => !columnFiltersInternal[x.value]) }) })] }) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: !isValid, onClick: handleApply, 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, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Apply" }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: handleCancel, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Cancel" })] })] }));
 };

package/DataGrid/CustomizeColumns/AddColumns.js

@@ -85,5 +85,5 @@ function AddColumns({ onColumnAdd, onColumnRemove, columns, opened, onClose, })
                         else {
                             onColumnAdd(column);
                         }
-                    }, children: column.label }, column.id))) }), (0, jsx_runtime_1.jsx)(DrawerFooter_1.DrawerFooter, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, 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, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: strings.close }) })] }));
 }

package/DataGrid/CustomizeColumns/CustomizeColumns.js

@@ -62,7 +62,7 @@ function CustomizeColumns({ onClose, opened }) {
                                 columns: items,
                             });
                             onClose();
-                        }, appearance: "primary", children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
+                        }, appearance: "primary", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: strings.apply }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => {
                             onClose();
-                        }, children: strings.cancel })] })] }));
+                        }, style: { fontWeight: react_components_1.tokens.fontWeightRegular }, 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/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.js

@@ -6,9 +6,10 @@ 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,
+            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/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) {
@@ -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: async () => {
-                                        await router.push(routeResolver({
-                                            logicalName: schema.logicalName,
-                                            type: app_2.PageType.EntityForm,
-                                        }));
+                                        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.21",
+  "version": "1.4.23",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -51,5 +51,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "2a993d2eb239ff24ffd73df81aba26240aaf1b2f"
+  "gitHead": "1e2ade4328e5b2cfe223ab23318da6f456cb9de1"
 }