@headless-adminapp/fluent 1.4.25 → 1.4.27

package/DataGrid/GridHeaderDesktopV2.js

@@ -10,6 +10,7 @@ const navigation_1 = require("@headless-adminapp/app/navigation");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../App/AppStringContext");
+const fluent_1 = require("../components/fluent");
 const PageEntityViewStringContext_1 = require("../PageEntityView/PageEntityViewStringContext");
 const CustomizeColumns_1 = require("./CustomizeColumns");
 // Exprement component
@@ -29,24 +30,24 @@ const GridHeaderDesktopV2 = (props) => {
                     alignItems: 'center',
                     gap: 16,
                     display: 'flex',
-                }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
+                }, children: [(0, jsx_runtime_1.jsx)(CustomizeColumns_1.CustomizeColumns, { opened: isColumnCustomizationOpen, onClose: () => setIsColumnCustomizationOpen(false) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}), iconPosition: "after", style: {
                                             fontSize: react_components_1.tokens.fontSizeBase400,
                                             fontWeight: react_components_1.tokens.fontWeightMedium,
-                                        }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                        }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => changeView(view.id), children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                             flex: 1,
                         } }), (0, jsx_runtime_1.jsxs)("div", { style: { alignItems: 'center', display: 'flex', gap: 8 }, children: [props.headingRight, ViewCommandBuilder_1.EnabledRules.HasAtLeastOneRecordSelected(commandContext) &&
-                                ViewCommandBuilder_1.EnabledRules.HasDeletePermission(commandContext) && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.processDeleteRecordRequest)(commandContext, {
+                                ViewCommandBuilder_1.EnabledRules.HasDeletePermission(commandContext) && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.processDeleteRecordRequest)(commandContext, {
                                     stringSet: ViewCommandBuilder_1.ViewCommandBuilder.defaultDeleteRecordStringSet,
-                                }), style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Delete" })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: () => {
-                                    openForm({
+                                }), style: { fontWeight: react_components_1.tokens.fontWeightRegular }, children: "Delete" })), (0, jsx_runtime_1.jsxs)(fluent_1.Button, { appearance: "primary", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, {}), onClick: async () => {
+                                    await openForm({
                                         logicalName: schema.logicalName,
                                     });
-                                }, style: { fontWeight: react_components_1.tokens.fontWeightRegular, minWidth: 0 }, children: ["New ", schema.label.toLowerCase()] }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, { size: 24 }), onClick: () => { }, style: { fontWeight: react_components_1.tokens.fontWeightRegular } }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 20 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(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)(icons_1.Icons.Export, { size: 20 }), children: "Export" }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ExportCsv, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToCSV)(commandContext), children: "Export to CSV" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ExportExcel, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToExcel)(commandContext), children: "Export to Excel" })] }) })] })] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 8 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                }, style: { fontWeight: react_components_1.tokens.fontWeightRegular, minWidth: 0 }, children: ["New ", schema.label.toLowerCase()] }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, { size: 24 }), onClick: () => { }, style: { fontWeight: react_components_1.tokens.fontWeightRegular } }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.EditColumns, { size: 20 }), onClick: () => setIsColumnCustomizationOpen(true), children: strings.editColumns }), (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Export, { size: 20 }), children: "Export" }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ExportCsv, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToCSV)(commandContext), children: "Export to CSV" }), (0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ExportExcel, { size: 20 }), onClick: () => (0, ViewCommandBuilder_1.exportRecordsToExcel)(commandContext), children: "Export to Excel" })] }) })] })] }) })] })] })] }), (0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 8 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     alignItems: 'center',
                     // paddingInline: 8,
                     gap: 16,
                     display: 'flex',
-                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: (0, jsx_runtime_1.jsx)(react_components_1.SearchBox, { appearance: "outline", placeholder: appStrings.searchPlaceholder, style: {
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16 }, children: (0, jsx_runtime_1.jsx)(fluent_1.SearchBox, { appearance: "outline", placeholder: appStrings.searchPlaceholder, style: {
                                 width: 300,
                                 borderBottomColor: react_components_1.tokens.colorNeutralStroke1,
                             }, value: searchText, onChange: (e, data) => setSearchText(data.value) }) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] })] }));

package/DataGrid/GridHeaderMobile.js

