@vuu-ui/vuu-popups 0.8.61 → 0.8.63

package/cjs/dialog/useDialog.js

@@ -20,7 +20,14 @@ const useDialog = () => {
   const dialog = dialogState ? /* @__PURE__ */ jsxRuntime.jsxs(core.Dialog, { open: true, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(core.DialogHeader, { header: dialogState.title }),
     /* @__PURE__ */ jsxRuntime.jsx(core.DialogContent, { children: dialogState.content }),
-    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsxRuntime.jsx(core.DialogCloseButton, { onClick: closeDialog }) : null,
+    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsxRuntime.jsx(
+      core.DialogCloseButton,
+      {
+        "data-embedded": true,
+        "data-icon": "close",
+        onClick: closeDialog
+      }
+    ) : null,
     dialogState.actions ? /* @__PURE__ */ jsxRuntime.jsx(core.DialogActions, { children: dialogState.actions }) : null
   ] }) : null;
   return {
@@ -34,30 +41,49 @@ const defaultShowDialog = () => {
 const defaultCloseDialog = () => {
   console.warn("No DialogProvider in place");
 };
-const DialogContext = React.createContext({
-  showDialog: defaultShowDialog,
-  closeDialog: defaultCloseDialog
-});
-const DialogProvider = ({ children }) => {
+class DialogContextObject {
+  constructor() {
+    this.showDialog = defaultShowDialog;
+    this.closeDialog = defaultCloseDialog;
+  }
+  setDialogDispatchers(showDialog, closeDialog) {
+    this.showDialog = showDialog;
+    this.closeDialog = closeDialog;
+  }
+}
+const DialogContext = React.createContext(
+  new DialogContextObject()
+);
+const DialogHost = ({ context }) => {
   const { dialog, setDialogState } = useDialog();
-  const showDialog = (dialogContent, title, actionButtons) => {
-    setDialogState({
-      actions: actionButtons,
-      content: dialogContent,
-      title
-    });
-  };
-  const closeDialog = () => {
+  const showDialog = React.useCallback(
+    (dialogContent, title, actionButtons) => {
+      console.log("show dialog");
+      setDialogState({
+        actions: actionButtons,
+        content: dialogContent,
+        title
+      });
+    },
+    [setDialogState]
+  );
+  const closeDialog = React.useCallback(() => {
     setDialogState(void 0);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContext.Provider, { value: { showDialog, closeDialog }, children: [
-    children,
-    dialog
+  }, [setDialogState]);
+  React.useMemo(() => {
+    context.setDialogDispatchers(showDialog, closeDialog);
+  }, [closeDialog, context, showDialog]);
+  return dialog;
+};
+const DialogProvider = ({ children }) => {
+  const context = React.useContext(DialogContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DialogHost, { context }),
+    children
   ] });
 };
 const useDialogContext = () => {
-  const { showDialog } = React.useContext(DialogContext);
-  const { closeDialog } = React.useContext(DialogContext);
+  const { closeDialog, showDialog } = React.useContext(DialogContext);
   return { showDialog, closeDialog };
 };
 

package/cjs/dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogActions,\n  DialogCloseButton,\n  DialogContent,\n  DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nexport type DialogState = {\n  actions?: ReactElement[];\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport type ShowDialog = (\n  dialogContent: ReactElement,\n  title: string,\n  dialogActionButtons?: ReactElement[]\n) => void;\n\nexport interface DialogContextProps {\n  showDialog: ShowDialog;\n  closeDialog: () => void;\n}\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const handleOpenChange = useCallback(\n    (open?: boolean) => {\n      if (open !== true) {\n        closeDialog();\n      }\n    },\n    [closeDialog]\n  );\n\n  const dialog = dialogState ? (\n    <Dialog open={true} onOpenChange={handleOpenChange}>\n      <DialogHeader header={dialogState.title} />\n      <DialogContent>{dialogState.content}</DialogContent>\n      {dialogState.hideCloseButton !== true ? (\n        <DialogCloseButton onClick={closeDialog} />\n      ) : null}\n      {dialogState.actions ? (\n        <DialogActions>{dialogState.actions}</DialogActions>\n      ) : null}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nconst DialogContext = createContext<DialogContextProps>({\n  showDialog: defaultShowDialog,\n  closeDialog: defaultCloseDialog,\n});\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog: ShowDialog = (dialogContent, title, actionButtons) => {\n    setDialogState({\n      actions: actionButtons,\n      content: dialogContent,\n      title,\n    });\n  };\n  const closeDialog = () => {\n    setDialogState(undefined);\n  };\n  return (\n    <DialogContext.Provider value={{ showDialog, closeDialog }}>\n      {children}\n      {dialog}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useDialogContext = () => {\n  const { showDialog } = useContext(DialogContext);\n  const { closeDialog } = useContext(DialogContext);\n  return { showDialog, closeDialog };\n};\n"],"names":["useState","useCallback","jsxs","Dialog","jsx","DialogHeader","DialogContent","DialogCloseButton","DialogActions","createContext","useContext"],"mappings":";;;;;;AAoCO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,cAAsB,EAAA,CAAA;AAE5D,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,IAAmB,KAAA;AAClB,MAAA,IAAI,SAAS,IAAM,EAAA;AACjB,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,SAAS,WACb,mBAAAC,eAAA,CAACC,eAAO,IAAM,EAAA,IAAA,EAAM,cAAc,gBAChC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,iBAAA,EAAA,EAAa,MAAQ,EAAA,WAAA,CAAY,KAAO,EAAA,CAAA;AAAA,oBACzCD,cAAA,CAACE,kBAAe,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,OAAQ,EAAA,CAAA;AAAA,IACnC,YAAY,eAAoB,KAAA,IAAA,kCAC9BC,sBAAkB,EAAA,EAAA,OAAA,EAAS,aAAa,CACvC,GAAA,IAAA;AAAA,IACH,YAAY,OACX,mBAAAH,cAAA,CAACI,kBAAe,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,SAAQ,CAClC,GAAA,IAAA;AAAA,GAAA,EACN,CACE,GAAA,IAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF,EAAA;AAEA,MAAM,oBAAoB,MAAM;AAC9B,EAAA,OAAA,CAAQ,KAAK,4BAA4B,CAAA,CAAA;AAC3C,CAAA,CAAA;AACA,MAAM,qBAAqB,MAAM;AAC/B,EAAA,OAAA,CAAQ,KAAK,4BAA4B,CAAA,CAAA;AAC3C,CAAA,CAAA;AAEA,MAAM,gBAAgBC,mBAAkC,CAAA;AAAA,EACtD,UAAY,EAAA,iBAAA;AAAA,EACZ,WAAa,EAAA,kBAAA;AACf,CAAC,CAAA,CAAA;AAEM,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACvE,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAe,EAAA,GAAI,SAAU,EAAA,CAAA;AAC7C,EAAA,MAAM,UAAyB,GAAA,CAAC,aAAe,EAAA,KAAA,EAAO,aAAkB,KAAA;AACtE,IAAe,cAAA,CAAA;AAAA,MACb,OAAS,EAAA,aAAA;AAAA,MACT,OAAS,EAAA,aAAA;AAAA,MACT,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AACA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,CAAA;AACA,EACE,uBAAAP,eAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,UAAA,EAAY,aAC1C,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,MAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAAQ,gBAAA,CAAW,aAAa,CAAA,CAAA;AAC/C,EAAA,MAAM,EAAE,WAAA,EAAgB,GAAAA,gBAAA,CAAW,aAAa,CAAA,CAAA;AAChD,EAAO,OAAA,EAAE,YAAY,WAAY,EAAA,CAAA;AACnC;;;;;;"}
+{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogActions,\n  DialogCloseButton,\n  DialogContent,\n  DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nexport type DialogState = {\n  actions?: ReactElement[];\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport type ShowDialog = (\n  dialogContent: ReactElement,\n  title: string,\n  dialogActionButtons?: ReactElement[]\n) => void;\n\nexport interface DialogContextProps {\n  showDialog: ShowDialog;\n  closeDialog: () => void;\n  setDialogDispatchers: (\n    showDialog: ShowDialog,\n    closeDialog: () => void\n  ) => void;\n}\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const handleOpenChange = useCallback(\n    (open?: boolean) => {\n      if (open !== true) {\n        closeDialog();\n      }\n    },\n    [closeDialog]\n  );\n\n  const dialog = dialogState ? (\n    <Dialog open={true} onOpenChange={handleOpenChange}>\n      <DialogHeader header={dialogState.title} />\n      <DialogContent>{dialogState.content}</DialogContent>\n      {dialogState.hideCloseButton !== true ? (\n        <DialogCloseButton\n          data-embedded\n          data-icon=\"close\"\n          onClick={closeDialog}\n        />\n      ) : null}\n      {dialogState.actions ? (\n        <DialogActions>{dialogState.actions}</DialogActions>\n      ) : null}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog: ShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nclass DialogContextObject implements DialogContextProps {\n  showDialog = defaultShowDialog;\n  closeDialog = defaultCloseDialog;\n  setDialogDispatchers(showDialog: ShowDialog, closeDialog: () => void) {\n    this.showDialog = showDialog;\n    this.closeDialog = closeDialog;\n  }\n}\n\nconst DialogContext = createContext<DialogContextProps>(\n  new DialogContextObject()\n);\n\nconst DialogHost = ({ context }: { context: DialogContextProps }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog: ShowDialog = useCallback(\n    (dialogContent, title, actionButtons) => {\n      console.log(\"show dialog\");\n      setDialogState({\n        actions: actionButtons,\n        content: dialogContent,\n        title,\n      });\n    },\n    [setDialogState]\n  );\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  useMemo(() => {\n    context.setDialogDispatchers(showDialog, closeDialog);\n  }, [closeDialog, context, showDialog]);\n  return dialog;\n};\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const context = useContext(DialogContext);\n  return (\n    <DialogContext.Provider value={context}>\n      <DialogHost context={context} />\n      {children}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useDialogContext = () => {\n  const { closeDialog, showDialog } = useContext(DialogContext);\n  return { showDialog, closeDialog };\n};\n"],"names":["useState","useCallback","jsxs","Dialog","jsx","DialogHeader","DialogContent","DialogCloseButton","DialogActions","createContext","useMemo","useContext"],"mappings":"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"}

package/esm/dialog/useDialog.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Dialog, DialogHeader, DialogContent, DialogCloseButton, DialogActions } from '@salt-ds/core';
-import { createContext, useState, useCallback, useContext } from 'react';
+import { createContext, useState, useCallback, useContext, useMemo } from 'react';
 
 const useDialog = () => {
   const [dialogState, setDialogState] = useState();
@@ -18,7 +18,14 @@ const useDialog = () => {
   const dialog = dialogState ? /* @__PURE__ */ jsxs(Dialog, { open: true, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(DialogHeader, { header: dialogState.title }),
     /* @__PURE__ */ jsx(DialogContent, { children: dialogState.content }),
-    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsx(DialogCloseButton, { onClick: closeDialog }) : null,
+    dialogState.hideCloseButton !== true ? /* @__PURE__ */ jsx(
+      DialogCloseButton,
+      {
+        "data-embedded": true,
+        "data-icon": "close",
+        onClick: closeDialog
+      }
+    ) : null,
     dialogState.actions ? /* @__PURE__ */ jsx(DialogActions, { children: dialogState.actions }) : null
   ] }) : null;
   return {
@@ -32,30 +39,49 @@ const defaultShowDialog = () => {
 const defaultCloseDialog = () => {
   console.warn("No DialogProvider in place");
 };
-const DialogContext = createContext({
-  showDialog: defaultShowDialog,
-  closeDialog: defaultCloseDialog
-});
-const DialogProvider = ({ children }) => {
+class DialogContextObject {
+  constructor() {
+    this.showDialog = defaultShowDialog;
+    this.closeDialog = defaultCloseDialog;
+  }
+  setDialogDispatchers(showDialog, closeDialog) {
+    this.showDialog = showDialog;
+    this.closeDialog = closeDialog;
+  }
+}
+const DialogContext = createContext(
+  new DialogContextObject()
+);
+const DialogHost = ({ context }) => {
   const { dialog, setDialogState } = useDialog();
-  const showDialog = (dialogContent, title, actionButtons) => {
-    setDialogState({
-      actions: actionButtons,
-      content: dialogContent,
-      title
-    });
-  };
-  const closeDialog = () => {
+  const showDialog = useCallback(
+    (dialogContent, title, actionButtons) => {
+      console.log("show dialog");
+      setDialogState({
+        actions: actionButtons,
+        content: dialogContent,
+        title
+      });
+    },
+    [setDialogState]
+  );
+  const closeDialog = useCallback(() => {
     setDialogState(void 0);
-  };
-  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value: { showDialog, closeDialog }, children: [
-    children,
-    dialog
+  }, [setDialogState]);
+  useMemo(() => {
+    context.setDialogDispatchers(showDialog, closeDialog);
+  }, [closeDialog, context, showDialog]);
+  return dialog;
+};
+const DialogProvider = ({ children }) => {
+  const context = useContext(DialogContext);
+  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value: context, children: [
+    /* @__PURE__ */ jsx(DialogHost, { context }),
+    children
   ] });
 };
 const useDialogContext = () => {
-  const { showDialog } = useContext(DialogContext);
-  const { closeDialog } = useContext(DialogContext);
+  const { closeDialog, showDialog } = useContext(DialogContext);
   return { showDialog, closeDialog };
 };
 

package/esm/dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogActions,\n  DialogCloseButton,\n  DialogContent,\n  DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nexport type DialogState = {\n  actions?: ReactElement[];\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport type ShowDialog = (\n  dialogContent: ReactElement,\n  title: string,\n  dialogActionButtons?: ReactElement[]\n) => void;\n\nexport interface DialogContextProps {\n  showDialog: ShowDialog;\n  closeDialog: () => void;\n}\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const handleOpenChange = useCallback(\n    (open?: boolean) => {\n      if (open !== true) {\n        closeDialog();\n      }\n    },\n    [closeDialog]\n  );\n\n  const dialog = dialogState ? (\n    <Dialog open={true} onOpenChange={handleOpenChange}>\n      <DialogHeader header={dialogState.title} />\n      <DialogContent>{dialogState.content}</DialogContent>\n      {dialogState.hideCloseButton !== true ? (\n        <DialogCloseButton onClick={closeDialog} />\n      ) : null}\n      {dialogState.actions ? (\n        <DialogActions>{dialogState.actions}</DialogActions>\n      ) : null}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nconst DialogContext = createContext<DialogContextProps>({\n  showDialog: defaultShowDialog,\n  closeDialog: defaultCloseDialog,\n});\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog: ShowDialog = (dialogContent, title, actionButtons) => {\n    setDialogState({\n      actions: actionButtons,\n      content: dialogContent,\n      title,\n    });\n  };\n  const closeDialog = () => {\n    setDialogState(undefined);\n  };\n  return (\n    <DialogContext.Provider value={{ showDialog, closeDialog }}>\n      {children}\n      {dialog}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useDialogContext = () => {\n  const { showDialog } = useContext(DialogContext);\n  const { closeDialog } = useContext(DialogContext);\n  return { showDialog, closeDialog };\n};\n"],"names":[],"mappings":";;;;AAoCO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,QAAsB,EAAA,CAAA;AAE5D,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAmB,KAAA;AAClB,MAAA,IAAI,SAAS,IAAM,EAAA;AACjB,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,SAAS,WACb,mBAAA,IAAA,CAAC,UAAO,IAAM,EAAA,IAAA,EAAM,cAAc,gBAChC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,WAAA,CAAY,KAAO,EAAA,CAAA;AAAA,oBACzC,GAAA,CAAC,aAAe,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,OAAQ,EAAA,CAAA;AAAA,IACnC,YAAY,eAAoB,KAAA,IAAA,uBAC9B,iBAAkB,EAAA,EAAA,OAAA,EAAS,aAAa,CACvC,GAAA,IAAA;AAAA,IACH,YAAY,OACX,mBAAA,GAAA,CAAC,aAAe,EAAA,EAAA,QAAA,EAAA,WAAA,CAAY,SAAQ,CAClC,GAAA,IAAA;AAAA,GAAA,EACN,CACE,GAAA,IAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF,EAAA;AAEA,MAAM,oBAAoB,MAAM;AAC9B,EAAA,OAAA,CAAQ,KAAK,4BAA4B,CAAA,CAAA;AAC3C,CAAA,CAAA;AACA,MAAM,qBAAqB,MAAM;AAC/B,EAAA,OAAA,CAAQ,KAAK,4BAA4B,CAAA,CAAA;AAC3C,CAAA,CAAA;AAEA,MAAM,gBAAgB,aAAkC,CAAA;AAAA,EACtD,UAAY,EAAA,iBAAA;AAAA,EACZ,WAAa,EAAA,kBAAA;AACf,CAAC,CAAA,CAAA;AAEM,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACvE,EAAA,MAAM,EAAE,MAAA,EAAQ,cAAe,EAAA,GAAI,SAAU,EAAA,CAAA;AAC7C,EAAA,MAAM,UAAyB,GAAA,CAAC,aAAe,EAAA,KAAA,EAAO,aAAkB,KAAA;AACtE,IAAe,cAAA,CAAA;AAAA,MACb,OAAS,EAAA,aAAA;AAAA,MACT,OAAS,EAAA,aAAA;AAAA,MACT,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AACA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,CAAA;AACA,EACE,uBAAA,IAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,UAAA,EAAY,aAC1C,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,MAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,mBAAmB,MAAM;AACpC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAC/C,EAAA,MAAM,EAAE,WAAA,EAAgB,GAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAChD,EAAO,OAAA,EAAE,YAAY,WAAY,EAAA,CAAA;AACnC;;;;"}
+{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogActions,\n  DialogCloseButton,\n  DialogContent,\n  DialogHeader,\n} from \"@salt-ds/core\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\n\nexport type DialogState = {\n  actions?: ReactElement[];\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport type ShowDialog = (\n  dialogContent: ReactElement,\n  title: string,\n  dialogActionButtons?: ReactElement[]\n) => void;\n\nexport interface DialogContextProps {\n  showDialog: ShowDialog;\n  closeDialog: () => void;\n  setDialogDispatchers: (\n    showDialog: ShowDialog,\n    closeDialog: () => void\n  ) => void;\n}\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const handleOpenChange = useCallback(\n    (open?: boolean) => {\n      if (open !== true) {\n        closeDialog();\n      }\n    },\n    [closeDialog]\n  );\n\n  const dialog = dialogState ? (\n    <Dialog open={true} onOpenChange={handleOpenChange}>\n      <DialogHeader header={dialogState.title} />\n      <DialogContent>{dialogState.content}</DialogContent>\n      {dialogState.hideCloseButton !== true ? (\n        <DialogCloseButton\n          data-embedded\n          data-icon=\"close\"\n          onClick={closeDialog}\n        />\n      ) : null}\n      {dialogState.actions ? (\n        <DialogActions>{dialogState.actions}</DialogActions>\n      ) : null}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog: ShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\nconst defaultCloseDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nclass DialogContextObject implements DialogContextProps {\n  showDialog = defaultShowDialog;\n  closeDialog = defaultCloseDialog;\n  setDialogDispatchers(showDialog: ShowDialog, closeDialog: () => void) {\n    this.showDialog = showDialog;\n    this.closeDialog = closeDialog;\n  }\n}\n\nconst DialogContext = createContext<DialogContextProps>(\n  new DialogContextObject()\n);\n\nconst DialogHost = ({ context }: { context: DialogContextProps }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog: ShowDialog = useCallback(\n    (dialogContent, title, actionButtons) => {\n      console.log(\"show dialog\");\n      setDialogState({\n        actions: actionButtons,\n        content: dialogContent,\n        title,\n      });\n    },\n    [setDialogState]\n  );\n  const closeDialog = useCallback(() => {\n    setDialogState(undefined);\n  }, [setDialogState]);\n\n  useMemo(() => {\n    context.setDialogDispatchers(showDialog, closeDialog);\n  }, [closeDialog, context, showDialog]);\n  return dialog;\n};\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const context = useContext(DialogContext);\n  return (\n    <DialogContext.Provider value={context}>\n      <DialogHost context={context} />\n      {children}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useDialogContext = () => {\n  const { closeDialog, showDialog } = useContext(DialogContext);\n  return { showDialog, closeDialog };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.61",
+  "version": "0.8.63",
   "description": "VUU popup components - Context Menu, Dialog etc",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -7,10 +7,10 @@
     "@salt-ds/core": "1.27.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-types": "0.8.61",
-    "@vuu-ui/vuu-layout": "0.8.61",
-    "@vuu-ui/vuu-utils": "0.8.61",
-    "@vuu-ui/vuu-ui-controls": "0.8.61"
+    "@vuu-ui/vuu-data-types": "0.8.63",
+    "@vuu-ui/vuu-layout": "0.8.63",
+    "@vuu-ui/vuu-utils": "0.8.63",
+    "@vuu-ui/vuu-ui-controls": "0.8.63"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/dialog/useDialog.d.ts

@@ -10,6 +10,7 @@ export type ShowDialog = (dialogContent: ReactElement, title: string, dialogActi
 export interface DialogContextProps {
     showDialog: ShowDialog;
     closeDialog: () => void;
+    setDialogDispatchers: (showDialog: ShowDialog, closeDialog: () => void) => void;
 }
 export declare const useDialog: () => {
     dialog: JSX.Element | null;