@vuu-ui/vuu-popups 0.8.60 → 0.8.61

package/cjs/dialog/useDialog.js

@@ -17,10 +17,11 @@ const useDialog = () => {
     },
     [closeDialog]
   );
-  const dialog = dialogState ? /* @__PURE__ */ jsxRuntime.jsxs(core.Dialog, { className: "vuuDialog", open: true, onOpenChange: handleOpenChange, children: [
+  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, { onClick: closeDialog }) : null,
+    dialogState.actions ? /* @__PURE__ */ jsxRuntime.jsx(core.DialogActions, { children: dialogState.actions }) : null
   ] }) : null;
   return {
     dialog,
@@ -30,28 +31,37 @@ const useDialog = () => {
 const defaultShowDialog = () => {
   console.warn("No DialogProvider in place");
 };
+const defaultCloseDialog = () => {
+  console.warn("No DialogProvider in place");
+};
 const DialogContext = React.createContext({
-  showDialog: defaultShowDialog
+  showDialog: defaultShowDialog,
+  closeDialog: defaultCloseDialog
 });
 const DialogProvider = ({ children }) => {
   const { dialog, setDialogState } = useDialog();
-  const showDialog = (dialogContent, title) => {
+  const showDialog = (dialogContent, title, actionButtons) => {
     setDialogState({
+      actions: actionButtons,
       content: dialogContent,
       title
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContext.Provider, { value: { showDialog }, children: [
+  const closeDialog = () => {
+    setDialogState(void 0);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(DialogContext.Provider, { value: { showDialog, closeDialog }, children: [
     children,
     dialog
   ] });
 };
-const useShowDialog = () => {
+const useDialogContext = () => {
   const { showDialog } = React.useContext(DialogContext);
-  return showDialog;
+  const { closeDialog } = React.useContext(DialogContext);
+  return { showDialog, closeDialog };
 };
 
 exports.DialogProvider = DialogProvider;
 exports.useDialog = useDialog;
-exports.useShowDialog = useShowDialog;
+exports.useDialogContext = useDialogContext;
 //# sourceMappingURL=useDialog.js.map

package/cjs/dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\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  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport interface DialogContextProps {\n  showDialog: (dialogContent: ReactElement, title: string) => 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 className=\"vuuDialog\" 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    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nconst DialogContext = createContext<DialogContextProps>({\n  showDialog: defaultShowDialog,\n});\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog = (dialogContent: ReactElement, title: string) => {\n    setDialogState({\n      content: dialogContent,\n      title,\n    });\n  };\n  return (\n    <DialogContext.Provider value={{ showDialog }}>\n      {children}\n      {dialog}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useShowDialog = () => {\n  const { showDialog } = useContext(DialogContext);\n  return showDialog;\n};\n"],"names":["useState","useCallback","jsxs","Dialog","jsx","DialogHeader","DialogContent","DialogCloseButton","createContext","useContext"],"mappings":";;;;;;AA2BO,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,EAAM,MAAA,MAAA,GAAS,8BACZC,eAAA,CAAAC,WAAA,EAAA,EAAO,WAAU,WAAY,EAAA,IAAA,EAAM,IAAM,EAAA,YAAA,EAAc,gBACtD,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,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;AAEA,MAAM,gBAAgBC,mBAAkC,CAAA;AAAA,EACtD,UAAY,EAAA,iBAAA;AACd,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,EAAM,MAAA,UAAA,GAAa,CAAC,aAAA,EAA6B,KAAkB,KAAA;AACjE,IAAe,cAAA,CAAA;AAAA,MACb,OAAS,EAAA,aAAA;AAAA,MACT,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AACA,EAAA,uCACG,aAAc,CAAA,QAAA,EAAd,EAAuB,KAAO,EAAA,EAAE,YAC9B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,MAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAAC,gBAAA,CAAW,aAAa,CAAA,CAAA;AAC/C,EAAO,OAAA,UAAA,CAAA;AACT;;;;;;"}
+{"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;;;;;;"}

package/cjs/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var Dialog = require('./dialog/Dialog.js');
 var useDialog = require('./dialog/useDialog.js');
 var DialogHeader = require('./dialog-header/DialogHeader.js');
 var ContextMenu = require('./menu/ContextMenu.js');
@@ -21,10 +20,9 @@ var ToastNotification = require('./notifications/ToastNotification.js');
 
 
 
-exports.Dialog = Dialog.Dialog;
 exports.DialogProvider = useDialog.DialogProvider;
 exports.useDialog = useDialog.useDialog;
-exports.useShowDialog = useDialog.useShowDialog;
+exports.useDialogContext = useDialog.useDialogContext;
 exports.DialogHeader = DialogHeader.DialogHeader;
 exports.ContextMenu = ContextMenu.ContextMenu;
 exports.MenuItem = MenuList.MenuItem;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/dialog/useDialog.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Dialog, DialogHeader, DialogContent, DialogCloseButton } from '@salt-ds/core';
+import { Dialog, DialogHeader, DialogContent, DialogCloseButton, DialogActions } from '@salt-ds/core';
 import { createContext, useState, useCallback, useContext } from 'react';
 
 const useDialog = () => {
@@ -15,10 +15,11 @@ const useDialog = () => {
     },
     [closeDialog]
   );
-  const dialog = dialogState ? /* @__PURE__ */ jsxs(Dialog, { className: "vuuDialog", open: true, onOpenChange: handleOpenChange, children: [
+  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, { onClick: closeDialog }) : null,
+    dialogState.actions ? /* @__PURE__ */ jsx(DialogActions, { children: dialogState.actions }) : null
   ] }) : null;
   return {
     dialog,
@@ -28,26 +29,35 @@ const useDialog = () => {
 const defaultShowDialog = () => {
   console.warn("No DialogProvider in place");
 };
+const defaultCloseDialog = () => {
+  console.warn("No DialogProvider in place");
+};
 const DialogContext = createContext({
-  showDialog: defaultShowDialog
+  showDialog: defaultShowDialog,
+  closeDialog: defaultCloseDialog
 });
 const DialogProvider = ({ children }) => {
   const { dialog, setDialogState } = useDialog();
-  const showDialog = (dialogContent, title) => {
+  const showDialog = (dialogContent, title, actionButtons) => {
     setDialogState({
+      actions: actionButtons,
       content: dialogContent,
       title
     });
   };
-  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value: { showDialog }, children: [
+  const closeDialog = () => {
+    setDialogState(void 0);
+  };
+  return /* @__PURE__ */ jsxs(DialogContext.Provider, { value: { showDialog, closeDialog }, children: [
     children,
     dialog
   ] });
 };
-const useShowDialog = () => {
+const useDialogContext = () => {
   const { showDialog } = useContext(DialogContext);
-  return showDialog;
+  const { closeDialog } = useContext(DialogContext);
+  return { showDialog, closeDialog };
 };
 
-export { DialogProvider, useDialog, useShowDialog };
+export { DialogProvider, useDialog, useDialogContext };
 //# sourceMappingURL=useDialog.js.map

package/esm/dialog/useDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import {\n  Dialog,\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  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport interface DialogContextProps {\n  showDialog: (dialogContent: ReactElement, title: string) => 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 className=\"vuuDialog\" 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    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n\nconst defaultShowDialog = () => {\n  console.warn(\"No DialogProvider in place\");\n};\n\nconst DialogContext = createContext<DialogContextProps>({\n  showDialog: defaultShowDialog,\n});\n\nexport const DialogProvider = ({ children }: { children: ReactNode }) => {\n  const { dialog, setDialogState } = useDialog();\n  const showDialog = (dialogContent: ReactElement, title: string) => {\n    setDialogState({\n      content: dialogContent,\n      title,\n    });\n  };\n  return (\n    <DialogContext.Provider value={{ showDialog }}>\n      {children}\n      {dialog}\n    </DialogContext.Provider>\n  );\n};\n\nexport const useShowDialog = () => {\n  const { showDialog } = useContext(DialogContext);\n  return showDialog;\n};\n"],"names":[],"mappings":";;;;AA2BO,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,EAAM,MAAA,MAAA,GAAS,8BACZ,IAAA,CAAA,MAAA,EAAA,EAAO,WAAU,WAAY,EAAA,IAAA,EAAM,IAAM,EAAA,YAAA,EAAc,gBACtD,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,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;AAEA,MAAM,gBAAgB,aAAkC,CAAA;AAAA,EACtD,UAAY,EAAA,iBAAA;AACd,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,EAAM,MAAA,UAAA,GAAa,CAAC,aAAA,EAA6B,KAAkB,KAAA;AACjE,IAAe,cAAA,CAAA;AAAA,MACb,OAAS,EAAA,aAAA;AAAA,MACT,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AACA,EAAA,4BACG,aAAc,CAAA,QAAA,EAAd,EAAuB,KAAO,EAAA,EAAE,YAC9B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,MAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,UAAA,CAAW,aAAa,CAAA,CAAA;AAC/C,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}
+{"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;;;;"}

package/esm/index.js

@@ -1,5 +1,4 @@
-export { Dialog } from './dialog/Dialog.js';
-export { DialogProvider, useDialog, useShowDialog } from './dialog/useDialog.js';
+export { DialogProvider, useDialog, useDialogContext } from './dialog/useDialog.js';
 export { DialogHeader } from './dialog-header/DialogHeader.js';
 export { ContextMenu } from './menu/ContextMenu.js';
 export { MenuItem, MenuItemGroup, MenuList, Separator, isMenuItemGroup, isMenuItemLabel } from './menu/MenuList.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.8.60",
+  "version": "0.8.61",
   "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.60",
-    "@vuu-ui/vuu-layout": "0.8.60",
-    "@vuu-ui/vuu-utils": "0.8.60",
-    "@vuu-ui/vuu-ui-controls": "0.8.60"
+    "@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"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/dialog/index.d.ts

@@ -1,2 +1 @@
-export * from "./Dialog";
 export * from "./useDialog";

package/types/dialog/useDialog.d.ts

@@ -1,12 +1,15 @@
 import { ReactElement, ReactNode } from "react";
 export type DialogState = {
+    actions?: ReactElement[];
     content: ReactElement;
     title: string;
     hideCloseButton?: boolean;
 };
 export type SetDialog = (dialogState?: DialogState) => void;
+export type ShowDialog = (dialogContent: ReactElement, title: string, dialogActionButtons?: ReactElement[]) => void;
 export interface DialogContextProps {
-    showDialog: (dialogContent: ReactElement, title: string) => void;
+    showDialog: ShowDialog;
+    closeDialog: () => void;
 }
 export declare const useDialog: () => {
     dialog: JSX.Element | null;
@@ -15,4 +18,7 @@ export declare const useDialog: () => {
 export declare const DialogProvider: ({ children }: {
     children: ReactNode;
 }) => JSX.Element;
-export declare const useShowDialog: () => (dialogContent: ReactElement, title: string) => void;
+export declare const useDialogContext: () => {
+    showDialog: ShowDialog;
+    closeDialog: () => void;
+};

package/cjs/dialog/Dialog.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var dialogCss = ".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  display: var(--vuuDialog-display, flex);\n  flex-direction: column;;\n  padding: var(--vuuDialog-padding, 16px);\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  overflow: visible;\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-body {\n  flex: 1 1 auto;\n}\n\n";
-
-module.exports = dialogCss;
-//# sourceMappingURL=Dialog.css.js.map

package/cjs/dialog/Dialog.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dialog/Dialog.js

@@ -1,96 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cx = require('clsx');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var React = require('react');
-var DialogHeader = require('../dialog-header/DialogHeader.js');
-require('react-dom');
-var useAnchoredPosition = require('../popup/useAnchoredPosition.js');
-var Dialog$1 = require('./Dialog.css.js');
-
-const classBase = "vuuDialog";
-const AnchorBody = { current: document.body };
-const EMPTY_PROPS = {};
-const Dialog = ({
-  PopupProps = EMPTY_PROPS,
-  children,
-  className,
-  isOpen = false,
-  onClose,
-  style,
-  title,
-  hideCloseButton = false,
-  ...htmlAttributes
-}) => {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-dialog",
-    css: Dialog$1,
-    window: targetWindow
-  });
-  const {
-    anchorElement = AnchorBody,
-    offsetLeft = 0,
-    offsetTop = 0,
-    placement = "auto"
-  } = PopupProps;
-  const rootRef = React.useRef(null);
-  const portalRef = React.useRef(null);
-  const [themeClass, _, dataMode] = vuuUtils.useThemeAttributes();
-  const { position } = useAnchoredPosition.useAnchoredPosition({
-    anchorElement,
-    offsetLeft,
-    offsetTop,
-    placement
-  });
-  const close = React.useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-  React.useLayoutEffect(() => {
-    if (rootRef.current) {
-      if (isOpen) {
-        rootRef.current.show();
-        const { left, top } = rootRef.current.getBoundingClientRect();
-        if (portalRef.current) {
-          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;
-        }
-      } else {
-        rootRef.current.close();
-      }
-      if (placement.endsWith("center")) {
-        const { width } = rootRef.current.getBoundingClientRect();
-        rootRef.current.style.marginLeft = `-${width / 2}px`;
-      }
-    }
-  }, [isOpen, placement]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "dialog",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, themeClass),
-      "data-mode": dataMode,
-      onClose: close,
-      id: "vuu-dialog",
-      ref: rootRef,
-      style: { ...style, ...position },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DialogHeader.DialogHeader,
-          {
-            hideCloseButton,
-            onClose: close,
-            title
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-body`, children }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { id: "vuu-dialog-portal-root", ref: portalRef })
-      ]
-    }
-  );
-};
-
-exports.Dialog = Dialog;
-//# sourceMappingURL=Dialog.js.map

package/cjs/dialog/Dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.js","sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, useCallback, useLayoutEffect, useRef } from \"react\";\nimport { DialogHeader } from \"../dialog-header\";\nimport { PopupComponentProps, useAnchoredPosition } from \"../popup\";\n\nimport dialogCss from \"./Dialog.css\";\n\nconst classBase = \"vuuDialog\";\n\nconst AnchorBody = { current: document.body };\nconst EMPTY_PROPS = {};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDialogElement> {\n  PopupProps?: Partial<PopupComponentProps>;\n  isOpen?: boolean;\n  onClose?: () => void;\n  hideCloseButton?: boolean;\n}\n\nexport const Dialog = ({\n  PopupProps = EMPTY_PROPS,\n  children,\n  className,\n  isOpen = false,\n  onClose,\n  style,\n  title,\n  hideCloseButton = false,\n  ...htmlAttributes\n}: DialogProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const {\n    anchorElement = AnchorBody,\n    offsetLeft = 0,\n    offsetTop = 0,\n    placement = \"auto\",\n  } = PopupProps;\n\n  const rootRef = useRef<HTMLDialogElement>(null);\n  const portalRef = useRef<HTMLDivElement>(null);\n  const [themeClass, _, dataMode] = useThemeAttributes();\n  const { position } = useAnchoredPosition({\n    anchorElement,\n    offsetLeft,\n    offsetTop,\n    placement,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  // if (!isOpen) {\n  //   return null;\n  // }\n\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      if (isOpen) {\n        // rootRef.current.showModal();\n        rootRef.current.show();\n\n        const { left, top } = rootRef.current.getBoundingClientRect();\n        if (portalRef.current) {\n          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;\n        }\n      } else {\n        rootRef.current.close();\n      }\n      if (placement.endsWith(\"center\")) {\n        const { width } = rootRef.current.getBoundingClientRect();\n        rootRef.current.style.marginLeft = `-${width / 2}px`;\n      }\n    }\n  }, [isOpen, placement]);\n\n  return (\n    <dialog\n      {...htmlAttributes}\n      className={cx(classBase, themeClass)}\n      data-mode={dataMode}\n      onClose={close}\n      id=\"vuu-dialog\"\n      ref={rootRef}\n      style={{ ...style, ...position }}\n    >\n      <DialogHeader\n        hideCloseButton={hideCloseButton}\n        onClose={close}\n        title={title}\n      />\n      <div className={`${classBase}-body`}>{children}</div>\n      <div id=\"vuu-dialog-portal-root\" ref={portalRef} />\n    </dialog>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","dialogCss","useRef","useThemeAttributes","useAnchoredPosition","useCallback","useLayoutEffect","jsxs","jsx","DialogHeader"],"mappings":"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"}

package/esm/dialog/Dialog.css.js

@@ -1,4 +0,0 @@
-var dialogCss = ".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  display: var(--vuuDialog-display, flex);\n  flex-direction: column;;\n  padding: var(--vuuDialog-padding, 16px);\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  overflow: visible;\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-body {\n  flex: 1 1 auto;\n}\n\n";
-
-export { dialogCss as default };
-//# sourceMappingURL=Dialog.css.js.map

package/esm/dialog/Dialog.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/dialog/Dialog.js

@@ -1,94 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'clsx';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import { useThemeAttributes } from '@vuu-ui/vuu-utils';
-import { useRef, useCallback, useLayoutEffect } from 'react';
-import { DialogHeader } from '../dialog-header/DialogHeader.js';
-import 'react-dom';
-import { useAnchoredPosition } from '../popup/useAnchoredPosition.js';
-import dialogCss from './Dialog.css.js';
-
-const classBase = "vuuDialog";
-const AnchorBody = { current: document.body };
-const EMPTY_PROPS = {};
-const Dialog = ({
-  PopupProps = EMPTY_PROPS,
-  children,
-  className,
-  isOpen = false,
-  onClose,
-  style,
-  title,
-  hideCloseButton = false,
-  ...htmlAttributes
-}) => {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-dialog",
-    css: dialogCss,
-    window: targetWindow
-  });
-  const {
-    anchorElement = AnchorBody,
-    offsetLeft = 0,
-    offsetTop = 0,
-    placement = "auto"
-  } = PopupProps;
-  const rootRef = useRef(null);
-  const portalRef = useRef(null);
-  const [themeClass, _, dataMode] = useThemeAttributes();
-  const { position } = useAnchoredPosition({
-    anchorElement,
-    offsetLeft,
-    offsetTop,
-    placement
-  });
-  const close = useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-  useLayoutEffect(() => {
-    if (rootRef.current) {
-      if (isOpen) {
-        rootRef.current.show();
-        const { left, top } = rootRef.current.getBoundingClientRect();
-        if (portalRef.current) {
-          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;
-        }
-      } else {
-        rootRef.current.close();
-      }
-      if (placement.endsWith("center")) {
-        const { width } = rootRef.current.getBoundingClientRect();
-        rootRef.current.style.marginLeft = `-${width / 2}px`;
-      }
-    }
-  }, [isOpen, placement]);
-  return /* @__PURE__ */ jsxs(
-    "dialog",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, themeClass),
-      "data-mode": dataMode,
-      onClose: close,
-      id: "vuu-dialog",
-      ref: rootRef,
-      style: { ...style, ...position },
-      children: [
-        /* @__PURE__ */ jsx(
-          DialogHeader,
-          {
-            hideCloseButton,
-            onClose: close,
-            title
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: `${classBase}-body`, children }),
-        /* @__PURE__ */ jsx("div", { id: "vuu-dialog-portal-root", ref: portalRef })
-      ]
-    }
-  );
-};
-
-export { Dialog };
-//# sourceMappingURL=Dialog.js.map

package/esm/dialog/Dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog.js","sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, useCallback, useLayoutEffect, useRef } from \"react\";\nimport { DialogHeader } from \"../dialog-header\";\nimport { PopupComponentProps, useAnchoredPosition } from \"../popup\";\n\nimport dialogCss from \"./Dialog.css\";\n\nconst classBase = \"vuuDialog\";\n\nconst AnchorBody = { current: document.body };\nconst EMPTY_PROPS = {};\n\nexport interface DialogProps extends HTMLAttributes<HTMLDialogElement> {\n  PopupProps?: Partial<PopupComponentProps>;\n  isOpen?: boolean;\n  onClose?: () => void;\n  hideCloseButton?: boolean;\n}\n\nexport const Dialog = ({\n  PopupProps = EMPTY_PROPS,\n  children,\n  className,\n  isOpen = false,\n  onClose,\n  style,\n  title,\n  hideCloseButton = false,\n  ...htmlAttributes\n}: DialogProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dialog\",\n    css: dialogCss,\n    window: targetWindow,\n  });\n\n  const {\n    anchorElement = AnchorBody,\n    offsetLeft = 0,\n    offsetTop = 0,\n    placement = \"auto\",\n  } = PopupProps;\n\n  const rootRef = useRef<HTMLDialogElement>(null);\n  const portalRef = useRef<HTMLDivElement>(null);\n  const [themeClass, _, dataMode] = useThemeAttributes();\n  const { position } = useAnchoredPosition({\n    anchorElement,\n    offsetLeft,\n    offsetTop,\n    placement,\n  });\n\n  const close = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  // if (!isOpen) {\n  //   return null;\n  // }\n\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      if (isOpen) {\n        // rootRef.current.showModal();\n        rootRef.current.show();\n\n        const { left, top } = rootRef.current.getBoundingClientRect();\n        if (portalRef.current) {\n          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;\n        }\n      } else {\n        rootRef.current.close();\n      }\n      if (placement.endsWith(\"center\")) {\n        const { width } = rootRef.current.getBoundingClientRect();\n        rootRef.current.style.marginLeft = `-${width / 2}px`;\n      }\n    }\n  }, [isOpen, placement]);\n\n  return (\n    <dialog\n      {...htmlAttributes}\n      className={cx(classBase, themeClass)}\n      data-mode={dataMode}\n      onClose={close}\n      id=\"vuu-dialog\"\n      ref={rootRef}\n      style={{ ...style, ...position }}\n    >\n      <DialogHeader\n        hideCloseButton={hideCloseButton}\n        onClose={close}\n        title={title}\n      />\n      <div className={`${classBase}-body`}>{children}</div>\n      <div id=\"vuu-dialog-portal-root\" ref={portalRef} />\n    </dialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,WAAA,CAAA;AAElB,MAAM,UAAa,GAAA,EAAE,OAAS,EAAA,QAAA,CAAS,IAAK,EAAA,CAAA;AAC5C,MAAM,cAAc,EAAC,CAAA;AASd,MAAM,SAAS,CAAC;AAAA,EACrB,UAAa,GAAA,WAAA;AAAA,EACb,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAS,GAAA,KAAA;AAAA,EACT,OAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,eAAkB,GAAA,KAAA;AAAA,EAClB,GAAG,cAAA;AACL,CAAmB,KAAA;AACjB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAA,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,aAAgB,GAAA,UAAA;AAAA,IAChB,UAAa,GAAA,CAAA;AAAA,IACb,SAAY,GAAA,CAAA;AAAA,IACZ,SAAY,GAAA,MAAA;AAAA,GACV,GAAA,UAAA,CAAA;AAEJ,EAAM,MAAA,OAAA,GAAU,OAA0B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAY,OAAuB,IAAI,CAAA,CAAA;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,CAAG,EAAA,QAAQ,IAAI,kBAAmB,EAAA,CAAA;AACrD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,mBAAoB,CAAA;AAAA,IACvC,aAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAU,OAAA,IAAA,CAAA;AAAA,GACZ,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAMZ,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,IAAI,MAAQ,EAAA;AAEV,QAAA,OAAA,CAAQ,QAAQ,IAAK,EAAA,CAAA;AAErB,QAAA,MAAM,EAAE,IAAM,EAAA,GAAA,EAAQ,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA,CAAA;AAC5D,QAAA,IAAI,UAAU,OAAS,EAAA;AACrB,UAAA,SAAA,CAAU,QAAQ,KAAM,CAAA,OAAA,GAAU,CAAS,MAAA,EAAA,IAAI,6BAA6B,GAAG,CAAA,GAAA,CAAA,CAAA;AAAA,SACjF;AAAA,OACK,MAAA;AACL,QAAA,OAAA,CAAQ,QAAQ,KAAM,EAAA,CAAA;AAAA,OACxB;AACA,MAAI,IAAA,SAAA,CAAU,QAAS,CAAA,QAAQ,CAAG,EAAA;AAChC,QAAA,MAAM,EAAE,KAAA,EAAU,GAAA,OAAA,CAAQ,QAAQ,qBAAsB,EAAA,CAAA;AACxD,QAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,UAAa,GAAA,CAAA,CAAA,EAAI,QAAQ,CAAC,CAAA,EAAA,CAAA,CAAA;AAAA,OAClD;AAAA,KACF;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,SAAS,CAAC,CAAA,CAAA;AAEtB,EACE,uBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,UAAU,CAAA;AAAA,MACnC,WAAW,EAAA,QAAA;AAAA,MACX,OAAS,EAAA,KAAA;AAAA,MACT,EAAG,EAAA,YAAA;AAAA,MACH,GAAK,EAAA,OAAA;AAAA,MACL,KAAO,EAAA,EAAE,GAAG,KAAA,EAAO,GAAG,QAAS,EAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,eAAA;AAAA,YACA,OAAS,EAAA,KAAA;AAAA,YACT,KAAA;AAAA,WAAA;AAAA,SACF;AAAA,4BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAS,EAAA,CAAA;AAAA,wBAC9C,GAAA,CAAA,KAAA,EAAA,EAAI,EAAG,EAAA,wBAAA,EAAyB,KAAK,SAAW,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACnD,CAAA;AAEJ;;;;"}

package/types/dialog/Dialog.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from "react";
-import { PopupComponentProps } from "../popup";
-export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
-    PopupProps?: Partial<PopupComponentProps>;
-    isOpen?: boolean;
-    onClose?: () => void;
-    hideCloseButton?: boolean;
-}
-export declare const Dialog: ({ PopupProps, children, className, isOpen, onClose, style, title, hideCloseButton, ...htmlAttributes }: DialogProps) => JSX.Element;