@@ -7,6 +7,7 @@ const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppStringContext_1 = require("../App/AppStringContext");
+const fluent_1 = require("../components/fluent");
 const CustomFilter_1 = require("./CustomFilter");
 const MobileHeaderTitleContainer_1 = require("./MobileHeaderTitleContainer");
 const GridHeaderMobile = () => {
@@ -19,11 +20,11 @@ const GridHeaderMobile = () => {
             paddingInline: 8,
             gap: 8,
             display: 'flex',
-        }, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+        }, children: [(0, jsx_runtime_1.jsx)(MobileHeaderTitleContainer_1.MobileHeaderTitleContainer, {}), (0, jsx_runtime_1.jsx)("div", { style: { alignItems: 'center', display: 'flex', gap: 16, flex: 1 }, children: (0, jsx_runtime_1.jsx)(fluent_1.Input, { contentBefore: (0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 16 }), placeholder: appStrings.searchPlaceholder, value: searchText, onChange: (e) => setSearchText(e.target.value), style: { flex: 1 } }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     alignItems: 'center',
                     gap: 16,
                     justifyContent: 'space-between',
                     display: 'flex',
-                }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", style: { position: 'relative' }, icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), Object.keys(columnFilters).length > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: "danger", size: "tiny" }))] }), iconPosition: "after", onClick: () => setShowCustomFilters(true) }), (0, jsx_runtime_1.jsx)(CustomFilter_1.CustomFilter, { open: showCustomFilters, onClose: () => setShowCustomFilters(false) })] })] }));
+                }, children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", style: { position: 'relative' }, icon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icons.Filter, {}), Object.keys(columnFilters).length > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Badge, { style: { position: 'absolute', top: 0, right: 0 }, color: "danger", size: "tiny" }))] }), iconPosition: "after", onClick: () => setShowCustomFilters(true) }), (0, jsx_runtime_1.jsx)(CustomFilter_1.CustomFilter, { open: showCustomFilters, onClose: () => setShowCustomFilters(false) })] })] }));
 };
 exports.GridHeaderMobile = GridHeaderMobile;

package/DataGrid/GridListContainer.js

@@ -13,6 +13,7 @@ const navigation_1 = require("@headless-adminapp/app/navigation");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const uuid_1 = require("uuid");
+const fluent_1 = require("../components/fluent");
 const MobileHeaderCommandContainer_1 = require("../Header/MobileHeaderCommandContainer");
 const RecordCard_1 = require("../PageEntityForm/RecordCard");
 const RecordCardLoading_1 = require("../PageEntityForm/RecordCardLoading");
