@vuu-ui/vuu-popups 0.0.26

package/cjs/menu/MenuList.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var useKeyboardNavigation = require('./use-keyboard-navigation.js');
+var MenuList$1 = require('./MenuList.css.js');
+
+const classBase = "vuuMenuList";
+const Separator = () => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "vuuMenuItem-divider" });
+const isMenuItemGroup = (child) => child.type === MenuItemGroup || !!child.props["data-group"];
+const MenuItemGroup = () => null;
+const MenuItem = ({
+  children,
+  idx,
+  options,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children });
+};
+const MenuItemLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+MenuItemLabel.displayName = "MenuItemLabel";
+MenuItem.Label = MenuItemLabel;
+const getDisplayName = (item) => React.isValidElement(item) && typeof item.type !== "string" && "displayName" in item.type ? item.type.displayName : void 0;
+const isMenuItemLabel = (item) => getDisplayName(item) === "MenuItemLabel";
+const hasIcon = (child) => child.props["data-icon"];
+const MenuList = ({
+  activatedByKeyboard,
+  childMenuShowing,
+  children,
+  className,
+  defaultHighlightedIdx,
+  highlightedIdx: highlightedIdxProp,
+  id: idProp,
+  isRoot,
+  listItemProps,
+  onHighlightMenuItem,
+  onActivate,
+  onCloseMenu,
+  openMenu: onOpenMenu,
+  ...props
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-menu-list",
+    css: MenuList$1,
+    window: targetWindow
+  });
+  const id = vuuUtils.useId(idProp);
+  const root = React.useRef(null);
+  const mapIdxToId = React.useMemo(() => /* @__PURE__ */ new Map(), []);
+  const handleActivate = (idx) => {
+    const el = root.current?.querySelector(`:scope > [data-index='${idx}']`);
+    el?.id && onActivate?.(el.id);
+  };
+  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation.useKeyboardNavigation({
+    count: React.Children.count(children),
+    defaultHighlightedIdx,
+    highlightedIndex: highlightedIdxProp,
+    onActivate: handleActivate,
+    onHighlight: onHighlightMenuItem,
+    onOpenMenu,
+    onCloseMenu
+  });
+  const appliedFocusVisible = childMenuShowing == void 0 ? focusVisible : -1;
+  React.useLayoutEffect(() => {
+    if (childMenuShowing === void 0 && activatedByKeyboard) {
+      root.current?.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__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "vuuIconContainer",
+          "data-icon": iconName
+        },
+        "icon"
+      )
+    ].concat(childElement) : childElement;
+    function addClonedChild(list, child, idx, withIcon) {
+      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;
+      const ariaLabel = label ?? typeof children2 === "string" ? children2 : void 0;
+      list.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItem,
+          {
+            ...props2,
+            ...propsCommonToAllListItems,
+            ...getMenuItemProps(
+              itemId,
+              idx,
+              child.key ?? itemId,
+              highlightedIndex,
+              appliedFocusVisible,
+              className2,
+              hasSeparator
+            ),
+            "aria-controls": ariaControls,
+            "aria-haspopup": hasSubMenu || void 0,
+            "aria-expanded": subMenuShowing || void 0,
+            "aria-label": ariaLabel,
+            children: hasSubMenu ? maybeIcon(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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ...listProps,
+      "aria-activedescendant": getActiveDescendant(),
+      className: cx(classBase, className, {
+        [`${classBase}-childMenuShowing`]: childMenuShowing !== void 0
+      }),
+      "data-root": isRoot || void 0,
+      id,
+      ref: root,
+      role: "menu",
+      children: renderContent()
+    }
+  );
+};
+const getMenuItemProps = (itemId, idx, key, highlightedIdx, focusVisible, className, hasSeparator) => ({
+  id: `menuitem-${itemId}`,
+  key: key ?? idx,
+  "data-index": idx,
+  className: cx("vuuMenuItem", className, {
+    "vuuMenuItem-separator": hasSeparator,
+    vuuHighlighted: idx === highlightedIdx,
+    focusVisible: focusVisible === idx
+  })
+});
+MenuList.displayName = "MenuList";
+
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
+exports.MenuList = MenuList;
+exports.Separator = Separator;
+exports.isMenuItemGroup = isMenuItemGroup;
+exports.isMenuItemLabel = isMenuItemLabel;
+//# sourceMappingURL=MenuList.js.map

