@vuu-ui/vuu-popups 0.8.17-debug → 0.8.18-debug

package/cjs/index.js

@@ -42,7 +42,7 @@ __export(src_exports, {
   NotificationLevel: () => NotificationLevel,
   NotificationsContext: () => NotificationsContext,
   NotificationsProvider: () => NotificationsProvider,
-  PopupComponent: () => PopupComponent,
+  PopupComponent: () => PopupComponent2,
   PopupMenu: () => PopupMenu,
   PopupService: () => PopupService,
   Portal: () => Portal,
@@ -64,61 +64,13 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/dialog/Dialog.tsx
-var import_lab = require("@salt-ds/lab");
-var import_classnames2 = __toESM(require("classnames"));
-var import_react2 = require("react");
-
-// src/portal/Portal.tsx
-var import_vuu_shell = require("@vuu-ui/vuu-shell");
-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,
-  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)(() => {
-    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)(() => {
-    requestAnimationFrame(() => {
-      onRender == null ? void 0 : onRender();
-    });
-  }, [onRender]);
-  if (open && mounted && portalRef.current && children) {
-    return (0, import_react_dom.createPortal)(children, portalRef.current);
-  }
-  return null;
-};
+var import_clsx5 = __toESM(require("clsx"));
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var import_react3 = require("react");
 
 // src/dialog-header/DialogHeader.tsx
 var import_core = require("@salt-ds/core");
-var import_classnames = __toESM(require("classnames"));
+var import_clsx = __toESM(require("clsx"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var classBase = "vuuDialogHeader";
 var DialogHeader = ({
@@ -127,7 +79,7 @@ var DialogHeader = ({
   onClose,
   ...htmlAttributes
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_classnames.default)(classBase, "vuuToolbarProxy"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...htmlAttributes, className: (0, import_clsx.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,
@@ -142,1286 +94,1389 @@ var DialogHeader = ({
   ] });
 };
 
-// src/dialog/Dialog.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase2 = "vuuDialog";
-var Dialog = ({
-  children,
+// src/popup/popup-service.ts
+var import_clsx3 = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+
+// src/portal-deprecated/render-portal.tsx
+var ReactDOM = __toESM(require("react-dom"));
+var import_clsx2 = __toESM(require("clsx"));
+var containerId = 1;
+var getPortalContainer = ({
   className,
-  isOpen = false,
-  onClose,
-  title,
-  hideCloseButton = false,
-  ...props
+  dataMode,
+  x = 0,
+  y = 0,
+  win = window
 }) => {
-  const root = (0, import_react2.useRef)(null);
-  const close = (0, import_react2.useCallback)(() => {
-    onClose == null ? void 0 : onClose();
-  }, [onClose]);
-  if (!isOpen) {
-    return null;
+  const el = win.document.createElement("div");
+  el.className = (0, import_clsx2.default)(`vuuPopup ${containerId++}`, className);
+  el.style.cssText = `left:${x}px; top:${y}px;`;
+  if (dataMode) {
+    el.dataset.mode = dataMode;
   }
-  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
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase2}-body`, children })
-  ] }) }) });
-};
-
-// src/dialog/useDialog.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var useDialog = () => {
-  const [dialogState, setDialogState] = (0, import_react3.useState)();
-  const handleClose = (0, import_react3.useCallback)(() => {
-    setDialogState(void 0);
-  }, []);
-  const dialog = dialogState ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    Dialog,
-    {
-      className: "vuDialog",
-      isOpen: true,
-      onClose: handleClose,
-      style: { maxHeight: 500 },
-      title: dialogState.title,
-      hideCloseButton: dialogState.hideCloseButton,
-      children: dialogState.content
-    }
-  ) : null;
-  return {
-    dialog,
-    setDialogState
-  };
+  win.document.body.appendChild(el);
+  return el;
 };
-
-// src/menu/ContextMenu.tsx
-var import_react8 = require("react");
-
-// src/menu/MenuList.tsx
-var import_react6 = __toESM(require("react"));
-var import_classnames3 = __toESM(require("classnames"));
-var import_vuu_layout = require("@vuu-ui/vuu-layout");
-
-// src/menu/use-keyboard-navigation.ts
-var import_react4 = require("react");
-
-// src/menu/utils.ts
-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-index='${idx}'][aria-haspopup='true']`) !== null;
+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/menu/key-code.ts
-function union(set1, ...sets) {
-  const result = new Set(set1);
-  for (const set of sets) {
-    for (const element of set) {
-      result.add(element);
+// src/popup/popup-service.ts
+var _dialogOpen = false;
+var _popups = [];
+var reasonIsMenuAction = (reason) => (reason == null ? void 0 : reason.type) === "menu-action";
+var reasonIsClickAway = (reason) => (reason == null ? void 0 : reason.type) === "click-away";
+function specialKeyHandler(e) {
+  if (e.key === "Esc") {
+    if (_popups.length) {
+      closeAllPopups();
+    } else if (_dialogOpen) {
+      const dialogRoot = document.body.querySelector(".vuuDialog");
+      if (dialogRoot) {
+        import_react_dom.default.unmountComponentAtNode(dialogRoot);
+      }
     }
   }
-  return result;
 }
-var Enter = "Enter";
-var Delete = "Delete";
-var actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
-var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
-var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
-var verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
-var horizontalNavigationKeys = /* @__PURE__ */ new Set([
-  "Home",
-  "End",
-  "ArrowRight",
-  "ArrowLeft"
-]);
-var functionKeys = /* @__PURE__ */ new Set([
-  "F1",
-  "F2",
-  "F3",
-  "F4",
-  "F5",
-  "F6",
-  "F7",
-  "F8",
-  "F9",
-  "F10",
-  "F11",
-  "F12"
-]);
-var specialKeys = union(
-  actionKeys,
-  horizontalNavigationKeys,
-  verticalNavigationKeys,
-  arrowLeftRightKeys,
-  functionKeys,
-  focusKeys
-);
-var isNavigationKey = ({ key }, orientation = "vertical") => {
-  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
-  return navigationKeys.has(key);
-};
-
-// src/menu/use-keyboard-navigation.ts
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var useKeyboardNavigation = ({
-  autoHighlightFirstItem = false,
-  count,
-  defaultHighlightedIdx,
-  highlightedIndex: highlightedIndexProp,
-  onActivate,
-  onHighlight,
-  // onKeyDown,
-  onCloseMenu,
-  onOpenMenu
-}) => {
-  var _a;
-  if ((0, import_vuu_utils.isValidNumber)(highlightedIndexProp) && (0, import_vuu_utils.isValidNumber)(defaultHighlightedIdx)) {
-    throw Error(
-      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+function outsideClickHandler(e) {
+  if (_popups.length) {
+    const popupContainers = document.body.querySelectorAll(
+      ".vuuPopup,#vuu-portal-root"
     );
+    for (let i = 0; i < popupContainers.length; i++) {
+      if (popupContainers[i].contains(e.target)) {
+        return;
+      }
+    }
+    closeAllPopups({ mouseEvt: e, type: "click-away" });
   }
-  const controlledHighlighting = (0, import_vuu_utils.isValidNumber)(highlightedIndexProp);
-  const highlightedIndexRef = (0, import_react4.useRef)(
-    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
-  );
-  const [, forceRender] = (0, import_react4.useState)(null);
-  const setHighlightedIdx = (0, import_react4.useCallback)(
-    (idx) => {
-      highlightedIndexRef.current = idx;
-      onHighlight == null ? void 0 : onHighlight(idx);
-      forceRender({});
-    },
-    [onHighlight]
-  );
-  const setHighlightedIndex = (0, import_react4.useCallback)(
-    (idx) => {
-      if (idx !== highlightedIndexRef.current) {
-        if (!controlledHighlighting) {
-          setHighlightedIdx(idx);
-        }
+}
+function closeAllPopups(reason) {
+  if (_popups.length === 1) {
+    PopupService.hidePopup(reason, "anon", "all");
+  } 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]);
+    }
+    popupClosed("*");
+  }
+}
+function dialogOpened() {
+  if (_dialogOpen === false) {
+    _dialogOpen = true;
+    window.addEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function dialogClosed() {
+  if (_dialogOpen) {
+    _dialogOpen = false;
+    window.removeEventListener("keydown", specialKeyHandler, true);
+  }
+}
+function popupOpened(name) {
+  if (_popups.indexOf(name) === -1) {
+    _popups.push(name);
+    if (_dialogOpen === false) {
+      window.addEventListener("keydown", specialKeyHandler, true);
+      window.addEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+function popupClosed(name) {
+  if (_popups.length) {
+    if (name === "*") {
+      _popups.length = 0;
+    } else {
+      const pos = _popups.indexOf(name);
+      if (pos !== -1) {
+        _popups.splice(pos, 1);
       }
-    },
-    [controlledHighlighting, setHighlightedIdx]
-  );
-  const keyBoardNavigation = (0, import_react4.useRef)(true);
-  const ignoreFocus = (0, import_react4.useRef)(false);
-  const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
-  const navigateChildldItems = (0, import_react4.useCallback)(
-    (e) => {
-      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
-      if (nextIdx !== highlightedIndexRef.current) {
-        setHighlightedIndex(nextIdx);
-      }
-    },
-    [count, setHighlightedIndex]
-  );
-  const handleKeyDown = (0, import_react4.useCallback)(
-    (e) => {
-      if (isNavigationKey(e)) {
-        e.preventDefault();
-        e.stopPropagation();
-        keyBoardNavigation.current = true;
-        navigateChildldItems(e);
-      } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
-        const menuEl = e.target;
-        const menuItemEl = menuEl.querySelector(
-          `:scope > [data-index='${highlightedIndex}']`
-        );
-        if (menuItemEl) {
-          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
-        }
-      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
-        onCloseMenu(highlightedIndex);
-      } else if (e.key === "Enter") {
-        e.preventDefault();
-        e.stopPropagation();
-        onActivate && onActivate(highlightedIndex);
-      } else if (e.key === "Tab") {
-        onCloseMenu(-1);
-      }
-    },
-    [
-      highlightedIndex,
-      navigateChildldItems,
-      onActivate,
-      onCloseMenu,
-      onOpenMenu
-    ]
-  );
-  const listProps = (0, import_react4.useMemo)(
-    () => ({
-      onFocus: () => {
-        if (highlightedIndex === -1) {
-          setHighlightedIdx(0);
-        }
-      },
-      onKeyDown: handleKeyDown,
-      onMouseDownCapture: () => {
-        keyBoardNavigation.current = false;
-        setIgnoreFocus(true);
-      },
-      // onMouseEnter would seem less expensive but it misses some cases
-      onMouseMove: () => {
-        if (keyBoardNavigation.current) {
-          keyBoardNavigation.current = false;
-        }
-      },
-      onMouseLeave: () => {
-        keyBoardNavigation.current = true;
-        setIgnoreFocus(false);
-        setHighlightedIndex(-1);
-      }
-    }),
-    [handleKeyDown, highlightedIndex, setHighlightedIdx, setHighlightedIndex]
-  );
-  return {
-    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
-    controlledHighlighting,
-    highlightedIndex,
-    setHighlightedIndex,
-    // keyBoardNavigation,
-    listProps,
-    setIgnoreFocus
-  };
+    }
+    if (_popups.length === 0 && _dialogOpen === false) {
+      window.removeEventListener("keydown", specialKeyHandler, true);
+      window.removeEventListener("click", outsideClickHandler, true);
+    }
+  }
+}
+var PopupComponent = ({
+  children,
+  position,
+  style
+}) => {
+  const className = (0, import_clsx3.default)("hwPopup", "hwPopupContainer", position);
+  return (0, import_react.createElement)("div", { className, style }, children);
 };
-function nextItemIdx(count, key, idx) {
-  if (key === "ArrowUp") {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
+var incrementingKey = 1;
+var PopupService = class _PopupService {
+  static showPopup({
+    group = "all",
+    name = "anon",
+    left = 0,
+    position = "",
+    right = "auto",
+    top = 0,
+    width = "auto",
+    component
+  }) {
+    if (!component) {
+      throw Error(`PopupService showPopup, no component supplied`);
     }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
+    if (typeof component.props.onClose === "function") {
+      _PopupService.onClose = component.props.onClose;
     } else {
-      return idx + 1;
+      _PopupService.onClose = void 0;
+    }
+    popupOpened(name);
+    document.addEventListener("keydown", _PopupService.escapeKeyListener, true);
+    let el = document.body.querySelector(".vuuPopup." + group);
+    if (el === null) {
+      el = document.createElement("div");
+      el.className = "vuuPopup " + group;
+      document.body.appendChild(el);
+    }
+    const style = { width };
+    renderPortal(
+      (0, import_react.createElement)(
+        PopupComponent,
+        { key: incrementingKey++, position, style },
+        component
+      ),
+      el,
+      left,
+      top,
+      () => {
+        _PopupService.keepWithinThePage(el, right);
+      }
+    );
+  }
+  static escapeKeyListener(evt) {
+    if (evt.key === "Escape") {
+      _PopupService.hidePopup({ type: "escape", event: evt });
     }
   }
-}
-
-// src/menu/use-items-with-ids-next.ts
-var import_react5 = __toESM(require("react"));
-var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
-var getLabelFromChildren = (children) => {
-  if (Array.isArray(children) && isMenuItemLabel(children[0])) {
-    return children[0];
+  static hidePopup(reason, name = "anon", group = "all") {
+    var _a;
+    if (_popups.indexOf(name) !== -1) {
+      popupClosed(name);
+      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
+      if (popupRoot) {
+        import_react_dom.default.unmountComponentAtNode(popupRoot);
+      }
+    }
+    document.removeEventListener(
+      "keydown",
+      _PopupService.escapeKeyListener,
+      true
+    );
+    (_a = _PopupService == null ? void 0 : _PopupService.onClose) == null ? void 0 : _a.call(_PopupService, reason);
+  }
+  static keepWithinThePage(el, right = "auto") {
+    const target = el.querySelector(".vuuPopupContainer > *");
+    if (target) {
+      const {
+        top,
+        left,
+        width,
+        height,
+        right: currentRight
+      } = target.getBoundingClientRect();
+      const w = window.innerWidth;
+      const h = window.innerHeight;
+      const overflowH = h - (top + height);
+      if (overflowH < 0) {
+        target.style.top = Math.round(top) + overflowH + "px";
+      }
+      const overflowW = w - (left + width);
+      if (overflowW < 0) {
+        target.style.left = Math.round(left) + overflowW + "px";
+      }
+      if (typeof right === "number" && right !== currentRight) {
+        const adjustment = right - currentRight;
+        target.style.left = left + adjustment + "px";
+      }
+    }
   }
 };
-var assignId = (child, path, group, hasSeparator = false) => {
-  const {
-    props: { children }
-  } = child;
-  return {
-    childWithId: import_react5.default.cloneElement(child, {
-      hasSeparator,
-      id: `${path}`,
-      key: path,
-      children: group ? getLabelFromChildren(children) : children
-    }),
-    grandChildren: group ? children : void 0
-  };
-};
-var useItemsWithIdsNext = (childrenProp, rootId) => {
-  const normalizeChildren = (0, import_react5.useCallback)(() => {
-    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
-      const list = menus2[path] = [];
-      let idx = 0;
-      let hasSeparator = false;
-      import_react5.default.Children.forEach(children, (child) => {
-        if (isMenuItemLabel(child)) {
-        } else if (child.type === Separator) {
-          hasSeparator = true;
-        } else {
-          const hasChildItems = isMenuItemGroup(child);
-          const childPath = `${path}-${idx}`;
-          const {
-            props: { action, options }
-          } = child;
-          const { childWithId, grandChildren } = assignId(
-            child,
-            childPath,
-            hasChildItems,
-            hasSeparator
-          );
-          list.push(childWithId);
-          if (grandChildren) {
-            collectChildren(grandChildren, childPath, menus2, actions2);
-          } else {
-            actions2[childPath] = { action, options };
+var DialogService = class _DialogService {
+  static showDialog(dialog) {
+    const containerEl = ".vuuDialog";
+    const onClose = dialog.props.onClose;
+    dialogOpened();
+    import_react_dom.default.render(
+      import_react.default.cloneElement(dialog, {
+        container: containerEl,
+        onClose: () => {
+          _DialogService.closeDialog();
+          if (onClose) {
+            onClose();
           }
-          idx += 1;
-          hasSeparator = false;
         }
-      });
-      return [menus2, actions2];
-    };
-    return collectChildren(childrenProp);
-  }, [rootId, childrenProp]);
-  const [menus, actions] = (0, import_react5.useMemo)(
-    () => normalizeChildren(),
-    [normalizeChildren]
-  );
-  return [menus, actions];
+      }),
+      document.body.querySelector(containerEl)
+    );
+  }
+  static closeDialog() {
+    dialogClosed();
+    const dialogRoot = document.body.querySelector(".vuuDialog");
+    if (dialogRoot) {
+      import_react_dom.default.unmountComponentAtNode(dialogRoot);
+    }
+  }
 };
 
-// src/menu/MenuList.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var classBase3 = "vuuMenuList";
-var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: "vuuMenuItem-divider" });
-var MenuItemGroup = () => null;
-var MenuItem = ({
-  children,
-  idx,
-  options,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...props, children });
+// src/popup/Popup.tsx
+var import_clsx4 = __toESM(require("clsx"));
+
+// src/popup/useAnchoredPosition.ts
+var import_react2 = require("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 };
+    case "right":
+      return { left: right + offsetLeft, top: top + offsetTop };
+    case "below-center":
+      return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
+    case "below-right":
+      return { left, minWidth, top: bottom + offsetTop };
+    case "below-full-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"
+      );
+  }
 };
-var MenuItemLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
-MenuItemLabel.displayName = "MenuItemLabel";
-MenuItem.Label = MenuItemLabel;
-var getDisplayName = (item) => import_react6.default.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
-var isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
-var hasIcon = (child) => child.props["data-icon"];
-var MenuList = ({
-  activatedByKeyboard,
-  childMenuShowing,
+var useAnchoredPosition = ({
+  anchorElement,
+  minWidth,
+  offsetLeft = 0,
+  offsetTop = 0,
+  placement,
+  position: positionProp
+}) => {
+  const popupRef = (0, import_react2.useRef)(null);
+  const [position, setPosition] = (0, import_react2.useState)(positionProp);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (placement === "absolute" && positionProp) {
+      setPosition(positionProp);
+    } else if (anchorElement.current && placement !== "auto") {
+      const dimensions = popupRef.current === null ? void 0 : popupRef.current.getBoundingClientRect();
+      const position2 = getPositionRelativeToAnchor(
+        anchorElement.current,
+        placement,
+        offsetLeft,
+        offsetTop,
+        minWidth,
+        dimensions
+      );
+      setPosition(position2);
+    }
+  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
+  const popupCallbackRef = (0, import_react2.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_runtime2 = require("react/jsx-runtime");
+var PopupComponent2 = ({
   children,
   className,
-  defaultHighlightedIdx,
-  highlightedIdx: highlightedIdxProp,
-  id: idProp,
-  isRoot: isRoot2,
-  listItemProps,
-  onHighlightMenuItem,
-  onActivate,
-  onCloseMenu,
-  openMenu: onOpenMenu,
-  ...props
+  anchorElement,
+  minWidth,
+  placement,
+  position: positionProp
 }) => {
-  const id = (0, import_vuu_layout.useId)(idProp);
-  const root = (0, import_react6.useRef)(null);
-  const mapIdxToId = (0, import_react6.useMemo)(() => /* @__PURE__ */ new Map(), []);
-  const handleActivate = (idx) => {
-    var _a;
-    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({
-    count: import_react6.default.Children.count(children),
-    defaultHighlightedIdx,
-    highlightedIndex: highlightedIdxProp,
-    onActivate: handleActivate,
-    onHighlight: onHighlightMenuItem,
-    onOpenMenu,
-    onCloseMenu
+  const { popupRef, position } = useAnchoredPosition({
+    anchorElement,
+    minWidth,
+    placement,
+    position: positionProp
   });
-  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
-  (0, import_react6.useLayoutEffect)(() => {
-    var _a;
-    if (childMenuShowing === void 0 && activatedByKeyboard) {
-      (_a = root.current) == null ? void 0 : _a.focus();
+  return position === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_clsx4.default)(`vuuPortal`, className), ref: popupRef, style: position, children });
+};
+
+// src/dialog/Dialog.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase2 = "vuuDialog";
+var AnchorBody = { current: document.body };
+var EMPTY_PROPS = {};
+var Dialog = ({
+  PopupProps = EMPTY_PROPS,
+  children,
+  className,
+  isOpen = false,
+  onClose,
+  style,
+  title,
+  hideCloseButton = false,
+  ...htmlAttributes
+}) => {
+  const {
+    anchorElement = AnchorBody,
+    offsetLeft = 0,
+    offsetTop = 0,
+    placement = "auto"
+  } = PopupProps;
+  const rootRef = (0, import_react3.useRef)(null);
+  const portalRef = (0, import_react3.useRef)(null);
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils.useThemeAttributes)();
+  const { position } = useAnchoredPosition({
+    anchorElement,
+    offsetLeft,
+    offsetTop,
+    placement
+  });
+  const close = (0, import_react3.useCallback)(() => {
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (rootRef.current) {
+      if (isOpen) {
+        rootRef.current.showModal();
+        const { left, top } = rootRef.current.getBoundingClientRect();
+        if (portalRef.current) {
+          portalRef.current.style.cssText = `left:-${left}px;position:absolute;top:-${top}px;`;
+        }
+      } else {
+        rootRef.current.close();
+      }
+      if (placement.endsWith("center")) {
+        const { width } = rootRef.current.getBoundingClientRect();
+        rootRef.current.style.marginLeft = `-${width / 2}px`;
+      }
     }
-  }, [activatedByKeyboard, childMenuShowing]);
-  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
-  function renderContent() {
-    const propsCommonToAllListItems = {
-      ...listItemProps,
-      role: "menuitem"
-    };
-    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "span",
-        {
-          className: "vuuIconContainer",
-          "data-icon": iconName
-        },
-        "icon"
-      )
-    ].concat(childElement) : childElement;
-    function addClonedChild(list, child, idx, withIcon) {
-      var _a;
-      const {
-        children: children2,
-        className: className2,
-        "data-icon": iconName,
-        id: itemId,
-        hasSeparator,
-        label,
-        ...props2
-      } = child.props;
-      const hasSubMenu = isMenuItemGroup(child);
-      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
-      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
-      list.push(
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          MenuItem,
+  }, [isOpen, placement]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "dialog",
+    {
+      ...htmlAttributes,
+      className: (0, import_clsx5.default)(classBase2, themeClass),
+      "data-mode": dataMode,
+      onClose: close,
+      id: "vuu-dialog",
+      ref: rootRef,
+      style: { ...style, ...position },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          DialogHeader,
           {
-            ...props2,
-            ...propsCommonToAllListItems,
-            ...getMenuItemProps(
-              itemId,
-              idx,
-              (_a = child.key) != null ? _a : itemId,
-              highlightedIndex,
-              appliedFocusVisible,
-              className2,
-              hasSeparator
-            ),
-            "aria-controls": ariaControls,
-            "aria-haspopup": hasSubMenu || void 0,
-            "aria-expanded": subMenuShowing || void 0,
-            children: hasSubMenu ? maybeIcon(label != null ? label : children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+            hideCloseButton,
+            onClose: close,
+            title
           }
-        )
-      );
-    }
-    const listItems = [];
-    if (children.length > 0) {
-      const withIcon = children.some(hasIcon);
-      children.forEach((child, idx) => {
-        addClonedChild(listItems, child, idx, withIcon);
-      });
-    }
-    return listItems;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    {
-      ...props,
-      ...listProps,
-      "aria-activedescendant": getActiveDescendant(),
-      className: (0, import_classnames3.default)(classBase3, className, {
-        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
-      }),
-      "data-root": isRoot2 || void 0,
-      id,
-      ref: root,
-      role: "menu",
-      children: renderContent()
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${classBase2}-body`, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: "vuu-dialog-portal-root", ref: portalRef })
+      ]
     }
   );
 };
-var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
-  id: `menuitem-${itemId}`,
-  key: key != null ? key : idx,
-  "data-index": idx,
-  "data-highlighted": idx === highlightedIdx || void 0,
-  className: (0, import_classnames3.default)("vuuMenuItem", className, {
-    "vuuMenuItem-separator": hasSeparator,
-    focusVisible: focusVisible === idx
-  })
-});
-MenuList.displayName = "MenuList";
 
-// src/menu/use-cascade.ts
-var import_react7 = require("react");
+// src/dialog/useDialog.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var useDialog = () => {
+  const [dialogState, setDialogState] = (0, import_react4.useState)();
+  const handleClose = (0, import_react4.useCallback)(() => {
+    setDialogState(void 0);
+  }, []);
+  const dialog = dialogState ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Dialog,
+    {
+      className: "vuDialog",
+      isOpen: true,
+      onClose: handleClose,
+      style: { maxHeight: 500 },
+      title: dialogState.title,
+      hideCloseButton: dialogState.hideCloseButton,
+      children: dialogState.content
+    }
+  ) : null;
+  return {
+    dialog,
+    setDialogState
+  };
+};
 
-// src/menu/list-dom-utils.ts
-var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[aria-posinset]");
+// src/menu/ContextMenu.tsx
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
 
-// src/menu/use-cascade.ts
-var nudge = (menus, distance, pos) => {
-  return menus.map(
-    (m, i) => i === menus.length - 1 ? {
-      ...m,
-      [pos]: m[pos] - distance
-    } : m
-  );
-};
-var nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
-var nudgeUp = (menus, distance) => nudge(menus, distance, "top");
-var flipSides = (id, menus) => {
-  const [parentMenu, menu] = menus.slice(-2);
-  const el = document.getElementById(`${id}-${menu.id}`);
-  if (el === null) {
-    throw Error(`useCascade.flipSides element with id ${menu.id} not found`);
+// src/portal/Portal.tsx
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var import_react5 = require("react");
+var import_react_dom2 = require("react-dom");
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+var DEFAULT_ID = ["vuu-dialog-portal-root", "vuu-portal-root"];
+var getFirstAvailableElementById = (id) => {
+  if (Array.isArray(id)) {
+    for (const i of id) {
+      const element = document.getElementById(i);
+      if (element) {
+        return element;
+      }
+    }
+  } else {
+    return document.getElementById(id);
   }
-  const { width } = el.getBoundingClientRect();
-  return menus.map(
-    (m) => m === menu ? {
-      ...m,
-      left: parentMenu.left - (width - 2)
-    } : m
-  );
+  return null;
 };
-var getPosition = (el, openMenus) => {
-  const [{ left, top: menuTop }] = openMenus.slice(-1);
-  const { offsetWidth: width, offsetTop: top } = el;
-  return { left: left + width, top: top + menuTop };
+var Portal = ({
+  children,
+  container: containerProp = document.body,
+  id = DEFAULT_ID,
+  onRender,
+  open = true,
+  themeAttributes
+}) => {
+  var _a;
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  const portalRef = (0, import_react5.useRef)(null);
+  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils2.useThemeAttributes)(themeAttributes);
+  (0, import_react5.useLayoutEffect)(() => {
+    const root = getFirstAvailableElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = document.createElement("div");
+      portalRef.current.id = typeof id === "string" ? id : id.length > 0 ? id.at(-1) : "vuu-portal-root";
+    }
+    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_react5.useLayoutEffect)(() => {
+    requestAnimationFrame(() => {
+      onRender == null ? void 0 : onRender();
+    });
+  }, [onRender]);
+  if (open && mounted && portalRef.current && children) {
+    return (0, import_react_dom2.createPortal)(children, portalRef.current);
+  }
+  return null;
 };
-var getHostMenuId = (id, rootId) => {
-  const pos = id.lastIndexOf("-");
-  if (id.startsWith("menuitem")) {
-    return pos > -1 ? id.slice(9, pos) : rootId;
-  } else {
-    return pos > -1 ? id.slice(0, pos) : rootId;
+
+// src/menu/MenuList.tsx
+var import_clsx6 = __toESM(require("clsx"));
+var import_react8 = __toESM(require("react"));
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+
+// src/menu/use-items-with-ids-next.ts
+var import_react6 = __toESM(require("react"));
+var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+var getLabelFromChildren = (children) => {
+  if (Array.isArray(children) && isMenuItemLabel(children[0])) {
+    return children[0];
   }
 };
-var getTargetMenuId = (id) => id.slice(9);
-var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
-  if (id.startsWith("menuitem")) {
-    return {
-      hostMenuId: getHostMenuId(id, rootId),
-      targetMenuId: getTargetMenuId(id),
-      menuItemId: id,
-      isGroup: ariaHasPopup === "true",
-      isOpen: ariaExpanded === "true"
+var assignId = (child, path, group, hasSeparator = false) => {
+  const {
+    props: { children }
+  } = child;
+  return {
+    childWithId: import_react6.default.cloneElement(child, {
+      hasSeparator,
+      id: `${path}`,
+      key: path,
+      children: group ? getLabelFromChildren(children) : children
+    }),
+    grandChildren: group ? children : void 0
+  };
+};
+var useItemsWithIdsNext = (childrenProp, rootId) => {
+  const normalizeChildren = (0, import_react6.useCallback)(() => {
+    const collectChildren = (children, path = rootId, menus2 = {}, actions2 = {}) => {
+      const list = menus2[path] = [];
+      let idx = 0;
+      let hasSeparator = false;
+      import_react6.default.Children.forEach(children, (child) => {
+        if (isMenuItemLabel(child)) {
+        } else if (child.type === Separator) {
+          hasSeparator = true;
+        } else {
+          const hasChildItems = isMenuItemGroup(child);
+          const childPath = `${path}-${idx}`;
+          const {
+            props: { action, options }
+          } = child;
+          const { childWithId, grandChildren } = assignId(
+            child,
+            childPath,
+            hasChildItems,
+            hasSeparator
+          );
+          list.push(childWithId);
+          if (grandChildren) {
+            collectChildren(grandChildren, childPath, menus2, actions2);
+          } else {
+            actions2[childPath] = { action, options };
+          }
+          idx += 1;
+          hasSeparator = false;
+        }
+      });
+      return [menus2, actions2];
     };
-  } else {
-    throw Error(`getMenuItemDetails #${id} is not a menuitem`);
+    return collectChildren(childrenProp);
+  }, [rootId, childrenProp]);
+  const [menus, actions] = (0, import_react6.useMemo)(
+    () => normalizeChildren(),
+    [normalizeChildren]
+  );
+  return [menus, actions];
+};
+
+// src/menu/use-keyboard-navigation.ts
+var import_react7 = require("react");
+
+// src/menu/utils.ts
+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-index='${idx}'][aria-haspopup='true']`) !== null;
+};
+
+// src/menu/key-code.ts
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
   }
+  return result;
+}
+var Enter = "Enter";
+var Delete = "Delete";
+var actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+var verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+var horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+var functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+var specialKeys = union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+var isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
 };
-var useCascade = ({
-  id: rootId,
+
+// src/menu/use-keyboard-navigation.ts
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var useKeyboardNavigation = ({
+  autoHighlightFirstItem = false,
+  count,
+  defaultHighlightedIdx,
+  highlightedIndex: highlightedIndexProp,
   onActivate,
-  onMouseEnterItem,
-  position: { x: posX, y: posY }
+  onHighlight,
+  // onKeyDown,
+  onCloseMenu,
+  onOpenMenu
 }) => {
-  const [, forceRefresh] = (0, import_react7.useState)({});
-  const openMenus = (0, import_react7.useRef)([
-    { id: rootId, left: posX, top: posY }
-  ]);
-  const menuIsOpen = (0, import_react7.useCallback)(
-    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
-    []
-  );
-  const getOpenMenuStatus = (0, import_react7.useCallback)((menuId) => {
-    const state = menuState.current[menuId];
-    if (state === void 0) {
-      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
-    }
-    return state;
-  }, []);
-  const setOpenMenus = (0, import_react7.useCallback)((menus) => {
-    openMenus.current = menus;
-    forceRefresh({});
-  }, []);
-  const menuOpenPendingTimeout = (0, import_react7.useRef)();
-  const menuClosePendingTimeout = (0, import_react7.useRef)();
-  const menuState = (0, import_react7.useRef)({ [rootId]: "no-popup" });
-  const openMenu = (0, import_react7.useCallback)(
-    (hostMenuId = rootId, targetMenuId, itemId = null) => {
-      if (hostMenuId === rootId && itemId === null) {
-        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
-      } else {
-        menuState.current[hostMenuId] = "popup-open";
-        const el = document.getElementById(itemId);
-        if (el !== null) {
-          const { left, top } = getPosition(el, openMenus.current);
-          setOpenMenus(
-            openMenus.current.concat({ id: targetMenuId, left, top })
-          );
-        } else {
-          throw Error(`openMenu no menuItem ${itemId}`);
-        }
-      }
+  var _a;
+  if ((0, import_vuu_utils3.isValidNumber)(highlightedIndexProp) && (0, import_vuu_utils3.isValidNumber)(defaultHighlightedIdx)) {
+    throw Error(
+      "useKeyboardNavigation do not pass values for both highlightedIndex and defaultHighlightedIdx"
+    );
+  }
+  const controlledHighlighting = (0, import_vuu_utils3.isValidNumber)(highlightedIndexProp);
+  const highlightedIndexRef = (0, import_react7.useRef)(
+    (_a = defaultHighlightedIdx != null ? defaultHighlightedIdx : highlightedIndexProp) != null ? _a : autoHighlightFirstItem ? 0 : -1
+  );
+  const [, forceRender] = (0, import_react7.useState)(null);
+  const setHighlightedIdx = (0, import_react7.useCallback)(
+    (idx) => {
+      highlightedIndexRef.current = idx;
+      onHighlight == null ? void 0 : onHighlight(idx);
+      forceRender({});
     },
-    [rootId, posX, posY, setOpenMenus]
+    [onHighlight]
   );
-  const closeMenu = (0, import_react7.useCallback)(
-    (menuId) => {
-      if (menuId === rootId) {
-        setOpenMenus([]);
-      } else {
-        const menus = openMenus.current.slice();
-        const lastMenu = menus.pop();
-        menuState.current[lastMenu.id] = "no-popup";
-        const parentMenu = menus.at(-1);
-        if (parentMenu) {
-          menuState.current[parentMenu.id] = "no-popup";
+  const setHighlightedIndex = (0, import_react7.useCallback)(
+    (idx) => {
+      if (idx !== highlightedIndexRef.current) {
+        if (!controlledHighlighting) {
+          setHighlightedIdx(idx);
         }
-        setOpenMenus(menus);
       }
     },
-    [rootId, setOpenMenus]
+    [controlledHighlighting, setHighlightedIdx]
   );
-  const closeMenus = (0, import_react7.useCallback)(
-    (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);
-        menus.pop();
-        menuState.current[lastMenuId] = "no-popup";
-        menuState.current[parentMenuId] = "no-popup";
-        ({ id: lastMenuId } = menus[menus.length - 1]);
-      }
-      if (menus.length < openMenus.current.length) {
-        setOpenMenus(menus);
+  const keyBoardNavigation = (0, import_react7.useRef)(true);
+  const ignoreFocus = (0, import_react7.useRef)(false);
+  const setIgnoreFocus = (value) => ignoreFocus.current = value;
+  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
+  const navigateChildldItems = (0, import_react7.useCallback)(
+    (e) => {
+      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
+      if (nextIdx !== highlightedIndexRef.current) {
+        setHighlightedIndex(nextIdx);
       }
     },
-    [rootId, setOpenMenus]
-  );
-  const clearAnyScheduledOpenTasks = (0, import_react7.useCallback)(() => {
-    if (menuOpenPendingTimeout.current) {
-      clearTimeout(menuOpenPendingTimeout.current);
-      menuOpenPendingTimeout.current = void 0;
-    }
-  }, []);
-  const scheduleOpen = (0, import_react7.useCallback)(
-    (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);
-      }, delay);
-    },
-    [clearAnyScheduledOpenTasks, closeMenus, openMenu]
-  );
-  const scheduleClose = (0, import_react7.useCallback)(
-    (hostMenuId, openMenuId, itemId) => {
-      menuState.current[openMenuId] = "pending-close";
-      menuClosePendingTimeout.current = window.setTimeout(() => {
-        closeMenus(itemId);
-      }, 400);
-    },
-    [closeMenus]
+    [count, setHighlightedIndex]
   );
-  const handleRender = (0, import_react7.useCallback)(() => {
-    const { current: menus } = openMenus;
-    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;
-      if (right > clientWidth) {
-        const newMenus = menus.length > 1 ? flipSides(rootId, menus) : nudgeLeft(menus, right - clientWidth);
-        setOpenMenus(newMenus);
-      } else if (bottom > clientHeight) {
-        const newMenus = nudgeUp(menus, bottom - clientHeight);
-        setOpenMenus(newMenus);
-      }
-      if (typeof el.tabIndex === "number") {
-        el.focus();
-      }
-    }
-  }, [rootId, setOpenMenus]);
-  const triggerChildMenu = (0, import_react7.useCallback)(
-    (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, 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, delay);
-      } else if (state === "popup-open") {
-        if (menuIsOpen(targetMenuId)) {
-          const menuStatus = getOpenMenuStatus(targetMenuId);
-          closeMenus(menuItemId);
-          switch (menuStatus) {
-            case "pending-close":
-              clearTimeout(menuClosePendingTimeout.current);
-              menuClosePendingTimeout.current = void 0;
-              menuState.current[targetMenuId] = "no-popup";
-              clearAnyScheduledOpenTasks();
-              break;
-            default:
-          }
-        } else {
-          const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
-          if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
-            scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
-            if (isGroup && !isOpen) {
-              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
-            }
-          } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
-            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
-          } else if (isGroup) {
-            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
-          } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
-            closeMenus(menuItemId);
-          }
+  const handleKeyDown = (0, import_react7.useCallback)(
+    (e) => {
+      if (isNavigationKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        keyBoardNavigation.current = true;
+        navigateChildldItems(e);
+      } else if ((e.key === "ArrowRight" || e.key === "Enter") && hasPopup(e.target, highlightedIndex)) {
+        const menuEl = e.target;
+        const menuItemEl = menuEl.querySelector(
+          `:scope > [data-index='${highlightedIndex}']`
+        );
+        if (menuItemEl) {
+          onOpenMenu == null ? void 0 : onOpenMenu(menuItemEl, true);
         }
-      }
-      if (state === "pending-close") {
-        clearAnyScheduledOpenTasks();
-        clearTimeout(menuClosePendingTimeout.current);
-        menuClosePendingTimeout.current = void 0;
-        menuState.current[hostMenuId] = "popup-open";
+      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
+        onCloseMenu(highlightedIndex);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        onActivate && onActivate(highlightedIndex);
+      } else if (e.key === "Tab") {
+        onCloseMenu(-1);
       }
     },
     [
-      clearAnyScheduledOpenTasks,
-      closeMenus,
-      getOpenMenuStatus,
-      menuIsOpen,
-      rootId,
-      scheduleClose,
-      scheduleOpen
+      highlightedIndex,
+      navigateChildldItems,
+      onActivate,
+      onCloseMenu,
+      onOpenMenu
     ]
   );
-  const listItemProps = (0, import_react7.useMemo)(
+  const listProps = (0, import_react7.useMemo)(
     () => ({
-      onMouseEnter: (evt) => {
-        const menuItemEl = closestListItem(evt.target);
-        triggerChildMenu(menuItemEl);
-        onMouseEnterItem(evt, menuItemEl.id);
+      onFocus: () => {
+        if (highlightedIndex === -1) {
+          setHighlightedIdx(0);
+        }
       },
-      onClick: (evt) => {
-        const listItemEl = closestListItem(evt.target);
-        const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
-        if (isGroup) {
-          triggerChildMenu(listItemEl);
-        } else {
-          onActivate(menuItemId);
+      onKeyDown: handleKeyDown,
+      onMouseDownCapture: () => {
+        keyBoardNavigation.current = false;
+        setIgnoreFocus(true);
+      },
+      // onMouseEnter would seem less expensive but it misses some cases
+      onMouseMove: () => {
+        if (keyBoardNavigation.current) {
+          keyBoardNavigation.current = false;
         }
+      },
+      onMouseLeave: () => {
+        keyBoardNavigation.current = true;
+        setIgnoreFocus(false);
+        setHighlightedIndex(-1);
       }
     }),
-    [onActivate, onMouseEnterItem, rootId, triggerChildMenu]
+    [handleKeyDown, highlightedIndex, setHighlightedIdx, setHighlightedIndex]
   );
   return {
-    closeMenu,
-    handleRender,
-    listItemProps,
-    openMenu: triggerChildMenu,
-    openMenus: openMenus.current
+    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
+    controlledHighlighting,
+    highlightedIndex,
+    setHighlightedIndex,
+    // keyBoardNavigation,
+    listProps,
+    setIgnoreFocus
   };
 };
-
-// src/menu/ContextMenu.tsx
-var import_vuu_layout2 = require("@vuu-ui/vuu-layout");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var import_react9 = require("react");
-var noop = () => void 0;
-var ContextMenu = ({
-  PortalProps: PortalProps2,
-  activatedByKeyboard,
-  children: childrenProp,
-  className,
-  id: idProp,
-  onClose = () => void 0,
-  position = { x: 0, y: 0 },
-  style,
-  ...menuListProps
-}) => {
-  const closeHandlerRef = (0, import_react8.useRef)(onClose);
-  closeHandlerRef.current = onClose;
-  const id = (0, import_vuu_layout2.useId)(idProp);
-  const closeMenuRef = (0, import_react8.useRef)(noop);
-  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
-  const navigatingWithKeyboard = (0, import_react8.useRef)(activatedByKeyboard);
-  const handleMouseEnterItem = (0, import_react8.useCallback)(() => {
-    navigatingWithKeyboard.current = false;
-  }, []);
-  const handleActivate = (0, import_react8.useCallback)(
-    (menuItemId) => {
-      const actionId = menuItemId.slice(9);
-      const { action, options } = actions[actionId];
-      closeMenuRef.current(id);
-      onClose({
-        type: "menu-action",
-        menuId: action,
-        options
-      });
-    },
-    [actions, id, onClose]
-  );
-  const {
-    closeMenu,
-    listItemProps,
-    openMenu: onOpenMenu,
-    openMenus,
-    handleRender
-  } = useCascade({
-    // FIXME
-    id: `${id}`,
-    onActivate: handleActivate,
-    onMouseEnterItem: handleMouseEnterItem,
-    position
-  });
-  closeMenuRef.current = closeMenu;
-  const handleCloseMenu = () => {
-    navigatingWithKeyboard.current = true;
-    closeMenu();
-  };
-  const handleHighlightMenuItem = () => {
-  };
-  const lastMenu = openMenus.length - 1;
-  const getChildMenuId = (i) => {
-    if (i >= lastMenu) {
-      return void 0;
+function nextItemIdx(count, key, idx) {
+  if (key === "ArrowUp") {
+    if (idx > 0) {
+      return idx - 1;
     } else {
-      const { id: id2 } = openMenus[i + 1];
-      return id2;
+      return idx;
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
-    const childMenuId = getChildMenuId(i);
-    return /* @__PURE__ */ (0, import_react9.createElement)(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      PopupComponent,
-      {
-        anchorElement: { current: document.body },
-        placement: "absolute",
-        position: { left, top },
-        children: /* @__PURE__ */ (0, import_react9.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";
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
 
-// src/menu/context-menu-provider.tsx
-var import_react10 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ContextMenuContext = (0, import_react10.createContext)(
-  null
-);
-var Provider = ({
+// src/menu/MenuList.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase3 = "vuuMenuList";
+var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "vuuMenuItem-divider" });
+var MenuItemGroup = () => null;
+var MenuItem = ({
   children,
-  context,
-  menuActionHandler,
-  menuBuilder
+  idx,
+  options,
+  ...props
 }) => {
-  const menuBuilders = (0, import_react10.useMemo)(() => {
-    if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
-      return context.menuBuilders.concat(menuBuilder);
-    } else if (menuBuilder) {
-      return [menuBuilder];
-    } else {
-      return (context == null ? void 0 : context.menuBuilders) || [];
-    }
-  }, [context, menuBuilder]);
-  const handleMenuAction = (0, import_react10.useCallback)(
-    (reason) => {
-      var _a;
-      if (menuActionHandler == null ? void 0 : menuActionHandler(reason)) {
-        return true;
-      }
-      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, reason)) {
-        return true;
-      }
-    },
-    [context, menuActionHandler]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    ContextMenuContext.Provider,
-    {
-      value: {
-        menuActionHandler: handleMenuAction,
-        menuBuilders
-      },
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...props, children });
 };
-var ContextMenuProvider = ({
+var MenuItemLabel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+var getDisplayName = (item) => import_react8.default.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+var isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+var hasIcon = (child) => child.props["data-icon"];
+var MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
   children,
-  label,
-  menuActionHandler,
-  menuBuilder
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot: isRoot2,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    Provider,
+  const id = (0, import_vuu_utils4.useId)(idProp);
+  const root = (0, import_react8.useRef)(null);
+  const mapIdxToId = (0, import_react8.useMemo)(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    var _a;
+    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({
+    count: import_react8.default.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  (0, import_react8.useLayoutEffect)(() => {
+    var _a;
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      (_a = root.current) == null ? void 0 : _a.focus();
+    }
+  }, [activatedByKeyboard, childMenuShowing]);
+  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
+  function renderContent() {
+    const propsCommonToAllListItems = {
+      ...listItemProps,
+      role: "menuitem"
+    };
+    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      var _a;
+      const {
+        children: children2,
+        className: className2,
+        "data-icon": iconName,
+        id: itemId,
+        hasSeparator,
+        label,
+        ...props2
+      } = child.props;
+      const hasSubMenu = isMenuItemGroup(child);
+      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;
+      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
+      list.push(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              itemId,
+              idx,
+              (_a = child.key) != null ? _a : itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            children: hasSubMenu ? maybeIcon(label != null ? label : children2, withIcon, iconName) : maybeIcon(children2, withIcon, iconName)
+          }
+        )
+      );
+    }
+    const listItems = [];
+    if (children.length > 0) {
+      const withIcon = children.some(hasIcon);
+      children.forEach((child, idx) => {
+        addClonedChild(listItems, child, idx, withIcon);
+      });
+    }
+    return listItems;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
     {
-      context: parentContext,
-      label,
-      menuActionHandler,
-      menuBuilder,
-      children
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: (0, import_clsx6.default)(classBase3, className, {
+        [`${classBase3}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot2 || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
     }
-  ) });
+  );
 };
+var getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key != null ? key : idx,
+  "data-index": idx,
+  "data-highlighted": idx === highlightedIdx || void 0,
+  className: (0, import_clsx6.default)("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
 
-// src/menu/useContextMenu.tsx
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var import_react13 = require("react");
-
-// src/popup/popup-service.ts
-var import_classnames5 = __toESM(require("classnames"));
-var import_react11 = __toESM(require("react"));
-var import_react_dom2 = __toESM(require("react-dom"));
+// src/menu/use-cascade.ts
+var import_react9 = require("react");
 
-// 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;
+// src/menu/list-dom-utils.ts
+var closestListItem = (el) => el == null ? void 0 : el.closest("[data-index],[aria-posinset]");
+
+// src/menu/use-cascade.ts
+var nudge = (menus, distance, pos) => {
+  return menus.map(
+    (m, i) => i === menus.length - 1 ? {
+      ...m,
+      [pos]: m[pos] - distance
+    } : m
+  );
+};
+var nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+var nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+var flipSides = (id, menus) => {
+  const [parentMenu, menu] = menus.slice(-2);
+  const el = document.getElementById(`${id}-${menu.id}`);
+  if (el === null) {
+    throw Error(`useCascade.flipSides element with id ${menu.id} not found`);
   }
-  win.document.body.appendChild(el);
-  return el;
+  const { width } = el.getBoundingClientRect();
+  return menus.map(
+    (m) => m === menu ? {
+      ...m,
+      left: parentMenu.left - (width - 2)
+    } : m
+  );
 };
-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);
+var getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
 };
-
-// src/popup/popup-service.ts
-var _dialogOpen = false;
-var _popups = [];
-var reasonIsMenuAction = (reason) => (reason == null ? void 0 : reason.type) === "menu-action";
-var reasonIsClickAway = (reason) => (reason == null ? void 0 : reason.type) === "click-away";
-function specialKeyHandler(e) {
-  if (e.key === "Esc") {
-    if (_popups.length) {
-      closeAllPopups();
-    } else if (_dialogOpen) {
-      const dialogRoot = document.body.querySelector(".vuuDialog");
-      if (dialogRoot) {
-        import_react_dom2.default.unmountComponentAtNode(dialogRoot);
-      }
-    }
-  }
-}
-function outsideClickHandler(e) {
-  if (_popups.length) {
-    const popupContainers = document.body.querySelectorAll(
-      ".vuuPopup,#vuu-portal-root"
-    );
-    for (let i = 0; i < popupContainers.length; i++) {
-      if (popupContainers[i].contains(e.target)) {
-        return;
-      }
-    }
-    closeAllPopups({ mouseEvt: e, type: "click-away" });
-  }
-}
-function closeAllPopups(reason) {
-  if (_popups.length === 1) {
-    PopupService.hidePopup(reason, "anon", "all");
-  } else if (_popups.length) {
-    const popupContainers = document.body.querySelectorAll(".vuuPopup");
-    for (let i = 0; i < popupContainers.length; i++) {
-      import_react_dom2.default.unmountComponentAtNode(popupContainers[i]);
-    }
-    popupClosed("*");
-  }
-}
-function dialogOpened() {
-  if (_dialogOpen === false) {
-    _dialogOpen = true;
-    window.addEventListener("keydown", specialKeyHandler, true);
-  }
-}
-function dialogClosed() {
-  if (_dialogOpen) {
-    _dialogOpen = false;
-    window.removeEventListener("keydown", specialKeyHandler, true);
-  }
-}
-function popupOpened(name) {
-  if (_popups.indexOf(name) === -1) {
-    _popups.push(name);
-    if (_dialogOpen === false) {
-      window.addEventListener("keydown", specialKeyHandler, true);
-      window.addEventListener("click", outsideClickHandler, true);
-    }
+var getHostMenuId = (id, rootId) => {
+  const pos = id.lastIndexOf("-");
+  if (id.startsWith("menuitem")) {
+    return pos > -1 ? id.slice(9, pos) : rootId;
+  } else {
+    return pos > -1 ? id.slice(0, pos) : rootId;
   }
-}
-function popupClosed(name) {
-  if (_popups.length) {
-    if (name === "*") {
-      _popups.length = 0;
-    } else {
-      const pos = _popups.indexOf(name);
-      if (pos !== -1) {
-        _popups.splice(pos, 1);
-      }
-    }
-    if (_popups.length === 0 && _dialogOpen === false) {
-      window.removeEventListener("keydown", specialKeyHandler, true);
-      window.removeEventListener("click", outsideClickHandler, true);
-    }
+};
+var getTargetMenuId = (id) => id.slice(9);
+var getMenuItemDetails = ({ ariaExpanded, ariaHasPopup, id }, rootId) => {
+  if (id.startsWith("menuitem")) {
+    return {
+      hostMenuId: getHostMenuId(id, rootId),
+      targetMenuId: getTargetMenuId(id),
+      menuItemId: id,
+      isGroup: ariaHasPopup === "true",
+      isOpen: ariaExpanded === "true"
+    };
+  } else {
+    throw Error(`getMenuItemDetails #${id} is not a menuitem`);
   }
-}
-var PopupComponent2 = ({
-  children,
-  position,
-  style
-}) => {
-  const className = (0, import_classnames5.default)("hwPopup", "hwPopupContainer", position);
-  return (0, import_react11.createElement)("div", { className, style }, children);
 };
-var incrementingKey = 1;
-var PopupService = class {
-  static showPopup({
-    group = "all",
-    name = "anon",
-    left = 0,
-    position = "",
-    right = "auto",
-    top = 0,
-    width = "auto",
-    component
-  }) {
-    if (!component) {
-      throw Error(`PopupService showPopup, no component supplied`);
-    }
-    if (typeof component.props.onClose === "function") {
-      PopupService.onClose = component.props.onClose;
-    } else {
-      PopupService.onClose = void 0;
-    }
-    popupOpened(name);
-    document.addEventListener("keydown", PopupService.escapeKeyListener, true);
-    let el = document.body.querySelector(".vuuPopup." + group);
-    if (el === null) {
-      el = document.createElement("div");
-      el.className = "vuuPopup " + group;
-      document.body.appendChild(el);
+var useCascade = ({
+  id: rootId,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = (0, import_react9.useState)({});
+  const openMenus = (0, import_react9.useRef)([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = (0, import_react9.useCallback)(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = (0, import_react9.useCallback)((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
     }
-    const style = { width };
-    renderPortal(
-      (0, import_react11.createElement)(
-        PopupComponent2,
-        { key: incrementingKey++, position, style },
-        component
-      ),
-      el,
-      left,
-      top,
-      () => {
-        PopupService.keepWithinThePage(el, right);
+    return state;
+  }, []);
+  const setOpenMenus = (0, import_react9.useCallback)((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = (0, import_react9.useRef)();
+  const menuClosePendingTimeout = (0, import_react9.useRef)();
+  const menuState = (0, import_react9.useRef)({ [rootId]: "no-popup" });
+  const openMenu = (0, import_react9.useCallback)(
+    (hostMenuId = rootId, targetMenuId, itemId = null) => {
+      if (hostMenuId === rootId && itemId === null) {
+        setOpenMenus([{ id: rootId, left: posX, top: posY }]);
+      } else {
+        menuState.current[hostMenuId] = "popup-open";
+        const el = document.getElementById(itemId);
+        if (el !== null) {
+          const { left, top } = getPosition(el, openMenus.current);
+          setOpenMenus(
+            openMenus.current.concat({ id: targetMenuId, left, top })
+          );
+        } else {
+          throw Error(`openMenu no menuItem ${itemId}`);
+        }
       }
-    );
-  }
-  static escapeKeyListener(evt) {
-    if (evt.key === "Escape") {
-      PopupService.hidePopup({ type: "escape", event: evt });
+    },
+    [rootId, posX, posY, setOpenMenus]
+  );
+  const closeMenu = (0, import_react9.useCallback)(
+    (menuId) => {
+      if (menuId === rootId) {
+        setOpenMenus([]);
+      } else {
+        const menus = openMenus.current.slice();
+        const lastMenu = menus.pop();
+        menuState.current[lastMenu.id] = "no-popup";
+        const parentMenu = menus.at(-1);
+        if (parentMenu) {
+          menuState.current[parentMenu.id] = "no-popup";
+        }
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const closeMenus = (0, import_react9.useCallback)(
+    (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);
+        menus.pop();
+        menuState.current[lastMenuId] = "no-popup";
+        menuState.current[parentMenuId] = "no-popup";
+        ({ id: lastMenuId } = menus[menus.length - 1]);
+      }
+      if (menus.length < openMenus.current.length) {
+        setOpenMenus(menus);
+      }
+    },
+    [rootId, setOpenMenus]
+  );
+  const clearAnyScheduledOpenTasks = (0, import_react9.useCallback)(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
     }
-  }
-  static hidePopup(reason, name = "anon", group = "all") {
-    var _a;
-    if (_popups.indexOf(name) !== -1) {
-      popupClosed(name);
-      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
-      if (popupRoot) {
-        import_react_dom2.default.unmountComponentAtNode(popupRoot);
+  }, []);
+  const scheduleOpen = (0, import_react9.useCallback)(
+    (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);
+      }, delay);
+    },
+    [clearAnyScheduledOpenTasks, closeMenus, openMenu]
+  );
+  const scheduleClose = (0, import_react9.useCallback)(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = (0, import_react9.useCallback)(() => {
+    const { current: menus } = openMenus;
+    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;
+      if (right > clientWidth) {
+        const newMenus = menus.length > 1 ? flipSides(rootId, menus) : nudgeLeft(menus, right - clientWidth);
+        setOpenMenus(newMenus);
+      } else if (bottom > clientHeight) {
+        const newMenus = nudgeUp(menus, bottom - clientHeight);
+        setOpenMenus(newMenus);
+      }
+      if (typeof el.tabIndex === "number") {
+        el.focus();
       }
     }
-    document.removeEventListener(
-      "keydown",
-      PopupService.escapeKeyListener,
-      true
-    );
-    (_a = PopupService == null ? void 0 : PopupService.onClose) == null ? void 0 : _a.call(PopupService, reason);
-  }
-  static keepWithinThePage(el, right = "auto") {
-    const target = el.querySelector(".vuuPopupContainer > *");
-    if (target) {
+  }, [rootId, setOpenMenus]);
+  const triggerChildMenu = (0, import_react9.useCallback)(
+    (menuItemEl, immediate = false) => {
+      const { hostMenuId, targetMenuId, menuItemId, isGroup, isOpen } = getMenuItemDetails(menuItemEl, rootId);
       const {
-        top,
-        left,
-        width,
-        height,
-        right: currentRight
-      } = target.getBoundingClientRect();
-      const w = window.innerWidth;
-      const h = window.innerHeight;
-      const overflowH = h - (top + height);
-      if (overflowH < 0) {
-        target.style.top = Math.round(top) + overflowH + "px";
+        current: { [hostMenuId]: state }
+      } = menuState;
+      const delay = immediate ? 0 : void 0;
+      if (state === "no-popup" && isGroup) {
+        menuState.current[hostMenuId] = "popup-pending";
+        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, delay);
+      } else if (state === "popup-open") {
+        if (menuIsOpen(targetMenuId)) {
+          const menuStatus = getOpenMenuStatus(targetMenuId);
+          closeMenus(menuItemId);
+          switch (menuStatus) {
+            case "pending-close":
+              clearTimeout(menuClosePendingTimeout.current);
+              menuClosePendingTimeout.current = void 0;
+              menuState.current[targetMenuId] = "no-popup";
+              clearAnyScheduledOpenTasks();
+              break;
+            default:
+          }
+        } else {
+          const [parentOfLastOpenedMenu, lastOpenedMenu] = openMenus.current.slice(-2);
+          if (parentOfLastOpenedMenu.id === hostMenuId && menuState.current[lastOpenedMenu.id] !== "pending-close") {
+            scheduleClose(hostMenuId, lastOpenedMenu.id, menuItemId);
+            if (isGroup && !isOpen) {
+              scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+            }
+          } else if (parentOfLastOpenedMenu.id === hostMenuId && isGroup && menuItemId !== lastOpenedMenu.id && menuState.current[lastOpenedMenu.id] === "pending-close") {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (isGroup) {
+            scheduleOpen(hostMenuId, targetMenuId, menuItemId, delay);
+          } else if (!(menuState.current[lastOpenedMenu.id] === "pending-close")) {
+            closeMenus(menuItemId);
+          }
+        }
       }
-      const overflowW = w - (left + width);
-      if (overflowW < 0) {
-        target.style.left = Math.round(left) + overflowW + "px";
+      if (state === "pending-close") {
+        clearAnyScheduledOpenTasks();
+        clearTimeout(menuClosePendingTimeout.current);
+        menuClosePendingTimeout.current = void 0;
+        menuState.current[hostMenuId] = "popup-open";
       }
-      if (typeof right === "number" && right !== currentRight) {
-        const adjustment = right - currentRight;
-        target.style.left = left + adjustment + "px";
+    },
+    [
+      clearAnyScheduledOpenTasks,
+      closeMenus,
+      getOpenMenuStatus,
+      menuIsOpen,
+      rootId,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  const listItemProps = (0, import_react9.useMemo)(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = closestListItem(evt.target);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        const listItemEl = closestListItem(evt.target);
+        const { isGroup, menuItemId } = getMenuItemDetails(listItemEl, rootId);
+        if (isGroup) {
+          triggerChildMenu(listItemEl);
+        } else {
+          onActivate(menuItemId);
+        }
       }
-    }
-  }
+    }),
+    [onActivate, onMouseEnterItem, rootId, triggerChildMenu]
+  );
+  return {
+    closeMenu,
+    handleRender,
+    listItemProps,
+    openMenu: triggerChildMenu,
+    openMenus: openMenus.current
+  };
 };
-var DialogService = class {
-  static showDialog(dialog) {
-    const containerEl = ".vuuDialog";
-    const onClose = dialog.props.onClose;
-    dialogOpened();
-    import_react_dom2.default.render(
-      import_react11.default.cloneElement(dialog, {
-        container: containerEl,
-        onClose: () => {
-          DialogService.closeDialog();
-          if (onClose) {
-            onClose();
-          }
-        }
-      }),
-      document.body.querySelector(containerEl)
-    );
-  }
-  static closeDialog() {
-    dialogClosed();
-    const dialogRoot = document.body.querySelector(".vuuDialog");
-    if (dialogRoot) {
-      import_react_dom2.default.unmountComponentAtNode(dialogRoot);
+
+// src/menu/ContextMenu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var noop = () => void 0;
+var ContextMenu = ({
+  PortalProps: PortalProps2,
+  activatedByKeyboard,
+  children: childrenProp,
+  className,
+  id: idProp,
+  onClose = () => void 0,
+  position = { x: 0, y: 0 },
+  style,
+  ...menuListProps
+}) => {
+  const closeHandlerRef = (0, import_react10.useRef)(onClose);
+  closeHandlerRef.current = onClose;
+  const id = (0, import_vuu_utils5.useId)(idProp);
+  const closeMenuRef = (0, import_react10.useRef)(noop);
+  const [menus, actions] = useItemsWithIdsNext(childrenProp, id);
+  const navigatingWithKeyboard = (0, import_react10.useRef)(activatedByKeyboard);
+  const handleMouseEnterItem = (0, import_react10.useCallback)(() => {
+    navigatingWithKeyboard.current = false;
+  }, []);
+  const handleActivate = (0, import_react10.useCallback)(
+    (menuItemId) => {
+      const actionId = menuItemId.slice(9);
+      const { action, options } = actions[actionId];
+      closeMenuRef.current(id);
+      onClose({
+        type: "menu-action",
+        menuId: action,
+        options
+      });
+    },
+    [actions, id, onClose]
+  );
+  const {
+    closeMenu,
+    listItemProps,
+    openMenu: onOpenMenu,
+    openMenus,
+    handleRender
+  } = useCascade({
+    // FIXME
+    id: `${id}`,
+    onActivate: handleActivate,
+    onMouseEnterItem: handleMouseEnterItem,
+    position
+  });
+  closeMenuRef.current = closeMenu;
+  const handleCloseMenu = () => {
+    navigatingWithKeyboard.current = true;
+    closeMenu();
+  };
+  const handleHighlightMenuItem = () => {
+  };
+  const lastMenu = openMenus.length - 1;
+  const getChildMenuId = (i) => {
+    if (i >= lastMenu) {
+      return void 0;
+    } else {
+      const { id: id2 } = openMenus[i + 1];
+      return id2;
     }
-  }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i, all) => {
+    const childMenuId = getChildMenuId(i);
+    return /* @__PURE__ */ (0, import_react11.createElement)(Portal, { ...PortalProps2, key: i, onRender: handleRender }, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      PopupComponent2,
+      {
+        anchorElement: { current: document.body },
+        placement: "absolute",
+        position: { left, top },
+        children: /* @__PURE__ */ (0, import_react11.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/popup/Popup.tsx
-var import_classnames6 = __toESM(require("classnames"));
-
-// src/popup/useAnchoredPosition.ts
+// src/menu/context-menu-provider.tsx
 var import_react12 = require("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 };
-    case "right":
-      return { left: right + offsetLeft, top: top + offsetTop };
-    case "below-center":
-      return { left: left + width / 2 + offsetLeft, top: bottom + offsetTop };
-    case "below-right":
-      return { left, minWidth, top: bottom + offsetTop };
-    case "below-full-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"
-      );
-  }
-};
-var useAnchoredPosition = ({
-  anchorElement,
-  minWidth,
-  offsetLeft = 0,
-  offsetTop = 0,
-  placement,
-  position: positionProp
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ContextMenuContext = (0, import_react12.createContext)(
+  null
+);
+var Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
 }) => {
-  const popupRef = (0, import_react12.useRef)(null);
-  const [position, setPosition] = (0, import_react12.useState)(positionProp);
-  (0, import_react12.useLayoutEffect)(() => {
-    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,
-        minWidth,
-        dimensions
-      );
-      setPosition(position2);
+  const menuBuilders = (0, import_react12.useMemo)(() => {
+    if ((context == null ? void 0 : context.menuBuilders) && menuBuilder) {
+      return context.menuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return (context == null ? void 0 : context.menuBuilders) || [];
     }
-  }, [anchorElement, minWidth, offsetLeft, offsetTop, placement, positionProp]);
-  const popupCallbackRef = (0, import_react12.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 }
-          )
-        );
+  }, [context, menuBuilder]);
+  const handleMenuAction = (0, import_react12.useCallback)(
+    (reason) => {
+      var _a;
+      if (menuActionHandler == null ? void 0 : menuActionHandler(reason)) {
+        return true;
+      }
+      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, reason)) {
+        return true;
       }
     },
-    [anchorElement, offsetLeft, offsetTop, placement]
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
   );
-  return {
-    position,
-    popupRef: placement === "center" ? popupCallbackRef : void 0
-  };
 };
-
-// src/popup/Popup.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var PopupComponent = ({
+var ContextMenuProvider = ({
   children,
-  className,
-  anchorElement,
-  minWidth,
-  placement,
-  position: positionProp
+  label,
+  menuActionHandler,
+  menuBuilder
 }) => {
-  const { popupRef, position } = useAnchoredPosition({
-    anchorElement,
-    minWidth,
-    placement,
-    position: positionProp
-  });
-  return position === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: (0, import_classnames6.default)(`vuuPortal`, className), ref: popupRef, style: position, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
 };
 
 // src/menu/useContextMenu.tsx
-var import_vuu_shell2 = require("@vuu-ui/vuu-shell");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react13 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var useContextMenu = (menuBuilder, menuActionHandler) => {
   const ctx = (0, import_react13.useContext)(ContextMenuContext);
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell2.useThemeAttributes)();
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils6.useThemeAttributes)();
   const themeAttributes = (0, import_react13.useMemo)(
     () => ({
       themeClass,
@@ -1509,7 +1564,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_runtime8.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    const fromDescriptor = (menuItem, i) => (0, import_vuu_utils6.isGroupMenuItemDescriptor)(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       MenuItem,
       {
         action: menuItem.action,
@@ -1547,10 +1602,10 @@ var showContextMenu = (e, menuDescriptors, handleContextMenuAction, {
 };
 
 // src/popup-menu/PopupMenu.tsx
-var import_react14 = require("react");
-var import_classnames7 = __toESM(require("classnames"));
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
-var import_vuu_layout3 = require("@vuu-ui/vuu-layout");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react14 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var classBase4 = "vuuPopupMenu";
 var getPosition2 = (element) => {
@@ -1575,7 +1630,7 @@ var PopupMenu = ({
   const rootRef = (0, import_react14.useRef)(null);
   const suppressShowMenuRef = (0, import_react14.useRef)(false);
   const [menuOpen, setMenuOpen] = (0, import_react14.useState)(false);
-  const id = (0, import_vuu_layout3.useId)(idProp);
+  const id = (0, import_vuu_utils7.useId)(idProp);
   const [showContextMenu2] = useContextMenu(menuBuilder, menuActionHandler);
   const handleOpenMenu = (0, import_react14.useCallback)((el) => {
     console.log(`menu Open `, {
@@ -1635,7 +1690,7 @@ var PopupMenu = ({
       "aria-controls": `${id}-menu-root`,
       "aria-expanded": menuOpen,
       "aria-haspopup": "menu",
-      className: (0, import_classnames7.default)(classBase4, className, {
+      className: (0, import_clsx7.default)(classBase4, className, {
         [`${classBase4}-withCaption`]: label !== void 0,
         [`${classBase4}-open`]: menuOpen
       }),
@@ -1651,16 +1706,16 @@ var PopupMenu = ({
 };
 
 // src/prompt/Prompt.tsx
-var import_vuu_shell3 = require("@vuu-ui/vuu-shell");
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
 var import_core3 = require("@salt-ds/core");
-var import_classnames8 = __toESM(require("classnames"));
+var import_clsx8 = __toESM(require("clsx"));
 var import_react15 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var classBase5 = "vuuPrompt";
-var AnchorBody = { current: document.body };
-var EMPTY_PROPS = {};
+var AnchorBody2 = { current: document.body };
+var EMPTY_PROPS2 = {};
 var Prompt = ({
-  PopupProps = EMPTY_PROPS,
+  PopupProps = EMPTY_PROPS2,
   cancelButtonLabel = "Cancel",
   confirmButtonLabel = "Confirm",
   icon,
@@ -1673,12 +1728,12 @@ var Prompt = ({
   ...htmlAttributes
 }) => {
   const {
-    anchorElement = AnchorBody,
+    anchorElement = AnchorBody2,
     offsetLeft = 0,
     offsetTop = 0,
     placement = "below"
   } = PopupProps;
-  const [themeClass, densityClass, dataMode] = (0, import_vuu_shell3.useThemeAttributes)();
+  const [themeClass, densityClass, dataMode] = (0, import_vuu_utils8.useThemeAttributes)();
   const { position } = useAnchoredPosition({
     anchorElement,
     offsetLeft,
@@ -1703,7 +1758,7 @@ var Prompt = ({
     "dialog",
     {
       ...htmlAttributes,
-      className: (0, import_classnames8.default)(classBase5, `${classBase5}-${variant}`, themeClass),
+      className: (0, import_clsx8.default)(classBase5, `${classBase5}-${variant}`, themeClass),
       "data-mode": dataMode,
       ref: rootRef,
       style: { ...style, ...position },
@@ -1762,7 +1817,7 @@ var useAnchoredPosition2 = ({
 };
 
 // src/tooltip/Tooltip.tsx
-var import_classnames9 = __toESM(require("classnames"));
+var import_clsx9 = __toESM(require("clsx"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var classBase6 = "vuuTooltip";
 var Tooltip = ({
@@ -1782,7 +1837,7 @@ var Tooltip = ({
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "div",
     {
-      className: (0, import_classnames9.default)(classBase6, {
+      className: (0, import_clsx9.default)(classBase6, {
         [`${classBase6}-error`]: status === "error"
       }),
       "data-align": placement,
@@ -1802,8 +1857,8 @@ var Tooltip = ({
 };
 
 // src/tooltip/useTooltip.ts
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
 var import_react17 = require("react");
-var import_vuu_layout4 = require("@vuu-ui/vuu-layout");
 var useTooltip = ({
   id: idProp,
   placement = "right",
@@ -1814,7 +1869,7 @@ var useTooltip = ({
   const mouseEnterTimerRef = (0, import_react17.useRef)();
   const mouseLeaveTimerRef = (0, import_react17.useRef)();
   const [tooltipProps, setTooltipProps] = (0, import_react17.useState)();
-  const id = (0, import_vuu_layout4.useId)(idProp);
+  const id = (0, import_vuu_utils9.useId)(idProp);
   const escapeListener = (0, import_react17.useCallback)((evt) => {
     var _a;
     if (evt.key === "Escape") {
@@ -1891,8 +1946,8 @@ var useTooltip = ({
 
 // src/notifications/NotificationsProvider.tsx
 var import_react18 = __toESM(require("react"));
-var import_classnames10 = __toESM(require("classnames"));
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_clsx10 = __toESM(require("clsx"));
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var toastOffsetTop = 60;
 var toastDisplayDuration = 6e3;
@@ -1917,7 +1972,7 @@ var NotificationsContext = import_react18.default.createContext({
 var NotificationsProvider = (props) => {
   const [notifications, setNotifications] = (0, import_react18.useState)([]);
   const notify = (0, import_react18.useCallback)((notification) => {
-    const newNotification = { ...notification, id: (0, import_vuu_utils3.getUniqueId)() };
+    const newNotification = { ...notification, id: (0, import_vuu_utils10.getUniqueId)() };
     setNotifications((prev) => [...prev, newNotification]);
     setTimeout(() => {
       setNotifications((prev) => prev.filter((n) => n !== newNotification));
@@ -1959,7 +2014,7 @@ var ToastNotification = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      className: (0, import_classnames10.default)(`${classBase7}-toast`, notification.type),
+      className: (0, import_clsx10.default)(`${classBase7}-toast`, notification.type),
       style: {
         height: toastHeight,
         right,
@@ -1971,7 +2026,7 @@ var ToastNotification = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className: (0, import_classnames10.default)(
+            className: (0, import_clsx10.default)(
               `${classBase7}-toastIcon`,
               `${notification.type}-icon`
             )