@basic-ui/core 0.0.28 → 0.0.32

package/build/cjs/index.js

@@ -1634,6 +1634,7 @@ const getTabblableNodes = parentNode => {
   return Array.from(parentNode.querySelectorAll(tabblable));
 };
 
+const focusLockStack = [];
 function useFocusLock(ref, opts) {
   const {
     enabled = true,
@@ -1641,28 +1642,41 @@ function useFocusLock(ref, opts) {
     lockEndRef
   } = opts;
   react.useEffect(() => {
-    if (enabled) {
+    const rootEl = ref.current;
+
+    if (enabled && rootEl) {
+      focusLockStack.push(rootEl);
+
       const listener = event => {
+        const isActiveFocusLock = focusLockStack[focusLockStack.length - 1] === rootEl;
+
+        if (!isActiveFocusLock) {
+          // Not the currently focused lock. Forget about it.
+          return;
+        }
+
         if (event.target === lockEndRef.current) {
-          ref.current && ref.current.focus();
+          rootEl.focus();
         } else if (event.target === lockStartRef.current) {
-          const nodes = getTabblableNodes(ref.current);
+          const nodes = getTabblableNodes(rootEl);
 
           if (nodes.length > 0) {
             const nodeToFocus = nodes.length - 1;
             nodes[nodeToFocus].focus();
           } else {
-            ref.current && ref.current.focus();
+            rootEl.focus();
           }
-        } else if (document !== event.target && ref.current && ref.current !== event.target && !ref.current.contains(event.target)) {
+        } else if (document !== event.target && rootEl !== event.target && !rootEl.contains(event.target)) {
           event.preventDefault();
-          ref.current.focus();
+          rootEl.focus();
         }
       };
 
       document.addEventListener('focusin', listener);
       return () => {
-        document.removeEventListener('focusin', listener);
+        document.removeEventListener('focusin', listener); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+        focusLockStack.pop();
       };
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
@@ -1733,7 +1747,6 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "open", "defaultOpen", "onChange"]);
 
-  const buttonIdRef = react.useRef();
   const menuListIdRef = react.useRef();
   const openWithArrowKeyRef = react.useRef(null);
   const buttonRef = react.useRef(null);
@@ -1741,9 +1754,7 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
     setState(isOpen);
   });
   menuListIdRef.current = useId();
-  buttonIdRef.current = useId();
   const value = {
-    buttonIdRef,
     menuListIdRef,
     openWithArrowKeyRef,
     open,
@@ -1770,19 +1781,20 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
 
   const {
     menuListIdRef,
-    buttonIdRef,
     openWithArrowKeyRef,
     open,
     buttonRef,
     onChange
   } = useMenuContext();
-  buttonIdRef.current = preferredId || buttonIdRef.current;
+  const buttonId = useId(preferredId);
 
   const handleKeyDown = e => {
     if (disabled) {
       return;
     }
 
+    buttonRef.current = e.currentTarget;
+
     const isArrowKey = () => ['ArrowUp', 'ArrowDown'].includes(e.key);
 
     const isEnterKey = () => [' ', 'Enter'].includes(e.key);
@@ -1805,12 +1817,13 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
       return;
     }
 
+    buttonRef.current = e.currentTarget;
     onChange && onChange(e, !open);
   };
 
   return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
-    ref: assignMultipleRefs(forwardedRef, buttonRef),
-    id: buttonIdRef.current,
+    ref: forwardedRef,
+    id: buttonId,
     role: "button",
     type: "button",
     "aria-haspopup": true,
@@ -1894,6 +1907,8 @@ function queryScope(type, props) {
 
 const useEnhancedEffect$1 = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwardedRef) {
+  var _buttonRef$current3;
+
   const {
     as: Comp = 'ul',
     onKeyDown,
@@ -1904,7 +1919,6 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
 
   const {
     menuListIdRef,
-    buttonIdRef,
     buttonRef,
     onChange,
     openWithArrowKeyRef,
@@ -1944,7 +1958,9 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     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);
     }
 
@@ -1956,12 +1972,12 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       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;
         }
 
@@ -2046,7 +2062,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       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)
@@ -2998,9 +3014,10 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedR
   const {
     as: Comp = 'div',
     innerAs,
-    children
+    children,
+    disabled = false
   } = props,
-        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "children"]);
+        otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "innerAs", "children", "disabled"]);
 
   const child = react.Children.only(children);
   const [childProps, _ref] = useTooltip(child.props, child.ref, otherProps);
@@ -3010,6 +3027,12 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(props, forwardedR
   } = _ref,
         tooltipProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["visible"]);
 
+  if (disabled) {
+    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: child
+    });
+  }
+
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/react.cloneElement(child, childProps), visible && /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
       as: innerAs,