package/cjs/menu/MenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuList.js","sources":["../../src/menu/MenuList.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, {\n  FC,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n//TODO do we want this dependency ?\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport {\n  MenuCloseHandler,\n  useKeyboardNavigation,\n} from \"./use-keyboard-navigation\";\n\nimport menuListCss from \"./MenuList.css\";\n\nconst classBase = \"vuuMenuList\";\n\nexport const Separator = () => <li className=\"vuuMenuItem-divider\" />;\n\nexport const isMenuItemGroup = (child: ReactElement) =>\n  child.type === MenuItemGroup || !!child.props[\"data-group\"];\n\nexport interface MenuItemGroupProps {\n  children:\n    | ReactElement<MenuItemProps>[]\n    | [ReactElement<MenuItemLabelProps>, ...ReactElement<MenuItemProps>[]];\n  label?: string;\n}\n\nexport interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {\n  action?: string;\n  idx?: number;\n  options?: unknown;\n}\n\n// Purely used as markers, props will be extracted\nexport const MenuItemGroup: FC<MenuItemGroupProps> = () => null;\n// eslint-disable-next-line no-unused-vars\nexport const MenuItem = ({\n  children,\n  idx,\n  options,\n  ...props\n}: MenuItemProps) => {\n  return <div {...props}>{children}</div>;\n};\n\nexport interface MenuItemLabelProps {\n  children: ReactNode;\n}\nconst MenuItemLabel = ({ children }: { children: ReactNode }) => (\n  <>{children}</>\n);\nMenuItemLabel.displayName = \"MenuItemLabel\";\nMenuItem.Label = MenuItemLabel;\n\nconst getDisplayName = (item: ReactNode) =>\n  React.isValidElement(item) &&\n  typeof item.type !== \"string\" &&\n  \"displayName\" in item.type\n    ? item.type.displayName\n    : undefined;\n\nexport const isMenuItemLabel = (\n  item: ReactNode\n): item is ReactElement<MenuItemLabelProps> =>\n  getDisplayName(item) === \"MenuItemLabel\";\n\nconst hasIcon = (child: ReactElement) => child.props[\"data-icon\"];\n\nexport type MenuOpenHandler = (\n  menuItemEl: HTMLElement,\n  immediate?: boolean\n) => void;\nexport interface MenuListProps extends HTMLAttributes<HTMLDivElement> {\n  activatedByKeyboard?: boolean;\n  children: ReactElement[];\n  childMenuShowing?: string;\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  isRoot?: boolean;\n  listItemProps?: Partial<MenuItemProps>;\n  onActivate?: (menuId: string) => void;\n  onCloseMenu: MenuCloseHandler;\n  openMenu?: MenuOpenHandler;\n  onHighlightMenuItem?: (idx: number) => void;\n}\n\nexport const MenuList = ({\n  activatedByKeyboard,\n  childMenuShowing,\n  children,\n  className,\n  defaultHighlightedIdx,\n  highlightedIdx: highlightedIdxProp,\n  id: idProp,\n  isRoot,\n  listItemProps,\n  onHighlightMenuItem,\n  onActivate,\n  onCloseMenu,\n  openMenu: onOpenMenu,\n  ...props\n}: MenuListProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-menu-list\",\n    css: menuListCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const root = useRef<HTMLDivElement>(null);\n\n  // The id generation be,ongs in useIttemsWithIds\n  const mapIdxToId = useMemo(() => new Map(), []);\n\n  const handleActivate = (idx: number) => {\n    const el = root.current?.querySelector(`:scope > [data-index='${idx}']`);\n    el?.id && onActivate?.(el.id);\n  };\n\n  const { focusVisible, highlightedIndex, listProps } = useKeyboardNavigation({\n    count: React.Children.count(children),\n    defaultHighlightedIdx,\n    highlightedIndex: highlightedIdxProp,\n    onActivate: handleActivate,\n    onHighlight: onHighlightMenuItem,\n    onOpenMenu,\n    onCloseMenu,\n  });\n\n  const appliedFocusVisible = childMenuShowing == undefined ? focusVisible : -1;\n\n  useLayoutEffect(() => {\n    if (childMenuShowing === undefined && activatedByKeyboard) {\n      root.current?.focus();\n    }\n  }, [activatedByKeyboard, childMenuShowing]);\n\n  const getActiveDescendant = () =>\n    highlightedIndex === undefined || highlightedIndex === -1\n      ? undefined\n      : mapIdxToId.get(highlightedIndex);\n\n  function renderContent() {\n    const propsCommonToAllListItems = {\n      ...listItemProps,\n      role: \"menuitem\",\n    };\n\n    const maybeIcon = (\n      childElement: ReactElement,\n      withIcon: boolean,\n      iconName?: string\n    ) =>\n      withIcon\n        ? [\n            <span\n              className=\"vuuIconContainer\"\n              data-icon={iconName}\n              key=\"icon\"\n            />,\n          ].concat(childElement)\n        : childElement;\n\n    function addClonedChild(\n      list: ReactElement[],\n      child: ReactElement,\n      idx: number,\n      withIcon: boolean\n    ) {\n      const {\n        children,\n        className,\n        \"data-icon\": iconName,\n        id: itemId,\n        hasSeparator,\n        label,\n        ...props\n      } = child.props;\n      const hasSubMenu = isMenuItemGroup(child);\n      const subMenuShowing = hasSubMenu && childMenuShowing === itemId;\n      const ariaControls = subMenuShowing ? `${id}-${itemId}` : undefined;\n\n      const ariaLabel =\n        label ?? typeof children === \"string\" ? children : undefined;\n\n      list.push(\n        <MenuItem\n          {...props}\n          {...propsCommonToAllListItems}\n          {...getMenuItemProps(\n            itemId,\n            idx,\n            child.key ?? itemId,\n            highlightedIndex,\n            appliedFocusVisible,\n            className,\n            hasSeparator\n          )}\n          aria-controls={ariaControls}\n          aria-haspopup={hasSubMenu || undefined}\n          aria-expanded={subMenuShowing || undefined}\n          aria-label={ariaLabel}\n        >\n          {hasSubMenu\n            ? maybeIcon(label ?? children, withIcon, iconName)\n            : maybeIcon(children, withIcon, iconName)}\n        </MenuItem>\n      );\n      // mapIdxToId.set(idx, itemId);\n    }\n\n    const listItems: ReactElement[] = [];\n\n    if (children.length > 0) {\n      const withIcon = children.some(hasIcon);\n      children.forEach((child, idx) => {\n        addClonedChild(listItems, child, idx, withIcon);\n      });\n    }\n\n    return listItems;\n  }\n\n  return (\n    <div\n      {...props}\n      {...listProps}\n      aria-activedescendant={getActiveDescendant()}\n      className={cx(classBase, className, {\n        [`${classBase}-childMenuShowing`]: childMenuShowing !== undefined,\n      })}\n      data-root={isRoot || undefined}\n      id={id}\n      ref={root}\n      role=\"menu\"\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nconst getMenuItemProps = (\n  itemId: string,\n  idx: number,\n  key: string,\n  highlightedIdx: number,\n  focusVisible: number,\n  className: string,\n  hasSeparator: boolean\n) => ({\n  id: `menuitem-${itemId}`,\n  key: key ?? idx,\n  \"data-index\": idx,\n  className: cx(\"vuuMenuItem\", className, {\n    \"vuuMenuItem-separator\": hasSeparator,\n    vuuHighlighted: idx === highlightedIdx,\n    focusVisible: focusVisible === idx,\n  }),\n});\n\nMenuList.displayName = \"MenuList\";\n"],"names":["jsx","useWindow","useComponentCssInjection","menuListCss","useId","useRef","useMemo","useKeyboardNavigation","useLayoutEffect","children","className","props"],"mappings":"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"}

package/cjs/menu/context-menu-provider.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ContextMenuContext = React.createContext(
+  null
+);
+const Provider = ({
+  children,
+  context,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  const menuBuilders = React.useMemo(() => {
+    if (context?.menuBuilders && menuBuilder) {
+      return context.menuBuilders.concat(menuBuilder);
+    } else if (menuBuilder) {
+      return [menuBuilder];
+    } else {
+      return context?.menuBuilders || [];
+    }
+  }, [context, menuBuilder]);
+  const handleMenuAction = React.useCallback(
+    (reason) => {
+      if (menuActionHandler?.(reason)) {
+        return true;
+      }
+      if (context?.menuActionHandler?.(reason)) {
+        return true;
+      }
+    },
+    [context, menuActionHandler]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ContextMenuContext.Provider,
+    {
+      value: {
+        menuActionHandler: handleMenuAction,
+        menuBuilders
+      },
+      children
+    }
+  );
+};
+const ContextMenuProvider = ({
+  children,
+  label,
+  menuActionHandler,
+  menuBuilder
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Consumer, { children: (parentContext) => /* @__PURE__ */ jsxRuntime.jsx(
+    Provider,
+    {
+      context: parentContext,
+      label,
+      menuActionHandler,
+      menuBuilder,
+      children
+    }
+  ) });
+};
+
+exports.ContextMenuContext = ContextMenuContext;
+exports.ContextMenuProvider = ContextMenuProvider;
+//# sourceMappingURL=context-menu-provider.js.map

package/cjs/menu/context-menu-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-provider.js","sources":["../../src/menu/context-menu-provider.tsx"],"sourcesContent":["import type {\n  ContextMenuContextType,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactNode, useCallback, useMemo } from \"react\";\n\nexport const ContextMenuContext = createContext<ContextMenuContextType | null>(\n  null\n);\n\nexport interface ContextMenuConfiguration {\n  menuActionHandler?: MenuActionHandler;\n  menuBuilder: MenuBuilder;\n}\n\nexport interface ContextMenuProviderProps extends ContextMenuConfiguration {\n  children: ReactNode;\n  label?: string;\n}\n\ninterface ProviderProps extends ContextMenuProviderProps {\n  context: ContextMenuContextType | null;\n}\n\nconst Provider = ({\n  children,\n  context,\n  menuActionHandler,\n  menuBuilder,\n}: ProviderProps) => {\n  const menuBuilders = useMemo(() => {\n    if (context?.menuBuilders && menuBuilder) {\n      return context.menuBuilders.concat(menuBuilder);\n    } else if (menuBuilder) {\n      return [menuBuilder];\n    } else {\n      return context?.menuBuilders || [];\n    }\n  }, [context, menuBuilder]);\n\n  const handleMenuAction = useCallback(\n    (reason) => {\n      if (menuActionHandler?.(reason)) {\n        return true;\n      }\n\n      if (context?.menuActionHandler?.(reason)) {\n        return true;\n      }\n    },\n    [context, menuActionHandler]\n  );\n\n  return (\n    <ContextMenuContext.Provider\n      value={{\n        menuActionHandler: handleMenuAction,\n        menuBuilders,\n      }}\n    >\n      {children}\n    </ContextMenuContext.Provider>\n  );\n};\n\n// Need an option for local menu to override higher-level menu, rather than extend\nexport const ContextMenuProvider = ({\n  children,\n  label,\n  menuActionHandler,\n  menuBuilder,\n}: ContextMenuProviderProps) => {\n  return (\n    <ContextMenuContext.Consumer>\n      {(parentContext) => (\n        <Provider\n          context={parentContext}\n          label={label}\n          menuActionHandler={menuActionHandler}\n          menuBuilder={menuBuilder}\n        >\n          {children}\n        </Provider>\n      )}\n    </ContextMenuContext.Consumer>\n  );\n};\n"],"names":["createContext","useMemo","useCallback","jsx"],"mappings":";;;;;AAOO,MAAM,kBAAqB,GAAAA,mBAAA;AAAA,EAChC,IAAA;AACF,EAAA;AAgBA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM;AACjC,IAAI,IAAA,OAAA,EAAS,gBAAgB,WAAa,EAAA;AACxC,MAAO,OAAA,OAAA,CAAQ,YAAa,CAAA,MAAA,CAAO,WAAW,CAAA,CAAA;AAAA,eACrC,WAAa,EAAA;AACtB,MAAA,OAAO,CAAC,WAAW,CAAA,CAAA;AAAA,KACd,MAAA;AACL,MAAO,OAAA,OAAA,EAAS,gBAAgB,EAAC,CAAA;AAAA,KACnC;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,WAAW,CAAC,CAAA,CAAA;AAEzB,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,MAAW,KAAA;AACV,MAAI,IAAA,iBAAA,GAAoB,MAAM,CAAG,EAAA;AAC/B,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAI,IAAA,OAAA,EAAS,iBAAoB,GAAA,MAAM,CAAG,EAAA;AACxC,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,CAAC,SAAS,iBAAiB,CAAA;AAAA,GAC7B,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,iBAAmB,EAAA,gBAAA;AAAA,QACnB,YAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAA,CAAA;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AACF,CAAgC,KAAA;AAC9B,EAAA,uBACGA,cAAA,CAAA,kBAAA,CAAmB,QAAnB,EAAA,EACE,WAAC,aACA,qBAAAA,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,aAAA;AAAA,MACT,KAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GAGP,EAAA,CAAA,CAAA;AAEJ;;;;;"}

