@solidxai/core-ui 0.1.8-beta.8 → 0.1.8

package/dist/components/core/form/SolidFormView.js

@@ -74,6 +74,7 @@ import { SolidSelectionDynamicField } from "./fields/SolidSelectionDynamicField"
 import { SolidSelectionStaticField } from "./fields/SolidSelectionStaticField";
 import { SolidShortTextField } from "./fields/SolidShortTextField";
 import { SolidTimeField } from "./fields/SolidTimeField";
+import { SolidComputedField } from "./fields/SolidComputedField";
 import { getExtensionComponent, getExtensionFunction } from "../../../helpers/registry";
 import { SolidPasswordField } from "./fields/SolidPasswordField";
 import { SolidEmailField } from "./fields/SolidEmailField";
@@ -84,6 +85,7 @@ import { hasAnyRole } from "../../../helpers/rolesHelper";
 import SolidChatterLocaleTabView from "../locales/SolidChatterLocaleTabView";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { useLazyGetMcpUrlQuery, useLazyGetSolidSettingsQuery } from "../../../redux/api/solidSettingsApi";
+import { getSettingsMap } from "../../../helpers/settingsPayload";
 import { SolidFormFooter } from "./SolidFormFooter";
 import { normalizeSolidFormActionPath } from "../../../helpers/routePaths";
 import { showToast } from "../../../redux/features/toastSlice";
