@basic-ui/core 0.0.36 → 0.0.39

package/build/esm/Menu/MenuItem.js

@@ -1,33 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-import { forwardRef, useRef } from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import { forwardRef, useRef, useId } from 'react';
+import * as React from 'react';
 import { useMenuContext, useMenuListContext } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef) {
-  const {
-    as: Comp = 'li',
-    disabled,
-    onSelect,
-    onClick,
-    onKeyDown
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
+export var MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef) {
+  var _props$as = props.as,
+      Comp = _props$as === void 0 ? 'li' : _props$as,
+      disabled = props.disabled,
+      onSelect = props.onSelect,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      otherProps = _objectWithoutProperties(props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
 
-  const {
-    menuListIdRef,
-    onChange,
-    buttonRef
-  } = useMenuContext();
-  const {
-    navigationItem,
-    onNavigate
-  } = useMenuListContext();
-  const ref = useRef();
-  const itemIndex = useRef(-1);
-  const isActive = ref.current && ref.current === navigationItem;
-  const handleSelect = wrapEvent(onSelect, e => {
+  var _useMenuContext = useMenuContext(),
+      onChange = _useMenuContext.onChange,
+      buttonRef = _useMenuContext.buttonRef;
+
+  var _useMenuListContext = useMenuListContext(),
+      navigationItem = _useMenuListContext.navigationItem,
+      onNavigate = _useMenuListContext.onNavigate;
+
+  var ref = useRef();
+  var itemId = useId();
+  var isActive = ref.current && ref.current === navigationItem;
+  var handleSelect = wrapEvent(onSelect, function (e) {
     var _buttonRef$current;
 
     onChange && onChange(e, false);
@@ -35,7 +34,7 @@ export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forward
     e.preventDefault();
   });
 
-  const handleClick = e => {
+  var handleClick = function handleClick(e) {
     if (!disabled) {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       onNavigate && onNavigate(ref.current);
@@ -43,7 +42,7 @@ export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forward
     }
   };
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     switch (e.key) {
       case 'Enter':
       case ' ':
@@ -57,7 +56,7 @@ export const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forward
 
   return /*#__PURE__*/_jsx(Comp, _extends({
     ref: assignMultipleRefs(ref, forwardedRef),
-    id: disabled ? undefined : "".concat(menuListIdRef.current, "_").concat(itemIndex.current),
+    id: disabled ? undefined : itemId,
     "data-menu-item": "",
     "data-highlighted": isActive ? '' : undefined,
     role: "menuitem",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/MenuItem.tsx"],"names":["forwardRef","useRef","useMenuContext","useMenuListContext","assignMultipleRefs","wrapEvent","MenuItem","props","forwardedRef","as","Comp","disabled","onSelect","onClick","onKeyDown","otherProps","menuListIdRef","onChange","buttonRef","navigationItem","onNavigate","ref","itemIndex","isActive","current","handleSelect","e","focus","preventDefault","handleClick","handleKeyDown","key","undefined"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,MAAMC,QAAQ,gBAAGN,UAAU,CAAqB,SAASM,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;AACA,QAAM;AACJC,IAAAA,EAAE,EAAEC,IAAI,GAAG,IADP;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,OAJI;AAKJC,IAAAA;AALI,MAOFP,KAPJ;AAAA,QAMKQ,UANL,iCAOIR,KAPJ;;AAQA,QAAM;AAAES,IAAAA,aAAF;AAAiBC,IAAAA,QAAjB;AAA2BC,IAAAA;AAA3B,MAAyChB,cAAc,EAA7D;AACA,QAAM;AAAEiB,IAAAA,cAAF;AAAkBC,IAAAA;AAAlB,MAAiCjB,kBAAkB,EAAzD;AACA,QAAMkB,GAAG,GAAGpB,MAAM,EAAlB;AACA,QAAMqB,SAAS,GAAGrB,MAAM,CAAC,CAAC,CAAF,CAAxB;AAEA,QAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;AAEA,QAAMM,YAAY,GAAGpB,SAAS,CAC5BO,QAD4B,EAG1Bc,CADF,IAEK;AAAA;;AACHT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;AACA,0BAAAR,SAAS,CAACM,OAAV,wCAAmBG,KAAnB;AACAD,IAAAA,CAAC,CAACE,cAAF;AACD,GAR2B,CAA9B;;AAWA,QAAMC,WAAW,GAAIH,CAAD,IAAwC;AAC1D,QAAI,CAACf,QAAL,EAAe;AACb;AACAS,MAAAA,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;AACAC,MAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;AACF,GAND;;AAQA,QAAMI,aAAwD,GAAIJ,CAAD,IAAO;AACtE,YAAQA,CAAC,CAACK,GAAV;AACE,WAAK,OAAL;AACA,WAAK,GAAL;AACE,YAAI,CAACpB,QAAL,EAAe;AACbc,UAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;;AACD;AANJ;AAQD,GATD;;AAWA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAEtB,kBAAkB,CAACiB,GAAD,EAAMb,YAAN,CADzB;AAEE,IAAA,EAAE,EACAG,QAAQ,GAAGqB,SAAH,aAAkBhB,aAAa,CAACQ,OAAhC,cAA2CF,SAAS,CAACE,OAArD,CAHZ;AAKE,sBAAe,EALjB;AAME,wBAAkBD,QAAQ,GAAG,EAAH,GAAQS,SANpC;AAOE,IAAA,IAAI,EAAC,UAPP;AAQE,IAAA,OAAO,EAAE3B,SAAS,CAACQ,OAAD,EAAUgB,WAAV,CARpB;AASE,IAAA,QAAQ,EAAElB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAT5B;AAUE,IAAA,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYgB,aAAZ,CAVtB;AAWE,qBAAenB,QAAQ,GAAG,EAAH,GAAQqB,SAXjC;AAYE,qBAAerB,QAAQ,GAAG,EAAH,GAAQqB,SAZjC;AAaE,IAAA,QAAQ,EAAErB;AAbZ,KAcMI,UAdN,EADF;AAkBD,CAnEiC,CAA3B","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type * as React from 'react';\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onSelect?: (\n    e: React.MouseEvent<HTMLLIElement> | React.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 { menuListIdRef, onChange, buttonRef } = useMenuContext();\n  const { navigationItem, onNavigate } = useMenuListContext();\n  const ref = useRef<HTMLLIElement>();\n  const itemIndex = useRef(-1);\n\n  const isActive = ref.current && ref.current === navigationItem;\n\n  const handleSelect = wrapEvent(\n    onSelect,\n    (\n      e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>\n    ) => {\n      onChange && onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: React.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: React.KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        if (!disabled) {\n          handleSelect(e);\n        }\n        break;\n    }\n  };\n\n  return (\n    <Comp\n      ref={assignMultipleRefs(ref, forwardedRef)}\n      id={\n        disabled ? undefined : `${menuListIdRef.current}_${itemIndex.current}`\n      }\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"],"file":"MenuItem.js"}
+{"version":3,"sources":["../../../src/Menu/MenuItem.tsx"],"names":["forwardRef","useRef","useId","React","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"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,EAA6BC,KAA7B,QAA0C,OAA1C;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,cAAT,EAAyBC,kBAAzB,QAAmD,WAAnD;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,SAASC,SAAT,QAA0B,UAA1B;;AAWA,OAAO,IAAMC,QAAQ,gBAAGR,UAAU,CAAqB,SAASQ,QAAT,CACrDC,KADqD,EAErDC,YAFqD,EAGrD;AAAA,kBAQID,KARJ,CAEEE,EAFF;AAAA,MAEMC,IAFN,0BAEa,IAFb;AAAA,MAGEC,QAHF,GAQIJ,KARJ,CAGEI,QAHF;AAAA,MAIEC,QAJF,GAQIL,KARJ,CAIEK,QAJF;AAAA,MAKEC,OALF,GAQIN,KARJ,CAKEM,OALF;AAAA,MAMEC,SANF,GAQIP,KARJ,CAMEO,SANF;AAAA,MAOKC,UAPL,4BAQIR,KARJ;;AAAA,wBASgCL,cAAc,EAT9C;AAAA,MASQc,QATR,mBASQA,QATR;AAAA,MASkBC,SATlB,mBASkBA,SATlB;;AAAA,4BAUuCd,kBAAkB,EAVzD;AAAA,MAUQe,cAVR,uBAUQA,cAVR;AAAA,MAUwBC,UAVxB,uBAUwBA,UAVxB;;AAWA,MAAMC,GAAG,GAAGrB,MAAM,EAAlB;AACA,MAAMsB,MAAM,GAAGrB,KAAK,EAApB;AAEA,MAAMsB,QAAQ,GAAGF,GAAG,CAACG,OAAJ,IAAeH,GAAG,CAACG,OAAJ,KAAgBL,cAAhD;AAEA,MAAMM,YAAY,GAAGnB,SAAS,CAC5BO,QAD4B,EAE5B,UACEa,CADF,EAEK;AAAA;;AACHT,IAAAA,QAAQ,IAAIA,QAAQ,CAACS,CAAD,EAAI,KAAJ,CAApB;AACA,0BAAAR,SAAS,CAACM,OAAV,wCAAmBG,KAAnB;AACAD,IAAAA,CAAC,CAACE,cAAF;AACD,GAR2B,CAA9B;;AAWA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACH,CAAD,EAAwC;AAC1D,QAAI,CAACd,QAAL,EAAe;AACb;AACAQ,MAAAA,UAAU,IAAIA,UAAU,CAACC,GAAG,CAACG,OAAL,CAAxB;AACAC,MAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;AACF,GAND;;AAQA,MAAMI,aAAwD,GAAG,SAA3DA,aAA2D,CAACJ,CAAD,EAAO;AACtE,YAAQA,CAAC,CAACK,GAAV;AACE,WAAK,OAAL;AACA,WAAK,GAAL;AACE,YAAI,CAACnB,QAAL,EAAe;AACba,UAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;;AACD;AANJ;AAQD,GATD;;AAWA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAErB,kBAAkB,CAACgB,GAAD,EAAMZ,YAAN,CADzB;AAEE,IAAA,EAAE,EAAEG,QAAQ,GAAGoB,SAAH,GAAeV,MAF7B;AAGE,sBAAe,EAHjB;AAIE,wBAAkBC,QAAQ,GAAG,EAAH,GAAQS,SAJpC;AAKE,IAAA,IAAI,EAAC,UALP;AAME,IAAA,OAAO,EAAE1B,SAAS,CAACQ,OAAD,EAAUe,WAAV,CANpB;AAOE,IAAA,QAAQ,EAAEjB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP5B;AAQE,IAAA,SAAS,EAAEN,SAAS,CAACS,SAAD,EAAYe,aAAZ,CARtB;AASE,qBAAelB,QAAQ,GAAG,EAAH,GAAQoB,SATjC;AAUE,qBAAepB,QAAQ,GAAG,EAAH,GAAQoB,SAVjC;AAWE,IAAA,QAAQ,EAAEpB;AAXZ,KAYMI,UAZN,EADF;AAgBD,CAjEiC,CAA3B","sourcesContent":["import { forwardRef, useRef, useId } from 'react';\nimport * as React from 'react';\n\nimport { useMenuContext, useMenuListContext } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\nimport { wrapEvent } from '../utils';\n\nexport interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onSelect?: (\n    e: React.MouseEvent<HTMLLIElement> | React.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    (\n      e: React.KeyboardEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>\n    ) => {\n      onChange && onChange(e, false);\n      buttonRef.current?.focus();\n      e.preventDefault();\n    }\n  );\n\n  const handleClick = (e: React.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: React.KeyboardEventHandler<HTMLLIElement> = (e) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\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"],"file":"MenuItem.js"}

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

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 export interface MenuListProps extends React.HTMLAttributes<HTMLUListElement> {
     as?: React.ElementType<any>;
     innerAs?: React.ElementType<any>;

package/build/esm/Menu/MenuList.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
+import * as React from 'react';
 import { useMenuContext, MenuListProvider } from './context';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
@@ -8,43 +10,50 @@ import { useScope } from '../hooks';
 import { queryScope } from './scope';
 import { getCircularIndex, wrapEvent } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwardedRef) {
+var useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export var MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forwardedRef) {
   var _buttonRef$current3;
 
-  const {
-    as: Comp = 'ul',
-    onKeyDown,
-    id: preferredId,
-    defaultActiveItemValue
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "onKeyDown", "id", "defaultActiveItemValue"]);
-
-  const {
-    menuListIdRef,
-    buttonRef,
-    onChange,
-    openWithArrowKeyRef,
-    open
-  } = useMenuContext();
-  const [navigationItem, setNavigationItem] = useState();
-  const [mounted, setMounted] = useState(false);
-  const menuListRef = useRef();
-  const scope = useScope(menuListRef);
-
-  const onNavigate = el => {
+  var _props$as = props.as,
+      Comp = _props$as === void 0 ? 'ul' : _props$as,
+      onKeyDown = props.onKeyDown,
+      preferredId = props.id,
+      defaultActiveItemValue = props.defaultActiveItemValue,
+      otherProps = _objectWithoutProperties(props, ["as", "onKeyDown", "id", "defaultActiveItemValue"]);
+
+  var _useMenuContext = useMenuContext(),
+      menuListIdRef = _useMenuContext.menuListIdRef,
+      buttonRef = _useMenuContext.buttonRef,
+      onChange = _useMenuContext.onChange,
+      openWithArrowKeyRef = _useMenuContext.openWithArrowKeyRef,
+      open = _useMenuContext.open;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      navigationItem = _useState2[0],
+      setNavigationItem = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mounted = _useState4[0],
+      setMounted = _useState4[1];
+
+  var menuListRef = useRef();
+  var scope = useScope(menuListRef);
+
+  var onNavigate = function onNavigate(el) {
     el.focus();
     setNavigationItem(el);
   };
 
   menuListIdRef.current = preferredId || menuListIdRef.current;
-  useEnhancedEffect(() => {
+  useEnhancedEffect(function () {
     if (!mounted) {
-      const allItems = scope.current.queryAllNodes(queryScope);
-      let index = getCircularIndex(openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0, allItems.length);
+      var allItems = scope.current.queryAllNodes(queryScope);
+      var index = getCircularIndex(openWithArrowKeyRef.current === 'ArrowUp' ? -1 : 0, allItems.length);
 
       if (defaultActiveItemValue) {
-        for (let i = 0; i < allItems.length; i++) {
+        for (var i = 0; i < allItems.length; i++) {
           if (allItems[i].dataset.value === defaultActiveItemValue) {
             index = i;
             break;
@@ -60,7 +69,7 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
     openWithArrowKeyRef.current = null;
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
-  useOnClickOutside(menuListRef, e => {
+  useOnClickOutside(menuListRef, function (e) {
     var _buttonRef$current;
 
     if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(e.target))) {
@@ -89,14 +98,16 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
       case 'ArrowDown':
       case 'ArrowUp':
         e.preventDefault();
-        const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
-        const currentIndex = allItems.findIndex(e => e === navigationItem);
+        var allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
+        var currentIndex = allItems.findIndex(function (e) {
+          return e === navigationItem;
+        });
 
         if (allItems.length === 0) {
           return;
         }
 
-        let nextIndex = currentIndex;
+        var nextIndex = currentIndex;
 
         switch (e.key) {
           case 'ArrowUp':
@@ -127,25 +138,31 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
           if (e.key.length === 1) {
             // A-Z
             e.preventDefault();
-            const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
-            const currentIndex = allItems.findIndex(e => e === navigationItem);
-            const firstLetter = e.key.toLowerCase();
-            let nextIndex = -1;
 
-            for (let i = 1; i < allItems.length; i++) {
+            var _allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
+
+            var _currentIndex = _allItems.findIndex(function (e) {
+              return e === navigationItem;
+            });
+
+            var firstLetter = e.key.toLowerCase();
+
+            var _nextIndex = -1;
+
+            for (var i = 1; i < _allItems.length; i++) {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              const idx = getCircularIndex(currentIndex + i, allItems.length);
-              const dom = allItems[idx];
-              const domText = dom.innerText.toLowerCase();
+              var idx = getCircularIndex(_currentIndex + i, _allItems.length);
+              var dom = _allItems[idx];
+              var domText = dom.innerText.toLowerCase();
 
               if (domText.length > 0 && domText.charAt(0) === firstLetter) {
-                nextIndex = idx;
+                _nextIndex = idx;
                 break;
               }
             }
 
-            if (nextIndex >= 0 && nextIndex < allItems.length) {
-              onNavigate && onNavigate(allItems[nextIndex]);
+            if (_nextIndex >= 0 && _nextIndex < _allItems.length) {
+              onNavigate && onNavigate(_allItems[_nextIndex]);
             }
           }
         }
@@ -158,8 +175,8 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
 
   return /*#__PURE__*/_jsx(MenuListProvider, {
     value: {
-      navigationItem,
-      onNavigate
+      navigationItem: navigationItem,
+      onNavigate: onNavigate
     },
     children: /*#__PURE__*/_jsx(Comp, _extends({
       ref: assignMultipleRefs(forwardedRef, menuListRef),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/MenuList.tsx"],"names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","id","preferredId","defaultActiveItemValue","otherProps","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","firstLetter","toLowerCase","idx","dom","domText","innerText","charAt"],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\nimport type * as React from 'react';\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\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 React.HTMLAttributes<HTMLUListElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.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 {\n      menuListIdRef,\n      buttonRef,\n      onChange,\n      openWithArrowKeyRef,\n      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: React.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          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\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) {\n            // A-Z\n            e.preventDefault();\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const firstLetter = e.key.toLowerCase();\n            let nextIndex = -1;\n            for (let i = 1; i < allItems.length; i++) {\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.charAt(0) === firstLetter) {\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"],"file":"MenuList.js"}
+{"version":3,"sources":["../../../src/Menu/MenuList.tsx"],"names":["forwardRef","useEffect","useRef","useState","useLayoutEffect","React","useMenuContext","MenuListProvider","assignMultipleRefs","useOnClickOutside","useScope","queryScope","getCircularIndex","wrapEvent","useEnhancedEffect","window","MenuList","props","forwardedRef","as","Comp","onKeyDown","preferredId","id","defaultActiveItemValue","otherProps","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","firstLetter","toLowerCase","idx","dom","domText","innerText","charAt"],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  useLayoutEffect,\n} from 'react';\nimport * as React from 'react';\n\nimport { useMenuContext, MenuListProvider } from './context';\nimport { assignMultipleRefs } from '../utils/assignRef';\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 React.HTMLAttributes<HTMLUListElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.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 { 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: React.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          buttonRef.current?.focus();\n          break;\n        }\n        case 'Home':\n        case 'End':\n        case 'ArrowDown':\n        case 'ArrowUp':\n          e.preventDefault();\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) {\n            // A-Z\n            e.preventDefault();\n            const allItems = scope\n              ? scope.current.queryAllNodes(queryScope)\n              : [];\n            const currentIndex = allItems.findIndex(\n              (e) => e === navigationItem\n            );\n            const firstLetter = e.key.toLowerCase();\n            let nextIndex = -1;\n            for (let i = 1; i < allItems.length; i++) {\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.charAt(0) === firstLetter) {\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"],"file":"MenuList.js"}

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

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-import { PopperProps } from '../Popper';
+import * as React from 'react';
+import type { PopperProps } from '../Popper';
 export interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {
     as?: React.ElementType<any>;
     innerAs?: React.ElementType<any>;

package/build/esm/Menu/MenuPopover.js

@@ -1,19 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { Popper } from '../Popper';
 import { useMenuContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const MenuPopover = /*#__PURE__*/forwardRef(function MenuPopover(props, forwardedRef) {
-  const {
-    as = 'div'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
+export var MenuPopover = /*#__PURE__*/forwardRef(function MenuPopover(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'div' : _props$as,
+      otherProps = _objectWithoutProperties(props, ["as"]);
 
-  const {
-    buttonRef,
-    open
-  } = useMenuContext();
+  var _useMenuContext = useMenuContext(),
+      buttonRef = _useMenuContext.buttonRef,
+      open = _useMenuContext.open;
 
   if (!open) {
     return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/MenuPopover.tsx"],"names":["forwardRef","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","otherProps","buttonRef","open"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,MAAT,QAAoC,WAApC;AACA,SAASC,cAAT,QAA+B,WAA/B;;AAQA,OAAO,MAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;AACxC,QAAM;AAAEC,IAAAA,EAAE,GAAG;AAAP,MAAgCF,KAAtC;AAAA,QAAuBG,UAAvB,iCAAsCH,KAAtC;;AACA,QAAM;AAAEI,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAAsBP,cAAc,EAA1C;;AAEA,MAAI,CAACO,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBACE,KAAC,MAAD;AAAQ,IAAA,EAAE,EAAEH,EAAZ;AAAgB,IAAA,GAAG,EAAED,YAArB;AAAmC,IAAA,QAAQ,EAAEG;AAA7C,KAA4DD,UAA5D,EADF;AAGD,CAZkC,CAA9B","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { Popper, PopperProps } from '../Popper';\nimport { useMenuContext } from './context';\n\nexport interface MenuPopoverProps extends Omit<PopperProps, 'anchorEl'> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: React.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"],"file":"MenuPopover.js"}
+{"version":3,"sources":["../../../src/Menu/MenuPopover.tsx"],"names":["forwardRef","React","Popper","useMenuContext","MenuPopover","props","forwardedRef","as","otherProps","buttonRef","open"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAGA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,cAAT,QAA+B,WAA/B;;AAQA,OAAO,IAAMC,WAAW,gBAAGJ,UAAU,CACnC,SAASI,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;AAAA,kBACFD,KADE,CAChCE,EADgC;AAAA,MAChCA,EADgC,0BAC3B,KAD2B;AAAA,MACjBC,UADiB,4BACFH,KADE;;AAAA,wBAEZF,cAAc,EAFF;AAAA,MAEhCM,SAFgC,mBAEhCA,SAFgC;AAAA,MAErBC,IAFqB,mBAErBA,IAFqB;;AAIxC,MAAI,CAACA,IAAL,EAAW;AACT,WAAO,IAAP;AACD;;AAED,sBACE,KAAC,MAAD;AAAQ,IAAA,EAAE,EAAEH,EAAZ;AAAgB,IAAA,GAAG,EAAED,YAArB;AAAmC,IAAA,QAAQ,EAAEG;AAA7C,KAA4DD,UAA5D,EADF;AAGD,CAZkC,CAA9B","sourcesContent":["import { forwardRef } from 'react';\nimport * as React 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?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: React.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"],"file":"MenuPopover.js"}

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

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export declare type ItemObject = {
     text: string;
     value: any;

package/build/esm/Menu/context.js

@@ -1,11 +1,14 @@
 import { createContext, useContext } from 'react';
-const menuContext = /*#__PURE__*/createContext(null);
-export const {
-  Provider: MenuProvider
-} = menuContext;
-export const useMenuContext = () => useContext(menuContext); // MenuList
+var menuContext = /*#__PURE__*/createContext(null);
+var MenuProvider = menuContext.Provider;
+export { MenuProvider };
+export var useMenuContext = function useMenuContext() {
+  return useContext(menuContext);
+}; // MenuList
 
-const menuListContext = /*#__PURE__*/createContext(null);
-export const MenuListProvider = menuListContext.Provider;
-export const useMenuListContext = () => useContext(menuListContext);
+var menuListContext = /*#__PURE__*/createContext(null);
+export var MenuListProvider = menuListContext.Provider;
+export var useMenuListContext = function useMenuListContext() {
+  return useContext(menuListContext);
+};
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/context.ts"],"names":["createContext","useContext","menuContext","Provider","MenuProvider","useMenuContext","menuListContext","MenuListProvider","useMenuListContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA4D,OAA5D;AAmBA,MAAMC,WAAW,gBAAGF,aAAa,CAAmB,IAAnB,CAAjC;AACA,OAAO,MAAM;AAAEG,EAAAA,QAAQ,EAAEC;AAAZ,IAA6BF,WAAnC;AACP,OAAO,MAAMG,cAAc,GAAG,MAAMJ,UAAU,CAACC,WAAD,CAAvC,C,CAEP;;AAMA,MAAMI,eAAe,gBAAGN,aAAa,CAAuB,IAAvB,CAArC;AACA,OAAO,MAAMO,gBAAgB,GAAGD,eAAe,CAACH,QAAzC;AACP,OAAO,MAAMK,kBAAkB,GAAG,MAAMP,UAAU,CAACK,eAAD,CAA3C","sourcesContent":["import { createContext, useContext, MutableRefObject } 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      | React.KeyboardEvent<HTMLElement>\n      | React.MouseEvent<HTMLElement>\n      | React.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"],"file":"context.js"}
+{"version":3,"sources":["../../../src/Menu/context.ts"],"names":["createContext","useContext","menuContext","MenuProvider","Provider","useMenuContext","menuListContext","MenuListProvider","useMenuListContext"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAmBA,IAAMC,WAAW,gBAAGF,aAAa,CAAmB,IAAnB,CAAjC;IACyBG,Y,GAAiBD,W,CAA3BE,Q;;AACf,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,SAAMJ,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;AAAA,SAAMP,UAAU,CAACK,eAAD,CAAhB;AAAA,CAA3B","sourcesContent":["import type { MutableRefObject } 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      | React.KeyboardEvent<HTMLElement>\n      | React.MouseEvent<HTMLElement>\n      | React.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"],"file":"context.js"}

package/build/esm/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import type * as React from 'react';
+import type { ReactNode } from 'react';
+import * as React from 'react';
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     as?: React.ElementType<any>;
     innerAs?: React.ElementType<any>;

package/build/esm/Modal/Modal.js

@@ -1,21 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef, useRef } from 'react';
+import * as React from 'react';
 import { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';
 import { FocusLock } from '../FocusLock';
 import { assignMultipleRefs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    as: Comp = 'div',
-    children,
-    trapFocus = true,
-    style = {}
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, ["as", "children", "trapFocus", "style"]);
+export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      _ref$trapFocus = _ref.trapFocus,
+      trapFocus = _ref$trapFocus === void 0 ? true : _ref$trapFocus,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? {} : _ref$style,
+      otherProps = _objectWithoutProperties(_ref, ["as", "children", "trapFocus", "style"]);
 
-  const modalRef = useRef(null);
-  useFocusReturn(trapFocus);
+  var modalRef = useRef(null);
+  useFocusReturn(trapFocus, modalRef);
   useRemoveBodyScroll(trapFocus);
   useAutoFocus(trapFocus, modalRef);
   return /*#__PURE__*/_jsx(FocusLock, {
@@ -27,7 +29,7 @@ export const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
       role: "dialog",
       "aria-modal": "true",
       style: style,
-      tabIndex: 0
+      tabIndex: -1
     }, otherProps, {
       children: children
     }))

package/build/esm/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modal/Modal.tsx"],"names":["forwardRef","useRef","useAutoFocus","useFocusReturn","useRemoveBodyScroll","FocusLock","assignMultipleRefs","Modal","ref","as","Comp","children","trapFocus","style","otherProps","modalRef"],"mappings":";;AAAA,SAAoBA,UAApB,EAAgCC,MAAhC,QAA8C,OAA9C;AAEA,SAASC,YAAT,EAAuBC,cAAvB,EAAuCC,mBAAvC,QAAkE,UAAlE;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAUA,OAAO,MAAMC,KAAK,gBAAGP,UAAU,CAC7B,OAEEQ,GAFF,KAGK;AAAA,MAFH;AAAEC,IAAAA,EAAE,EAAEC,IAAI,GAAG,KAAb;AAAoBC,IAAAA,QAApB;AAA8BC,IAAAA,SAAS,GAAG,IAA1C;AAAgDC,IAAAA,KAAK,GAAG;AAAxD,GAEG;AAAA,MAF4DC,UAE5D;;AACH,QAAMC,QAAQ,GAAGd,MAAM,CAAiB,IAAjB,CAAvB;AAEAE,EAAAA,cAAc,CAACS,SAAD,CAAd;AACAR,EAAAA,mBAAmB,CAACQ,SAAD,CAAnB;AACAV,EAAAA,YAAY,CAACU,SAAD,EAAYG,QAAZ,CAAZ;AAEA,sBACE,KAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,OAAO,EAAEH,SAAxC;AAAA,2BACE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEN,kBAAkB,CAACE,GAAD,EAAMO,QAAN,CADzB;AAEE,8BAAqB,EAFvB;AAGE,MAAA,IAAI,EAAC,QAHP;AAIE,oBAAW,MAJb;AAKE,MAAA,KAAK,EAAEF,KALT;AAME,MAAA,QAAQ,EAAE;AANZ,OAOMC,UAPN;AAAA,gBASGH;AATH;AADF,IADF;AAeD,CA1B4B,CAAxB","sourcesContent":["import { ReactNode, forwardRef, useRef } from 'react';\nimport type * as React from 'react';\nimport { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';\nimport { FocusLock } from '../FocusLock';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: ReactNode;\n  style?: React.CSSProperties;\n  trapFocus?: boolean;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    { as: Comp = 'div', children, trapFocus = true, style = {}, ...otherProps },\n    ref\n  ) => {\n    const modalRef = useRef<HTMLDivElement>(null);\n\n    useFocusReturn(trapFocus);\n    useRemoveBodyScroll(trapFocus);\n    useAutoFocus(trapFocus, modalRef);\n\n    return (\n      <FocusLock childRef={modalRef} enabled={trapFocus}>\n        <Comp\n          ref={assignMultipleRefs(ref, modalRef)}\n          data-modal-container=\"\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          style={style}\n          tabIndex={0}\n          {...otherProps}\n        >\n          {children}\n        </Comp>\n      </FocusLock>\n    );\n  }\n);\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/Modal/Modal.tsx"],"names":["forwardRef","useRef","React","useAutoFocus","useFocusReturn","useRemoveBodyScroll","FocusLock","assignMultipleRefs","Modal","ref","as","Comp","children","trapFocus","style","otherProps","modalRef"],"mappings":";;AACA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,YAAT,EAAuBC,cAAvB,EAAuCC,mBAAvC,QAAkE,UAAlE;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAUA,OAAO,IAAMC,KAAK,gBAAGR,UAAU,CAC7B,gBAEES,GAFF,EAGK;AAAA,qBAFDC,EAEC;AAAA,MAFGC,IAEH,wBAFU,KAEV;AAAA,MAFiBC,QAEjB,QAFiBA,QAEjB;AAAA,4BAF2BC,SAE3B;AAAA,MAF2BA,SAE3B,+BAFuC,IAEvC;AAAA,wBAF6CC,KAE7C;AAAA,MAF6CA,KAE7C,2BAFqD,EAErD;AAAA,MAF4DC,UAE5D;;AACH,MAAMC,QAAQ,GAAGf,MAAM,CAAiB,IAAjB,CAAvB;AAEAG,EAAAA,cAAc,CAACS,SAAD,EAAYG,QAAZ,CAAd;AACAX,EAAAA,mBAAmB,CAACQ,SAAD,CAAnB;AACAV,EAAAA,YAAY,CAACU,SAAD,EAAYG,QAAZ,CAAZ;AAEA,sBACE,KAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,OAAO,EAAEH,SAAxC;AAAA,2BACE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEN,kBAAkB,CAACE,GAAD,EAAMO,QAAN,CADzB;AAEE,8BAAqB,EAFvB;AAGE,MAAA,IAAI,EAAC,QAHP;AAIE,oBAAW,MAJb;AAKE,MAAA,KAAK,EAAEF,KALT;AAME,MAAA,QAAQ,EAAE,CAAC;AANb,OAOMC,UAPN;AAAA,gBASGH;AATH;AADF,IADF;AAeD,CA1B4B,CAAxB","sourcesContent":["import type { ReactNode } from 'react';\nimport { forwardRef, useRef } from 'react';\nimport * as React from 'react';\n\nimport { useAutoFocus, useFocusReturn, useRemoveBodyScroll } from '../hooks';\nimport { FocusLock } from '../FocusLock';\nimport { assignMultipleRefs } from '../utils';\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: ReactNode;\n  style?: React.CSSProperties;\n  trapFocus?: boolean;\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    { as: Comp = 'div', children, trapFocus = true, style = {}, ...otherProps },\n    ref\n  ) => {\n    const modalRef = useRef<HTMLDivElement>(null);\n\n    useFocusReturn(trapFocus, modalRef);\n    useRemoveBodyScroll(trapFocus);\n    useAutoFocus(trapFocus, modalRef);\n\n    return (\n      <FocusLock childRef={modalRef} enabled={trapFocus}>\n        <Comp\n          ref={assignMultipleRefs(ref, modalRef)}\n          data-modal-container=\"\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          style={style}\n          tabIndex={-1}\n          {...otherProps}\n        >\n          {children}\n        </Comp>\n      </FocusLock>\n    );\n  }\n);\n"],"file":"Modal.js"}

package/build/esm/Modal/ModalBackdrop.d.ts

@@ -1,4 +1,4 @@
-import type * as React from 'react';
+import * as React from 'react';
 export interface ModalBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
     as?: React.ElementType<any>;
     innerAs?: React.ElementType<any>;

package/build/esm/Modal/ModalBackdrop.js

@@ -1,25 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { useRef, forwardRef } from 'react';
+import * as React from 'react';
 import { assignMultipleRefs } from '../utils/assignRef';
 import { wrapEvent } from '../utils/wrapEvent';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ModalBackdrop = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
-  let {
-    as: Comp = 'div',
-    onClose,
-    onClick,
-    onMouseDown,
-    onKeyDown,
-    disableCloseOnClick = false,
-    disableEscapeKeyDown = false
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, ["as", "onClose", "onClick", "onMouseDown", "onKeyDown", "disableCloseOnClick", "disableEscapeKeyDown"]);
-
-  const ref = useRef();
-  const mouseDownTargetRef = useRef(null);
-
-  const handleClick = e => {
+export var ModalBackdrop = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$as = _ref.as,
+      Comp = _ref$as === void 0 ? 'div' : _ref$as,
+      onClose = _ref.onClose,
+      onClick = _ref.onClick,
+      onMouseDown = _ref.onMouseDown,
+      onKeyDown = _ref.onKeyDown,
+      _ref$disableCloseOnCl = _ref.disableCloseOnClick,
+      disableCloseOnClick = _ref$disableCloseOnCl === void 0 ? false : _ref$disableCloseOnCl,
+      _ref$disableEscapeKey = _ref.disableEscapeKeyDown,
+      disableEscapeKeyDown = _ref$disableEscapeKey === void 0 ? false : _ref$disableEscapeKey,
+      otherProps = _objectWithoutProperties(_ref, ["as", "onClose", "onClick", "onMouseDown", "onKeyDown", "disableCloseOnClick", "disableEscapeKeyDown"]);
+
+  var ref = useRef();
+  var mouseDownTargetRef = useRef(null);
+
+  var handleClick = function handleClick(e) {
     // Ignore the events not coming from the "backdrop"
     // We don't want to close the dialog when clicking the dialog content.
     if (e.target !== e.currentTarget) {
@@ -36,11 +38,11 @@ export const ModalBackdrop = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     e.stopPropagation();
   };
 
-  const handleMouseDown = e => {
+  var handleMouseDown = function handleMouseDown(e) {
     mouseDownTargetRef.current = e.target;
   };
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Escape') {
       !disableEscapeKeyDown && (onClose == null ? void 0 : onClose());
       e.stopPropagation();