@basic-ui/core 0.0.46 → 0.0.48

package/build/esm/Menu/ContextMenuTrigger.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, HTMLAttributes } from 'react';
+export declare type ContextMenuTriggerProps = HTMLAttributes<HTMLElement> & {
+    as?: ElementType<any>;
+    innerAs?: ElementType<any>;
+    disabled?: boolean;
+};
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    as?: ElementType<any> | undefined;
+    innerAs?: ElementType<any> | undefined;
+    disabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/build/esm/Menu/ContextMenuTrigger.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "innerAs", "id", "onContextMenu", "disabled"];
+import { forwardRef, useId } from 'react';
+import { useMenuContext } from './context';
+import { wrapEvent } from '../utils/wrap-event';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ContextMenuTrigger = /*#__PURE__*/forwardRef(function ContextMenuTrigger(props, forwardedRef) {
+  var _props$as = props.as,
+      Comp = _props$as === void 0 ? 'div' : _props$as,
+      innerAs = props.innerAs,
+      preferredId = props.id,
+      onContextMenu = props.onContextMenu,
+      disabled = props.disabled,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var _useMenuContext = useMenuContext(),
+      menuListIdRef = _useMenuContext.menuListIdRef,
+      open = _useMenuContext.open,
+      buttonRef = _useMenuContext.buttonRef,
+      onChange = _useMenuContext.onChange,
+      setOffsetFn = _useMenuContext.setOffsetFn,
+      isContextMenu = _useMenuContext.isContextMenu;
+
+  var idGenerated = useId();
+  var id = preferredId || idGenerated;
+
+  var handleContextMenu = function handleContextMenu(e) {
+    if (disabled) {
+      return;
+    }
+
+    var rect = e.currentTarget.getBoundingClientRect();
+    isContextMenu.current = true;
+    buttonRef.current = e.currentTarget;
+    onChange(e, true);
+    var mouseX = e.nativeEvent.x;
+    var mouseY = e.nativeEvent.y;
+    setOffsetFn(function () {
+      return function (_ref) {
+        var reference = _ref.reference;
+        return [mouseX - rect.x, mouseY - rect.y - reference.height];
+      };
+    });
+    e.preventDefault();
+  };
+
+  return /*#__PURE__*/_jsx(Comp, _extends({
+    ref: forwardedRef,
+    as: innerAs,
+    id: id,
+    "aria-haspopup": true,
+    "aria-controls": menuListIdRef.current,
+    "aria-expanded": open ? true : undefined,
+    "data-menu-trigger": "",
+    onContextMenu: wrapEvent(onContextMenu, handleContextMenu),
+    disabled: disabled
+  }, otherProps));
+});
+//# sourceMappingURL=ContextMenuTrigger.js.map