@@ -53,8 +54,8 @@ const GridListContainer = () => {
     const virtualItems = virtualizer.getVirtualItems();
     const virtualSize = virtualizer.getTotalSize();
     const openFormInternal = (0, navigation_1.useOpenForm)();
-    const openRecord = (0, react_1.useCallback)((id) => {
-        openFormInternal({
+    const openRecord = (0, react_1.useCallback)(async (id) => {
+        await openFormInternal({
             logicalName: schema.logicalName,
             id,
             recordSetIds: dataRef.current?.records.map((x) => x[schema.idAttribute]) ?? [],
@@ -84,9 +85,9 @@ const GridListContainer = () => {
                                             width: '100%',
                                             position: 'absolute',
                                             transform: `translateY(${virtualRow.start}px)`,
-                                        }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)(Item, { card: view.experience.card, record: row, schema: schema, onClick: () => {
+                                        }, children: [virtualRow.index > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBlock: 0 }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })), (0, jsx_runtime_1.jsx)(Item, { card: view.experience.card, record: row, schema: schema, onClick: async () => {
                                                     const id = row[schema.idAttribute];
-                                                    openRecord(id);
+                                                    await openRecord(id);
                                                 }, onLongPress: () => {
                                                     const id = row[schema.idAttribute];
                                                     setSelectedIds([id]);
@@ -118,7 +119,7 @@ const Item = ({ onClick, onLongPress, card, record, schema, selected, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_components_1.mergeClasses)(styles.root), style: {
             width: '100%',
             cursor: 'pointer',
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             userSelect: 'none',
             WebkitUserSelect: 'none',
         }, ...longPressEvent, onClick: onClick, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: card, record: record, schema: schema, selected: selected }) }));

package/DataGrid/MobileHeaderTitleContainer.js

@@ -9,6 +9,7 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const metadata_1 = require("@headless-adminapp/app/metadata");
 const icons_1 = require("@headless-adminapp/icons");
 const react_query_1 = require("@tanstack/react-query");
+const fluent_1 = require("../components/fluent");
 const MobileHeaderTitleContainer = () => {
     const { language } = (0, locale_1.useLocale)();
     const viewLookup = (0, hooks_1.useGridViewLookupData)();
@@ -25,7 +26,7 @@ const MobileHeaderTitleContainer = () => {
             return null;
         }
     }
-    return ((0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { order: 3, title: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "subtle", icon: {
+    return ((0, jsx_runtime_1.jsx)(MobileHeaderTitle_1.MobileHeaderTitle, { order: 3, title: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "subtle", icon: {
                             style: { color: 'inherit' },
                             children: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, {}),
                         }, iconPosition: "after", style: {
@@ -40,6 +41,6 @@ const MobileHeaderTitleContainer = () => {
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap',
                                 overflow: 'hidden',
-                            }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }));
+                            }, children: selectedView.localizedNames?.[language] ?? selectedView.name }) }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: viewLookup.map((view) => ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { onClick: () => changeView(view.id), icon: selectedView.id === view.id ? ((0, jsx_runtime_1.jsx)(icons_1.Icons.Checkmark, {})) : undefined, children: view.localizedNames?.[language] ?? view.name }, view.id))) }) })] }) }));
 };
 exports.MobileHeaderTitleContainer = MobileHeaderTitleContainer;

package/DataGrid/TableCell/TableCellAction.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const MenuList_1 = require("../../CommandBar/MenuList");
+const fluent_1 = require("../../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     button: {
         '&:hover': {
@@ -31,12 +32,12 @@ const TableCellAction = ({ items, onOpen, }) => {
             // background: 'white',
             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
             // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
-        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
+        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
                             // background: 'white',
                             // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
                             boxShadow: 'var(--action-shadow)',
                             borderRadius: 0,
                             // background: tokens.colorNeutralBackground1,
-                        } }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }) }));
+                        } }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }) }));
 };
 exports.TableCellAction = TableCellAction;

package/DataGrid/TableCell/TableCellCheckbox.js

@@ -4,10 +4,11 @@ exports.TableCellCheckbox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const react_1 = require("react");
+const Checkbox_1 = require("../../components/fluent/Checkbox");
 exports.TableCellCheckbox = (0, react_1.memo)(({ checked, onChange }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { display: 'flex', alignItems: 'center' }, onClick: (event) => {
             event.stopPropagation();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: checked ?? false, onChange: (event) => {
+        }, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked ?? false, onChange: (event) => {
                 event.stopPropagation();
                 onChange?.(event);
             } }) }));

package/DataGrid/useTableColumns.js

@@ -17,6 +17,7 @@ const phone_1 = require("@headless-adminapp/app/utils/phone");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+const fluent_1 = require("../components/fluent");
 const componentStore_1 = require("../componentStore");
 const avatar_1 = require("../utils/avatar");
 const ActionCell_1 = require("./ActionCell");
@@ -182,8 +183,16 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         maxWidth: 32,
                         minWidth: 32,
                         alignItems: 'center',
+                    }, checkboxIndicator: {
+                        indicator: {
+                            style: { borderRadius: fluent_1.extendedTokens.checkboxBorderRadius },
+                        },
                     }, onClick: toggleAllSelectedIds })),
-                cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), onClick: (event) => {
+                cell: (info) => ((0, jsx_runtime_1.jsx)(react_components_1.TableSelectionCell, { className: (0, react_components_1.mergeClasses)(styles.selectionCell), checked: info.row.getIsSelected(), checkboxIndicator: {
+                        indicator: {
+                            style: { borderRadius: fluent_1.extendedTokens.checkboxBorderRadius },
+                        },
+                    }, onClick: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                         toggleSelectedId(info);

package/DialogContainer/AlertDialog.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AlertDialog = AlertDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 function AlertDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => {
+        }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", onClick: () => {
                                 props.onConfirm?.();
                             }, children: props.confirmText ?? 'Close' }) })] }) }) }));
 }

