FWF-4762 [feature] Upgrade formio.js and formio-react

forms-flow-web-root-config/src/index.ejs

@@ -27,6 +27,7 @@
   <link rel="stylesheet" href="https://cdn.form.io/flatpickr-formio/4.6.13-formio.3/flatpickr.min.css">
   <link rel="stylesheet" href="https://cdn.form.io/shortcut-buttons-flatpickr/0.4.0/themes/light.min.css"> <!--TODO need to override this style internally @formsflow/theme-->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/formio.full.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> <!--TODO need to figure out why @aot-technologies/formiojs doesn't package this properly
   <!-- ✅ Flatpickr Locales -->
   <!-- NOTE: Load these only if needed — optimize in future -->
   <script src="https://cdn.form.io/flatpickr-formio/4.6.13-formio.3/l10n/flatpickr-zh.js"></script>

forms-flow-web/package.json

@@ -40,8 +40,8 @@
     "redux-mock-store": "^1.5.5"
   },
   "dependencies": {
-    "@aot-technologies/formio-react": "^1.0.5",
-    "@aot-technologies/formiojs": "^1.0.3",
+    "@aot-technologies/formio-react": "npm:@leodube/formio-react@1.0.6",
+		"@aot-technologies/formiojs": "npm:@leodube/formiojs@1.0.4",
     "@aot-technologies/formsflow-formio-custom-elements": "^1.0.2",
     "@babel/generator": "7.24.1",
     "@babel/helper-split-export-declaration": "^7.24.7",
@@ -55,7 +55,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@wojtekmaj/react-daterange-picker": "^3.1.0",
     "axios": "^1.12.0",
-    "bpmn-js": "^16.0.0",
+    "bpmn-js": "^18.6.3",
     "bpmn-js-bpmnlint": "^0.19.0",
     "bpmn-js-properties-panel": "^5.7.0",
     "bpmn-xml-parser": "^1.6.0",

forms-flow-web/src/components/Draft/Edit.js

@@ -309,7 +309,7 @@ const View = React.memo((props) => {
           {processData?.status === "active" ? (
             <div className="form-view-wrapper wizard-tab service-task-details">
               <Form
-                form={form}
+                src={form}
                 submission={submission.submission}
                 url={url}
                 options={{

forms-flow-web/src/components/Modals/TaskVariableModal.js

@@ -263,13 +263,13 @@ const FormComponent = React.memo(
       <div className="d-flex">
         <div className="flex-grow-1 form-hilighter form-field-container wizard-tab">
           <Form
-            form={updatedForm}
+            src={updatedForm}
             options={{
               viewAsHtml: true,
               readOnly: true,
-                          }}
-            showHiddenFields={false}
-            formReady={(e) => {
+              showHiddenFields: showHiddenFields
+            }}
+            onFormReady={(e) => {
               formRef.current = e;
             }}
           />

forms-flow-web/src/constants/applicationComponent.js

@@ -1,4 +1,4 @@
-import utils from "@aot-technologies/formiojs/lib/utils";
+import utils from "@aot-technologies/formiojs/utils";
 
 // Factory function to create a hidden component with dynamic properties
 const createHiddenComponent = ({label, key, persistent, 

forms-flow-web/src/helper/helper.js

@@ -1,7 +1,7 @@
 import { Translation } from "react-i18next";
 import "./helper.scss";
 import _ from "lodash";
-import utils from "@aot-technologies/formiojs/lib/utils";
+import utils from "@aot-technologies/formiojs/utils";
 
 const replaceUrl = (URL, key, value) => {
   return URL.replace(key, value);

forms-flow-web/src/routes/Design/Forms/FormEdit.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useState, useEffect, useRef } from "react";
+import React, { useReducer, useState, useEffect, useRef, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { Card } from "react-bootstrap";
@@ -111,6 +111,12 @@ const EditComponent = () => {
     currentFormReducer,
     _cloneDeep(formData)
   );
+  const initialForm = useMemo(() => _cloneDeep(formData), [formData._id]);
+  const builderOptions = useRef({
+    language: lang,
+    alwaysConfirmComponentRemoval: true,
+    i18n: RESOURCE_BUNDLES_DATA,
+  });
 
   /* ------------------ handling form layout and flow layouts ----------------- */
   const [currentLayout, setCurrentLayout] = useState(FORM_LAYOUT);
@@ -1291,7 +1297,7 @@ const handleSaveLayout = () => {
                     {!createDesigns ? (
                       <div className="px-4 pt-4 form-preview">
                         <Form
-                          form={form}
+                          src={form}
                           options={{
                             disableAlerts: true,
                             noAlerts: true,
@@ -1302,15 +1308,10 @@ const handleSaveLayout = () => {
                       </div>
                     ) : (
                       <FormBuilder
-                        key={form._id}
-                        form={form}
+                        key={initialForm._id}
+                        initialForm={initialForm}
                         onChange={formChange}
-
-                        options={{
-                          language: lang,
-                          alwaysConfirmComponentRemoval: true,
-                          i18n: RESOURCE_BUNDLES_DATA,
-                        }}
+                        options={builderOptions.current}
                         onDeleteComponent={captureFormChanges}
                       />
                     )}

forms-flow-web/src/routes/Design/Forms/FormPreview.js

@@ -44,7 +44,7 @@ const FormPreview = () => {
       <div className="preview-header-text mb-4">{form?.title}</div>
       <div>
         <Form
-          form={form}
+          src={form}
           options={{
             disableAlerts: true,
             noAlerts: true,

forms-flow-web/src/routes/Submit/Forms/UserForm.js

@@ -406,7 +406,7 @@ const View = React.memo((props) => {
         <div className={`wizard-tab ${scrollableOverview}`}>
           {(isPublic || formStatus === "active") ? (
             <Form
-              form={form}
+              src={form}
               submission={isDraftEdit ? draftData : submission}
               url={url}
               options={{
@@ -420,7 +420,7 @@ const View = React.memo((props) => {
                   setDraftData({ data: formRef.current?.data });
                 }
               }}
-              formReady={(e) => formRef.current = e}
+              onFormReady={(e) => formRef.current = e}
               onSubmit={(data) => {
                 setPoll(false);
                 exitType.current = "SUBMIT";

forms-flow-web/src/routes/Submit/Forms/View.js

@@ -397,7 +397,7 @@ const View = React.memo((props) => {
   <div className="ms-4 me-4 wizard-tab service-task-details p-3">
     {(isPublic || (formStatus === "active") ) ?  (
       <Form
-        form={form}
+        src={form}
         submission={submission}
         url={url}
         options={{

forms-flow-web/src/routes/Submit/Submission/Item/Edit.js

@@ -122,7 +122,7 @@ const Edit = React.memo((props) => {
       >
         <div className="ms-4 mb-5 me-4 wizard-tab service-task-details">
           <Form
-            form={form}
+            src={form}
             submission={isFormSubmissionLoading ? updatedSubmissionData : updatedSubmission}
             url={url} 
             onSubmit={(submission) =>{

forms-flow-web/src/routes/Submit/Submission/Item/ResubmitForm.js

@@ -232,7 +232,7 @@ const Resubmit = React.memo(() => {
       >
         <div className={`wizard-tab ${scrollableOverview}`}>
             <Form
-              form={form}
+              src={form}
               submission={isFormSubmissionLoading ? updatedSubmissionData : submissionState}
               url={submissionState?.url}
               onSubmit={handleFormSubmit}

forms-flow-web/src/routes/Submit/Submission/Item/View.js

@@ -73,7 +73,7 @@ const View = React.memo((props) => {
         )}
         <div className="sub-container wizard-tab">
           <Form
-            form={form}
+            src={form}
             submission={updatedSubmission}
             url={url}
             onSubmit={onSubmit}