@headless-adminapp/fluent 1.4.15 → 1.4.17

package/App/AppHeaderContianer.js

@@ -12,6 +12,7 @@ const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const route_1 = require("@headless-adminapp/app/route");
+const color_1 = require("@headless-adminapp/app/utils/color");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const AppLogo_1 = require("./AppLogo");
@@ -50,7 +51,7 @@ const NavTitle = () => {
             display: 'flex',
             alignItems: 'center',
             cursor: 'pointer',
-            color: 'white',
+            color: 'inherit',
         }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', paddingLeft: 4, paddingRight: 6 }, children: (0, jsx_runtime_1.jsx)(AppLogo_1.AppLogo, { logo: app.logo, title: app.title }) }), (0, jsx_runtime_1.jsx)(react_components_1.Subtitle2, { style: { paddingLeft: 4 }, children: app.title })] }));
 };
 const NavActions = () => {
@@ -110,31 +111,47 @@ const NavActions = () => {
 };
 const AppDesktopHeader = ({ onNavToggle }) => {
     const isTablet = (0, hooks_2.useIsTablet)();
+    const { appExperience: app } = (0, app_1.useAppContext)();
+    const background = app.headerColor ?? react_components_1.tokens.colorBrandBackground;
+    const color = (0, react_1.useMemo)(() => {
+        if (!background) {
+            return;
+        }
+        return (0, color_1.isColorDark)(background) ? '#FFFFFF' : '#000000';
+    }, [background]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
             height: 50,
             minHeight: 50,
-            background: react_components_1.tokens.colorBrandBackground,
+            background,
             paddingInline: 8,
             gap: 8,
-            color: 'white',
+            color,
         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flex: 1, alignItems: 'center', gap: 8 }, children: [isTablet && (0, jsx_runtime_1.jsx)(NavHamburger, { onNavToggle: onNavToggle }), (0, jsx_runtime_1.jsx)(NavTitle, {})] }), (0, jsx_runtime_1.jsx)(NavActions, {})] }));
 };
 const AppMobileHeader = ({ onNavToggle }) => {
     const showCustomHeader = (0, mutable_1.useContextSelector)(header_1.HeaderContext, (state) => state.showBackButton.length > 0);
+    const { appExperience: app } = (0, app_1.useAppContext)();
     const headerTitle = (0, header_1.useHeaderValue)('title');
     const rightComponent = (0, header_1.useHeaderValue)('rightComponent');
     const showBackButton = (0, header_1.useHeaderValue)('showBackButton');
+    const background = app.headerColor ?? react_components_1.tokens.colorBrandBackground;
+    const color = (0, react_1.useMemo)(() => {
+        if (!background) {
+            return;
+        }
+        return (0, color_1.isColorDark)(background) ? '#FFFFFF' : '#000000';
+    }, [background]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             alignItems: 'center',
             height: 50,
             minHeight: 50,
-            background: react_components_1.tokens.colorBrandBackground,
+            background,
             paddingInline: 8,
             gap: 8,
-            color: 'white',
+            color,
             zIndex: 10,
         }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',

package/App/QuickActionItem.js

@@ -6,19 +6,19 @@ const react_components_1 = require("@fluentui/react-components");
 const route_1 = require("@headless-adminapp/app/route");
 const useStyles = (0, react_components_1.makeStyles)({
     root: {
-        color: 'rgba(255, 255, 255, 1) !important',
+        color: 'inherit !important',
         background: 'rgba(0, 0, 0, 0)',
         transition: 'background 0.3s',
         '&:hover': {
-            color: 'rgba(255, 255, 255, 1)',
+            color: 'inherit',
             background: 'rgba(0, 0, 0, 0.1)',
         },
         '&:active': {
-            color: 'rgba(255, 255, 255, 1)',
+            color: 'inherit',
             background: 'rgba(0, 0, 0, 0.2)',
         },
         '&:focus': {
-            color: 'rgba(255, 255, 255, 1)',
+            color: 'inherit',
             background: 'rgba(0, 0, 0, 0.2)',
         },
     },

package/DataGrid/GridTableContainer.js

@@ -251,6 +251,8 @@ const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort,
                                             height: `${virtualRow.size}px`,
                                             minWidth: `calc(100% - ${hPadding * 2}px)`,
                                             position: 'absolute',
+                                            left: 0,
+                                            right: 0,
                                             transform: `translateY(${virtualRow.start}px)`,
                                         }, onClick: () => {
                                             setSelectedIdsRef.current(() => {

package/Insights/WidgetChartContainer.d.ts

@@ -1,17 +1,19 @@
 import { CommandItemState } from '@headless-adminapp/app/command';
 import { ChartInfo } from '@headless-adminapp/core/experience/insights';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export type ChartComponentProps = {
     dataset: any[];
     chartInfo: any;
 };
 interface WidgetChartContainerProps {
     title: string;
+    subtitle?: string;
     commands?: CommandItemState[][];
     dataset: any[];
     chartInfo: ChartInfo;
     isPending?: boolean;
     isFetching?: boolean;
+    rightContent?: ReactNode;
 }
 export declare const WidgetChart: FC<WidgetChartContainerProps>;
 export {};

package/Insights/WidgetChartContainer.js

@@ -68,7 +68,7 @@ function getChartComponent(chart) {
     }
 }
 const WidgetChart = (props) => {
-    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: props.title, commands: props.commands }), (0, jsx_runtime_1.jsx)(WidgetChartBody, { dataset: props.dataset, chartInfo: props.chartInfo, isFetching: props.isFetching, isPending: props.isPending })] }));
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: props.title, subtitle: props.subtitle, commands: props.commands, rightContent: props.rightContent }), (0, jsx_runtime_1.jsx)(WidgetChartBody, { dataset: props.dataset, chartInfo: props.chartInfo, isFetching: props.isFetching, isPending: props.isPending })] }));
 };
 exports.WidgetChart = WidgetChart;
 const WidgetChartBody = ({ isFetching, isPending, chartInfo, dataset, }) => {

package/Insights/WidgetDataGridContainer.d.ts

@@ -1,3 +1,5 @@
+import { View } from '@headless-adminapp/core/experience/view';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
 import { Filter } from '@headless-adminapp/core/transport';
 interface WidgetDataGridContainerProps {
     title: string;
@@ -5,7 +7,10 @@ interface WidgetDataGridContainerProps {
     maxRecords?: number;
     filter?: Filter;
     commands?: any[][];
+    view?: View<SchemaAttributes>;
+    viewId?: string;
+    allowContextMenu?: boolean;
 }
 /*** @deprecated Need refactoring */
-export declare function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, }: Readonly<WidgetDataGridContainerProps>): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }: Readonly<WidgetDataGridContainerProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetDataGridContainer.js

