@basic-ui/core 0.0.36 → 0.0.39

package/build/cjs/index.js

@@ -28,10 +28,36 @@ const {
 } = accordionItemContext;
 const useAccordionItemContext = () => react.useContext(accordionItemContext);
 
+const tabblable = ['button:enabled:not([readonly])', 'select:enabled:not([readonly])', 'textarea:enabled:not([readonly])', 'input:enabled:not([readonly])', 'a[href]', 'area[href]', 'iframe', 'object', 'embed', '[tabindex]', '[contenteditable]', '[autofocus]'].join(',');
+/* This is naive and will not consider tabIndex */
+
+const getTabblableNodes = parentNode => {
+  if (!parentNode) {
+    return [];
+  }
+
+  return Array.from(parentNode.querySelectorAll(tabblable));
+};
+function focusOnChildNode(parentNode, itemIndex) {
+  const elements = getTabblableNodes(parentNode);
+
+  if (elements.length > 0) {
+    elements[itemIndex === -1 ? elements.length - 1 : 0].focus();
+  } else {
+    const currentTabIndex = parentNode.tabIndex;
+    parentNode.tabIndex = 0;
+    parentNode.focus();
+    parentNode.tabIndex = currentTabIndex;
+  }
+}
+
 function useAutoFocus(open, elementRef) {
   react.useEffect(() => {
     if (open) {
-      elementRef.current && elementRef.current.focus();
+      // We will only autoFocus on the first child if the currently active element isn't already trapped inside the modal
+      if (elementRef.current && !elementRef.current.contains(document.activeElement)) {
+        focusOnChildNode(elementRef.current, 0);
+      }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [open]);
@@ -151,25 +177,36 @@ function useChildrenCounterChild(itemsRef, itemIndexRef, obj, disabled = false)
   }
 }
 
-function useFocusReturn(open) {
-  const previousFocusRef = react.useRef(null);
+function useFocusReturn(open, rootEl) {
+  const previousFocusRef = react.useRef((() => {
+    if (open && typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
+      return document.activeElement;
+    }
+
+    return null;
+  })());
   react.useEffect(() => {
     if (open) {
+      var _rootEl$current;
+
       // once opened, keep track of the element that triggered
       // the Modal opening
-      previousFocusRef.current = document.activeElement;
-    }
+      if (!previousFocusRef.current && document.activeElement instanceof HTMLElement && !((_rootEl$current = rootEl.current) != null && _rootEl$current.contains(document.activeElement))) {
+        previousFocusRef.current = document.activeElement;
+      }
 
-    return () => {
-      // on unmount, return focus to that element
-      const previousFocus = previousFocusRef.current;
-      requestAnimationFrame(() => {
-        if (previousFocus) {
-          previousFocus.focus();
+      const rootElement = rootEl.current;
+      const previousElement = previousFocusRef.current;
+      return () => {
+        // on unmount, return focus to that element
+        if (previousElement && !(rootElement != null && rootElement.contains(document.activeElement))) {
+          previousElement.focus({
+            preventScroll: true
+          });
         }
-      });
-    };
-  }, [open]);
+      };
+    }
+  }, [open, rootEl]);
 }
 
 function useFocusState(props = {}) {
@@ -196,21 +233,6 @@ function useFocusState(props = {}) {
   };
 }
 