package/cjs/menu/key-code.js

@@ -0,0 +1,54 @@
+'use strict';
+
+function union(set1, ...sets) {
+  const result = new Set(set1);
+  for (const set of sets) {
+    for (const element of set) {
+      result.add(element);
+    }
+  }
+  return result;
+}
+const Enter = "Enter";
+const Delete = "Delete";
+const actionKeys = /* @__PURE__ */ new Set([Enter, Delete]);
+const focusKeys = /* @__PURE__ */ new Set(["Tab"]);
+const arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const verticalNavigationKeys = /* @__PURE__ */ new Set(["Home", "End", "ArrowDown", "ArrowUp"]);
+const horizontalNavigationKeys = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "ArrowRight",
+  "ArrowLeft"
+]);
+const functionKeys = /* @__PURE__ */ new Set([
+  "F1",
+  "F2",
+  "F3",
+  "F4",
+  "F5",
+  "F6",
+  "F7",
+  "F8",
+  "F9",
+  "F10",
+  "F11",
+  "F12"
+]);
+union(
+  actionKeys,
+  horizontalNavigationKeys,
+  verticalNavigationKeys,
+  arrowLeftRightKeys,
+  functionKeys,
+  focusKeys
+);
+const isNavigationKey = ({ key }, orientation = "vertical") => {
+  const navigationKeys = orientation === "vertical" ? verticalNavigationKeys : horizontalNavigationKeys;
+  return navigationKeys.has(key);
+};
+
+exports.Delete = Delete;
+exports.Enter = Enter;
+exports.isNavigationKey = isNavigationKey;
+//# sourceMappingURL=key-code.js.map