@@ -2,47 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WidgetDataGridContainer = WidgetDataGridContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_components_1 = require("@fluentui/react-components");
 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 BodyLoading_1 = require("../components/BodyLoading");
 const DataGrid_1 = require("../DataGrid");
+const WidgetSection_1 = require("./WidgetSection");
 const WidgetTitleBar_1 = require("./WidgetTitleBar");
 /*** @deprecated Need refactoring */
-function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, }) {
+function WidgetDataGridContainer({ logicalName, maxRecords, filter, commands, title, view, viewId, allowContextMenu, }) {
     const schema = (0, hooks_3.useSchema)(logicalName);
-    const { view } = (0, hooks_3.useExperienceView)(logicalName);
+    const { view: _view, isLoadingView } = (0, hooks_3.useExperienceView)(logicalName, viewId);
+    const { commands: contextCommands } = (0, hooks_3.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, {}) }) }));
+    }
     if (!view) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
+        return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: "View not found" }) }));
     }
     if (!schema) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "Schema not found" });
+        return ((0, jsx_runtime_1.jsx)(WidgetSection_1.WidgetSection, { children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, position: 'relative' }, children: "Schema not found" }) }));
     }
-    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,
-            // padding: tokens.spacingHorizontalM,
-            flexDirection: 'column',
-        }, children: (0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: [], onChangeView: () => { }, commands: [], allowViewSelection: false, maxRecords: maxRecords, extraFilter: filter, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer, { title: title, commands: commands }) }) }));
+    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, }) => {
+const FormSubgridContainer = ({ title, commands, allowContextMenu, }) => {
     const baseCommandHandleContext = (0, hooks_1.useBaseCommandHandlerContext)();
     const primaryControl = (0, hooks_2.useGridControlContext)();
     const transformedCommands = (0, command_1.useCommands)(commands, {
         ...baseCommandHandleContext,
         primaryControl,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flex: 1,
-            flexDirection: 'column',
-            overflow: 'hidden',
-        }, children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(WidgetSection_1.WidgetSection, { children: [(0, jsx_runtime_1.jsx)(WidgetTitleBar_1.WidgetTitleBar, { title: title, commands: transformedCommands }), (0, jsx_runtime_1.jsx)("div", { style: {
                     flex: 1,
                     display: 'flex',
                     flexDirection: 'column',
@@ -56,5 +49,5 @@ const FormSubgridContainer = ({ title, commands, }) => {
                             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: true }) }) }) }) })] }));