-// the lifetime of the app before it gets reloaded, I mean ... come on.
-// I don't even know what xillion that is.
-// /me googles
-// Oh duh, quadrillion. Nine quadrillion components. I think we're okay.
-
-let id = 0;
-
-const genId = () => `${++id}`;
-
-function useId(preferredId) {
-  const [id, setId] = react.useState(preferredId);
-  react.useEffect(() => setId(genId()), []);
-  return id;
-}
-
 function useOnClickOutside(ref, handler, active = true) {
   const listener = react.useCallback(event => {
     // Do nothing if clicking ref's element or descendent elements
@@ -277,40 +299,33 @@ function useReducerMachine(chart, reducer, initialData) {
   return [state, data, transition];
 }
 
+let scrollBodyCount = 0;
 function useRemoveBodyScroll(open) {
   react.useEffect(() => {
     if (open) {
-      const locksCount = (window.__SCROLL_BODY_COUNT__ || 0) + 1; // calculate scrollbar width if mounting the first scroll lock
+      scrollBodyCount += 1; // calculate scrollbar width if mounting the first scroll lock
 
       let scrollBarWidth = 0;
 
-      if (locksCount === 1) {
+      if (scrollBodyCount === 1) {
         scrollBarWidth = window.innerWidth - document.body.clientWidth;
       }
 
       document.body.style.overflow = 'hidden';
 
       if (scrollBarWidth > 0) {
-        document.body.style.paddingRight = `${scrollBarWidth}px`;
-      } // save current lock count in global object
-
-
-      window.__SCROLL_BODY_COUNT__ = locksCount;
-    }
+        document.body.style.marginRight = `${scrollBarWidth}px`;
+      }
 
-    return () => {
-      if (open) {
-        const locksCount = window.__SCROLL_BODY_COUNT__ - 1;
+      return () => {
+        scrollBodyCount -= 1;
 
-        if (locksCount === 0) {
+        if (scrollBodyCount === 0) {
           document.body.style.overflow = '';
-          document.body.style.paddingRight = '';
-        } // save current lock count in global object
-
-
-        window.__SCROLL_BODY_COUNT__ = locksCount;
-      }
-    };
+          document.body.style.marginRight = '';
+        }
+      };
+    }
   }, [open]);
 }
 
@@ -648,7 +663,7 @@ const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(props
   } = props,
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "expanded", "onChange"]);
 