@@ -177,6 +179,9 @@ var fieldFactory = function (type, fieldContext, setLightboxUrls, setOpenLightbo
     if (type === 'email') {
         return new SolidEmailField(fieldContext);
     }
+    if (type === 'computed') {
+        return new SolidComputedField(fieldContext);
+    }
     return null;
 };
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
@@ -263,13 +268,28 @@ var SolidPageTab = function (_a) {
     return _jsx(_Fragment, { children: children });
 };
 var SolidNotebook = function (_a) {
-    var children = _a.children, activeTab = _a.activeTab, embeded = _a.embeded;
+    var children = _a.children, activeTab = _a.activeTab, embeded = _a.embeded, requestedTab = _a.requestedTab, requestedTabVersion = _a.requestedTabVersion;
     var childrenArray = React.Children.toArray(children).filter(function (child) { return !!child; });
     var router = useRouter();
     var pathname = usePathname();
     var searchParams = useSearchParams();
     var _b = useState(activeTab), localActiveTab = _b[0], setLocalActiveTab = _b[1];
     var effectiveTab = embeded ? localActiveTab : activeTab;
+    useEffect(function () {
+        if (!requestedTab)
+            return;
+        var exists = childrenArray.some(function (child) { var _a; return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.tabKey) === requestedTab; });
+        if (!exists)
+            return;
+        if (embeded) {
+            setLocalActiveTab(requestedTab);
+        }
+        else {
+            var queryParams = new URLSearchParams(searchParams.toString());
+            queryParams.set('activeTab', requestedTab);
+            router.push("".concat(pathname, "?").concat(queryParams.toString()));
+        }
+    }, [requestedTabVersion]);
     var activeIndex = useMemo(function () {
         var idx = childrenArray.findIndex(function (child) { var _a; return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.tabKey) === effectiveTab; });
         return idx >= 0 ? idx : 0;
@@ -308,6 +328,35 @@ var SolidDynamicWidget = function (_a) {
     };
     return (_jsx("div", { className: "solid-tab-view w-full", children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
 };
+var FormikSubmitWatcher = function (_a) {
+    var formik = _a.formik, tabFieldsRef = _a.tabFieldsRef, embeded = _a.embeded, searchParams = _a.searchParams, setRequestedTab = _a.setRequestedTab, setRequestedTabVersion = _a.setRequestedTabVersion;
+    var lastHandledRef = useRef(0);
+    useEffect(function () {
+        var _a;
+        if (formik.submitCount === lastHandledRef.current)
+            return;
+        if (formik.isSubmitting)
+            return;
+        lastHandledRef.current = formik.submitCount;
+        var erroredKeys = Object.keys(formik.errors || {});
+        if (erroredKeys.length === 0)
+            return;
+        if (!tabFieldsRef.current || tabFieldsRef.current.length === 0)
+            return;
+        var currentActive = embeded ? null : (searchParams.get("activeTab") || "");
+        var currentHasError = currentActive
+            ? (_a = tabFieldsRef.current.find(function (t) { return t.tabKey === currentActive; })) === null || _a === void 0 ? void 0 : _a.fields.some(function (f) { return erroredKeys.includes(f); })
+            : false;
+        if (currentHasError)
+            return;
+        var firstErroredTab = tabFieldsRef.current.find(function (t) { return t.fields.some(function (f) { return erroredKeys.includes(f); }); });
+        if (firstErroredTab) {
+            setRequestedTab(firstErroredTab.tabKey);
+            setRequestedTabVersion(function (v) { return v + 1; });
+        }
+    }, [formik.submitCount, formik.isSubmitting]);
+    return null;
+};
 var SolidPage = function (_a) {
     var attrs = _a.attrs, children = _a.children, key = _a.key, formik = _a.formik, fields = _a.fields;
     var fieldsName = fields.map(function (f) { return f.attrs.name; });
@@ -355,51 +404,56 @@ var SolidPage = function (_a) {
 //     });
 // };
 var SolidFormView = function (params) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var _r = useSession(), session = _r.data, status = _r.status;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _u = useSession(), session = _u.data, status = _u.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
     var pathname = usePathname();
     var router = useRouter();
     var dispatch = useDispatch();
     var searchParams = useSearchParams();
-    var _s = useState(false), confirmVisible = _s[0], setConfirmVisible = _s[1];
+    var _v = useState(false), confirmVisible = _v[0], setConfirmVisible = _v[1];
     var confirmResolveRef = useRef();
-    var _t = useState(false), redirectToList = _t[0], setRedirectToList = _t[1];
-    var _u = useState('en'), selectedLocale = _u[0], setSelectedLocale = _u[1];
-    var _v = useState(null), defaultEntityLocaleId = _v[0], setDefaultEntityLocaleId = _v[1];
-    var _w = useState(false), isDeleteDialogVisible = _w[0], setDeleteDialogVisible = _w[1];
-    var _x = useState(false), isLayoutDialogVisible = _x[0], setLayoutDialogVisible = _x[1];
-    var _y = useState(null), published = _y[0], setPublished = _y[1];
-    var _z = useState([]), actionsAllowed = _z[0], setActionsAllowed = _z[1];
-    var _0 = useState(params.embeded === true ? "edit" : "view"), viewMode = _0[0], setViewMode = _0[1];
-    var _1 = useState(false), createMode = _1[0], setCreateMode = _1[1];
-    var _2 = useState(false), openLightbox = _2[0], setOpenLightbox = _2[1];
-    var _3 = useState([]), lightboxUrls = _3[0], setLightboxUrls = _3[1];
-    var _4 = useState(false), isShowChatter = _4[0], setShowChatter = _4[1];
-    var _5 = useState(360), chatterLocaleWidth = _5[0], setChatterLocaleWidth = _5[1];
-    var _6 = useState(false), isResizingChatterLocale = _6[0], setIsResizingChatterLocale = _6[1];
-    var _7 = useState(false), isSubmitting = _7[0], setIsSubmitting = _7[1];
-    var _8 = useState(""), solidWorkflowFieldValue = _8[0], setSolidWorkflowFieldValue = _8[1];
-    var _9 = useState(1), defaultTabViewOptionIndex = _9[0], setDefaultTabViewOptionIndex = _9[1];
+    var _w = useState(false), redirectToList = _w[0], setRedirectToList = _w[1];
+    var _x = useState('en'), selectedLocale = _x[0], setSelectedLocale = _x[1];
+    var _y = useState(null), defaultEntityLocaleId = _y[0], setDefaultEntityLocaleId = _y[1];
+    var _z = useState(false), isDeleteDialogVisible = _z[0], setDeleteDialogVisible = _z[1];
+    var _0 = useState(false), isLayoutDialogVisible = _0[0], setLayoutDialogVisible = _0[1];
+    var _1 = useState(null), published = _1[0], setPublished = _1[1];
+    var _2 = useState([]), actionsAllowed = _2[0], setActionsAllowed = _2[1];
+    var _3 = useState(params.embeded === true ? "edit" : "view"), viewMode = _3[0], setViewMode = _3[1];
+    var _4 = useState(false), createMode = _4[0], setCreateMode = _4[1];
+    var _5 = useState(false), openLightbox = _5[0], setOpenLightbox = _5[1];
+    var _6 = useState([]), lightboxUrls = _6[0], setLightboxUrls = _6[1];
+    var _7 = useState(false), isShowChatter = _7[0], setShowChatter = _7[1];
+    var _8 = useState(360), chatterLocaleWidth = _8[0], setChatterLocaleWidth = _8[1];
+    var _9 = useState(false), isResizingChatterLocale = _9[0], setIsResizingChatterLocale = _9[1];
+    var _10 = useState(false), isSubmitting = _10[0], setIsSubmitting = _10[1];
+    var _11 = useState(false), isMobileViewport = _11[0], setIsMobileViewport = _11[1];
+    var solidFormWrapperRef = useRef(null);
+    var tabFieldsRef = useRef([]);
+    var _12 = useState(null), requestedTab = _12[0], setRequestedTab = _12[1];
+    var _13 = useState(0), requestedTabVersion = _13[0], setRequestedTabVersion = _13[1];
+    var _14 = useState(""), solidWorkflowFieldValue = _14[0], setSolidWorkflowFieldValue = _14[1];
+    var _15 = useState(1), defaultTabViewOptionIndex = _15[0], setDefaultTabViewOptionIndex = _15[1];
     var errorFields = [];
     var triggerCheckIfPermissionExists = useLazyCheckIfPermissionExistsQuery()[0];
-    var _10 = useState(null), mcpUrl = _10[0], setMcpUrl = _10[1];
+    var _16 = useState(null), mcpUrl = _16[0], setMcpUrl = _16[1];
     var getMcpUrl = useLazyGetMcpUrlQuery()[0];
     // when rendering the form view we will optionally get action params...
     // these we can bubble up in the event that is being raised onFormLayoutLoad, onFormDataLoad & onFormLoad
     var actionName = searchParams.get('actionName');
     var actionType = searchParams.get('actionType');
     var actionContext = searchParams.get('actionContext');
-    var _11 = useLazyGetSolidSettingsQuery(), trigger = _11[0], solidSettingsData = _11[1].data;
+    var _17 = useLazyGetSolidSettingsQuery(), trigger = _17[0], solidSettingsData = _17[1].data;
+    var solidSettingsMap = useMemo(function () { return getSettingsMap(solidSettingsData); }, [solidSettingsData]);
     useEffect(function () {
         trigger(""); // Fetch settings on mount
     }, []);
     useEffect(function () {
-        var _a, _b;
-        if (((_a = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _a === void 0 ? void 0 : _a.mcpEnabled) && ((_b = solidSettingsData === null || solidSettingsData === void 0 ? void 0 : solidSettingsData.data) === null || _b === void 0 ? void 0 : _b.mcpServerUrl)) {
+        if ((solidSettingsMap === null || solidSettingsMap === void 0 ? void 0 : solidSettingsMap.mcpEnabled) && (solidSettingsMap === null || solidSettingsMap === void 0 ? void 0 : solidSettingsMap.mcpServerUrl)) {
             enableSolidXAiPanel();
         }
-    }, [solidSettingsData]);
+    }, [solidSettingsMap]);
     var enableSolidXAiPanel = function () { return __awaiter(void 0, void 0, void 0, function () {
         var queryData, queryString, response, error_1;
         var _a, _b;
@@ -428,20 +482,34 @@ var SolidFormView = function (params) {
         });
     }); };
     var op = useRef(null);
+    var MIN_CHATTER_WIDTH = 320;
+    var MIN_FORM_SECTION_WIDTH = 420;
+    var getMaxChatterWidth = function () {
+        var _a, _b;
+        var wrapperWidth = (_b = (_a = solidFormWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : window.innerWidth;
+        return Math.max(MIN_CHATTER_WIDTH, wrapperWidth - MIN_FORM_SECTION_WIDTH);
+    };
+    var clampChatterWidth = function (width) {
+        var maxWidth = getMaxChatterWidth();
+        return Math.max(MIN_CHATTER_WIDTH, Math.min(width, maxWidth));
+    };
     useEffect(function () {
         var stored = localStorage.getItem('chatter_locale_width');
         if (stored) {
             var parsed = parseInt(stored, 10);
-            var clampedWidth = Math.max(320, Math.min(parsed, 420));
+            var clampedWidth = clampChatterWidth(parsed);
             setChatterLocaleWidth(clampedWidth);
         }
     }, []);
     useEffect(function () {
         var handleMouseMove = function (e) {
+            var _a, _b;
             if (!isResizingChatterLocale)
                 return;
-            var newWidth = window.innerWidth - e.clientX;
-            var clampedWidth = Math.max(320, Math.min(newWidth, 420));
+            var wrapperRect = (_a = solidFormWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var rightEdge = (_b = wrapperRect === null || wrapperRect === void 0 ? void 0 : wrapperRect.right) !== null && _b !== void 0 ? _b : window.innerWidth;
+            var newWidth = rightEdge - e.clientX;
+            var clampedWidth = clampChatterWidth(newWidth);
             setChatterLocaleWidth(clampedWidth);
             localStorage.setItem('chatter_locale_width', clampedWidth.toString());
         };
@@ -457,6 +525,25 @@ var SolidFormView = function (params) {
             window.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isResizingChatterLocale]);
+    useEffect(function () {
+        var updateViewportFlag = function () { return setIsMobileViewport(window.innerWidth <= 1199); };
+        updateViewportFlag();
+        window.addEventListener('resize', updateViewportFlag);
+        return function () { return window.removeEventListener('resize', updateViewportFlag); };
+    }, []);
+    useEffect(function () {
+        var handleWindowResize = function () {
+            setChatterLocaleWidth(function (currentWidth) {
+                var clamped = clampChatterWidth(currentWidth);
+                if (clamped !== currentWidth) {
+                    localStorage.setItem('chatter_locale_width', clamped.toString());
+                }
+                return clamped;
+            });
+        };
+        window.addEventListener('resize', handleWindowResize);
+        return function () { return window.removeEventListener('resize', handleWindowResize); };
+    }, []);
     useEffect(function () {
         var mode = searchParams.get('viewMode');
         var locale = searchParams.get('locale');
@@ -527,21 +614,22 @@ var SolidFormView = function (params) {
     // }y
     var entityApi = createSolidEntityApi(params.modelName);
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, usePatchUpdateSolidEntityMutation = entityApi.usePatchUpdateSolidEntityMutation, usePublishSolidEntityMutation = entityApi.usePublishSolidEntityMutation, useUnpublishSolidEntityMutation = entityApi.useUnpublishSolidEntityMutation;
-    var _12 = useCreateSolidEntityMutation(), createEntity = _12[0], _13 = _12[1], isEntityCreateSuccess = _13.isSuccess, isEntityCreateError = _13.isError, entityCreateError = _13.error;
-    var _14 = useUpdateSolidEntityMutation(), updateEntity = _14[0], _15 = _14[1], isEntityUpdateSuceess = _15.isSuccess, isEntityUpdateError = _15.isError, entityUpdateError = _15.error;
-    var _16 = useDeleteSolidEntityMutation(), deleteEntity = _16[0], _17 = _16[1], isEntityDeleteSuceess = _17.isSuccess, isEntityDeleteError = _17.isError, entityDeleteError = _17.error;
-    var _18 = usePatchUpdateSolidEntityMutation(), patchEntity = _18[0], _19 = _18[1], isEntityPatchSuceess = _19.isSuccess, isEntityPatchError = _19.isError, entityPatchError = _19.error;
-    var _20 = usePublishSolidEntityMutation(), publishSolidEntity = _20[0], _21 = _20[1], isEntityPublishedSuccess = _21.isSuccess, isEntityPublishedError = _21.isError, entityPublishedError = _21.error;
-    var _22 = useUnpublishSolidEntityMutation(), unpublishSolidEntity = _22[0], _23 = _22[1], isEntityUnpublishedSuccess = _23.isSuccess, isEntityUnpublishedError = _23.isError, entityUnpublishedError = _23.error;
+    var _18 = useCreateSolidEntityMutation(), createEntity = _18[0], _19 = _18[1], isEntityCreateSuccess = _19.isSuccess, isEntityCreateError = _19.isError, entityCreateError = _19.error;
+    var _20 = useUpdateSolidEntityMutation(), updateEntity = _20[0], _21 = _20[1], isEntityUpdateSuceess = _21.isSuccess, isEntityUpdateError = _21.isError, entityUpdateError = _21.error;
+    var _22 = useDeleteSolidEntityMutation(), deleteEntity = _22[0], _23 = _22[1], isEntityDeleteSuceess = _23.isSuccess, isEntityDeleteError = _23.isError, entityDeleteError = _23.error;
+    var _24 = usePatchUpdateSolidEntityMutation(), patchEntity = _24[0], _25 = _24[1], isEntityPatchSuceess = _25.isSuccess, isEntityPatchError = _25.isError, entityPatchError = _25.error;
+    var _26 = usePublishSolidEntityMutation(), publishSolidEntity = _26[0], _27 = _26[1], isEntityPublishedSuccess = _27.isSuccess, isEntityPublishedError = _27.isError, entityPublishedError = _27.error;
+    var _28 = useUnpublishSolidEntityMutation(), unpublishSolidEntity = _28[0], _29 = _28[1], isEntityUnpublishedSuccess = _29.isSuccess, isEntityUnpublishedError = _29.isError, entityUnpublishedError = _29.error;
     // - - - - - - - - - - - -- - - - - - - - - - - - METADATA here
     // Get the form view layout & metadata first. 
     var formViewMetaDataQs = qs.stringify(__assign(__assign({}, params), { viewType: 'form', defaultEntityLocaleId: defaultEntityLocaleId }), {
         encodeValuesOnly: true,
     });
-    var _24 = useState({}), formViewMetaData = _24[0], setFormViewMetaData = _24[1];
-    var _25 = useState(null), formViewLayout = _25[0], setFormViewLayout = _25[1];
-    var _26 = useGetSolidViewLayoutQuery(formViewMetaDataQs), solidFormViewMetaData = _26.data, solidFormViewMetaDataIsLoading = _26.isLoading;
-    var _27 = useState(true), refreshChatterMessage = _27[0], setRefreshChatterMessage = _27[1];
+    var _30 = useState({}), formViewMetaData = _30[0], setFormViewMetaData = _30[1];
+    var _31 = useState(null), formViewLayout = _31[0], setFormViewLayout = _31[1];
+    var _32 = useGetSolidViewLayoutQuery(formViewMetaDataQs), solidFormViewMetaData = _32.data, solidFormViewMetaDataIsLoading = _32.isLoading;
+    var entityDisplayName = ((_c = (_b = (_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.displayName) || params.modelName;
+    var _33 = useState(true), refreshChatterMessage = _33[0], setRefreshChatterMessage = _33[1];
     useEffect(function () {
         if (isEntityCreateSuccess == true ||
             isEntityUpdateSuceess == true ||
@@ -775,7 +863,7 @@ var SolidFormView = function (params) {
                 toPopulateMedia.push(fieldMetadata.name);
             }
         }
-        if (((_a = formViewLayout.attrs) === null || _a === void 0 ? void 0 : _a.workflowField) && ((_b = solidFieldsMetadata[formViewLayout.attrs.workflowField]) === null || _b === void 0 ? void 0 : _b.type) === 'relation' && ((_c = solidFieldsMetadata[formViewLayout.attrs.workflowField]) === null || _c === void 0 ? void 0 : _c.relationType) === 'many-to-one') {
+        if (((_d = formViewLayout.attrs) === null || _d === void 0 ? void 0 : _d.workflowField) && ((_e = solidFieldsMetadata[formViewLayout.attrs.workflowField]) === null || _e === void 0 ? void 0 : _e.type) === 'relation' && ((_f = solidFieldsMetadata[formViewLayout.attrs.workflowField]) === null || _f === void 0 ? void 0 : _f.relationType) === 'many-to-one') {
             toPopulate.push(solidFieldsMetadata[formViewLayout.attrs.workflowField].name);
         }
     }
@@ -784,10 +872,10 @@ var SolidFormView = function (params) {
     var formViewDataQs = qs.stringify({ populate: toPopulate, populateMedia: toPopulateMedia }, {
         encodeValuesOnly: true,
     });
-    var _28 = useState({}), initialEntityData = _28[0], setInitialEntityData = _28[1];
-    var _29 = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, {
+    var _34 = useState({}), initialEntityData = _34[0], setInitialEntityData = _34[1];
+    var _35 = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, {
         skip: params.id === 'new'
-    }), solidFormViewData = _29.data, solidFormViewDataIsLoading = _29.isLoading, refetchSolidFormViewData = _29.refetch;
+    }), solidFormViewData = _35.data, solidFormViewDataIsLoading = _35.isLoading, refetchSolidFormViewData = _35.refetch;
     useEffect(function () {
         if (params.id !== 'new') {
             refetchSolidFormViewData();
@@ -1069,7 +1157,7 @@ var SolidFormView = function (params) {
             enableReinitialize: true,
             onSubmit: onFormikSubmit,
         });
-        return (_jsx("div", { className: "solid-form-wrapper", children: _jsxs("div", { className: "solid-form-section", children: [_jsx("div", { className: "page-header solid-list-toolbar flex-column lg:flex-row", children: _jsxs("div", { className: "flex justify-content-between w-full solid-form-toolbar-row", children: [_jsx("div", { className: "flex gap-3 align-items-center solid-form-toolbar-left", children: _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: "Loading form" }) }), _jsx("div", { className: "flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions", children: _jsx(SolidHeaderRequestStatus, { label: "Loading..." }) })] }) }), _jsx("div", { className: "solid-view-loading-body-spacer flex-1 min-h-0" })] }) }));
+        return (_jsx("div", { className: "solid-form-wrapper", ref: solidFormWrapperRef, children: _jsxs("div", { className: "solid-form-section", children: [_jsx("div", { className: "page-header solid-list-toolbar flex-column lg:flex-row", children: _jsxs("div", { className: "flex justify-content-between w-full solid-form-toolbar-row", children: [_jsx("div", { className: "flex gap-3 align-items-center solid-form-toolbar-left", children: _jsx("p", { className: "m-0 view-title solid-text-wrapper", children: "Loading form" }) }), _jsx("div", { className: "flex align-items-center solid-header-buttons-wrapper solid-form-toolbar-actions", children: _jsx(SolidHeaderRequestStatus, { label: "Loading..." }) })] }) }), _jsx("div", { className: "solid-view-loading-body-spacer flex-1 min-h-0" })] }) }));
     }
     // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
@@ -1093,7 +1181,7 @@ var SolidFormView = function (params) {
             }
             var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext);
             if (!(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type)) {
-                var errorMessage = ((_d = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _d === void 0 ? void 0 : _d.label) ? (_e = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _e === void 0 ? void 0 : _e.label : formLayoutField.attrs.name;
+                var errorMessage = ((_g = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _g === void 0 ? void 0 : _g.label) ? (_h = formLayoutField === null || formLayoutField === void 0 ? void 0 : formLayoutField.attrs) === null || _h === void 0 ? void 0 : _h.label : formLayoutField.attrs.name;
                 if (!errorFields.includes(errorMessage)) {
                     // errorFields.push(errorMessage);
                 }
@@ -1116,6 +1204,7 @@ var SolidFormView = function (params) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        // console.log("formFieldOnXXX", eventType, event);
                         // Invoke the formik change 
                         if (eventType === 'onFieldChange') {
                             formik.handleChange(event);
@@ -1260,12 +1349,14 @@ var SolidFormView = function (params) {
                     break;
                 case "notebook":
                     if (visible === true) {
-                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
+                        tabFieldsRef.current = [];
+                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, requestedTab: requestedTab, requestedTabVersion: requestedTabVersion, children: children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); }) }, key);
                     }
                     break;
                 case "page":
                     if (visible === true) {
                         var fields = children.flatMap(function (child) { return getLayoutFields(child); });
+                        tabFieldsRef.current.push({ tabKey: key, fields: fields.map(function (f) { return f.attrs.name; }) });
                         var pageChildren = children.map(function (element, index) { return renderFormElementDynamically_1(element, recursiveFVMD, "".concat(path, ".").concat(index)); });
                         return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields: fields });
                     }
@@ -1316,7 +1407,7 @@ var SolidFormView = function (params) {
         var onDeleteClose = function () {
             setDeleteDialogVisible(false);
         };
-        var dynamicHeader = (_f = solidView_1.layout) === null || _f === void 0 ? void 0 : _f.header;
+        var dynamicHeader = (_j = solidView_1.layout) === null || _j === void 0 ? void 0 : _j.header;
         var DynamicHeaderComponent = null;
         if (dynamicHeader) {
             DynamicHeaderComponent = getExtensionComponent(dynamicHeader);
@@ -1430,7 +1521,7 @@ var SolidFormView = function (params) {
             return slide;
         })
             .filter(function (slide) { return !!slide; });
-        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsxs("div", { className: "solid-form-section", children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_j = (_h = (_g = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _g === void 0 ? void 0 : _g.solidView) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.draftPublishWorkflow, publish: published, internationalisationEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting, headerRequestStatusLabel: isSubmitting ? "Saving..." : null }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content md:pt-1 ".concat(createMode ? 'solid-create-mode-form-content' : '', " ").concat(params.embeded === true ? 'h-auto' : ''), style: { maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }, children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
+        return (_jsxs("div", { className: "solid-form-wrapper", ref: solidFormWrapperRef, children: [_jsxs("div", { className: "solid-form-section", children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(FormikSubmitWatcher, { formik: formik, tabFieldsRef: tabFieldsRef, embeded: params.embeded, searchParams: searchParams, setRequestedTab: setRequestedTab, setRequestedTabVersion: setRequestedTabVersion }), _jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView_1, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: (_m = (_l = (_k = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.draftPublishWorkflow, publish: published, internationalisationEnabled: (_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: function () { return setRefreshChatterMessage(true); }, isSubmitting: isSubmitting, headerRequestStatusLabel: isSubmitting ? "Saving..." : null, showMobileOpenChatter: isMobileViewport && !isShowChatter && params.embeded !== true, onMobileOpenChatter: function () { return setShowChatter(true); } }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-form-content md:pt-1 ".concat(createMode ? 'solid-create-mode-form-content' : '', " ").concat(params.embeded === true ? 'h-auto' : ''), style: { maxHeight: params.embeded === true ? '80vh' : '', overflowY: 'auto' }, children: [DynamicHeaderComponent && _jsx(DynamicHeaderComponent, {}), params.id === 'new' && DynamicFormComponentNew ? (_jsx(DynamicFormComponentNew, { params: params })) : params.id !== 'new' && DynamicFormComponentEdit ? (_jsx(DynamicFormComponentEdit, { params: params })) : (renderFormDynamically(formViewMetaData, formViewLayout))] })] }), _jsx(SolidFormFooter, { params: params })] }), params.embeded !== true &&
                     _jsxs("div", { className: "chatter-section ".concat(isShowChatter === false ? 'collapsed' : 'open'), style: { width: chatterLocaleWidth }, children: [isShowChatter && (_jsx("div", { style: {
                                     width: 5,
                                     cursor: 'col-resize',
@@ -1441,10 +1532,10 @@ var SolidFormView = function (params) {
                                     zIndex: 9,
                                 }, onMouseDown: function () { return setIsResizingChatterLocale(true); } })), isShowChatter === true &&
                                 _jsx(SolidButton, { icon: "si si-angle-double-right", size: "sm", text: true, className: "chatter-collapse-btn", style: { width: 26, height: 26, aspectRatio: '1/1' }, onClick: function () { return setShowChatter(false); } }), isShowChatter === false ?
-                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-1", children: [((_q = (_p = (_o = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _o === void 0 ? void 0 : _o.solidView) === null || _p === void 0 ? void 0 : _p.model) === null || _q === void 0 ? void 0 : _q.draftPublishWorkflow) &&
+                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-1", children: [((_t = (_s = (_r = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _r === void 0 ? void 0 : _r.solidView) === null || _s === void 0 ? void 0 : _s.model) === null || _t === void 0 ? void 0 : _t.draftPublishWorkflow) &&
                                             _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('info'); }, children: "Info" }), _jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('chatter'); }, children: "Audit Trail" }), _jsx(SolidButton, { icon: "si si-chevron-left", size: "sm", className: "px-0", style: { width: 30 }, onClick: function () { return handleChatterExpandClick_1('chatter'); } })] })
                                 :
-                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsxs(SolidDialog, { open: isDeleteDialogVisible, onOpenChange: setDeleteDialogVisible, className: "solid-confirm-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-field-confirm-header", children: [_jsx(SolidDialogTitle, { children: "Confirm Delete" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "solid-field-confirm-dialog-body", children: _jsx("p", { className: "solid-field-confirm-message", children: "Are you sure you want to delete?" }) }), _jsxs("div", { className: "solid-radix-dialog-footer solid-field-confirm-actions", children: [_jsx(SolidButton, { label: "Yes", icon: "si si-check", variant: "destructive", autoFocus: true, onClick: function () { return handleDeleteEntity_1(); } }), _jsx(SolidButton, { label: "No", icon: "si si-times", variant: "outline", onClick: onDeleteClose })] })] }), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-form-layout-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Change Form Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsx(SolidConfirmDialog, { open: confirmVisible, title: "Confirmation", confirmLabel: "Yes, confirm", cancelLabel: "No, cancel", onConfirm: handleConfirmAccept, onCancel: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
+                                    _jsx(SolidChatterLocaleTabView, { createMode: createMode, setSelectedLocale: setSelectedLocale, selectedLocale: selectedLocale, solidFormViewMetaData: solidFormViewMetaData, id: params.id, refreshChatterMessage: refreshChatterMessage, setRefreshChatterMessage: setRefreshChatterMessage, activeTab: defaultTabViewOptionIndex, viewMode: viewMode, defaultEntityLocaleId: defaultEntityLocaleId, handleLocaleChangeRedirect: handleLocaleChangeRedirect, solidFormViewData: solidFormViewData, published: published, actionsAllowed: actionsAllowed, mcpUrl: mcpUrl })] }), _jsx(SolidConfirmDialog, { open: isDeleteDialogVisible, onCancel: onDeleteClose, onConfirm: function () { return handleDeleteEntity_1(); }, className: "solid-shadcn-confirm-dialog solid-delete-confirm-dialog", headerClassName: "solid-shadcn-dialog-head", bodyClassName: "solid-shadcn-dialog-body", footerClassName: "solid-shadcn-dialog-actions", separatorClassName: "solid-shadcn-dialog-sep", showSeparator: true, title: "Delete ".concat(entityDisplayName), message: _jsx("p", { className: "solid-shadcn-dialog-text", children: "Are you sure you want to delete this ".concat(entityDisplayName, "?") }), confirmLabel: "Delete", cancelLabel: "Cancel" }), _jsxs(SolidDialog, { open: isLayoutDialogVisible, onOpenChange: setLayoutDialogVisible, className: "solid-form-layout-dialog", children: [_jsxs(SolidDialogHeader, { className: "solid-shadcn-dialog-head", children: [_jsx(SolidDialogTitle, { children: "Change Form Layout" }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogSeparator, {}), _jsx(SolidDialogBody, { className: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) })] }), openLightbox && (_jsx(SolidLightbox, { open: openLightbox, slides: lightboxSlides, onClose: function () { return setOpenLightbox(false); } })), _jsx(SolidConfirmDialog, { open: confirmVisible, title: "Confirmation", confirmLabel: "Yes, confirm", cancelLabel: "No, cancel", onConfirm: handleConfirmAccept, onCancel: handleConfirmReject, message: _jsx("div", { className: "flex flex-col items-center justify-center text-center space-y-3", children: _jsxs("p", { className: "text-gray-800 text-base", children: ["Are you sure you want to ", published !== null ? 'unpublish' : 'publish', "?"] }) }) })] }));
     }
 };
 export default SolidFormView;