+                        }, 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 }) }) }) }) })] }));
 };

package/Insights/WidgetSection.d.ts

@@ -1,2 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const WidgetSection: FC<PropsWithChildren>;
+interface WidgetSectionProps {
+    style?: React.CSSProperties;
+}
+export declare const WidgetSection: FC<PropsWithChildren<WidgetSectionProps>>;
+export {};

package/Insights/WidgetSection.js

@@ -3,15 +3,17 @@ 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 WidgetSection = ({ children }) => {
+const WidgetSection = ({ children, style, }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             display: 'flex',
             flex: 1,
+            flexDirection: 'column',
             background: react_components_1.tokens.colorNeutralBackground1,
-            boxShadow: 'none',
+            ...style,
             borderRadius: react_components_1.tokens.borderRadiusXLarge,
-            flexDirection: 'column',
             overflow: 'hidden',
+            boxShadow: 'none',
+            position: 'relative',
         }, children: children }));
 };
 exports.WidgetSection = WidgetSection;

package/Insights/WidgetTitleBar.d.ts

@@ -1,8 +1,9 @@
 import { CommandItemState } from '@headless-adminapp/app/command';
 interface WidgetTitleBarProps {
     title: string;
+    subtitle?: string;
     commands?: CommandItemState[][];
     rightContent?: React.ReactNode;
 }
-export declare function WidgetTitleBar({ title, commands, rightContent, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function WidgetTitleBar({ title, subtitle, commands, rightContent, }: Readonly<WidgetTitleBarProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/Insights/WidgetTitleBar.js

@@ -9,7 +9,7 @@ const react_components_1 = require("@fluentui/react-components");
 const locale_1 = require("@headless-adminapp/app/locale");
 const CommandBar_1 = __importDefault(require("../CommandBar"));
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
-function WidgetTitleBar({ title, commands, rightContent, }) {
+function WidgetTitleBar({ title, subtitle, commands, rightContent, }) {
     const { language } = (0, locale_1.useLocale)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
@@ -17,5 +17,5 @@ function WidgetTitleBar({ title, commands, rightContent, }) {
                     paddingBlock: 8,
                     height: 40,
                     alignItems: 'center',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), rightContent, !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flexShrink: 0, display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)(react_components_1.Caption2, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: subtitle })] }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), rightContent, !!commands && commands[0]?.length > 0 && ((0, jsx_runtime_1.jsx)(CommandBar_1.default.Wrapper, { align: "end", children: commands[0].map((command, index) => (0, OverflowCommandBar_1.renderCommandItem)(index, command, language)) }))] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) })] }));
 }

package/PageEntityForm/EditableGridControl/CardUi.d.ts

@@ -0,0 +1,16 @@
+import { SectionEditableGridControl } from '@headless-adminapp/core/experience/form';
+import { Schema } from '@headless-adminapp/core/schema';
+import { FC } from 'react';
+import { Control } from 'react-hook-form';
+interface CardUiProps {
+    schema: Schema;
+    control: SectionEditableGridControl;
+    formControl: Control;
+    onAddRow?: () => void;
+    onRemoveRow?: (index: number) => void;
+    rows: Record<'__key', string>[];
+    alias: string;
+    readOnly?: boolean;
+}
+export declare const CardUi: FC<CardUiProps>;
+export {};

