@solidstarters/solid-core-ui 1.1.210 → 1.1.211

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

@@ -1,60 +1,4 @@
 "use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { permissionExpression } from "../../../helpers/permissions";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
@@ -106,41 +50,40 @@ import { SolidXAIIcon } from "../solid-ai/SolidXAIIcon";
 import { ERROR_MESSAGES } from "../../../constants/error-messages";
 import { useLazyGetMcpUrlQuery } from "../../../redux/api/solidSettingsApi";
 import { SolidFormFooter } from "./SolidFormFooter";
-var getLayoutFields = function (node) {
-    var fields = [];
+const getLayoutFields = (node) => {
+    let fields = [];
     if (node.type === "field") {
         fields.push(node);
     }
     if (node.children && Array.isArray(node.children)) {
-        for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
-            var child = _a[_i];
+        for (const child of node.children) {
             fields = fields.concat(getLayoutFields(child));
         }
     }
     return fields;
 };
-export var getLayoutFieldsAsObject = function (layout) {
-    var allFields = layout.flatMap(getLayoutFields);
-    return allFields.reduce(function (result, field) {
+export const getLayoutFieldsAsObject = (layout) => {
+    const allFields = layout.flatMap(getLayoutFields);
+    return allFields.reduce((result, field) => {
         if (field.attrs.name) {
-            result[field.attrs.name] = __assign({}, field);
+            result[field.attrs.name] = { ...field };
         }
         return result;
     }, {});
 };
-export var getActualFieldMetadata = function (key, solidFieldsMetadata) {
+export const getActualFieldMetadata = (key, solidFieldsMetadata) => {
     if (solidFieldsMetadata[key]) {
         return solidFieldsMetadata[key];
     }
     if (key.endsWith("Confirm")) {
-        var baseKey = key.slice(0, -"Confirm".length); // Remove "Confirm"
+        const baseKey = key.slice(0, -"Confirm".length); // Remove "Confirm"
         if (solidFieldsMetadata[baseKey]) {
             return solidFieldsMetadata[baseKey];
         }
     }
     return null; // or handle fallback
 };
-var fieldFactory = function (type, fieldContext, setLightboxUrls, setOpenLightbox) {
+const fieldFactory = (type, fieldContext, setLightboxUrls, setOpenLightbox) => {
     if (type === 'shortText') {
         return new SolidShortTextField(fieldContext);
     }
@@ -195,9 +138,8 @@ var fieldFactory = function (type, fieldContext, setLightboxUrls, setOpenLightbo
     return null;
 };
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-var SolidField = function (_a) {
-    var formik = _a.formik, field = _a.field, fieldMetadata = _a.fieldMetadata, initialEntityData = _a.initialEntityData, solidFormViewMetaData = _a.solidFormViewMetaData, modelName = _a.modelName, readOnly = _a.readOnly, viewMode = _a.viewMode, onChange = _a.onChange, onBlur = _a.onBlur, parentData = _a.parentData, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, onEmbeddedFormSave = _a.onEmbeddedFormSave;
-    var fieldContext = {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly, viewMode, onChange, onBlur, parentData, setLightboxUrls, setOpenLightbox, onEmbeddedFormSave }) => {
+    const fieldContext = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
         // field layout - coming from view.layout
@@ -218,12 +160,11 @@ var SolidField = function (_a) {
     if (onEmbeddedFormSave) {
         fieldContext.onEmbeddedFormSave = onEmbeddedFormSave;
     }
-    var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext, setLightboxUrls, setOpenLightbox);
-    return solidField === null || solidField === void 0 ? void 0 : solidField.render(formik);
+    const solidField = fieldFactory(fieldMetadata?.type, fieldContext, setLightboxUrls, setOpenLightbox);
+    return solidField?.render(formik);
 };
-var SolidGroup = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
+const SolidGroup = ({ children, attrs }) => {
+    const className = attrs.className;
     return (_jsxs("div", { className: className, children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
     // <div className={className}>
     //     <div className="s_group">
@@ -238,9 +179,8 @@ var SolidGroup = function (_a) {
     // </div>
     );
 };
-var SolidRow = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
+const SolidRow = ({ children, attrs }) => {
+    const className = attrs.className;
     return (
     // <div className={`row ${className}`}>
     //     <div className="s_group">
@@ -250,13 +190,12 @@ var SolidRow = function (_a) {
     //         </fieldset>
     //     </div>
     // </div>
-    _jsxs("div", { className: "row ".concat(className), children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
+    _jsxs("div", { className: `row ${className}`, children: [attrs.label && _jsx("p", { children: attrs.label }), _jsx("div", { className: "grid", children: children })] })
     // <div>{children}</div>
     );
 };
-var SolidColumn = function (_a) {
-    var children = _a.children, attrs = _a.attrs;
-    var className = attrs.className;
+const SolidColumn = ({ children, attrs }) => {
+    const className = attrs.className;
     return (
     // first fieldset ui
     // <div className={`${className}`}>
@@ -274,35 +213,31 @@ var SolidColumn = function (_a) {
     // </div>
     //figma fieldset ui
     attrs.label ?
-        _jsx("div", { className: "".concat(className), children: _jsx(Panel, { header: attrs.label, className: "solid-column-panel", children: _jsx("div", { className: "grid", children: children }) }) })
+        _jsx("div", { className: `${className}`, children: _jsx(Panel, { header: attrs.label, className: "solid-column-panel", children: _jsx("div", { className: "grid", children: children }) }) })
         :
-            _jsx("div", { className: "".concat(className), children: _jsx("div", { className: "grid", children: children }) }));
+            _jsx("div", { className: `${className}`, children: _jsx("div", { className: "grid", children: children }) }));
 };
-var SolidSheet = function (_a) {
-    var children = _a.children;
-    return (_jsx("div", { className: "p-fluid p-grid", children: children }));
-};
-var SolidNotebook = function (_a) {
-    var children = _a.children, activeTab = _a.activeTab, embeded = _a.embeded;
+const SolidSheet = ({ children }) => (_jsx("div", { className: "p-fluid p-grid", children: children }));
+const SolidNotebook = ({ children, activeTab, embeded }) => {
     // const childrenArray = children;
     // const childrenArray = React.Children.toArray(children).filter(Boolean);
-    var childrenArray = React.Children.toArray(children).filter(function (child) { return !!child; });
-    var router = useRouter();
+    const childrenArray = React.Children.toArray(children).filter(child => !!child);
+    const router = useRouter();
     // Local state to manage active tab in embedded context
-    var _b = useState(activeTab), localActiveTab = _b[0], setLocalActiveTab = _b[1];
-    var activeIndex = useMemo(function () {
-        return childrenArray.findIndex(function (child) {
+    const [localActiveTab, setLocalActiveTab] = useState(activeTab);
+    const activeIndex = useMemo(() => {
+        return childrenArray.findIndex((child) => {
             return child.key === (embeded ? localActiveTab : activeTab);
         });
     }, [childrenArray, activeTab, localActiveTab, embeded]);
-    var handleTabChange = function (e) {
-        var selectedChild = childrenArray[e.index];
-        var newTabLabel = selectedChild === null || selectedChild === void 0 ? void 0 : selectedChild.key;
+    const handleTabChange = (e) => {
+        const selectedChild = childrenArray[e.index];
+        const newTabLabel = selectedChild?.key;
         if (newTabLabel) {
             if (!embeded) {
-                var currentUrl = new URL(window.location.href);
+                const currentUrl = new URL(window.location.href);
                 currentUrl.searchParams.set('activeTab', newTabLabel);
-                var updatedPath = currentUrl.toString();
+                const updatedPath = currentUrl.toString();
                 router.push(updatedPath);
             }
             else {
@@ -313,25 +248,23 @@ var SolidNotebook = function (_a) {
     };
     return (_jsx("div", { className: "solid-tab-view w-full", children: _jsx(TabView, { activeIndex: activeIndex >= 0 ? activeIndex : 0, onTabChange: handleTabChange, children: childrenArray }) }));
 };
-var SolidDynamicWidget = function (_a) {
-    var widgetName = _a.widgetName, formik = _a.formik, field = _a.field, solidFormViewMetaData = _a.solidFormViewMetaData, solidFormViewData = _a.solidFormViewData;
-    var solidView = solidFormViewMetaData.data.solidView;
-    var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-    var DynamicWidget = getExtensionComponent(widgetName);
-    var widgetProps = {
+const SolidDynamicWidget = ({ widgetName, formik, field, solidFormViewMetaData, solidFormViewData }) => {
+    const solidView = solidFormViewMetaData.data.solidView;
+    const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+    let DynamicWidget = getExtensionComponent(widgetName);
+    const widgetProps = {
         formData: formik.values,
         field: field,
         fieldsMetadata: solidFieldsMetadata,
         viewMetadata: solidView,
         formViewData: solidFormViewData
     };
-    return (_jsx("div", { className: "solid-tab-view w-full", children: DynamicWidget && _jsx(DynamicWidget, __assign({}, widgetProps)) }));
+    return (_jsx("div", { className: "solid-tab-view w-full", children: DynamicWidget && _jsx(DynamicWidget, { ...widgetProps }) }));
 };
-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; });
-    var errorCount = formik.submitCount > 0 ? fieldsName.filter(function (name) { return !!formik.errors[name]; }).length : 0;
-    var label = (_jsxs("span", { style: { color: errorCount > 0 ? 'red' : 'inherit' }, children: [attrs.label, errorCount > 0 && " (".concat(errorCount, ")")] }));
+const SolidPage = ({ attrs, children, key, formik, fields }) => {
+    const fieldsName = fields.map((f) => f.attrs.name);
+    const errorCount = formik.submitCount > 0 ? fieldsName.filter((name) => !!formik.errors[name]).length : 0;
+    const label = (_jsxs("span", { style: { color: errorCount > 0 ? 'red' : 'inherit' }, children: [attrs.label, errorCount > 0 && ` (${errorCount})`] }));
     return (_jsx(TabPanel, { header: label, children: _jsx("div", { className: "p-fluid", children: children }) }, key));
 };
 // Original code...
@@ -373,126 +306,93 @@ var SolidPage = function (_a) {
 //         return updatedElement;
 //     });
 // };
-var SolidFormView = function (params) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    var user = useSelector(function (state) { return state.auth; }).user;
-    var pathname = usePathname();
-    var router = useRouter();
-    var toast = useRef(null);
-    var searchParams = useSearchParams();
-    var _r = useState(false), confirmVisible = _r[0], setConfirmVisible = _r[1];
-    var confirmResolveRef = useRef();
-    var _s = useState(false), redirectToList = _s[0], setRedirectToList = _s[1];
-    var _t = useState('en'), selectedLocale = _t[0], setSelectedLocale = _t[1];
-    var _u = useState(null), defaultEntityLocaleId = _u[0], setDefaultEntityLocaleId = _u[1];
-    var _v = useState(false), isDeleteDialogVisible = _v[0], setDeleteDialogVisible = _v[1];
-    var _w = useState(false), isLayoutDialogVisible = _w[0], setLayoutDialogVisible = _w[1];
-    var _x = useState(null), published = _x[0], setPublished = _x[1];
-    var _y = useState([]), actionsAllowed = _y[0], setActionsAllowed = _y[1];
-    var _z = useState(params.embeded === true ? "edit" : "view"), viewMode = _z[0], setViewMode = _z[1];
-    var _0 = useState(false), createMode = _0[0], setCreateMode = _0[1];
-    var _1 = useState(false), openLightbox = _1[0], setOpenLightbox = _1[1];
-    var _2 = useState([]), lightboxUrls = _2[0], setLightboxUrls = _2[1];
-    var _3 = useState(false), isShowChatter = _3[0], setShowChatter = _3[1];
-    var _4 = useState(380), chatterLocaleWidth = _4[0], setChatterLocaleWidth = _4[1]; // default width
-    var _5 = useState(false), isResizingChatterLocale = _5[0], setIsResizingChatterLocale = _5[1];
-    var _6 = useState(""), solidWorkflowFieldValue = _6[0], setSolidWorkflowFieldValue = _6[1];
-    var _7 = useState(1), defaultTabViewOptionIndex = _7[0], setDefaultTabViewOptionIndex = _7[1];
-    var errorFields = [];
-    var triggerCheckIfPermissionExists = useLazyCheckIfPermissionExistsQuery()[0];
-    var _8 = useState(null), mcpUrl = _8[0], setMcpUrl = _8[1];
-    var getMcpUrl = useLazyGetMcpUrlQuery()[0];
+const SolidFormView = (params) => {
+    const { user } = useSelector((state) => state.auth);
+    const pathname = usePathname();
+    const router = useRouter();
+    const toast = useRef(null);
+    const searchParams = useSearchParams();
+    const [confirmVisible, setConfirmVisible] = useState(false);
+    const confirmResolveRef = useRef();
+    const [redirectToList, setRedirectToList] = useState(false);
+    const [selectedLocale, setSelectedLocale] = useState('en');
+    const [defaultEntityLocaleId, setDefaultEntityLocaleId] = useState(null);
+    const [isDeleteDialogVisible, setDeleteDialogVisible] = useState(false);
+    const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
+    const [published, setPublished] = useState(null);
+    const [actionsAllowed, setActionsAllowed] = useState([]);
+    const [viewMode, setViewMode] = useState(params.embeded === true ? "edit" : "view");
+    const [createMode, setCreateMode] = useState(false);
+    const [openLightbox, setOpenLightbox] = useState(false);
+    const [lightboxUrls, setLightboxUrls] = useState([]);
+    const [isShowChatter, setShowChatter] = useState(false);
+    const [chatterLocaleWidth, setChatterLocaleWidth] = useState(380); // default width
+    const [isResizingChatterLocale, setIsResizingChatterLocale] = useState(false);
+    const [solidWorkflowFieldValue, setSolidWorkflowFieldValue] = useState("");
+    const [defaultTabViewOptionIndex, setDefaultTabViewOptionIndex] = useState(1);
+    const errorFields = [];
+    const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
+    const [mcpUrl, setMcpUrl] = useState(null);
+    const [getMcpUrl] = useLazyGetMcpUrlQuery();
     // 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');
-    useEffect(function () {
-        var fetchPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var permissionNames, queryData, queryString, response;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        permissionNames = ["SettingController.getMcpUrl"];
-                        queryData = {
-                            permissionNames: permissionNames
-                        };
-                        queryString = qs.stringify(queryData, {
-                            encodeValuesOnly: true
-                        });
-                        return [4 /*yield*/, triggerCheckIfPermissionExists(queryString)];
-                    case 1:
-                        response = _a.sent();
-                        if (response.data.data) {
-                            if (response.data.data.includes("SettingController.getMcpUrl")) {
-                                enableSolidXAiPanel();
-                            }
-                        }
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        fetchPermissions();
-    }, []);
-    var enableSolidXAiPanel = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var queryData, queryString, response, error_1;
-        var _a, _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    _c.trys.push([0, 2, , 3]);
-                    queryData = {
-                        showHeader: "false",
-                        inListView: "false"
-                    };
-                    queryString = qs.stringify(__assign({}, queryData), { encodeValuesOnly: true });
-                    return [4 /*yield*/, getMcpUrl(queryString).unwrap()];
-                case 1:
-                    response = _c.sent();
-                    console.log("response", response);
-                    if (response && ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.mcpUrl)) {
-                        setMcpUrl((_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.mcpUrl);
-                    }
-                    return [3 /*break*/, 3];
-                case 2:
-                    error_1 = _c.sent();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+    const actionName = searchParams.get('actionName');
+    const actionType = searchParams.get('actionType');
+    const actionContext = searchParams.get('actionContext');
+    const solidSettingsData = useSelector((state) => state.settingsState?.solidSettings);
+    useEffect(() => {
+        if (solidSettingsData?.mcpEnabled && solidSettingsData?.mcpServerUrl && solidSettingsData?.mcpApiKey) {
+            enableSolidXAiPanel();
+        }
+    }, [solidSettingsData]);
+    const enableSolidXAiPanel = async () => {
+        try {
+            const queryData = {
+                showHeader: "false",
+                inListView: "false"
+            };
+            const queryString = qs.stringify({ ...queryData }, { encodeValuesOnly: true });
+            const response = await getMcpUrl(queryString).unwrap();
+            console.log("response", response);
+            if (response && response?.data?.mcpUrl) {
+                setMcpUrl(response?.data?.mcpUrl);
             }
-        });
-    }); };
-    var op = useRef(null);
-    useEffect(function () {
-        var stored = localStorage.getItem('chatter_locale_width');
+        }
+        catch (error) {
+        }
+    };
+    const op = useRef(null);
+    useEffect(() => {
+        const stored = localStorage.getItem('chatter_locale_width');
         if (stored) {
             setChatterLocaleWidth(parseInt(stored, 10));
         }
     }, []);
-    useEffect(function () {
-        var handleMouseMove = function (e) {
+    useEffect(() => {
+        const handleMouseMove = (e) => {
             if (!isResizingChatterLocale)
                 return;
-            var newWidth = window.innerWidth - e.clientX;
-            var clampedWidth = Math.max(280, Math.min(newWidth, 700));
+            const newWidth = window.innerWidth - e.clientX;
+            const clampedWidth = Math.max(280, Math.min(newWidth, 700));
             setChatterLocaleWidth(clampedWidth);
             localStorage.setItem('chatter_locale_width', clampedWidth.toString());
         };
-        var handleMouseUp = function () {
+        const handleMouseUp = () => {
             setIsResizingChatterLocale(false);
         };
         if (isResizingChatterLocale) {
             window.addEventListener('mousemove', handleMouseMove);
             window.addEventListener('mouseup', handleMouseUp);
         }
-        return function () {
+        return () => {
             window.removeEventListener('mousemove', handleMouseMove);
             window.removeEventListener('mouseup', handleMouseUp);
         };
     }, [isResizingChatterLocale]);
-    useEffect(function () {
-        var mode = searchParams.get('viewMode');
-        var locale = searchParams.get('locale');
-        var defaultEntityLocaleIdn = searchParams.get('defaultEntityLocaleId');
+    useEffect(() => {
+        const mode = searchParams.get('viewMode');
+        const locale = searchParams.get('locale');
+        const defaultEntityLocaleIdn = searchParams.get('defaultEntityLocaleId');
         if (params.id === 'new' && !locale) {
             setViewMode('edit');
             setCreateMode(true);
@@ -513,43 +413,34 @@ var SolidFormView = function (params) {
         }
     }, [searchParams, params.id]);
     // function that updates view mode 
-    var updateViewMode = function (newMode) {
+    const updateViewMode = (newMode) => {
         setViewMode(newMode);
-        var params = new URLSearchParams(searchParams.toString());
+        const params = new URLSearchParams(searchParams.toString());
         params.set("viewMode", newMode);
-        router.push("".concat(pathname, "?").concat(params.toString()), { scroll: false });
+        router.push(`${pathname}?${params.toString()}`, { scroll: false });
     };
-    useEffect(function () {
-        var fetchPermissions = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var permissionNames, queryData, queryString, response;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!params.modelName) return [3 /*break*/, 2];
-                        permissionNames = [
-                            permissionExpression(params.modelName, 'create'),
-                            permissionExpression(params.modelName, 'delete'),
-                            permissionExpression(params.modelName, 'update'),
-                            permissionExpression(params.modelName, 'findOne'),
-                            permissionExpression(params.modelName, 'publish'),
-                            permissionExpression(params.modelName, 'unpublish'),
-                            permissionExpression('chatterMessage', 'findMany')
-                        ];
-                        queryData = {
-                            permissionNames: permissionNames
-                        };
-                        queryString = qs.stringify(queryData, {
-                            encodeValuesOnly: true
-                        });
-                        return [4 /*yield*/, triggerCheckIfPermissionExists(queryString)];
-                    case 1:
-                        response = _a.sent();
-                        setActionsAllowed(response.data.data);
-                        _a.label = 2;
-                    case 2: return [2 /*return*/];
-                }
-            });
-        }); };
+    useEffect(() => {
+        const fetchPermissions = async () => {
+            if (params.modelName) {
+                const permissionNames = [
+                    permissionExpression(params.modelName, 'create'),
+                    permissionExpression(params.modelName, 'delete'),
+                    permissionExpression(params.modelName, 'update'),
+                    permissionExpression(params.modelName, 'findOne'),
+                    permissionExpression(params.modelName, 'publish'),
+                    permissionExpression(params.modelName, 'unpublish'),
+                    permissionExpression('chatterMessage', 'findMany')
+                ];
+                const queryData = {
+                    permissionNames: permissionNames
+                };
+                const queryString = qs.stringify(queryData, {
+                    encodeValuesOnly: true
+                });
+                const response = await triggerCheckIfPermissionExists(queryString);
+                setActionsAllowed(response.data.data);
+            }
+        };
         fetchPermissions();
     }, [params.modelName]);
     // Create the RTK slices for this entitor (const id of fieldValue) {
@@ -557,24 +448,24 @@ var SolidFormView = function (params) {
     //         errors.push({ field: this.fieldMetadata.name, error: `Invalid ids in ${ commandFieldName } ` });
     //     }
     // }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 _9 = useCreateSolidEntityMutation(), createEntity = _9[0], _10 = _9[1], isEntityCreateSuccess = _10.isSuccess, isEntityCreateError = _10.isError, entityCreateError = _10.error;
-    var _11 = useUpdateSolidEntityMutation(), updateEntity = _11[0], _12 = _11[1], isEntityUpdateSuceess = _12.isSuccess, isEntityUpdateError = _12.isError, entityUpdateError = _12.error;
-    var _13 = useDeleteSolidEntityMutation(), deleteEntity = _13[0], _14 = _13[1], isEntityDeleteSuceess = _14.isSuccess, isEntityDeleteError = _14.isError, entityDeleteError = _14.error;
-    var _15 = usePatchUpdateSolidEntityMutation(), patchEntity = _15[0], _16 = _15[1], isEntityPatchSuceess = _16.isSuccess, isEntityPatchError = _16.isError, entityPatchError = _16.error;
-    var _17 = usePublishSolidEntityMutation(), publishSolidEntity = _17[0], _18 = _17[1], isEntityPublishedSuccess = _18.isSuccess, isEntityPublishedError = _18.isError, entityPublishedError = _18.error;
-    var _19 = useUnpublishSolidEntityMutation(), unpublishSolidEntity = _19[0], _20 = _19[1], isEntityUnpublishedSuccess = _20.isSuccess, isEntityUnpublishedError = _20.isError, entityUnpublishedError = _20.error;
+    const entityApi = createSolidEntityApi(params.modelName);
+    const { useCreateSolidEntityMutation, useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation, usePatchUpdateSolidEntityMutation, usePublishSolidEntityMutation, useUnpublishSolidEntityMutation } = entityApi;
+    const [createEntity, { isSuccess: isEntityCreateSuccess, isError: isEntityCreateError, error: entityCreateError },] = useCreateSolidEntityMutation();
+    const [updateEntity, { isSuccess: isEntityUpdateSuceess, isError: isEntityUpdateError, error: entityUpdateError },] = useUpdateSolidEntityMutation();
+    const [deleteEntity, { isSuccess: isEntityDeleteSuceess, isError: isEntityDeleteError, error: entityDeleteError },] = useDeleteSolidEntityMutation();
+    const [patchEntity, { isSuccess: isEntityPatchSuceess, isError: isEntityPatchError, error: entityPatchError },] = usePatchUpdateSolidEntityMutation();
+    const [publishSolidEntity, { isSuccess: isEntityPublishedSuccess, isError: isEntityPublishedError, error: entityPublishedError },] = usePublishSolidEntityMutation();
+    const [unpublishSolidEntity, { isSuccess: isEntityUnpublishedSuccess, isError: isEntityUnpublishedError, error: entityUnpublishedError },] = useUnpublishSolidEntityMutation();
     // - - - - - - - - - - - -- - - - - - - - - - - - METADATA here
     // Get the form view layout & metadata first. 
-    var formViewMetaDataQs = qs.stringify(__assign(__assign({}, params), { viewType: 'form', defaultEntityLocaleId: defaultEntityLocaleId }), {
+    const formViewMetaDataQs = qs.stringify({ ...params, viewType: 'form', defaultEntityLocaleId: defaultEntityLocaleId }, {
         encodeValuesOnly: true,
     });
-    var _21 = useState({}), formViewMetaData = _21[0], setFormViewMetaData = _21[1];
-    var _22 = useState(null), formViewLayout = _22[0], setFormViewLayout = _22[1];
-    var _23 = useGetSolidViewLayoutQuery(formViewMetaDataQs), solidFormViewMetaData = _23.data, solidFormViewMetaDataIsLoading = _23.isLoading;
-    var _24 = useState(true), refreshChatterMessage = _24[0], setRefreshChatterMessage = _24[1];
-    useEffect(function () {
+    const [formViewMetaData, setFormViewMetaData] = useState({});
+    const [formViewLayout, setFormViewLayout] = useState(null);
+    const { data: solidFormViewMetaData, isLoading: solidFormViewMetaDataIsLoading } = useGetSolidViewLayoutQuery(formViewMetaDataQs);
+    const [refreshChatterMessage, setRefreshChatterMessage] = useState(true);
+    useEffect(() => {
         if (isEntityCreateSuccess == true ||
             isEntityUpdateSuceess == true ||
             isEntityDeleteSuceess == true ||
@@ -595,18 +486,17 @@ var SolidFormView = function (params) {
                     window.location.reload();
                 }
                 else {
-                    var segments = pathname.split('/').filter(Boolean); // Split and filter empty segments
-                    var newPath = '/' + segments.slice(0, -2).join('/') + '/list'; // Remove last segment and add "/all"
+                    const segments = pathname.split('/').filter(Boolean); // Split and filter empty segments
+                    const newPath = '/' + segments.slice(0, -2).join('/') + '/list'; // Remove last segment and add "/all"
                     router.push(newPath);
                 }
             }
         }
     }, [isEntityCreateSuccess, isEntityUpdateSuceess, isEntityDeleteSuceess, isEntityPatchSuceess, isEntityPublishedSuccess, isEntityUnpublishedSuccess]);
-    useEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if ((_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.internationalisation) {
+    useEffect(() => {
+        if (solidFormViewMetaData?.data?.solidView?.model?.internationalisation) {
             setDefaultTabViewOptionIndex(0);
-            var matchedLocale = (_e = (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.applicableLocales) === null || _e === void 0 ? void 0 : _e.find(function (x) { return x.isDefault === 'yes'; });
+            const matchedLocale = solidFormViewMetaData?.data?.applicableLocales?.find((x) => x.isDefault === 'yes');
             //this is to attach default locale when adding data in popup view where relations exists
             if (!selectedLocale && matchedLocale && !searchParams.get('locale')) {
                 setSelectedLocale(matchedLocale.locale);
@@ -616,23 +506,22 @@ var SolidFormView = function (params) {
     function isFetchBaseQueryErrorWithErrorResponse(error) {
         return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
     }
-    useEffect(function () {
-        var handleError = function (errorToast) {
-            var _a;
-            var errorMessage = [ERROR_MESSAGES.ERROR_OCCURED];
+    useEffect(() => {
+        const handleError = (errorToast) => {
+            let errorMessage = [ERROR_MESSAGES.ERROR_OCCURED];
             if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
                 errorMessage = errorToast.data.message;
             }
             else {
                 errorMessage = [ERROR_MESSAGES.SOMETHING_WRONG];
             }
-            (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show({
+            toast.current?.show({
                 severity: 'error',
                 summary: 'Error',
                 detail: errorMessage,
                 sticky: true,
                 //@ts-ignore
-                content: function () { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: Array.isArray(errorMessage) ? (errorMessage.map(function (message, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: message.trim() }) }, index)); })) : (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.trim() }) })) })); },
+                content: () => (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: Array.isArray(errorMessage) ? (errorMessage.map((message, index) => (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: message.trim() }) }, index)))) : (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: errorMessage?.trim() }) })) })),
             });
         };
         // Check and handle errors from each API operation
@@ -662,84 +551,79 @@ var SolidFormView = function (params) {
         isEntityPublishedError,
         isEntityUnpublishedError
     ]);
-    var showToast = function (severity, summary, detail) {
-        var _a;
-        (_a = toast.current) === null || _a === void 0 ? void 0 : _a.show(__assign({ severity: severity, summary: summary, detail: detail }, (severity === "error"
-            ? { sticky: true } // stays until user closes
-            : { life: 3000 })));
+    const showToast = (severity, summary, detail) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            ...(severity === "error"
+                ? { sticky: true } // stays until user closes
+                : { life: 3000 }),
+        });
     };
-    var confirmDialogWithPromise = function () {
-        return new Promise(function (resolve) {
+    const confirmDialogWithPromise = () => {
+        return new Promise((resolve) => {
             confirmResolveRef.current = resolve;
             setConfirmVisible(true);
         });
     };
-    var onFormikSubmit = function (values) { return __awaiter(void 0, void 0, void 0, function () {
-        var solidView, solidFieldsMetadata, layoutFieldsObj, formData_1, solidWorkflowField, result, currentUrl, updatedUrl, result, err_1;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-        return __generator(this, function (_u) {
-            switch (_u.label) {
-                case 0:
-                    solidView = solidFormViewMetaData.data.solidView;
-                    solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-                    layoutFieldsObj = getLayoutFieldsAsObject([formViewLayout]);
-                    _u.label = 1;
-                case 1:
-                    _u.trys.push([1, 7, , 8]);
-                    formData_1 = new FormData();
-                    // Iterate through the keys in the values object
-                    Object.entries(values).forEach(function (_a) {
-                        var key = _a[0], value = _a[1];
-                        var fieldMetadata = solidFieldsMetadata[key];
-                        //  const fieldMetadata = getActualFieldMetadata(key, solidFieldsMetadata);
-                        var fieldContext = {
-                            fieldMetadata: fieldMetadata,
-                            field: layoutFieldsObj[key],
-                            data: initialEntityData,
-                            solidFormViewMetaData: solidFormViewMetaData,
-                            modelName: params.modelName
-                        };
-                        var solidField = fieldFactory(fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type, fieldContext);
-                        // Append each field to the FormData
-                        if (value !== undefined && value !== null && solidField) {
-                            solidField.updateFormData(value, formData_1);
-                        }
-                        if (value !== undefined && value !== null && key.endsWith("Confirm")) {
-                            formData_1.append(key, String(value));
-                        }
-                    });
-                    solidWorkflowField = (_d = (_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.layout) === null || _c === void 0 ? void 0 : _c.attrs) === null || _d === void 0 ? void 0 : _d.workflowField;
-                    if (params.id !== "new") {
-                        if ((_e = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _e === void 0 ? void 0 : _e.solidFormViewWorkflowData) {
-                            if (((_h = (_g = (_f = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _f === void 0 ? void 0 : _f.solidFieldsMetadata) === null || _g === void 0 ? void 0 : _g[solidWorkflowField]) === null || _h === void 0 ? void 0 : _h.type) === "selectionStatic") {
-                                formData_1.append(solidWorkflowField, solidWorkflowFieldValue);
-                            }
-                            if (((_l = (_k = (_j = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _j === void 0 ? void 0 : _j.solidFieldsMetadata) === null || _k === void 0 ? void 0 : _k[solidWorkflowField]) === null || _l === void 0 ? void 0 : _l.type) === "many-to-one") {
-                                formData_1.append("".concat(solidWorkflowField, "Id"), solidWorkflowFieldValue);
-                            }
-                        }
-                    }
-                    if ((_p = (_o = (_m = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.model) === null || _p === void 0 ? void 0 : _p.internationalisation) {
-                        if (selectedLocale && !formData_1.has('localeName')) {
-                            formData_1.append('localeName', selectedLocale);
-                        }
-                        if (defaultEntityLocaleId) {
-                            formData_1.append('defaultEntityLocaleId', defaultEntityLocaleId.toString());
-                        }
+    const onFormikSubmit = async (values) => {
+        const solidView = solidFormViewMetaData.data.solidView;
+        const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+        const layoutFieldsObj = getLayoutFieldsAsObject([formViewLayout]);
+        try {
+            let formData = new FormData();
+            // Iterate through the keys in the values object
+            Object.entries(values).forEach(([key, value]) => {
+                const fieldMetadata = solidFieldsMetadata[key];
+                //  const fieldMetadata = getActualFieldMetadata(key, solidFieldsMetadata);
+                const fieldContext = {
+                    fieldMetadata: fieldMetadata,
+                    field: layoutFieldsObj[key],
+                    data: initialEntityData,
+                    solidFormViewMetaData: solidFormViewMetaData,
+                    modelName: params.modelName
+                };
+                let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
+                // Append each field to the FormData
+                if (value !== undefined && value !== null && solidField) {
+                    solidField.updateFormData(value, formData);
+                }
+                if (value !== undefined && value !== null && key.endsWith("Confirm")) {
+                    formData.append(key, String(value));
+                }
+            });
+            let solidWorkflowField = solidFormViewMetaData?.data?.solidView?.layout?.attrs?.workflowField;
+            if (params.id !== "new") {
+                if (solidFormViewMetaData?.data?.solidFormViewWorkflowData) {
+                    if (solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.type === "selectionStatic") {
+                        formData.append(solidWorkflowField, solidWorkflowFieldValue);
                     }
-                    if ((_s = (_r = (_q = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _q === void 0 ? void 0 : _q.solidView) === null || _r === void 0 ? void 0 : _r.model) === null || _s === void 0 ? void 0 : _s.draftPublishWorkflow) {
-                        if (published) {
-                            formData_1.append('publishedAt', published);
-                        }
+                    if (solidFormViewMetaData?.data?.solidFieldsMetadata?.[solidWorkflowField]?.type === "many-to-one") {
+                        formData.append(`${solidWorkflowField}Id`, solidWorkflowFieldValue);
                     }
-                    if (!(params.inlineCreateAutoSave === true)) return [3 /*break*/, 2];
-                    params.customCreateHandler(formData_1);
-                    return [3 /*break*/, 6];
-                case 2:
-                    if (!(params.id === 'new')) return [3 /*break*/, 4];
-                    return [4 /*yield*/, createEntity(formData_1).unwrap()];
-                case 3:
-                    result = _u.sent();
+                }
+            }
+            if (solidFormViewMetaData?.data?.solidView?.model?.internationalisation) {
+                if (selectedLocale && !formData.has('localeName')) {
+                    formData.append('localeName', selectedLocale);
+                }
+                if (defaultEntityLocaleId) {
+                    formData.append('defaultEntityLocaleId', defaultEntityLocaleId.toString());
+                }
+            }
+            if (solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow) {
+                if (published) {
+                    formData.append('publishedAt', published);
+                }
+            }
+            if (params.inlineCreateAutoSave === true) {
+                params.customCreateHandler(formData);
+            }
+            else {
+                if (params.id === 'new') {
+                    // default locale
+                    const result = await createEntity(formData).unwrap();
                     showToast("success", ERROR_MESSAGES.FORM_SAVED, ERROR_MESSAGES.FORM_SAVED_SUCCESSFULLY);
                     // if (!params.embeded && result?.data?.id) {
                     //     const newPathname = pathname.replace(/new$/, result.data.id);
@@ -750,40 +634,38 @@ var SolidFormView = function (params) {
                     //     setViewMode("view")
                     // }
                     if (!params.embeded) {
-                        currentUrl = new URL(window.location.href);
-                        currentUrl.pathname = currentUrl.pathname.replace(/new$/, (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.id);
+                        const currentUrl = new URL(window.location.href);
+                        currentUrl.pathname = currentUrl.pathname.replace(/new$/, result?.data?.id);
                         currentUrl.searchParams.set('viewMode', 'view');
-                        updatedUrl = currentUrl.toString();
+                        const updatedUrl = currentUrl.toString();
                         router.push(updatedUrl);
                         setViewMode("view");
                     }
-                    return [2 /*return*/, result];
-                case 4: return [4 /*yield*/, updateEntity({ id: +params.id, data: formData_1 }).unwrap()];
-                case 5:
-                    result = _u.sent();
+                    return result;
+                }
+                else {
+                    // updateEntity({ id: +params.id, data: formData });
+                    const result = await updateEntity({ id: +params.id, data: formData }).unwrap();
                     // const result = await updateEntity({ id: +params.id, data: formData }).unwrap();
                     if (!params.embeded) {
                         showToast("success", ERROR_MESSAGES.FORM_UPDATE, ERROR_MESSAGES.FORM_UPDATE_SUCCESSFULLY);
-                        if ((result === null || result === void 0 ? void 0 : result.statusCode) === 200) {
+                        if (result?.statusCode === 200) {
                             updateViewMode("view");
                         }
                     }
-                    return [2 /*return*/, result];
-                case 6: return [3 /*break*/, 8];
-                case 7:
-                    err_1 = _u.sent();
-                    console.error(ERROR_MESSAGES.ENTITY_FAILED, err_1);
-                    return [3 /*break*/, 8];
-                case 8: return [2 /*return*/];
+                    return result;
+                }
             }
-        });
-    }); };
-    var showFieldError = function () {
-        if ((errorFields === null || errorFields === void 0 ? void 0 : errorFields.length) === 0)
+        }
+        catch (err) {
+            console.error(ERROR_MESSAGES.ENTITY_FAILED, err);
+        }
+    };
+    const showFieldError = () => {
+        if (errorFields?.length === 0)
             return;
-        errorFields.forEach(function (error) {
-            var _a;
-            (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
+        errorFields.forEach((error) => {
+            toast?.current?.show({
                 severity: "error",
                 summary: "Metadata Error",
                 detail: error,
@@ -792,215 +674,323 @@ var SolidFormView = function (params) {
         });
         // errorFields.length = 0;
     };
-    useEffect(function () {
-        if ((errorFields === null || errorFields === void 0 ? void 0 : errorFields.length) > 0) {
+    useEffect(() => {
+        if (errorFields?.length > 0) {
             showFieldError();
         }
     }, [errorFields]);
     // - - - - - - - - - - - -- - - - - - - - - - - - DATA here
     // Fetch the actual data here. 
     // This is the initial value of this form, will come from an API call in the case of edit. 
-    var layoutFields = [];
-    var toPopulate = [];
-    var toPopulateMedia = [];
+    let layoutFields = [];
+    let toPopulate = [];
+    let toPopulateMedia = [];
     if (solidFormViewMetaData && formViewLayout) {
-        var solidView = solidFormViewMetaData.data.solidView;
-        var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+        const solidView = solidFormViewMetaData.data.solidView;
+        const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
         layoutFields = [formViewLayout].flatMap(getLayoutFields);
-        for (var i = 0; i < (layoutFields === null || layoutFields === void 0 ? void 0 : layoutFields.length); i++) {
-            var formLayoutField = layoutFields[i];
-            var fieldMetadata = solidFieldsMetadata[formLayoutField.attrs.name];
-            if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'relation') {
+        for (let i = 0; i < layoutFields?.length; i++) {
+            const formLayoutField = layoutFields[i];
+            const fieldMetadata = solidFieldsMetadata[formLayoutField.attrs.name];
+            if (fieldMetadata?.type === 'relation') {
                 toPopulate.push(fieldMetadata.name);
             }
-            if ((fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'mediaSingle' || (fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.type) === 'mediaMultiple') {
+            if (fieldMetadata?.type === 'mediaSingle' || fieldMetadata?.type === 'mediaMultiple') {
                 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 (formViewLayout.attrs?.workflowField && solidFieldsMetadata[formViewLayout.attrs.workflowField]?.type === 'relation' && solidFieldsMetadata[formViewLayout.attrs.workflowField]?.relationType === 'many-to-one') {
             toPopulate.push(solidFieldsMetadata[formViewLayout.attrs.workflowField].name);
         }
     }
     // TODO: Possible optimisation here, we are firing 2 queries to load the form view data object. 
     // once without populate & populateMedia and then again once after that.
-    var formViewDataQs = qs.stringify({ populate: toPopulate, populateMedia: toPopulateMedia }, {
+    const formViewDataQs = qs.stringify({ populate: toPopulate, populateMedia: toPopulateMedia }, {
         encodeValuesOnly: true,
     });
-    var _25 = useState({}), initialEntityData = _25[0], setInitialEntityData = _25[1];
-    var _26 = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, {
+    const [initialEntityData, setInitialEntityData] = useState({});
+    const { data: solidFormViewData, isLoading: solidFormViewDataIsLoading, refetch: refetchSolidFormViewData, } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, {
         skip: params.id === 'new'
-    }), solidFormViewData = _26.data, solidFormViewDataIsLoading = _26.isLoading, refetchSolidFormViewData = _26.refetch;
-    useEffect(function () {
+    });
+    useEffect(() => {
         if (params.id !== 'new') {
             refetchSolidFormViewData();
         }
     }, [formViewDataQs]);
-    useEffect(function () {
-        var handleOnFormLayoutLoadEvent = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var formLayout, customLayout, dynamicHeader, DynamicFunctionComponent, event_1, updatedFormLayout, newFormLayout, error_2;
-            var _a, _b, _c, _d, _e;
-            return __generator(this, function (_f) {
-                switch (_f.label) {
-                    case 0:
-                        if (!solidFormViewMetaData) return [3 /*break*/, 5];
-                        formLayout = solidFormViewMetaData;
-                        customLayout = params === null || params === void 0 ? void 0 : params.customLayout;
-                        dynamicHeader = (_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.layout) === null || _c === void 0 ? void 0 : _c.onFormLayoutLoad;
-                        DynamicFunctionComponent = null;
-                        event_1 = {
-                            parentData: params === null || params === void 0 ? void 0 : params.parentData,
-                            fieldsMetadata: solidFormViewMetaData,
-                            formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data,
-                            type: 'onFormLayoutLoad',
-                            viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView,
-                            formViewLayout: formViewLayout,
-                            queryParams: {
-                                actionName: actionName,
-                                actionType: actionType,
-                                actionContext: actionContext
-                            }
-                        };
-                        if (!dynamicHeader) return [3 /*break*/, 4];
-                        DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-                        if (!DynamicFunctionComponent) return [3 /*break*/, 4];
-                        _f.label = 1;
-                    case 1:
-                        _f.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, DynamicFunctionComponent(event_1)];
-                    case 2:
-                        updatedFormLayout = _f.sent();
-                        if (updatedFormLayout && (updatedFormLayout === null || updatedFormLayout === void 0 ? void 0 : updatedFormLayout.layoutChanged) && (updatedFormLayout === null || updatedFormLayout === void 0 ? void 0 : updatedFormLayout.newLayout)) {
-                            newFormLayout = __assign(__assign({}, formLayout), { data: __assign(__assign({}, formLayout.data), { solidView: __assign(__assign({}, formLayout.data.solidView), { layout: updatedFormLayout.newLayout }) }) });
-                            formLayout = newFormLayout;
-                            customLayout = updatedFormLayout.newLayout;
-                        }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_2 = _f.sent();
-                        console.error(ERROR_MESSAGES.DYNAMIC_FUNCTION_ERROR, error_2);
-                        return [3 /*break*/, 4];
-                    case 4:
-                        setFormViewMetaData(formLayout);
-                        setPublished((_e = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data) === null || _e === void 0 ? void 0 : _e.publishedAt);
-                        if (params.customLayout) {
-                            setFormViewLayout(customLayout);
-                        }
-                        else {
-                            setFormViewLayout(formLayout.data.solidView.layout);
+    useEffect(() => {
+        if (solidFormViewMetaData) {
+            if (params.customLayout) {
+                setFormViewLayout(params.customLayout);
+            }
+            else {
+                setFormViewLayout(solidFormViewMetaData?.data?.solidView?.layout);
+            }
+            setPublished(solidFormViewData?.data?.publishedAt);
+            setFormViewMetaData(solidFormViewMetaData);
+        }
+    }, [solidFormViewMetaData]);
+    // useEffect(() => {
+    //     const handleOnFormLayoutLoadEvent = async () => {
+    //         if (solidFormViewMetaData) {
+    //             // let formLayout = solidFormViewMetaData;
+    //             // let customLayout = params?.customLayout;
+    //             const onFormLayoutLoadHandlerExtensionFunction = solidFormViewMetaData?.data?.solidView?.layout?.onFormLayoutLoad;
+    //             // let dynamicExtensionFunction = null;
+    //             let formLayout = solidFormViewMetaData?.data?.solidView?.layout;
+    //             if (params.customLayout) {
+    //                 formLayout = params.customLayout;
+    //             }
+    //             const event: SolidLoadForm = {
+    //                 parentData: params?.parentData,
+    //                 fieldsMetadata: solidFormViewMetaData,
+    //                 formData: solidFormViewData?.data,
+    //                 type: 'onFormLayoutLoad',
+    //                 viewMetadata: solidFormViewMetaData?.data?.solidView,
+    //                 formViewLayout: formLayout,
+    //                 queryParams: {
+    //                     actionName,
+    //                     actionType,
+    //                     actionContext
+    //                 }
+    //             }
+    //             if (onFormLayoutLoadHandlerExtensionFunction) {
+    //                 const dynamicExtensionFunction = getExtensionFunction(onFormLayoutLoadHandlerExtensionFunction);
+    //                 if (dynamicExtensionFunction) {
+    //                     try {
+    //                         const updatedFormLayout: SolidUiEventResponse = await dynamicExtensionFunction(event);
+    //                         if (updatedFormLayout && updatedFormLayout?.layoutChanged && updatedFormLayout?.newLayout) {
+    //                             setFormViewLayout(updatedFormLayout.newLayout);
+    //                             // const newFormLayout = {
+    //                             //     ...formLayout,
+    //                             //     data: {
+    //                             //         ...formLayout.data,
+    //                             //         solidView: {
+    //                             //             ...formLayout.data.solidView,
+    //                             //             layout: updatedFormLayout.newLayout
+    //                             //         }
+    //                             //     }
+    //                             // };
+    //                             // formLayout = newFormLayout;
+    //                             // customLayout = updatedFormLayout.newLayout;
+    //                         }
+    //                     } catch (error) {
+    //                         console.error(ERROR_MESSAGES.DYNAMIC_FUNCTION_ERROR, error);
+    //                     }
+    //                 }
+    //             }
+    //             // setFormViewMetaData(formLayout);
+    //             // if (params.customLayout) {
+    //             //     setFormViewLayout(customLayout);
+    //             // } else {
+    //             //     setFormViewLayout(formLayout.data.solidView.layout);
+    //             // }
+    //         }
+    //     };
+    //     const handleOnFormDataLoadEvent = async () => {
+    //         const onFormDataLoadHandlerExtensionFunction = solidFormViewMetaData?.data?.solidView?.layout?.onFormDataLoad;
+    //         // let dynamicExtensionFunction = null;
+    //         let formViewData = solidFormViewData?.data;
+    //         let formLayout = solidFormViewMetaData?.data?.solidView?.layout;
+    //         if (params.customLayout) {
+    //             formLayout = params.customLayout;
+    //         }
+    //         const event: SolidLoadForm = {
+    //             fieldsMetadata: solidFormViewMetaData,
+    //             formData: solidFormViewData?.data,
+    //             type: "onFormDataLoad",
+    //             viewMetadata: solidFormViewMetaData?.data?.solidView,
+    //             formViewLayout: formLayout,
+    //             queryParams: {
+    //                 actionName,
+    //                 actionType,
+    //                 actionContext
+    //             }
+    //         };
+    //         if (onFormDataLoadHandlerExtensionFunction) {
+    //             const dynamicExtensionFunction = getExtensionFunction(onFormDataLoadHandlerExtensionFunction);
+    //             if (dynamicExtensionFunction) {
+    //                 const updatedFormData: SolidUiEventResponse = await dynamicExtensionFunction(event);
+    //                 if (updatedFormData && updatedFormData?.dataChanged && updatedFormData?.newFormData) {
+    //                     formViewData = updatedFormData.newFormData;
+    //                 }
+    //             }
+    //             if (formViewData) {
+    //                 setInitialEntityData(formViewData);
+    //             }
+    //         }
+    //     };
+    //     const handleOnFormLoadEvent = async () => {
+    //         const onFormLoadHandlerExtensionFunction = solidFormViewMetaData?.data?.solidView?.layout?.onFormLoad;
+    //         // let dynamicExtensionFunction = null;
+    //         let localFormViewMetadata = solidFormViewMetaData;
+    //         // let customLayout = params?.customLayout;
+    //         let formViewData = solidFormViewData?.data;
+    //         let formLayout = solidFormViewMetaData?.data?.solidView?.layout;
+    //         if (params.customLayout) {
+    //             formLayout = params.customLayout;
+    //         }
+    //         const event: SolidLoadForm = {
+    //             parentData: params?.parentData,
+    //             fieldsMetadata: solidFormViewMetaData,
+    //             formData: solidFormViewData?.data,
+    //             type: 'onFormLoad',
+    //             viewMetadata: solidFormViewMetaData?.data?.solidView,
+    //             formViewLayout: formViewLayout,
+    //             queryParams: {
+    //                 actionName,
+    //                 actionType,
+    //                 actionContext
+    //             }
+    //         };
+    //         if (onFormLoadHandlerExtensionFunction) {
+    //             const dynamicExtensionFunction = getExtensionFunction(onFormLoadHandlerExtensionFunction);
+    //             if (dynamicExtensionFunction) {
+    //                 try {
+    //                     const result: SolidUiEventResponse = await dynamicExtensionFunction(event);
+    //                     if (result && result?.layoutChanged && result?.newLayout) {
+    //                         // const newLocalFormViewMetadata = {
+    //                         //     ...localFormViewMetadata,
+    //                         //     data: {
+    //                         //         ...localFormViewMetadata.data,
+    //                         //         solidView: {
+    //                         //             ...localFormViewMetadata.data.solidView,
+    //                         //             layout: result.newLayout
+    //                         //         }
+    //                         //     }
+    //                         // };
+    //                         // localFormViewMetadata = newLocalFormViewMetadata;
+    //                         // customLayout = result.newLayout;
+    //                         // setFormViewMetaData(localFormViewMetadata);
+    //                         setFormViewLayout(result.newLayout);
+    //                         // if (params.customLayout) {
+    //                         //     setFormViewLayout(customLayout);
+    //                         // } else {
+    //                         //     setFormViewLayout(localFormViewMetadata.data.solidView.layout);
+    //                         // }
+    //                     }
+    //                     if (result && result?.dataChanged && result?.newFormData) {
+    //                         formViewData = result.newFormData;
+    //                         setInitialEntityData(formViewData);
+    //                     }
+    //                 } catch (error) {
+    //                     console.error(ERROR_MESSAGES.ON_FORM_LOAD, error);
+    //                 }
+    //             }
+    //         }
+    //     };
+    //     handleOnFormLayoutLoadEvent();
+    //     handleOnFormDataLoadEvent();
+    //     handleOnFormLoadEvent();
+    // }, [solidFormViewMetaData, solidFormViewData]);
+    useEffect(() => {
+        const runFormEvents = async () => {
+            if (!solidFormViewMetaData)
+                return;
+            /** ----------------------------
+             * 1. Initialize working state
+             * ----------------------------- */
+            let workingLayout = params.customLayout ?? solidFormViewMetaData?.data?.solidView?.layout;
+            let workingFormData = solidFormViewData?.data;
+            const baseEvent = {
+                parentData: params?.parentData,
+                fieldsMetadata: solidFormViewMetaData,
+                viewMetadata: solidFormViewMetaData?.data?.solidView,
+                queryParams: {
+                    actionName,
+                    actionType,
+                    actionContext,
+                },
+            };
+            /** ----------------------------
+             * 2. onFormLayoutLoad
+             * ----------------------------- */
+            const onFormLayoutLoadFn = solidFormViewMetaData?.data?.solidView?.layout?.onFormLayoutLoad;
+            if (onFormLayoutLoadFn) {
+                const fn = getExtensionFunction(onFormLayoutLoadFn);
+                if (fn) {
+                    try {
+                        const result = await fn({
+                            ...baseEvent,
+                            type: "onFormLayoutLoad",
+                            formData: workingFormData,
+                            formViewLayout: workingLayout,
+                        });
+                        if (result?.layoutChanged && result?.newLayout) {
+                            workingLayout = result.newLayout;
                         }
-                        _f.label = 5;
-                    case 5: return [2 /*return*/];
+                    }
+                    catch (e) {
+                        console.error(ERROR_MESSAGES.DYNAMIC_FUNCTION_ERROR, e);
+                    }
                 }
-            });
-        }); };
-        var handleOnFormDataLoadEvent = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var dynamicHeader, DynamicFunctionComponent, formViewData, event, updatedFormData;
-            var _a, _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        dynamicHeader = (_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.layout) === null || _c === void 0 ? void 0 : _c.onFormDataLoad;
-                        DynamicFunctionComponent = null;
-                        formViewData = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data;
-                        event = {
-                            fieldsMetadata: solidFormViewMetaData,
-                            formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data,
+            }
+            /** ----------------------------
+             * 3. onFormDataLoad
+             * ----------------------------- */
+            const onFormDataLoadFn = solidFormViewMetaData?.data?.solidView?.layout?.onFormDataLoad;
+            if (onFormDataLoadFn) {
+                const fn = getExtensionFunction(onFormDataLoadFn);
+                if (fn) {
+                    try {
+                        const result = await fn({
+                            ...baseEvent,
                             type: "onFormDataLoad",
-                            viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView,
-                            formViewLayout: formViewLayout,
-                            queryParams: {
-                                actionName: actionName,
-                                actionType: actionType,
-                                actionContext: actionContext
-                            }
-                        };
-                        if (!dynamicHeader) return [3 /*break*/, 3];
-                        DynamicFunctionComponent = getExtensionFunction(dynamicHeader);
-                        if (!DynamicFunctionComponent) return [3 /*break*/, 2];
-                        return [4 /*yield*/, DynamicFunctionComponent(event)];
-                    case 1:
-                        updatedFormData = _e.sent();
-                        if (updatedFormData && (updatedFormData === null || updatedFormData === void 0 ? void 0 : updatedFormData.dataChanged) && (updatedFormData === null || updatedFormData === void 0 ? void 0 : updatedFormData.newFormData)) {
-                            formViewData = updatedFormData.newFormData;
-                        }
-                        _e.label = 2;
-                    case 2:
-                        if (formViewData) {
-                            setInitialEntityData(formViewData);
+                            formData: workingFormData,
+                            formViewLayout: workingLayout, // ✅ UPDATED layout
+                        });
+                        if (result?.dataChanged && result?.newFormData) {
+                            workingFormData = result.newFormData;
                         }
-                        _e.label = 3;
-                    case 3: return [2 /*return*/];
+                    }
+                    catch (e) {
+                        console.error(ERROR_MESSAGES.DYNAMIC_FUNCTION_ERROR, e);
+                    }
                 }
-            });
-        }); };
-        var handleOnFormLoadEvent = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var onFormLoadHandler, DynamicFunctionComponent, formLayout, customLayout, formViewData, event, result, newFormLayout, error_3;
-            var _a, _b, _c, _d;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        onFormLoadHandler = (_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.layout) === null || _c === void 0 ? void 0 : _c.onFormLoad;
-                        DynamicFunctionComponent = null;
-                        formLayout = solidFormViewMetaData;
-                        customLayout = params === null || params === void 0 ? void 0 : params.customLayout;
-                        formViewData = solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data;
-                        event = {
-                            parentData: params === null || params === void 0 ? void 0 : params.parentData,
-                            fieldsMetadata: solidFormViewMetaData,
-                            formData: solidFormViewData === null || solidFormViewData === void 0 ? void 0 : solidFormViewData.data,
-                            type: 'onFormLoad',
-                            viewMetadata: (_d = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _d === void 0 ? void 0 : _d.solidView,
-                            formViewLayout: formViewLayout,
-                            queryParams: {
-                                actionName: actionName,
-                                actionType: actionType,
-                                actionContext: actionContext
-                            }
-                        };
-                        if (!onFormLoadHandler) return [3 /*break*/, 4];
-                        DynamicFunctionComponent = getExtensionFunction(onFormLoadHandler);
-                        if (!DynamicFunctionComponent) return [3 /*break*/, 4];
-                        _e.label = 1;
-                    case 1:
-                        _e.trys.push([1, 3, , 4]);
-                        return [4 /*yield*/, DynamicFunctionComponent(event)];
-                    case 2:
-                        result = _e.sent();
-                        if (result && (result === null || result === void 0 ? void 0 : result.layoutChanged) && (result === null || result === void 0 ? void 0 : result.newLayout)) {
-                            newFormLayout = __assign(__assign({}, formLayout), { data: __assign(__assign({}, formLayout.data), { solidView: __assign(__assign({}, formLayout.data.solidView), { layout: result.newLayout }) }) });
-                            formLayout = newFormLayout;
-                            customLayout = result.newLayout;
-                            setFormViewMetaData(formLayout);
-                            if (params.customLayout) {
-                                setFormViewLayout(customLayout);
-                            }
-                            else {
-                                setFormViewLayout(formLayout.data.solidView.layout);
-                            }
+            }
+            /** ----------------------------
+             * 4. onFormLoad
+             * ----------------------------- */
+            const onFormLoadFn = solidFormViewMetaData?.data?.solidView?.layout?.onFormLoad;
+            if (onFormLoadFn) {
+                const fn = getExtensionFunction(onFormLoadFn);
+                if (fn) {
+                    try {
+                        const result = await fn({
+                            ...baseEvent,
+                            type: "onFormLoad",
+                            formData: workingFormData,
+                            formViewLayout: workingLayout, // ✅ FINAL layout
+                        });
+                        if (result?.layoutChanged && result?.newLayout) {
+                            workingLayout = result.newLayout;
                         }
-                        if (result && (result === null || result === void 0 ? void 0 : result.dataChanged) && (result === null || result === void 0 ? void 0 : result.newFormData)) {
-                            formViewData = result.newFormData;
-                            setInitialEntityData(formViewData);
+                        if (result?.dataChanged && result?.newFormData) {
+                            workingFormData = result.newFormData;
                         }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_3 = _e.sent();
-                        console.error(ERROR_MESSAGES.ON_FORM_LOAD, error_3);
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+                    }
+                    catch (e) {
+                        console.error(ERROR_MESSAGES.ON_FORM_LOAD, e);
+                    }
                 }
-            });
-        }); };
-        handleOnFormLayoutLoadEvent();
-        handleOnFormDataLoadEvent();
-        handleOnFormLoadEvent();
+            }
+            /** ----------------------------
+             * 5. Commit once to React state
+             * ----------------------------- */
+            if (workingLayout) {
+                setFormViewLayout(workingLayout);
+            }
+            if (workingFormData) {
+                setInitialEntityData(workingFormData);
+            }
+        };
+        runFormEvents();
     }, [solidFormViewMetaData, solidFormViewData]);
-    useEffect(function () {
+    useEffect(() => {
         if (solidFormViewData) {
             setInitialEntityData(solidFormViewData.data);
         }
     }, [solidFormViewData]);
-    var formik;
+    let formik;
     // If either the metadata or the data of this form is loading, then we simply render a loading screen...
     if (solidFormViewMetaDataIsLoading || solidFormViewDataIsLoading || !formViewLayout) {
         formik = useFormik({
@@ -1014,14 +1004,14 @@ var SolidFormView = function (params) {
     // At this point everything required to render the form is loaded, so we go ahead and start rendering things dynamically...
     else {
         // Initialize formik...
-        var solidView_1 = solidFormViewMetaData.data.solidView;
-        var solidFieldsMetadata_1 = solidFormViewMetaData.data.solidFieldsMetadata;
-        var validationSchema = {};
-        var initialValues = {};
-        for (var i = 0; i < (layoutFields === null || layoutFields === void 0 ? void 0 : layoutFields.length); i++) {
-            var formLayoutField = layoutFields[i];
-            var fieldMetadata = solidFieldsMetadata_1[formLayoutField.attrs.name];
-            var fieldContext = {
+        const solidView = solidFormViewMetaData.data.solidView;
+        const solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
+        const validationSchema = {};
+        const initialValues = {};
+        for (let i = 0; i < layoutFields?.length; i++) {
+            const formLayoutField = layoutFields[i];
+            const fieldMetadata = solidFieldsMetadata[formLayoutField.attrs.name];
+            const fieldContext = {
                 fieldMetadata: fieldMetadata,
                 field: formLayoutField,
                 data: initialEntityData,
@@ -1031,9 +1021,9 @@ var SolidFormView = function (params) {
             if (params.parentData) {
                 fieldContext.parentData = params.parentData;
             }
-            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;
+            let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
+            if (!fieldMetadata?.type) {
+                const errorMessage = formLayoutField?.attrs?.label ? formLayoutField?.attrs?.label : formLayoutField.attrs.name;
                 if (!errorFields.includes(errorMessage)) {
                     // errorFields.push(errorMessage);
                 }
@@ -1051,91 +1041,97 @@ var SolidFormView = function (params) {
             enableReinitialize: true,
             onSubmit: onFormikSubmit,
         });
-        var formFieldOnXXX_1 = function (event, eventType) { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, fieldName, value, type, checked, changeHandler, dynamicChangeHandler, event_2, updatedFormInfo_1;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        // Invoke the formik change 
-                        if (eventType === 'onFieldChange') {
-                            formik.handleChange(event);
-                        }
-                        _a = event.target, fieldName = _a.name, value = _a.value, type = _a.type, checked = _a.checked;
-                        changeHandler = solidView_1.layout.attrs[eventType];
-                        if (!changeHandler) {
-                            changeHandler = solidView_1.layout[eventType];
-                        }
-                        if (!changeHandler) return [3 /*break*/, 3];
-                        dynamicChangeHandler = getExtensionFunction(changeHandler);
-                        if (!dynamicChangeHandler) return [3 /*break*/, 2];
-                        event_2 = {
-                            fieldsMetadata: solidFieldsMetadata_1,
-                            formData: formik.values,
-                            modifiedField: fieldName,
-                            modifiedFieldValue: value,
-                            // @ts-ignore
-                            // TODO: HP & OR: This will be fixed once we figure out how to get types exported from solid-core-ui
-                            type: eventType,
-                            viewMetadata: solidView_1,
-                            formViewLayout: formViewLayout,
-                            queryParams: {
-                                actionName: actionName,
-                                actionContext: actionContext,
-                                actionType: actionType
-                            }
-                        };
-                        return [4 /*yield*/, dynamicChangeHandler(event_2)];
-                    case 1:
-                        updatedFormInfo_1 = _b.sent();
-                        // If dataChanged is true, update Formik values
-                        if ((updatedFormInfo_1 === null || updatedFormInfo_1 === void 0 ? void 0 : updatedFormInfo_1.dataChanged) && updatedFormInfo_1.newFormData) {
-                            // This does one field at a time.
-                            // TODO: does the below fire change events again?
-                            Object.entries(updatedFormInfo_1.newFormData).forEach(function (_a) {
-                                var key = _a[0], newValue = _a[1];
-                                formik.setFieldValue(key, newValue);
-                            });
-                            // This does all at once.
-                            // formik.setValues({
-                            //     ...formik.values,
-                            //     ...updatedFormInfo.newFormData
-                            // });
-                        }
-                        // if layout has changed then we need to re-render.
-                        if ((updatedFormInfo_1 === null || updatedFormInfo_1 === void 0 ? void 0 : updatedFormInfo_1.layoutChanged) && updatedFormInfo_1.newLayout) {
-                            // setFormViewMetaData({ ...formViewMetaData, layout: updatedFormInfo.newLayout });
-                            // TODO: this will trigger a useEffect dependent on formViewMetadata that invokes setFormViewLayout, 
-                            // TODO: which means that this will not work if custom layout has been injected as a prop.
-                            setFormViewLayout(updatedFormInfo_1.newLayout);
-                            setFormViewMetaData(function (prevMetaData) {
-                                var updatedFormViewMetadata = __assign(__assign({}, prevMetaData), { data: __assign(__assign({}, prevMetaData.data), { solidView: __assign(__assign({}, prevMetaData.data.solidView), { layout: updatedFormInfo_1.newLayout }) }) });
-                                return updatedFormViewMetadata;
-                            });
+        const formFieldOnXXX = async (event, eventType) => {
+            // Invoke the formik change 
+            if (eventType === 'onFieldChange') {
+                formik.handleChange(event);
+            }
+            // get details from the form event
+            const { name: fieldName, value, type, checked } = event.target;
+            // TODO: check if there is a change handler registered with this form view, load it and fire it.
+            let changeHandler = solidView.layout.attrs[eventType];
+            if (!changeHandler) {
+                changeHandler = solidView.layout[eventType];
+            }
+            if (changeHandler) {
+                // Get hold of the dynamic module...
+                // const dynamicChangeHandler = await loadDynamicModule(changeHandler);
+                const dynamicChangeHandler = getExtensionFunction(changeHandler);
+                // Invoke the dynamic module...
+                if (dynamicChangeHandler) {
+                    const event = {
+                        fieldsMetadata: solidFieldsMetadata,
+                        formData: formik.values,
+                        modifiedField: fieldName,
+                        modifiedFieldValue: value,
+                        // @ts-ignore
+                        // TODO: HP & OR: This will be fixed once we figure out how to get types exported from solid-core-ui
+                        type: eventType,
+                        viewMetadata: solidView,
+                        formViewLayout: formViewLayout,
+                        queryParams: {
+                            actionName,
+                            actionContext,
+                            actionType
                         }
-                        return [3 /*break*/, 3];
-                    case 2:
-                        // TODO: Show an error popup and stop form rendering ideallly...
-                        console.log(ERROR_MESSAGES.UNABLE_LOAD_DYNAMIC_MODULE, changeHandler);
-                        _b.label = 3;
-                    case 3: return [2 /*return*/];
+                    };
+                    // Invoke the dynamic change handler: 
+                    // TODO: encapsulate in try/catch, catch the exception render in the UI as an error & stop form rendering.
+                    const updatedFormInfo = await dynamicChangeHandler(event);
+                    // If dataChanged is true, update Formik values
+                    if (updatedFormInfo?.dataChanged && updatedFormInfo.newFormData) {
+                        // This does one field at a time.
+                        // TODO: does the below fire change events again?
+                        Object.entries(updatedFormInfo.newFormData).forEach(([key, newValue]) => {
+                            formik.setFieldValue(key, newValue);
+                        });
+                        // This does all at once.
+                        // formik.setValues({
+                        //     ...formik.values,
+                        //     ...updatedFormInfo.newFormData
+                        // });
+                    }
+                    // if layout has changed then we need to re-render.
+                    if (updatedFormInfo?.layoutChanged && updatedFormInfo.newLayout) {
+                        // setFormViewMetaData({ ...formViewMetaData, layout: updatedFormInfo.newLayout });
+                        // TODO: this will trigger a useEffect dependent on formViewMetadata that invokes setFormViewLayout, 
+                        // TODO: which means that this will not work if custom layout has been injected as a prop.
+                        setFormViewLayout(updatedFormInfo.newLayout);
+                        // setFormViewMetaData((prevMetaData: any) => {
+                        //     const updatedFormViewMetadata = {
+                        //         ...prevMetaData,
+                        //         data: {
+                        //             ...prevMetaData.data,
+                        //             solidView: {
+                        //                 ...prevMetaData.data.solidView,
+                        //                 layout: updatedFormInfo.newLayout,
+                        //             },
+                        //         },
+                        //     };
+                        //     return updatedFormViewMetadata;
+                        // });
+                    }
                 }
-            });
-        }); };
+                else {
+                    // TODO: Show an error popup and stop form rendering ideallly...
+                    console.log(ERROR_MESSAGES.UNABLE_LOAD_DYNAMIC_MODULE, changeHandler);
+                }
+            }
+        };
         // Now render the form dynamically...
-        var renderFormElementDynamically_1 = function (element, solidFormViewMetaData) {
-            var _a;
-            var type = element.type, attrs = element.attrs, body = element.body, children = element.children;
+        const renderFormElementDynamically = (element, recursiveFVMD) => {
+            let { type, attrs, body, children } = element;
             // const key = attrs?.name ?? generateRandomKey();
-            var key = attrs === null || attrs === void 0 ? void 0 : attrs.label;
-            var visible = attrs === null || attrs === void 0 ? void 0 : attrs.visible;
+            const key = attrs?.label;
+            let visible = attrs?.visible;
             if (visible === undefined || visible === null) {
                 visible = true;
             }
             // console.log(`Resolved visibility of form element ${ key } to ${ visible } `);
             // console.log(`Form element ${ key }: `, attrs);
-            var visibleToRole = (attrs === null || attrs === void 0 ? void 0 : attrs.roles) || [];
+            const visibleToRole = attrs?.roles || [];
             if (visibleToRole.length > 0) {
-                if (!hasAnyRole((_a = user === null || user === void 0 ? void 0 : user.user) === null || _a === void 0 ? void 0 : _a.roles, visibleToRole)) {
+                if (!hasAnyRole(user?.user?.roles, visibleToRole)) {
                     return _jsx(_Fragment, {});
                 }
             }
@@ -1143,125 +1139,117 @@ var SolidFormView = function (params) {
                 case "form":
                     if (!children)
                         children = [];
-                    return _jsx("div", { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                    return _jsx("div", { children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                 case "div":
                     if (!children)
                         children = [];
-                    return _jsx("div", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }), key);
+                    return _jsx("div", { ...attrs, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                 case "span":
-                    return _jsx("span", __assign({}, attrs, { children: body }), key);
+                    return _jsx("span", { ...attrs, children: body }, key);
                 case "p":
-                    return _jsx("p", __assign({ className: attrs === null || attrs === void 0 ? void 0 : attrs.className }, attrs, { children: body }), key);
+                    return _jsx("p", { className: attrs?.className, ...attrs, children: body }, key);
                 case "h1":
-                    return _jsx("h1", __assign({}, attrs, { children: body }), key);
+                    return _jsx("h1", { ...attrs, children: body }, key);
                 case "h2":
-                    return _jsx("h2", __assign({}, attrs, { children: body }), key);
+                    return _jsx("h2", { ...attrs, children: body }, key);
                 case "ul":
                     if (!children)
                         children = [];
-                    return _jsx("ul", __assign({}, attrs, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }), key);
+                    return _jsx("ul", { ...attrs, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                 case "li":
-                    return _jsx("li", __assign({}, attrs, { children: body }), key);
+                    return _jsx("li", { ...attrs, children: body }, key);
                 case "sheet":
-                    return _jsx(SolidSheet, { children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                    return _jsx(SolidSheet, { children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                 case "group":
                     if (visible === true) {
-                        return _jsx(SolidGroup, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                        return _jsx(SolidGroup, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                     }
                 case "row":
                     if (visible === true) {
-                        return _jsx(SolidRow, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                        return _jsx(SolidRow, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                     }
                 case "column":
                     if (visible === true) {
-                        return _jsx(SolidColumn, { attrs: attrs, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                        return _jsx(SolidColumn, { attrs: attrs, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                     }
                 case "field": {
                     if (visible === true) {
                         // const fieldMetadata = solidFieldsMetadata[attrs.name];
-                        var fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
+                        const fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[attrs.name];
                         // Read only permission if there is no update permission on model and router doesnt contains new
-                        var readOnlyPermission = !actionsAllowed.includes("".concat(permissionExpression(params.modelName, 'update'))) && params.id !== "new";
-                        return _jsx(SolidField, { field: element, formik: formik, fieldMetadata: fieldMetadata, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, solidFormViewMetaData: solidFormViewMetaData, modelName: params.modelName, readOnly: readOnlyPermission, viewMode: viewMode, onChange: formFieldOnXXX_1, onBlur: formFieldOnXXX_1, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, parentData: params.parentData, onEmbeddedFormSave: function () { return setRefreshChatterMessage(true); } }, attrs.name);
+                        const readOnlyPermission = !actionsAllowed.includes(`${permissionExpression(params.modelName, 'update')}`) && params.id !== "new";
+                        return _jsx(SolidField, { field: element, formik: formik, fieldMetadata: fieldMetadata, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, solidFormViewMetaData: recursiveFVMD, modelName: params.modelName, readOnly: readOnlyPermission, viewMode: viewMode, onChange: formFieldOnXXX, onBlur: formFieldOnXXX, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, parentData: params.parentData, onEmbeddedFormSave: () => setRefreshChatterMessage(true) }, attrs.name);
                     }
                 }
                 case "notebook":
                     if (visible === true) {
-                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, children: children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData, formik); }) }, key);
+                        return _jsx(SolidNotebook, { activeTab: searchParams.get("activeTab") || "", embeded: params.embeded, children: children.map((element) => renderFormElementDynamically(element, recursiveFVMD, formik)) }, key);
                     }
                 case "page":
                     if (visible === true) {
-                        var fields = children.flatMap(function (child) { return getLayoutFields(child); });
-                        var pageChildren = children.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); });
-                        return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields: fields });
+                        const fields = children.flatMap((child) => getLayoutFields(child));
+                        const pageChildren = children.map((element) => renderFormElementDynamically(element, recursiveFVMD));
+                        return SolidPage({ children: pageChildren, attrs: attrs, key: key, formik: formik, fields });
                     }
                 case "custom":
                     if (visible === true) {
-                        var widgetName = attrs === null || attrs === void 0 ? void 0 : attrs.widget;
-                        var fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
+                        const widgetName = attrs?.widget;
+                        const fieldMetadata = recursiveFVMD.data.solidFieldsMetadata[attrs.name];
                         if (widgetName) {
                             // widgetName, formik, field, fieldMetadata, solidFormViewMetaData
-                            return _jsx(SolidDynamicWidget, { widgetName: widgetName, field: element, formik: formik, fieldMetadata: fieldMetadata, solidFormViewMetaData: solidFormViewMetaData, solidFormViewData: solidFormViewData }, key);
+                            return _jsx(SolidDynamicWidget, { widgetName: widgetName, field: element, formik: formik, fieldMetadata: fieldMetadata, solidFormViewMetaData: recursiveFVMD, solidFormViewData: solidFormViewData }, key);
                         }
                     }
                 default:
                     return null;
             }
         };
-        var renderFormDynamically = function (solidFormViewMetaData) {
-            if (!solidFormViewMetaData) {
-                return;
-            }
-            if (!solidFormViewMetaData.data) {
+        const renderFormDynamically = (recursiveFVMD, formViewLayout) => {
+            if (!recursiveFVMD) {
                 return;
             }
-            var solidView = solidFormViewMetaData.data.solidView;
-            var solidFieldsMetadata = solidFormViewMetaData.data.solidFieldsMetadata;
-            if (!solidView || !solidFieldsMetadata) {
+            if (!recursiveFVMD.data) {
                 return;
             }
+            const solidView = recursiveFVMD.data.solidView;
+            const solidFieldsMetadata = recursiveFVMD.data.solidFieldsMetadata;
             if (!solidView || !solidFieldsMetadata) {
                 return;
             }
-            var updatedLayout = [formViewLayout];
-            var dynamicForm = updatedLayout.map(function (element) { return renderFormElementDynamically_1(element, solidFormViewMetaData); });
+            const updatedLayout = [formViewLayout];
+            const dynamicForm = updatedLayout.map((element) => renderFormElementDynamically(element, recursiveFVMD));
             return dynamicForm;
         };
-        var handleDeleteEntity_1 = function () { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                deleteEntity(solidFormViewData.data.id);
-                setDeleteDialogVisible(false);
-                if (params.embeded == true) {
-                    setRedirectToList(false);
-                }
-                else {
-                    setRedirectToList(true);
-                }
-                return [2 /*return*/];
-            });
-        }); };
-        var onDeleteClose_1 = function () {
+        const handleDeleteEntity = async () => {
+            deleteEntity(solidFormViewData.data.id);
+            setDeleteDialogVisible(false);
+            if (params.embeded == true) {
+                setRedirectToList(false);
+            }
+            else {
+                setRedirectToList(true);
+            }
+            // router.back();
+        };
+        const onDeleteClose = () => {
             setDeleteDialogVisible(false);
         };
-        // TODO: This was simply to demonstrate how we can use dynamic components, we will remove this and use it in a more sensible way in the layout. 
-        // TODO: to demonstrated this you can simply add the below to the layout of the book form view.
-        // TODO: "header": "BookFormViewDynamicComponent",
-        var dynamicHeader = (_f = solidView_1.layout) === null || _f === void 0 ? void 0 : _f.header;
-        var DynamicHeaderComponent = null;
+        const dynamicHeader = solidView.layout?.header;
+        let DynamicHeaderComponent = null;
         if (dynamicHeader) {
             DynamicHeaderComponent = getExtensionComponent(dynamicHeader);
         }
-        var customFormComponentEdit = solidView_1.layout.attrs.customFormComponentEdit;
-        var customFormComponentNew = solidView_1.layout.attrs.customFormComponentNew;
-        var DynamicFormComponentEdit = null;
-        var DynamicFormComponentNew = null;
+        const customFormComponentEdit = solidView.layout.attrs.customFormComponentEdit;
+        const customFormComponentNew = solidView.layout.attrs.customFormComponentNew;
+        let DynamicFormComponentEdit = null;
+        let DynamicFormComponentNew = null;
         if (customFormComponentEdit) {
             DynamicFormComponentEdit = getExtensionComponent(customFormComponentEdit);
         }
         if (customFormComponentNew) {
             DynamicFormComponentNew = getExtensionComponent(customFormComponentNew);
         }
-        var handleChatterExpandClick_1 = function (option) {
+        const handleChatterExpandClick = (option) => {
             setShowChatter(true);
             if (option === 'info') {
                 setDefaultTabViewOptionIndex(0);
@@ -1275,20 +1263,17 @@ var SolidFormView = function (params) {
             }
         };
         //en 4 null
-        var handleLocaleChangeRedirect = function (locale, defaultEntityLocaleId, viewMode) {
-            var _a, _b;
-            var newViewMode = viewMode;
-            var defaultApplicableLocales = ((_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.applicableLocales) || [];
+        const handleLocaleChangeRedirect = (locale, defaultEntityLocaleId, viewMode) => {
+            let newViewMode = viewMode;
+            const defaultApplicableLocales = solidFormViewMetaData?.data?.applicableLocales || [];
             //fr 4
-            var matchingLocale = defaultApplicableLocales.find(function (loc) {
-                return loc.defaultEntityLocaleId &&
-                    loc.entityId &&
-                    loc.locale === locale;
-            });
+            const matchingLocale = defaultApplicableLocales.find((loc) => loc.defaultEntityLocaleId &&
+                loc.entityId &&
+                loc.locale === locale);
             // Extract the base path from the current pathname, removing query params if any
-            var basePath = pathname.split('?')[0];
+            const basePath = pathname.split('?')[0];
             // Determine entity part of the path (new or existing entityId)
-            var entityPart = (_b = matchingLocale === null || matchingLocale === void 0 ? void 0 : matchingLocale.entityId) !== null && _b !== void 0 ? _b : 'new';
+            const entityPart = matchingLocale?.entityId ?? 'new';
             if (entityPart === 'new' && viewMode === 'view') {
                 newViewMode = 'edit';
             }
@@ -1299,66 +1284,56 @@ var SolidFormView = function (params) {
                 newViewMode = 'edit';
             }
             // Construct new pathname using existing basePath and replacing entity segment
-            var updatedPath = basePath.replace(/\/form\/[^/]+/, "/form/".concat(entityPart));
-            var queryParams = new URLSearchParams({
+            const updatedPath = basePath.replace(/\/form\/[^/]+/, `/form/${entityPart}`);
+            const queryParams = new URLSearchParams({
                 viewMode: newViewMode,
-                locale: locale,
-                defaultEntityLocaleId: defaultEntityLocaleId,
+                locale,
+                defaultEntityLocaleId,
             });
-            router.push("".concat(updatedPath, "?").concat(queryParams.toString()), { scroll: false });
+            router.push(`${updatedPath}?${queryParams.toString()}`, { scroll: false });
         };
-        var handleConfirmAccept = function () {
-            var _a;
-            (_a = confirmResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(confirmResolveRef, true);
+        const handleConfirmAccept = () => {
+            confirmResolveRef.current?.(true);
             setConfirmVisible(false);
         };
-        var handleConfirmReject = function () {
-            var _a;
-            (_a = confirmResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(confirmResolveRef, false);
+        const handleConfirmReject = () => {
+            confirmResolveRef.current?.(false);
             setConfirmVisible(false);
         };
-        var handleDraftPublishWorkFlow = function (type) { return __awaiter(void 0, void 0, void 0, function () {
-            var userChoice, result;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, confirmDialogWithPromise()];
-                    case 1:
-                        userChoice = _b.sent();
-                        if (!userChoice)
-                            return [2 /*return*/];
-                        if (!(type === "publish")) return [3 /*break*/, 3];
-                        return [4 /*yield*/, publishSolidEntity(params.id).unwrap()];
-                    case 2:
-                        result = _b.sent();
-                        showToast("success", ERROR_MESSAGES.SAVED, ERROR_MESSAGES.MARK_PUBLISH);
-                        return [3 /*break*/, 5];
-                    case 3: return [4 /*yield*/, unpublishSolidEntity(params.id).unwrap()];
-                    case 4:
-                        result = _b.sent();
-                        showToast("success", ERROR_MESSAGES.SAVED, ERROR_MESSAGES.MARK_UNPUBLISH);
-                        _b.label = 5;
-                    case 5:
-                        console.log("publish/unpublish result", result);
-                        // Set updated publish value from API response
-                        setPublished((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.publishedAt);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        var isVideoOrAudio_1 = function (url) {
-            var _a;
+        const handleDraftPublishWorkFlow = async (type) => {
+            const userChoice = await confirmDialogWithPromise();
+            if (!userChoice)
+                return;
+            // const finalPublishedValue =
+            //     type === "publish" ? new Date().toISOString() : "";
+            //   setPublished(finalPublishedValue);
+            // const formdata = new FormData();
+            // formdata.append("publishedAt", finalPublishedValue);
+            let result;
+            if (type === "publish") {
+                result = await publishSolidEntity(params.id).unwrap();
+                showToast("success", ERROR_MESSAGES.SAVED, ERROR_MESSAGES.MARK_PUBLISH);
+            }
+            else {
+                result = await unpublishSolidEntity(params.id).unwrap();
+                showToast("success", ERROR_MESSAGES.SAVED, ERROR_MESSAGES.MARK_UNPUBLISH);
+            }
+            console.log("publish/unpublish result", result);
+            // Set updated publish value from API response
+            setPublished(result?.data?.publishedAt);
+        };
+        const isVideoOrAudio = (url) => {
             // Remove query params if present
-            var cleanUrl = url.split("?")[0];
-            var ext = (_a = cleanUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const cleanUrl = url.split("?")[0];
+            const ext = cleanUrl.split(".").pop()?.toLowerCase();
             // Combined list of supported media extensions
-            var mediaExt = ["mp4", "webm", "ogg", "mov", "mp3", "wav", "m4a", "aac"];
+            const mediaExt = ["mp4", "webm", "ogg", "mov", "mp3", "wav", "m4a", "aac"];
             return ext ? mediaExt.includes(ext) : false;
         };
-        var controlsList = ["nodownload", "nofullscreen", "noremoteplayback"];
-        var slides = lightboxUrls.map(function (item) {
-            var url = item.src || item.downloadUrl || "";
-            if (isVideoOrAudio_1(url)) {
+        const controlsList = ["nodownload", "nofullscreen", "noremoteplayback"];
+        const slides = lightboxUrls.map((item) => {
+            const url = item.src || item.downloadUrl || "";
+            if (isVideoOrAudio(url)) {
                 return {
                     type: "video",
                     sources: [{ src: url, type: "video/mp4", }],
@@ -1366,9 +1341,9 @@ var SolidFormView = function (params) {
             }
             return { src: url };
         });
-        var hasMedia = slides.some(function (s) { return s.type === "video"; });
-        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, 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); } }), _jsxs("div", { className: "px-4 py-3 md:p-4 solid-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))] })] }), _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: {
+        const hasMedia = slides.some((s) => s.type === "video");
+        return (_jsxs("div", { className: "solid-form-wrapper", children: [_jsx(Toast, { ref: toast }), _jsxs("div", { className: "solid-form-section", style: { borderRight: params.embeded !== true ? '1px solid var(--primary-light-color)' : '' }, children: [_jsxs("form", { style: { width: '100%' }, onSubmit: formik.handleSubmit, children: [_jsx(SolidFormActionHeader, { formik: formik, formData: solidFormViewData?.data, params: params, actionsAllowed: actionsAllowed, formViewLayout: formViewLayout, solidView: solidView, solidFormViewMetaData: solidFormViewMetaData, initialEntityData: solidFormViewData ? solidFormViewData.data : {}, setDeleteDialogVisible: setDeleteDialogVisible, setLayoutDialogVisible: setLayoutDialogVisible, setRedirectToList: setRedirectToList, viewMode: viewMode, setViewMode: setViewMode, solidWorkflowFieldValue: solidWorkflowFieldValue, setSolidWorkflowFieldValue: setSolidWorkflowFieldValue, draftEnabled: solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow, publish: published, internationalisationEnabled: solidFormViewMetaData?.data?.solidView?.model?.internationalisation, handleDraftPublishWorkFlow: handleDraftPublishWorkFlow, onStepperUpdate: () => setRefreshChatterMessage(true) }), _jsxs("div", { className: `px-4 py-3 md:p-4 solid-form-content ${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 ${isShowChatter === false ? 'collapsed' : 'open'}`, style: { width: chatterLocaleWidth }, children: [isShowChatter && (_jsx("div", { style: {
                                     width: 5,
                                     cursor: 'col-resize',
                                     position: 'absolute',
@@ -1376,32 +1351,32 @@ var SolidFormView = function (params) {
                                     top: 0,
                                     bottom: 0,
                                     zIndex: 9,
-                                }, onMouseDown: function () { return setIsResizingChatterLocale(true); } })), isShowChatter === true &&
-                                _jsx(Button, { icon: "pi pi-angle-double-right", size: "small", text: true, className: "chatter-collapse-btn", style: { width: 30, height: 30, aspectRatio: '1/1' }, onClick: function () { return setShowChatter(false); } }), isShowChatter === false ?
-                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-2", 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) &&
-                                            _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" }), mcpUrl &&
-                                            (_jsx("div", { className: "chatter-collapsed-content", onClick: function () { return handleChatterExpandClick_1('solidx-ai'); }, children: _jsxs("div", { className: "flex gap-2", children: [" ", _jsx(SolidXAIIcon, {}), " SolidX AI "] }) })), _jsx(Button, { icon: "pi pi-chevron-left", size: "small", className: "px-0", style: { width: 30 }, onClick: function () { return handleChatterExpandClick_1('default'); } })] })
+                                }, onMouseDown: () => setIsResizingChatterLocale(true) })), isShowChatter === true &&
+                                _jsx(Button, { icon: "pi pi-angle-double-right", size: "small", text: true, className: "chatter-collapse-btn", style: { width: 30, height: 30, aspectRatio: '1/1' }, onClick: () => setShowChatter(false) }), isShowChatter === false ?
+                                _jsxs("div", { className: "flex flex-column gap-2 justify-content-center p-2", children: [solidFormViewMetaData?.data?.solidView?.model?.draftPublishWorkflow &&
+                                            _jsx("div", { className: "chatter-collapsed-content", onClick: () => handleChatterExpandClick('info'), children: "Info" }), _jsx("div", { className: "chatter-collapsed-content", onClick: () => handleChatterExpandClick('chatter'), children: "Audit Trail" }), mcpUrl &&
+                                            (_jsx("div", { className: "chatter-collapsed-content", onClick: () => handleChatterExpandClick('solidx-ai'), children: _jsxs("div", { className: "flex gap-2", children: [" ", _jsx(SolidXAIIcon, {}), " SolidX AI "] }) })), _jsx(Button, { icon: "pi pi-chevron-left", size: "small", className: "px-0", style: { width: 30 }, onClick: () => handleChatterExpandClick('default') })] })
                                 :
-                                    _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(Dialog, { visible: isDeleteDialogVisible, header: "Confirm Delete", className: "solid-confirm-dialog", modal: true, footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: function () { return handleDeleteEntity_1(); } }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose_1 })] })); }, onHide: function () { return setDeleteDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete?" }) }), _jsx(Dialog, { visible: isLayoutDialogVisible, header: "Change Form Layout", modal: true, onHide: function () { return setLayoutDialogVisible(false); }, style: { width: '50vw' }, breakpoints: {
+                                    _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(Dialog, { visible: isDeleteDialogVisible, header: "Confirm Delete", className: "solid-confirm-dialog", modal: true, footer: () => (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: () => handleDeleteEntity() }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose })] })), onHide: () => setDeleteDialogVisible(false), children: _jsx("p", { children: "Are you sure you want to delete?" }) }), _jsx(Dialog, { visible: isLayoutDialogVisible, header: "Change Form Layout", modal: true, onHide: () => setLayoutDialogVisible(false), style: { width: '50vw' }, breakpoints: {
                         '960px': '80vw',
                         '641px': '95vw'
                     }, contentClassName: "p-3 pt-0 lg:p-4", children: _jsx(SolidFormUserViewLayout, { solidFormViewMetaData: solidFormViewMetaData, setLayoutDialogVisible: setLayoutDialogVisible }) }), openLightbox &&
-                    _jsx(Lightbox, __assign({ open: openLightbox, plugins: hasMedia
+                    _jsx(Lightbox, { open: openLightbox, plugins: hasMedia
                             ? [Counter, Download, Video] // add Video plugin if needed
-                            : [Counter, Download], close: function () { return setOpenLightbox(false); }, slides: __spreadArray([], slides, true) }, (hasMedia && {
-                        video: {
-                            controls: true,
-                            playsInline: true,
-                            autoPlay: false,
-                            loop: false,
-                            muted: false,
-                            disablePictureInPicture: false,
-                            disableRemotePlayback: false,
-                            controlsList: controlsList.join(" "),
-                            crossOrigin: "anonymous",
-                            preload: "auto",
-                        },
-                    }))), _jsx(ConfirmDialog, { visible: confirmVisible, onHide: function () { return setConfirmVisible(false); }, header: "Confirmation", acceptLabel: "Yes, confrim", rejectLabel: "No, cancel", acceptClassName: "p-button-danger", rejectClassName: "p-button-text", position: "center", accept: handleConfirmAccept, reject: 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', "?"] }) }) })] }));
+                            : [Counter, Download], close: () => setOpenLightbox(false), slides: [...slides], ...(hasMedia && {
+                            video: {
+                                controls: true,
+                                playsInline: true,
+                                autoPlay: false,
+                                loop: false,
+                                muted: false,
+                                disablePictureInPicture: false,
+                                disableRemotePlayback: false,
+                                controlsList: controlsList.join(" "),
+                                crossOrigin: "anonymous",
+                                preload: "auto",
+                            },
+                        }) }), _jsx(ConfirmDialog, { visible: confirmVisible, onHide: () => setConfirmVisible(false), header: "Confirmation", acceptLabel: "Yes, confrim", rejectLabel: "No, cancel", acceptClassName: "p-button-danger", rejectClassName: "p-button-text", position: "center", accept: handleConfirmAccept, reject: 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;