package/DialogContainer/ConfirmDialog.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmDialog = ConfirmDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 function ConfirmDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: () => {
+        }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", onClick: () => {
                                     props.onCancel?.();
-                                }, children: props.cancelText ?? 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => {
+                                }, children: props.cancelText ?? 'Cancel' }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", onClick: () => {
                                     props.onConfirm?.();
                                 }, children: props.confirmText ?? 'Confirm' })] })] }) }) }));
 }

package/DialogContainer/ErrorDialog.js

@@ -5,16 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
+const fluent_1 = require("../components/fluent");
 function ErrorDialog(props) {
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.DialogTitle, { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+        }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [(0, jsx_runtime_1.jsxs)(react_components_1.DialogTitle, { style: { display: 'flex', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
                                     color: react_components_1.tokens.colorPaletteRedForeground1,
                                     // marginBottom: tokens.spacingVerticalL,
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     marginRight: react_components_1.tokens.spacingHorizontalS,
-                                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Error, {}) }), (0, utils_1.stringWithDefault)(props.title, 'Error')] }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", style: { background: react_components_1.tokens.colorPaletteRedBackground3 }, onClick: () => {
+                                }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Error, {}) }), (0, utils_1.stringWithDefault)(props.title, 'Error')] }), (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: props.message }), (0, jsx_runtime_1.jsx)(react_components_1.DialogActions, { children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", style: { background: react_components_1.tokens.colorPaletteRedBackground3 }, onClick: () => {
                                 props.onConfirm?.();
                             }, children: props.confirmText ?? 'Close' }) })] }) }) }));
 }

package/DialogContainer/PromptDialog.js

@@ -7,6 +7,7 @@ const utils_1 = require("@headless-adminapp/app/dataform/utils");
 const form_1 = require("@headless-adminapp/app/form");
 const locale_1 = require("@headless-adminapp/app/locale");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../components/fluent");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
@@ -25,7 +26,7 @@ function PromptDialog(props) {
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             props.onDismiss?.();
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [!!props.text && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: props.text }), (0, jsx_runtime_1.jsx)("div", { style: {
+        }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 480 }, children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogBody, { children: [!!props.title && (0, jsx_runtime_1.jsx)(react_components_1.DialogTitle, { children: props.title }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [!!props.text && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: props.text }), (0, jsx_runtime_1.jsx)("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'column',
                                     gap: react_components_1.tokens.spacingVerticalM,
@@ -40,9 +41,9 @@ function PromptDialog(props) {
                                                 : '';
                                             return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: attribute.readonly }) }));
                                         } }, attributeName));