package/PageEntityForm/EditableGridControl/CardUi.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardUi = 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 constants_1 = require("@headless-adminapp/app/dataform/constants");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const useCalculatedAttributeStore_1 = require("@headless-adminapp/app/metadata/hooks/useCalculatedAttributeStore");
+const icons_1 = require("@headless-adminapp/icons");
+const react_hook_form_1 = require("react-hook-form");
+const SectionControl_1 = require("../../DataForm/SectionControl");
+const StandardControl_1 = require("../StandardControl");
+const CardUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, alias, readOnly, }) => {
+    const eventManager = (0, dataform_1.useEventManager)();
+    const calculatedAttributeStore = (0, useCalculatedAttributeStore_1.useCalculatedAttributeStore)();
+    const isMobile = (0, hooks_1.useIsMobile)();
+    const isTablet = (0, hooks_1.useIsTablet)();
+    let controlsPerRow;
+    if (isMobile) {
+        controlsPerRow = 1;
+    }
+    else if (isTablet) {
+        controlsPerRow = 3;
+    }
+    else {
+        controlsPerRow = 6;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: react_components_1.tokens.spacingVerticalM,
+        }, children: [rows.map((item, index) => ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    boxShadow: react_components_1.tokens.shadow4,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    padding: react_components_1.tokens.spacingVerticalM,
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: react_components_1.tokens.spacingVerticalM,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            justifyContent: 'flex-start',
+                            alignItems: 'stretch',
+                            margin: -8,
+                        }, children: control.controls.map((control) => {
+                            const attributeName = typeof control === 'string' ? control : control.attributeName;
+                            const attribute = schema.attributes[attributeName];
+                            if (!attribute) {
+                                return null;
+                            }
+                            const calculatedAttribute = calculatedAttributeStore?.getCalculatedAttributeInfo(schema.logicalName, attributeName);
+                            const isControlReadonly = readOnly ||
+                                (calculatedAttribute && !calculatedAttribute.allowUserToEdit);
+                            return ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    flexShrink: 0,
+                                    flex: `0 0 ${100 / controlsPerRow}%`,
+                                    maxWidth: `${100 / controlsPerRow}%`,
+                                    padding: 8,
+                                }, children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: `${alias}.${index}.${attributeName}`, control: formControl, render: ({ field, fieldState, formState }) => {
+                                        const isError = (fieldState.isTouched || formState.isSubmitted) &&
+                                            !!fieldState.error?.message;
+                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
+                                                    const previousValue = field.value;
+                                                    field.onChange(value);
+                                                    eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
+                                                }, onBlur: field.onBlur, placeholder: "" }) }));
+                                    } }) }, attributeName));
+                        }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "primary", onClick: () => onRemoveRow?.(index), style: {
+                            fontWeight: react_components_1.tokens.fontWeightRegular,
+                            alignSelf: 'flex-start',
+                            color: react_components_1.tokens.colorStatusDangerForeground1,
+                            backgroundColor: react_components_1.tokens.colorStatusDangerBackground1,
+                            minWidth: 0,
+                        }, size: "small", children: "Remove" }))] }, item.__key))), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "primary", onClick: onAddRow, style: { alignSelf: 'flex-start', minWidth: 0 }, size: "small", children: "Add" }))] }));
+};
+exports.CardUi = CardUi;

package/PageEntityForm/EditableGridControl/EditableGridControl.js

@@ -4,9 +4,11 @@ exports.EditableGridControl = EditableGridControl;
 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 constants_1 = require("@headless-adminapp/app/dataform/constants");
 const getRecord_1 = require("@headless-adminapp/app/dataform/DataFormProvider/getRecord");
 const saveRecord_1 = require("@headless-adminapp/app/dataform/utils/saveRecord");
 const form_1 = require("@headless-adminapp/app/form");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const metadata_1 = require("@headless-adminapp/app/metadata");
 const transport_1 = require("@headless-adminapp/app/transport");
@@ -15,10 +17,12 @@ const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const BodyLoading_1 = require("../../components/BodyLoading");
+const CardUi_1 = require("./CardUi");
 const TableUi_1 = require("./TableUi");
 function EditableGridControl({ readOnly, control, }) {
     const recordId = (0, dataform_1.useRecordId)();
     const dataService = (0, transport_1.useDataService)();
+    const isMobile = (0, hooks_1.useIsMobile)();
     const { schemaStore } = (0, metadata_1.useMetadata)();
     const { language, region } = (0, locale_1.useLocale)();
     const formValidationStrings = (0, form_1.useFormValidationStrings)();
@@ -55,6 +59,7 @@ function EditableGridControl({ readOnly, control, }) {
         },
         enabled: !!recordId && !control.alias,
     });
