@kizenapps/engine 1.4.0-01344a3 → 1.5.0-53bcfe4

package/dist/react.js

@@ -1,12 +1,12 @@
-import { runScript, getPluginSafeHTML, runExpression, getStableHash, isFlagEnabled } from './chunk-ZMIF22NR.js';
+import { runScript, getPluginSafeHTML, runExpression, getStableHash, isFlagEnabled } from './chunk-D54DBKHM.js';
 import './chunk-LGJYUPYZ.js';
-import { generateExecutionKey } from './chunk-PPRZFBZZ.js';
-import { getAllNestedInputsFromConfig, getFieldFromAction } from './chunk-AY5OQ5KM.js';
-import { runFrameScriptEventName } from './chunk-GVATLHW3.js';
-import { QUERY_KEYS, ROUTE_CHANGE_INTERNAL_EVENT, IFRAME_PREFIX, ROUTE_CHANGE_IFRAME_EVENT } from './chunk-IGHBWLIS.js';
+import { generateExecutionKey } from './chunk-ANAHYJTV.js';
+import { getAllNestedInputsFromConfig, getFieldFromAction } from './chunk-36G3L5ZV.js';
+import { runFrameScriptEventName } from './chunk-4MQ4E7D6.js';
+import { QUERY_KEYS, ROUTE_CHANGE_INTERNAL_EVENT, IFRAME_PREFIX, ROUTE_CHANGE_IFRAME_EVENT } from './chunk-DQECJSHA.js';
 import './chunk-5WRI5ZAA.js';
 import { QueryClient, useQueries, useQueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect, useImperativeHandle } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { formatInTimeZone } from 'date-fns-tz';
 import { startOfDay, endOfDay } from 'date-fns';
@@ -232,6 +232,20 @@ var ModalsWrapper = ({
     cbRef.current = void 0;
     setModalQueue((prev) => prev.slice(1));
   }, []);
