@vuu-ui/vuu-popups 0.8.32 → 0.8.34

package/cjs/dialog/Dialog.css

@@ -0,0 +1,16 @@
+.vuuDialog {
+  background: var(--salt-container-primary-background);
+  border: var(--vuuDialog-border, solid 1px #ccc);
+  border-radius: 5px;
+  padding: var(--vuuDialog-padding, 16px);
+  position: relative;
+  box-shadow: var(--salt-overlayable-shadow, none);
+  height: var(--vuuDialog-height, fit-content);
+  overflow: visible;
+  width: var(--vuuDialog-width, fit-content);
+}
+
+.vuuDialog-body {
+  padding-top: 16px;
+}
+

package/cjs/dialog/Dialog.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+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');
+
+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 {
+    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.showModal();
+        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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../src/dialog/Dialog.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useThemeAttributes } from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, useCallback, useLayoutEffect, useRef } from \"react\";\nimport { DialogHeader } from \"../dialog-header\";\n\nimport \"./Dialog.css\";\nimport { PopupComponentProps, useAnchoredPosition } from \"../popup\";\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 {\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\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":["useRef","useThemeAttributes","useAnchoredPosition","useCallback","useLayoutEffect","jsxs","jsx","DialogHeader"],"mappings":"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"}

package/cjs/dialog/useDialog.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Dialog = require('./Dialog.js');
+
+const useDialog = () => {
+  const [dialogState, setDialogState] = React.useState();
+  const handleClose = React.useCallback(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ jsxRuntime.jsx(
+    Dialog.Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
+
+exports.useDialog = useDialog;
+//# sourceMappingURL=useDialog.js.map

package/cjs/dialog/useDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.js","sources":["../../src/dialog/useDialog.tsx"],"sourcesContent":["import { ReactElement, useCallback, useState } from \"react\";\nimport { Dialog } from \"./Dialog\";\n\nexport type DialogState = {\n  content: ReactElement;\n  title: string;\n  hideCloseButton?: boolean;\n};\n\nexport type SetDialog = (dialogState?: DialogState) => void;\n\nexport const useDialog = () => {\n  const [dialogState, setDialogState] = useState<DialogState>();\n\n  const handleClose = useCallback(() => {\n    setDialogState(undefined);\n  }, []);\n\n  const dialog = dialogState ? (\n    <Dialog\n      className=\"vuDialog\"\n      isOpen={true}\n      onClose={handleClose}\n      style={{ maxHeight: 500 }}\n      title={dialogState.title}\n      hideCloseButton={dialogState.hideCloseButton}\n    >\n      {dialogState.content}\n    </Dialog>\n  ) : null;\n\n  return {\n    dialog,\n    setDialogState,\n  };\n};\n"],"names":["useState","useCallback","jsx","Dialog"],"mappings":";;;;;;AAWO,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,SAAS,WACb,mBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,IAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,KAAA,EAAO,EAAE,SAAA,EAAW,GAAI,EAAA;AAAA,MACxB,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,iBAAiB,WAAY,CAAA,eAAA;AAAA,MAE5B,QAAY,EAAA,WAAA,CAAA,OAAA;AAAA,KAAA;AAAA,GAEb,GAAA,IAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/dialog-header/DialogHeader.css

@@ -0,0 +1,25 @@
+.vuuDialogHeader {
+    --saltButton-height: 28px;
+    --saltButton-width: 28px;
+    --saltToolbar-background: transparent;
+    --saltToolbar-height: calc(var(--salt-size-base) + 5px);
+    --vuuToolbarProxy-height: 22px;
+    --salt-text-fontFamily: Nunito Sans A-Variant, sans-serif;
+
+    display: flex;
+    align-items: flex-start;
+    color: var(--light-text-primary, #15171B);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-size: 16px;
+    font-weight: 600;
+}
+  
+.vuuDialogHeader > .Responsive-inner {
+    align-items: center;
+}
+  
+.vuuDialogHeader > .Responsive-inner > :last-child{
+    right: 2px;
+}
+  
+  

package/cjs/dialog-header/DialogHeader.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+
+const classBase = "vuuDialogHeader";
+const DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+      core.Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
+};
+
+exports.DialogHeader = DialogHeader;
+//# sourceMappingURL=DialogHeader.js.map

package/cjs/dialog-header/DialogHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogHeader.js","sources":["../../src/dialog-header/DialogHeader.tsx"],"sourcesContent":["import { Button, Text } from \"@salt-ds/core\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport \"./DialogHeader.css\";\n\nconst classBase = \"vuuDialogHeader\";\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  hideCloseButton?: boolean;\n  onClose: () => void;\n}\n\nexport const DialogHeader = ({\n  hideCloseButton = false,\n  title,\n  onClose,\n  ...htmlAttributes\n}: DialogHeaderProps) => {\n  return (\n    <div {...htmlAttributes} className={cx(classBase, \"vuuToolbarProxy\")}>\n      <Text className=\"dialogHeader\">{title}</Text>\n      {!hideCloseButton && (\n        <Button\n          key=\"close\"\n          onClick={onClose}\n          data-align=\"end\"\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["jsxs","jsx","Text","Button"],"mappings":";;;;;;AAMA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAOX,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAkB,GAAA,KAAA;AAAA,EAClB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EACE,uBAAAA,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,iBAAiB,CACjE,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,SAAA,EAAA,EAAK,SAAU,EAAA,cAAA,EAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,IACrC,CAAC,eACA,oBAAAD,cAAA;AAAA,MAACE,WAAA;AAAA,MAAA;AAAA,QAEC,OAAS,EAAA,OAAA;AAAA,QACT,YAAW,EAAA,KAAA;AAAA,QACX,WAAU,EAAA,OAAA;AAAA,QACV,OAAQ,EAAA,WAAA;AAAA,OAAA;AAAA,MAJJ,OAAA;AAAA,KAKN;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/index.js

@@ -1,2 +1,53 @@
-"use strict";var oo=Object.create;var ve=Object.defineProperty;var no=Object.getOwnPropertyDescriptor;var ro=Object.getOwnPropertyNames;var io=Object.getPrototypeOf,so=Object.prototype.hasOwnProperty;var uo=(e,t)=>{for(var o in t)ve(e,o,{get:t[o],enumerable:!0})},at=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ro(t))!so.call(e,r)&&r!==o&&ve(e,r,{get:()=>t[r],enumerable:!(n=no(t,r))||n.enumerable});return e};var N=(e,t,o)=>(o=e!=null?oo(io(e)):{},at(t||!e||!e.__esModule?ve(o,"default",{value:e,enumerable:!0}):o,e)),ao=e=>at(ve({},"__esModule",{value:!0}),e);var vn={};uo(vn,{ContextMenu:()=>Ce,ContextMenuContext:()=>pe,ContextMenuProvider:()=>Vo,Dialog:()=>qe,DialogHeader:()=>Oe,DialogService:()=>Ke,MenuItem:()=>ae,MenuItemGroup:()=>ue,MenuList:()=>Pe,NotificationsProvider:()=>fn,PopupComponent:()=>We,PopupMenu:()=>Yo,PopupService:()=>W,Portal:()=>Q,Prompt:()=>jo,Separator:()=>Ve,ToastNotification:()=>ot,Tooltip:()=>on,createContainer:()=>mo,isMenuItemLabel:()=>ye,reasonIsClickAway:()=>ze,reasonIsMenuAction:()=>Fe,renderPortal:()=>$e,useAnchoredPosition:()=>X,useContextMenu:()=>Ye,useDialog:()=>Mo,useNotifications:()=>gn,useTooltip:()=>nn});module.exports=ao(vn);var xt=N(require("clsx")),yt=require("@vuu-ui/vuu-utils"),J=require("react");var be=require("@salt-ds/core"),lt=N(require("clsx"));var re=require("react/jsx-runtime"),lo="vuuDialogHeader",Oe=({hideCloseButton:e=!1,title:t,onClose:o,...n})=>(0,re.jsxs)("div",{...n,className:(0,lt.default)(lo,"vuuToolbarProxy"),children:[(0,re.jsx)(be.Text,{className:"dialogHeader",children:t}),!e&&(0,re.jsx)(be.Button,{onClick:o,"data-align":"end","data-icon":"close",variant:"secondary"},"close")]});var dt=N(require("clsx")),ie=N(require("react")),ee=N(require("react-dom"));var pt=N(require("react-dom")),ct=N(require("clsx")),po=1,co=({className:e,dataMode:t,x:o=0,y:n=0,win:r=window})=>{let i=r.document.createElement("div");return i.className=(0,ct.default)(`vuuPopup ${po++}`,e),i.style.cssText=`left:${o}px; top:${n}px;`,t&&(i.dataset.mode=t),r.document.body.appendChild(i),i},mo=e=>co(e),$e=(e,t,o,n,r)=>{t.style.cssText=`left:${o}px; top:${n}px;position: absolute;`,pt.render(e,t,r)};var U=!1,S=[],Fe=e=>(e==null?void 0:e.type)==="menu-action",ze=e=>(e==null?void 0:e.type)==="click-away";function he(e){if(e.key==="Esc"){if(S.length)ft();else if(U){let t=document.body.querySelector(".vuuDialog");t&&ee.default.unmountComponentAtNode(t)}}}function mt(e){if(S.length){let t=document.body.querySelectorAll(".vuuPopup,#vuu-portal-root");for(let o=0;o<t.length;o++)if(t[o].contains(e.target))return;ft({mouseEvt:e,type:"click-away"})}}function ft(e){if(S.length===1)W.hidePopup(e,"anon","all");else if(S.length){let t=document.body.querySelectorAll(".vuuPopup");for(let o=0;o<t.length;o++)ee.default.unmountComponentAtNode(t[o]);gt("*")}}function fo(){U===!1&&(U=!0,window.addEventListener("keydown",he,!0))}function go(){U&&(U=!1,window.removeEventListener("keydown",he,!0))}function vo(e){S.indexOf(e)===-1&&(S.push(e),U===!1&&(window.addEventListener("keydown",he,!0),window.addEventListener("click",mt,!0)))}function gt(e){if(S.length){if(e==="*")S.length=0;else{let t=S.indexOf(e);t!==-1&&S.splice(t,1)}S.length===0&&U===!1&&(window.removeEventListener("keydown",he,!0),window.removeEventListener("click",mt,!0))}}var bo=({children:e,position:t,style:o})=>{let n=(0,dt.default)("hwPopup","hwPopupContainer",t);return(0,ie.createElement)("div",{className:n,style:o},e)},ho=1,W=class e{static showPopup({group:t="all",name:o="anon",left:n=0,position:r="",right:i="auto",top:u=0,width:d="auto",component:l}){if(!l)throw Error("PopupService showPopup, no component supplied");typeof l.props.onClose=="function"?e.onClose=l.props.onClose:e.onClose=void 0,vo(o),document.addEventListener("keydown",e.escapeKeyListener,!0);let s=document.body.querySelector(".vuuPopup."+t);s===null&&(s=document.createElement("div"),s.className="vuuPopup "+t,document.body.appendChild(s));let a={width:d};$e((0,ie.createElement)(bo,{key:ho++,position:r,style:a},l),s,n,u,()=>{e.keepWithinThePage(s,i)})}static escapeKeyListener(t){t.key==="Escape"&&e.hidePopup({type:"escape",event:t})}static hidePopup(t,o="anon",n="all"){var r;if(S.indexOf(o)!==-1){gt(o);let i=document.body.querySelector(`.vuuPopup.${n}`);i&&ee.default.unmountComponentAtNode(i)}document.removeEventListener("keydown",e.escapeKeyListener,!0),(r=e==null?void 0:e.onClose)==null||r.call(e,t?{...t,closedBy:"popup-service"}:void 0)}static keepWithinThePage(t,o="auto"){let n=t.querySelector(".vuuPopupContainer > *");if(n){let{top:r,left:i,width:u,height:d,right:l}=n.getBoundingClientRect(),s=window.innerWidth,p=window.innerHeight-(r+d);p<0&&(n.style.top=Math.round(r)+p+"px");let c=s-(i+u);if(c<0&&(n.style.left=Math.round(i)+c+"px"),typeof o=="number"&&o!==l){let f=o-l;n.style.left=i+f+"px"}}}},Ke=class e{static showDialog(t){let o=".vuuDialog",n=t.props.onClose;fo(),ee.default.render(ie.default.cloneElement(t,{container:o,onClose:()=>{e.closeDialog(),n&&n()}}),document.body.querySelector(o))}static closeDialog(){go();let t=document.body.querySelector(".vuuDialog");t&&ee.default.unmountComponentAtNode(t)}};var vt=N(require("clsx"));var q=require("react");var se=(e,t,o,n,r,i)=>{let{bottom:u,height:d,left:l,right:s,top:a,width:p}=e.getBoundingClientRect();switch(t){case"below":return{left:l+o,top:u+n};case"right":return{left:s+o,top:a+n};case"below-center":return{left:l+p/2+o,top:u+n};case"below-right":return{left:l,minWidth:r,top:u+n};case"below-full-width":return{left:l+o,minWidth:r,top:u+n,width:p};case"center":return i?{left:p/2-i.width/2+o,top:d/2-i.height/2+n,visibility:"visible"}:{left:p/2+o,top:d/2+n,visibility:"hidden"};default:throw Error(`Popup getPositionRelativeToAnchor non-supported placement value ${t}`)}};var X=({anchorElement:e,minWidth:t,offsetLeft:o=0,offsetTop:n=0,placement:r,position:i})=>{let u=(0,q.useRef)(null),[d,l]=(0,q.useState)(i);(0,q.useLayoutEffect)(()=>{if(r==="absolute"&&i)l(i);else if(e.current&&r!=="auto"){let a=u.current===null?void 0:u.current.getBoundingClientRect(),p=se(e.current,r,o,n,t,a);l(p)}},[e,t,o,n,r,i]);let s=(0,q.useCallback)(a=>{if(u.current=a,a&&r==="center"&&e.current){let{height:p,width:c}=a.getBoundingClientRect();l(se(e.current,r,o,n,void 0,{height:p,width:c}))}},[e,o,n,r]);return{position:d,popupRef:r==="center"?s:void 0}};var bt=require("react/jsx-runtime"),We=({children:e,className:t,anchorElement:o,minWidth:n,offsetLeft:r,offsetTop:i,placement:u,position:d})=>{let{popupRef:l,position:s}=X({anchorElement:o,minWidth:n,offsetLeft:r,offsetTop:i,placement:u,position:d});return s===void 0?null:(0,bt.jsx)("div",{className:(0,vt.default)("vuuPortal",t),ref:l,style:s,children:e})};var te=require("react/jsx-runtime"),ht="vuuDialog",xo={current:document.body},yo={},qe=({PopupProps:e=yo,children:t,className:o,isOpen:n=!1,onClose:r,style:i,title:u,hideCloseButton:d=!1,...l})=>{let{anchorElement:s=xo,offsetLeft:a=0,offsetTop:p=0,placement:c="auto"}=e,f=(0,J.useRef)(null),P=(0,J.useRef)(null),[g,M,E]=(0,yt.useThemeAttributes)(),{position:T}=X({anchorElement:s,offsetLeft:a,offsetTop:p,placement:c}),C=(0,J.useCallback)(()=>{r==null||r()},[r]);return(0,J.useLayoutEffect)(()=>{if(f.current){if(n){f.current.showModal();let{left:y,top:v}=f.current.getBoundingClientRect();P.current&&(P.current.style.cssText=`left:-${y}px;position:absolute;top:-${v}px;`)}else f.current.close();if(c.endsWith("center")){let{width:y}=f.current.getBoundingClientRect();f.current.style.marginLeft=`-${y/2}px`}}},[n,c]),(0,te.jsxs)("dialog",{...l,className:(0,xt.default)(ht,g),"data-mode":E,onClose:C,id:"vuu-dialog",ref:f,style:{...i,...T},children:[(0,te.jsx)(Oe,{hideCloseButton:d,onClose:C,title:u}),(0,te.jsx)("div",{className:`${ht}-body`,children:t}),(0,te.jsx)("div",{id:"vuu-dialog-portal-root",ref:P})]})};var xe=require("react");var Mt=require("react/jsx-runtime"),Mo=()=>{let[e,t]=(0,xe.useState)(),o=(0,xe.useCallback)(()=>{t(void 0)},[]);return{dialog:e?(0,Mt.jsx)(qe,{className:"vuDialog",isOpen:!0,onClose:o,style:{maxHeight:500},title:e.title,hideCloseButton:e.hideCloseButton,children:e.content}):null,setDialogState:t}};var $t=require("@vuu-ui/vuu-utils"),j=require("react");var Pt=require("@vuu-ui/vuu-utils"),Y=require("react"),Ct=require("react-dom");function Po(e){return typeof e=="function"?e():e}var Co=["vuu-dialog-portal-root","vuu-portal-root"],wo=e=>{if(Array.isArray(e))for(let t of e){let o=document.getElementById(t);if(o)return o}else return document.getElementById(e);return null},Q=({children:e,container:t=document.body,id:o=Co,onRender:n,open:r=!0,themeAttributes:i})=>{var f;let[u,d]=(0,Y.useState)(!1),l=(0,Y.useRef)(null),s=(f=Po(t))!=null?f:document.body,[a,p,c]=(0,Pt.useThemeAttributes)(i);return(0,Y.useLayoutEffect)(()=>{let P=wo(o);P?l.current=P:(l.current=document.createElement("div"),l.current.id=typeof o=="string"?o:o.length>0?o.at(-1):"vuu-portal-root");let g=l.current;s.contains(g)||s.appendChild(g),g.classList.add(a,p),g.dataset.mode=c,d(!0)},[o,s,a,p,c]),(0,Y.useLayoutEffect)(()=>{requestAnimationFrame(()=>{n==null||n()})},[n]),r&&u&&l.current&&e?(0,Ct.createPortal)(e,l.current):null};var Ue=N(require("clsx")),F=N(require("react")),Nt=require("@vuu-ui/vuu-utils");var Z=N(require("react"));var Ge=e=>e.type===ue||!!e.props["data-group"],Eo=e=>{if(Array.isArray(e)&&ye(e[0]))return e[0]},To=(e,t,o,n=!1)=>{let{props:{children:r}}=e;return{childWithId:Z.default.cloneElement(e,{hasSeparator:n,id:`${t}`,key:t,children:o?Eo(r):r}),grandChildren:o?r:void 0}},wt=(e,t)=>{let o=(0,Z.useCallback)(()=>{let i=(u,d=t,l={},s={})=>{let a=l[d]=[],p=0,c=!1;return Z.default.Children.forEach(u,f=>{if(!ye(f))if(f.type===Ve)c=!0;else{let P=Ge(f),g=`${d}-${p}`,{props:{action:M,options:E}}=f,{childWithId:T,grandChildren:C}=To(f,g,P,c);a.push(T),C?i(C,g,l,s):s[g]={action:M,options:E},p+=1,c=!1}}),[l,s]};return i(e)},[t,e]),[n,r]=(0,Z.useMemo)(()=>o(),[o]);return[n,r]};var D=require("react");var Et=e=>e.closest("[data-root='true']")!==null,Tt=(e,t)=>{var o;return e.ariaHasPopup==="true"&&((o=e.dataset)==null?void 0:o.idx)===`${t}`||e.querySelector(`:scope > [data-index='${t}'][aria-haspopup='true']`)!==null};function ko(e,...t){let o=new Set(e);for(let n of t)for(let r of n)o.add(r);return o}var Ro="Enter";var Lo="Delete",Ho=new Set([Ro,Lo]),Io=new Set(["Tab"]),No=new Set(["ArrowRight","ArrowLeft"]),kt=new Set(["Home","End","ArrowDown","ArrowUp"]),Rt=new Set(["Home","End","ArrowRight","ArrowLeft"]),Ao=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),lr=ko(Ho,Rt,kt,No,Ao,Io);var Lt=({key:e},t="vertical")=>(t==="vertical"?kt:Rt).has(e);var Me=require("@vuu-ui/vuu-utils"),Ht=({autoHighlightFirstItem:e=!1,count:t,defaultHighlightedIdx:o,highlightedIndex:n,onActivate:r,onHighlight:i,onCloseMenu:u,onOpenMenu:d})=>{var y;if((0,Me.isValidNumber)(n)&&(0,Me.isValidNumber)(o))throw Error("useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx");let l=(0,Me.isValidNumber)(n),s=(0,D.useRef)((y=o!=null?o:n)!=null?y:e?0:-1),[,a]=(0,D.useState)(null),p=(0,D.useCallback)(v=>{s.current=v,i==null||i(v),a({})},[i]),c=(0,D.useCallback)(v=>{v!==s.current&&(l||p(v))},[l,p]),f=(0,D.useRef)(!0),P=(0,D.useRef)(!1),g=v=>P.current=v,M=l?n:s.current,E=(0,D.useCallback)(v=>{let m=Do(t,v.key,s.current);m!==s.current&&c(m)},[t,c]),T=(0,D.useCallback)(v=>{if(Lt(v))v.preventDefault(),v.stopPropagation(),f.current=!0,E(v);else if((v.key==="ArrowRight"||v.key==="Enter")&&Tt(v.target,M)){let b=v.target.querySelector(`:scope > [data-index='${M}']`);b&&(d==null||d(b,!0))}else v.key==="ArrowLeft"&&!Et(v.target)?u(v,"close-child-menu"):v.key==="Enter"?(v.preventDefault(),v.stopPropagation(),r&&r(M)):v.key==="Tab"&&u(v,"tab-away")},[M,E,r,u,d]),C=(0,D.useMemo)(()=>({onFocus:()=>{M===-1&&p(0)},onKeyDown:T,onMouseDownCapture:()=>{f.current=!1,g(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,g(!1),c(-1)}}),[T,M,p,c]);return{focusVisible:f.current?M:-1,controlledHighlighting:l,highlightedIndex:M,setHighlightedIndex:c,listProps:C,setIgnoreFocus:g}};function Do(e,t,o){return t==="ArrowUp"?o>0?o-1:o:o===null?0:o===e-1?o:o+1}var K=require("react/jsx-runtime"),It="vuuMenuList",Ve=()=>(0,K.jsx)("li",{className:"vuuMenuItem-divider"}),ue=()=>null,ae=({children:e,idx:t,options:o,...n})=>(0,K.jsx)("div",{...n,children:e}),At=({children:e})=>(0,K.jsx)(K.Fragment,{children:e});At.displayName="MenuItemLabel";ae.Label=At;var So=e=>F.default.isValidElement(e)&&typeof e.type!="string"&&"displayName"in e.type?e.type.displayName:void 0,ye=e=>So(e)==="MenuItemLabel",Bo=e=>e.props["data-icon"],Pe=({activatedByKeyboard:e,childMenuShowing:t,children:o,className:n,defaultHighlightedIdx:r,highlightedIdx:i,id:u,isRoot:d,listItemProps:l,onHighlightMenuItem:s,onActivate:a,onCloseMenu:p,openMenu:c,...f})=>{let P=(0,Nt.useId)(u),g=(0,F.useRef)(null),M=(0,F.useMemo)(()=>new Map,[]),E=x=>{var w;let h=(w=g.current)==null?void 0:w.querySelector(`:scope > [data-index='${x}']`);h!=null&&h.id&&(a==null||a(h.id))},{focusVisible:T,highlightedIndex:C,listProps:y}=Ht({count:F.default.Children.count(o),defaultHighlightedIdx:r,highlightedIndex:i,onActivate:E,onHighlight:s,onOpenMenu:c,onCloseMenu:p}),v=t==null?T:-1;(0,F.useLayoutEffect)(()=>{var x;t===void 0&&e&&((x=g.current)==null||x.focus())},[e,t]);let m=()=>C===void 0||C===-1?void 0:M.get(C);function b(){let x={...l,role:"menuitem"},h=(L,H,A)=>H?[(0,K.jsx)("span",{className:"vuuIconContainer","data-icon":A},"icon")].concat(L):L;function w(L,H,A,V){var ut;let{children:B,className:Zt,"data-icon":it,id:ge,hasSeparator:jt,label:_,..._t}=H.props,Be=Ge(H),st=Be&&t===ge,eo=st?`${P}-${ge}`:void 0,to=(_!=null?_:typeof B=="string")?B:void 0;L.push((0,K.jsx)(ae,{..._t,...x,...Oo(ge,A,(ut=H.key)!=null?ut:ge,C,v,Zt,jt),"aria-controls":eo,"aria-haspopup":Be||void 0,"aria-expanded":st||void 0,"aria-label":to,children:h(Be&&_!=null?_:B,V,it)}))}let k=[];if(o.length>0){let L=o.some(Bo);o.forEach((H,A)=>{w(k,H,A,L)})}return k}return(0,K.jsx)("div",{...f,...y,"aria-activedescendant":m(),className:(0,Ue.default)(It,n,{[`${It}-childMenuShowing`]:t!==void 0}),"data-root":d||void 0,id:P,ref:g,role:"menu",children:b()})},Oo=(e,t,o,n,r,i,u)=>({id:`menuitem-${e}`,key:o!=null?o:t,"data-index":t,className:(0,Ue.default)("vuuMenuItem",i,{"vuuMenuItem-separator":u,vuuHighlighted:t===n,focusVisible:r===t})});Pe.displayName="MenuList";var R=require("react");var Xe=e=>e==null?void 0:e.closest("[data-index],[aria-posinset]");var St=(e,t,o)=>e.map((n,r)=>r===e.length-1?{...n,[o]:n[o]-t}:n),$o=(e,t)=>St(e,t,"left"),Ko=(e,t)=>St(e,t,"top"),Fo=(e,t)=>{let[o,n]=t.slice(-2),r=document.getElementById(`${e}-${n.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${n.id} not found`);let{width:i}=r.getBoundingClientRect();return t.map(u=>u===n?{...u,left:o.left-(i-2)}:u)},zo=(e,t)=>{let[{left:o,top:n}]=t.slice(-1),{offsetWidth:r,offsetTop:i}=e;return{left:o+r,top:i+n}},Bt=(e,t)=>{let o=e.lastIndexOf("-");return e.startsWith("menuitem")?o>-1?e.slice(9,o):t:o>-1?e.slice(0,o):t},Wo=e=>e.slice(9),Dt=({ariaExpanded:e,ariaHasPopup:t,id:o},n)=>{if(o.startsWith("menuitem"))return{hostMenuId:Bt(o,n),targetMenuId:Wo(o),menuItemId:o,isGroup:t==="true",isOpen:e==="true"};throw Error(`getMenuItemDetails #${o} is not a menuitem`)},Ot=({id:e,onActivate:t,onMouseEnterItem:o,position:{x:n,y:r}})=>{let[,i]=(0,R.useState)({}),u=(0,R.useRef)([{id:e,left:n,top:r}]),d=(0,R.useCallback)(m=>u.current.findIndex(b=>b.id===m)!==-1,[]),l=(0,R.useCallback)(m=>{let b=c.current[m];if(b===void 0)throw Error(`getOpenMenuState no entry for menu ${m}`);return b},[]),s=(0,R.useCallback)(m=>{u.current=m,i({})},[]),a=(0,R.useRef)(),p=(0,R.useRef)(),c=(0,R.useRef)({[e]:"no-popup"}),f=(0,R.useCallback)((m=e,b,x=null)=>{if(m===e&&x===null)s([{id:e,left:n,top:r}]);else{c.current[m]="popup-open";let h=document.getElementById(x);if(h!==null){let{left:w,top:k}=zo(h,u.current);s(u.current.concat({id:b,left:w,top:k}))}else throw Error(`openMenu no menuItem ${x}`)}},[e,n,r,s]),P=(0,R.useCallback)(m=>{if(m===e)s([]);else{let b=u.current.slice(),x=b.pop();c.current[x.id]="no-popup";let h=b.at(-1);h&&(c.current[h.id]="no-popup"),s(b)}},[e,s]),g=(0,R.useCallback)(m=>{let b=u.current.slice(),x=m.slice(9),{id:h}=b.at(-1);for(;b.length>1&&!x.startsWith(h);){let w=Bt(h,e);b.pop(),c.current[h]="no-popup",c.current[w]="no-popup",{id:h}=b[b.length-1]}b.length<u.current.length&&s(b)},[e,s]),M=(0,R.useCallback)(()=>{a.current&&(clearTimeout(a.current),a.current=void 0)},[]),E=(0,R.useCallback)((m,b,x,h=300)=>{M(),a.current=window.setTimeout(()=>{g(x),c.current[m]="popup-open",c.current[b]="no-popup",f(m,b,x)},h)},[M,g,f]),T=(0,R.useCallback)((m,b,x)=>{c.current[b]="pending-close",p.current=window.setTimeout(()=>{g(x)},400)},[g]),C=(0,R.useCallback)(()=>{let{current:m}=u,b=m.at(-1),x=b?document.getElementById(b.id):void 0;if(x){let{right:h,bottom:w}=x.getBoundingClientRect(),{clientHeight:k,clientWidth:L}=document.body;if(h>L){let H=m.length>1?Fo(e,m):$o(m,h-L);s(H)}else if(w>k){let H=Ko(m,w-k);s(H)}typeof x.tabIndex=="number"&&x.focus()}},[e,s]),y=(0,R.useCallback)((m,b=!1)=>{let{hostMenuId:x,targetMenuId:h,menuItemId:w,isGroup:k,isOpen:L}=Dt(m,e),{current:{[x]:H}}=c,A=b?0:void 0;if(H==="no-popup"&&k)c.current[x]="popup-pending",E(x,h,w,A);else if(H==="popup-pending"&&!k)c.current[x]="no-popup",clearTimeout(a.current),a.current=void 0;else if(H==="popup-pending"&&k)clearTimeout(a.current),E(x,h,w,A);else if(H==="popup-open")if(d(h)){let V=l(h);switch(g(w),V){case"pending-close":clearTimeout(p.current),p.current=void 0,c.current[h]="no-popup",M();break;default:}}else{let[V,B]=u.current.slice(-2);V.id===x&&c.current[B.id]!=="pending-close"?(T(x,B.id,w),k&&!L&&E(x,h,w,A)):V.id===x&&k&&w!==B.id&&c.current[B.id]==="pending-close"||k?E(x,h,w,A):c.current[B.id]!=="pending-close"&&g(w)}H==="pending-close"&&(M(),clearTimeout(p.current),p.current=void 0,c.current[x]="popup-open")},[M,g,l,d,e,T,E]),v=(0,R.useMemo)(()=>({onMouseEnter:m=>{let b=Xe(m.target);y(b),o(m,b.id)},onClick:m=>{let b=Xe(m.target),{isGroup:x,menuItemId:h}=Dt(b,e);x?y(b):t(h)}}),[t,o,e,y]);return{closeMenu:P,handleRender:C,listItemProps:v,openMenu:y,openMenus:u.current}};var le=require("react/jsx-runtime"),Je=require("react"),qo=()=>{},Ce=({PortalProps:e,activatedByKeyboard:t,children:o,className:n,id:r,onClose:i=()=>{},position:u={x:0,y:0},style:d,...l})=>{let s=(0,$t.useId)(r),a=(0,j.useRef)(qo),[p,c]=wt(o,s),f=(0,j.useRef)(t),P=(0,j.useCallback)(()=>{f.current=!1},[]),g=(0,j.useCallback)(h=>{let w=h.slice(9),{action:k,options:L}=c[w];a.current(s),i({type:"menu-action",menuId:k,options:L})},[c,s,i]),{closeMenu:M,listItemProps:E,openMenu:T,openMenus:C,handleRender:y}=Ot({id:`${s}`,onActivate:g,onMouseEnterItem:P,position:u});a.current=M;let v=(0,j.useCallback)((h,w)=>{f.current=!0,M(),w==="tab-away"&&i({event:h,type:"tab-away"})},[M,i]),m=()=>{},b=C.length-1,x=h=>{if(!(h>=b)){let{id:w}=C[h+1];return w}};return(0,le.jsx)(le.Fragment,{children:C.map(({id:h,left:w,top:k},L,H)=>{let A=x(L);return(0,Je.createElement)(Q,{...e,key:L,onRender:y},(0,le.jsx)(We,{anchorElement:{current:document.body},placement:"absolute",position:{left:w,top:k},children:(0,Je.createElement)(Pe,{...l,activatedByKeyboard:f.current,childMenuShowing:A,className:n,id:h,isRoot:L===0,key:L,listItemProps:E,onActivate:g,onHighlightMenuItem:m,onCloseMenu:v,openMenu:T,style:d,tabIndex:L===H.length-1?0:void 0},p[h])}))})})};Ce.displayName="ContextMenu";var oe=require("react"),we=require("react/jsx-runtime"),pe=(0,oe.createContext)(null),Go=({children:e,context:t,menuActionHandler:o,menuBuilder:n})=>{let r=(0,oe.useMemo)(()=>t!=null&&t.menuBuilders&&n?t.menuBuilders.concat(n):n?[n]:(t==null?void 0:t.menuBuilders)||[],[t,n]),i=(0,oe.useCallback)(u=>{var d;if(o!=null&&o(u)||(d=t==null?void 0:t.menuActionHandler)!=null&&d.call(t,u))return!0},[t,o]);return(0,we.jsx)(pe.Provider,{value:{menuActionHandler:i,menuBuilders:r},children:e})},Vo=({children:e,label:t,menuActionHandler:o,menuBuilder:n})=>(0,we.jsx)(pe.Consumer,{children:r=>(0,we.jsx)(Go,{context:r,label:t,menuActionHandler:o,menuBuilder:n,children:e})});var Te=require("@vuu-ui/vuu-utils"),O=require("react");var Ee=require("react/jsx-runtime"),Ye=(e,t)=>{let o=(0,O.useContext)(pe),[n,r,i]=(0,Te.useThemeAttributes)(),u=(0,O.useMemo)(()=>({themeClass:n,densityClass:r,dataMode:i}),[i,r,n]),d=(0,O.useCallback)((a,p,c)=>{let f=[];for(let P of a)f=f.concat(P(p,c));return f},[]),l=(0,O.useCallback)((a,p,{ContextMenuProps:c,contextMenu:f,...P})=>{var M,E;if((M=a.stopPropagation)==null||M.call(a),(E=a.preventDefault)==null||E.call(a),f)return Xo({x:a.clientX,y:a.clientY},f);let g=[];if(e&&g.push(e),o&&Array.isArray(o==null?void 0:o.menuBuilders)&&o.menuBuilders.length>0&&g.push(...o.menuBuilders),g.length>0){let T=d(g,p,P),C=y=>(t==null?void 0:t(y))===!0?!0:o==null?void 0:o.menuActionHandler(y);T.length&&C&&Jo(a,T,C,{PortalProps:{themeAttributes:u},...c})}else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)")},[d,o,t,e,u]),s=(0,O.useCallback)(()=>{console.log("hide context menu")},[]);return[l,s]},Uo={},Xo=(e,t)=>{W.showPopup({focus:!0,left:0,top:0,component:(0,O.cloneElement)(t,{position:e})})},Jo=(e,t,o,{position:n,...r}=Uo)=>{let i=s=>{let a=(p,c)=>(0,Te.isGroupMenuItemDescriptor)(p)?(0,Ee.jsx)(ue,{label:p.label,children:p.children.map(a)},c):(0,Ee.jsx)(ae,{action:p.action,className:p.className,"data-icon":p.icon,options:p.options,children:p.label},c);return s.map(a)},u=s=>{var a;if(Fe(s)){if((s==null?void 0:s.closedBy)==="popup-service")return;o(s),W.hidePopup(s)}(a=r==null?void 0:r.onClose)==null||a.call(r,s)},d=n!=null?n:{x:e.clientX,y:e.clientY},l=(0,Ee.jsx)(Ce,{...r,onClose:u,position:d,children:i(t)});W.showPopup({left:0,top:0,component:l,focus:!0})};var ke=require("@vuu-ui/vuu-ui-controls"),Ft=require("@vuu-ui/vuu-utils"),zt=require("@salt-ds/core"),Ze=N(require("clsx"));var $=require("react");var Kt=({anchorElement:e,id:t,menuActionHandler:o,menuBuilder:n,menuClassName:r,menuLocation:i,menuOptions:u,onMenuClose:d,onMenuOpen:l,popupPlacement:s,tabIndex:a})=>{let[p,c]=(0,$.useState)(!1),f=(0,$.useRef)(!1),P=(0,$.useRef)(null),g=(0,$.useCallback)(m=>{c(m),m&&(l==null||l())},[l]),[M]=Ye(n,o),E=(0,$.useCallback)(m=>{console.log("menu Open ",{el:m})},[]),T=(0,$.useCallback)(m=>{console.log("onClose"),g(!1),ze(m)?(m.mouseEvt.target===P.current&&(f.current=!0),d==null||d(m)):requestAnimationFrame(()=>{var b;d==null||d(m),a!==-1&&(m==null?void 0:m.type)!=="tab-away"&&((b=P.current)==null||b.focus())})},[d,g,a]),C=(0,$.useCallback)(m=>{var b;if(f.current)f.current=!1;else{let x=(b=e==null?void 0:e.current)!=null?b:P.current;if(x){let{left:h,top:w,width:k}=se(x,s,0,0);g(!0),M(m,i,{ContextMenuProps:{className:r,id:`${t}-menu`,onClose:T,openMenu:E,position:{x:h,y:w},style:{width:k?k-2:void 0}},...u})}}},[e,T,E,t,r,i,u,s,g,M]);return{ariaAttributes:{"aria-controls":p?`${t}-menu`:void 0,"aria-expanded":p,"aria-haspopup":"menu"},buttonProps:{id:t,onClick:C,tabIndex:a},menuOpen:p,rootRef:P}};var ce=require("react/jsx-runtime"),Qe="vuuPopupMenu",Yo=({anchorElement:e,className:t,disabled:o=!1,label:n,icon:r=n?"chevron-down":"more-vert",id:i,menuActionHandler:u,menuBuilder:d,menuClassName:l,menuLocation:s="header",menuOptions:a,onMenuClose:p,onMenuOpen:c,popupPlacement:f="below-right",tabIndex:P=0,variant:g="secondary",...M})=>{let E=(0,Ft.useId)(i),{ariaAttributes:T,buttonProps:C,menuOpen:y,rootRef:v}=Kt({anchorElement:e,id:E,menuActionHandler:u,menuBuilder:d,menuClassName:l,menuLocation:s,onMenuClose:p,onMenuOpen:c,menuOptions:a,popupPlacement:f,tabIndex:P});return n?(0,ce.jsxs)(zt.Button,{...M,...T,...C,className:(0,Ze.default)(Qe,t,`${Qe}-withCaption`,{"saltButton-active":y}),disabled:o,ref:v,variant:"secondary",children:[r?(0,ce.jsx)(ke.Icon,{name:r}):null,n]}):r?(0,ce.jsx)(ke.IconButton,{...M,...T,...C,className:(0,Ze.default)(Qe,t,{"saltButton-active":y}),disabled:o,icon:r,ref:v,variant:g}):(console.error("PopupMenu must have a label or an icon (or both)"),null)};var Wt=require("@vuu-ui/vuu-utils"),je=require("@salt-ds/core"),qt=N(require("clsx")),de=require("react");var z=require("react/jsx-runtime"),ne="vuuPrompt",Qo={current:document.body},Zo={},jo=({PopupProps:e=Zo,cancelButtonLabel:t="Cancel",confirmButtonLabel:o="Confirm",icon:n,onCancel:r,onConfirm:i,style:u,text:d,title:l,variant:s="info",...a})=>{let{anchorElement:p=Qo,offsetLeft:c=0,offsetTop:f=0,placement:P="below"}=e,[g,M,E]=(0,Wt.useThemeAttributes)(),{position:T}=X({anchorElement:p,offsetLeft:c,offsetTop:f,placement:P}),C=(0,de.useRef)(null),y=(0,de.useRef)(null);return(0,de.useLayoutEffect)(()=>{if(C.current&&(C.current.showModal(),y.current&&y.current.focus(),P.endsWith("center"))){let{width:v}=C.current.getBoundingClientRect();C.current.style.marginLeft=`-${v/2}px`}},[P]),(0,z.jsx)("dialog",{...a,className:(0,qt.default)(ne,`${ne}-${s}`,g),"data-mode":E,ref:C,style:{...u,...T},children:(0,z.jsxs)("form",{className:`${ne}-form`,children:[(0,z.jsx)("div",{className:`${ne}-header`,"data-icon":n,children:l}),(0,z.jsx)("div",{className:`${ne}-text`,children:d}),(0,z.jsxs)("div",{className:`${ne}-buttonBar`,children:[(0,z.jsx)(je.Button,{onClick:r,variant:"secondary",children:t}),(0,z.jsx)(je.Button,{onClick:i,ref:y,value:"default",children:o})]})]})})};var Le=require("react"),Re=12,_o=(e,t)=>t<e.top,en=(e,t)=>document.body.clientHeight-e.bottom>t,tn=e=>Array.isArray(e)?e.length===0?[void 0,e]:[e[0],e.slice(1)]:[e,[]],Gt=({anchorElement:e,offsetLeft:t=0,offsetTop:o=0,placement:n})=>{let r=(0,Le.useCallback)(i=>{if(i&&e.current){let u=e.current.getBoundingClientRect(),{height:d,width:l}=i.getBoundingClientRect(),s,a=n;do switch([s,a]=tn(a),s){case"above":if(_o(u,d+Re)){let p=(l-u.width)/2;i.style.cssText=`left:${u.left-p}px;top:${u.top-d-Re}px;opacity: 1;`,i.dataset.align="above";return}break;case"below":if(en(u,d+Re)){let p=(l-u.width)/2;i.style.cssText=`left:${u.left-p}px;top:${u.bottom+Re}px;opacity: 1;`,i.dataset.align="below";return}break;case"right":console.log("place the fucker right");break;case"left":console.log("place the fucker left");break;default:console.warn(`unklnown tooltip placement ${n}`)}while(s)}},[e,n]);return(0,Le.useLayoutEffect)(()=>{},[e,t,o,n]),r};var Vt=N(require("clsx"));var He=require("react/jsx-runtime"),_e="vuuTooltip",on=({anchorElement:e,children:t,className:o,id:n,onMouseEnter:r,onMouseLeave:i,placement:u,status:d,style:l})=>{let s=Gt({anchorElement:e,placement:u});return(0,He.jsx)(Q,{children:(0,He.jsx)("div",{className:(0,Vt.default)(_e,o,"vuuHidden",{[`${_e}-error`]:d==="error"}),id:n,ref:s,style:{...l,left:0,top:0},children:(0,He.jsx)("span",{className:`${_e}-content`,onMouseEnter:r,onMouseLeave:i,children:t})})})};var Ie=require("@vuu-ui/vuu-utils"),I=require("react"),nn=({anchorQuery:e="*",id:t,placement:o="right",tooltipContent:n})=>{let r=(0,I.useRef)(),i=(0,I.useRef)(!1),u=(0,I.useRef)(null),d=(0,I.useRef)(),l=(0,I.useRef)(),[s,a]=(0,I.useState)(),p=(0,Ie.useId)(t),c=(0,I.useCallback)(y=>{var v;y.key==="Escape"&&((v=r.current)==null||v.call(r))},[]);r.current=(0,I.useCallback)(()=>{a(void 0),document.removeEventListener("keydown",c)},[c]);let f=(0,I.useCallback)(()=>{window.clearTimeout(l.current)},[]),P=(0,I.useCallback)(()=>{var y;(y=r.current)==null||y.call(r)},[]),g=(0,I.useCallback)((y=0)=>{d.current?(window.clearTimeout(d.current),d.current=void 0):r.current&&(y===0?r.current():l.current=window.setTimeout(r.current,y))},[]),M=(0,I.useCallback)((y=u)=>{let{current:v}=y;v&&(a({anchorElement:y,children:n,id:`${p}-tooltip`,onMouseEnter:f,onMouseLeave:P,placement:o}),document.addEventListener("keydown",c)),d.current=void 0,g(i.current?3e3:1e3)},[c,f,P,g,p,o,n]),E=(0,I.useCallback)(y=>{i.current=!0;let v=(0,Ie.queryClosest)(y.target,e);v&&(console.log(`el ${v.classList}`),u.current=v,d.current=window.setTimeout(M,800))},[e,M]),T=(0,I.useCallback)(()=>{i.current=!1,g(200)},[g]);return{anchorProps:{"aria-describedby":`${p}-tooltip`,onMouseEnter:E,onMouseLeave:T},hideTooltip:g,showTooltip:M,tooltipProps:s}};var fe=N(require("react"));var De=require("react"),Yt=require("@vuu-ui/vuu-utils");var Xt=require("@vuu-ui/vuu-ui-controls"),Jt=N(require("clsx")),Ae=require("react");var G=require("react/jsx-runtime"),et=300,tt=50,rn=6e3,Ut=1e3,sn=56,un=300,Ne="vuuToastNotification",an={error:"error",info:"info-circle",success:"tick",warning:"warn-triangle"},ot=e=>{let{top:t,notification:o,animated:n=!0}=e,[r,i]=(0,Ae.useState)(-et-tt);return(0,Ae.useEffect)(()=>{setTimeout(()=>i(tt)),n&&setTimeout(()=>i(-et-tt),rn+Ut)},[n]),(0,G.jsx)(Q,{children:(0,G.jsxs)("div",{className:(0,Jt.default)(Ne,`${Ne}-${o.type}`),style:{height:sn,right:r,width:et,top:t,transition:n?`right ${Ut}ms, top ${un}ms `:"none"},children:[(0,G.jsx)(Xt.Icon,{name:an[o.type]}),(0,G.jsxs)("div",{className:`${Ne}-toastContent`,children:[(0,G.jsx)("strong",{className:`${Ne}-toastHeader`,children:o.header}),(0,G.jsx)("div",{children:o.body})]})]})})};var me=require("react/jsx-runtime"),ln=60,pn=6e3,cn=1e3,dn=56,mn=10,Qt=({notificationsContext:e})=>{let[t,o]=(0,De.useState)([]);return(0,De.useMemo)(()=>{e.setNotify(n=>{let r={...n,id:(0,Yt.getUniqueId)()};o(i=>i.concat(r)),setTimeout(()=>{o(i=>i.filter(u=>u!==r))},pn+cn*2)})},[e]),(0,me.jsx)(me.Fragment,{children:t.map((n,r)=>(0,me.jsx)(ot,{top:ln+(dn+mn)*r,notification:n},n.id))})};var Se=require("react/jsx-runtime"),nt=class{constructor(){this.notify=()=>"have you forgotten to provide a NotificationsCenter?";this.setNotify=t=>{this.notify=t}}},rt=fe.default.createContext(new nt),fn=e=>{let t=(0,fe.useContext)(rt);return(0,Se.jsxs)(rt.Provider,{value:t,children:[(0,Se.jsx)(Qt,{notificationsContext:t}),e.children]})},gn=()=>{let{notify:e}=(0,fe.useContext)(rt);return e};
+'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');
+var MenuList = require('./menu/MenuList.js');
+var contextMenuProvider = require('./menu/context-menu-provider.js');
+var useContextMenu = require('./menu/useContextMenu.js');
+var popupService = require('./popup/popup-service.js');
+var Popup = require('./popup/Popup.js');
+var useAnchoredPosition = require('./popup/useAnchoredPosition.js');
+var PopupMenu = require('./popup-menu/PopupMenu.js');
+var Portal = require('./portal/Portal.js');
+var renderPortal = require('./portal-deprecated/render-portal.js');
+var Prompt = require('./prompt/Prompt.js');
+var Tooltip = require('./tooltip/Tooltip.js');
+var useTooltip = require('./tooltip/useTooltip.js');
+var NotificationsProvider = require('./notifications/NotificationsProvider.js');
+var ToastNotification = require('./notifications/ToastNotification.js');
+
+
+
+exports.Dialog = Dialog.Dialog;
+exports.useDialog = useDialog.useDialog;
+exports.DialogHeader = DialogHeader.DialogHeader;
+exports.ContextMenu = ContextMenu.ContextMenu;
+exports.MenuItem = MenuList.MenuItem;
+exports.MenuItemGroup = MenuList.MenuItemGroup;
+exports.MenuList = MenuList.MenuList;
+exports.Separator = MenuList.Separator;
+exports.isMenuItemGroup = MenuList.isMenuItemGroup;
+exports.isMenuItemLabel = MenuList.isMenuItemLabel;
+exports.ContextMenuContext = contextMenuProvider.ContextMenuContext;
+exports.ContextMenuProvider = contextMenuProvider.ContextMenuProvider;
+exports.useContextMenu = useContextMenu.useContextMenu;
+exports.DialogService = popupService.DialogService;
+exports.PopupService = popupService.PopupService;
+exports.reasonIsClickAway = popupService.reasonIsClickAway;
+exports.reasonIsMenuAction = popupService.reasonIsMenuAction;
+exports.PopupComponent = Popup.PopupComponent;
+exports.useAnchoredPosition = useAnchoredPosition.useAnchoredPosition;
+exports.PopupMenu = PopupMenu.PopupMenu;
+exports.Portal = Portal.Portal;
+exports.createContainer = renderPortal.createContainer;
+exports.renderPortal = renderPortal.renderPortal;
+exports.Prompt = Prompt.Prompt;
+exports.Tooltip = Tooltip.Tooltip;
+exports.useTooltip = useTooltip.useTooltip;
+exports.NotificationsProvider = NotificationsProvider.NotificationsProvider;
+exports.useNotifications = NotificationsProvider.useNotifications;
+exports.ToastNotification = ToastNotification.ToastNotification;
 //# sourceMappingURL=index.js.map