@vuu-ui/vuu-popups 0.8.10-debug → 0.8.11-debug

package/cjs/index.js

@@ -34,114 +34,116 @@ __export(src_exports, {
   ContextMenuContext: () => ContextMenuContext,
   ContextMenuProvider: () => ContextMenuProvider,
   Dialog: () => Dialog,
+  DialogHeader: () => DialogHeader,
   DialogService: () => DialogService,
   MenuItem: () => MenuItem,
   MenuItemGroup: () => MenuItemGroup,
   MenuList: () => MenuList,
-  Popup: () => Popup,
-  PopupComponent: () => PopupComponent2,
+  NotificationLevel: () => NotificationLevel,
+  NotificationsContext: () => NotificationsContext,
+  NotificationsProvider: () => NotificationsProvider,
+  PopupComponent: () => PopupComponent,
   PopupMenu: () => PopupMenu,
   PopupService: () => PopupService,
-  Portal: () => Portal2,
-  PortalDeprecated: () => PortalDeprecated,
+  Portal: () => Portal,
   Prompt: () => Prompt,
   Separator: () => Separator,
+  ToastNotification: () => ToastNotification,
   Tooltip: () => Tooltip,
   createContainer: () => createContainer,
-  installTheme: () => installTheme,
   isMenuItemLabel: () => isMenuItemLabel,
   reasonIsClickAway: () => reasonIsClickAway,
   reasonIsMenuAction: () => reasonIsMenuAction,
   renderPortal: () => renderPortal,
   useAnchoredPosition: () => useAnchoredPosition,
   useContextMenu: () => useContextMenu,
+  useNotifications: () => useNotifications,
   useTooltip: () => useTooltip
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/dialog/Dialog.tsx
 var import_lab = require("@salt-ds/lab");
-var import_core = require("@salt-ds/core");
-var import_classnames3 = __toESM(require("classnames"));
+var import_classnames2 = __toESM(require("classnames"));
 var import_react2 = require("react");
 
-// src/portal-deprecated/PortalDeprecated.tsx
-var import_react = require("react");
-var ReactDOM2 = __toESM(require("react-dom"));
-
-// src/portal-deprecated/render-portal.tsx
-var ReactDOM = __toESM(require("react-dom"));
-var import_classnames = __toESM(require("classnames"));
-var containerId = 1;
-var getPortalContainer = ({
-  className,
-  dataMode,
-  x = 0,
-  y = 0,
-  win = window
-}) => {
-  const el = win.document.createElement("div");
-  el.className = (0, import_classnames.default)(`vuuPopup ${containerId++}`, className);
-  el.style.cssText = `left:${x}px; top:${y}px;`;
-  if (dataMode) {
-    el.dataset.mode = dataMode;
-  }
-  win.document.body.appendChild(el);
-  return el;
-};
-var createContainer = (props) => getPortalContainer(props);
-var renderPortal = (component, container, x, y, onRender) => {
-  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
-  ReactDOM.render(component, container, onRender);
-};
-
-// src/portal-deprecated/PortalDeprecated.tsx
+// src/portal/Portal.tsx
 var import_vuu_shell = require("@vuu-ui/vuu-shell");
-var import_classnames2 = __toESM(require("classnames"));
-var PortalDeprecated = function Portal({
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = "vuu-portal-root";
+var Portal = ({
   children,
-  x = 0,
-  y = 0,
-  onRender
-}) {
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell.useThemeAttributes)();
-  const renderContainer = (0, import_react.useMemo)(() => {
-    return createContainer({
-      className: (0, import_classnames2.default)(themeClass, densityClass),
-      dataMode
-    });
-  }, [dataMode, densityClass, themeClass]);
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const portalRef = (0, import_react.useRef)(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell.useThemeAttributes)(themeAttributes);
   (0, import_react.useLayoutEffect)(() => {
-    renderPortal(children, renderContainer, x, y, onRender);
-  }, [children, onRender, renderContainer, x, y]);
+    const root = document.getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = id;
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    el.classList.add(themeClass, densityClass);
+    el.dataset.mode = dataMode;
+    setMounted(true);
+  }, [id, container, themeClass, densityClass, dataMode]);
   (0, import_react.useLayoutEffect)(() => {
-    return () => {
-      var _a;
-      if (renderContainer) {
-        ReactDOM2.unmountComponentAtNode(renderContainer);
-        if (renderContainer.classList.contains("vuuPopup")) {
-          (_a = renderContainer.parentElement) == null ? void 0 : _a.removeChild(renderContainer);
-        }
-      }
-    };
-  }, [renderContainer]);
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return (0, import_react_dom.createPortal)(children, portalRef.current);
+  }
   return null;
 };
 
-// src/portal-deprecated/portal-utils.ts
-var installTheme = (themeId) => {
-  const installedThemes = getComputedStyle(document.body).getPropertyValue(
-    "--installed-themes"
-  );
-  document.body.style.setProperty(
-    "--installed-themes",
-    `${installedThemes} ${themeId}`
-  );
+// src/dialog-header/DialogHeader.tsx
+var import_core = require("@salt-ds/core");
+var import_classnames = __toESM(require("classnames"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var classBase = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames.default)(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core.Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
 };
 
 // src/dialog/Dialog.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var classBase = "vuuDialog";
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var classBase2 = "vuuDialog";
 var Dialog = ({
   children,
   className,
@@ -152,29 +154,21 @@ var Dialog = ({
   ...props
 }) => {
   const root = (0, import_react2.useRef)(null);
-  const [posX] = (0, import_react2.useState)(0);
-  const [posY] = (0, import_react2.useState)(0);
   const close = (0, import_react2.useCallback)(() => {
     onClose == null ? void 0 : onClose();
   }, [onClose]);
-  const handleRender = (0, import_react2.useCallback)(() => {
-  }, []);
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalDeprecated, { onRender: handleRender, x: posX, y: posY, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lab.Scrim, { className: `${classBase}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...props, className: (0, import_classnames3.default)(classBase, className), ref: root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_classnames3.default)("vuuToolbarProxy", `${classBase}-header`), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { className: "dialogHeader", children: title }),
-      !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_core.Button,
-        {
-          onClick: close,
-          "data-align": "end",
-          "data-icon": "close"
-        },
-        "close"
-      )
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lab.Scrim, { className: `${classBase2}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...props, className: (0, import_classnames2.default)(classBase2, className), ref: root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      DialogHeader,
+      {
+        hideCloseButton,
+        onClose: close,
+        title
+      }
+    ),
     children
   ] }) }) });
 };