+  const closeCurrentModal = useCallback(
+    (values, canceled) => {
+      if (cbRef.current) {
+        cbRef.current({ canceled: canceled ?? false, values: values ?? {}, eventSource: "script" });
+        if (!canceled) {
+          onConfirm();
+        } else {
+          onHide("script");
+        }
+        completeModal();
+      }
+    },
+    [completeModal, onConfirm, onHide]
+  );
   const derivedModalState = useMemo(() => {
     return {
       props: {
@@ -263,7 +277,8 @@ var ModalsWrapper = ({
         showCreateRecordModal: handleShowCreateRecordModal,
         showCreateRelatedRecordModal: handleShowCreateRelatedRecordModal,
         onCreateRecordComplete: handleCreateRecordComplete,
-        onCreateRelatedRecordComplete: handleCreateRelatedRecordComplete
+        onCreateRelatedRecordComplete: handleCreateRelatedRecordComplete,
+        closeCurrentModal
       },
       children: children({
         showPluginModal: derivedModalState.props.show,
@@ -274,6 +289,7 @@ var ModalsWrapper = ({
         derivedModalState,
         handleCreateRecordComplete,
         handleCreateRelatedRecordComplete,
+        closeCurrentModal,
         showCreateRecordModal: createRecordModalQueue.length > 0,
         createRecordModalObjectId: createRecordModalQueue[0]?.objectId ?? "",
         showCreateRelatedRecordModal: createRelatedRecordModalQueue.length > 0,
@@ -446,7 +462,7 @@ var useCalendarSourceCustomScript = ({
     appPath
   } = useAppState();
   const { getRunnerState, getRunnerStateUpdater } = useRunnerState();
-  const { showModal, showCreateRecordModal } = useModals();
+  const { showModal, showCreateRecordModal, closeCurrentModal } = useModals();
   const { sendException } = useMonitoring();
   const history = useHistory();
   const { performRequest, createFileId, performFileUpload, getPendingCacheCount, invalidateCache } = useNetwork();
@@ -506,6 +522,7 @@ var useCalendarSourceCustomScript = ({
         sessionData,
         setSessionData,
         onShowModal: showModal,
+        onCloseModal: closeCurrentModal,
         onShowCreateRecordModal: showCreateRecordModal,
         onShowCreateRelatedRecordModal: () => {
         },
@@ -555,7 +572,8 @@ var useCalendarSourceCustomScript = ({
       performFileUpload,
       getPendingCacheCount,
       invalidateCache,
-      t
+      t,
+      closeCurrentModal
     ]
   );
   return [
@@ -830,7 +848,7 @@ var useFloatingFrameCustomScript = ({
     clientObject,
     appPath
   } = useAppState();
-  const { showModal, showCreateRecordModal, showCreateRelatedRecordModal } = useModals();
+  const { showModal, showCreateRecordModal, showCreateRelatedRecordModal, closeCurrentModal } = useModals();
   const { sendException } = useMonitoring();
   const { showToast, clearToasts } = useToast();
   const history = useHistory();
@@ -908,6 +926,7 @@ var useFloatingFrameCustomScript = ({
         sessionData,
         setSessionData,
         onShowModal: showModal,
+        onCloseModal: closeCurrentModal,
         onShowCreateRecordModal: showCreateRecordModal,
         onShowCreateRelatedRecordModal: showCreateRelatedRecordModal,
         appPath,
@@ -945,7 +964,8 @@ var useFloatingFrameCustomScript = ({
       performFileUpload,
       getPendingCacheCount,
       invalidateCache,
-      t
+      t,
+      closeCurrentModal
     ]
   );
   return [
@@ -973,7 +993,7 @@ var useGenericAppCustomScript = ({
     appPath
   } = useAppState();
   const { getRunnerState, getRunnerStateUpdater } = useRunnerState();
-  const { showModal, showCreateRecordModal } = useModals();
+  const { showModal, showCreateRecordModal, closeCurrentModal } = useModals();
   const { sendException } = useMonitoring();
   const { showToast, clearToasts } = useToast();
   const history = useHistory();
@@ -1036,6 +1056,7 @@ var useGenericAppCustomScript = ({
         sessionData,
         setSessionData,
         onShowModal: showModal,
+        onCloseModal: closeCurrentModal,
         onShowCreateRecordModal: showCreateRecordModal,
         onShowCreateRelatedRecordModal: () => {
         },
@@ -1072,7 +1093,8 @@ var useGenericAppCustomScript = ({
       performFileUpload,
       getPendingCacheCount,
       invalidateCache,
-      t
+      t,
+      closeCurrentModal
     ]
   );
   return [
@@ -1102,7 +1124,7 @@ var useRecordDetailCustomScript = ({
     appPath
   } = useAppState();
   const { getRunnerState, getRunnerStateUpdater } = useRunnerState();
-  const { showModal, showCreateRecordModal, showCreateRelatedRecordModal } = useModals();
+  const { showModal, showCreateRecordModal, showCreateRelatedRecordModal, closeCurrentModal } = useModals();
   const { sendException } = useMonitoring();
   const { showToast, clearToasts } = useToast();
   const history = useHistory();
@@ -1173,6 +1195,7 @@ var useRecordDetailCustomScript = ({
         sessionData,
         setSessionData,
         onShowModal: showModal,
+        onCloseModal: closeCurrentModal,
         onShowCreateRecordModal: showCreateRecordModal,
         onShowCreateRelatedRecordModal: showCreateRelatedRecordModal,
         appPath,
@@ -1211,7 +1234,8 @@ var useRecordDetailCustomScript = ({
       performFileUpload,
       getPendingCacheCount,
       invalidateCache,
-      t
+      t,
+      closeCurrentModal
     ]
   );
   return [
@@ -1222,56 +1246,85 @@ var useRecordDetailCustomScript = ({
     }
   ];
 };
-var usePluginSafeHTML = (html) => {
-  return useMemo(() => getPluginSafeHTML(html), [html]);
-};
-
-// src/react/hooks/useAppCustomHTML.ts
-var useAppCustomHTML = (currentPage, args) => {
-  const { showToast } = useToast();
-  const { t } = useTranslation();
-  const outputUIRef = useRef(null);
-  const interactableScriptRef = useRef(null);
-  const css = currentPage?.css;
-  const { html } = usePluginSafeHTML(currentPage?.html);
+var useManualInteraction = (execute, currentPage, elementRef, pending, args = {}) => {
   const interactableScripts = useMemo(() => {
     return currentPage?.event_scripts ?? {};
   }, [currentPage]);
-  const [executeInline, { pending: inlinePending }] = useGenericAppCustomScript({
-    onError: (e) => {
-      showToast({
-        message: `${t("Script could not be executed:")} ${e?.message ?? "Unknown Error"}`,
-        variant: "failure"
-      });
-    },
-    scriptUIRef: outputUIRef,
-    plugin: currentPage
-  });
   const handleClick = useCallback(
+    (e) => {
+      if (!pending) {
+        const target = e.target;
+        const scriptName = target.getAttribute("data-script");
+        if (scriptName && interactableScripts[scriptName]) {
+          e.preventDefault();
+          e.stopPropagation();
+          void execute(interactableScripts[scriptName], { ...args });
+        }
+      }
+    },
+    [pending, execute, interactableScripts, args]
+  );
+  const handleSubmit = useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
-      if (!inlinePending) {
+      if (!pending) {
         const target = e.target;
         const scriptName = target.getAttribute("data-script");
         if (scriptName && interactableScripts[scriptName]) {
-          void executeInline(interactableScripts[scriptName], args);
+          const rawFormData = new FormData(target);
+          const formData = Object.fromEntries(
+            [...new Set(rawFormData.keys())].map((key) => [key, rawFormData.getAll(key)])
+          );
+          void execute(interactableScripts[scriptName], { ...args, formData });
         }
       }
     },
-    [inlinePending, executeInline, interactableScripts, args]
+    [pending, execute, interactableScripts, args]
   );
   useEffect(() => {
-    const e = interactableScriptRef.current;
+    const e = elementRef?.current;
     if (e) {
       e.addEventListener("click", handleClick);
+      e.addEventListener("submit", handleSubmit);
     }
     return () => {
       if (e) {
         e.removeEventListener("click", handleClick);
+        e.removeEventListener("submit", handleSubmit);
       }
     };
-  }, [handleClick, currentPage]);
+  }, [handleClick, handleSubmit, currentPage, elementRef]);
+};
+var usePluginSafeHTML = (html) => {
+  return useMemo(() => getPluginSafeHTML(html), [html]);
+};
+
+// src/react/hooks/useAppCustomHTML.ts
+var useAppCustomHTML = (currentPage, args) => {
+  const { showToast } = useToast();
+  const { t } = useTranslation();
+  const outputUIRef = useRef(null);
+  const interactableScriptRef = useRef(null);
+  const css = currentPage?.css;
+  const { html } = usePluginSafeHTML(currentPage?.html);
+  const [executeInline, { pending: inlinePending }] = useGenericAppCustomScript({
+    onError: (e) => {
+      showToast({
+        message: `${t("Script could not be executed:")} ${e?.message ?? "Unknown Error"}`,
+        variant: "failure"
+      });
+    },
+    scriptUIRef: outputUIRef,
+    plugin: currentPage
+  });
+  useManualInteraction(
+    executeInline,
+    currentPage,
+    interactableScriptRef,
+    inlinePending,
+    args
+  );
   return {
     scopedCss: `
         @scope {
@@ -1296,36 +1349,6 @@ var useCalendarSourceReset = () => {
   );
   return resetFn;
 };
-var useManualInteraction = (execute, currentPage, elementRef, pending, args = {}) => {
-  const interactableScripts = useMemo(() => {
-    return currentPage?.event_scripts ?? {};
-  }, [currentPage]);
-  const handleClick = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!pending) {
-        const target = e.target;
-        const scriptName = target.getAttribute("data-script");
-        if (scriptName && interactableScripts[scriptName]) {
-          void execute(interactableScripts[scriptName], { ...args });
-        }
-      }
-    },
-    [pending, execute, interactableScripts, args]
-  );
-  useEffect(() => {
-    const e = elementRef?.current;
-    if (e) {
-      e.addEventListener("click", handleClick);
-    }
-    return () => {
-      if (e) {
-        e.removeEventListener("click", handleClick);
-      }
-    };
-  }, [handleClick, currentPage, elementRef]);
-};
 var useAppCallback = (search) => {
   useEffect(() => {
     const queryString = new URLSearchParams(search);
@@ -1389,6 +1412,23 @@ var useAppPage = (currentPage, search, isLoading) => {
       window.removeEventListener("message", handleMessage);
     };
   }, [handleMessage]);
+  const collectFormData = useCallback(() => {
+    const data = {};
+    let ready = true;
+    [scriptUIRef.current, interactableScriptRef.current].filter(Boolean).forEach((container) => {
+      container?.querySelectorAll("form").forEach((form) => {
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          ready = false;
+        }
+        const formData = new FormData(form);
+        for (const key of new Set(formData.keys())) {
+          data[key] = formData.getAll(key);
+        }
+      });
+    });
+    return { data, ready };
+  }, [interactableScriptRef]);
   return {
     scriptUIRef,
     outputUIRef,
@@ -1396,7 +1436,8 @@ var useAppPage = (currentPage, search, isLoading) => {
     sanitizedHtml,
     interactableScriptRef,
     iframeURL,
-    pending
+    pending,
+    collectFormData
   };
 };
 var FloatingFrameContext = createContext(null);
@@ -1975,6 +2016,9 @@ var useFloatingFrame = (params) => {
     scriptUIRef
   };
 };
+var useRegisterFormDataCollection = (ref, collectFormData) => {
+  useImperativeHandle(ref, () => ({ collectFormData }), [collectFormData]);
+};
 var useLocationChange = () => {
   useEffect(() => {
     let previousEventHash = null;
@@ -2748,6 +2792,6 @@ var useSetupAssistant = () => {
   return context;
 };
 
-export { AppBootstrapSuccess, AppEngineProvider, RouteScriptRunner, SetupAssistantController, TranslationWrapper, useAppCallback, useAppCustomHTML, useAppPage, useCalendarEvents, useCalendarOptions, useCalendarSourceCustomScript, useCalendarSourceReset, useFloatingFrame, useFloatingFrameCustomScript, useGenericAppCustomScript, useManualInteraction, usePluginSafeHTML, useRecordDetailCustomScript, useSetupAssistant, useTranslation };
+export { AppBootstrapSuccess, AppEngineProvider, RouteScriptRunner, SetupAssistantController, TranslationWrapper, useAppCallback, useAppCustomHTML, useAppPage, useCalendarEvents, useCalendarOptions, useCalendarSourceCustomScript, useCalendarSourceReset, useFloatingFrame, useFloatingFrameCustomScript, useGenericAppCustomScript, useManualInteraction, usePluginSafeHTML, useRecordDetailCustomScript, useRegisterFormDataCollection, useSetupAssistant, useTranslation };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map