+    const eventManager = (0, dataform_1.useEventManager)();
     const formInstanceRef = (0, react_1.useRef)(localFormInstance);
     formInstanceRef.current = localFormInstance;
     (0, react_1.useEffect)(() => {
@@ -91,6 +96,7 @@ function EditableGridControl({ readOnly, control, }) {
             }
         });
         fieldArray.append(newItem);
+        eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, `${alias}.${fieldArray.fields.length}`, newItem, null);
     };
     const handleSave = async () => {
         await localFormInstance.handleSubmit(async (values) => {
@@ -127,7 +133,15 @@ function EditableGridControl({ readOnly, control, }) {
                     alignItems: 'center',
                 }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: control.label }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)("div", { style: { marginRight: -12 }, children: !control.alias && !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Save, {}), appearance: "subtle", style: { minWidth: 0 }, disabled: localFormInstance.formState.isSubmitting ||
                                     !localFormInstance.formState.isValid ||
-                                    !localFormInstance.formState.isDirty, onClick: handleSave, children: "Save" })) })] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 16, position: 'relative' }, children: (0, jsx_runtime_1.jsx)(TableUi_1.TableUi, { schema: schema, control: control, formControl: formControl, alias: alias, onAddRow: handleAddRow, onRemoveRow: (index) => {
+                                    !localFormInstance.formState.isDirty, onClick: handleSave, children: "Save" })) })] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { padding: 16, position: 'relative' }, children: !isMobile &&
+                    control.format === 'grid' &&
+                    control.controls.length < 10 ? ((0, jsx_runtime_1.jsx)(TableUi_1.TableUi, { schema: schema, control: control, formControl: formControl, alias: alias, onAddRow: handleAddRow, onRemoveRow: (index) => {
+                        const previousValue = fieldArray.fields[index];
                         fieldArray.remove(index);
-                    }, rows: fieldArray.fields }) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching || localFormInstance.formState.isSubmitting })] }));
+                        eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, `${alias}.${index}`, null, previousValue);
+                    }, rows: fieldArray.fields, readOnly: readOnly })) : ((0, jsx_runtime_1.jsx)(CardUi_1.CardUi, { schema: schema, control: control, formControl: formControl, alias: alias, onAddRow: handleAddRow, onRemoveRow: (index) => {
+                        const previousValue = fieldArray.fields[index];
+                        fieldArray.remove(index);
+                        eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, `${alias}.${index}`, null, previousValue);
+                    }, rows: fieldArray.fields, readOnly: readOnly })) }), (0, jsx_runtime_1.jsx)(BodyLoading_1.BodyLoading, { loading: isFetching || localFormInstance.formState.isSubmitting })] }));
 }

package/PageEntityForm/EditableGridControl/TableUi.d.ts

@@ -10,6 +10,7 @@ interface TableUiProps {
     onRemoveRow?: (index: number) => void;
     rows: Record<'__key', string>[];
     alias: string;
+    readOnly?: boolean;
 }
 export declare const TableUi: FC<TableUiProps>;
 export {};

package/PageEntityForm/EditableGridControl/TableUi.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableUi = 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 constants_1 = require("@headless-adminapp/app/dataform/constants");
+const useCalculatedAttributeStore_1 = require("@headless-adminapp/app/metadata/hooks/useCalculatedAttributeStore");
 const icons_1 = require("@headless-adminapp/icons");
 const react_hook_form_1 = require("react-hook-form");
 const SectionControl_1 = require("../../DataForm/SectionControl");
@@ -39,26 +42,35 @@ const useStyles = (0, react_components_1.makeStyles)({
         },
     },
 });
