@basic-ui/core 0.0.28 → 0.0.32

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Menu/MenuButton.tsx"],"names":["forwardRef","useMenuContext","wrapEvent","assignMultipleRefs","MenuButton","props","forwardedRef","as","Comp","id","preferredId","onClick","onKeyDown","disabled","otherProps","menuListIdRef","buttonIdRef","openWithArrowKeyRef","open","buttonRef","onChange","current","handleKeyDown","e","isArrowKey","includes","key","isEnterKey","openedWithArrow","preventDefault","handleClick","undefined"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAYA,OAAO,MAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AACvC,QAAM;AACJC,IAAAA,EAAE,EAAEC,IAAI,GAAG,QADP;AAEJC,IAAAA,EAAE,EAAEC,WAFA;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA;AALI,MAOFR,KAPJ;AAAA,QAMKS,UANL,iCAOIT,KAPJ;;AAQA,QAAM;AACJU,IAAAA,aADI;AAEJC,IAAAA,WAFI;AAGJC,IAAAA,mBAHI;AAIJC,IAAAA,IAJI;AAKJC,IAAAA,SALI;AAMJC,IAAAA;AANI,MAOFnB,cAAc,EAPlB;AASAe,EAAAA,WAAW,CAACK,OAAZ,GAAsBX,WAAW,IAAIM,WAAW,CAACK,OAAjD;;AAEA,QAAMC,aAAa,GAAIC,CAAD,IAA+C;AACnE,QAAIV,QAAJ,EAAc;AACZ;AACD;;AAED,UAAMW,UAAU,GAAG,MAAM,CAAC,SAAD,EAAY,WAAZ,EAAyBC,QAAzB,CAAkCF,CAAC,CAACG,GAApC,CAAzB;;AACA,UAAMC,UAAU,GAAG,MAAM,CAAC,GAAD,EAAM,OAAN,EAAeF,QAAf,CAAwBF,CAAC,CAACG,GAA1B,CAAzB;;AAEA,UAAME,eAAe,GAAGJ,UAAU,EAAlC;;AACA,QAAII,eAAe,IAAID,UAAU,EAAjC,EAAqC;AACnC,UAAIC,eAAJ,EAAqB;AACnB;AACAX,QAAAA,mBAAmB,CAACI,OAApB,GAA8BE,CAAC,CAACG,GAAhC;AACD;;AACDN,MAAAA,QAAQ,IAAIA,QAAQ,CAACG,CAAD,EAAI,IAAJ,CAApB;AACAA,MAAAA,CAAC,CAACM,cAAF;AACD;AACF,GAjBD;;AAmBA,QAAMC,WAAW,GAAIP,CAAD,IAA4C;AAC9D,QAAIV,QAAJ,EAAc;AACZ;AACD;;AAEDO,IAAAA,QAAQ,IAAIA,QAAQ,CAACG,CAAD,EAAI,CAACL,IAAL,CAApB;AACD,GAND;;AAQA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAEf,kBAAkB,CAACG,YAAD,EAAea,SAAf,CADzB;AAEE,IAAA,EAAE,EAAEH,WAAW,CAACK,OAFlB;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,IAAA,IAAI,EAAC,QAJP;AAKE,qBAAe,IALjB;AAME,qBAAeN,aAAa,CAACM,OAN/B;AAOE,qBAAeH,IAAI,GAAG,IAAH,GAAUa,SAP/B;AAQE,wBAAiB,EARnB;AASE,IAAA,OAAO,EAAE7B,SAAS,CAACS,OAAD,EAAUmB,WAAV,CATpB;AAUE,IAAA,SAAS,EAAE5B,SAAS,CAACU,SAAD,EAAYU,aAAZ,CAVtB;AAWE,IAAA,QAAQ,EAAET;AAXZ,KAYMC,UAZN,EADF;AAgBD,CAhEiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { assignMultipleRefs } from '../utils';\n\nexport type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onClick?: (\n    e:\n      | React.MouseEvent<HTMLButtonElement>\n      | React.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 {\n      menuListIdRef,\n      buttonIdRef,\n      openWithArrowKeyRef,\n      open,\n      buttonRef,\n      onChange,\n    } = useMenuContext();\n\n    buttonIdRef.current = preferredId || buttonIdRef.current;\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\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: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      onChange && onChange(e, !open);\n    };\n\n    return (\n      <Comp\n        ref={assignMultipleRefs(forwardedRef, buttonRef)}\n        id={buttonIdRef.current}\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"],"file":"MenuButton.js"}
+{"version":3,"sources":["../../../src/Menu/MenuButton.tsx"],"names":["forwardRef","useMenuContext","wrapEvent","useId","MenuButton","props","forwardedRef","as","Comp","id","preferredId","onClick","onKeyDown","disabled","otherProps","menuListIdRef","openWithArrowKeyRef","open","buttonRef","onChange","buttonId","handleKeyDown","e","current","currentTarget","isArrowKey","includes","key","isEnterKey","openedWithArrow","preventDefault","handleClick","undefined"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,cAAT,QAA+B,WAA/B;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,KAAT,QAAsB,UAAtB;;AAYA,OAAO,MAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AACvC,QAAM;AACJC,IAAAA,EAAE,EAAEC,IAAI,GAAG,QADP;AAEJC,IAAAA,EAAE,EAAEC,WAFA;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA;AALI,MAOFR,KAPJ;AAAA,QAMKS,UANL,iCAOIT,KAPJ;;AAQA,QAAM;AACJU,IAAAA,aADI;AAEJC,IAAAA,mBAFI;AAGJC,IAAAA,IAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA;AALI,MAMFlB,cAAc,EANlB;AAQA,QAAMmB,QAAQ,GAAGjB,KAAK,CAACO,WAAD,CAAtB;;AAEA,QAAMW,aAAa,GAAIC,CAAD,IAA+C;AACnE,QAAIT,QAAJ,EAAc;AACZ;AACD;;AACDK,IAAAA,SAAS,CAACK,OAAV,GAAoBD,CAAC,CAACE,aAAtB;;AAEA,UAAMC,UAAU,GAAG,MAAM,CAAC,SAAD,EAAY,WAAZ,EAAyBC,QAAzB,CAAkCJ,CAAC,CAACK,GAApC,CAAzB;;AACA,UAAMC,UAAU,GAAG,MAAM,CAAC,GAAD,EAAM,OAAN,EAAeF,QAAf,CAAwBJ,CAAC,CAACK,GAA1B,CAAzB;;AAEA,UAAME,eAAe,GAAGJ,UAAU,EAAlC;;AACA,QAAII,eAAe,IAAID,UAAU,EAAjC,EAAqC;AACnC,UAAIC,eAAJ,EAAqB;AACnB;AACAb,QAAAA,mBAAmB,CAACO,OAApB,GAA8BD,CAAC,CAACK,GAAhC;AACD;;AACDR,MAAAA,QAAQ,IAAIA,QAAQ,CAACG,CAAD,EAAI,IAAJ,CAApB;AACAA,MAAAA,CAAC,CAACQ,cAAF;AACD;AACF,GAlBD;;AAoBA,QAAMC,WAAW,GAAIT,CAAD,IAA4C;AAC9D,QAAIT,QAAJ,EAAc;AACZ;AACD;;AACDK,IAAAA,SAAS,CAACK,OAAV,GAAoBD,CAAC,CAACE,aAAtB;AAEAL,IAAAA,QAAQ,IAAIA,QAAQ,CAACG,CAAD,EAAI,CAACL,IAAL,CAApB;AACD,GAPD;;AASA,sBACE,KAAC,IAAD;AACE,IAAA,GAAG,EAAEX,YADP;AAEE,IAAA,EAAE,EAAEc,QAFN;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,IAAA,IAAI,EAAC,QAJP;AAKE,qBAAe,IALjB;AAME,qBAAeL,aAAa,CAACQ,OAN/B;AAOE,qBAAeN,IAAI,GAAG,IAAH,GAAUe,SAP/B;AAQE,wBAAiB,EARnB;AASE,IAAA,OAAO,EAAE9B,SAAS,CAACS,OAAD,EAAUoB,WAAV,CATpB;AAUE,IAAA,SAAS,EAAE7B,SAAS,CAACU,SAAD,EAAYS,aAAZ,CAVtB;AAWE,IAAA,QAAQ,EAAER;AAXZ,KAYMC,UAZN,EADF;AAgBD,CAjEiC,CAA7B","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport { useMenuContext } from './context';\nimport { wrapEvent } from '../utils/wrapEvent';\nimport { useId } from '../hooks';\n\nexport type MenuButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  onClick?: (\n    e:\n      | React.MouseEvent<HTMLButtonElement>\n      | React.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 {\n      menuListIdRef,\n      openWithArrowKeyRef,\n      open,\n      buttonRef,\n      onChange,\n    } = useMenuContext();\n\n    const buttonId = useId(preferredId);\n\n    const handleKeyDown = (e: React.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: React.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"],"file":"MenuButton.js"}

package/build/esm/Menu/MenuList.js

@@ -10,6 +10,8 @@ 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 _buttonRef$current3;
+
   const {
     as: Comp = 'ul',
     onKeyDown,
@@ -20,7 +22,6 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
 
   const {
     menuListIdRef,
-    buttonIdRef,
     buttonRef,
     onChange,
     openWithArrowKeyRef,
@@ -60,7 +61,9 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
     setMounted(true);
   }, [mounted, navigationItem, onNavigate, openWithArrowKeyRef, scope, defaultActiveItemValue]);
   useOnClickOutside(menuListRef, e => {
-    if (e.target !== buttonRef.current) {
+    var _buttonRef$current;
+
+    if (e.target instanceof HTMLElement && e.target !== buttonRef.current && !((_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(e.target))) {
       onChange && onChange(e, false);
     }
 
@@ -72,12 +75,12 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
       case 'Escape':
       case 'Tab':
         {
-          var _buttonRef$current;
+          var _buttonRef$current2;
 
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
-          (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.focus();
+          (_buttonRef$current2 = buttonRef.current) == null ? void 0 : _buttonRef$current2.focus();
           break;
         }
 
@@ -162,7 +165,7 @@ export const MenuList = /*#__PURE__*/forwardRef(function MenuList(props, forward
       ref: assignMultipleRefs(forwardedRef, menuListRef),
       id: menuListIdRef.current,
       role: "menu",
-      "aria-labelledby": buttonIdRef.current,
+      "aria-labelledby": (_buttonRef$current3 = buttonRef.current) == null ? void 0 : _buttonRef$current3.id,
       "data-menu-list": "",
       tabIndex: "-1",
       onKeyDown: wrapEvent(onKeyDown, handleKeyDown)

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","buttonIdRef","buttonRef","onChange","openWithArrowKeyRef","open","navigationItem","setNavigationItem","mounted","setMounted","menuListRef","scope","onNavigate","el","focus","current","allItems","queryAllNodes","index","length","i","dataset","value","e","target","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      buttonIdRef,\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 (e.target !== buttonRef.current) {\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={buttonIdRef.current}\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","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"}

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

@@ -5,7 +5,6 @@ export declare type ItemObject = {
     id: string | undefined;
 };
 export interface MenuContextProps {
-    buttonIdRef: MutableRefObject<undefined | string>;
     buttonRef: MutableRefObject<HTMLButtonElement | null>;
     menuListIdRef: MutableRefObject<undefined | string>;
     openWithArrowKeyRef: MutableRefObject<string | null>;

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;AAoBA,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  buttonIdRef: MutableRefObject<undefined | string>;\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","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"}

package/build/esm/Tooltip/Tooltip.d.ts

@@ -5,5 +5,6 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     innerAs?: React.ElementType<any>;
     children?: React.ReactNode;
     label: React.ReactNode;
+    disabled?: boolean;
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/Tooltip/Tooltip.js

@@ -2,16 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import React, { forwardRef, cloneElement, Children } from 'react';
 import { useTooltip } from './useTooltip';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, forwardedRef) {
   const {
     as: Comp = 'div',
     innerAs,
-    children
+    children,
+    disabled = false
   } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "innerAs", "children"]);
+        otherProps = _objectWithoutPropertiesLoose(props, ["as", "innerAs", "children", "disabled"]);
 
   const child = Children.only(children);
   const [childProps, _ref] = useTooltip(child.props, child.ref, otherProps);
@@ -21,6 +22,12 @@ export const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, forwarded
   } = _ref,
         tooltipProps = _objectWithoutPropertiesLoose(_ref, ["visible"]);
 
+  if (disabled) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: child
+    });
+  }
+
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/cloneElement(child, childProps), visible && /*#__PURE__*/_jsx(Comp, _extends({
       as: innerAs,

package/build/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tooltip/Tooltip.tsx"],"names":["React","forwardRef","cloneElement","Children","useTooltip","Tooltip","props","forwardedRef","as","Comp","innerAs","children","otherProps","child","only","childProps","ref","visible","tooltipProps"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,YAFF,EAGEC,QAHF,QAMO,OANP;AAOA,SAASC,UAAT,QAA2B,cAA3B;;;;AAUA,OAAO,MAAMC,OAAO,gBAAGJ,UAAU,CAC/B,SAASI,OAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAsC;AACpC,QAAM;AAAEC,IAAAA,EAAE,EAAEC,IAAI,GAAG,KAAb;AAAoBC,IAAAA,OAApB;AAA6BC,IAAAA;AAA7B,MAAyDL,KAA/D;AAAA,QAAgDM,UAAhD,iCAA+DN,KAA/D;;AACA,QAAMO,KAAwC,GAAGV,QAAQ,CAACW,IAAT,CAC/CH,QAD+C,CAAjD;AAGA,QAAM,CAACI,UAAD,UAA6CX,UAAU,CAC3DS,KAAK,CAACP,KADqD,EAE3DO,KAAK,CAACG,GAFqD,EAG3DJ,UAH2D,CAA7D;;AALoC,QAKjB;AAAEK,IAAAA;AAAF,GALiB;AAAA,QAKHC,YALG;;AAWpC,sBACE;AAAA,4BACGhB,YAAY,CAACW,KAAD,EAAQE,UAAR,CADf,EAEGE,OAAO,iBAAI,KAAC,IAAD;AAAM,MAAA,EAAE,EAAEP,OAAV;AAAmB,MAAA,GAAG,EAAEH;AAAxB,OAA0CW,YAA1C,EAFd;AAAA,IADF;AAMD,CAlB8B,CAA1B","sourcesContent":["import React, {\n  forwardRef,\n  cloneElement,\n  Children,\n  ReactElement,\n  RefAttributes,\n} from 'react';\nimport { useTooltip } from './useTooltip';\nexport type { InjectedTooltipProps } from './useTooltip';\n\nexport interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: React.ReactNode;\n  label: React.ReactNode;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, forwardedRef) {\n    const { as: Comp = 'div', innerAs, children, ...otherProps } = props;\n    const child: ReactElement & RefAttributes<any> = Children.only(\n      children\n    ) as any;\n    const [childProps, { visible, ...tooltipProps }] = useTooltip(\n      child.props,\n      child.ref,\n      otherProps\n    );\n\n    return (\n      <>\n        {cloneElement(child, childProps)}\n        {visible && <Comp as={innerAs} ref={forwardedRef} {...tooltipProps} />}\n      </>\n    );\n  }\n);\n"],"file":"Tooltip.js"}
+{"version":3,"sources":["../../../src/Tooltip/Tooltip.tsx"],"names":["React","forwardRef","cloneElement","Children","useTooltip","Tooltip","props","forwardedRef","as","Comp","innerAs","children","disabled","otherProps","child","only","childProps","ref","visible","tooltipProps"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,UADF,EAEEC,YAFF,EAGEC,QAHF,QAMO,OANP;AAOA,SAASC,UAAT,QAA2B,cAA3B;;;;AAWA,OAAO,MAAMC,OAAO,gBAAGJ,UAAU,CAC/B,SAASI,OAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAsC;AACpC,QAAM;AACJC,IAAAA,EAAE,EAAEC,IAAI,GAAG,KADP;AAEJC,IAAAA,OAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAAQ,GAAG;AAJP,MAMFN,KANJ;AAAA,QAKKO,UALL,iCAMIP,KANJ;;AAOA,QAAMQ,KAAwC,GAAGX,QAAQ,CAACY,IAAT,CAC/CJ,QAD+C,CAAjD;AAGA,QAAM,CAACK,UAAD,UAA6CZ,UAAU,CAC3DU,KAAK,CAACR,KADqD,EAE3DQ,KAAK,CAACG,GAFqD,EAG3DJ,UAH2D,CAA7D;;AAXoC,QAWjB;AAAEK,IAAAA;AAAF,GAXiB;AAAA,QAWHC,YAXG;;AAiBpC,MAAIP,QAAJ,EAAc;AACZ,wBAAO;AAAA,gBAAGE;AAAH,MAAP;AACD;;AAED,sBACE;AAAA,4BACGZ,YAAY,CAACY,KAAD,EAAQE,UAAR,CADf,EAEGE,OAAO,iBAAI,KAAC,IAAD;AAAM,MAAA,EAAE,EAAER,OAAV;AAAmB,MAAA,GAAG,EAAEH;AAAxB,OAA0CY,YAA1C,EAFd;AAAA,IADF;AAMD,CA5B8B,CAA1B","sourcesContent":["import React, {\n  forwardRef,\n  cloneElement,\n  Children,\n  ReactElement,\n  RefAttributes,\n} from 'react';\nimport { useTooltip } from './useTooltip';\nexport type { InjectedTooltipProps } from './useTooltip';\n\nexport interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType<any>;\n  innerAs?: React.ElementType<any>;\n  children?: React.ReactNode;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, forwardedRef) {\n    const {\n      as: Comp = 'div',\n      innerAs,\n      children,\n      disabled = false,\n      ...otherProps\n    } = props;\n    const child: ReactElement & RefAttributes<any> = Children.only(\n      children\n    ) as any;\n    const [childProps, { visible, ...tooltipProps }] = useTooltip(\n      child.props,\n      child.ref,\n      otherProps\n    );\n\n    if (disabled) {\n      return <>{child}</>;\n    }\n\n    return (\n      <>\n        {cloneElement(child, childProps)}\n        {visible && <Comp as={innerAs} ref={forwardedRef} {...tooltipProps} />}\n      </>\n    );\n  }\n);\n"],"file":"Tooltip.js"}

package/build/esm/hooks/useId.d.ts

@@ -1,2 +1,3 @@
 export declare function useId(): string | undefined;
 export declare function useId(preferredId: string): string;
+export declare function useId(preferredId: string | undefined): string | undefined;

package/build/esm/hooks/useId.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useId.ts"],"names":["useEffect","useState","id","genId","useId","preferredId","setId"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC,C,CAEA;AACA;AACA;AACA;AACA;;AACA,IAAIC,EAAE,GAAG,CAAT;;AACA,MAAMC,KAAK,GAAG,gBAAS,EAAED,EAAX,CAAd;;AAIA,OAAO,SAASE,KAAT,CAAeC,WAAf,EAAyD;AAC9D,QAAM,CAACH,EAAD,EAAKI,KAAL,IAAcL,QAAQ,CAAqBI,WAArB,CAA5B;AACAL,EAAAA,SAAS,CAAC,MAAMM,KAAK,CAACH,KAAK,EAAN,CAAZ,EAAuB,EAAvB,CAAT;AACA,SAAOD,EAAP;AACD","sourcesContent":["import { useEffect, useState } from 'react';\n\n// Could use UUID but if we hit 9,007,199,254,740,991 unique components over\n// the lifetime of the app before it gets reloaded, I mean ... come on.\n// I don't even know what xillion that is.\n// /me googles\n// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.\nlet id = 0;\nconst genId = () => `${++id}`;\n\nexport function useId(): string | undefined;\nexport function useId(preferredId: string): string;\nexport function useId(preferredId?: string): string | undefined {\n  const [id, setId] = useState<string | undefined>(preferredId);\n  useEffect(() => setId(genId()), []);\n  return id;\n}\n"],"file":"useId.js"}
+{"version":3,"sources":["../../../src/hooks/useId.ts"],"names":["useEffect","useState","id","genId","useId","preferredId","setId"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,QAApB,QAAoC,OAApC,C,CAEA;AACA;AACA;AACA;AACA;;AACA,IAAIC,EAAE,GAAG,CAAT;;AACA,MAAMC,KAAK,GAAG,gBAAS,EAAED,EAAX,CAAd;;AAKA,OAAO,SAASE,KAAT,CAAeC,WAAf,EAAyD;AAC9D,QAAM,CAACH,EAAD,EAAKI,KAAL,IAAcL,QAAQ,CAAqBI,WAArB,CAA5B;AACAL,EAAAA,SAAS,CAAC,MAAMM,KAAK,CAACH,KAAK,EAAN,CAAZ,EAAuB,EAAvB,CAAT;AACA,SAAOD,EAAP;AACD","sourcesContent":["import { useEffect, useState } from 'react';\n\n// Could use UUID but if we hit 9,007,199,254,740,991 unique components over\n// the lifetime of the app before it gets reloaded, I mean ... come on.\n// I don't even know what xillion that is.\n// /me googles\n// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.\nlet id = 0;\nconst genId = () => `${++id}`;\n\nexport function useId(): string | undefined;\nexport function useId(preferredId: string): string;\nexport function useId(preferredId: string | undefined): string | undefined;\nexport function useId(preferredId?: string): string | undefined {\n  const [id, setId] = useState<string | undefined>(preferredId);\n  useEffect(() => setId(genId()), []);\n  return id;\n}\n"],"file":"useId.js"}

package/build/tsconfig.tsbuildinfo

@@ -222,8 +222,8 @@
         "affectsGlobalScope": false
       },
       "../src/hooks/useId.ts": {
-        "version": "3aff8f1b9d28a3f133f11ea23c9aa7e83dc051f0557c1a47bf5a27513a9359ba",
-        "signature": "5f753254eec61774a16b087084c079d71fb3ed3e94fdec26d73bd554f3745694",
+        "version": "1a7828479e27b318235c2f8a8e191e2edea9699f0acf9187a539fd3e615217fd",
+        "signature": "d0039ab8d0f11055fe9b2797bce2c23bff51da16208a37b3468a053375f899c6",
         "affectsGlobalScope": false
       },
       "../src/hooks/useOnClickOutside.ts": {
@@ -377,7 +377,7 @@
         "affectsGlobalScope": false
       },
       "../src/FocusLock/useFocusLock.ts": {
-        "version": "6af3eeda5891692678d5eb525846aeea71bb74a4e7a604e54699268047156cd5",
+        "version": "2e745a2d3bc594f57ee246139928d964f911bee65a600962b29e4d6ff4bc8bb9",
         "signature": "0e995946ab172b19c89aa7cae99b3621caf512baf3329b498af4ea5815364bd6",
         "affectsGlobalScope": false
       },
@@ -392,17 +392,17 @@
         "affectsGlobalScope": false
       },
       "../src/Menu/context.ts": {
-        "version": "87a8f14255b6c1f0d7ff9544bec2b72c9d9dc9c596c2a8ad2638429835e572f0",
-        "signature": "dd617fc2bf1dfc2b927ea0057d78011d45691aa611e0a19571f0763359c958d9",
+        "version": "98e1e4b4a113aa179de7b3540dffc374df0c464a2166a06fd2ea44b7cb0cb21c",
+        "signature": "0b45fab4552426ea20b40f69ba47bc1e4fbc01d3baf52cec4a155c002ac4d301",
         "affectsGlobalScope": false
       },
       "../src/Menu/Menu.tsx": {
-        "version": "c456fbbaacddef01aba571bd24cd345332f99331196195391ae5a918b280b97a",
+        "version": "25bb03d525ae49b2b3b1867fb29df3d2d438c7ca63da8b56b4d556f2f07702cb",
         "signature": "de10bde1e882e042e2a6622b8cd3cc0b537677d8e78295e3d4d17b4492cbf8ef",
         "affectsGlobalScope": false
       },
       "../src/Menu/MenuButton.tsx": {
-        "version": "b297806c4dcc5a26e1293a77d2d771dd24fe83343077b9f2e1a75c0ec2c8bb46",
+        "version": "4e542d0919ebf866e3bb668062328ee4b4abe3ed2a9e9070f20315a25a874a43",
         "signature": "c6e623e83418f6aa4970466032bef7ad0f9224f9137fde0633af29af5f352f96",
         "affectsGlobalScope": false
       },
@@ -417,7 +417,7 @@
         "affectsGlobalScope": false
       },
       "../src/Menu/MenuList.tsx": {
-        "version": "dbf67ebb277a3cf2bcafe01b4b09f1874c545f3e223d43cfbea713e5bad7b9a2",
+        "version": "5dd9324e4ff07cd1b88d4df006aaaf96e78c93a4c9ff5e8fcef1de6ef379d992",
         "signature": "6a91df64c0e2f254a1b2d91dc53dca3b254365386a92e41c31e4171b06b5394c",
         "affectsGlobalScope": false
       },
@@ -667,8 +667,8 @@
         "affectsGlobalScope": false
       },
       "../src/Tooltip/Tooltip.tsx": {
-        "version": "bf5ffe2d730baba8e9dfcc42c5df71332a824400b939622d58ffa6e8084e9fde",
-        "signature": "c3ecbe9381c1aeeeef3343dd37ad2b80f8cc7fa2238ff8dd7ac60561587ee4af",
+        "version": "14279edaf9fca3ea5c1b5343281d6faea57697c15b21ec1447c3ca066d2d607d",
+        "signature": "7fddbed0e18f235aee9a915c705119570cc946ac13c740a64f2e0493690ee5e7",
         "affectsGlobalScope": false
       },
       "../src/Tooltip/index.ts": {
@@ -3768,7 +3768,7 @@
         "../../../node_modules/@types/node/util.d.ts",
         "../../../node_modules/@types/react/index.d.ts",
         "../src/Menu/context.ts",
-        "../src/utils/index.ts",
+        "../src/hooks/index.ts",
         "../src/utils/wrapEvent.ts"
       ],
       "../src/Menu/MenuItem.tsx": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/core",
-  "version": "0.0.28",
+  "version": "0.0.32",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -10,7 +10,8 @@
   "jsnext:main": "./build/esm/index.js",
   "types": "./build/esm/index.d.ts",
   "files": [
-    "/build"
+    "/build",
+    "/src"
   ],
   "sideEffects": false,
   "scripts": {
@@ -36,5 +37,5 @@
     "react": ">=16.14.0 || >=17.0.0",
     "react-dom": ">=16.14.0 || >=17.0.0"
   },
-  "gitHead": "4c51654a7aee5da72a9a716a86f10d3127002391"
+  "gitHead": "5d730ab4bfea19ceb7fb52d09139c81cb4c3863f"
 }

package/src/Accordion/Accordion.story.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from './';
+import { storiesOf } from '@storybook/react';
+import './styles.css';
+
+const stories = storiesOf('Components/Accordion', module);
+
+function AccordionControlled() {
+  const [expandedId, setExpandedId] = useState(0);
+
+  return (
+    <Accordion
+      expandedIndex={expandedId}
+      onChange={(e, idx) => setExpandedId(idx)}
+    >
+      <AccordionItem>
+        <AccordionHeader>Personal information</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="name" />
+          <input type="text" placeholder="email" />
+          <input type="text" placeholder="phone" />
+          <input type="text" placeholder="extension" />
+          <input type="text" placeholder="country" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Billing address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionHeader>Shipping address</AccordionHeader>
+        <AccordionBody>
+          <input type="text" placeholder="address" />
+          <input type="text" placeholder="address 2" />
+          <input type="text" placeholder="city" />
+          <input type="text" placeholder="state" />
+          <input type="text" placeholder="zip code" />
+        </AccordionBody>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+
+function SingleAccordionItem() {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <AccordionItem
+      expanded={expanded}
+      onChange={(e, value) => setExpanded(value)}
+    >
+      <AccordionHeader>Personal information</AccordionHeader>
+      <AccordionBody>
+        <input type="text" placeholder="name" />
+        <input type="text" placeholder="email" />
+        <input type="text" placeholder="phone" />
+        <input type="text" placeholder="extension" />
+        <input type="text" placeholder="country" />
+      </AccordionBody>
+    </AccordionItem>
+  );
+}
+
+stories.add('controlled', () => <AccordionControlled />);
+
+stories.add('single accordion, controlled', () => <SingleAccordionItem />);

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, useRef, useState } from 'react';
+import type * as React from 'react';
+import { AccordionContextProps, AccordionProvider } from './context';
+import { useScope } from '../hooks';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+  children?: React.ReactNode;
+  expandedIndex?: number;
+  onChange?: (
+    e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      expandedIndex = -1,
+      onChange,
+      ...otherProps
+    } = props;
+    const [childrenHeaderHasFocus, setChildrenHeaderHasFocus] = useState(false);
+    const ref = useRef<HTMLDivElement>();
+
+    const scope = useScope(ref);
+
+    const contextValue: AccordionContextProps = {
+      childrenHeaderHasFocus,
+      setChildrenHeaderHasFocus,
+      scope,
+      expandedIndex,
+      onChange,
+    };
+
+    return (
+      <AccordionProvider value={contextValue}>
+        <Comp
+          ref={assignMultipleRefs(forwardedRef, ref)}
+          {...otherProps}
+          data-accordion-root=""
+          data-children-has-focus={childrenHeaderHasFocus}
+        />
+      </AccordionProvider>
+    );
+  }
+);

package/src/Accordion/AccordionBody.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, useState, useEffect, useRef } from 'react';
+import type * as React from 'react';
+import { useAccordionItemContext, useAccordionContext } from './context';
+import { bodyScopeQuery as scopeQuery } from './scopeQuery';
+import { assignMultipleRefs } from '../utils';
+
+export interface AccordionBodyProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  as?: React.ElementType<any>;
+  innerAs?: React.ElementType<any>;
+}
+
+export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
+  function AccordionBody(props, forwardedRef) {
+    const { as: Comp = 'div', ...otherProps } = props;
+    const accordionItemContext = useAccordionItemContext();
+    const accordionContext = useAccordionContext();
+    const ref = useRef<HTMLDivElement>();
+    const [index, setIndex] = useState<number>();
+
+    if (!accordionItemContext) {
+      throw new Error('Missing parent <Accordion /> component');
+    }
+
+    useEffect(() => {
+      if (accordionContext) {
+        const allHeaders = accordionContext.scope.current.queryAllNodes(
+          scopeQuery
+        );
+
+        const index = allHeaders.findIndex((e) => e === ref.current);
+        setIndex(index);
+      }
+    }, [accordionContext]);
+
+    const expanded = Boolean(
+      accordionItemContext.expanded ||
+        (accordionContext && accordionContext.expandedIndex === index)
+    );
+
+    return (
+      <Comp
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        {...otherProps}
+        aria-labelledby={accordionItemContext.headerId}
+        id={accordionItemContext.bodyId}
+        role="region"
+        data-accordion-body=""
+        hidden={expanded ? undefined : 'hidden'}
+      />
+    );
+  }
+);