@@ -184,7 +178,7 @@ var import_react7 = require("react");
 
 // src/menu/MenuList.tsx
 var import_react5 = __toESM(require("react"));
-var import_classnames4 = __toESM(require("classnames"));
+var import_classnames3 = __toESM(require("classnames"));
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 
 // src/menu/use-keyboard-navigation.ts
@@ -194,7 +188,7 @@ var import_react3 = require("react");
 var isRoot = (el) => el.closest(`[data-root='true']`) !== null;
 var hasPopup = (el, idx) => {
   var _a;
-  return el.ariaHasPopup === "true" && ((_a = el.dataset) == null ? void 0 : _a.idx) === `${idx}` || el.querySelector(`:scope > [data-idx='${idx}'][aria-haspopup='true']`) !== null;
+  return el.ariaHasPopup === "true" && ((_a = el.dataset) == null ? void 0 : _a.idx) === `${idx}` || el.querySelector(`:scope > [data-index='${idx}'][aria-haspopup='true']`) !== null;
 };
 
 // src/menu/key-code.ts
@@ -311,10 +305,10 @@ var useKeyboardNavigation = ({
       } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
         const menuEl = e.target;
         const menuItemEl = menuEl.querySelector(
-          `:scope > [data-idx='${highlightedIndex}']`
+          `:scope > [data-index='${highlightedIndex}']`
         );
         if (menuItemEl) {
-          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl);
+          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
         }
       } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
         onCloseMenu(highlightedIndex);
@@ -454,14 +448,19 @@ var useItemsWithIdsNext = (childrenProp, rootId) => {
 };
 
 // src/menu/MenuList.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase2 = "vuuMenuList";
-var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "vuuMenuItem-divider" });
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "vuuMenuItem-divider" });
 var MenuItemGroup = () => null;
-var MenuItem = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ...props, children });
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...props, children });
 };
-var MenuItemLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
 MenuItemLabel.displayName = "MenuItemLabel";
 MenuItem.Label = MenuItemLabel;
 var getDisplayName = (item) => import_react5.default.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