package/cjs/menu/key-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-code.js","sources":["../../src/menu/key-code.ts"],"sourcesContent":["function union(set1: Set<string>, ...sets: Set<string>[]) {\n  const result = new Set(set1);\n  for (const set of sets) {\n    for (const element of set) {\n      result.add(element);\n    }\n  }\n  return result;\n}\n\nexport const ArrowUp = \"ArrowUp\";\nexport const ArrowDown = \"ArrowDown\";\nexport const ArrowLeft = \"ArrowLeft\";\nexport const Backspace = \"Backspace\";\nexport const ArrowRight = \"ArrowRight\";\nexport const Enter = \"Enter\";\nexport const Escape = \"Escape\";\nexport const Delete = \"Delete\";\n\nconst actionKeys = new Set([Enter, Delete]);\nconst focusKeys = new Set([\"Tab\"]);\n// const navigationKeys = new Set([\"Home\", \"End\", \"ArrowRight\", \"ArrowLeft\",\"ArrowDown\", \"ArrowUp\"]);\nconst arrowLeftRightKeys = new Set([\"ArrowRight\", \"ArrowLeft\"]);\nconst verticalNavigationKeys = new Set([\"Home\", \"End\", \"ArrowDown\", \"ArrowUp\"]);\nconst horizontalNavigationKeys = new Set([\n  \"Home\",\n  \"End\",\n  \"ArrowRight\",\n  \"ArrowLeft\",\n]);\nconst functionKeys = new Set([\n  \"F1\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n]);\nconst specialKeys = union(\n  actionKeys,\n  horizontalNavigationKeys,\n  verticalNavigationKeys,\n  arrowLeftRightKeys,\n  functionKeys,\n  focusKeys\n);\nexport const isCharacterKey = (evt: KeyboardEvent) => {\n  if (specialKeys.has(evt.key)) {\n    return false;\n  }\n  if (typeof evt.which === \"number\" && evt.which > 0) {\n    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;\n  }\n};\n\nexport const isNavigationKey = (\n  { key }: { key: string },\n  orientation = \"vertical\"\n) => {\n  const navigationKeys =\n    orientation === \"vertical\"\n      ? verticalNavigationKeys\n      : horizontalNavigationKeys;\n  return navigationKeys.has(key);\n};\n"],"names":[],"mappings":";;AAAA,SAAS,KAAA,CAAM,SAAsB,IAAqB,EAAA;AACxD,EAAM,MAAA,MAAA,GAAS,IAAI,GAAA,CAAI,IAAI,CAAA,CAAA;AAC3B,EAAA,KAAA,MAAW,OAAO,IAAM,EAAA;AACtB,IAAA,KAAA,MAAW,WAAW,GAAK,EAAA;AACzB,MAAA,MAAA,CAAO,IAAI,OAAO,CAAA,CAAA;AAAA,KACpB;AAAA,GACF;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA;AAOO,MAAM,KAAQ,GAAA,QAAA;AAEd,MAAM,MAAS,GAAA,SAAA;AAEtB,MAAM,6BAAiB,IAAA,GAAA,CAAI,CAAC,KAAA,EAAO,MAAM,CAAC,CAAA,CAAA;AAC1C,MAAM,SAAY,mBAAA,IAAI,GAAI,CAAA,CAAC,KAAK,CAAC,CAAA,CAAA;AAEjC,MAAM,qCAAyB,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,WAAW,CAAC,CAAA,CAAA;AAC9D,MAAM,sBAAA,uBAA6B,GAAI,CAAA,CAAC,QAAQ,KAAO,EAAA,WAAA,EAAa,SAAS,CAAC,CAAA,CAAA;AAC9E,MAAM,wBAAA,uBAA+B,GAAI,CAAA;AAAA,EACvC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AACF,CAAC,CAAA,CAAA;AACD,MAAM,YAAA,uBAAmB,GAAI,CAAA;AAAA,EAC3B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AACF,CAAC,CAAA,CAAA;AACmB,KAAA;AAAA,EAClB,UAAA;AAAA,EACA,wBAAA;AAAA,EACA,sBAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AACF,EAAA;AAUO,MAAM,kBAAkB,CAC7B,EAAE,GAAI,EAAA,EACN,cAAc,UACX,KAAA;AACH,EAAM,MAAA,cAAA,GACJ,WAAgB,KAAA,UAAA,GACZ,sBACA,GAAA,wBAAA,CAAA;AACN,EAAO,OAAA,cAAA,CAAe,IAAI,GAAG,CAAA,CAAA;AAC/B;;;;;;"}