-                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
+                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                                     props.onCancel?.();
-                                }, children: props.cancelText ?? 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
+                                }, children: props.cancelText ?? 'Cancel' }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: async () => {
                                     await form.handleSubmit(async (values) => {
                                         props.onConfirm?.(values);
                                     })();

package/Header/MobileHeaderCommandContainer.js

@@ -7,6 +7,7 @@ const MobileHeaderRightContent_1 = require("@headless-adminapp/app/header/compon
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const QuickActionItem_1 = require("../App/QuickActionItem");
+const fluent_1 = require("../components/fluent");
 const MobileHeaderQuickActionButton_1 = require("./MobileHeaderQuickActionButton");
 const useStyles = (0, react_components_1.makeStyles)({
     dangerMenuItem: {
@@ -95,7 +96,7 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'center',
-                    }, children: [subMenuStack.length ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, { size: 20 }), appearance: "subtle", onClick: popStack })) : ((0, jsx_runtime_1.jsx)("div", {})), !subMenuStack.length && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 20 }), appearance: "subtle", onClick: onClose }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    }, children: [subMenuStack.length ? ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronLeft, { size: 20 }), appearance: "subtle", onClick: popStack })) : ((0, jsx_runtime_1.jsx)("div", {})), !subMenuStack.length && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 20 }), appearance: "subtle", onClick: onClose }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         overflowY: 'auto',
                         overflowX: 'hidden',
                     }, children: [!subMenuStack.length && ((0, jsx_runtime_1.jsx)(react_components_1.MenuList, { hasIcons: true, style: { gap: 0 }, children: actions.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, { style: { opacity: 0.2, margin: '0px 5px' } })), group.map((item, index) => {
@@ -103,18 +104,18 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
                                             return null;
                                         }
                                         if (item.type === 'button') {
-                                            return ((0, jsx_runtime_1.jsx)(ButtonItem, { text: item.text, Icon: item.Icon, danger: item.danger, onClick: () => {
+                                            return ((0, jsx_runtime_1.jsx)(ButtonItem, { text: item.text, Icon: item.Icon, danger: item.danger, onClick: async () => {
                                                     onClose();
-                                                    item.onClick?.();
+                                                    await item.onClick?.();
                                                 } }, `${groupIndex}-${index}`));
                                         }
                                         if (item.type === 'menu') {
                                             return ((0, jsx_runtime_1.jsx)(NavigationMenu, { text: item.text, Icon: item.Icon, danger: item.danger, showDivider: item.items.length > 0 && !!item.onClick, showNavigateButton: item.items.length > 0, onNavigate: () => {
                                                     pushStack(item.items);
-                                                }, onClick: () => {
+                                                }, onClick: async () => {
                                                     if (item.onClick) {
                                                         onClose();
-                                                        item.onClick();
+                                                        await item.onClick();
                                                     }
                                                     else {
                                                         pushStack(item.items);
@@ -130,10 +131,10 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
                                                     return;
                                                 }
                                                 pushStack(item.items);
-                                            }, onClick: () => {
+                                            }, onClick: async () => {
                                                 if (item.onClick) {
                                                     onClose();
-                                                    item.onClick();
+                                                    await item.onClick();
                                                 }
                                                 else if (item.items?.length) {
                                                     pushStack(item.items);
@@ -144,7 +145,7 @@ const BottomDrawerMenu = ({ open, onClose, actions, }) => {
 exports.BottomDrawerMenu = BottomDrawerMenu;
 const NavigationMenu = ({ Icon, danger, text, onClick, onNavigate, showDivider, showNavigateButton, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
             maxWidth: 'unset',
             minHeight: 48,
             alignItems: 'center',
@@ -156,14 +157,14 @@ const NavigationMenu = ({ Icon, danger, text, onClick, onNavigate, showDivider,
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 8,
-            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { flex: 1 }, children: text }), showNavigateButton && showDivider && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.5, height: '100%' } }) })), showNavigateButton && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, { size: 20 }), onClick: (e) => {
+            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { flex: 1 }, children: text }), showNavigateButton && showDivider && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.5, height: '100%' } }) })), showNavigateButton && ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronRight, { size: 20 }), onClick: (e) => {
                         e.stopPropagation();
                         onNavigate?.();
                     }, appearance: "subtle" }))] }) }));
 };
 const ButtonItem = ({ Icon, danger, text, onClick }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.MenuItem, { icon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 20 }) : (0, jsx_runtime_1.jsx)(icons_1.IconPlaceholder, { size: 20 }), className: (0, react_components_1.mergeClasses)(danger && styles.dangerMenuItem), style: {
             maxWidth: 'unset',
             minHeight: 48,
             alignItems: 'center',

package/Header/MobileHeaderQuickActionButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileHeaderQuickActionButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
         color: 'inherit !important',
@@ -27,9 +28,8 @@ const useStyles = (0, react_components_1.makeStyles)({
 });
 const MobileHeaderQuickActionButton = ({ disabled, title, Icon, onClick }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), disabled: disabled, appearance: "transparent", style: {
+    return ((0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(Icon, { size: "inherit" }), disabled: disabled, appearance: "transparent", style: {
             position: 'relative',
-            fontWeight: react_components_1.tokens.fontWeightRegular,
             minWidth: 'unset',
         }, className: styles.root, onClick: onClick, children: title }));
 };

package/Insights/Header.js

@@ -8,6 +8,7 @@ const mutable_1 = require("@headless-adminapp/app/mutable");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const fluent_1 = require("../components/fluent");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 const Header = () => {
     const config = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state.config);
