@basic-ui/core 0.0.29 → 0.0.33

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
 
@@ -1893,7 +1907,7 @@ 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$current2;
+  var _buttonRef$current3;
 
   const {
     as: Comp = 'ul',
@@ -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": (_buttonRef$current2 = buttonRef.current) == null ? void 0 : _buttonRef$current2.id,
+      "aria-labelledby": (_buttonRef$current3 = buttonRef.current) == null ? void 0 : _buttonRef$current3.id,
       "data-menu-list": "",
       tabIndex: "-1",
       onKeyDown: wrapEvent(onKeyDown, handleKeyDown)
@@ -2739,7 +2755,7 @@ let restTimeout;
 function startRestTimer() {
   window.clearTimeout(restTimeout);
   restTimeout = window.setTimeout(() => {
-    send(TooltipEventTypes.Rest, undefined);
+    send(Rest, undefined);
   }, 200);
 }
 
@@ -2752,7 +2768,7 @@ let leavingVisibleTimer;
 
 function startLeavingVisibleTimer() {
   window.clearTimeout(leavingVisibleTimer);
-  leavingVisibleTimer = window.setTimeout(() => send(TooltipEventTypes.TimeComplete, undefined), 100);
+  leavingVisibleTimer = window.setTimeout(() => send(TimeComplete, undefined), 100);
 }
 
 function clearLeavingVisibleTimer() {
@@ -2761,35 +2777,31 @@ function clearLeavingVisibleTimer() {
 // State machine
 
 
-let TooltipStates;
+// Nothing goin' on
+const Idle = 'IDLE'; // We're considering showing the tooltip, but we're gonna wait a sec
 
-(function (TooltipStates) {
-  TooltipStates["Idle"] = "IDLE";
-  TooltipStates["Focused"] = "FOCUSED";
-  TooltipStates["Visible"] = "VISIBLE";
-  TooltipStates["LeavingVisible"] = "LEAVING_VISIBLE";
-  TooltipStates["Dismissed"] = "DISMISSED";
-})(TooltipStates || (TooltipStates = {}));
+const Focused = 'FOCUSED'; // It's on!
 
-let TooltipEventTypes;
+const Visible = 'VISIBLE'; // Focus has left, but we want to keep it visible for a sec
 
-(function (TooltipEventTypes) {
-  TooltipEventTypes["Blur"] = "BLUR";
-  TooltipEventTypes["Focus"] = "FOCUS";
-  TooltipEventTypes["GlobalMouseMove"] = "GLOBAL_MOUSE_MOVE";
-  TooltipEventTypes["MouseDown"] = "MOUSE_DOWN";
-  TooltipEventTypes["MouseEnter"] = "MOUSE_ENTER";
-  TooltipEventTypes["MouseLeave"] = "MOUSE_LEAVE";
-  TooltipEventTypes["MouseMove"] = "MOUSE_MOVE";
-  TooltipEventTypes["Rest"] = "REST";
-  TooltipEventTypes["SelectWithKeyboard"] = "SELECT_WITH_KEYBOARD";
-  TooltipEventTypes["TimeComplete"] = "TIME_COMPLETE";
-})(TooltipEventTypes || (TooltipEventTypes = {}));
+const LeavingVisible = 'LEAVING_VISIBLE'; // The user clicked the tool, so we want to hide the thing, we can't just use
+// IDLE because we need to ignore mousemove, etc.
 
+const Dismissed = 'DISMISSED';
+const Blur = 'BLUR';
+const Focus = 'FOCUS';
+const GlobalMouseMove = 'GLOBAL_MOUSE_MOVE';
+const MouseDown = 'MOUSE_DOWN';
+const MouseEnter = 'MOUSE_ENTER';
+const MouseLeave = 'MOUSE_LEAVE';
+const MouseMove = 'MOUSE_MOVE';
+const Rest = 'REST';
+const SelectWithKeyboard = 'SELECT_WITH_KEYBOARD';
+const TimeComplete = 'TIME_COMPLETE';
 const subscription = createSubscription();
 const state = {
   current: {
-    state: TooltipStates.Idle,
+    state: Idle,
     id: ''
   }
 };
@@ -2799,40 +2811,40 @@ function clearContextId() {
 }
 
 const chart = {
-  initial: TooltipStates.Idle,
+  initial: Idle,
   states: {
-    [TooltipStates.Idle]: {
+    [Idle]: {
       enter: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible
+        [MouseEnter]: Focused,
+        [Focus]: Visible
       }
     },
-    [TooltipStates.Focused]: {
+    [Focused]: {
       enter: startRestTimer,
       leave: clearRestTimer,
       on: {
-        [TooltipEventTypes.MouseMove]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle,
-        [TooltipEventTypes.Rest]: TooltipStates.Visible
+        [MouseMove]: Focused,
+        [MouseLeave]: Idle,
+        [MouseDown]: Dismissed,
+        [Blur]: Idle,
+        [Rest]: Visible
       }
     },
-    [TooltipStates.Visible]: {
+    [Visible]: {
       on: {
-        [TooltipEventTypes.Focus]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Focused,
-        [TooltipEventTypes.MouseLeave]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.Blur]: TooltipStates.LeavingVisible,
-        [TooltipEventTypes.MouseDown]: TooltipStates.Dismissed,
-        [TooltipEventTypes.SelectWithKeyboard]: TooltipStates.Dismissed,
-        [TooltipEventTypes.GlobalMouseMove]: TooltipStates.LeavingVisible
+        [Focus]: Focused,
+        [MouseEnter]: Focused,
+        [MouseLeave]: LeavingVisible,
+        [Blur]: LeavingVisible,
+        [MouseDown]: Dismissed,
+        [SelectWithKeyboard]: Dismissed,
+        [GlobalMouseMove]: LeavingVisible
       }
     },
-    [TooltipStates.LeavingVisible]: {
+    [LeavingVisible]: {
       enter: () => {
         startLeavingVisibleTimer();
       },
@@ -2841,18 +2853,18 @@ const chart = {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseEnter]: TooltipStates.Visible,
-        [TooltipEventTypes.Focus]: TooltipStates.Visible,
-        [TooltipEventTypes.TimeComplete]: TooltipStates.Idle
+        [MouseEnter]: Visible,
+        [Focus]: Visible,
+        [TimeComplete]: Idle
       }
     },
-    [TooltipStates.Dismissed]: {
+    [Dismissed]: {
       leave: () => {
         clearContextId();
       },
       on: {
-        [TooltipEventTypes.MouseLeave]: TooltipStates.Idle,
-        [TooltipEventTypes.Blur]: TooltipStates.Idle
+        [MouseLeave]: Idle,
+        [Blur]: Idle
       }
     }
   }
@@ -2915,35 +2927,35 @@ function useTooltip(childProps, childRef, tooltipProps) {
   const id = useId('');
   react.useEffect(() => {
     subscription.subscribe(() => {
-      setVisible((state.current.state === TooltipStates.Visible || state.current.state === TooltipStates.LeavingVisible) && state.current.id === id);
+      setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
     });
   }, [id]);
 
   function handleMouseEnter() {
-    send(TooltipEventTypes.MouseEnter, {
+    send(MouseEnter, {
       id
     });
   }
 
   function handleMouseMove() {
-    send(TooltipEventTypes.MouseMove, {
+    send(MouseMove, {
       id
     });
   }
 
   function handleMouseLeave() {
-    send(TooltipEventTypes.MouseLeave);
+    send(MouseLeave);
   }
 
   function handleMouseDown() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.MouseDown);
+      send(MouseDown);
     }
   }
 
   function handleFocus() {
-    send(TooltipEventTypes.Focus, {
+    send(Focus, {
       id
     });
   }
@@ -2951,13 +2963,13 @@ function useTooltip(childProps, childRef, tooltipProps) {
   function handleBlur() {
     // Allow quick click from one tool to another
     if (state.current.id === id) {
-      send(TooltipEventTypes.Blur, undefined);
+      send(Blur, undefined);
     }
   }
 
   function handleKeyDown(event) {
     if (event.key === 'Enter' || event.key === ' ') {
-      send(TooltipEventTypes.SelectWithKeyboard);
+      send(SelectWithKeyboard);
     }
   }
 
@@ -2998,9 +3010,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 +3023,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,