package/build/esm/Menu/ContextMenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuTrigger.js","names":["forwardRef","useId","useMenuContext","wrapEvent","ContextMenuTrigger","props","forwardedRef","as","Comp","innerAs","preferredId","id","onContextMenu","disabled","otherProps","menuListIdRef","open","buttonRef","onChange","setOffsetFn","isContextMenu","idGenerated","handleContextMenu","e","rect","currentTarget","getBoundingClientRect","current","mouseX","nativeEvent","x","mouseY","y","reference","height","preventDefault","undefined"],"sources":["../../../src/Menu/ContextMenuTrigger.tsx"],"sourcesContent":["import type {\n  ElementType,\n  HTMLAttributes,\n  MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrap-event';\nimport type { OffsetsFunction } from '../Popper';\n\nexport type ContextMenuTriggerProps = HTMLAttributes<HTMLElement> & {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  disabled?: boolean;\n};\n\nexport const ContextMenuTrigger = forwardRef<\n  HTMLElement,\n  ContextMenuTriggerProps\n>(function ContextMenuTrigger(props, forwardedRef) {\n  const {\n    as: Comp = 'div',\n    innerAs,\n    id: preferredId,\n    onContextMenu,\n    disabled,\n    ...otherProps\n  } = props;\n  const {\n    menuListIdRef,\n    open,\n    buttonRef,\n    onChange,\n    setOffsetFn,\n    isContextMenu,\n  } = useMenuContext();\n\n  const idGenerated = useId();\n  const id = preferredId || idGenerated;\n\n  const handleContextMenu = (e: ReactMouseEvent<HTMLElement>) => {\n    if (disabled) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    isContextMenu.current = true;\n\n    buttonRef.current = e.currentTarget;\n    onChange(e, true);\n\n    const mouseX = e.nativeEvent.x;\n    const mouseY = e.nativeEvent.y;\n    setOffsetFn(\n      (): OffsetsFunction =>\n        ({ reference }) =>\n          [mouseX - rect.x, mouseY - rect.y - reference.height]\n    );\n    e.preventDefault();\n  };\n\n  return (\n    <Comp\n      ref={forwardedRef}\n      as={innerAs}\n      id={id}\n      aria-haspopup={true}\n      aria-controls={menuListIdRef.current}\n      aria-expanded={open ? true : undefined}\n      data-menu-trigger=\"\"\n      onContextMenu={wrapEvent(onContextMenu, handleContextMenu)}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n});\n"],"mappings":";;;AAKA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,qBAA1B;;AASA,OAAO,IAAMC,kBAAkB,gBAAGJ,UAAU,CAG1C,SAASI,kBAAT,CAA4BC,KAA5B,EAAmCC,YAAnC,EAAiD;EACjD,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,KADb;EAAA,IAEEC,OAFF,GAOIJ,KAPJ,CAEEI,OAFF;EAAA,IAGMC,WAHN,GAOIL,KAPJ,CAGEM,EAHF;EAAA,IAIEC,aAJF,GAOIP,KAPJ,CAIEO,aAJF;EAAA,IAKEC,QALF,GAOIR,KAPJ,CAKEQ,QALF;EAAA,IAMKC,UANL,4BAOIT,KAPJ;;EAQA,sBAOIH,cAAc,EAPlB;EAAA,IACEa,aADF,mBACEA,aADF;EAAA,IAEEC,IAFF,mBAEEA,IAFF;EAAA,IAGEC,SAHF,mBAGEA,SAHF;EAAA,IAIEC,QAJF,mBAIEA,QAJF;EAAA,IAKEC,WALF,mBAKEA,WALF;EAAA,IAMEC,aANF,mBAMEA,aANF;;EASA,IAAMC,WAAW,GAAGpB,KAAK,EAAzB;EACA,IAAMU,EAAE,GAAGD,WAAW,IAAIW,WAA1B;;EAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAqC;IAC7D,IAAIV,QAAJ,EAAc;MACZ;IACD;;IACD,IAAMW,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;IACAN,aAAa,CAACO,OAAd,GAAwB,IAAxB;IAEAV,SAAS,CAACU,OAAV,GAAoBJ,CAAC,CAACE,aAAtB;IACAP,QAAQ,CAACK,CAAD,EAAI,IAAJ,CAAR;IAEA,IAAMK,MAAM,GAAGL,CAAC,CAACM,WAAF,CAAcC,CAA7B;IACA,IAAMC,MAAM,GAAGR,CAAC,CAACM,WAAF,CAAcG,CAA7B;IACAb,WAAW,CACT;MAAA,OACE;QAAA,IAAGc,SAAH,QAAGA,SAAH;QAAA,OACE,CAACL,MAAM,GAAGJ,IAAI,CAACM,CAAf,EAAkBC,MAAM,GAAGP,IAAI,CAACQ,CAAd,GAAkBC,SAAS,CAACC,MAA9C,CADF;MAAA,CADF;IAAA,CADS,CAAX;IAKAX,CAAC,CAACY,cAAF;EACD,CAlBD;;EAoBA,oBACE,KAAC,IAAD;IACE,GAAG,EAAE7B,YADP;IAEE,EAAE,EAAEG,OAFN;IAGE,EAAE,EAAEE,EAHN;IAIE,iBAAe,IAJjB;IAKE,iBAAeI,aAAa,CAACY,OAL/B;IAME,iBAAeX,IAAI,GAAG,IAAH,GAAUoB,SAN/B;IAOE,qBAAkB,EAPpB;IAQE,aAAa,EAAEjC,SAAS,CAACS,aAAD,EAAgBU,iBAAhB,CAR1B;IASE,QAAQ,EAAET;EATZ,GAUMC,UAVN,EADF;AAcD,CA1D2C,CAArC"}

package/build/esm/Menu/Menu.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "open", "defaultOpen", "onChange"];
-import { forwardRef, useRef, Fragment, useId } from 'react';
+var _excluded = ["as", "innerAs", "open", "defaultOpen", "onChange"];
+import { useState, forwardRef, useRef, Fragment, useId } from 'react';
 import { MenuProvider } from './context';
 import { useControlledState } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Menu = /*#__PURE__*/forwardRef(function Menu(props, forwardedRef) {
   var _props$as = props.as,
       Comp = _props$as === void 0 ? Fragment : _props$as,
+      innerAs = props.innerAs,
       openProp = props.open,
       _props$defaultOpen = props.defaultOpen,
       defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
@@ -28,17 +29,33 @@ export var Menu = /*#__PURE__*/forwardRef(function Menu(props, forwardedRef) {
       open = _useControlledState2[0],
       onChange = _useControlledState2[1];
 
+  var _useState = useState(undefined),
+      _useState2 = _slicedToArray(_useState, 2),
+      offsetFn = _useState2[0],
+      setOffsetFn = _useState2[1];
+
   menuListIdRef.current = useId();
+  var isContextMenu = useRef(false);
+
+  if (!open && offsetFn) {
+    setOffsetFn(undefined);
+  }
+
   var value = {
     menuListIdRef: menuListIdRef,
     openWithArrowKeyRef: openWithArrowKeyRef,
     open: open,
     onChange: onChange,
-    buttonRef: buttonRef
+    buttonRef: buttonRef,
+    offsetFn: offsetFn,
+    setOffsetFn: setOffsetFn,
+    isContextMenu: isContextMenu
   };
   return /*#__PURE__*/_jsx(MenuProvider, {
     value: value,
-    children: /*#__PURE__*/_jsx(Comp, _extends({
+    children: /*#__PURE__*/_jsx(Comp, _extends(_extends({}, Comp !== Fragment ? {
+      as: innerAs
+    } : {}), {}, {
       ref: forwardedRef
     }, otherProps))
   });

package/build/esm/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["forwardRef","useRef","Fragment","useId","MenuProvider","useControlledState","Menu","props","forwardedRef","as","Comp","openProp","open","defaultOpen","onChangeProp","onChange","otherProps","menuListIdRef","openWithArrowKeyRef","buttonRef","setState","e","isOpen","current","value"],"sources":["../../../src/Menu/Menu.tsx"],"sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  ElementType,\n} from 'react';\nimport { forwardRef, useRef, Fragment, useId } from 'react';\n\nimport type { MenuContextProps } from './context';\nimport { MenuProvider } from './context';\nimport { useControlledState } from '../hooks';\n\nexport interface MenuProps {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n  onChange?: (\n    e:\n      | KeyboardEvent<HTMLElement>\n      | MouseEvent<HTMLElement>\n      | PointerEvent<HTMLElement>,\n    isOpen: boolean\n  ) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n}\n\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = Fragment,\n    open: openProp,\n    defaultOpen = false,\n    onChange: onChangeProp,\n    ...otherProps\n  } = props;\n  const menuListIdRef = useRef<string>();\n  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [open, onChange] = useControlledState(\n    openProp,\n    onChangeProp,\n    defaultOpen,\n    (setState) => (e, isOpen) => {\n      setState(isOpen);\n    }\n  );\n\n  menuListIdRef.current = useId();\n\n  const value: MenuContextProps = {\n    menuListIdRef,\n    openWithArrowKeyRef,\n    open,\n    onChange,\n    buttonRef,\n  };\n\n  return (\n    <MenuProvider value={value}>\n      <Comp ref={forwardedRef} {...otherProps} />\n    </MenuProvider>\n  );\n});\n"],"mappings":";;;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,QAA7B,EAAuCC,KAAvC,QAAoD,OAApD;AAGA,SAASC,YAAT,QAA6B,WAA7B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAiBA,OAAO,IAAMC,IAAI,gBAAGN,UAAU,CAA4B,SAASM,IAAT,CACxDC,KADwD,EAExDC,YAFwD,EAGxD;EACA,gBAMID,KANJ,CACEE,EADF;EAAA,IACMC,IADN,0BACaR,QADb;EAAA,IAEQS,QAFR,GAMIJ,KANJ,CAEEK,IAFF;EAAA,yBAMIL,KANJ,CAGEM,WAHF;EAAA,IAGEA,WAHF,mCAGgB,KAHhB;EAAA,IAIYC,YAJZ,GAMIP,KANJ,CAIEQ,QAJF;EAAA,IAKKC,UALL,4BAMIT,KANJ;;EAOA,IAAMU,aAAa,GAAGhB,MAAM,EAA5B;EACA,IAAMiB,mBAAmB,GAAGjB,MAAM,CAAiC,IAAjC,CAAlC;EACA,IAAMkB,SAAS,GAAGlB,MAAM,CAAoB,IAApB,CAAxB;;EACA,0BAAyBI,kBAAkB,CACzCM,QADyC,EAEzCG,YAFyC,EAGzCD,WAHyC,EAIzC,UAACO,QAAD;IAAA,OAAc,UAACC,CAAD,EAAIC,MAAJ,EAAe;MAC3BF,QAAQ,CAACE,MAAD,CAAR;IACD,CAFD;EAAA,CAJyC,CAA3C;EAAA;EAAA,IAAOV,IAAP;EAAA,IAAaG,QAAb;;EASAE,aAAa,CAACM,OAAd,GAAwBpB,KAAK,EAA7B;EAEA,IAAMqB,KAAuB,GAAG;IAC9BP,aAAa,EAAbA,aAD8B;IAE9BC,mBAAmB,EAAnBA,mBAF8B;IAG9BN,IAAI,EAAJA,IAH8B;IAI9BG,QAAQ,EAARA,QAJ8B;IAK9BI,SAAS,EAATA;EAL8B,CAAhC;EAQA,oBACE,KAAC,YAAD;IAAc,KAAK,EAAEK,KAArB;IAAA,uBACE,KAAC,IAAD;MAAM,GAAG,EAAEhB;IAAX,GAA6BQ,UAA7B;EADF,EADF;AAKD,CAtC6B,CAAvB"}
+{"version":3,"file":"Menu.js","names":["useState","forwardRef","useRef","Fragment","useId","MenuProvider","useControlledState","Menu","props","forwardedRef","as","Comp","innerAs","openProp","open","defaultOpen","onChangeProp","onChange","otherProps","menuListIdRef","openWithArrowKeyRef","buttonRef","setState","e","isOpen","undefined","offsetFn","setOffsetFn","current","isContextMenu","value"],"sources":["../../../src/Menu/Menu.tsx"],"sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  ReactNode,\n  ElementType,\n} from 'react';\nimport { useState, forwardRef, useRef, Fragment, useId } from 'react';\n\nimport type { MenuContextProps } from './context';\nimport { MenuProvider } from './context';\nimport { useControlledState } from '../hooks';\nimport type { OffsetsFunction } from '../Popper';\n\nexport interface MenuProps {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n  onChange?: (\n    e:\n      | KeyboardEvent<HTMLElement>\n      | MouseEvent<HTMLElement>\n      | PointerEvent<HTMLElement>,\n    isOpen: boolean\n  ) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n}\n\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = Fragment,\n    innerAs,\n    open: openProp,\n    defaultOpen = false,\n    onChange: onChangeProp,\n    ...otherProps\n  } = props;\n  const menuListIdRef = useRef<string>();\n  const openWithArrowKeyRef = useRef<'ArrowUp' | 'ArrowDown' | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [open, onChange] = useControlledState(\n    openProp,\n    onChangeProp,\n    defaultOpen,\n    (setState) => (e, isOpen) => {\n      setState(isOpen);\n    }\n  );\n  const [offsetFn, setOffsetFn] = useState<OffsetsFunction | undefined>(\n    undefined\n  );\n  menuListIdRef.current = useId();\n  const isContextMenu = useRef(false);\n\n  if (!open && offsetFn) {\n    setOffsetFn(undefined);\n  }\n\n  const value: MenuContextProps = {\n    menuListIdRef,\n    openWithArrowKeyRef,\n    open,\n    onChange,\n    buttonRef,\n    offsetFn,\n    setOffsetFn,\n    isContextMenu,\n  };\n\n  return (\n    <MenuProvider value={value}>\n      <Comp\n        {...(Comp !== Fragment ? { as: innerAs } : {})}\n        ref={forwardedRef}\n        {...otherProps}\n      />\n    </MenuProvider>\n  );\n});\n"],"mappings":";;;;AAOA,SAASA,QAAT,EAAmBC,UAAnB,EAA+BC,MAA/B,EAAuCC,QAAvC,EAAiDC,KAAjD,QAA8D,OAA9D;AAGA,SAASC,YAAT,QAA6B,WAA7B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAkBA,OAAO,IAAMC,IAAI,gBAAGN,UAAU,CAA4B,SAASM,IAAT,CACxDC,KADwD,EAExDC,YAFwD,EAGxD;EACA,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACaR,QADb;EAAA,IAEES,OAFF,GAOIJ,KAPJ,CAEEI,OAFF;EAAA,IAGQC,QAHR,GAOIL,KAPJ,CAGEM,IAHF;EAAA,yBAOIN,KAPJ,CAIEO,WAJF;EAAA,IAIEA,WAJF,mCAIgB,KAJhB;EAAA,IAKYC,YALZ,GAOIR,KAPJ,CAKES,QALF;EAAA,IAMKC,UANL,4BAOIV,KAPJ;;EAQA,IAAMW,aAAa,GAAGjB,MAAM,EAA5B;EACA,IAAMkB,mBAAmB,GAAGlB,MAAM,CAAiC,IAAjC,CAAlC;EACA,IAAMmB,SAAS,GAAGnB,MAAM,CAAoB,IAApB,CAAxB;;EACA,0BAAyBI,kBAAkB,CACzCO,QADyC,EAEzCG,YAFyC,EAGzCD,WAHyC,EAIzC,UAACO,QAAD;IAAA,OAAc,UAACC,CAAD,EAAIC,MAAJ,EAAe;MAC3BF,QAAQ,CAACE,MAAD,CAAR;IACD,CAFD;EAAA,CAJyC,CAA3C;EAAA;EAAA,IAAOV,IAAP;EAAA,IAAaG,QAAb;;EAQA,gBAAgCjB,QAAQ,CACtCyB,SADsC,CAAxC;EAAA;EAAA,IAAOC,QAAP;EAAA,IAAiBC,WAAjB;;EAGAR,aAAa,CAACS,OAAd,GAAwBxB,KAAK,EAA7B;EACA,IAAMyB,aAAa,GAAG3B,MAAM,CAAC,KAAD,CAA5B;;EAEA,IAAI,CAACY,IAAD,IAASY,QAAb,EAAuB;IACrBC,WAAW,CAACF,SAAD,CAAX;EACD;;EAED,IAAMK,KAAuB,GAAG;IAC9BX,aAAa,EAAbA,aAD8B;IAE9BC,mBAAmB,EAAnBA,mBAF8B;IAG9BN,IAAI,EAAJA,IAH8B;IAI9BG,QAAQ,EAARA,QAJ8B;IAK9BI,SAAS,EAATA,SAL8B;IAM9BK,QAAQ,EAARA,QAN8B;IAO9BC,WAAW,EAAXA,WAP8B;IAQ9BE,aAAa,EAAbA;EAR8B,CAAhC;EAWA,oBACE,KAAC,YAAD;IAAc,KAAK,EAAEC,KAArB;IAAA,uBACE,KAAC,IAAD,wBACOnB,IAAI,KAAKR,QAAT,GAAoB;MAAEO,EAAE,EAAEE;IAAN,CAApB,GAAsC,EAD7C;MAEE,GAAG,EAAEH;IAFP,GAGMS,UAHN;EADF,EADF;AASD,CArD6B,CAAvB"}

package/build/esm/Menu/MenuButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "id", "onClick", "onKeyDown", "disabled"];
+var _excluded = ["as", "innerAs", "id", "onClick", "onKeyDown", "disabled"];
 import { forwardRef, useId } from 'react';
 import { useMenuContext } from './context';
 import { wrapEvent } from '../utils/wrap-event';
@@ -8,6 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, forwardedRef) {
   var _props$as = props.as,
       Comp = _props$as === void 0 ? 'button' : _props$as,
+      innerAs = props.innerAs,
       preferredId = props.id,
       onClick = props.onClick,
       onKeyDown = props.onKeyDown,
@@ -47,7 +48,7 @@ export var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, forwa
         openWithArrowKeyRef.current = e.key;
       }
 
-      onChange && onChange(e, true);
+      onChange(e, true);
       e.preventDefault();
     }
   };