@@ -28,9 +29,13 @@ const Header = () => {
             //   ? tokens.colorNeutralBackground1
             //   : 'transparent',
             // backdropFilter: isScrolled ? 'blur(15px)' : 'none',
+            backdropFilter: 'blur(15px)',
+            background: react_components_1.tokens.colorNeutralBackgroundAlpha,
             boxShadow: react_components_1.tokens.shadow4,
-            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            // backgroundColor: tokens.colorNeutralBackground1,
+            // backgroundColor: 'rgba(255, 255, 255, 0.8)',
             // backdropFilter: 'blur(20px)',
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -39,7 +44,7 @@ const Header = () => {
                             display: 'flex',
                             alignItems: 'center',
                             gap: react_components_1.tokens.spacingHorizontalS,
-                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", style: { fontWeight: react_components_1.tokens.fontWeightRegular }, onClick: () => {
+                        }, children: (0, jsx_runtime_1.jsx)(fluent_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Refresh, {}), appearance: "subtle", onClick: () => {
                                 eventManager.emit('INSIGHT_REFRESH_TRIGGER');
                             }, children: "Refresh" }) })] }), !!config.filterAttributes && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: react_components_1.tokens.spacingHorizontalS }, children: Object.entries(config.filterAttributes).map(([attributeName, attribute]) => {
                             return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: filterForm.control, name: attributeName, render: ({ field }) => {

package/Insights/InsightsContainer.js

@@ -12,29 +12,31 @@ const Widgets_1 = require("./Widgets");
 function InsightsContainer() {
     const config = (0, mutable_1.useContextSelector)(insights_1.InsightsContext, (state) => state.config);
     const [isScrolled, setIsScrolled] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
             flexDirection: 'column',
             backgroundColor: react_components_1.tokens.colorNeutralBackground2,
             overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                    // padding: spacingMapping[insightExpereince.style?.spacing ?? 'normal'],
-                    // paddingBottom: 0,
-                    // boxShadow: isScrolled ? tokens.shadow2 : 'none',
-                    // backgroundColor: isScrolled
-                    //   ? tokens.colorNeutralBackground1
-                    //   : 'transparent',
-                    zIndex: 1,
-                    position: 'sticky',
-                    top: 0,
-                }, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { isScrolled: isScrolled }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
-                    overflow: 'hidden',
-                }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { onScroll: (event) => {
-                        const div = event.target;
-                        setIsScrolled(div.scrollTop > 0);
-                    }, children: (0, jsx_runtime_1.jsx)(Widgets_1.Widgets, { widgets: config.widgets }) }) })] }));
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                overflow: 'hidden',
+            }, children: (0, jsx_runtime_1.jsxs)(ScrollView_1.ScrollView, { onScroll: (event) => {
+                    const div = event.target;
+                    setIsScrolled(div.scrollTop > 0);
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            // paddingInline:
+                            //   spacingMapping[insightExpereince.style?.spacing ?? 'normal'],
+                            padding: react_components_1.tokens.spacingHorizontalXL,
+                            paddingBottom: 0,
+                            // boxShadow: isScrolled ? tokens.shadow2 : 'none',
+                            // backgroundColor: isScrolled
+                            //   ? tokens.colorNeutralBackground1
+                            //   : 'transparent',
+                            zIndex: 1,
+                            position: 'sticky',
+                            top: 0,
+                        }, children: (0, jsx_runtime_1.jsx)(Header_1.Header, { isScrolled: isScrolled }) }), (0, jsx_runtime_1.jsx)(Widgets_1.Widgets, { widgets: config.widgets })] }) }) }));
 }

package/Insights/WidgetDataGridContainer.js

@@ -6,16 +6,18 @@ const command_1 = require("@headless-adminapp/app/command");
 const hooks_1 = require("@headless-adminapp/app/command/hooks");
 const DataGridProvider_1 = require("@headless-adminapp/app/datagrid/DataGridProvider");
 const hooks_2 = require("@headless-adminapp/app/datagrid/hooks");
-const hooks_3 = require("@headless-adminapp/app/metadata/hooks");
+const hooks_3 = require("@headless-adminapp/app/hooks");
+const hooks_4 = require("@headless-adminapp/app/metadata/hooks");
 const BodyLoading_1 = require("../components/BodyLoading");
 const DataGrid_1 = require("../DataGrid");