-const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, alias, }) => {
+const TableUi = ({ schema, control, formControl, onAddRow, onRemoveRow, rows, alias, readOnly, }) => {
     const styles = useStyles();
-    return ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [control.controls.map((_, index) => ((0, jsx_runtime_1.jsx)("col", {}, index))), (0, jsx_runtime_1.jsx)("col", { style: { width: 36 } })] }), (0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
+    const eventManager = (0, dataform_1.useEventManager)();
+    const calculatedAttributeStore = (0, useCalculatedAttributeStore_1.useCalculatedAttributeStore)();
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Table, { className: styles.table, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [control.controls.map((_, index) => ((0, jsx_runtime_1.jsx)("col", {}, index))), !readOnly && (0, jsx_runtime_1.jsx)("col", { style: { width: 36 } })] }), (0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
                             const attributeName = typeof control === 'string' ? control : control.attributeName;
                             const attribute = schema.attributes[attributeName];
                             if (!attribute) {
                                 return null;
                             }
                             return ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: attribute.label ?? attribute.label }, attributeName));
-                        }), (0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "subtle", onClick: onAddRow }) })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: rows.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
+                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableHeaderCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "subtle", onClick: onAddRow }) }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { children: rows.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_components_1.TableRow, { children: [control.controls.map((control) => {
                             const attributeName = typeof control === 'string' ? control : control.attributeName;
                             const attribute = schema.attributes[attributeName];
                             if (!attribute) {
                                 return null;
                             }
+                            const calculatedAttribute = calculatedAttributeStore?.getCalculatedAttributeInfo(schema.logicalName, attributeName);
+                            const isControlReadonly = readOnly ||
+                                (calculatedAttribute && !calculatedAttribute.allowUserToEdit);
                             return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: `${alias}.${index}.${attributeName}`, control: formControl, render: ({ field, fieldState, formState }) => {
                                         const isError = (fieldState.isTouched || formState.isSubmitted) &&
                                             !!fieldState.error?.message;
-                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, onChange: field.onChange, onBlur: field.onBlur, placeholder: "" }) }));
+                                        return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelHidden: true, labelPosition: "top", isError: isError, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value ?? null, readOnly: isControlReadonly, onChange: (value) => {
+                                                    const previousValue = field.value;
+                                                    field.onChange(value);
+                                                    eventManager.emit(constants_1.EVENT_KEY_ON_FIELD_CHANGE, field.name, value, previousValue);
+                                                }, onBlur: field.onBlur, placeholder: "" }) }));
                                     } }) }, attributeName));
-                        }), (0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) })] }, item.__key))) })] }));
+                        }), !readOnly && ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, { size: 16 }), appearance: "subtle", onClick: () => onRemoveRow?.(index) }) }))] }, item.__key))) })] }));
 };
 exports.TableUi = TableUi;

package/PageEntityForm/SectionContainer.js

@@ -11,6 +11,7 @@ const historystate_1 = require("@headless-adminapp/app/historystate");
 const hooks_2 = require("@headless-adminapp/app/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
 const utils_2 = require("@headless-adminapp/app/locale/utils");
+const useCalculatedAttributeStore_1 = require("@headless-adminapp/app/metadata/hooks/useCalculatedAttributeStore");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
@@ -32,6 +33,7 @@ function SectionContainer({ section, skeleton, }) {
     const hiddenControls = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenControls);
     const requiredFields = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.requiredFields);
     const hiddenSections = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.hiddenSections);
+    const calculatedAttributeStore = (0, useCalculatedAttributeStore_1.useCalculatedAttributeStore)();
     const visibleControls = (0, react_1.useMemo)(() => section.controls.filter((control) => {
         return !(0, utils_1.getIsControlHidden)({
             control,
@@ -66,6 +68,7 @@ function SectionContainer({ section, skeleton, }) {
                         disabledFields: disabledControls,
                         attribute,
                         control,
+                        calculatedAttribute: calculatedAttributeStore?.getCalculatedAttributeInfo(schema.logicalName, control.attributeName),
                     });
                     const required = (0, utils_1.getIsFieldRequired)({
                         attribute,
@@ -105,6 +108,7 @@ function SectionContainer({ section, skeleton, }) {
                         disabledFields: disabledControls,
                         attribute: null,
                         control,
+                        calculatedAttribute: undefined,
                     });
                     return ((0, jsx_runtime_1.jsx)(EditableGridControl_1.EditableGridControl, { readOnly: disabled, control: control }));
                 }

package/form/controls/CurrencyControl.js

@@ -11,6 +11,7 @@ function CurrencyControl({ value, onChange, id, name, onBlur, onFocus,
 disabled, placeholder, autoFocus, 
 // borderOnFocusOnly,
 readOnly, skeleton, }) {
+    const isReadOnly = readOnly || disabled;
     const symbol = (0, locale_1.useCurrencySymbol)();
     const [internalValue, setInternalValue] = (0, react_1.useState)(value ? value.toString() : '');
     const internalValueRef = (0, react_1.useRef)(internalValue);
@@ -49,7 +50,11 @@ readOnly, skeleton, }) {
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: readOnly || disabled, style: {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, autoFocus: autoFocus, name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), appearance: "filled-darker", onFocus: () => onFocus?.(), contentBefore: (0, jsx_runtime_1.jsx)("div", { children: symbol }), readOnly: isReadOnly, className: (0, react_components_1.mergeClasses)(isReadOnly && 'TextControl_readonly'), style: {
             width: '100%',
+        }, input: {
+            style: {
+                width: '100%',
+            },
         } }));
 }