@@ -480,7 +479,7 @@ var MenuList = ({
   onHighlightMenuItem,
   onActivate,
   onCloseMenu,
-  onOpenMenu,
+  openMenu: onOpenMenu,
   ...props
 }) => {
   const id = (0, import_vuu_layout.useId)(idProp);
@@ -488,7 +487,7 @@ var MenuList = ({
   const mapIdxToId = (0, import_react5.useMemo)(() => /* @__PURE__ */ new Map(), []);
   const handleActivate = (idx) => {
     var _a;
-    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-idx='${idx}']`);
+    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-index='${idx}']`);
     (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
   };
   const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
@@ -514,7 +513,7 @@ var MenuList = ({
       role: "menuitem"
     };
     const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
         {
           className: "vuuIconContainer",
@@ -538,7 +537,7 @@ var MenuList = ({
       const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
       const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
       list.push(
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           MenuItem,
           {
             ...props2,
@@ -569,14 +568,14 @@ var MenuList = ({
     }
     return listItems;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       ...props,
       ...listProps,
       "aria-activedescendant": getActiveDescendant(),
-      className: (0, import_classnames4.default)(classBase2, className, {
-        [`${classBase2}-childMenuShowing`]: childMenuShowing !== void 0
+      className: (0, import_classnames3.default)(classBase3, className, {
+        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
       }),
       "data-root": isRoot2 || void 0,
       id,
@@ -589,9 +588,9 @@ var MenuList = ({
 var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
   id: `menuitem-${itemId}`,
   key: key != null ? key : idx,
-  "data-idx": idx,
+  "data-index": idx,
   "data-highlighted": idx === highlightedIdx || void 0,
-  className: (0, import_classnames4.default)("vuuMenuItem", className, {
+  className: (0, import_classnames3.default)("vuuMenuItem", className, {
     "vuuMenuItem-separator": hasSeparator,
     focusVisible: focusVisible === idx
   })
@@ -602,7 +601,7 @@ MenuList.displayName = "MenuList";
 var import_react6 = require("react");
 
 // src/menu/list-dom-utils.ts
-var closestListItem = (el) => el == null ? void 0 : el.closest("[data-idx],[aria-posinset]");
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[aria-posinset]");
 
 // src/menu/use-cascade.ts
 var nudge = (menus, distance, pos) => {
@@ -635,8 +634,13 @@ var getPosition = (el, openMenus) => {
   return { left: left + width, top: top + menuTop };
 };
 var getHostMenuId = (id, rootId) => {
+  console.log(`getHostMenuId from ${id} and ${rootId}`);
   const pos = id.lastIndexOf("-");
-  return pos > -1 ? id.slice(9, pos) : rootId;
+  if (id.startsWith("menuitem")) {
+    return pos > -1 ? id.slice(9, pos) : rootId;
+  } else {
+    return pos > -1 ? id.slice(0, pos) : rootId;
+  }
 };
 var getTargetMenuId = (id) => id.slice(9);
 var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
@@ -674,6 +678,9 @@ var useCascade = ({
     return state;
   }, []);
   const setOpenMenus = (0, import_react6.useCallback)((menus) => {
+    console.log(`setOpenMenus`, {
+      menus
+    });
     openMenus.current = menus;
     forceRefresh({});
   }, []);
@@ -682,9 +689,13 @@ var useCascade = ({
   const menuState = (0, import_react6.useRef)({ [rootId]: "no-popup" });
   const openMenu = (0, import_react6.useCallback)(
     (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      console.log(
+        `open menu hostMenuId ${hostMenuId} targetMenuId ${targetMenuId} itemId ${itemId}`
+      );
       if (hostMenuId === rootId && itemId === null) {
         setOpenMenus([{ id: rootId, left: posX, top: posY }]);
       } else {
+        console.log(`openMenu set ${hostMenuId} status to popup-open`);
         menuState.current[hostMenuId] = "popup-open";
         const el = document.getElementById(itemId);
         if (el !== null) {
@@ -701,7 +712,9 @@ var useCascade = ({
   );
   const closeMenu = (0, import_react6.useCallback)(
     (menuId) => {
+      console.log(`closeMenu ${menuId}`);
       if (menuId === rootId) {
+        console.log("close child menu of root");
         setOpenMenus([]);
       } else {
         const menus = openMenus.current.slice();
@@ -711,6 +724,9 @@ var useCascade = ({
         if (parentMenu) {
           menuState.current[parentMenu.id] = "no-popup";
         }
+        console.log(`closeMenu setOpenMenus`, {
+          menus
+        });
         setOpenMenus(menus);
       }
     },
@@ -718,17 +734,27 @@ var useCascade = ({
   );
   const closeMenus = (0, import_react6.useCallback)(
     (menuItemId) => {
+      console.log(`closeMenus ${menuItemId}`);
       const menus = openMenus.current.slice();
       const menuItemMenuId = menuItemId.slice(9);
       let { id: lastMenuId } = menus.at(-1);
       while (menus.length > 1 && !menuItemMenuId.startsWith(lastMenuId)) {
         const parentMenuId = getHostMenuId(lastMenuId, rootId);
+        console.log(
+          `parentMenuId of lastMenuId ${lastMenuId} and rootId ${rootId} is ${parentMenuId}`
+        );
         menus.pop();
+        console.log(
+          `set state to no-popup for ${lastMenuId} and ${parentMenuId}`
+        );
         menuState.current[lastMenuId] = "no-popup";
         menuState.current[parentMenuId] = "no-popup";
         ({ id: lastMenuId } = menus[menus.length - 1]);
       }
       if (menus.length < openMenus.current.length) {
+        console.log(`closeMenus setOpenMenus`, {
+          menus
+        });
         setOpenMenus(menus);
       }
     },
@@ -741,14 +767,14 @@ var useCascade = ({
     }
   }, []);
   const scheduleOpen = (0, import_react6.useCallback)(
-    (hostMenuId, targetMenuId, menuItemId) => {
+    (hostMenuId, targetMenuId, menuItemId, delay = 300) => {
       clearAnyScheduledOpenTasks();
       menuOpenPendingTimeout.current = window.setTimeout(() => {
         closeMenus(menuItemId);
         menuState.current[hostMenuId] = "popup-open";
         menuState.current[targetMenuId] = "no-popup";
         openMenu(hostMenuId, targetMenuId, menuItemId);
-      }, 400);
+      }, delay);
     },
     [clearAnyScheduledOpenTasks, closeMenus, openMenu]
   );
@@ -763,8 +789,8 @@ var useCascade = ({
   );
   const handleRender = (0, import_react6.useCallback)(() => {
     const { current: menus } = openMenus;
-    const [menu] = menus.slice(-1);
-    const el = document.getElementById(menu.id);
+    const menu = menus.at(-1);
+    const el = menu ? document.getElementById(menu.id) : void 0;
     if (el) {
       const { right, bottom } = el.getBoundingClientRect();
       const { clientHeight, clientWidth } = document.body;
@@ -779,25 +805,26 @@ var useCascade = ({
         el.focus();
       }
     } else {
-      console.log(`no element found with if ${menu.id}`);
+      console.log(`useCascade no element found with if ${menu == null ? void 0 : menu.id}`);
     }
   }, [rootId, setOpenMenus]);
   const triggerChildMenu = (0, import_react6.useCallback)(
-    (menuItemEl) => {
+    (menuItemEl, immediate = false) => {
       const { hostMenuId, targetMenuId, menuItemId, isGroup, isOpen } = getMenuItemDetails(menuItemEl, rootId);
       const {
         current: { [hostMenuId]: state }
       } = menuState;
+      const delay = immediate ? 0 : void 0;
       if (state === "no-popup" && isGroup) {
         menuState.current[hostMenuId] = "popup-pending";
-        scheduleOpen(hostMenuId, targetMenuId, menuItemId);
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
       } else if (state === "popup-pending" && !isGroup) {
         menuState.current[hostMenuId] = "no-popup";
         clearTimeout(menuOpenPendingTimeout.current);
         menuOpenPendingTimeout.current = void 0;
       } else if (state === "popup-pending" && isGroup) {
         clearTimeout(menuOpenPendingTimeout.current);
-        scheduleOpen(hostMenuId, targetMenuId, menuItemId);
+        scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
       } else if (state === "popup-open") {
         if (menuIsOpen(targetMenuId)) {
           const menuStatus = getOpenMenuStatus(targetMenuId);
@@ -813,15 +840,20 @@ var useCascade = ({
           }
         } else {
           const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
+          console.log(`about to check id on `, {
+            openMenus,
+            parentOfLastOpenedMenu,
+            lastOpenedMenu
+          });
           if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
             scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
             if (isGroup && !isOpen) {
-              scheduleOpen(hostMenuId, targetMenuId, menuItemId);
+              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
             }
           } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
-            scheduleOpen(hostMenuId, targetMenuId, menuItemId);
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
           } else if (isGroup) {
-            scheduleOpen(hostMenuId, targetMenuId, menuItemId);
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
           } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
             closeMenus(menuItemId);
           }
@@ -848,10 +880,12 @@ var useCascade = ({
     () => ({
       onMouseEnter: (evt) => {
         const menuItemEl = closestListItem(evt.target);
+        console.log(`onMouseEnter ${menuItemEl == null ? void 0 : menuItemEl.id}`);
         triggerChildMenu(menuItemEl);
         onMouseEnterItem(evt, menuItemEl.id);
       },
       onClick: (evt) => {
+        console.log("click");
         const listItemEl = closestListItem(evt.target);
         const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
         if (isGroup) {
@@ -874,10 +908,11 @@ var useCascade = ({
 
 // src/menu/ContextMenu.tsx
 var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var import_react8 = require("react");
 var noop = () => void 0;
 var ContextMenu = ({
+  PortalProps: PortalProps2,
   activatedByKeyboard,
   children: childrenProp,
   className,
@@ -909,7 +944,13 @@ var ContextMenu = ({
     },
     [actions, id, onClose]
   );
-  const { closeMenu, listItemProps, openMenu, openMenus, handleRender } = useCascade({
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade({
     // FIXME
     id: `${id}`,
     onActivate: handleActivate,
@@ -932,35 +973,43 @@ var ContextMenu = ({
       return id2;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
     const childMenuId = getChildMenuId(i);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalDeprecated, { x: left, y: top, onRender: handleRender, children: /* @__PURE__ */ (0, import_react8.createElement)(
-      MenuList,
+    return /* @__PURE__ */ (0, import_react8.createElement)(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      PopupComponent,
       {
-        ...menuListProps,
-        activatedByKeyboard: navigatingWithKeyboard.current,
-        childMenuShowing: childMenuId,
-        className,
-        id: menuId,
-        isRoot: i === 0,
-        key: i,
-        listItemProps,
-        onActivate: handleActivate,
-        onHighlightMenuItem: handleHighlightMenuItem,
-        onCloseMenu: handleCloseMenu,
-        onOpenMenu: openMenu,
-        style,
-        tabIndex: i === all.length - 1 ? 0 : void 0
-      },
-      menus[menuId]
-    ) }, i);
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ (0, import_react8.createElement)(
+          MenuList,
+          {
+            ...menuListProps,
+            activatedByKeyboard: navigatingWithKeyboard.current,
+            childMenuShowing: childMenuId,
+            className,
+            id: menuId,
+            isRoot: i === 0,
+            key: i,
+            listItemProps,
+            onActivate: handleActivate,
+            onHighlightMenuItem: handleHighlightMenuItem,
+            onCloseMenu: handleCloseMenu,
+            openMenu: onOpenMenu,
+            style,
+            tabIndex: i === all.length - 1 ? 0 : void 0
+          },
+          menus[menuId]
+        )
+      }
+    ));
   }) });
 };
 ContextMenu.displayName = "ContextMenu";
 
 // src/menu/context-menu-provider.tsx
 var import_react9 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ContextMenuContext = (0, import_react9.createContext)(
   null
 );
@@ -991,7 +1040,7 @@ var Provider = ({
     },
     [context, menuActionHandler]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     ContextMenuContext.Provider,
     {
       value: {
@@ -1008,7 +1057,7 @@ var ContextMenuProvider = ({
   menuActionHandler,
   menuBuilder
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Provider,
     {
       context: parentContext,
@@ -1021,15 +1070,41 @@ var ContextMenuProvider = ({
 };
 
 // src/menu/useContextMenu.tsx
-var import_vuu_shell3 = require("@vuu-ui/vuu-shell");
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var import_classnames7 = __toESM(require("classnames"));
 var import_react12 = require("react");
 
 // src/popup/popup-service.ts
 var import_classnames5 = __toESM(require("classnames"));
 var import_react10 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
+var import_react_dom2 = __toESM(require("react-dom"));
+
+// src/portal-deprecated/render-portal.tsx
+var ReactDOM = __toESM(require("react-dom"));
+var import_classnames4 = __toESM(require("classnames"));
+var containerId = 1;
+var getPortalContainer = ({
+  className,
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
+}) => {
+  const el = win.document.createElement("div");
+  el.className = (0, import_classnames4.default)(`vuuPopup ${containerId++}`, className);
+  el.style.cssText = `left:${x}px; top:${y}px;`;
+  if (dataMode) {
+    el.dataset.mode = dataMode;
+  }
+  win.document.body.appendChild(el);
+  return el;
+};
+var createContainer = (props) => getPortalContainer(props);
+var renderPortal = (component, container, x, y, onRender) => {
+  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
+  ReactDOM.render(component, container, onRender);
+};
+
+// src/popup/popup-service.ts
 var _dialogOpen = false;
 var _popups = [];
 var reasonIsMenuAction = (reason) => (reason == null ? void 0 : reason.type) === "menu-action";
@@ -1041,14 +1116,16 @@ function specialKeyHandler(e) {
     } else if (_dialogOpen) {
       const dialogRoot = document.body.querySelector(".vuuDialog");
       if (dialogRoot) {
-        import_react_dom.default.unmountComponentAtNode(dialogRoot);
+        import_react_dom2.default.unmountComponentAtNode(dialogRoot);
       }
     }
   }
 }
 function outsideClickHandler(e) {
   if (_popups.length) {
-    const popupContainers = document.body.querySelectorAll(".vuuPopup");
+    const popupContainers = document.body.querySelectorAll(
+      ".vuuPopup,#vuu-portal-root"
+    );
     for (let i = 0; i < popupContainers.length; i++) {
       if (popupContainers[i].contains(e.target)) {
         return;
@@ -1063,7 +1140,7 @@ function closeAllPopups(reason) {
   } else if (_popups.length) {
     const popupContainers = document.body.querySelectorAll(".vuuPopup");
     for (let i = 0; i < popupContainers.length; i++) {
-      import_react_dom.default.unmountComponentAtNode(popupContainers[i]);
+      import_react_dom2.default.unmountComponentAtNode(popupContainers[i]);
     }
     popupClosed("*");
   }
@@ -1105,7 +1182,7 @@ function popupClosed(name) {
     }
   }
 }
-var PopupComponent = ({
+var PopupComponent2 = ({
   children,
   position,
   style
@@ -1144,7 +1221,7 @@ var PopupService = class {
     const style = { width };
     renderPortal(
       (0, import_react10.createElement)(
-        PopupComponent,
+        PopupComponent2,
         { key: incrementingKey++, position, style },
         component
       ),
@@ -1167,7 +1244,7 @@ var PopupService = class {
       popupClosed(name);
       const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
       if (popupRoot) {
-        import_react_dom.default.unmountComponentAtNode(popupRoot);
+        import_react_dom2.default.unmountComponentAtNode(popupRoot);
       }
     }
     document.removeEventListener(
@@ -1209,7 +1286,7 @@ var DialogService = class {
     const containerEl = ".vuuDialog";
     const onClose = dialog.props.onClose;
     dialogOpened();
-    import_react_dom.default.render(
+    import_react_dom2.default.render(
       import_react10.default.cloneElement(dialog, {
         container: containerEl,
         onClose: () => {
@@ -1226,75 +1303,18 @@ var DialogService = class {
     dialogClosed();
     const dialogRoot = document.body.querySelector(".vuuDialog");
     if (dialogRoot) {
-      import_react_dom.default.unmountComponentAtNode(dialogRoot);
+      import_react_dom2.default.unmountComponentAtNode(dialogRoot);
     }
   }
 };
-var Popup = (props) => {
-  const pendingTask = (0, import_react10.useRef)();
-  const ref = (0, import_react10.useRef)(null);
-  const show = (props2, boundingClientRect) => {
-    const { name, group, depth, width } = props2;
-    let left;
-    let top;
-    if (pendingTask.current) {
-      window.clearTimeout(pendingTask.current);
-      pendingTask.current = void 0;
-    }
-    if (props2.close === true) {
-      PopupService.hidePopup(void 0, name, group);
-    } else {
-      const { position, children: component } = props2;
-      const {
-        left: targetLeft,
-        top: targetTop,
-        width: clientWidth,
-        bottom: targetBottom
-      } = boundingClientRect;
-      if (position === "below") {
-        left = targetLeft;
-        top = targetBottom;
-      } else if (position === "above") {
-        left = targetLeft;
-        top = targetTop;
-      }
-      pendingTask.current = window.setTimeout(() => {
-        PopupService.showPopup({
-          name,
-          group,
-          depth,
-          position,
-          left,
-          top,
-          width: width || clientWidth,
-          component
-        });
-      }, 10);
-    }
-  };
-  (0, import_react10.useEffect)(() => {
-    if (ref.current) {
-      const el = ref.current.parentElement;
-      const boundingClientRect = el == null ? void 0 : el.getBoundingClientRect();
-      if (boundingClientRect) {
-        show(props, boundingClientRect);
-      }
-    }
-    return () => {
-      PopupService.hidePopup(void 0, props.name, props.group);
-    };
-  }, [props]);
-  return import_react10.default.createElement("div", { className: "popup-proxy", ref });
-};
 
 // src/popup/Popup.tsx
 var import_classnames6 = __toESM(require("classnames"));
-var import_vuu_shell2 = require("@vuu-ui/vuu-shell");
 
 // src/popup/useAnchoredPosition.ts
 var import_react11 = require("react");
-var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop) => {
-  const { bottom, left, right, top, width } = anchorElement.getBoundingClientRect();
+var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop, minWidth, dimensions) => {
+  const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
   switch (placement) {
     case "below":
       return { left: left + offsetLeft, top: bottom + offsetTop };
@@ -1303,7 +1323,26 @@ var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetT
     case "below-center":
       return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
     case "below-full-width":
-      return { left: left + offsetLeft, top: bottom + offsetTop, width };
+      return {
+        left: left + offsetLeft,
+        minWidth,
+        top: bottom + offsetTop,
+        width
+      };
+    case "center":
+      if (dimensions) {
+        return {
+          left: width / 2 - dimensions.width / 2 + offsetLeft,
+          top: height / 2 - dimensions.height / 2 + offsetTop,
+          visibility: "visible"
+        };
+      } else {
+        return {
+          left: width / 2 + offsetLeft,
+          top: height / 2 + offsetTop,
+          visibility: "hidden"
+        };
+      }
     default:
       throw Error(
         "Popup getPositionRelativeToAnchor only supported placement values are below and right"
@@ -1312,51 +1351,88 @@ var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetT
 };
 var useAnchoredPosition = ({
   anchorElement,
+  minWidth,
   offsetLeft = 0,
   offsetTop = 0,
-  placement
+  placement,
+  position: positionProp
 }) => {
-  const [position, setPosition] = (0, import_react11.useState)();
+  const popupRef = (0, import_react11.useRef)(null);
+  const [position, setPosition] = (0, import_react11.useState)(positionProp);
   (0, import_react11.useLayoutEffect)(() => {
-    if (anchorElement.current) {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current) {
+      const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
       const position2 = getPositionRelativeToAnchor(
         anchorElement.current,
         placement,
         offsetLeft,
-        offsetTop
+        offsetTop,
+        minWidth,
+        dimensions
       );
       setPosition(position2);
     }
-  }, [anchorElement, offsetLeft, offsetTop, placement]);
-  return position;
+  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
+  const popupCallbackRef = (0, import_react11.useCallback)(
+    (el) => {
+      popupRef.current = el;
+      if (el && placement === "center" && anchorElement.current) {
+        const { height, width } = el.getBoundingClientRect();
+        setPosition(
+          getPositionRelativeToAnchor(
+            anchorElement.current,
+            placement,
+            offsetLeft,
+            offsetTop,
+            void 0,
+            { height, width }
+          )
+        );
+      }
+    },
+    [anchorElement, offsetLeft, offsetTop, placement]
+  );
+  return {
+    position,
+    popupRef: placement === "center" ? popupCallbackRef : void 0
+  };
 };
 
 // src/popup/Popup.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PopupComponent2 = ({
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PopupComponent = ({
   children,
   className,
   anchorElement,
-  placement
+  minWidth,
+  placement,
+  position: positionProp
 }) => {
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell2.useThemeAttributes)();
-  const position = useAnchoredPosition({ anchorElement, placement });
-  return position === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      className: (0, import_classnames6.default)(`vuuPortal`, className, themeClass, densityClass),
-      "data-mode": dataMode,
-      style: position,
-      children
-    }
-  );
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    placement,
+    position: positionProp
+  });
+  return position === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames6.default)(`vuuPortal`, className), ref: popupRef, style: position, children });
 };
 
 // src/menu/useContextMenu.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_vuu_shell2 = require("@vuu-ui/vuu-shell");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var useContextMenu = (menuBuilder, menuActionHandler) => {
   const ctx = (0, import_react12.useContext)(ContextMenuContext);
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell3.useThemeAttributes)();
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell2.useThemeAttributes)();
+  const themeAttributes = (0, import_react12.useMemo)(
+    () => ({
+      themeClass,
+      densityClass,
+      dataMode
+    }),
+    [dataMode, densityClass, themeClass]
+  );
   const buildMenuOptions = (0, import_react12.useCallback)(
     (menuBuilders, location, options) => {
       let results = [];
@@ -1403,13 +1479,10 @@ var useContextMenu = (menuBuilder, menuActionHandler) => {
         };
         if (menuItemDescriptors.length && menuHandler) {
           showContextMenu(e, menuItemDescriptors, menuHandler, {
-            ...ContextMenuProps2,
-            className: (0, import_classnames7.default)(
-              ContextMenuProps2 == null ? void 0 : ContextMenuProps2.className,
-              themeClass,
-              densityClass
-            ),
-            "data-mode": dataMode
+            PortalProps: {
+              themeAttributes
+            },
+            ...ContextMenuProps2
           });
         }
       } else {
@@ -1418,18 +1491,10 @@ var useContextMenu = (menuBuilder, menuActionHandler) => {
         );
       }
     },
-    [
-      buildMenuOptions,
-      ctx,
-      dataMode,
-      densityClass,
-      menuActionHandler,
-      menuBuilder,
-      themeClass
-    ]
+    [buildMenuOptions, ctx, menuActionHandler, menuBuilder, themeAttributes]
   );
   const hideContextMenu = (0, import_react12.useCallback)(() => {
-    console.log("hide comnytext menu");
+    console.log("hide context menu");
   }, []);
   return [handleShowContextMenu, hideContextMenu];
 };
@@ -1447,7 +1512,7 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
   ...contextMenuProps
 } = NO_OPTIONS) => {
   const menuItems = (menuDescriptors2) => {
-    const fromDescriptor = (menuItem, i) => (0, import_vuu_utils2.isGroupMenuItemDescriptor)(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    const fromDescriptor = (menuItem, i) => (0, import_vuu_utils2.isGroupMenuItemDescriptor)(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       MenuItem,
       {
         action: menuItem.action,
@@ -1472,11 +1537,10 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
     x: e.clientX,
     y: e.clientY
   };
-  const component = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const component = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ContextMenu,
     {
       ...contextMenuProps,
-      className: "vuuContextMenu",
       onClose: handleClose,
       position,
       children: menuItems(menuDescriptors)
@@ -1487,11 +1551,11 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
 
 // src/popup-menu/PopupMenu.tsx
 var import_react13 = require("react");
-var import_classnames8 = __toESM(require("classnames"));
+var import_classnames7 = __toESM(require("classnames"));
 var import_core2 = require("@salt-ds/core");
 var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase3 = "vuuPopupMenu";
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase4 = "vuuPopupMenu";
 var getPosition2 = (element) => {
   if (element) {
     const { bottom, left } = element.getBoundingClientRect();
@@ -1516,6 +1580,11 @@ var PopupMenu = ({
   const [menuOpen, setMenuOpen] = (0, import_react13.useState)(false);
   const id = (0, import_vuu_layout3.useId)(idProp);
   const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
+  const handleOpenMenu = (0, import_react13.useCallback)((el) => {
+    console.log(`menu Open `, {
+      el
+    });
+  }, []);
   const handleMenuClose = (0, import_react13.useCallback)(
     (reason) => {
       setMenuOpen(false);
@@ -1544,27 +1613,34 @@ var PopupMenu = ({
         setMenuOpen(true);
         showContextMenu2(e, menuLocation, {
           ContextMenuProps: {
-            className: "vuuPopupMenuList",
             id: `${id}-menu`,
             onClose: handleMenuClose,
+            openMenu: handleOpenMenu,
             position: getPosition2(rootRef.current)
           },
           ...menuOptions
         });
       }
     },
-    [handleMenuClose, id, menuLocation, menuOptions, showContextMenu2]
+    [
+      handleMenuClose,
+      handleOpenMenu,
+      id,
+      menuLocation,
+      menuOptions,
+      showContextMenu2
+    ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_core2.Button,
     {
       ...htmlAttributes,
       "aria-controls": `${id}-menu-root`,
       "aria-expanded": menuOpen,
       "aria-haspopup": "menu",
-      className: (0, import_classnames8.default)(classBase3, className, {
-        [`${classBase3}-withCaption`]: label !== void 0,
-        [`${classBase3}-open`]: menuOpen
+      className: (0, import_classnames7.default)(classBase4, className, {
+        [`${classBase4}-withCaption`]: label !== void 0,
+        [`${classBase4}-open`]: menuOpen
       }),
       "data-icon": icon,
       id,
@@ -1577,54 +1653,13 @@ var PopupMenu = ({
   );
 };
 
-// src/portal/Portal.tsx
-var import_vuu_shell4 = require("@vuu-ui/vuu-shell");
-var import_react14 = require("react");
-var import_react_dom2 = require("react-dom");
-function getContainer(container) {
-  return typeof container === "function" ? container() : container;
-}
-var DEFAULT_ID = "vuu-portal-root";
-var Portal2 = ({
-  children,
-  container: containerProp = document.body,
-  id = DEFAULT_ID,
-  open = true
-}) => {
-  var _a;
-  const [mounted, setMounted] = (0, import_react14.useState)(false);
-  const portalRef = (0, import_react14.useRef)(null);
-  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell4.useThemeAttributes)();
-  (0, import_react14.useLayoutEffect)(() => {
-    const root = document.getElementById(id);
-    if (root) {
-      portalRef.current = root;
-    } else {
-      portalRef.current = document.createElement("div");
-      portalRef.current.id = id;
-    }
-    const el = portalRef.current;
-    if (!container.contains(el)) {
-      container.appendChild(el);
-    }
-    el.classList.add(themeClass, densityClass);
-    el.dataset.mode = dataMode;
-    setMounted(true);
-  }, [id, container, themeClass, densityClass, dataMode]);
-  if (open && mounted && portalRef.current && children) {
-    return (0, import_react_dom2.createPortal)(children, portalRef.current);
-  }
-  return null;
-};
-
 // src/prompt/Prompt.tsx
-var import_vuu_shell5 = require("@vuu-ui/vuu-shell");
+var import_vuu_shell3 = require("@vuu-ui/vuu-shell");
 var import_core3 = require("@salt-ds/core");
-var import_classnames9 = __toESM(require("classnames"));
-var import_react15 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase4 = "vuuPrompt";
+var import_classnames8 = __toESM(require("classnames"));
+var import_react14 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase5 = "vuuPrompt";
 var AnchorBody = { current: document.body };
 var EMPTY_PROPS = {};
 var Prompt = ({
@@ -1646,16 +1681,16 @@ var Prompt = ({
     offsetTop = 0,
     placement = "below"
   } = PopupProps;
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell5.useThemeAttributes)();
-  const position = useAnchoredPosition({
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell3.useThemeAttributes)();
+  const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
     offsetTop,
     placement
   });
-  const rootRef = (0, import_react15.useRef)(null);
-  const confirmRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useLayoutEffect)(() => {
+  const rootRef = (0, import_react14.useRef)(null);
+  const confirmRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useLayoutEffect)(() => {
     if (rootRef.current) {
       rootRef.current.showModal();
       if (confirmRef.current) {
@@ -1667,20 +1702,20 @@ var Prompt = ({
       }
     }
   }, [placement]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "dialog",
     {
       ...htmlAttributes,
-      className: (0, import_classnames9.default)(classBase4, `${classBase4}-${variant}`, themeClass),
+      className: (0, import_classnames8.default)(classBase5, `${classBase5}-${variant}`, themeClass),
       "data-mode": dataMode,
       ref: rootRef,
       style: { ...style, ...position },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { className: `${classBase4}-form`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase4}-header`, "data-icon": icon, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase4}-text`, children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${classBase4}-buttonBar`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.Button, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core3.Button, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("form", { className: `${classBase5}-form`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `${classBase5}-text`, children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-buttonBar`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.Button, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
         ] })
       ] })
     }
@@ -1688,7 +1723,7 @@ var Prompt = ({
 };
 
 // src/tooltip/useAnchoredPosition.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var getPositionRelativeToAnchor2 = (anchorElement, placement, offsetLeft, offsetTop) => {
   const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
   const midX = left + width / 2;
@@ -1714,8 +1749,8 @@ var useAnchoredPosition2 = ({
   offsetTop = 0,
   placement
 }) => {
-  const [position, setPosition] = (0, import_react16.useState)();
-  (0, import_react16.useLayoutEffect)(() => {
+  const [position, setPosition] = (0, import_react15.useState)();
+  (0, import_react15.useLayoutEffect)(() => {
     if (anchorElement.current) {
       const position2 = getPositionRelativeToAnchor2(
         anchorElement.current,
@@ -1730,8 +1765,8 @@ var useAnchoredPosition2 = ({
 };
 
 // src/tooltip/Tooltip.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase5 = "vuuTooltip";
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase6 = "vuuTooltip";
 var Tooltip = ({
   anchorElement,
   children,
@@ -1744,17 +1779,17 @@ var Tooltip = ({
   if (position === void 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Portal2, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
-      className: classBase5,
+      className: classBase6,
       "data-align": placement,
       id,
       style: position,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "span",
         {
-          className: `${classBase5}-content`,
+          className: `${classBase6}-content`,
           onMouseEnter,
           onMouseLeave,
           children
@@ -1765,37 +1800,37 @@ var Tooltip = ({
 };
 
 // src/tooltip/useTooltip.ts
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 var useTooltip = ({
   id: idProp,
   placement = "right",
   tooltipContent
 }) => {
-  const hideTooltipRef = (0, import_react17.useRef)();
-  const anchorElementRef = (0, import_react17.useRef)(null);
-  const mouseEnterTimerRef = (0, import_react17.useRef)();
-  const mouseLeaveTimerRef = (0, import_react17.useRef)();
-  const [tooltipProps, setTooltipProps] = (0, import_react17.useState)();
+  const hideTooltipRef = (0, import_react16.useRef)();
+  const anchorElementRef = (0, import_react16.useRef)(null);
+  const mouseEnterTimerRef = (0, import_react16.useRef)();
+  const mouseLeaveTimerRef = (0, import_react16.useRef)();
+  const [tooltipProps, setTooltipProps] = (0, import_react16.useState)();
   const id = (0, import_vuu_layout4.useId)(idProp);
-  const escapeListener = (0, import_react17.useCallback)((evt) => {
+  const escapeListener = (0, import_react16.useCallback)((evt) => {
     var _a;
     if (evt.key === "Escape") {
       (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
     }
   }, []);
-  hideTooltipRef.current = (0, import_react17.useCallback)(() => {
+  hideTooltipRef.current = (0, import_react16.useCallback)(() => {
     setTooltipProps(void 0);
     document.removeEventListener("keydown", escapeListener);
   }, [escapeListener]);
-  const handleMouseEnterTooltip = (0, import_react17.useCallback)(() => {
+  const handleMouseEnterTooltip = (0, import_react16.useCallback)(() => {
     window.clearTimeout(mouseLeaveTimerRef.current);
   }, []);
-  const handleMouseLeaveTooltip = (0, import_react17.useCallback)(() => {
+  const handleMouseLeaveTooltip = (0, import_react16.useCallback)(() => {
     var _a;
     (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
   }, []);
-  const showTooltip = (0, import_react17.useCallback)(() => {
+  const showTooltip = (0, import_react16.useCallback)(() => {
     const { current: anchorEl } = anchorElementRef;
     if (anchorEl) {
       setTooltipProps({
@@ -1817,7 +1852,7 @@ var useTooltip = ({
     placement,
     tooltipContent
   ]);
-  const handleMouseEnter = (0, import_react17.useCallback)(
+  const handleMouseEnter = (0, import_react16.useCallback)(
     (evt) => {
       const el = evt.target;
       if (el) {
@@ -1827,7 +1862,7 @@ var useTooltip = ({
     },
     [showTooltip]
   );
-  const handleMouseLeave = (0, import_react17.useCallback)(() => {
+  const handleMouseLeave = (0, import_react16.useCallback)(() => {
     if (anchorElementRef.current)
       if (mouseEnterTimerRef.current) {
         window.clearTimeout(mouseEnterTimerRef.current);
@@ -1851,4 +1886,101 @@ var useTooltip = ({
     tooltipProps
   };
 };
+
+// src/notifications/NotificationsProvider.tsx
+var import_react17 = __toESM(require("react"));
+var import_classnames9 = __toESM(require("classnames"));
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var toastDisplayDuration = 6e3;
+var horizontalTransitionDuration = 1e3;
+var verticalTransitionDuration = 300;
+var toastHeight = 56;
+var toastWidth = 300;
+var toastContainerContentGap = 10;
+var toastContainerLeftPadding = 10;
+var toastContainerRightPadding = 50;
+var classBase7 = "vuuToastNotifications";
+var NotificationLevel = /* @__PURE__ */ ((NotificationLevel2) => {
+  NotificationLevel2["Info"] = "info";
+  NotificationLevel2["Success"] = "success";
+  NotificationLevel2["Warning"] = "warning";
+  NotificationLevel2["Error"] = "error";
+  return NotificationLevel2;
+})(NotificationLevel || {});
+var NotificationsContext = import_react17.default.createContext({
+  notify: () => "have you forgotten to provide a NotificationProvider?"
+});
+var NotificationsProvider = (props) => {
+  const [notifications, setNotifications] = (0, import_react17.useState)([]);
+  const notify = (0, import_react17.useCallback)((notification) => {
+    const newNotification = { ...notification, id: (0, import_vuu_utils3.getUniqueId)() };
+    setNotifications((prev) => [...prev, newNotification]);
+    setTimeout(() => {
+      setNotifications((prev) => prev.filter((n) => n !== newNotification));
+    }, toastDisplayDuration + horizontalTransitionDuration * 2);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(NotificationsContext.Provider, { value: { notify }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: `${classBase7}-toastContainer`,
+        style: {
+          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
+        },
+        children: notifications.map((notification, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ToastNotification,
+          {
+            top: (toastHeight + toastContainerContentGap) * i,
+            notification
+          },
+          notification.id
+        ))
+      }
+    ),
+    props.children
+  ] });
+};
+var useNotifications = () => (0, import_react17.useContext)(NotificationsContext);
+var ToastNotification = (props) => {
+  const { top, notification, animated = true } = props;
+  const [right, setRight] = (0, import_react17.useState)(-toastWidth - toastContainerRightPadding);
+  (0, import_react17.useEffect)(() => {
+    setRight(toastContainerRightPadding);
+    if (animated) {
+      setTimeout(
+        () => setRight(-toastWidth - toastContainerRightPadding),
+        toastDisplayDuration + horizontalTransitionDuration
+      );
+    }
+  }, [animated]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames9.default)(`${classBase7}-toast`, notification.type),
+      style: {
+        height: toastHeight,
+        right,
+        width: toastWidth,
+        top,
+        transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "div",
+          {
+            className: (0, import_classnames9.default)(
+              `${classBase7}-toastIcon`,
+              `${notification.type}-icon`
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase7}-toastContent`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: notification.body })
+        ] })
+      ]
+    }
+  );
+};
 //# sourceMappingURL=index.js.map