@@ -58,11 +59,12 @@ export var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, forwa
     }
 
     buttonRef.current = e.currentTarget;
-    onChange && onChange(e, !open);
+    onChange(e, !open);
   };
 
   return /*#__PURE__*/_jsx(Comp, _extends({
     ref: forwardedRef,
+    as: innerAs,
     id: buttonId,
     role: "button",
     type: "button",

package/build/esm/Menu/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","names":["forwardRef","useId","useMenuContext","wrapEvent","MenuButton","props","forwardedRef","as","Comp","preferredId","id","onClick","onKeyDown","disabled","otherProps","menuListIdRef","openWithArrowKeyRef","open","buttonRef","onChange","buttonIdGenerated","buttonId","handleKeyDown","e","current","currentTarget","isArrowKey","includes","key","isEnterKey","openedWithArrow","preventDefault","handleClick","undefined"],"sources":["../../../src/Menu/MenuButton.tsx"],"sourcesContent":["import type {\n  ButtonHTMLAttributes,\n  ElementType,\n  KeyboardEvent,\n  MouseEvent,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrap-event';\n\nexport type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onClick?: (\n    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>\n  ) => void;\n};\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(props, forwardedRef) {\n    const {\n      as: Comp = 'button',\n      id: preferredId,\n      onClick,\n      onKeyDown,\n      disabled,\n      ...otherProps\n    } = props;\n    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =\n      useMenuContext();\n\n    const buttonIdGenerated = useId();\n    const buttonId = preferredId || buttonIdGenerated;\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\n      buttonRef.current = e.currentTarget;\n\n      const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);\n      const isEnterKey = () => [' ', 'Enter'].includes(e.key);\n\n      const openedWithArrow = isArrowKey();\n      if (openedWithArrow || isEnterKey()) {\n        if (openedWithArrow) {\n          // Used to make it open at the end or begining of the list\n          openWithArrowKeyRef.current = e.key;\n        }\n        onChange && onChange(e, true);\n        e.preventDefault();\n      }\n    };\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\n      buttonRef.current = e.currentTarget;\n\n      onChange && onChange(e, !open);\n    };\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        id={buttonId}\n        role=\"button\"\n        type=\"button\"\n        aria-haspopup={true}\n        aria-controls={menuListIdRef.current}\n        aria-expanded={open ? true : undefined}\n        data-menu-button=\"\"\n        onClick={wrapEvent(onClick, handleClick)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        disabled={disabled}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":";;;AAMA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,qBAA1B;;AAUA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;EACvC,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,QADb;EAAA,IAEMC,WAFN,GAOIJ,KAPJ,CAEEK,EAFF;EAAA,IAGEC,OAHF,GAOIN,KAPJ,CAGEM,OAHF;EAAA,IAIEC,SAJF,GAOIP,KAPJ,CAIEO,SAJF;EAAA,IAKEC,QALF,GAOIR,KAPJ,CAKEQ,QALF;EAAA,IAMKC,UANL,4BAOIT,KAPJ;;EAQA,sBACEH,cAAc,EADhB;EAAA,IAAQa,aAAR,mBAAQA,aAAR;EAAA,IAAuBC,mBAAvB,mBAAuBA,mBAAvB;EAAA,IAA4CC,IAA5C,mBAA4CA,IAA5C;EAAA,IAAkDC,SAAlD,mBAAkDA,SAAlD;EAAA,IAA6DC,QAA7D,mBAA6DA,QAA7D;;EAGA,IAAMC,iBAAiB,GAAGnB,KAAK,EAA/B;EACA,IAAMoB,QAAQ,GAAGZ,WAAW,IAAIW,iBAAhC;;EAEA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAyC;IAC7D,IAAIV,QAAJ,EAAc;MACZ;IACD;;IACDK,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;;IAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa;MAAA,OAAM,CAAC,SAAD,EAAY,WAAZ,EAAyBC,QAAzB,CAAkCJ,CAAC,CAACK,GAApC,CAAN;IAAA,CAAnB;;IACA,IAAMC,UAAU,GAAG,SAAbA,UAAa;MAAA,OAAM,CAAC,GAAD,EAAM,OAAN,EAAeF,QAAf,CAAwBJ,CAAC,CAACK,GAA1B,CAAN;IAAA,CAAnB;;IAEA,IAAME,eAAe,GAAGJ,UAAU,EAAlC;;IACA,IAAII,eAAe,IAAID,UAAU,EAAjC,EAAqC;MACnC,IAAIC,eAAJ,EAAqB;QACnB;QACAd,mBAAmB,CAACQ,OAApB,GAA8BD,CAAC,CAACK,GAAhC;MACD;;MACDT,QAAQ,IAAIA,QAAQ,CAACI,CAAD,EAAI,IAAJ,CAApB;MACAA,CAAC,CAACQ,cAAF;IACD;EACF,CAlBD;;EAoBA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsC;IACxD,IAAIV,QAAJ,EAAc;MACZ;IACD;;IACDK,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;IAEAN,QAAQ,IAAIA,QAAQ,CAACI,CAAD,EAAI,CAACN,IAAL,CAApB;EACD,CAPD;;EASA,oBACE,KAAC,IAAD;IACE,GAAG,EAAEX,YADP;IAEE,EAAE,EAAEe,QAFN;IAGE,IAAI,EAAC,QAHP;IAIE,IAAI,EAAC,QAJP;IAKE,iBAAe,IALjB;IAME,iBAAeN,aAAa,CAACS,OAN/B;IAOE,iBAAeP,IAAI,GAAG,IAAH,GAAUgB,SAP/B;IAQE,oBAAiB,EARnB;IASE,OAAO,EAAE9B,SAAS,CAACQ,OAAD,EAAUqB,WAAV,CATpB;IAUE,SAAS,EAAE7B,SAAS,CAACS,SAAD,EAAYU,aAAZ,CAVtB;IAWE,QAAQ,EAAET;EAXZ,GAYMC,UAZN,EADF;AAgBD,CA7DiC,CAA7B"}
+{"version":3,"file":"MenuButton.js","names":["forwardRef","useId","useMenuContext","wrapEvent","MenuButton","props","forwardedRef","as","Comp","innerAs","preferredId","id","onClick","onKeyDown","disabled","otherProps","menuListIdRef","openWithArrowKeyRef","open","buttonRef","onChange","buttonIdGenerated","buttonId","handleKeyDown","e","current","currentTarget","isArrowKey","includes","key","isEnterKey","openedWithArrow","preventDefault","handleClick","undefined"],"sources":["../../../src/Menu/MenuButton.tsx"],"sourcesContent":["import type {\n  ButtonHTMLAttributes,\n  ElementType,\n  KeyboardEvent,\n  MouseEvent,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrap-event';\n\nexport type MenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onClick?: (\n    e: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>\n  ) => void;\n};\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(props, forwardedRef) {\n    const {\n      as: Comp = 'button',\n      innerAs,\n      id: preferredId,\n      onClick,\n      onKeyDown,\n      disabled,\n      ...otherProps\n    } = props;\n    const { menuListIdRef, openWithArrowKeyRef, open, buttonRef, onChange } =\n      useMenuContext();\n\n    const buttonIdGenerated = useId();\n    const buttonId = preferredId || buttonIdGenerated;\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\n      buttonRef.current = e.currentTarget;\n\n      const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);\n      const isEnterKey = () => [' ', 'Enter'].includes(e.key);\n\n      const openedWithArrow = isArrowKey();\n      if (openedWithArrow || isEnterKey()) {\n        if (openedWithArrow) {\n          // Used to make it open at the end or begining of the list\n          openWithArrowKeyRef.current = e.key;\n        }\n        onChange(e, true);\n        e.preventDefault();\n      }\n    };\n\n    const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\n      buttonRef.current = e.currentTarget;\n      onChange(e, !open);\n    };\n\n    return (\n      <Comp\n        ref={forwardedRef}\n        as={innerAs}\n        id={buttonId}\n        role=\"button\"\n        type=\"button\"\n        aria-haspopup={true}\n        aria-controls={menuListIdRef.current}\n        aria-expanded={open ? true : undefined}\n        data-menu-button=\"\"\n        onClick={wrapEvent(onClick, handleClick)}\n        onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n        disabled={disabled}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":";;;AAMA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,qBAA1B;;AAUA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;EACvC,gBAQID,KARJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,QADb;EAAA,IAEEC,OAFF,GAQIJ,KARJ,CAEEI,OAFF;EAAA,IAGMC,WAHN,GAQIL,KARJ,CAGEM,EAHF;EAAA,IAIEC,OAJF,GAQIP,KARJ,CAIEO,OAJF;EAAA,IAKEC,SALF,GAQIR,KARJ,CAKEQ,SALF;EAAA,IAMEC,QANF,GAQIT,KARJ,CAMES,QANF;EAAA,IAOKC,UAPL,4BAQIV,KARJ;;EASA,sBACEH,cAAc,EADhB;EAAA,IAAQc,aAAR,mBAAQA,aAAR;EAAA,IAAuBC,mBAAvB,mBAAuBA,mBAAvB;EAAA,IAA4CC,IAA5C,mBAA4CA,IAA5C;EAAA,IAAkDC,SAAlD,mBAAkDA,SAAlD;EAAA,IAA6DC,QAA7D,mBAA6DA,QAA7D;;EAGA,IAAMC,iBAAiB,GAAGpB,KAAK,EAA/B;EACA,IAAMqB,QAAQ,GAAGZ,WAAW,IAAIW,iBAAhC;;EAEA,IAAME,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAAyC;IAC7D,IAAIV,QAAJ,EAAc;MACZ;IACD;;IACDK,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;;IAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa;MAAA,OAAM,CAAC,SAAD,EAAY,WAAZ,EAAyBC,QAAzB,CAAkCJ,CAAC,CAACK,GAApC,CAAN;IAAA,CAAnB;;IACA,IAAMC,UAAU,GAAG,SAAbA,UAAa;MAAA,OAAM,CAAC,GAAD,EAAM,OAAN,EAAeF,QAAf,CAAwBJ,CAAC,CAACK,GAA1B,CAAN;IAAA,CAAnB;;IAEA,IAAME,eAAe,GAAGJ,UAAU,EAAlC;;IACA,IAAII,eAAe,IAAID,UAAU,EAAjC,EAAqC;MACnC,IAAIC,eAAJ,EAAqB;QACnB;QACAd,mBAAmB,CAACQ,OAApB,GAA8BD,CAAC,CAACK,GAAhC;MACD;;MACDT,QAAQ,CAACI,CAAD,EAAI,IAAJ,CAAR;MACAA,CAAC,CAACQ,cAAF;IACD;EACF,CAlBD;;EAoBA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsC;IACxD,IAAIV,QAAJ,EAAc;MACZ;IACD;;IACDK,SAAS,CAACM,OAAV,GAAoBD,CAAC,CAACE,aAAtB;IACAN,QAAQ,CAACI,CAAD,EAAI,CAACN,IAAL,CAAR;EACD,CAND;;EAQA,oBACE,KAAC,IAAD;IACE,GAAG,EAAEZ,YADP;IAEE,EAAE,EAAEG,OAFN;IAGE,EAAE,EAAEa,QAHN;IAIE,IAAI,EAAC,QAJP;IAKE,IAAI,EAAC,QALP;IAME,iBAAe,IANjB;IAOE,iBAAeN,aAAa,CAACS,OAP/B;IAQE,iBAAeP,IAAI,GAAG,IAAH,GAAUgB,SAR/B;IASE,oBAAiB,EATnB;IAUE,OAAO,EAAE/B,SAAS,CAACS,OAAD,EAAUqB,WAAV,CAVpB;IAWE,SAAS,EAAE9B,SAAS,CAACU,SAAD,EAAYU,aAAZ,CAXtB;IAYE,QAAQ,EAAET;EAZZ,GAaMC,UAbN,EADF;AAiBD,CA9DiC,CAA7B"}

package/build/esm/Menu/MenuItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "disabled", "onSelect", "onClick", "onKeyDown"];
+var _excluded = ["as", "innerAs", "disabled", "onSelect", "onClick", "onKeyDown"];
 import { forwardRef, useRef, useId } from 'react';
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assign-ref';
@@ -9,6 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef) {
   var _props$as = props.as,
       Comp = _props$as === void 0 ? 'li' : _props$as,
+      innerAs = props.innerAs,
       disabled = props.disabled,
       onSelect = props.onSelect,
       onClick = props.onClick,
@@ -29,7 +30,7 @@ export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwarded
   var handleSelect = wrapEvent(onSelect, function (e) {
     var _buttonRef$current;
 
-    onChange && onChange(e, false);
+    onChange(e, false);
     (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
     e.preventDefault();
   });
@@ -55,6 +56,7 @@ export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwarded
 
   return /*#__PURE__*/_jsx(Comp, _extends({
     ref: assignMultipleRefs(ref, forwardedRef),
+    as: innerAs,
     id: disabled ? undefined : itemId,
     "data-menu-item": "",
     "data-highlighted": isActive ? '' : undefined,

package/build/esm/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n  LiHTMLAttributes,\n  ElementType,\n  MouseEvent,\n  KeyboardEvent,\n  KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onSelect?: (\n    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n  ) => void;\n  disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = 'li',\n    disabled,\n    onSelect,\n    onClick,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const { onChange, buttonRef } = useMenuContext();\n  const { navigationItem, onNavigate } = useMenuListContext();\n  const ref = useRef<HTMLLIElement>();\n  const itemId = useId();\n\n  const isActive = ref.current && ref.current === navigationItem;\n\n  const handleSelect = wrapEvent(\n    onSelect,\n    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n      onChange && onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      onNavigate && onNavigate(ref.current!);\n      handleSelect(e);\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n        if (!disabled) {\n          handleSelect(e);\n        }\n        break;\n    }\n  };\n\n  return (\n    <Comp\n      ref={assignMultipleRefs(ref, forwardedRef)}\n      id={disabled ? undefined : itemId}\n      data-menu-item=\"\"\n      data-highlighted={isActive ? '' : undefined}\n      role=\"menuitem\"\n      onClick={wrapEvent(onClick, handleClick)}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      data-disabled={disabled ? '' : undefined}\n      aria-disabled={disabled ? '' : undefined}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,QAFF,GAOIJ,KAPJ,CAEEI,QAFF;EAAA,IAGEC,QAHF,GAOIL,KAPJ,CAGEK,QAHF;EAAA,IAIEC,OAJF,GAOIN,KAPJ,CAIEM,OAJF;EAAA,IAKEC,SALF,GAOIP,KAPJ,CAKEO,SALF;EAAA,IAMKC,UANL,4BAOIR,KAPJ;;EAQA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQc,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCd,kBAAkB,EAAzD;EAAA,IAAQe,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGpB,MAAM,EAAlB;EACA,IAAMqB,MAAM,GAAGpB,KAAK,EAApB;EAEA,IAAMqB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGnB,SAAS,CAC5BO,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,OAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;IALJ;EAOD,CARD;;EAUA,oBACE,KAAC,IAAD;IACE,GAAG,EAAErB,kBAAkB,CAACgB,GAAD,EAAMZ,YAAN,CADzB;IAEE,EAAE,EAAEG,QAAQ,GAAGoB,SAAH,GAAeV,MAF7B;IAGE,kBAAe,EAHjB;IAIE,oBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SAJpC;IAKE,IAAI,EAAC,UALP;IAME,OAAO,EAAE1B,SAAS,CAACQ,OAAD,EAAUe,WAAV,CANpB;IAOE,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;IAQE,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYe,aAAZ,CARtB;IASE,iBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SATjC;IAUE,iBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;IAWE,QAAQ,EAAEpB;EAXZ,GAYMI,UAZN,EADF;AAgBD,CA9DiC,CAA3B"}
+{"version":3,"file":"MenuItem.js","names":["forwardRef","useRef","useId","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","innerAs","disabled","onSelect","onClick","onKeyDown","otherProps","onChange","buttonRef","navigationItem","onNavigate","ref","itemId","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"sources":["../../../src/Menu/MenuItem.tsx"],"sourcesContent":["import type {\n  LiHTMLAttributes,\n  ElementType,\n  MouseEvent,\n  KeyboardEvent,\n  KeyboardEventHandler,\n} from 'react';\nimport { forwardRef, useRef, useId } from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  onSelect?: (\n    e: MouseEvent<HTMLLIElement> | KeyboardEvent<HTMLLIElement>\n  ) => void;\n  disabled?: boolean;\n}\n\nexport const MenuItem = forwardRef<any, MenuItemProps>(function MenuItem(\n  props,\n  forwardedRef\n) {\n  const {\n    as: Comp = 'li',\n    innerAs,\n    disabled,\n    onSelect,\n    onClick,\n    onKeyDown,\n    ...otherProps\n  } = props;\n  const { onChange, buttonRef } = useMenuContext();\n  const { navigationItem, onNavigate } = useMenuListContext();\n  const ref = useRef<HTMLLIElement>();\n  const itemId = useId();\n\n  const isActive = ref.current && ref.current === navigationItem;\n\n  const handleSelect = wrapEvent(\n    onSelect,\n    (e: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => {\n      onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: MouseEvent<HTMLLIElement>) => {\n    if (!disabled) {\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      onNavigate && onNavigate(ref.current!);\n      handleSelect(e);\n    }\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n        if (!disabled) {\n          handleSelect(e);\n        }\n        break;\n    }\n  };\n\n  return (\n    <Comp\n      ref={assignMultipleRefs(ref, forwardedRef)}\n      as={innerAs}\n      id={disabled ? undefined : itemId}\n      data-menu-item=\"\"\n      data-highlighted={isActive ? '' : undefined}\n      role=\"menuitem\"\n      onClick={wrapEvent(onClick, handleClick)}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n      data-disabled={disabled ? '' : undefined}\n      aria-disabled={disabled ? '' : undefined}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n});\n"],"mappings":";;;AAOA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,qBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGP,UAAU,CAAqB,SAASO,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;EACA,gBAQID,KARJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,IADb;EAAA,IAEEC,OAFF,GAQIJ,KARJ,CAEEI,OAFF;EAAA,IAGEC,QAHF,GAQIL,KARJ,CAGEK,QAHF;EAAA,IAIEC,QAJF,GAQIN,KARJ,CAIEM,QAJF;EAAA,IAKEC,OALF,GAQIP,KARJ,CAKEO,OALF;EAAA,IAMEC,SANF,GAQIR,KARJ,CAMEQ,SANF;EAAA,IAOKC,UAPL,4BAQIT,KARJ;;EASA,sBAAgCL,cAAc,EAA9C;EAAA,IAAQe,QAAR,mBAAQA,QAAR;EAAA,IAAkBC,SAAlB,mBAAkBA,SAAlB;;EACA,0BAAuCf,kBAAkB,EAAzD;EAAA,IAAQgB,cAAR,uBAAQA,cAAR;EAAA,IAAwBC,UAAxB,uBAAwBA,UAAxB;;EACA,IAAMC,GAAG,GAAGrB,MAAM,EAAlB;EACA,IAAMsB,MAAM,GAAGrB,KAAK,EAApB;EAEA,IAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;EAEA,IAAMM,YAAY,GAAGpB,SAAS,CAC5BQ,QAD4B,EAE5B,UAACa,CAAD,EAAiE;IAAA;;IAC/DT,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAAR;IACA,sBAAAR,SAAS,CAACM,OAAV,0EAAmBG,KAAnB;IACAD,CAAC,CAACE,cAAF;EACD,CAN2B,CAA9B;;EASA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAkC;IACpD,IAAI,CAACd,QAAL,EAAe;MACb;MACAQ,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;MACAC,YAAY,CAACC,CAAD,CAAZ;IACD;EACF,CAND;;EAQA,IAAMI,aAAkD,GAAG,SAArDA,aAAqD,CAACJ,CAAD,EAAO;IAChE,QAAQA,CAAC,CAACK,GAAV;MACE,KAAK,OAAL;QACE,IAAI,CAACnB,QAAL,EAAe;UACba,YAAY,CAACC,CAAD,CAAZ;QACD;;QACD;IALJ;EAOD,CARD;;EAUA,oBACE,KAAC,IAAD;IACE,GAAG,EAAEtB,kBAAkB,CAACiB,GAAD,EAAMb,YAAN,CADzB;IAEE,EAAE,EAAEG,OAFN;IAGE,EAAE,EAAEC,QAAQ,GAAGoB,SAAH,GAAeV,MAH7B;IAIE,kBAAe,EAJjB;IAKE,oBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SALpC;IAME,IAAI,EAAC,UANP;IAOE,OAAO,EAAE3B,SAAS,CAACS,OAAD,EAAUe,WAAV,CAPpB;IAQE,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAR5B;IASE,SAAS,EAAEP,SAAS,CAACU,SAAD,EAAYe,aAAZ,CATtB;IAUE,iBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;IAWE,iBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAXjC;IAYE,QAAQ,EAAEpB;EAZZ,GAaMI,UAbN,EADF;AAiBD,CAhEiC,CAA3B"}

package/build/esm/Menu/MenuList.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "onKeyDown", "id", "defaultActiveItemValue"];
-import { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
+var _excluded = ["as", "innerAs", "onKeyDown", "id", "defaultActiveItemValue"];
+import { useCallback, forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assign-ref';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -16,11 +16,13 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
 
   var _props$as = props.as,
       Comp = _props$as === void 0 ? 'ul' : _props$as,
+      innerAs = props.innerAs,
       onKeyDown = props.onKeyDown,
       preferredId = props.id,
       defaultActiveItemValue = props.defaultActiveItemValue,
       otherProps = _objectWithoutProperties(props, _excluded);
 
+  var interactedOutside = useRef(false);
   var itemSearchStr = useRef('');
   var itemSearchClearTimeout = useRef();
 
@@ -29,7 +31,8 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
       buttonRef = _useMenuContext.buttonRef,
       onChange = _useMenuContext.onChange,
       openWithArrowKeyRef = _useMenuContext.openWithArrowKeyRef,
-      open = _useMenuContext.open;
+      open = _useMenuContext.open,
+      isContextMenu = _useMenuContext.isContextMenu;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -72,15 +75,29 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
     openWithArrowKeyRef.current = null;
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
-  useOnClickOutside(menuListRef, function (e) {
-    var _buttonRef$current;
+  var handleClickOutside = useCallback(function (e) {
+    if (!interactedOutside.current) {
+      // First interaction should be ignored, because
+      // this is what triggered the context menu to open
+      interactedOutside.current = true;
+      return;
+    }
+
+    if (isContextMenu.current) {
+      if (e.button === 0) {
+        onChange(e, false);
+      }
+    } else {
+      var _buttonRef$current;
 
-    if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.contains(e.target))) {
-      onChange && onChange(e, false);
+      if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.contains(e.target))) {
+        onChange(e, false);
+      }
     }
 
     e.preventDefault();
-  }, true);
+  }, [buttonRef, isContextMenu, onChange]);
+  useOnClickOutside(menuListRef, handleClickOutside, open);
 
   function handleKeyDown(e) {
     switch (e.key) {
@@ -89,7 +106,7 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
         {
           var _buttonRef$current2;
 
-          onChange && onChange(e, false);
+          onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
           itemSearchStr.current = '';
@@ -184,6 +201,7 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
   }
 
   if (!open) {
+    interactedOutside.current = false;
     return null;
   }
 
@@ -194,6 +212,7 @@ export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwarded
     },
     children: /*#__PURE__*/_jsx(Comp, _extends({
       ref: assignMultipleRefs(forwardedRef, menuListRef),
+      as: innerAs,
       id: menuListIdRef.current,
       role: "menu",
       "aria-labelledby": (_buttonRef$current3 = buttonRef.current) === null || _buttonRef$current3 === void 0 ? void 0 : _buttonRef$current3.id,

package/build/esm/Menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","itemSearchStr","itemSearchClearTimeout","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","ctrlKey","altKey","slice","clearTimeout","setTimeout","searchStr","idx","dom","domText","innerText","toLowerCase","startsWith"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n  function MenuList(props, forwardedRef) {\n    const {\n      as: Comp = 'ul',\n      onKeyDown,\n      id: preferredId,\n      defaultActiveItemValue,\n      ...otherProps\n    } = props;\n\n    const itemSearchStr = useRef('');\n    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const { menuListIdRef, buttonRef, onChange, openWithArrowKeyRef, open } =\n      useMenuContext();\n\n    const [navigationItem, setNavigationItem] = useState<\n      HTMLElement | undefined\n    >();\n\n    const [mounted, setMounted] = useState(false);\n\n    const menuListRef = useRef<HTMLUListElement>();\n\n    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n    const onNavigate = (el: HTMLElement) => {\n      el.focus();\n      setNavigationItem(el);\n    };\n\n    menuListIdRef.current = preferredId || menuListIdRef.current;\n\n    useEnhancedEffect(() => {\n      if (!mounted) {\n        const allItems = scope.current.queryAllNodes(queryScope);\n        let index = getCircularIndex(\n          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n          allItems.length\n        );\n\n        if (defaultActiveItemValue) {\n          for (let i = 0; i < allItems.length; i++) {\n            if (allItems[i].dataset.value === defaultActiveItemValue) {\n              index = i;\n              break;\n            }\n          }\n        }\n\n        if (index !== null) {\n          onNavigate && onNavigate(allItems[index]);\n        }\n      }\n\n      openWithArrowKeyRef.current = null;\n      setMounted(true);\n    }, [\n      mounted,\n      navigationItem,\n      onNavigate,\n      openWithArrowKeyRef,\n      scope,\n      defaultActiveItemValue,\n    ]);\n\n    useOnClickOutside(\n      menuListRef,\n      (e) => {\n        if (\n          e.target instanceof HTMLElement &&\n          e.target !== buttonRef.current &&\n          !buttonRef.current?.contains(e.target)\n        ) {\n          onChange && onChange(e as any, false);\n        }\n        e.preventDefault();\n      },\n      true\n    );\n\n    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n      switch (e.key) {\n        case 'Escape':\n        case 'Tab': {\n          onChange && onChange(e, false);\n          e.preventDefault(); // prevents focusing on next element, because we will be handling it\n          itemSearchStr.current = '';\n          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\n          itemSearchStr.current = '';\n          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n          const currentIndex = allItems.findIndex((e) => e === navigationItem);\n          if (allItems.length === 0) {\n            return;\n          }\n          let nextIndex: number = currentIndex;\n          switch (e.key) {\n            case 'ArrowUp':\n              nextIndex += -1;\n              break;\n            case 'ArrowDown':\n              nextIndex += 1;\n              break;\n            case 'Home':\n              nextIndex = 0;\n              break;\n            case 'End':\n              nextIndex = -1;\n              break;\n          }\n          // We already checked if allItems.length = 0 above\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n          onNavigate && onNavigate(allItems[nextIndex]);\n          break;\n        default: {\n          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {\n            // A-Z\n            e.preventDefault();\n\n            if (\n              itemSearchStr.current.length === 0 ||\n              itemSearchStr.current.slice(-1) !== e.key\n            ) {\n              itemSearchStr.current = itemSearchStr.current + e.key;\n            }\n            clearTimeout(itemSearchClearTimeout.current as any);\n            itemSearchClearTimeout.current = setTimeout(() => {\n              itemSearchStr.current = '';\n            }, 500);\n\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const searchStr = itemSearchStr.current;\n            let nextIndex = -1;\n            for (\n              let i = searchStr.length === 1 ? 1 : 0;\n              i < allItems.length;\n              i++\n            ) {\n              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n              const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n              const dom = allItems[idx];\n              const domText = dom.innerText.toLowerCase();\n              if (domText.length > 0 && domText.startsWith(searchStr)) {\n                nextIndex = idx;\n                break;\n              }\n            }\n            if (nextIndex >= 0 && nextIndex < allItems.length) {\n              onNavigate && onNavigate(allItems[nextIndex]);\n            }\n          }\n        }\n      }\n    }\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <MenuListProvider\n        value={{\n          navigationItem,\n          onNavigate,\n        }}\n      >\n        <Comp\n          ref={assignMultipleRefs(forwardedRef, menuListRef)}\n          id={menuListIdRef.current}\n          role=\"menu\"\n          aria-labelledby={buttonRef.current?.id}\n          data-menu-list=\"\"\n          tabIndex=\"-1\"\n          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n          {...otherProps}\n        />\n      </MenuListProvider>\n    );\n  }\n);\n"],"mappings":"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"}
+{"version":3,"file":"MenuList.js","names":["useCallback","forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","innerAs","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","interactedOutside","itemSearchStr","itemSearchClearTimeout","menuListIdRef","buttonRef","onChange","openWithArrowKeyRef","open","isContextMenu","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","handleClickOutside","e","button","target","HTMLElement","contains","preventDefault","handleKeyDown","key","currentIndex","findIndex","nextIndex","ctrlKey","altKey","slice","clearTimeout","setTimeout","searchStr","idx","dom","domText","innerText","toLowerCase","startsWith"],"sources":["../../../src/Menu/MenuList.tsx"],"sourcesContent":["import type { HTMLAttributes, ElementType, KeyboardEvent } from 'react';\nimport {\n  useCallback,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assign-ref';\nimport { useOnClickOutside } from '../hooks/useOnClickOutside';\nimport { useScope } from '../hooks';\nimport { queryScope } from './scope';\nimport { getCircularIndex, wrapEvent } from '../utils';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport interface MenuListProps extends HTMLAttributes<HTMLUListElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  defaultActiveItemValue?: string;\n}\n\nexport const MenuList = forwardRef<HTMLUListElement, MenuListProps>(\n  function MenuList(props, forwardedRef) {\n    const {\n      as: Comp = 'ul',\n      innerAs,\n      onKeyDown,\n      id: preferredId,\n      defaultActiveItemValue,\n      ...otherProps\n    } = props;\n\n    const interactedOutside = useRef(false);\n    const itemSearchStr = useRef('');\n    const itemSearchClearTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n    const {\n      menuListIdRef,\n      buttonRef,\n      onChange,\n      openWithArrowKeyRef,\n      open,\n      isContextMenu,\n    } = useMenuContext();\n\n    const [navigationItem, setNavigationItem] = useState<\n      HTMLElement | undefined\n    >();\n\n    const [mounted, setMounted] = useState(false);\n\n    const menuListRef = useRef<HTMLUListElement>();\n\n    const scope = useScope<HTMLLIElement, HTMLUListElement>(menuListRef);\n\n    const onNavigate = (el: HTMLElement) => {\n      el.focus();\n      setNavigationItem(el);\n    };\n\n    menuListIdRef.current = preferredId || menuListIdRef.current;\n\n    useEnhancedEffect(() => {\n      if (!mounted) {\n        const allItems = scope.current.queryAllNodes(queryScope);\n        let index = getCircularIndex(\n          openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0,\n          allItems.length\n        );\n\n        if (defaultActiveItemValue) {\n          for (let i = 0; i < allItems.length; i++) {\n            if (allItems[i].dataset.value === defaultActiveItemValue) {\n              index = i;\n              break;\n            }\n          }\n        }\n\n        if (index !== null) {\n          onNavigate && onNavigate(allItems[index]);\n        }\n      }\n\n      openWithArrowKeyRef.current = null;\n      setMounted(true);\n    }, [\n      mounted,\n      navigationItem,\n      onNavigate,\n      openWithArrowKeyRef,\n      scope,\n      defaultActiveItemValue,\n    ]);\n\n    const handleClickOutside = useCallback(\n      (e: PointerEvent) => {\n        if (!interactedOutside.current) {\n          // First interaction should be ignored, because\n          // this is what triggered the context menu to open\n          interactedOutside.current = true;\n          return;\n        }\n\n        if (isContextMenu.current) {\n          if (e.button === 0) {\n            onChange(e as any, false);\n          }\n        } else {\n          if (\n            e.target instanceof HTMLElement &&\n            e.target !== buttonRef.current &&\n            !buttonRef.current?.contains(e.target)\n          ) {\n            onChange(e as any, false);\n          }\n        }\n        e.preventDefault();\n      },\n      [buttonRef, isContextMenu, onChange]\n    );\n\n    useOnClickOutside(menuListRef, handleClickOutside, open);\n\n    function handleKeyDown(e: KeyboardEvent<HTMLUListElement>) {\n      switch (e.key) {\n        case 'Escape':\n        case 'Tab': {\n          onChange(e, false);\n          e.preventDefault(); // prevents focusing on next element, because we will be handling it\n          itemSearchStr.current = '';\n          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\n          itemSearchStr.current = '';\n          const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];\n          const currentIndex = allItems.findIndex((e) => e === navigationItem);\n          if (allItems.length === 0) {\n            return;\n          }\n          let nextIndex: number = currentIndex;\n          switch (e.key) {\n            case 'ArrowUp':\n              nextIndex += -1;\n              break;\n            case 'ArrowDown':\n              nextIndex += 1;\n              break;\n            case 'Home':\n              nextIndex = 0;\n              break;\n            case 'End':\n              nextIndex = -1;\n              break;\n          }\n          // We already checked if allItems.length = 0 above\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          nextIndex = getCircularIndex(nextIndex, allItems.length)!;\n          onNavigate && onNavigate(allItems[nextIndex]);\n          break;\n        default: {\n          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {\n            // A-Z\n            e.preventDefault();\n\n            if (\n              itemSearchStr.current.length === 0 ||\n              itemSearchStr.current.slice(-1) !== e.key\n            ) {\n              itemSearchStr.current = itemSearchStr.current + e.key;\n            }\n            clearTimeout(itemSearchClearTimeout.current as any);\n            itemSearchClearTimeout.current = setTimeout(() => {\n              itemSearchStr.current = '';\n            }, 500);\n\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const searchStr = itemSearchStr.current;\n            let nextIndex = -1;\n            for (\n              let i = searchStr.length === 1 ? 1 : 0;\n              i < allItems.length;\n              i++\n            ) {\n              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n              const idx = getCircularIndex(currentIndex + i, allItems.length)!;\n              const dom = allItems[idx];\n              const domText = dom.innerText.toLowerCase();\n              if (domText.length > 0 && domText.startsWith(searchStr)) {\n                nextIndex = idx;\n                break;\n              }\n            }\n            if (nextIndex >= 0 && nextIndex < allItems.length) {\n              onNavigate && onNavigate(allItems[nextIndex]);\n            }\n          }\n        }\n      }\n    }\n\n    if (!open) {\n      interactedOutside.current = false;\n      return null;\n    }\n\n    return (\n      <MenuListProvider\n        value={{\n          navigationItem,\n          onNavigate,\n        }}\n      >\n        <Comp\n          ref={assignMultipleRefs(forwardedRef, menuListRef)}\n          as={innerAs}\n          id={menuListIdRef.current}\n          role=\"menu\"\n          aria-labelledby={buttonRef.current?.id}\n          data-menu-list=\"\"\n          tabIndex=\"-1\"\n          onKeyDown={wrapEvent(onKeyDown, handleKeyDown)}\n          {...otherProps}\n        />\n      </MenuListProvider>\n    );\n  }\n);\n"],"mappings":"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"}

package/build/esm/Menu/MenuPopover.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as"];
+var _excluded = ["as", "innerAs"];
 import { forwardRef } from 'react';
 import { Popper } from '../Popper';
 import { useMenuContext } from './context';
@@ -8,11 +8,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var MenuPopover = /*#__PURE__*/forwardRef(function MenuPopover(props, forwardedRef) {
   var _props$as = props.as,
       as = _props$as === void 0 ? 'div' : _props$as,
+      innerAs = props.innerAs,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var _useMenuContext = useMenuContext(),
       buttonRef = _useMenuContext.buttonRef,
-      open = _useMenuContext.open;
+      open = _useMenuContext.open,
+      offsetFn = _useMenuContext.offsetFn,
+      isContextMenu = _useMenuContext.isContextMenu;
 
   if (!open) {
     return null;
@@ -20,8 +23,11 @@ export var MenuPopover = /*#__PURE__*/forwardRef(function MenuPopover(props, for
 
   return /*#__PURE__*/_jsx(Popper, _extends({
     as: as,
+    innerAs: innerAs,
     ref: forwardedRef,
-    anchorEl: buttonRef
+    anchorEl: buttonRef,
+    offsetFn: offsetFn,
+    placement: isContextMenu.current ? 'bottom-start' : undefined
   }, otherProps));
 });
 //# sourceMappingURL=MenuPopover.js.map

package/build/esm/Menu/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","names":["forwardRef","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","otherProps","buttonRef","open"],"sources":["../../../src/Menu/MenuPopover.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { PopperProps } from '../Popper';\nimport { Popper } from '../Popper';\nimport { useMenuContext } from './context';\n\nexport interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n}\n\nexport const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(\n  function MenuPopover(props, forwardedRef) {\n    const { as = 'div', ...otherProps } = props;\n    const { buttonRef, open } = useMenuContext();\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Popper as={as} ref={forwardedRef} anchorEl={buttonRef} {...otherProps} />\n    );\n  }\n);\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,cAAT,QAA+B,WAA/B;;AAQA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;EACxC,gBAAsCD,KAAtC,CAAQE,EAAR;EAAA,IAAQA,EAAR,0BAAa,KAAb;EAAA,IAAuBC,UAAvB,4BAAsCH,KAAtC;;EACA,sBAA4BF,cAAc,EAA1C;EAAA,IAAQM,SAAR,mBAAQA,SAAR;EAAA,IAAmBC,IAAnB,mBAAmBA,IAAnB;;EAEA,IAAI,CAACA,IAAL,EAAW;IACT,OAAO,IAAP;EACD;;EAED,oBACE,KAAC,MAAD;IAAQ,EAAE,EAAEH,EAAZ;IAAgB,GAAG,EAAED,YAArB;IAAmC,QAAQ,EAAEG;EAA7C,GAA4DD,UAA5D,EADF;AAGD,CAZkC,CAA9B"}
+{"version":3,"file":"MenuPopover.js","names":["forwardRef","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","innerAs","otherProps","buttonRef","open","offsetFn","isContextMenu","current","undefined"],"sources":["../../../src/Menu/MenuPopover.tsx"],"sourcesContent":["import type { ElementType, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { PopperProps } from '../Popper';\nimport { Popper } from '../Popper';\nimport { useMenuContext } from './context';\n\nexport interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n}\n\nexport const MenuPopover = forwardRef<HTMLDivElement, MenuPopoverProps>(\n  function MenuPopover(props, forwardedRef) {\n    const { as = 'div', innerAs, ...otherProps } = props;\n    const { buttonRef, open, offsetFn, isContextMenu } = useMenuContext();\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Popper\n        as={as}\n        innerAs={innerAs}\n        ref={forwardedRef}\n        anchorEl={buttonRef}\n        offsetFn={offsetFn}\n        placement={isContextMenu.current ? 'bottom-start' : undefined}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,cAAT,QAA+B,WAA/B;;AAQA,OAAO,IAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;EACxC,gBAA+CD,KAA/C,CAAQE,EAAR;EAAA,IAAQA,EAAR,0BAAa,KAAb;EAAA,IAAoBC,OAApB,GAA+CH,KAA/C,CAAoBG,OAApB;EAAA,IAAgCC,UAAhC,4BAA+CJ,KAA/C;;EACA,sBAAqDF,cAAc,EAAnE;EAAA,IAAQO,SAAR,mBAAQA,SAAR;EAAA,IAAmBC,IAAnB,mBAAmBA,IAAnB;EAAA,IAAyBC,QAAzB,mBAAyBA,QAAzB;EAAA,IAAmCC,aAAnC,mBAAmCA,aAAnC;;EAEA,IAAI,CAACF,IAAL,EAAW;IACT,OAAO,IAAP;EACD;;EAED,oBACE,KAAC,MAAD;IACE,EAAE,EAAEJ,EADN;IAEE,OAAO,EAAEC,OAFX;IAGE,GAAG,EAAEF,YAHP;IAIE,QAAQ,EAAEI,SAJZ;IAKE,QAAQ,EAAEE,QALZ;IAME,SAAS,EAAEC,aAAa,CAACC,OAAd,GAAwB,cAAxB,GAAyCC;EANtD,GAOMN,UAPN,EADF;AAWD,CApBkC,CAA9B"}

package/build/esm/Menu/context.d.ts

@@ -1,15 +1,19 @@
-import type { KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent } from 'react';
+import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';
+import type { Dispatch, KeyboardEvent, MouseEvent, MutableRefObject, PointerEvent, SetStateAction } from 'react';
 export declare type ItemObject = {
     text: string;
     value: any;
     id: string | undefined;
 };
 export interface MenuContextProps {
-    buttonRef: MutableRefObject<HTMLButtonElement | null>;
+    buttonRef: MutableRefObject<HTMLElement | null>;
     menuListIdRef: MutableRefObject<undefined | string>;
     openWithArrowKeyRef: MutableRefObject<string | null>;
-    onChange?: (e: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement> | PointerEvent<HTMLElement>, isOpen: boolean) => void;
+    onChange: (e: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement> | PointerEvent<HTMLElement>, isOpen: boolean) => void;
     open: boolean;
+    offsetFn: OffsetsFunction | undefined;
+    setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;
+    isContextMenu: MutableRefObject<boolean>;
 }
 export declare const MenuProvider: import("react").Provider<MenuContextProps>;
 export declare const useMenuContext: () => MenuContextProps;

package/build/esm/Menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","useContext","menuContext","MenuProvider","Provider","useMenuContext","menuListContext","MenuListProvider","useMenuListContext"],"sources":["../../../src/Menu/context.ts"],"sourcesContent":["import type {\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PointerEvent,\n} from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type ItemObject = { text: string; value: any; id: string | undefined };\n\n// MenuRoot\nexport interface MenuContextProps {\n  buttonRef: MutableRefObject<HTMLButtonElement | null>;\n  menuListIdRef: MutableRefObject<undefined | string>;\n  openWithArrowKeyRef: MutableRefObject<string | null>;\n  onChange?: (\n    e:\n      | KeyboardEvent<HTMLElement>\n      | MouseEvent<HTMLElement>\n      | PointerEvent<HTMLElement>,\n    isOpen: boolean\n  ) => void;\n  open: boolean;\n}\n\nconst menuContext = createContext<MenuContextProps>(null as any);\nexport const { Provider: MenuProvider } = menuContext;\nexport const useMenuContext = () => useContext(menuContext);\n\n// MenuList\nexport interface MenuListContextProps {\n  navigationItem: HTMLElement | undefined;\n  onNavigate: undefined | ((idx: HTMLElement) => void);\n}\n\nconst menuListContext = createContext<MenuListContextProps>(null as any);\nexport const MenuListProvider = menuListContext.Provider;\nexport const useMenuListContext = () => useContext(menuListContext);\n"],"mappings":"AAMA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAmBA,IAAMC,WAAW,gBAAGF,aAAa,CAAmB,IAAnB,CAAjC;AACO,IAAkBG,YAAlB,GAAmCD,WAAnC,CAAQE,QAAR;;AACP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;EAAA,OAAMJ,UAAU,CAACC,WAAD,CAAhB;AAAA,CAAvB,C,CAEP;;AAMA,IAAMI,eAAe,gBAAGN,aAAa,CAAuB,IAAvB,CAArC;AACA,OAAO,IAAMO,gBAAgB,GAAGD,eAAe,CAACF,QAAzC;AACP,OAAO,IAAMI,kBAAkB,GAAG,SAArBA,kBAAqB;EAAA,OAAMP,UAAU,CAACK,eAAD,CAAhB;AAAA,CAA3B"}
+{"version":3,"file":"context.js","names":["createContext","useContext","menuContext","MenuProvider","Provider","useMenuContext","menuListContext","MenuListProvider","useMenuListContext"],"sources":["../../../src/Menu/context.ts"],"sourcesContent":["import type { OffsetsFunction } from '@popperjs/core/lib/modifiers/offset';\nimport type {\n  Dispatch,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  PointerEvent,\n  SetStateAction,\n} from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type ItemObject = { text: string; value: any; id: string | undefined };\n\n// MenuRoot\nexport interface MenuContextProps {\n  buttonRef: MutableRefObject<HTMLElement | null>;\n  menuListIdRef: MutableRefObject<undefined | string>;\n  openWithArrowKeyRef: MutableRefObject<string | null>;\n  onChange: (\n    e:\n      | KeyboardEvent<HTMLElement>\n      | MouseEvent<HTMLElement>\n      | PointerEvent<HTMLElement>,\n    isOpen: boolean\n  ) => void;\n  open: boolean;\n  offsetFn: OffsetsFunction | undefined;\n  setOffsetFn: Dispatch<SetStateAction<OffsetsFunction | undefined>>;\n  isContextMenu: MutableRefObject<boolean>;\n}\n\nconst menuContext = createContext<MenuContextProps>(null as any);\nexport const { Provider: MenuProvider } = menuContext;\nexport const useMenuContext = () => useContext(menuContext);\n\n// MenuList\nexport interface MenuListContextProps {\n  navigationItem: HTMLElement | undefined;\n  onNavigate: undefined | ((idx: HTMLElement) => void);\n}\n\nconst menuListContext = createContext<MenuListContextProps>(null as any);\nexport const MenuListProvider = menuListContext.Provider;\nexport const useMenuListContext = () => useContext(menuListContext);\n"],"mappings":"AASA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAsBA,IAAMC,WAAW,gBAAGF,aAAa,CAAmB,IAAnB,CAAjC;AACO,IAAkBG,YAAlB,GAAmCD,WAAnC,CAAQE,QAAR;;AACP,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;EAAA,OAAMJ,UAAU,CAACC,WAAD,CAAhB;AAAA,CAAvB,C,CAEP;;AAMA,IAAMI,eAAe,gBAAGN,aAAa,CAAuB,IAAvB,CAArC;AACA,OAAO,IAAMO,gBAAgB,GAAGD,eAAe,CAACF,QAAzC;AACP,OAAO,IAAMI,kBAAkB,GAAG,SAArBA,kBAAqB;EAAA,OAAMP,UAAU,CAACK,eAAD,CAAhB;AAAA,CAA3B"}

package/build/esm/Menu/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Menu';
 export * from './MenuButton';
+export * from './ContextMenuTrigger';
 export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuPopover';

package/build/esm/Menu/index.js

@@ -1,5 +1,6 @@
 export * from './Menu';
 export * from './MenuButton';
+export * from './ContextMenuTrigger';
 export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuPopover';

package/build/esm/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Menu/index.ts"],"sourcesContent":["export * from './Menu';\nexport * from './MenuButton';\nexport * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuPopover';\n"],"mappings":"AAAA,cAAc,QAAd;AACA,cAAc,cAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Menu/index.ts"],"sourcesContent":["export * from './Menu';\nexport * from './MenuButton';\nexport * from './ContextMenuTrigger';\nexport * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuPopover';\n"],"mappings":"AAAA,cAAc,QAAd;AACA,cAAc,cAAd;AACA,cAAc,sBAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd"}