dirk-cfx-react 1.1.55 → 1.1.58

package/dist/components/index.cjs

@@ -2548,6 +2548,7 @@ function Modal({
   children
 }) {
   const theme = core.useMantineTheme();
+  const pointerDownOnOverlay = react.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -2563,7 +2564,14 @@ function Modal({
         justifyContent: "center",
         background: "rgba(0,0,0,0.65)"
       },
-      onClick: clickOutside ? onClose : void 0,
+      onPointerDown: (e) => {
+        pointerDownOnOverlay.current = e.target === e.currentTarget;
+      },
+      onClick: (e) => {
+        if (clickOutside && e.target === e.currentTarget && pointerDownOnOverlay.current) {
+          onClose();
+        }
+      },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         framerMotion.motion.div,
         {
@@ -2571,7 +2579,6 @@ function Modal({
           animate: { opacity: 1, scale: 1, y: 0 },
           exit: { opacity: 0, scale: 0.96, y: 8 },
           transition: { duration: 0.18, ease: "easeOut" },
-          onClick: (e) => e.stopPropagation(),
           style: {
             background: core.alpha(theme.colors.dark[9], 0.98),
             border: `0.1vh solid ${theme.colors.dark[7]}`,
@@ -3284,6 +3291,13 @@ function useForm() {
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
+function useFormActions() {
+  const store = react.useContext(FormContext);
+  if (!store) {
+    throw new Error("useFormActions must be used inside <FormProvider>");
+  }
+  return store.getState();
+}
 function getScriptSettingsInstance() {
   throw new Error("[dirk-cfx-react] createScriptSettings must be called before using SettingsPanel");
 }
@@ -3814,29 +3828,28 @@ function SettingsPanelInner({
 function cloneSettings(value) {
   return JSON.parse(JSON.stringify(value));
 }
-var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
-function SettingsPanel(props) {
-  const { open, onClose = defaultOnClose } = props;
-  const { store, updateSettings, fetchSettings } = getScriptSettingsInstance();
-  const [isSaving, setIsSaving] = react.useState(false);
-  const [loaded, setLoaded] = react.useState(false);
+function ServerOnlyFetcher() {
+  const { fetchSettings } = getScriptSettingsInstance();
+  const { reinitialize } = useFormActions();
   react.useEffect(() => {
-    if (!open) {
-      setLoaded(false);
-      return;
-    }
     let cancelled = false;
-    fetchSettings().then(() => {
-      if (!cancelled) setLoaded(true);
+    fetchSettings().then((full) => {
+      if (!cancelled && full) reinitialize(full);
     }).catch(() => {
-      if (!cancelled) setLoaded(true);
     });
     return () => {
       cancelled = true;
     };
-  }, [open]);
-  if (!open || !loaded) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: settingsPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsx(
+  }, []);
+  return null;
+}
+var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
+function SettingsPanel(props) {
+  const { open, onClose = defaultOnClose } = props;
+  const { store, updateSettings, fetchSettings } = getScriptSettingsInstance();
+  const [isSaving, setIsSaving] = react.useState(false);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: settingsPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsxs(
     FormProvider,
     {
       initialValues: cloneSettings(store.getState()),
@@ -3858,14 +3871,17 @@ function SettingsPanel(props) {
           setIsSaving(false);
         }
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(
-        SettingsPanelInner,
-        {
-          ...props,
-          onClose,
-          isSaving
-        }
-      ) })
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ServerOnlyFetcher, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(
+          SettingsPanelInner,
+          {
+            ...props,
+            onClose,
+            isSaving
+          }
+        ) })
+      ]
     }
   ) });
 }