-  const id = useId();
+  const id = react.useId();
   const headerId = id ? `accordion-header-${id}` : undefined;
   const bodyId = id ? `accordion-body-${id}` : undefined;
   const contextValue = {
@@ -1272,8 +1287,8 @@ const Combobox = /*#__PURE__*/react.forwardRef(function Combobox(_ref, ref) {
     lastActionType: INIT
   };
   const [state, data, transition] = useReducerMachine(stateChart, comboboxReducer, defaultData);
-  listboxIdRef.current = useId();
-  labelIdRef.current = useId();
+  listboxIdRef.current = react.useId();
+  labelIdRef.current = react.useId();
   const context = react.useMemo(() => ({
     data,
     inputRef,
@@ -1667,17 +1682,6 @@ const ComboboxPopover = /*#__PURE__*/react.forwardRef(function ComboboxPopover(_
   }));
 });
 
-const tabblable = ['button:enabled:not([readonly])', 'select:enabled:not([readonly])', 'textarea:enabled:not([readonly])', 'input:enabled:not([readonly])', 'a[href]', 'area[href]', 'iframe', 'object', 'embed', '[tabindex]', '[contenteditable]', '[autofocus]'].join(',');
-/* This is naive and will not consider tabIndex */
-
-const getTabblableNodes = parentNode => {
-  if (!parentNode) {
-    return [];
-  }
-
-  return Array.from(parentNode.querySelectorAll(tabblable));
-};
-
 const focusLockStack = [];
 function useFocusLock(ref, opts) {
   const {
@@ -1700,19 +1704,12 @@ function useFocusLock(ref, opts) {
         }
 
         if (event.target === lockEndRef.current) {
-          rootEl.focus();
+          focusOnChildNode(rootEl, 0);
         } else if (event.target === lockStartRef.current) {
-          const nodes = getTabblableNodes(rootEl);
-
-          if (nodes.length > 0) {
-            const nodeToFocus = nodes.length - 1;
-            nodes[nodeToFocus].focus();
-          } else {
-            rootEl.focus();
-          }
+          focusOnChildNode(rootEl, -1);
         } else if (document !== event.target && rootEl !== event.target && !rootEl.contains(event.target)) {
           event.preventDefault();
-          rootEl.focus();
+          focusOnChildNode(rootEl, 0);
         }
       };
 
@@ -1797,7 +1794,7 @@ const Menu = /*#__PURE__*/react.forwardRef(function Menu(props, forwardedRef) {
   const [open, onChange] = useControlledState(openProp, onChangeProp, defaultOpen, setState => (e, isOpen) => {
     setState(isOpen);
   });
-  menuListIdRef.current = useId();
+  menuListIdRef.current = react.useId();
   const value = {
     menuListIdRef,
     openWithArrowKeyRef,
@@ -1830,7 +1827,8 @@ const MenuButton = /*#__PURE__*/react.forwardRef(function MenuButton(props, forw
     buttonRef,
     onChange
   } = useMenuContext();
-  const buttonId = useId(preferredId);
+  const buttonIdGenerated = react.useId();
+  const buttonId = preferredId || buttonIdGenerated;
 
   const handleKeyDown = e => {
     if (disabled) {
@@ -1891,7 +1889,6 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
         otherProps = _objectWithoutPropertiesLoose__default['default'](props, ["as", "disabled", "onSelect", "onClick", "onKeyDown"]);
 
   const {
-    menuListIdRef,
     onChange,
     buttonRef
   } = useMenuContext();
@@ -1900,7 +1897,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
     onNavigate
   } = useMenuListContext();
   const ref = react.useRef();
-  const itemIndex = react.useRef(-1);
+  const itemId = react.useId();
   const isActive = ref.current && ref.current === navigationItem;
   const handleSelect = wrapEvent(onSelect, e => {
     var _buttonRef$current;
@@ -1932,7 +1929,7 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
 
   return /*#__PURE__*/jsxRuntime.jsx(Comp, _extends__default['default']({
     ref: assignMultipleRefs(ref, forwardedRef),
-    id: disabled ? undefined : `${menuListIdRef.current}_${itemIndex.current}`,
+    id: disabled ? undefined : itemId,
     "data-menu-item": "",
     "data-highlighted": isActive ? '' : undefined,
     role: "menuitem",
@@ -2192,6 +2189,11 @@ const Popper = /*#__PURE__*/react.memo( /*#__PURE__*/react.forwardRef(function P
       popperEngineInstance.current = null;
     };
   }, [anchorEl, modifiers, placement, strategy, defaultModifiers]);
+  useEnhancedEffect(() => {
+    var _popperEngineInstance;
+
+    (_popperEngineInstance = popperEngineInstance.current) == null ? void 0 : _popperEngineInstance.forceUpdate();
+  }, [props.hidden || props['aria-hidden']]);
   const contextValue = {
     arrowRef
   };
@@ -2277,7 +2279,7 @@ const Modal = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       otherProps = _objectWithoutPropertiesLoose__default['default'](_ref, ["as", "children", "trapFocus", "style"]);
 
   const modalRef = react.useRef(null);
-  useFocusReturn(trapFocus);
+  useFocusReturn(trapFocus, modalRef);
   useRemoveBodyScroll(trapFocus);
   useAutoFocus(trapFocus, modalRef);
   return /*#__PURE__*/jsxRuntime.jsx(FocusLock, {
@@ -2289,7 +2291,7 @@ const Modal = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       role: "dialog",
       "aria-modal": "true",
       style: style,
-      tabIndex: 0
+      tabIndex: -1
     }, otherProps, {
       children: children
     }))
@@ -2395,7 +2397,7 @@ const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forw
   const [value, onChange] = useControlledState(valueProp, onChangeProp, defaultValue, setValue => (e, value) => {
     setValue(value);
   });
-  const fallbackId = useId();
+  const fallbackId = react.useId();
   return /*#__PURE__*/jsxRuntime.jsx(RadioGroupProvider, {
     value: {
       value,
@@ -2686,7 +2688,7 @@ const TabList = /*#__PURE__*/react.forwardRef(function TabList(props, forwardedR
   const ref = react.useRef();
   const tabsScope = useScope(ref);
   const tabsContext = useTabsContext();
-  const id = useId();
+  const id = react.useId();
 
   if (!tabsContext) {
     throw new Error('Missing <Tabs /> in the component tree');
@@ -2968,7 +2970,7 @@ function useTooltip(childProps, childRef, tooltipProps) {
   } = childProps;
   const anchorEl = react.useRef(null);
   const [visible, setVisible] = react.useState(false);
-  const id = useId('');
+  const id = react.useId();
   react.useEffect(() => {
     subscription.subscribe(() => {
       setVisible((state.current.state === Visible || state.current.state === LeavingVisible) && state.current.id === id);
@@ -3132,7 +3134,6 @@ exports.useControlledState = useControlledState;
 exports.useFocusReturn = useFocusReturn;
 exports.useFocusState = useFocusState;
 exports.useGestureHandlers = useGestureHandlers;
-exports.useId = useId;
 exports.useMeasure = useMeasure;
 exports.useOnClickOutside = useOnClickOutside;
 exports.useOnKeyDown = useOnKeyDown;