package/form/controls/DateControl.js

@@ -27,6 +27,10 @@ function DateControl({ value, onChange, id, name, onBlur, onFocus, placeholder,
             onChange?.(date ? (0, dayjs_1.default)(date).format('YYYY-MM-DD') : null);
         }, strings: datePickerStrings, style: {
             width: '100%',
+        }, input: {
+            style: {
+                width: '100%',
+            },
         }, contentAfter: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',
                 alignItems: 'center',

package/form/controls/DecimalControl.js

@@ -52,5 +52,9 @@ function DecimalControl({ value, onChange, id, name, onBlur, onFocus, error, dis
     }
     return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: internalValue, onChange: handleChange, onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), readOnly: readOnly || disabled, style: {
             width: '100%',
+        }, input: {
+            style: {
+                width: '100%',
+            },
         } }));
 }

package/form/controls/IntegerControl.js

@@ -11,6 +11,10 @@ function IntegerControl({ value, onChange, id, name, onBlur, onFocus, error, dis
     }
     return ((0, jsx_runtime_1.jsx)(react_components_1.SpinButton, { appearance: "filled-darker", placeholder: placeholder, id: id, name: name, value: value ?? null, readOnly: readOnly || disabled, style: {
             width: '100%',
+        }, input: {
+            style: {
+                width: '100%',
+            },
         }, onChange: (e, data) => {
             if (data.value !== undefined) {
                 onChange?.(data.value);

package/form/controls/LookupControl.js

@@ -101,7 +101,11 @@ const LookupControlMd = ({ value, onChange, id, name, onBlur, onFocus, placehold
     if (skeleton) {
         return (0, jsx_runtime_1.jsx)(SkeletonControl_1.SkeletonControl, {});
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, autoComplete: "off", readOnly: readOnly || disabled, 
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.Combobox, { name: name, appearance: "filled-darker", expandIcon: readOnly || disabled ? null : isLoading ? ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" })) : ((0, jsx_runtime_1.jsx)(icons_1.Icons.Search, { size: 18 })), placeholder: !value ? placeholder : '', inputMode: "search", style: { width: '100%', minWidth: 'unset' }, input: {
+                    style: {
+                        width: '100%',
+                    },
+                }, autoComplete: "off", readOnly: readOnly || disabled, 
                 // disabled={disabled}
                 open: open && !value && !readOnly && !disabled, value: !value ? searchText : '', onOpenChange: (e, data) => setOpen(data.open), onChange: (e) => {
                     setSearchText(e.target.value);

package/form/controls/TextControl.js

@@ -28,5 +28,9 @@ readOnly, appearance = 'filled-darker', maxLength, skeleton, }) {
         // readOnly={readOnly || disabled}
         readOnly: readonly, autoComplete: autoComplete, autoCorrect: autoCorrect, autoCapitalize: autoCapitalize, className: (0, react_components_1.mergeClasses)(readonly && 'TextControl_readonly'), style: {
             width: '100%',
-        }, maxLength: maxLength }));
+        }, maxLength: maxLength, input: {
+            style: {
+                width: '100%',
+            },
+        } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "1.4.15",
+  "version": "1.4.17",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -52,5 +52,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "a95b4f3c11bcb78f672fb7299bb461368d70bd48"
+  "gitHead": "a5a471cce4df9e87552b23e3de8c90d53e4adf43"
 }