@vuu-ui/vuu-popups 0.7.6-debug → 0.7.6

package/cjs/index.js

@@ -1,1318 +1,2 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ContextMenu: () => ContextMenu,
-  ContextMenuContext: () => ContextMenuContext,
-  ContextMenuProvider: () => ContextMenuProvider,
-  Dialog: () => Dialog,
-  DialogService: () => DialogService,
-  MenuItem: () => MenuItem,
-  MenuItemGroup: () => MenuItemGroup,
-  Popup: () => Popup,
-  PopupService: () => PopupService,
-  Portal: () => Portal,
-  Separator: () => Separator,
-  createContainer: () => createContainer,
-  installTheme: () => installTheme,
-  isGroupMenuItemDescriptor: () => isGroupMenuItemDescriptor,
-  renderPortal: () => renderPortal,
-  useContextMenu: () => useContextMenu
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/dialog/Dialog.tsx
-var import_salt_lab = require("@heswell/salt-lab");
-var import_core2 = require("@salt-ds/core");
-var import_classnames = __toESM(require("classnames"));
-var import_react2 = require("react");
-
-// src/portal/Portal.tsx
-var import_react = require("react");
-var ReactDOM2 = __toESM(require("react-dom"));
-
-// src/portal/render-portal.tsx
-var ReactDOM = __toESM(require("react-dom"));
-var import_core = require("@salt-ds/core");
-var import_jsx_runtime = require("react/jsx-runtime");
-var containerId = 1;
-var getPortalContainer = (x = 0, y = 0, win = window) => {
-  const el = win.document.createElement("div");
-  el.className = "vuuPopup " + containerId++;
-  el.style.cssText = `left:${x}px; top:${y}px;`;
-  win.document.body.appendChild(el);
-  return el;
-};
-var createDOMContainer = (x, y) => getPortalContainer(x, y);
-var renderPortal = (component, container, x, y, onRender) => {
-  container.style.cssText = `left:${x}px; top:${y}px;position: absolute;`;
-  ReactDOM.render(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.SaltProvider, { applyClassesTo: "child", children: component }),
-    container,
-    onRender
-  );
-};
-var createContainer = createDOMContainer;
-
-// src/portal/Portal.tsx
-var Portal = function Portal2({
-  children,
-  x = 0,
-  y = 0,
-  onRender
-}) {
-  const renderContainer = (0, import_react.useMemo)(() => {
-    return createContainer();
-  }, []);
-  (0, import_react.useLayoutEffect)(() => {
-    renderPortal(children, renderContainer, x, y, onRender);
-  }, [children, onRender, renderContainer, x, y]);
-  (0, import_react.useLayoutEffect)(() => {
-    return () => {
-      var _a;
-      if (renderContainer) {
-        ReactDOM2.unmountComponentAtNode(renderContainer);
-        if (renderContainer.classList.contains("vuuPopup")) {
-          (_a = renderContainer.parentElement) == null ? void 0 : _a.removeChild(renderContainer);
-        }
-      }
-    };
-  }, [renderContainer]);
-  return null;
-};
-
-// src/portal/portal-utils.ts
-var installTheme = (themeId) => {
-  const installedThemes = getComputedStyle(document.body).getPropertyValue(
-    "--installed-themes"
-  );
-  document.body.style.setProperty(
-    "--installed-themes",
-    `${installedThemes} ${themeId}`
-  );
-};
-
-// src/dialog/Dialog.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var classBase = "vuuDialog";
-var Dialog = ({
-  children,
-  className,
-  isOpen = false,
-  onClose,
-  title,
-  ...props
-}) => {
-  const root = (0, import_react2.useRef)(null);
-  const [posX] = (0, import_react2.useState)(0);
-  const [posY] = (0, import_react2.useState)(0);
-  const close = (0, import_react2.useCallback)(() => {
-    onClose == null ? void 0 : onClose();
-  }, [onClose]);
-  const handleRender = (0, import_react2.useCallback)(() => {
-  }, []);
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal, { onRender: handleRender, x: posX, y: posY, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_salt_lab.Scrim, { className: `${classBase}-scrim`, open: isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...props, className: (0, import_classnames.default)(classBase, className), ref: root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_salt_lab.Toolbar, { className: `${classBase}-header`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Text, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_salt_lab.ToolbarButton,
-        {
-          onClick: close,
-          "data-align-end": true,
-          "data-icon": "close"
-        },
-        "close"
-      )
-    ] }),
-    children
-  ] }) }) });
-};
-
-// src/menu/ContextMenu.tsx
-var import_core4 = require("@salt-ds/core");
-var import_react8 = require("react");
-
-// src/menu/MenuList.tsx
-var import_react5 = __toESM(require("react"));
-var import_classnames2 = __toESM(require("classnames"));
-var import_core3 = require("@salt-ds/core");
-
-// src/menu/use-keyboard-navigation.ts
-var import_react3 = 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-idx='${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);
-};
-
-// src/menu/use-keyboard-navigation.ts
-var useKeyboardNavigation = ({
-  autoHighlightFirstItem = false,
-  count,
-  highlightedIndex: highlightedIndexProp,
-  onActivate,
-  onHighlight,
-  // onKeyDown,
-  onCloseMenu,
-  onOpenMenu
-}) => {
-  const highlightedIndexRef = (0, import_react3.useRef)(
-    (highlightedIndexProp != null ? highlightedIndexProp : autoHighlightFirstItem) ? 0 : -1
-  );
-  const [, forceRender] = (0, import_react3.useState)(null);
-  const controlledHighlighting = highlightedIndexProp !== void 0;
-  const setHighlightedIdx = (0, import_react3.useCallback)(
-    (idx) => {
-      highlightedIndexRef.current = idx;
-      onHighlight == null ? void 0 : onHighlight(idx);
-      forceRender({});
-    },
-    [onHighlight]
-  );
-  const setHighlightedIndex = (0, import_react3.useCallback)(
-    (idx) => {
-      if (idx !== highlightedIndexRef.current) {
-        if (!controlledHighlighting) {
-          setHighlightedIdx(idx);
-        }
-      }
-    },
-    [controlledHighlighting, setHighlightedIdx]
-  );
-  const keyBoardNavigation = (0, import_react3.useRef)(true);
-  const ignoreFocus = (0, import_react3.useRef)(false);
-  const setIgnoreFocus = (value) => ignoreFocus.current = value;
-  const highlightedIndex = controlledHighlighting ? highlightedIndexProp : highlightedIndexRef.current;
-  const navigateChildldItems = (0, import_react3.useCallback)(
-    (e) => {
-      const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
-      if (nextIdx !== highlightedIndexRef.current) {
-        setHighlightedIndex(nextIdx);
-      }
-    },
-    [count, setHighlightedIndex]
-  );
-  const handleKeyDown = (0, import_react3.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)) {
-        onOpenMenu(highlightedIndex);
-      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
-        onCloseMenu(highlightedIndex);
-      } else if (e.key === "Enter") {
-        onActivate && onActivate(highlightedIndex);
-      }
-    },
-    [
-      highlightedIndex,
-      navigateChildldItems,
-      onActivate,
-      onCloseMenu,
-      onOpenMenu
-    ]
-  );
-  const listProps = (0, import_react3.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);
-      }
-    }),
-    [
-      highlightedIndex,
-      setHighlightedIndex,
-      navigateChildldItems,
-      onActivate,
-      onCloseMenu,
-      onOpenMenu,
-      setHighlightedIdx
-    ]
-  );
-  return {
-    focusVisible: keyBoardNavigation.current ? highlightedIndex : -1,
-    controlledHighlighting,
-    highlightedIndex,
-    setHighlightedIndex,
-    // keyBoardNavigation,
-    listProps,
-    setIgnoreFocus
-  };
-};
-function nextItemIdx(count, key, idx) {
-  if (key === "ArrowUp") {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
-    }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
-    } else {
-      return idx + 1;
-    }
-  }
-}
-
-// src/menu/use-items-with-ids.ts
-var import_react4 = __toESM(require("react"));
-var isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
-var useItemsWithIds = (childrenProp) => {
-  const normalizeChildren = (0, import_react4.useCallback)(() => {
-    const collectChildren = (children, path = "root", menus2 = {}, actions2 = {}) => {
-      const list = menus2[path] = [];
-      let idx = 0;
-      let hasSeparator = false;
-      import_react4.default.Children.forEach(children, (child) => {
-        if (child.type === Separator) {
-          hasSeparator = true;
-        } else {
-          const group = isMenuItemGroup(child);
-          const childPath = path === "root" ? `${idx}` : `${path}.${idx}`;
-          const {
-            props: { action, options }
-          } = child;
-          const { childWithId, grandChildren } = assignId(
-            child,
-            childPath,
-            group,
-            hasSeparator
-          );
-          list.push(childWithId);
-          if (grandChildren) {
-            collectChildren(grandChildren, childPath, menus2, actions2);
-          } else {
-            actions2[childPath] = { action, options };
-          }
-          idx += 1;
-          hasSeparator = false;
-        }
-      });
-      return [menus2, actions2];
-    };
-    const assignId = (child, path, group, hasSeparator = false) => {
-      const {
-        props: { children }
-      } = child;
-      return {
-        childWithId: import_react4.default.cloneElement(child, {
-          hasSeparator,
-          id: `${path}`,
-          key: path,
-          children: group ? void 0 : children
-        }),
-        grandChildren: group ? children : void 0
-      };
-    };
-    return collectChildren(childrenProp);
-  }, [childrenProp]);
-  const [menus, actions] = (0, import_react4.useMemo)(
-    () => normalizeChildren(),
-    [normalizeChildren]
-  );
-  return [menus, actions];
-};
-
-// src/menu/MenuList.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var classBase2 = "vuuMenuList";
-var Separator = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "vuuMenuItem-divider" });
-var MenuItemGroup = () => null;
-var MenuItem = ({ children, idx, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...props, children });
-};
-var hasIcon = (child) => child.props["data-icon"];
-var MenuList = ({
-  activatedByKeyboard,
-  childMenuShowing = -1,
-  children,
-  className,
-  highlightedIdx: highlightedIdxProp,
-  id: idProp,
-  isRoot: isRoot2,
-  listItemProps,
-  menuId,
-  onHighlightMenuItem,
-  onActivate,
-  onCloseMenu,
-  onOpenMenu,
-  ...props
-}) => {
-  const id = (0, import_core3.useIdMemo)(idProp);
-  const root = (0, import_react5.useRef)(null);
-  const mapIdxToId = (0, import_react5.useMemo)(() => /* @__PURE__ */ new Map(), []);
-  const handleOpenMenu = (idx) => {
-    var _a;
-    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-idx='${idx}']`);
-    (el == null ? void 0 : el.id) && (onOpenMenu == null ? void 0 : onOpenMenu(el.id));
-  };
-  const handleActivate = (idx) => {
-    var _a;
-    const el = (_a = root.current) == null ? void 0 : _a.querySelector(`:scope > [data-idx='${idx}']`);
-    (el == null ? void 0 : el.id) && (onActivate == null ? void 0 : onActivate(el.id));
-  };
-  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({
-    count: import_react5.default.Children.count(children),
-    highlightedIndex: highlightedIdxProp,
-    onActivate: handleActivate,
-    onHighlight: onHighlightMenuItem,
-    onOpenMenu: handleOpenMenu,
-    onCloseMenu
-  });
-  const appliedFocusVisible = childMenuShowing == -1 ? focusVisible : -1;
-  (0, import_react5.useLayoutEffect)(() => {
-    var _a;
-    if (childMenuShowing === -1 && activatedByKeyboard) {
-      (_a = root.current) == null ? void 0 : _a.focus();
-    }
-  }, [activatedByKeyboard, childMenuShowing]);
-  const getActiveDescendant = () => highlightedIndex === void 0 || highlightedIndex === -1 ? void 0 : mapIdxToId.get(highlightedIndex);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "div",
-    {
-      ...props,
-      ...listProps,
-      "aria-activedescendant": getActiveDescendant(),
-      className: (0, import_classnames2.default)(classBase2, className, {
-        [`${classBase2}-childMenuShowing`]: childMenuShowing !== -1
-      }),
-      "data-root": isRoot2 || void 0,
-      id: `${id}-${menuId}`,
-      ref: root,
-      role: "menu",
-      tabIndex: 0,
-      children: renderContent()
-    }
-  );
-  function renderContent() {
-    const propsCommonToAllListItems = {
-      ...listItemProps,
-      role: "menuitem"
-    };
-    const maybeIcon = (childElement, withIcon, iconName) => withIcon ? [
-      /* @__PURE__ */ (0, import_jsx_runtime3.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 === idx;
-      const ariaControls = subMenuShowing ? `${id}-${itemId}` : void 0;
-      list.push(
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          MenuItem,
-          {
-            ...props2,
-            ...propsCommonToAllListItems,
-            ...getMenuItemProps(
-              `${id}-${menuId}`,
-              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, 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;
-  }
-};
-var getMenuItemProps = (baseId, itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
-  id: `${baseId}-${itemId}`,
-  key: key != null ? key : idx,
-  "data-idx": idx,
-  "data-highlighted": idx === highlightedIdx || void 0,
-  className: (0, import_classnames2.default)("vuuMenuItem", className, {
-    "vuuMenuItem-separator": hasSeparator,
-    focusVisible: focusVisible === idx
-  })
-});
-MenuList.displayName = "MenuList";
-var MenuList_default = MenuList;
-
-// src/menu/use-cascade.ts
-var import_react6 = require("react");
-
-// src/menu/list-dom-utils.ts
-function listItemIndex(listItemEl) {
-  if (listItemEl) {
-    const idx = listItemEl.dataset.idx;
-    if (idx) {
-      return parseInt(idx, 10);
-    } else if (listItemEl.ariaPosInSet) {
-      return parseInt(listItemEl.ariaPosInSet, 10) - 1;
-    }
-  }
-}
-var closestListItem = (el) => el == null ? void 0 : el.closest("[data-idx],[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`);
-  }
-  const { width } = el.getBoundingClientRect();
-  return menus.map(
-    (m) => m === menu ? {
-      ...m,
-      left: parentMenu.left - (width - 2)
-    } : m
-  );
-};
-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 getItemId = (id) => {
-  const pos = id.lastIndexOf("-");
-  return pos === -1 ? id : id.slice(pos + 1);
-};
-var getMenuId = (id) => {
-  const itemId = getItemId(id);
-  const pos = itemId.lastIndexOf(".");
-  return pos > -1 ? itemId.slice(0, pos) : "root";
-};
-var getMenuDepth = (id) => {
-  let count = 0, pos = id.indexOf(".", 0);
-  while (pos !== -1) {
-    count += 1;
-    pos = id.indexOf(".", pos + 1);
-  }
-  return count;
-};
-var identifyItem = (el) => ({
-  menuId: getMenuId(el.id),
-  itemId: getItemId(el.id),
-  isGroup: el.ariaHasPopup === "true",
-  isOpen: el.ariaExpanded === "true",
-  level: getMenuDepth(el.id)
-});
-var useCascade = ({
-  id,
-  onActivate,
-  onMouseEnterItem,
-  position: { x: posX, y: posY }
-}) => {
-  const [, forceRefresh] = (0, import_react6.useState)({});
-  const openMenus = (0, import_react6.useRef)([
-    { id: "root", left: posX, top: posY }
-  ]);
-  const setOpenMenus = (0, import_react6.useCallback)((menus) => {
-    openMenus.current = menus;
-    forceRefresh({});
-  }, []);
-  const menuOpenPendingTimeout = (0, import_react6.useRef)();
-  const menuClosePendingTimeout = (0, import_react6.useRef)();
-  const menuState = (0, import_react6.useRef)({ root: "no-popup" });
-  const prevLevel = (0, import_react6.useRef)(0);
-  const openMenu = (0, import_react6.useCallback)(
-    (menuId = "root", itemId = null, listItemEl = null) => {
-      if (menuId === "root" && itemId === null) {
-        setOpenMenus([{ id: "root", left: posX, top: posY }]);
-      } else {
-        menuState.current[menuId] = "popup-open";
-        const doc = listItemEl ? listItemEl.ownerDocument : document;
-        const el = doc.getElementById(`${id}-${menuId}-${itemId}`);
-        const { left, top } = getPosition(el, openMenus.current);
-        setOpenMenus(openMenus.current.concat({ id: itemId, left, top }));
-      }
-    },
-    [id, posX, posY, setOpenMenus]
-  );
-  const closeMenu = (0, import_react6.useCallback)(
-    (menuId) => {
-      if (menuId === "root") {
-        setOpenMenus([]);
-      } else {
-        setOpenMenus(openMenus.current.slice(0, -1));
-      }
-    },
-    [setOpenMenus]
-  );
-  const closeMenus = (0, import_react6.useCallback)(
-    (menuId, itemId) => {
-      const menus = openMenus.current.slice();
-      let { id: lastMenuId } = menus[menus.length - 1];
-      while (menus.length > 1 && !itemId.startsWith(lastMenuId)) {
-        const parentMenuId = getMenuId(lastMenuId);
-        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);
-      }
-    },
-    [setOpenMenus]
-  );
-  const scheduleOpen = (0, import_react6.useCallback)(
-    (menuId, itemId, listItemEl) => {
-      if (menuOpenPendingTimeout.current) {
-        clearTimeout(menuOpenPendingTimeout.current);
-      }
-      menuOpenPendingTimeout.current = window.setTimeout(() => {
-        console.log(`scheduleOpen timed out opening ${itemId}`);
-        closeMenus(menuId, itemId);
-        menuState.current[menuId] = "popup-open";
-        menuState.current[itemId] = "no-popup";
-        openMenu(menuId, itemId, listItemEl);
-      }, 400);
-    },
-    [closeMenus, openMenu]
-  );
-  const scheduleClose = (0, import_react6.useCallback)(
-    (openMenuId, menuId, itemId) => {
-      console.log(
-        `scheduleClose openMenuId ${openMenuId} menuId ${menuId} itemId ${itemId}`
-      );
-      menuState.current[openMenuId] = "pending-close";
-      menuClosePendingTimeout.current = window.setTimeout(() => {
-        closeMenus(menuId, itemId);
-      }, 400);
-    },
-    [closeMenus]
-  );
-  const handleRender = (0, import_react6.useCallback)(() => {
-    const { current: menus } = openMenus;
-    const [menu] = menus.slice(-1);
-    const el = document.getElementById(`${id}-${menu.id}`);
-    if (el) {
-      const { right, bottom } = el.getBoundingClientRect();
-      const { clientHeight, clientWidth } = document.body;
-      if (right > clientWidth) {
-        const newMenus = menus.length > 1 ? flipSides(id, menus) : nudgeLeft(menus, right - clientWidth);
-        setOpenMenus(newMenus);
-      } else if (bottom > clientHeight) {
-        const newMenus = nudgeUp(menus, bottom - clientHeight);
-        setOpenMenus(newMenus);
-      }
-    }
-  }, [id, setOpenMenus]);
-  const listItemProps = (0, import_react6.useMemo)(
-    () => ({
-      onMouseEnter: (evt) => {
-        const listItemEl = closestListItem(evt.target);
-        const { menuId, itemId, isGroup, isOpen, level } = identifyItem(listItemEl);
-        const sameLevel = prevLevel.current === level;
-        const {
-          current: { [menuId]: state }
-        } = menuState;
-        prevLevel.current = level;
-        if (state === "no-popup" && isGroup) {
-          menuState.current[menuId] = "popup-pending";
-          scheduleOpen(menuId, itemId, listItemEl);
-        } else if (state === "popup-pending" && !isGroup) {
-          menuState.current[menuId] = "no-popup";
-          clearTimeout(menuOpenPendingTimeout.current);
-          menuOpenPendingTimeout.current = void 0;
-        } else if (state === "popup-pending" && isGroup) {
-          clearTimeout(menuOpenPendingTimeout.current);
-          scheduleOpen(menuId, itemId, listItemEl);
-        } else if (state === "popup-open") {
-          const [{ id: parentMenuId }, { id: openMenuId }] = openMenus.current.slice(-2);
-          if (parentMenuId === menuId && menuState.current[openMenuId] !== "pending-close" && sameLevel) {
-            scheduleClose(openMenuId, menuId, itemId);
-            if (isGroup && !isOpen) {
-              scheduleOpen(menuId, itemId, listItemEl);
-            }
-          } else if (parentMenuId === menuId && isGroup && itemId !== openMenuId && menuState.current[openMenuId] === "pending-close") {
-            scheduleOpen(menuId, itemId, listItemEl);
-          } else if (isGroup) {
-            closeMenus(menuId, itemId);
-            scheduleOpen(menuId, itemId, listItemEl);
-          } else if (!(menuState.current[openMenuId] === "pending-close" && sameLevel)) {
-            closeMenus(menuId, itemId);
-          }
-        }
-        if (state === "pending-close") {
-          if (menuOpenPendingTimeout.current) {
-            clearTimeout(menuOpenPendingTimeout.current);
-            menuOpenPendingTimeout.current = void 0;
-          }
-          clearTimeout(menuClosePendingTimeout.current);
-          menuClosePendingTimeout.current = void 0;
-          menuState.current[menuId] = "popup-open";
-        }
-        onMouseEnterItem(evt, itemId);
-      },
-      onClick: (evt) => {
-        const targetElement = evt.target;
-        const listItemEl = closestListItem(targetElement);
-        const idx = listItemIndex(listItemEl);
-        console.log(
-          `list item click [${idx}] hasPopup ${listItemEl.ariaHasPopup}`
-        );
-        if (listItemEl.ariaHasPopup === "true") {
-          if (listItemEl.ariaExpanded !== "true") {
-            openMenu(idx);
-          } else {
-          }
-        } else {
-          onActivate(getItemId(listItemEl.id));
-        }
-      }
-    }),
-    [
-      closeMenus,
-      onActivate,
-      onMouseEnterItem,
-      openMenu,
-      scheduleClose,
-      scheduleOpen
-    ]
-  );
-  return {
-    closeMenu,
-    handleRender,
-    listItemProps,
-    openMenu,
-    openMenus: openMenus.current
-  };
-};
-
-// src/menu/use-click-away.ts
-var import_react7 = require("react");
-var useClickAway = ({
-  containerClassName,
-  isOpen,
-  onClose
-}) => {
-  (0, import_react7.useEffect)(() => {
-    let clickHandler;
-    if (isOpen) {
-      clickHandler = (evt) => {
-        const target = evt.target;
-        const container = target.closest(`.${containerClassName}`);
-        if (container === null) {
-          onClose == null ? void 0 : onClose("root");
-        }
-      };
-      document.body.addEventListener("click", clickHandler, true);
-    }
-    return () => {
-      if (clickHandler) {
-        document.body.removeEventListener("click", clickHandler, true);
-      }
-    };
-  }, [containerClassName, isOpen, onClose]);
-};
-
-// src/menu/ContextMenu.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var import_react9 = require("react");
-var noop = () => void 0;
-var ContextMenu = ({
-  activatedByKeyboard,
-  children: childrenProp,
-  className,
-  id: idProp,
-  onClose = () => void 0,
-  position = { x: 0, y: 0 },
-  style,
-  ...menuListProps
-}) => {
-  const id = (0, import_core4.useIdMemo)(idProp);
-  const closeMenuRef = (0, import_react8.useRef)(noop);
-  const [menus, actions] = useItemsWithIds(childrenProp);
-  const navigatingWithKeyboard = (0, import_react8.useRef)(activatedByKeyboard);
-  const handleMouseEnterItem = (0, import_react8.useCallback)(() => {
-    navigatingWithKeyboard.current = false;
-  }, []);
-  const handleActivate = (0, import_react8.useCallback)(
-    (menuId) => {
-      const { action, options } = actions[menuId];
-      closeMenuRef.current("root");
-      onClose(action, options);
-    },
-    [actions, onClose]
-  );
-  const { closeMenu, listItemProps, openMenu, openMenus, handleRender } = useCascade({
-    id,
-    onActivate: handleActivate,
-    onMouseEnterItem: handleMouseEnterItem,
-    position
-  });
-  closeMenuRef.current = closeMenu;
-  console.log({ openMenus });
-  const handleClose = (0, import_react8.useCallback)(() => {
-    closeMenu();
-    onClose();
-  }, [closeMenu, onClose]);
-  useClickAway({
-    containerClassName: "vuuMenuList",
-    onClose: handleClose,
-    isOpen: openMenus.length > 0
-  });
-  const handleOpenMenu = (id2) => {
-    const itemId = getItemId(id2);
-    const menuId = getMenuId(itemId);
-    navigatingWithKeyboard.current = true;
-    openMenu(menuId, itemId);
-  };
-  const handleCloseMenu = () => {
-    navigatingWithKeyboard.current = true;
-    closeMenu();
-  };
-  const handleHighlightMenuItem = () => {
-  };
-  const lastMenu = openMenus.length - 1;
-  const getChildMenuIndex = (i) => {
-    if (i >= lastMenu) {
-      return -1;
-    } else {
-      const { id: menuId } = openMenus[i + 1];
-      const pos = menuId.lastIndexOf(".");
-      const idx = pos === -1 ? parseInt(menuId, 10) : parseInt(menuId.slice(-pos), 10);
-      return idx;
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: openMenus.map(({ id: menuId, left, top }, i) => {
-    const childMenuIndex = getChildMenuIndex(i);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { x: left, y: top, onRender: handleRender, children: /* @__PURE__ */ (0, import_react9.createElement)(
-      MenuList_default,
-      {
-        ...menuListProps,
-        activatedByKeyboard: navigatingWithKeyboard.current,
-        childMenuShowing: childMenuIndex,
-        className,
-        id,
-        menuId,
-        isRoot: i === 0,
-        key: i,
-        listItemProps,
-        onActivate: handleActivate,
-        onHighlightMenuItem: handleHighlightMenuItem,
-        onCloseMenu: handleCloseMenu,
-        onOpenMenu: handleOpenMenu,
-        style
-      },
-      menus[menuId]
-    ) }, i);
-  }) });
-};
-ContextMenu.displayName = "ContextMenu";
-
-// src/menu/context-menu-provider.tsx
-var import_react10 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ContextMenuContext = (0, import_react10.createContext)(
-  null
-);
-var isGroupMenuItemDescriptor = (menuItem) => menuItem !== void 0 && "children" in menuItem;
-var Provider = ({
-  children,
-  context,
-  menuActionHandler,
-  menuBuilder
-}) => {
-  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)(
-    (type, options) => {
-      var _a;
-      if (menuActionHandler == null ? void 0 : menuActionHandler(type, options)) {
-        return true;
-      }
-      if ((_a = context == null ? void 0 : context.menuActionHandler) == null ? void 0 : _a.call(context, type, options)) {
-        return true;
-      }
-    },
-    [context, menuActionHandler]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    ContextMenuContext.Provider,
-    {
-      value: {
-        menuActionHandler: handleMenuAction,
-        menuBuilders
-      },
-      children
-    }
-  );
-};
-var ContextMenuProvider = ({
-  children,
-  label,
-  menuActionHandler,
-  menuBuilder
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Provider,
-    {
-      context: parentContext,
-      label,
-      menuActionHandler,
-      menuBuilder,
-      children
-    }
-  ) });
-};
-
-// src/menu/useContextMenu.tsx
-var import_react12 = require("react");
-
-// src/popup/popup-service.ts
-var import_classnames3 = __toESM(require("classnames"));
-var import_react11 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
-var _dialogOpen = false;
-var _popups = [];
-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);
-      }
-    }
-  }
-}
-function outsideClickHandler(e) {
-  if (_popups.length) {
-    const popupContainers = document.body.querySelectorAll(".vuuPopup");
-    for (let i = 0; i < popupContainers.length; i++) {
-      if (popupContainers[i].contains(e.target)) {
-        return;
-      }
-    }
-    closeAllPopups();
-  }
-}
-function closeAllPopups() {
-  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);
-      }
-    }
-    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_classnames3.default)("hwPopup", "hwPopupContainer", position);
-  return (0, import_react11.createElement)("div", { className, style }, children);
-};
-var incrementingKey = 1;
-var PopupService = class {
-  static showPopup({
-    name = "anon",
-    group = "all",
-    position = "",
-    left = 0,
-    right = "auto",
-    top = 0,
-    width = "auto",
-    component
-  }) {
-    if (!component) {
-      throw Error(`PopupService showPopup, no component supplied`);
-    }
-    popupOpened(name);
-    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_react11.createElement)(
-        PopupComponent,
-        { key: incrementingKey++, position, style },
-        component
-      ),
-      el,
-      left,
-      top,
-      () => {
-        PopupService.keepWithinThePage(el, right);
-      }
-    );
-  }
-  static hidePopup(name = "anon", group = "all") {
-    if (_popups.indexOf(name) !== -1) {
-      popupClosed(name);
-      const popupRoot = document.body.querySelector(`.vuuPopup.${group}`);
-      if (popupRoot) {
-        import_react_dom.default.unmountComponentAtNode(popupRoot);
-      }
-    }
-  }
-  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 DialogService = class {
-  static showDialog(dialog) {
-    const containerEl = ".vuuDialog";
-    const onClose = dialog.props.onClose;
-    dialogOpened();
-    import_react_dom.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_dom.default.unmountComponentAtNode(dialogRoot);
-    }
-  }
-};
-var Popup = (props) => {
-  const pendingTask = (0, import_react11.useRef)();
-  const ref = (0, import_react11.useRef)(null);
-  const show = (props2, boundingClientRect) => {
-    const { name, group, depth, width } = props2;
-    let left;
-    let top;
-    if (pendingTask.current) {
-      window.clearTimeout(pendingTask.current);
-      pendingTask.current = void 0;
-    }
-    if (props2.close === true) {
-      PopupService.hidePopup(name, group);
-    } else {
-      const { position, children: component } = props2;
-      const {
-        left: targetLeft,
-        top: targetTop,
-        width: clientWidth,
-        bottom: targetBottom
-      } = boundingClientRect;
-      if (position === "below") {
-        left = targetLeft;
-        top = targetBottom;
-      } else if (position === "above") {
-        left = targetLeft;
-        top = targetTop;
-      }
-      pendingTask.current = window.setTimeout(() => {
-        PopupService.showPopup({
-          name,
-          group,
-          depth,
-          position,
-          left,
-          top,
-          width: width || clientWidth,
-          component
-        });
-      }, 10);
-    }
-  };
-  (0, import_react11.useEffect)(() => {
-    if (ref.current) {
-      const el = ref.current.parentElement;
-      const boundingClientRect = el == null ? void 0 : el.getBoundingClientRect();
-      if (boundingClientRect) {
-        show(props, boundingClientRect);
-      }
-    }
-    return () => {
-      PopupService.hidePopup(props.name, props.group);
-    };
-  }, [props]);
-  return import_react11.default.createElement("div", { className: "popup-proxy", ref });
-};
-
-// src/menu/useContextMenu.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var useContextMenu = (menuBuilder) => {
-  const ctx = (0, import_react12.useContext)(ContextMenuContext);
-  const buildMenuOptions = (0, import_react12.useCallback)(
-    (menuBuilders, location, options) => {
-      let results = [];
-      for (const menuBuilder2 of menuBuilders) {
-        results = results.concat(menuBuilder2(location, options));
-      }
-      return results;
-    },
-    []
-  );
-  const handleShowContextMenu = (0, import_react12.useCallback)(
-    (e, location, options) => {
-      var _a;
-      e.stopPropagation();
-      e.preventDefault();
-      const menuBuilders = (_a = ctx == null ? void 0 : ctx.menuBuilders) != null ? _a : menuBuilder ? [menuBuilder] : void 0;
-      if (Array.isArray(menuBuilders) && menuBuilders.length > 0) {
-        const menuItemDescriptors = buildMenuOptions(
-          menuBuilders,
-          location,
-          options
-        );
-        console.log({
-          menuItemDescriptors
-        });
-        if (menuItemDescriptors.length && (ctx == null ? void 0 : ctx.menuActionHandler)) {
-          console.log(`showContextMenu ${location}`, {
-            options
-          });
-          showContextMenu(e, menuItemDescriptors, ctx.menuActionHandler);
-        }
-      } else {
-        console.warn(
-          "useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)"
-        );
-      }
-    },
-    [buildMenuOptions, ctx == null ? void 0 : ctx.menuActionHandler, ctx == null ? void 0 : ctx.menuBuilders, menuBuilder]
-  );
-  return handleShowContextMenu;
-};
-var showContextMenu = (e, menuDescriptors, handleContextMenuAction) => {
-  const { clientX: left, clientY: top } = e;
-  const menuItems = (menuDescriptors2) => {
-    const fromDescriptor = (menuItem, i) => isGroupMenuItemDescriptor(menuItem) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItemGroup, { label: menuItem.label, children: menuItem.children.map(fromDescriptor) }, i) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      MenuItem,
-      {
-        action: menuItem.action,
-        "data-icon": menuItem.icon,
-        options: menuItem.options,
-        children: menuItem.label
-      },
-      i
-    );
-    return menuDescriptors2.map(fromDescriptor);
-  };
-  const handleClose = (menuId, options) => {
-    if (menuId) {
-      handleContextMenuAction(menuId, options);
-      PopupService.hidePopup();
-    }
-  };
-  const component = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenu, { onClose: handleClose, position: { x: left, y: top }, children: menuItems(menuDescriptors) });
-  PopupService.showPopup({ left: 0, top: 0, component });
-};
+"use strict";var rt=Object.create;var oe=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var it=Object.getOwnPropertyNames;var ut=Object.getPrototypeOf,ct=Object.prototype.hasOwnProperty;var lt=(t,e)=>{for(var n in e)oe(t,n,{get:e[n],enumerable:!0})},Ie=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of it(e))!ct.call(t,r)&&r!==n&&oe(t,r,{get:()=>e[r],enumerable:!(o=st(e,r))||o.enumerable});return t};var K=(t,e,n)=>(n=t!=null?rt(ut(t)):{},Ie(e||!t||!t.__esModule?oe(n,"default",{value:t,enumerable:!0}):n,t)),at=t=>Ie(oe({},"__esModule",{value:!0}),t);var qt={};lt(qt,{ContextMenu:()=>ie,ContextMenuContext:()=>ee,ContextMenuProvider:()=>St,Dialog:()=>gt,DialogService:()=>te,MenuItem:()=>re,MenuItemGroup:()=>Z,Popup:()=>Ft,PopupService:()=>D,Portal:()=>Y,Separator:()=>ge,createContainer:()=>de,installTheme:()=>ft,isGroupMenuItemDescriptor:()=>xe,renderPortal:()=>Q,useContextMenu:()=>Gt});module.exports=at(qt);var V=require("@heswell/salt-lab"),Re=require("@salt-ds/core"),He=K(require("classnames")),B=require("react");var X=require("react"),Le=K(require("react-dom"));var we=K(require("react-dom")),Pe=require("@salt-ds/core"),Ee=require("react/jsx-runtime"),pt=1,dt=(t=0,e=0,n=window)=>{let o=n.document.createElement("div");return o.className="vuuPopup "+pt++,o.style.cssText=`left:${t}px; top:${e}px;`,n.document.body.appendChild(o),o},mt=(t,e)=>dt(t,e),Q=(t,e,n,o,r)=>{e.style.cssText=`left:${n}px; top:${o}px;position: absolute;`,we.render((0,Ee.jsx)(Pe.SaltProvider,{applyClassesTo:"child",children:t}),e,r)},de=mt;var Y=function({children:e,x:n=0,y:o=0,onRender:r}){let c=(0,X.useMemo)(()=>de(),[]);return(0,X.useLayoutEffect)(()=>{Q(e,c,n,o,r)},[e,r,c,n,o]),(0,X.useLayoutEffect)(()=>()=>{var u;c&&(Le.unmountComponentAtNode(c),c.classList.contains("vuuPopup")&&((u=c.parentElement)==null||u.removeChild(c)))},[c]),null};var ft=t=>{let e=getComputedStyle(document.body).getPropertyValue("--installed-themes");document.body.style.setProperty("--installed-themes",`${e} ${t}`)};var N=require("react/jsx-runtime"),me="vuuDialog",gt=({children:t,className:e,isOpen:n=!1,onClose:o,title:r,...c})=>{let u=(0,B.useRef)(null),[i]=(0,B.useState)(0),[l]=(0,B.useState)(0),d=(0,B.useCallback)(()=>{o==null||o()},[o]),a=(0,B.useCallback)(()=>{},[]);return n?(0,N.jsx)(Y,{onRender:a,x:i,y:l,children:(0,N.jsx)(V.Scrim,{className:`${me}-scrim`,open:n,children:(0,N.jsxs)("div",{...c,className:(0,He.default)(me,e),ref:u,children:[(0,N.jsxs)(V.Toolbar,{className:`${me}-header`,children:[(0,N.jsx)(Re.Text,{children:r}),(0,N.jsx)(V.ToolbarButton,{onClick:d,"data-align-end":!0,"data-icon":"close"},"close")]}),t]})})}):null};var ze=require("@salt-ds/core"),G=require("react");var O=K(require("react")),Me=K(require("classnames")),Be=require("@salt-ds/core");var H=require("react");var Te=t=>t.closest("[data-root='true']")!==null,ke=(t,e)=>{var n;return t.ariaHasPopup==="true"&&((n=t.dataset)==null?void 0:n.idx)===`${e}`||t.querySelector(`:scope > [data-idx='${e}'][aria-haspopup='true']`)!==null};function Mt(t,...e){let n=new Set(t);for(let o of e)for(let r of o)n.add(r);return n}var ht="Enter";var xt="Delete",bt=new Set([ht,xt]),vt=new Set(["Tab"]),yt=new Set(["ArrowRight","ArrowLeft"]),De=new Set(["Home","End","ArrowDown","ArrowUp"]),Ae=new Set(["Home","End","ArrowRight","ArrowLeft"]),Ct=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),an=Mt(bt,Ae,De,yt,Ct,vt);var Se=({key:t},e="vertical")=>(e==="vertical"?De:Ae).has(t);var $e=({autoHighlightFirstItem:t=!1,count:e,highlightedIndex:n,onActivate:o,onHighlight:r,onCloseMenu:c,onOpenMenu:u})=>{let i=(0,H.useRef)((n!=null?n:t)?0:-1),[,l]=(0,H.useState)(null),d=n!==void 0,a=(0,H.useCallback)(s=>{i.current=s,r==null||r(s),l({})},[r]),h=(0,H.useCallback)(s=>{s!==i.current&&(d||a(s))},[d,a]),f=(0,H.useRef)(!0),w=(0,H.useRef)(!1),v=s=>w.current=s,g=d?n:i.current,E=(0,H.useCallback)(s=>{let m=It(e,s.key,i.current);m!==i.current&&h(m)},[e,h]),T=(0,H.useCallback)(s=>{Se(s)?(s.preventDefault(),s.stopPropagation(),f.current=!0,E(s)):(s.key==="ArrowRight"||s.key==="Enter")&&ke(s.target,g)?u(g):s.key==="ArrowLeft"&&!Te(s.target)?c(g):s.key==="Enter"&&o&&o(g)},[g,E,o,c,u]),R=(0,H.useMemo)(()=>({onFocus:()=>{g===-1&&a(0)},onKeyDown:T,onMouseDownCapture:()=>{f.current=!1,v(!0)},onMouseMove:()=>{f.current&&(f.current=!1)},onMouseLeave:()=>{f.current=!0,v(!1),h(-1)}}),[g,h,E,o,c,u,a]);return{focusVisible:f.current?g:-1,controlledHighlighting:d,highlightedIndex:g,setHighlightedIndex:h,listProps:R,setIgnoreFocus:v}};function It(t,e,n){return e==="ArrowUp"?n>0?n-1:n:n===null?0:n===t-1?n:n+1}var F=K(require("react"));var fe=t=>t.type===Z||!!t.props["data-group"],Ke=t=>{let e=(0,F.useCallback)(()=>{let r=(u,i="root",l={},d={})=>{let a=l[i]=[],h=0,f=!1;return F.default.Children.forEach(u,w=>{if(w.type===ge)f=!0;else{let v=fe(w),g=i==="root"?`${h}`:`${i}.${h}`,{props:{action:E,options:T}}=w,{childWithId:R,grandChildren:s}=c(w,g,v,f);a.push(R),s?r(s,g,l,d):d[g]={action:E,options:T},h+=1,f=!1}}),[l,d]},c=(u,i,l,d=!1)=>{let{props:{children:a}}=u;return{childWithId:F.default.cloneElement(u,{hasSeparator:d,id:`${i}`,key:i,children:l?void 0:a}),grandChildren:l?a:void 0}};return r(t)},[t]),[n,o]=(0,F.useMemo)(()=>e(),[e]);return[n,o]};var U=require("react/jsx-runtime"),Ne="vuuMenuList",ge=()=>(0,U.jsx)("li",{className:"vuuMenuItem-divider"}),Z=()=>null,re=({children:t,idx:e,...n})=>(0,U.jsx)("div",{...n,children:t}),wt=t=>t.props["data-icon"],Oe=({activatedByKeyboard:t,childMenuShowing:e=-1,children:n,className:o,highlightedIdx:r,id:c,isRoot:u,listItemProps:i,menuId:l,onHighlightMenuItem:d,onActivate:a,onCloseMenu:h,onOpenMenu:f,...w})=>{let v=(0,Be.useIdMemo)(c),g=(0,O.useRef)(null),E=(0,O.useMemo)(()=>new Map,[]),T=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(f==null||f(M.id))},R=y=>{var b;let M=(b=g.current)==null?void 0:b.querySelector(`:scope > [data-idx='${y}']`);M!=null&&M.id&&(a==null||a(M.id))},{focusVisible:s,highlightedIndex:m,listProps:p}=$e({count:O.default.Children.count(n),highlightedIndex:r,onActivate:R,onHighlight:d,onOpenMenu:T,onCloseMenu:h}),x=e==-1?s:-1;return(0,O.useLayoutEffect)(()=>{var y;e===-1&&t&&((y=g.current)==null||y.focus())},[t,e]),(0,U.jsx)("div",{...w,...p,"aria-activedescendant":(()=>m===void 0||m===-1?void 0:E.get(m))(),className:(0,Me.default)(Ne,o,{[`${Ne}-childMenuShowing`]:e!==-1}),"data-root":u||void 0,id:`${v}-${l}`,ref:g,role:"menu",tabIndex:0,children:S()});function S(){let y={...i,role:"menuitem"},M=(C,$,q)=>$?[(0,U.jsx)("span",{className:"vuuIconContainer","data-icon":q},"icon")].concat(C):C;function b(C,$,q,be){var Ce;let{children:_e,className:je,"data-icon":ve,id:ae,hasSeparator:et,label:tt,...nt}=$.props,pe=fe($),ye=pe&&e===q,ot=ye?`${v}-${ae}`:void 0;C.push((0,U.jsx)(re,{...nt,...y,...Pt(`${v}-${l}`,ae,q,(Ce=$.key)!=null?Ce:ae,m,x,je,et),"aria-controls":ot,"aria-haspopup":pe||void 0,"aria-expanded":ye||void 0,children:M(pe?tt:_e,be,ve)}))}let L=[];if(n.length>0){let C=n.some(wt);n.forEach(($,q)=>{b(L,$,q,C)})}return L}},Pt=(t,e,n,o,r,c,u,i)=>({id:`${t}-${e}`,key:o!=null?o:n,"data-idx":n,"data-highlighted":n===r||void 0,className:(0,Me.default)("vuuMenuItem",u,{"vuuMenuItem-separator":i,focusVisible:c===n})});Oe.displayName="MenuList";var Fe=Oe;var I=require("react");function Ge(t){if(t){let e=t.dataset.idx;if(e)return parseInt(e,10);if(t.ariaPosInSet)return parseInt(t.ariaPosInSet,10)-1}}var he=t=>t==null?void 0:t.closest("[data-idx],[aria-posinset]");var We=(t,e,n)=>t.map((o,r)=>r===t.length-1?{...o,[n]:o[n]-e}:o),Et=(t,e)=>We(t,e,"left"),Lt=(t,e)=>We(t,e,"top"),Rt=(t,e)=>{let[n,o]=e.slice(-2),r=document.getElementById(`${t}-${o.id}`);if(r===null)throw Error(`useCascade.flipSides element with id ${o.id} not found`);let{width:c}=r.getBoundingClientRect();return e.map(u=>u===o?{...u,left:n.left-(c-2)}:u)},Ht=(t,e)=>{let[{left:n,top:o}]=e.slice(-1),{offsetWidth:r,offsetTop:c}=t;return{left:n+r,top:c+o}},_=t=>{let e=t.lastIndexOf("-");return e===-1?t:t.slice(e+1)},se=t=>{let e=_(t),n=e.lastIndexOf(".");return n>-1?e.slice(0,n):"root"},Tt=t=>{let e=0,n=t.indexOf(".",0);for(;n!==-1;)e+=1,n=t.indexOf(".",n+1);return e},kt=t=>({menuId:se(t.id),itemId:_(t.id),isGroup:t.ariaHasPopup==="true",isOpen:t.ariaExpanded==="true",level:Tt(t.id)}),qe=({id:t,onActivate:e,onMouseEnterItem:n,position:{x:o,y:r}})=>{let[,c]=(0,I.useState)({}),u=(0,I.useRef)([{id:"root",left:o,top:r}]),i=(0,I.useCallback)(s=>{u.current=s,c({})},[]),l=(0,I.useRef)(),d=(0,I.useRef)(),a=(0,I.useRef)({root:"no-popup"}),h=(0,I.useRef)(0),f=(0,I.useCallback)((s="root",m=null,p=null)=>{if(s==="root"&&m===null)i([{id:"root",left:o,top:r}]);else{a.current[s]="popup-open";let P=(p?p.ownerDocument:document).getElementById(`${t}-${s}-${m}`),{left:S,top:y}=Ht(P,u.current);i(u.current.concat({id:m,left:S,top:y}))}},[t,o,r,i]),w=(0,I.useCallback)(s=>{i(s==="root"?[]:u.current.slice(0,-1))},[i]),v=(0,I.useCallback)((s,m)=>{let p=u.current.slice(),{id:x}=p[p.length-1];for(;p.length>1&&!m.startsWith(x);){let P=se(x);p.pop(),a.current[x]="no-popup",a.current[P]="no-popup",{id:x}=p[p.length-1]}p.length<u.current.length&&i(p)},[i]),g=(0,I.useCallback)((s,m,p)=>{l.current&&clearTimeout(l.current),l.current=window.setTimeout(()=>{console.log(`scheduleOpen timed out opening ${m}`),v(s,m),a.current[s]="popup-open",a.current[m]="no-popup",f(s,m,p)},400)},[v,f]),E=(0,I.useCallback)((s,m,p)=>{console.log(`scheduleClose openMenuId ${s} menuId ${m} itemId ${p}`),a.current[s]="pending-close",d.current=window.setTimeout(()=>{v(m,p)},400)},[v]),T=(0,I.useCallback)(()=>{let{current:s}=u,[m]=s.slice(-1),p=document.getElementById(`${t}-${m.id}`);if(p){let{right:x,bottom:P}=p.getBoundingClientRect(),{clientHeight:S,clientWidth:y}=document.body;if(x>y){let M=s.length>1?Rt(t,s):Et(s,x-y);i(M)}else if(P>S){let M=Lt(s,P-S);i(M)}}},[t,i]),R=(0,I.useMemo)(()=>({onMouseEnter:s=>{let m=he(s.target),{menuId:p,itemId:x,isGroup:P,isOpen:S,level:y}=kt(m),M=h.current===y,{current:{[p]:b}}=a;if(h.current=y,b==="no-popup"&&P)a.current[p]="popup-pending",g(p,x,m);else if(b==="popup-pending"&&!P)a.current[p]="no-popup",clearTimeout(l.current),l.current=void 0;else if(b==="popup-pending"&&P)clearTimeout(l.current),g(p,x,m);else if(b==="popup-open"){let[{id:L},{id:C}]=u.current.slice(-2);L===p&&a.current[C]!=="pending-close"&&M?(E(C,p,x),P&&!S&&g(p,x,m)):L===p&&P&&x!==C&&a.current[C]==="pending-close"?g(p,x,m):P?(v(p,x),g(p,x,m)):a.current[C]==="pending-close"&&M||v(p,x)}b==="pending-close"&&(l.current&&(clearTimeout(l.current),l.current=void 0),clearTimeout(d.current),d.current=void 0,a.current[p]="popup-open"),n(s,x)},onClick:s=>{let m=s.target,p=he(m),x=Ge(p);console.log(`list item click [${x}] hasPopup ${p.ariaHasPopup}`),p.ariaHasPopup==="true"?p.ariaExpanded!=="true"&&f(x):e(_(p.id))}}),[v,e,n,f,E,g]);return{closeMenu:w,handleRender:T,listItemProps:R,openMenu:f,openMenus:u.current}};var Ve=require("react"),Ue=({containerClassName:t,isOpen:e,onClose:n})=>{(0,Ve.useEffect)(()=>{let o;return e&&(o=r=>{r.target.closest(`.${t}`)===null&&(n==null||n("root"))},document.body.addEventListener("click",o,!0)),()=>{o&&document.body.removeEventListener("click",o,!0)}},[t,e,n])};var j=require("react/jsx-runtime"),Je=require("react"),Dt=()=>{},ie=({activatedByKeyboard:t,children:e,className:n,id:o,onClose:r=()=>{},position:c={x:0,y:0},style:u,...i})=>{let l=(0,ze.useIdMemo)(o),d=(0,G.useRef)(Dt),[a,h]=Ke(e),f=(0,G.useRef)(t),w=(0,G.useCallback)(()=>{f.current=!1},[]),v=(0,G.useCallback)(M=>{let{action:b,options:L}=h[M];d.current("root"),r(b,L)},[h,r]),{closeMenu:g,listItemProps:E,openMenu:T,openMenus:R,handleRender:s}=qe({id:l,onActivate:v,onMouseEnterItem:w,position:c});d.current=g,console.log({openMenus:R});let m=(0,G.useCallback)(()=>{g(),r()},[g,r]);Ue({containerClassName:"vuuMenuList",onClose:m,isOpen:R.length>0});let p=M=>{let b=_(M),L=se(b);f.current=!0,T(L,b)},x=()=>{f.current=!0,g()},P=()=>{},S=R.length-1,y=M=>{if(M>=S)return-1;{let{id:b}=R[M+1],L=b.lastIndexOf(".");return parseInt(L===-1?b:b.slice(-L),10)}};return(0,j.jsx)(j.Fragment,{children:R.map(({id:M,left:b,top:L},C)=>{let $=y(C);return(0,j.jsx)(Y,{x:b,y:L,onRender:s,children:(0,Je.createElement)(Fe,{...i,activatedByKeyboard:f.current,childMenuShowing:$,className:n,id:l,menuId:M,isRoot:C===0,key:C,listItemProps:E,onActivate:v,onHighlightMenuItem:P,onCloseMenu:x,onOpenMenu:p,style:u},a[M])},C)})})};ie.displayName="ContextMenu";var z=require("react"),ue=require("react/jsx-runtime"),ee=(0,z.createContext)(null),xe=t=>t!==void 0&&"children"in t,At=({children:t,context:e,menuActionHandler:n,menuBuilder:o})=>{let r=(0,z.useMemo)(()=>e!=null&&e.menuBuilders&&o?e.menuBuilders.concat(o):o?[o]:(e==null?void 0:e.menuBuilders)||[],[e,o]),c=(0,z.useCallback)((u,i)=>{var l;if(n!=null&&n(u,i)||(l=e==null?void 0:e.menuActionHandler)!=null&&l.call(e,u,i))return!0},[e,n]);return(0,ue.jsx)(ee.Provider,{value:{menuActionHandler:c,menuBuilders:r},children:t})},St=({children:t,label:e,menuActionHandler:n,menuBuilder:o})=>(0,ue.jsx)(ee.Consumer,{children:r=>(0,ue.jsx)(At,{context:r,label:e,menuActionHandler:n,menuBuilder:o,children:t})});var ne=require("react");var Qe=K(require("classnames")),A=K(require("react")),J=K(require("react-dom"));var W=!1,k=[];function ce(t){if(t.key==="Esc"){if(k.length)Ye();else if(W){let e=document.body.querySelector(".vuuDialog");e&&J.default.unmountComponentAtNode(e)}}}function Xe(t){if(k.length){let e=document.body.querySelectorAll(".vuuPopup");for(let n=0;n<e.length;n++)if(e[n].contains(t.target))return;Ye()}}function Ye(){if(k.length){let t=document.body.querySelectorAll(".vuuPopup");for(let e=0;e<t.length;e++)J.default.unmountComponentAtNode(t[e]);Ze("*")}}function $t(){W===!1&&(W=!0,window.addEventListener("keydown",ce,!0))}function Kt(){W&&(W=!1,window.removeEventListener("keydown",ce,!0))}function Nt(t){k.indexOf(t)===-1&&(k.push(t),W===!1&&(window.addEventListener("keydown",ce,!0),window.addEventListener("click",Xe,!0)))}function Ze(t){if(k.length){if(t==="*")k.length=0;else{let e=k.indexOf(t);e!==-1&&k.splice(e,1)}k.length===0&&W===!1&&(window.removeEventListener("keydown",ce,!0),window.removeEventListener("click",Xe,!0))}}var Bt=({children:t,position:e,style:n})=>{let o=(0,Qe.default)("hwPopup","hwPopupContainer",e);return(0,A.createElement)("div",{className:o,style:n},t)},Ot=1,D=class{static showPopup({name:e="anon",group:n="all",position:o="",left:r=0,right:c="auto",top:u=0,width:i="auto",component:l}){if(!l)throw Error("PopupService showPopup, no component supplied");Nt(e);let d=document.body.querySelector(".vuuPopup."+n);d===null&&(d=document.createElement("div"),d.className="vuuPopup "+n,document.body.appendChild(d));let a={width:i};Q((0,A.createElement)(Bt,{key:Ot++,position:o,style:a},l),d,r,u,()=>{D.keepWithinThePage(d,c)})}static hidePopup(e="anon",n="all"){if(k.indexOf(e)!==-1){Ze(e);let o=document.body.querySelector(`.vuuPopup.${n}`);o&&J.default.unmountComponentAtNode(o)}}static keepWithinThePage(e,n="auto"){let o=e.querySelector(".vuuPopupContainer > *");if(o){let{top:r,left:c,width:u,height:i,right:l}=o.getBoundingClientRect(),d=window.innerWidth,h=window.innerHeight-(r+i);h<0&&(o.style.top=Math.round(r)+h+"px");let f=d-(c+u);if(f<0&&(o.style.left=Math.round(c)+f+"px"),typeof n=="number"&&n!==l){let w=n-l;o.style.left=c+w+"px"}}}},te=class{static showDialog(e){let n=".vuuDialog",o=e.props.onClose;$t(),J.default.render(A.default.cloneElement(e,{container:n,onClose:()=>{te.closeDialog(),o&&o()}}),document.body.querySelector(n))}static closeDialog(){Kt();let e=document.body.querySelector(".vuuDialog");e&&J.default.unmountComponentAtNode(e)}},Ft=t=>{let e=(0,A.useRef)(),n=(0,A.useRef)(null),o=(r,c)=>{let{name:u,group:i,depth:l,width:d}=r,a,h;if(e.current&&(window.clearTimeout(e.current),e.current=void 0),r.close===!0)D.hidePopup(u,i);else{let{position:f,children:w}=r,{left:v,top:g,width:E,bottom:T}=c;f==="below"?(a=v,h=T):f==="above"&&(a=v,h=g),e.current=window.setTimeout(()=>{D.showPopup({name:u,group:i,depth:l,position:f,left:a,top:h,width:d||E,component:w})},10)}};return(0,A.useEffect)(()=>{if(n.current){let r=n.current.parentElement,c=r==null?void 0:r.getBoundingClientRect();c&&o(t,c)}return()=>{D.hidePopup(t.name,t.group)}},[t]),A.default.createElement("div",{className:"popup-proxy",ref:n})};var le=require("react/jsx-runtime"),Gt=t=>{let e=(0,ne.useContext)(ee),n=(0,ne.useCallback)((r,c,u)=>{let i=[];for(let l of r)i=i.concat(l(c,u));return i},[]);return(0,ne.useCallback)((r,c,u)=>{var l;r.stopPropagation(),r.preventDefault();let i=(l=e==null?void 0:e.menuBuilders)!=null?l:t?[t]:void 0;if(Array.isArray(i)&&i.length>0){let d=n(i,c,u);console.log({menuItemDescriptors:d}),d.length&&(e!=null&&e.menuActionHandler)&&(console.log(`showContextMenu ${c}`,{options:u}),Wt(r,d,e.menuActionHandler))}else console.warn("useContextMenu, no menuBuilders configured. These should be supplied via the ContextMenuProvider(s)")},[n,e==null?void 0:e.menuActionHandler,e==null?void 0:e.menuBuilders,t])},Wt=(t,e,n)=>{let{clientX:o,clientY:r}=t,i=(0,le.jsx)(ie,{onClose:(l,d)=>{l&&(n(l,d),D.hidePopup())},position:{x:o,y:r},children:(l=>{let d=(a,h)=>xe(a)?(0,le.jsx)(Z,{label:a.label,children:a.children.map(d)},h):(0,le.jsx)(re,{action:a.action,"data-icon":a.icon,options:a.options,children:a.label},h);return l.map(d)})(e)});D.showPopup({left:0,top:0,component:i})};
 //# sourceMappingURL=index.js.map