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

package/esm/index.js

@@ -1,86 +1,85 @@
 // src/dialog/Dialog.tsx
 import { Scrim } from "@salt-ds/lab";
-import { Button, Text } from "@salt-ds/core";
-import cx3 from "classnames";
-import { useCallback, useRef, useState } from "react";
-
-// src/portal-deprecated/PortalDeprecated.tsx
-import { useLayoutEffect, useMemo } from "react";
-import * as ReactDOM2 from "react-dom";
-
-// src/portal-deprecated/render-portal.tsx
-import * as ReactDOM from "react-dom";
-import cx from "classnames";
-var containerId = 1;
-var getPortalContainer = ({
-  className,
-  dataMode,
-  x = 0,
-  y = 0,
-  win = window
-}) => {
-  const el = win.document.createElement("div");
-  el.className = cx(`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);
-};
+import cx2 from "classnames";
+import { useCallback, useRef as useRef2 } from "react";
 
-// src/portal-deprecated/PortalDeprecated.tsx
+// src/portal/Portal.tsx
 import { useThemeAttributes } from "@vuu-ui/vuu-shell";
-import cx2 from "classnames";
-var PortalDeprecated = function Portal({
+import { useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "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] = useThemeAttributes();
-  const renderContainer = useMemo(() => {
-    return createContainer({
-      className: cx2(themeClass, densityClass),
-      dataMode
-    });
-  }, [dataMode, densityClass, themeClass]);
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = useState(false);
+  const portalRef = useRef(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = useThemeAttributes(themeAttributes);
   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]);
   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 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
+import { Button, Text } from "@salt-ds/core";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+var classBase = "vuuDialogHeader";
+var DialogHeader = ({
+  hideCloseButton = false,
+  title,
+  onClose,
+  ...htmlAttributes
+}) => {
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuToolbarProxy"), children: [
+    /* @__PURE__ */ jsx(Text, { className: "dialogHeader", children: title }),
+    !hideCloseButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: onClose,
+        "data-align": "end",
+        "data-icon": "close",
+        variant: "secondary"
+      },
+      "close"
+    )
+  ] });
 };
 
 // src/dialog/Dialog.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var classBase = "vuuDialog";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var classBase2 = "vuuDialog";
 var Dialog = ({
   children,
   className,
@@ -90,51 +89,43 @@ var Dialog = ({
   hideCloseButton = false,
   ...props
 }) => {
-  const root = useRef(null);
-  const [posX] = useState(0);
-  const [posY] = useState(0);
+  const root = useRef2(null);
   const close = useCallback(() => {
     onClose == null ? void 0 : onClose();
   }, [onClose]);
-  const handleRender = useCallback(() => {
-  }, []);
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx(PortalDeprecated, { onRender: handleRender, x: posX, y: posY, children: /* @__PURE__ */ jsx(Scrim, { className: `${classBase}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ jsxs("div", { ...props, className: cx3(classBase, className), ref: root, children: [
-    /* @__PURE__ */ jsxs("div", { className: cx3("vuuToolbarProxy", `${classBase}-header`), children: [
-      /* @__PURE__ */ jsx(Text, { className: "dialogHeader", children: title }),
-      !hideCloseButton && /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: close,
-          "data-align": "end",
-          "data-icon": "close"
-        },
-        "close"
-      )
-    ] }),
+  return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(Scrim, { className: `${classBase2}-scrim`, open: isOpen, autoFocusRef: root, children: /* @__PURE__ */ jsxs2("div", { ...props, className: cx2(classBase2, className), ref: root, children: [
+    /* @__PURE__ */ jsx2(
+      DialogHeader,
+      {
+        hideCloseButton,
+        onClose: close,
+        title
+      }
+    ),
     children
   ] }) }) });
 };
 
 // src/menu/ContextMenu.tsx
-import { useCallback as useCallback5, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useRef as useRef6 } from "react";
 
 // src/menu/MenuList.tsx
 import React2, {
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo4,
-  useRef as useRef3
+  useMemo as useMemo3,
+  useRef as useRef4
 } from "react";
