@foodpilot/foods 2.11.37 → 2.11.38

package/dist/components/Form/FoodsFormBase/ConfirmDialog.d.ts

@@ -1,8 +1,2 @@
-import { ConfirmOptionsType } from './FoodsFormBase';
-type ConfirmDialogProps = {
-    open: boolean;
-    onClose: () => void;
-    confirmOptions: ConfirmOptionsType;
-};
-export declare const ConfirmDialog: (props: ConfirmDialogProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const ConfirmDialog: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ConfirmDialogInner: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FoodsFormBase/ConfirmDialog.js

@@ -1,24 +1,43 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useTheme, Dialog, DialogTitle, Box, Typography, Button, Stack } from "@mui/material";
 import { ReactComponent as SvgBlackCross } from "../../../assets/icons/SsqTitleIcon/black-cross.svg.js";
-const ConfirmDialog = (props) => {
+import { useFormBaseContext } from "./FormBaseContext.js";
+import { useEffect } from "react";
+const ConfirmDialog = () => {
+  const { confirmExit } = useFormBaseContext();
+  if (confirmExit === false) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ConfirmDialogInner, {});
+};
+const ConfirmDialogInner = () => {
   const theme = useTheme();
-  const { onClose, open, confirmOptions } = props;
+  const { isConfirmOpen, setIsConfirmOpen, formSaved, confirmOptions } = useFormBaseContext();
+  const listener = (ev) => {
+    ev.preventDefault();
+  };
+  useEffect(() => {
+    window.removeEventListener("beforeunload", listener);
+    formSaved === false && window.addEventListener("beforeunload", listener);
+    return () => {
+      window.removeEventListener("beforeunload", listener);
+    };
+  }, [formSaved]);
   const handleClickValidate = () => {
     confirmOptions.onConfirm();
-    onClose();
+    setIsConfirmOpen(false);
   };
   const handleClickCancel = () => {
     confirmOptions.onCancel();
-    onClose();
+    setIsConfirmOpen(false);
   };
   return /* @__PURE__ */ jsxs(
     Dialog,
     {
       fullWidth: true,
       maxWidth: "xs",
-      open,
-      onClose,
+      open: isConfirmOpen,
+      onClose: () => setIsConfirmOpen(false),
       sx: {
         ".MuiPaper-rounded": {
           borderRadius: "12px"
@@ -43,7 +62,7 @@ const ConfirmDialog = (props) => {
                   },
                   children: [
                     /* @__PURE__ */ jsx(Typography, { variant: "h3", children: confirmOptions.titleText }),
-                    /* @__PURE__ */ jsx(Button, { variant: "text", endIcon: /* @__PURE__ */ jsx(SvgBlackCross, {}), onClick: onClose })
+                    /* @__PURE__ */ jsx(Button, { variant: "text", endIcon: /* @__PURE__ */ jsx(SvgBlackCross, {}), onClick: () => setIsConfirmOpen(false) })
                   ]
                 }
               ),
@@ -60,5 +79,6 @@ const ConfirmDialog = (props) => {
   );
 };
 export {
-  ConfirmDialog
+  ConfirmDialog,
+  ConfirmDialogInner
 };

package/dist/components/Form/FoodsFormBase/FoodsFormBase.d.ts

@@ -6,21 +6,21 @@ export type FoodsPage = {
     content: ReactNode;
 };
 export type DisplayTextOptions = {
-    title: string;
+    title: ReactNode;
     subtitle?: ReactNode;
-    nextPage: string;
-    previousPage: string;
-    finalPage?: string;
-    syncingMessage?: string;
-    savingDefaultMessage?: string;
-    errorDefaultMessage?: string;
-    warningText?: string;
+    nextPage: ReactNode;
+    previousPage: ReactNode;
+    finalPage?: ReactNode;
+    syncingMessage?: ReactNode;
+    savingDefaultMessage?: ReactNode;
+    errorDefaultMessage?: ReactNode;
+    warningText?: ReactNode;
 };
 export type ConfirmOptionsType = {
-    titleText: string;
-    infoText?: string;
-    confirmText: string;
-    cancelText: string;
+    titleText: ReactNode;
+    infoText?: ReactNode;
+    confirmText: ReactNode;
+    cancelText: ReactNode;
     onConfirm: () => void;
     onCancel: () => void;
 };

package/dist/components/Form/FoodsFormBase/FoodsFormBase.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { FormBaseContextProvider, useFormBaseContext } from "./FormBaseContext.js";
 import { FormTopBar } from "./FormTopBar/FormTopBar.js";
 import { MainPageLayout } from "./MainPageLayout.js";
@@ -25,18 +25,10 @@ const _FoodsFormBase = (props) => {
   ] });
 };
 const FoodsFormBase = (props) => {
-  const [openConfirm, setOpenConfirm] = useState(false);
   const children = props.children;
-  return /* @__PURE__ */ jsxs(FormBaseContextProvider, { ...props, openConfirmDialog: () => setOpenConfirm(true), children: [
+  return /* @__PURE__ */ jsxs(FormBaseContextProvider, { ...props, children: [
     /* @__PURE__ */ jsx(_FoodsFormBase, { children }),
-    props.confirmExit && /* @__PURE__ */ jsx(
-      ConfirmDialog,
-      {
-        open: openConfirm,
-        onClose: () => setOpenConfirm(false),
-        confirmOptions: props.confirmOptions
-      }
-    )
+    /* @__PURE__ */ jsx(ConfirmDialog, {})
   ] });
 };
 export {

package/dist/components/Form/FoodsFormBase/FormBaseContext.d.ts

@@ -2,6 +2,19 @@ import { ReactNode } from 'react';
 import { FoodsPage, FoodsFormBaseProps } from './FoodsFormBase';
 import { PageLocks } from './usePageLock';
 export type FormBaseVariant = "outlined" | "full-width";
+export type ConfirmOptionsType = {
+    titleText: ReactNode;
+    infoText?: ReactNode;
+    confirmText: ReactNode;
+    cancelText: ReactNode;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+export type ConfirmOptionsProps = {
+    confirmExit: false;
+} | ({
+    confirmExit: true;
+} & ConfirmOptionsType);
 type FormBasePropsBlackList = Omit<FoodsFormBaseProps, "startingPage" | "variant">;
 type ExtraFormOptions = {
     isSaving: boolean;
@@ -12,14 +25,18 @@ type ExtraFormOptions = {
     maxPage: number;
     formSaved: boolean;
     setFormSaved: (isSaved: boolean) => void;
-    openConfirmDialog: () => void;
+    isConfirmOpen: boolean;
+    setIsConfirmOpen: (v: boolean) => void;
+    confirmOptions?: ConfirmOptionsType;
     isError: boolean;
     setError: (isError: boolean) => void;
 };
-type FormBaseContextInitialValues = PageLocks & FormBasePropsBlackList & ExtraFormOptions;
+type FormBaseContextInitialValues = PageLocks & FormBasePropsBlackList & ExtraFormOptions & {
+    confirmOptions: ConfirmOptionsType;
+};
 type FormBaseContextProviderProps = FoodsFormBaseProps & {
     children: ReactNode;
-    openConfirmDialog: () => void;
+    openConfirmDialog?: () => void;
 };
 export declare const FormBaseContextProvider: (props: FormBaseContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useFormBaseContext: () => FormBaseContextInitialValues;

package/dist/components/Form/FoodsFormBase/FormBaseContext.js

@@ -4,6 +4,11 @@ import { usePageLock } from "./usePageLock.js";
 const FormBaseContext = createContext(null);
 const FormBaseContextProvider = (props) => {
   const { children, pages = [], startingPage = 0, ...FormBaseProps } = props;
+  const [isConfirmOpen, _setIsConfirmOpen] = useState(false);
+  const setIsConfirmOpen = (v) => {
+    console.log("TRYING: ", { v });
+    _setIsConfirmOpen(v);
+  };
   const [isSaving, setSaving] = useState(false);
   const [isError, setError] = useState(false);
   const [selectedPageIndex, setPage] = useState(startingPage);
@@ -11,6 +16,16 @@ const FormBaseContextProvider = (props) => {
   const selectedPage = pages[selectedPageIndex] ?? null;
   const pageLock = usePageLock();
   const [formSaved, setFormSaved] = useState(false);
+  const confirmOptions = FormBaseProps.confirmExit ? FormBaseProps.confirmOptions : {
+    titleText: "",
+    infoText: "",
+    confirmText: "",
+    cancelText: "",
+    onConfirm: () => {
+    },
+    onCancel: () => {
+    }
+  };
   const items = {
     ...FormBaseProps,
     ...pageLock,
@@ -24,6 +39,9 @@ const FormBaseContextProvider = (props) => {
     setFormSaved,
     isError,
     setError,
+    isConfirmOpen,
+    setIsConfirmOpen,
+    confirmOptions,
     // variant,
     pages
   };

package/dist/components/Form/FoodsFormBase/FormTopBar/ActionButtons.js

@@ -19,7 +19,7 @@ const ActionButtons = () => {
     onPageChange,
     showSync,
     setFormSaved,
-    openConfirmDialog,
+    setIsConfirmOpen,
     isLoading,
     selectedPageIndex
   } = useFormBaseContext();
@@ -61,7 +61,7 @@ const ActionButtons = () => {
       Button,
       {
         variant: "white-filled",
-        onClick: confirmExit ? openConfirmDialog : onClose,
+        onClick: () => confirmExit ? setIsConfirmOpen(true) : onClose(),
         sx: {
           minWidth: 0,
           aspectRatio: 1,
@@ -116,7 +116,7 @@ const ActionButtons = () => {
       Button,
       {
         variant: "white-filled",
-        onClick: confirmExit ? openConfirmDialog : onClose,
+        onClick: () => confirmExit ? setIsConfirmOpen(true) : onClose(),
         sx: {
           minWidth: 0,
           aspectRatio: 1,

package/dist/components/Form/FoodsFormBase/index.d.ts

@@ -1,3 +1,5 @@
 export { FoodsFormBase } from './FoodsFormBase';
+export { ConfirmDialog } from './ConfirmDialog';
+export * from './FormTopBar';
 export type * from './FoodsFormBase';
 export { useFormBaseContext, FormBaseContextProvider } from './FormBaseContext';

package/dist/components/Form/index.d.ts

@@ -1,7 +1,6 @@
 export * from './FormBase';
 export * from './FormBox';
 export * from './FormPropertyBox';
-export * from './FormTopBar';
 export * from './FormUnit';
 export * from './FoodsFormBase';
 export * from './FoodsFormFields';

package/dist/main.js

@@ -65,10 +65,11 @@ import { MultiValueFilter } from "./components/Filter/MultiValueFilter.js";
 import { FormBase } from "./components/Form/FormBase.js";
 import { FormBox } from "./components/Form/FormBox.js";
 import { FormPropertyBox } from "./components/Form/FormPropertyBox.js";
-import { FormTopBar } from "./components/Form/FormTopBar.js";
 import { FormUnit } from "./components/Form/FormUnit.js";
 import { FoodsFormBase } from "./components/Form/FoodsFormBase/FoodsFormBase.js";
+import { ConfirmDialog } from "./components/Form/FoodsFormBase/ConfirmDialog.js";
 import { FormBaseContextProvider, useFormBaseContext } from "./components/Form/FoodsFormBase/FormBaseContext.js";
+import { FormTopBar } from "./components/Form/FoodsFormBase/FormTopBar/FormTopBar.js";
 import { FoodsTextInput } from "./components/Form/FoodsFormFields/FoodsTextInput.js";
 import { MRTGrid } from "./components/Grid/MRTGrid.js";
 import { EcoScoreCell } from "./components/Grid/Cell/EcoScoreCell.js";
@@ -178,6 +179,7 @@ export {
   ComparisonArrow,
   ComparisonBlock,
   ComparisonLabel,
+  ConfirmDialog,
   ContextualContentBox,
   CoordinatePopover,
   CustomRender,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.11.37",
+  "version": "2.11.38",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",