+const GridListContainer_1 = require("../DataGrid/GridListContainer");
 const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
 /*** @deprecated Need refactoring */
 function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }) {
-    const schema = (0, hooks_3.useSchema)(logicalName);
-    const { view: _view, isLoadingView } = (0, hooks_3.useExperienceView)(logicalName, viewId);
-    const { commands: contextCommands } = (0, hooks_3.useExperienceViewCommands)(logicalName);
+    const schema = (0, hooks_4.useSchema)(logicalName);
+    const { view: _view, isLoadingView } = (0, hooks_4.useExperienceView)(logicalName, viewId);
+    const { commands: contextCommands } = (0, hooks_4.useExperienceViewCommands)(logicalName);
     view ??= _view;
     if (!view && isLoadingView) {
         return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, {}) }) }));
@@ -29,6 +31,7 @@ function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, ti
     return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: contextCommands, allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands, allowContextMenu: allowContextMenu }) }));
 }
 const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
+    const isMobile = (0, hooks_3.useIsMobile)();
     const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
     const primaryControl = (0, hooks_2.useGridControlContext)();
     const transformedCommands = (0, command_1.useCommands)(commands, {
@@ -49,5 +52,5 @@ const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
                             display: 'flex',
                             flexDirection: 'column',
                             flex: 1,
-                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: (0, jsx_runtime_1.jsx)(DataGrid_1.GridTableContainer, { disableColumnSort: true, disableColumnFilter: true, disableSelection: true, disableContextMenu: !allowContextMenu }) }) }) }) })] }));
+                        }, children: (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, display: 'flex', minHeight: 300 }, children: !isMobile ? ((0, jsx_runtime_1.jsx)(DataGrid_1.GridTableContainer, { disableColumnSort: true, disableColumnFilter: true, disableSelection: true, disableContextMenu: !allowContextMenu })) : ((0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {})) }) }) }) })] }));
 };

package/Insights/WidgetSection.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 const WidgetSection = ({ children, style, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
@@ -10,7 +11,7 @@ const WidgetSection = ({ children, style, }) => {
             flexDirection: 'column',
             background: react_components_1.tokens.colorNeutralBackground1,
             ...style,
-            borderRadius: react_components_1.tokens.borderRadiusXLarge,
+            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
             overflow: 'hidden',
             boxShadow: 'none',
             position: 'relative',

package/Insights/WidgetTileContainer.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetTileContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 const WidgetTileContainer = ({}) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
             background: react_components_1.tokens.colorNeutralBackground1,
             boxShadow: react_components_1.tokens.shadow2,
-            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            borderRadius: fluent_1.extendedTokens.controlBorderRadius,
             flexDirection: 'column',
         }, children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,

package/OverflowCommandBar/OverflowMenu.js

@@ -7,6 +7,7 @@ const locale_1 = require("@headless-adminapp/app/locale");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const MenuItem_1 = require("../CommandBar/MenuItem");
+const fluent_1 = require("../components/fluent");
 const OverflowMenuDivider_1 = require("./OverflowMenuDivider");
 const utils_1 = require("./utils");
 const OverflowMenu = ({ items, }) => {
@@ -15,7 +16,7 @@ const OverflowMenu = ({ items, }) => {
     if (!isOverflowing) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.ToolbarButton, { ref: ref, type: "button", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreHorizontal, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: items.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(OverflowMenuDivider_1.OverflowMenuDivider, { id: String(groupIndex), previousGroupId: String(groupIndex - 1) })), group.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "below-end", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(fluent_1.ToolbarButton, { ref: ref, type: "button", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreHorizontal, {}) }) }), (0, jsx_runtime_1.jsx)(fluent_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: items.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [groupIndex > 0 && ((0, jsx_runtime_1.jsx)(OverflowMenuDivider_1.OverflowMenuDivider, { id: String(groupIndex), previousGroupId: String(groupIndex - 1) })), group.map((item, index) => {
                                 const text = 'text' in item ? item.text ?? '' : '';
                                 return ((0, jsx_runtime_1.jsx)(OverflowMenuItem, { id: `${groupIndex}-${index}`, Icon: item.Icon, onClick: item.type !== 'label' ? item.onClick : undefined, text: text, danger: item.danger, disabled: item.type !== 'label' ? item.disabled : undefined, items: item.type === 'menu'
                                         ? item.items?.map((x) => (0, utils_1.transformMenuItems)(x, language))