-import cx4 from "classnames";
+import cx3 from "classnames";
 import { useId } from "@vuu-ui/vuu-layout";
 
 // src/menu/use-keyboard-navigation.ts
 import {
   useCallback as useCallback2,
-  useMemo as useMemo2,
-  useRef as useRef2,
+  useMemo,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
@@ -142,7 +133,7 @@ import {
 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
@@ -214,7 +205,7 @@ var useKeyboardNavigation = ({
     );
   }
   const controlledHighlighting = isValidNumber(highlightedIndexProp);
-  const highlightedIndexRef = useRef2(
+  const highlightedIndexRef = useRef3(
     (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
   );
   const [, forceRender] = useState2(null);
@@ -236,8 +227,8 @@ var useKeyboardNavigation = ({
     },
     [controlledHighlighting, setHighlightedIdx]
   );
-  const keyBoardNavigation = useRef2(true);
-  const ignoreFocus = useRef2(false);
+  const keyBoardNavigation = useRef3(true);
+  const ignoreFocus = useRef3(false);
   const setIgnoreFocus = (value) => ignoreFocus.current = value;
   const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
   const navigateChildldItems = useCallback2(
@@ -259,10 +250,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);
@@ -282,7 +273,7 @@ var useKeyboardNavigation = ({
       onOpenMenu
     ]
   );
-  const listProps = useMemo2(
+  const listProps = useMemo(
     () => ({
       onFocus: () => {
         if (highlightedIndex === -1) {
@@ -337,7 +328,7 @@ function nextItemIdx(count, key, idx) {
 }
 
 // src/menu/use-items-with-ids-next.ts
-import React, { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import React, { useCallback as useCallback3, useMemo as useMemo2 } from "react";
 var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
 var getLabelFromChildren = (children) => {
   if (Array.isArray(children) && isMenuItemLabel(children[0])) {
@@ -394,7 +385,7 @@ var useItemsWithIdsNext = (childrenProp, rootId) => {
     };
     return collectChildren(childrenProp);
   }, [rootId, childrenProp]);
-  const [menus, actions] = useMemo3(
+  const [menus, actions] = useMemo2(
     () => normalizeChildren(),
     [normalizeChildren]
   );
@@ -402,14 +393,19 @@ var useItemsWithIdsNext = (childrenProp, rootId) => {
 };
 
 // src/menu/MenuList.tsx
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-var classBase2 = "vuuMenuList";
-var Separator = () => /* @__PURE__ */ jsx2("li", { className: "vuuMenuItem-divider" });
+import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ jsx3("li", { className: "vuuMenuItem-divider" });
 var MenuItemGroup = () => null;
-var MenuItem = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ jsx2("div", { ...props, children });
+var MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3("div", { ...props, children });
 };
-var MenuItemLabel = ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children });
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ jsx3(Fragment, { children });
 MenuItemLabel.displayName = "MenuItemLabel";
 MenuItem.Label = MenuItemLabel;
 var getDisplayName = (item) => React2.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
@@ -428,15 +424,15 @@ var MenuList = ({
   onHighlightMenuItem,
   onActivate,
   onCloseMenu,
-  onOpenMenu,
+  openMenu: onOpenMenu,
   ...props
 }) => {
   const id = useId(idProp);
-  const root = useRef3(null);
-  const mapIdxToId = useMemo4(() => /* @__PURE__ */ new Map(), []);
+  const root = useRef4(null);
+  const mapIdxToId = useMemo3(() => /* @__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({
@@ -462,7 +458,7 @@ var MenuList = ({
       role: "menuitem"
     };
     const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "span",
         {
           className: "vuuIconContainer",
@@ -486,7 +482,7 @@ var MenuList = ({
       const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
       const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
       list.push(
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           MenuItem,
           {
             ...props2,
@@ -517,14 +513,14 @@ var MenuList = ({
     }
     return listItems;
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ...props,
       ...listProps,
       "aria-activedescendant": getActiveDescendant(),
-      className: cx4(classBase2, className, {
-        [`${classBase2}-childMenuShowing`]: childMenuShowing !== void 0
+      className: cx3(classBase3, className, {
+        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
       }),
       "data-root": isRoot2 || void 0,
       id,
@@ -537,9 +533,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: cx4("vuuMenuItem", className, {
+  className: cx3("vuuMenuItem", className, {
     "vuuMenuItem-separator": hasSeparator,
     focusVisible: focusVisible === idx
   })
@@ -549,13 +545,13 @@ MenuList.displayName = "MenuList";
 // src/menu/use-cascade.ts
 import {
   useCallback as useCallback4,
-  useMemo as useMemo5,
-  useRef as useRef4,
+  useMemo as useMemo4,
+  useRef as useRef5,
   useState as useState3
 } from "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) => {
@@ -588,8 +584,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) => {
@@ -612,7 +613,7 @@ var useCascade = ({
   position: { x: posX, y: posY }
 }) => {
   const [, forceRefresh] = useState3({});
-  const openMenus = useRef4([
+  const openMenus = useRef5([
     { id: rootId, left: posX, top: posY }
   ]);
   const menuIsOpen = useCallback4(
@@ -627,17 +628,24 @@ var useCascade = ({
     return state;
   }, []);
   const setOpenMenus = useCallback4((menus) => {
+    console.log(`setOpenMenus`, {
+      menus
+    });
     openMenus.current = menus;
     forceRefresh({});
   }, []);
-  const menuOpenPendingTimeout = useRef4();
-  const menuClosePendingTimeout = useRef4();
-  const menuState = useRef4({ [rootId]: "no-popup" });
+  const menuOpenPendingTimeout = useRef5();
+  const menuClosePendingTimeout = useRef5();
+  const menuState = useRef5({ [rootId]: "no-popup" });
   const openMenu = useCallback4(
     (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) {
@@ -654,7 +662,9 @@ var useCascade = ({
   );
   const closeMenu = useCallback4(
     (menuId) => {
+      console.log(`closeMenu ${menuId}`);
       if (menuId === rootId) {
+        console.log("close child menu of root");
         setOpenMenus([]);
       } else {
         const menus = openMenus.current.slice();
@@ -664,6 +674,9 @@ var useCascade = ({
         if (parentMenu) {
           menuState.current[parentMenu.id] = "no-popup";
         }
+        console.log(`closeMenu setOpenMenus`, {
+          menus
+        });
         setOpenMenus(menus);
       }
     },
@@ -671,17 +684,27 @@ var useCascade = ({
   );
   const closeMenus = useCallback4(
     (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);
       }
     },
@@ -694,14 +717,14 @@ var useCascade = ({
     }
   }, []);
   const scheduleOpen = useCallback4(
-    (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]
   );
@@ -716,8 +739,8 @@ var useCascade = ({
   );
   const handleRender = useCallback4(() => {
     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;
@@ -732,25 +755,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 = useCallback4(
-    (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);
@@ -766,15 +790,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);
           }
@@ -797,14 +826,16 @@ var useCascade = ({
       scheduleOpen
     ]
   );
-  const listItemProps = useMemo5(
+  const listItemProps = useMemo4(
     () => ({
       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) {
@@ -827,10 +858,11 @@ var useCascade = ({
 
 // src/menu/ContextMenu.tsx
 import { useId as useId2 } from "@vuu-ui/vuu-layout";
-import { Fragment as Fragment2, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
 import { createElement } from "react";
 var noop = () => void 0;
 var ContextMenu = ({
+  PortalProps: PortalProps2,
   activatedByKeyboard,
   children: childrenProp,
   className,
@@ -840,12 +872,12 @@ var ContextMenu = ({
   style,
   ...menuListProps
 }) => {
-  const closeHandlerRef = useRef5(onClose);
+  const closeHandlerRef = useRef6(onClose);
   closeHandlerRef.current = onClose;
   const id = useId2(idProp);
-  const closeMenuRef = useRef5(noop);
+  const closeMenuRef = useRef6(noop);
   const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
-  const navigatingWithKeyboard = useRef5(activatedByKeyboard);
+  const navigatingWithKeyboard = useRef6(activatedByKeyboard);
   const handleMouseEnterItem = useCallback5(() => {
     navigatingWithKeyboard.current = false;
   }, []);
@@ -862,7 +894,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,
@@ -885,35 +923,43 @@ var ContextMenu = ({
       return id2;
     }
   };
-  return /* @__PURE__ */ jsx3(Fragment2, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
     const childMenuId = getChildMenuId(i);
-    return /* @__PURE__ */ jsx3(PortalDeprecated, { x: left, y: top, onRender: handleRender, children: /* @__PURE__ */ createElement(
-      MenuList,
+    return /* @__PURE__ */ createElement(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ jsx4(
+      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__ */ 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
-import { createContext, useCallback as useCallback6, useMemo as useMemo6 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { createContext, useCallback as useCallback6, useMemo as useMemo5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ContextMenuContext = createContext(
   null
 );
@@ -923,7 +969,7 @@ var Provider = ({
   menuActionHandler,
   menuBuilder
 }) => {
-  const menuBuilders = useMemo6(() => {
+  const menuBuilders = useMemo5(() => {
     if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
       return context.menuBuilders.concat(menuBuilder);
     } else if (menuBuilder) {
@@ -944,7 +990,7 @@ var Provider = ({
     },
     [context, menuActionHandler]
   );
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     ContextMenuContext.Provider,
     {
       value: {
@@ -961,7 +1007,7 @@ var ContextMenuProvider = ({
   menuActionHandler,
   menuBuilder
 }) => {
-  return /* @__PURE__ */ jsx4(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsx5(
     Provider,
     {
       context: parentContext,
@@ -974,19 +1020,43 @@ var ContextMenuProvider = ({
 };
 
 // src/menu/useContextMenu.tsx
-import { useThemeAttributes as useThemeAttributes3 } from "@vuu-ui/vuu-shell";
 import { isGroupMenuItemDescriptor } from "@vuu-ui/vuu-utils";
-import cx7 from "classnames";
-import { cloneElement, useCallback as useCallback7, useContext } from "react";
+import { cloneElement, useCallback as useCallback8, useContext, useMemo as useMemo6 } from "react";
 
 // src/popup/popup-service.ts
 import cx5 from "classnames";
 import React3, {
-  createElement as createElement2,
-  useEffect,
-  useRef as useRef6
+  createElement as createElement2
 } from "react";
-import ReactDOM3 from "react-dom";
+import ReactDOM2 from "react-dom";
+
+// src/portal-deprecated/render-portal.tsx
+import * as ReactDOM from "react-dom";
+import cx4 from "classnames";
+var containerId = 1;
+var getPortalContainer = ({
+  className,
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
+}) => {
+  const el = win.document.createElement("div");
+  el.className = cx4(`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";
@@ -998,14 +1068,16 @@ function specialKeyHandler(e) {
     } else if (_dialogOpen) {
       const dialogRoot = document.body.querySelector(".vuuDialog");
       if (dialogRoot) {
-        ReactDOM3.unmountComponentAtNode(dialogRoot);
+        ReactDOM2.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;
@@ -1020,7 +1092,7 @@ function closeAllPopups(reason) {
   } else if (_popups.length) {
     const popupContainers = document.body.querySelectorAll(".vuuPopup");
     for (let i = 0; i < popupContainers.length; i++) {
-      ReactDOM3.unmountComponentAtNode(popupContainers[i]);
+      ReactDOM2.unmountComponentAtNode(popupContainers[i]);
     }
     popupClosed("*");
   }
@@ -1062,7 +1134,7 @@ function popupClosed(name) {
     }
   }
 }
-var PopupComponent = ({
+var PopupComponent2 = ({
   children,
   position,
   style
@@ -1101,7 +1173,7 @@ var PopupService = class {
     const style = { width };
     renderPortal(
       createElement2(
-        PopupComponent,
+        PopupComponent2,
         { key: incrementingKey++, position, style },
         component
       ),
@@ -1124,7 +1196,7 @@ var PopupService = class {
       popupClosed(name);
       const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
       if (popupRoot) {
-        ReactDOM3.unmountComponentAtNode(popupRoot);
+        ReactDOM2.unmountComponentAtNode(popupRoot);
       }
     }
     document.removeEventListener(
@@ -1166,7 +1238,7 @@ var DialogService = class {
     const containerEl = ".vuuDialog";
     const onClose = dialog.props.onClose;
     dialogOpened();
-    ReactDOM3.render(
+    ReactDOM2.render(
       React3.cloneElement(dialog, {
         container: containerEl,
         onClose: () => {
@@ -1183,75 +1255,18 @@ var DialogService = class {
     dialogClosed();
     const dialogRoot = document.body.querySelector(".vuuDialog");
     if (dialogRoot) {
-      ReactDOM3.unmountComponentAtNode(dialogRoot);
+      ReactDOM2.unmountComponentAtNode(dialogRoot);
     }
   }
 };
-var Popup = (props) => {
-  const pendingTask = useRef6();
-  const ref = useRef6(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);
-    }
-  };
-  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 React3.createElement("div", { className: "popup-proxy", ref });
-};
 
 // src/popup/Popup.tsx
 import cx6 from "classnames";
-import { useThemeAttributes as useThemeAttributes2 } from "@vuu-ui/vuu-shell";
 
 // src/popup/useAnchoredPosition.ts
-import { useLayoutEffect as useLayoutEffect3, useState as useState4 } from "react";
-var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetTop) => {
-  const { bottom, left, right, top, width } = anchorElement.getBoundingClientRect();
+import { useCallback as useCallback7, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState4 } from "react";
+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 };
@@ -1260,7 +1275,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"
@@ -1269,52 +1303,89 @@ var getPositionRelativeToAnchor = (anchorElement, placement, offsetLeft, offsetT
 };
 var useAnchoredPosition = ({
   anchorElement,
+  minWidth,
   offsetLeft = 0,
   offsetTop = 0,
-  placement
+  placement,
+  position: positionProp
 }) => {
-  const [position, setPosition] = useState4();
+  const popupRef = useRef7(null);
+  const [position, setPosition] = useState4(positionProp);
   useLayoutEffect3(() => {
-    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 = useCallback7(
+    (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
-import { jsx as jsx5 } from "react/jsx-runtime";
-var PopupComponent2 = ({
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PopupComponent = ({
   children,
   className,
   anchorElement,
-  placement
+  minWidth,
+  placement,
+  position: positionProp
 }) => {
-  const [themeClass, densityClass, dataMode] = useThemeAttributes2();
-  const position = useAnchoredPosition({ anchorElement, placement });
-  return position === void 0 ? null : /* @__PURE__ */ jsx5(
-    "div",
-    {
-      className: cx6(`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__ */ jsx6("div", { className: cx6(`vuuPortal`, className), ref: popupRef, style: position, children });
 };
 
 // src/menu/useContextMenu.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useThemeAttributes as useThemeAttributes2 } from "@vuu-ui/vuu-shell";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var useContextMenu = (menuBuilder, menuActionHandler) => {
   const ctx = useContext(ContextMenuContext);
-  const [themeClass, densityClass, dataMode] = useThemeAttributes3();
-  const buildMenuOptions = useCallback7(
+  const [themeClass, densityClass, dataMode] = useThemeAttributes2();
+  const themeAttributes = useMemo6(
+    () => ({
+      themeClass,
+      densityClass,
+      dataMode
+    }),
+    [dataMode, densityClass, themeClass]
+  );
+  const buildMenuOptions = useCallback8(
     (menuBuilders, location, options) => {
       let results = [];
       for (const menuBuilder2 of menuBuilders) {
@@ -1324,7 +1395,7 @@ var useContextMenu = (menuBuilder, menuActionHandler) => {
     },
     []
   );
-  const handleShowContextMenu = useCallback7(
+  const handleShowContextMenu = useCallback8(
     (e, location, { ContextMenuProps: ContextMenuProps2, contextMenu, ...options }) => {
       var _a, _b;
       (_a = e.stopPropagation) == null ? void 0 : _a.call(e);
@@ -1360,13 +1431,10 @@ var useContextMenu = (menuBuilder, menuActionHandler) => {
         };
         if (menuItemDescriptors.length && menuHandler) {
           showContextMenu(e, menuItemDescriptors, menuHandler, {
-            ...ContextMenuProps2,
-            className: cx7(
-              ContextMenuProps2 == null ? void 0 : ContextMenuProps2.className,
-              themeClass,
-              densityClass
-            ),
-            "data-mode": dataMode
+            PortalProps: {
+              themeAttributes
+            },
+            ...ContextMenuProps2
           });
         }
       } else {
@@ -1375,18 +1443,10 @@ var useContextMenu = (menuBuilder, menuActionHandler) => {
         );
       }
     },
-    [
-      buildMenuOptions,
-      ctx,
-      dataMode,
-      densityClass,
-      menuActionHandler,
-      menuBuilder,
-      themeClass
-    ]
+    [buildMenuOptions, ctx, menuActionHandler, menuBuilder, themeAttributes]
   );
-  const hideContextMenu = useCallback7(() => {
-    console.log("hide comnytext menu");
+  const hideContextMenu = useCallback8(() => {
+    console.log("hide context menu");
   }, []);
   return [handleShowContextMenu, hideContextMenu];
 };
@@ -1404,7 +1464,7 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
   ...contextMenuProps
 } = NO_OPTIONS) => {
   const menuItems = (menuDescriptors2) => {
-    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsx6(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ jsx6(
+    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ jsx7(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ jsx7(
       MenuItem,
       {
         action: menuItem.action,
@@ -1429,11 +1489,10 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
     x: e.clientX,
     y: e.clientY
   };
-  const component = /* @__PURE__ */ jsx6(
+  const component = /* @__PURE__ */ jsx7(
     ContextMenu,
     {
       ...contextMenuProps,
-      className: "vuuContextMenu",
       onClose: handleClose,
       position,
       children: menuItems(menuDescriptors)
@@ -1444,15 +1503,15 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
 
 // src/popup-menu/PopupMenu.tsx
 import {
-  useCallback as useCallback8,
-  useRef as useRef7,
+  useCallback as useCallback9,
+  useRef as useRef8,
   useState as useState5
 } from "react";
-import cx8 from "classnames";
+import cx7 from "classnames";
 import { Button as Button2 } from "@salt-ds/core";
 import { useId as useId3 } from "@vuu-ui/vuu-layout";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var classBase3 = "vuuPopupMenu";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var classBase4 = "vuuPopupMenu";
 var getPosition2 = (element) => {
   if (element) {
     const { bottom, left } = element.getBoundingClientRect();
@@ -1472,12 +1531,17 @@ var PopupMenu = ({
   tabIndex = 0,
   ...htmlAttributes
 }) => {
-  const rootRef = useRef7(null);
-  const suppressShowMenuRef = useRef7(false);
+  const rootRef = useRef8(null);
+  const suppressShowMenuRef = useRef8(false);
   const [menuOpen, setMenuOpen] = useState5(false);
   const id = useId3(idProp);
   const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
-  const handleMenuClose = useCallback8(
+  const handleOpenMenu = useCallback9((el) => {
+    console.log(`menu Open `, {
+      el
+    });
+  }, []);
+  const handleMenuClose = useCallback9(
     (reason) => {
       setMenuOpen(false);
       if (reasonIsClickAway(reason)) {
@@ -1497,7 +1561,7 @@ var PopupMenu = ({
     },
     [onMenuClose, tabIndex]
   );
-  const showMenu = useCallback8(
+  const showMenu = useCallback9(
     (e) => {
       if (suppressShowMenuRef.current) {
         suppressShowMenuRef.current = false;
@@ -1505,27 +1569,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__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     Button2,
     {
       ...htmlAttributes,
       "aria-controls": `${id}-menu-root`,
       "aria-expanded": menuOpen,
       "aria-haspopup": "menu",
-      className: cx8(classBase3, className, {
-        [`${classBase3}-withCaption`]: label !== void 0,
-        [`${classBase3}-open`]: menuOpen
+      className: cx7(classBase4, className, {
+        [`${classBase4}-withCaption`]: label !== void 0,
+        [`${classBase4}-open`]: menuOpen
       }),
       "data-icon": icon,
       id,
@@ -1538,54 +1609,13 @@ var PopupMenu = ({
   );
 };
 
-// src/portal/Portal.tsx
-import { useThemeAttributes as useThemeAttributes4 } from "@vuu-ui/vuu-shell";
-import { useLayoutEffect as useLayoutEffect4, useRef as useRef8, useState as useState6 } from "react";
-import { createPortal } from "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] = useState6(false);
-  const portalRef = useRef8(null);
-  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
-  const [themeClass, densityClass, dataMode] = useThemeAttributes4();
-  useLayoutEffect4(() => {
-    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 createPortal(children, portalRef.current);
-  }
-  return null;
-};
-
 // src/prompt/Prompt.tsx
-import { useThemeAttributes as useThemeAttributes5 } from "@vuu-ui/vuu-shell";
+import { useThemeAttributes as useThemeAttributes3 } from "@vuu-ui/vuu-shell";
 import { Button as Button3 } from "@salt-ds/core";
-import cx9 from "classnames";
-import { useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
-var classBase4 = "vuuPrompt";
+import cx8 from "classnames";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef9 } from "react";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var classBase5 = "vuuPrompt";
 var AnchorBody = { current: document.body };
 var EMPTY_PROPS = {};
 var Prompt = ({
@@ -1607,8 +1637,8 @@ var Prompt = ({
     offsetTop = 0,
     placement = "below"
   } = PopupProps;
-  const [themeClass, densityClass, dataMode] = useThemeAttributes5();
-  const position = useAnchoredPosition({
+  const [themeClass, densityClass, dataMode] = useThemeAttributes3();
+  const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
     offsetTop,
@@ -1616,7 +1646,7 @@ var Prompt = ({
   });
   const rootRef = useRef9(null);
   const confirmRef = useRef9(null);
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     if (rootRef.current) {
       rootRef.current.showModal();
       if (confirmRef.current) {
@@ -1628,20 +1658,20 @@ var Prompt = ({
       }
     }
   }, [placement]);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "dialog",
     {
       ...htmlAttributes,
-      className: cx9(classBase4, `${classBase4}-${variant}`, themeClass),
+      className: cx8(classBase5, `${classBase5}-${variant}`, themeClass),
       "data-mode": dataMode,
       ref: rootRef,
       style: { ...style, ...position },
-      children: /* @__PURE__ */ jsxs2("form", { className: `${classBase4}-form`, children: [
-        /* @__PURE__ */ jsx8("div", { className: `${classBase4}-header`, "data-icon": icon, children: title }),
-        /* @__PURE__ */ jsx8("div", { className: `${classBase4}-text`, children: text }),
-        /* @__PURE__ */ jsxs2("div", { className: `${classBase4}-buttonBar`, children: [
-          /* @__PURE__ */ jsx8(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
-          /* @__PURE__ */ jsx8(Button3, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
+      children: /* @__PURE__ */ jsxs3("form", { className: `${classBase5}-form`, children: [
+        /* @__PURE__ */ jsx9("div", { className: `${classBase5}-header`, "data-icon": icon, children: title }),
+        /* @__PURE__ */ jsx9("div", { className: `${classBase5}-text`, children: text }),
+        /* @__PURE__ */ jsxs3("div", { className: `${classBase5}-buttonBar`, children: [
+          /* @__PURE__ */ jsx9(Button3, { onClick: onCancel, variant: "secondary", children: cancelButtonLabel }),
+          /* @__PURE__ */ jsx9(Button3, { onClick: onConfirm, ref: confirmRef, value: "default", children: confirmButtonLabel })
         ] })
       ] })
     }
@@ -1649,7 +1679,7 @@ var Prompt = ({
 };
 
 // src/tooltip/useAnchoredPosition.ts
-import { useLayoutEffect as useLayoutEffect6, useState as useState7 } from "react";
+import { useLayoutEffect as useLayoutEffect5, useState as useState6 } from "react";
 var getPositionRelativeToAnchor2 = (anchorElement, placement, offsetLeft, offsetTop) => {
   const { bottom, height, left, right, top, width } = anchorElement.getBoundingClientRect();
   const midX = left + width / 2;
@@ -1675,8 +1705,8 @@ var useAnchoredPosition2 = ({
   offsetTop = 0,
   placement
 }) => {
-  const [position, setPosition] = useState7();
-  useLayoutEffect6(() => {
+  const [position, setPosition] = useState6();
+  useLayoutEffect5(() => {
     if (anchorElement.current) {
       const position2 = getPositionRelativeToAnchor2(
         anchorElement.current,
@@ -1691,8 +1721,8 @@ var useAnchoredPosition2 = ({
 };
 
 // src/tooltip/Tooltip.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var classBase5 = "vuuTooltip";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var classBase6 = "vuuTooltip";
 var Tooltip = ({
   anchorElement,
   children,
@@ -1705,17 +1735,17 @@ var Tooltip = ({
   if (position === void 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx9(Portal2, { children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(Portal, { children: /* @__PURE__ */ jsx10(
     "div",
     {
-      className: classBase5,
+      className: classBase6,
       "data-align": placement,
       id,
       style: position,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         "span",
         {
-          className: `${classBase5}-content`,
+          className: `${classBase6}-content`,
           onMouseEnter,
           onMouseLeave,
           children
@@ -1726,7 +1756,7 @@ var Tooltip = ({
 };
 
 // src/tooltip/useTooltip.ts
-import { useCallback as useCallback9, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback10, useRef as useRef10, useState as useState7 } from "react";
 import { useId as useId4 } from "@vuu-ui/vuu-layout";
 var useTooltip = ({
   id: idProp,
@@ -1737,26 +1767,26 @@ var useTooltip = ({
   const anchorElementRef = useRef10(null);
   const mouseEnterTimerRef = useRef10();
   const mouseLeaveTimerRef = useRef10();
-  const [tooltipProps, setTooltipProps] = useState8();
+  const [tooltipProps, setTooltipProps] = useState7();
   const id = useId4(idProp);
-  const escapeListener = useCallback9((evt) => {
+  const escapeListener = useCallback10((evt) => {
     var _a;
     if (evt.key === "Escape") {
       (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
     }
   }, []);
-  hideTooltipRef.current = useCallback9(() => {
+  hideTooltipRef.current = useCallback10(() => {
     setTooltipProps(void 0);
     document.removeEventListener("keydown", escapeListener);
   }, [escapeListener]);
-  const handleMouseEnterTooltip = useCallback9(() => {
+  const handleMouseEnterTooltip = useCallback10(() => {
     window.clearTimeout(mouseLeaveTimerRef.current);
   }, []);
-  const handleMouseLeaveTooltip = useCallback9(() => {
+  const handleMouseLeaveTooltip = useCallback10(() => {
     var _a;
     (_a = hideTooltipRef.current) == null ? void 0 : _a.call(hideTooltipRef);
   }, []);
-  const showTooltip = useCallback9(() => {
+  const showTooltip = useCallback10(() => {
     const { current: anchorEl } = anchorElementRef;
     if (anchorEl) {
       setTooltipProps({
@@ -1778,7 +1808,7 @@ var useTooltip = ({
     placement,
     tooltipContent
   ]);
-  const handleMouseEnter = useCallback9(
+  const handleMouseEnter = useCallback10(
     (evt) => {
       const el = evt.target;
       if (el) {
@@ -1788,7 +1818,7 @@ var useTooltip = ({
     },
     [showTooltip]
   );
-  const handleMouseLeave = useCallback9(() => {
+  const handleMouseLeave = useCallback10(() => {
     if (anchorElementRef.current)
       if (mouseEnterTimerRef.current) {
         window.clearTimeout(mouseEnterTimerRef.current);
@@ -1812,32 +1842,132 @@ var useTooltip = ({
     tooltipProps
   };
 };
+
+// src/notifications/NotificationsProvider.tsx
+import React4, { useState as useState8, useContext as useContext2, useCallback as useCallback11, useEffect } from "react";
+import classNames from "classnames";
+import { getUniqueId } from "@vuu-ui/vuu-utils";
+import { jsx as jsx11, jsxs as jsxs4 } from "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 = React4.createContext({
+  notify: () => "have you forgotten to provide a NotificationProvider?"
+});
+var NotificationsProvider = (props) => {
+  const [notifications, setNotifications] = useState8([]);
+  const notify = useCallback11((notification) => {
+    const newNotification = { ...notification, id: getUniqueId() };
+    setNotifications((prev) => [...prev, newNotification]);
+    setTimeout(() => {
+      setNotifications((prev) => prev.filter((n) => n !== newNotification));
+    }, toastDisplayDuration + horizontalTransitionDuration * 2);
+  }, []);
+  return /* @__PURE__ */ jsxs4(NotificationsContext.Provider, { value: { notify }, children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: `${classBase7}-toastContainer`,
+        style: {
+          width: toastWidth + toastContainerRightPadding + toastContainerLeftPadding
+        },
+        children: notifications.map((notification, i) => /* @__PURE__ */ jsx11(
+          ToastNotification,
+          {
+            top: (toastHeight + toastContainerContentGap) * i,
+            notification
+          },
+          notification.id
+        ))
+      }
+    ),
+    props.children
+  ] });
+};
+var useNotifications = () => useContext2(NotificationsContext);
+var ToastNotification = (props) => {
+  const { top, notification, animated = true } = props;
+  const [right, setRight] = useState8(-toastWidth - toastContainerRightPadding);
+  useEffect(() => {
+    setRight(toastContainerRightPadding);
+    if (animated) {
+      setTimeout(
+        () => setRight(-toastWidth - toastContainerRightPadding),
+        toastDisplayDuration + horizontalTransitionDuration
+      );
+    }
+  }, [animated]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: classNames(`${classBase7}-toast`, notification.type),
+      style: {
+        height: toastHeight,
+        right,
+        width: toastWidth,
+        top,
+        transition: animated ? `right ${horizontalTransitionDuration}ms, top ${verticalTransitionDuration}ms ` : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: classNames(
+              `${classBase7}-toastIcon`,
+              `${notification.type}-icon`
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: `${classBase7}-toastContent`, children: [
+          /* @__PURE__ */ jsx11("strong", { className: `${classBase7}-toastHeader`, children: notification.header }),
+          /* @__PURE__ */ jsx11("div", { children: notification.body })
+        ] })
+      ]
+    }
+  );
+};
 export {
   ContextMenu,
   ContextMenuContext,
   ContextMenuProvider,
   Dialog,
+  DialogHeader,
   DialogService,
   MenuItem,
   MenuItemGroup,
   MenuList,
-  Popup,
-  PopupComponent2 as PopupComponent,
+  NotificationLevel,
+  NotificationsContext,
+  NotificationsProvider,
+  PopupComponent,
   PopupMenu,
   PopupService,
-  Portal2 as Portal,
-  PortalDeprecated,
+  Portal,
   Prompt,
   Separator,
+  ToastNotification,
   Tooltip,
   createContainer,
-  installTheme,
   isMenuItemLabel,
   reasonIsClickAway,
   reasonIsMenuAction,
   renderPortal,
   useAnchoredPosition,
   useContextMenu,
+  useNotifications,
   useTooltip
 };
 //# sourceMappingURL=index.js.map