package/cjs/menu/list-dom-utils.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const closestListItem = (el) => el?.closest("[data-index],[aria-posinset]");
+
+exports.closestListItem = closestListItem;
+//# sourceMappingURL=list-dom-utils.js.map

package/cjs/menu/list-dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-dom-utils.js","sources":["../../src/menu/list-dom-utils.ts"],"sourcesContent":["export function listItemIndex(listItemEl: HTMLElement) {\n  if (listItemEl) {\n    const idx = listItemEl.dataset.index;\n    if (idx) {\n      return parseInt(idx, 10);\n      // eslint-disable-next-line no-cond-assign\n    } else if (listItemEl.ariaPosInSet) {\n      return parseInt(listItemEl.ariaPosInSet, 10) - 1;\n    }\n  }\n}\n\nconst listItemId = (el: HTMLElement | null | undefined) => el?.id;\n\nexport const closestListItem = (el: HTMLElement | null | undefined) =>\n  el?.closest(\"[data-index],[aria-posinset]\") as HTMLElement;\n\nexport const closestListItemId = (el: HTMLElement) =>\n  listItemId(closestListItem(el));\n\nexport const closestListItemIndex = (el: HTMLElement) =>\n  listItemIndex(closestListItem(el));\n"],"names":[],"mappings":";;AAcO,MAAM,eAAkB,GAAA,CAAC,EAC9B,KAAA,EAAA,EAAI,QAAQ,8BAA8B;;;;"}

package/cjs/menu/use-cascade.js

@@ -0,0 +1,277 @@
+'use strict';
+
+var React = require('react');
+var listDomUtils = require('./list-dom-utils.js');
+
+const nudge = (menus, distance, pos) => {
+  return menus.map(
+    (m, i) => i === menus.length - 1 ? {
+      ...m,
+      [pos]: m[pos] - distance
+    } : m
+  );
+};
+const nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
+const nudgeUp = (menus, distance) => nudge(menus, distance, "top");
+const 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
+  );
+};
+const getPosition = (el, openMenus) => {
+  const [{ left, top: menuTop }] = openMenus.slice(-1);
+  const { offsetWidth: width, offsetTop: top } = el;
+  return { left: left + width, top: top + menuTop };
+};
+const 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;
+  }
+};
+const getTargetMenuId = (id) => id.slice(9);
+const 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`);
+  }
+};
+const useCascade = ({
+  id: rootId,
+  onActivate,
+  onMouseEnterItem,
+  position: { x: posX, y: posY }
+}) => {
+  const [, forceRefresh] = React.useState({});
+  const openMenus = React.useRef([
+    { id: rootId, left: posX, top: posY }
+  ]);
+  const menuIsOpen = React.useCallback(
+    (menuId) => openMenus.current.findIndex((menu) => menu.id === menuId) !== -1,
+    []
+  );
+  const getOpenMenuStatus = React.useCallback((menuId) => {
+    const state = menuState.current[menuId];
+    if (state === void 0) {
+      throw Error(`getOpenMenuState no entry for menu ${menuId}`);
+    }
+    return state;
+  }, []);
+  const setOpenMenus = React.useCallback((menus) => {
+    openMenus.current = menus;
+    forceRefresh({});
+  }, []);
+  const menuOpenPendingTimeout = React.useRef();
+  const menuClosePendingTimeout = React.useRef();
+  const menuState = React.useRef({ [rootId]: "no-popup" });
+  const openMenu = React.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}`);
+        }
+      }
+    },
+    [rootId, posX, posY, setOpenMenus]
+  );
+  const closeMenu = React.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 = React.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 = React.useCallback(() => {
+    if (menuOpenPendingTimeout.current) {
+      clearTimeout(menuOpenPendingTimeout.current);
+      menuOpenPendingTimeout.current = void 0;
+    }
+  }, []);
+  const scheduleOpen = React.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 = React.useCallback(
+    (hostMenuId, openMenuId, itemId) => {
+      menuState.current[openMenuId] = "pending-close";
+      menuClosePendingTimeout.current = window.setTimeout(() => {
+        closeMenus(itemId);
+      }, 400);
+    },
+    [closeMenus]
+  );
+  const handleRender = React.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 = React.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;
+          }
+        } 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);
+          }
+        }
+      }
+      if (state === "pending-close") {
+        clearAnyScheduledOpenTasks();
+        clearTimeout(menuClosePendingTimeout.current);
+        menuClosePendingTimeout.current = void 0;
+        menuState.current[hostMenuId] = "popup-open";
+      }
+    },
+    [
+      clearAnyScheduledOpenTasks,
+      closeMenus,
+      getOpenMenuStatus,
+      menuIsOpen,
+      rootId,
+      scheduleClose,
+      scheduleOpen
+    ]
+  );
+  const listItemProps = React.useMemo(
+    () => ({
+      onMouseEnter: (evt) => {
+        const menuItemEl = listDomUtils.closestListItem(evt.target);
+        triggerChildMenu(menuItemEl);
+        onMouseEnterItem(evt, menuItemEl.id);
+      },
+      onClick: (evt) => {
+        const listItemEl = listDomUtils.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
+  };
+};
+
+exports.getHostMenuId = getHostMenuId;
+exports.useCascade = useCascade;
+//# sourceMappingURL=use-cascade.js.map