@base-ui/react 1.1.0 → 1.3.0

package/floating-ui-react/hooks/useListNavigation.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,6 +12,7 @@ var _dom = require("@floating-ui/utils/dom");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
 var _utils = require("../utils");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -80,9 +82,6 @@ function useListNavigation(context, props) {
     orientation = 'vertical',
     parentOrientation,
     cols = 1,
-    scrollItemIntoView = true,
-    itemSizes,
-    dense = false,
     id,
     resetOnPointerLeave = true,
     externalTree
@@ -122,7 +121,6 @@ function useListNavigation(context, props) {
   const forceScrollIntoViewRef = React.useRef(false);
   const disabledIndicesRef = (0, _useValueAsRef.useValueAsRef)(disabledIndices);
   const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
-  const scrollItemIntoViewRef = (0, _useValueAsRef.useValueAsRef)(scrollItemIntoView);
   const selectedIndexRef = (0, _useValueAsRef.useValueAsRef)(selectedIndex);
   const resetOnPointerLeaveRef = (0, _useValueAsRef.useValueAsRef)(resetOnPointerLeave);
   const focusItem = (0, _useStableCallback.useStableCallback)(() => {
@@ -150,17 +148,16 @@ function useListNavigation(context, props) {
       if (!initialItem) {
         runFocus(waitedItem);
       }
-      const scrollIntoViewOptions = scrollItemIntoViewRef.current;
-      const shouldScrollIntoView = scrollIntoViewOptions &&
+      const shouldScrollIntoView =
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       item && (forceScrollIntoView || !isPointerModalityRef.current);
       if (shouldScrollIntoView) {
         // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
         // by all browsers.
-        waitedItem.scrollIntoView?.(typeof scrollIntoViewOptions === 'boolean' ? {
+        waitedItem.scrollIntoView?.({
           block: 'nearest',
           inline: 'nearest'
-        } : scrollIntoViewOptions);
+        });
       }
     });
   });
@@ -250,7 +247,7 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = (0, _utils.activeElement)((0, _utils.getDocument)(floatingElement));
+    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingElement));
     const treeContainsActiveEl = nodes.some(node => node.context && (0, _utils.contains)(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
@@ -311,12 +308,19 @@ function useListNavigation(context, props) {
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
+        (0, _enqueueFocus.enqueueFocus)(null, {
+          sync: true
+        });
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
-          floatingFocusElementRef.current?.focus({
-            preventScroll: true
-          });
+          const floatingFocusEl = floatingFocusElementRef.current;
+          const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
+          if (floatingFocusEl && (0, _utils.contains)(floatingFocusEl, activeEl)) {
+            floatingFocusEl.focus({
+              preventScroll: true
+            });
+          }
         }
       }
     };
@@ -377,7 +381,7 @@ function useListNavigation(context, props) {
 
     // Grid navigation.
     if (cols > 1) {
-      const sizes = itemSizes || Array.from({
+      const sizes = Array.from({
         length: listRef.current.length
       }, () => ({
         width: 1,
@@ -385,7 +389,7 @@ function useListNavigation(context, props) {
       }));
       // To calculate movements on the grid, we use hypothetical cell indices
       // as if every item was 1x1, then convert back to real indices.
-      const cellMap = (0, _utils.createGridCellMap)(sizes, cols, dense);
+      const cellMap = (0, _utils.createGridCellMap)(sizes, cols, false);
       const minGridIndex = cellMap.findIndex(index => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices));
       // last enabled index
       const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);

package/floating-ui-react/hooks/useRole.d.ts

@@ -2,17 +2,11 @@ import type { ElementProps, FloatingContext, FloatingRootContext } from "../type
 type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
 type ComponentRole = 'select' | 'label' | 'combobox';
 export interface UseRoleProps {
-  /**
-   * Whether the Hook is enabled, including all internal Effects and event
-   * handlers.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * The role of the floating element.
    * @default 'dialog'
    */
-  role?: AriaRole | ComponentRole;
+  role?: AriaRole | ComponentRole | undefined;
 }
 /**
  * Adds base screen reader props to the reference and floating elements for a

package/floating-ui-react/hooks/useRole.js

@@ -24,7 +24,6 @@ function useRole(context, props = {}) {
   const domReference = store.useState('domReferenceElement');
   const floatingElement = store.useState('floatingElement');
   const {
-    enabled = true,
     role = 'dialog'
   } = props;
   const defaultReferenceId = (0, _useId.useId)();
@@ -112,10 +111,10 @@ function useRole(context, props = {}) {
     }
     return {};
   }, [floatingId, role]);
-  return React.useMemo(() => enabled ? {
+  return React.useMemo(() => ({
     reference,
     floating,
     item,
     trigger
-  } : {}, [enabled, reference, floating, trigger, item]);
+  }), [reference, floating, trigger, item]);
 }

package/floating-ui-react/hooks/useSyncedFloatingRootContext.d.ts

@@ -7,11 +7,11 @@ export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreSta
   /**
    * Whether to prevent the auto-emitted `openchange` event.
    */
-  noEmit?: boolean;
+  noEmit?: boolean | undefined;
   /**
    * Whether the Popup element is passed to Floating UI as the floating element instead of the default Positioner.
    */
-  treatPopupAsFloatingElement?: boolean;
+  treatPopupAsFloatingElement?: boolean | undefined;
   onOpenChange(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
 }
 /**

package/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/floating-ui-react/hooks/useTypeahead.d.ts

@@ -6,7 +6,7 @@ export interface UseTypeaheadProps {
    * elements of the list.
    * @default empty list
    */
-  listRef: React.MutableRefObject<Array<string | null>>;
+  listRef: React.RefObject<Array<string | null>>;
   /**
    * The index of the active (focused or highlighted) item in the list.
    * @default null
@@ -15,37 +15,33 @@ export interface UseTypeaheadProps {
   /**
    * Callback invoked with the matching index if found as the user types.
    */
-  onMatch?: (index: number) => void;
+  onMatch?: ((index: number) => void) | undefined;
+  /**
+   * Optional list of item elements that correspond to `listRef` indices.
+   * When an element exists for an index, typeahead skips it if it is hidden
+   * via CSS (`display: none`).
+   */
+  elementsRef?: React.RefObject<Array<HTMLElement | null>> | undefined;
   /**
    * Callback invoked with the typing state as the user types.
    */
-  onTypingChange?: (isTyping: boolean) => void;
+  onTypingChange?: ((isTyping: boolean) => void) | undefined;
   /**
    * Whether the Hook is enabled, including all internal Effects and event
    * handlers.
    * @default true
    */
-  enabled?: boolean;
-  /**
-   * A function that returns the matching string from the list.
-   * @default lowercase-finder
-   */
-  findMatch?: null | ((list: Array<string | null>, typedString: string) => string | null | undefined);
+  enabled?: boolean | undefined;
   /**
    * The number of milliseconds to wait before resetting the typed string.
    * @default 750
    */
-  resetMs?: number;
-  /**
-   * An array of keys to ignore when typing.
-   * @default []
-   */
-  ignoreKeys?: Array<string>;
+  resetMs?: number | undefined;
   /**
    * The index of the selected item in the list, if available.
    * @default null
    */
-  selectedIndex?: number | null;
+  selectedIndex?: number | null | undefined;
 }
 /**
  * Provides a matching callback that can be used to focus an item as the user

package/floating-ui-react/hooks/useTypeahead.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,7 +11,6 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../utils");
-var _constants = require("../../utils/constants");
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
@@ -18,17 +18,16 @@ var _constants = require("../../utils/constants");
  */
 function useTypeahead(context, props) {
   const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
   const dataRef = store.context.dataRef;
+  const open = store.useState('open');
   const {
     listRef,
+    elementsRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
     enabled = true,
-    findMatch = null,
     resetMs = 750,
-    ignoreKeys = _constants.EMPTY_ARRAY,
     selectedIndex = null
   } = props;
   const timeout = (0, _useTimeout.useTimeout)();
@@ -36,12 +35,15 @@ function useTypeahead(context, props) {
   const prevIndexRef = React.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (open) {
-      timeout.clear();
-      matchIndexRef.current = null;
+    if (!open && selectedIndex !== null) {
+      return;
+    }
+    timeout.clear();
+    matchIndexRef.current = null;
+    if (stringRef.current !== '') {
       stringRef.current = '';
     }
-  }, [open, timeout]);
+  }, [open, selectedIndex, timeout]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
@@ -60,19 +62,38 @@ function useTypeahead(context, props) {
     }
   });
   const onKeyDown = (0, _useStableCallback.useStableCallback)(event => {
-    function getMatchingIndex(list, orderedList, string) {
-      const str = findMatch ? findMatch(orderedList, string) : orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
-      return str ? list.indexOf(str) : -1;
+    function isVisible(index) {
+      const element = elementsRef?.current[index];
+      return !element || (0, _utils.isElementVisible)(element);
+    }
+    function getMatchingIndex(list, string, startIndex = 0) {
+      if (list.length === 0) {
+        return -1;
+      }
+      const normalizedStartIndex = (startIndex % list.length + list.length) % list.length;
+      const lowerString = string.toLocaleLowerCase();
+      for (let offset = 0; offset < list.length; offset += 1) {
+        const index = (normalizedStartIndex + offset) % list.length;
+        const text = list[index];
+        if (!text?.toLocaleLowerCase().startsWith(lowerString) || !isVisible(index)) {
+          continue;
+        }
+        return index;
+      }
+      return -1;
     }
     const listContent = listRef.current;
+    if (stringRef.current.length > 0 && event.key === ' ') {
+      // Space should continue the in-progress typeahead session.
+      (0, _utils.stopEvent)(event);
+      setTypingChange(true);
+    }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
-      if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) {
+      if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
         setTypingChange(false);
-      } else if (event.key === ' ') {
-        (0, _utils.stopEvent)(event);
       }
     }
-    if (listContent == null || ignoreKeys.includes(event.key) ||
+    if (listContent == null ||
     // Character key.
     event.key.length !== 1 ||
     // Modifier key.
@@ -84,6 +105,12 @@ function useTypeahead(context, props) {
       setTypingChange(true);
     }
 
+    // Capture whether this is a new typing session before mutating the string.
+    const isNewSession = stringRef.current === '';
+    if (isNewSession) {
+      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
+    }
+
     // Bail out if the list contains a word like "llama" or "aaron". TODO:
     // allow it in this case, too.
     const allowRapidSuccessionOfFirstLetter = listContent.every(text => text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true);
@@ -100,8 +127,13 @@ function useTypeahead(context, props) {
       prevIndexRef.current = matchIndexRef.current;
       setTypingChange(false);
     });
-    const prevIndex = prevIndexRef.current;
-    const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
+
+    // Compute the starting index for this search.
+    // If this is a new typing session (string is empty), base it on the current
+    // selection/active item; otherwise continue from the last matched index.
+    const prevIndex = isNewSession ? selectedIndex ?? activeIndex ?? -1 : prevIndexRef.current;
+    const startIndex = (prevIndex ?? 0) + 1;
+    const index = getMatchingIndex(listContent, stringRef.current, startIndex);
     if (index !== -1) {
       onMatchProp?.(index);
       matchIndexRef.current = index;
@@ -110,19 +142,34 @@ function useTypeahead(context, props) {
       setTypingChange(false);
     }
   });
+  const onBlur = (0, _useStableCallback.useStableCallback)(event => {
+    const next = event.relatedTarget;
+    const currentDomReferenceElement = store.select('domReferenceElement');
+    const currentFloatingElement = store.select('floatingElement');
+    const withinReference = (0, _utils.contains)(currentDomReferenceElement, next);
+    const withinFloating = (0, _utils.contains)(currentFloatingElement, next);
+
+    // Keep the session if focus moves within the composite (reference <-> floating).
+    if (withinReference || withinFloating) {
+      return;
+    }
+
+    // End the current typing session when focus leaves the composite entirely.
+    timeout.clear();
+    stringRef.current = '';
+    prevIndexRef.current = matchIndexRef.current;
+    setTypingChange(false);
+  });
   const reference = React.useMemo(() => ({
-    onKeyDown
-  }), [onKeyDown]);
+    onKeyDown,
+    onBlur
+  }), [onKeyDown, onBlur]);
   const floating = React.useMemo(() => {
     return {
       onKeyDown,
-      onKeyUp(event) {
-        if (event.key === ' ') {
-          setTypingChange(false);
-        }
-      }
+      onBlur
     };
-  }, [onKeyDown, setTypingChange]);
+  }, [onKeyDown, onBlur]);
   return React.useMemo(() => enabled ? {
     reference,
     floating

package/floating-ui-react/middleware/arrow.d.ts

@@ -10,7 +10,7 @@ export interface ArrowOptions {
    * Useful when the floating element has rounded corners.
    * @default 0
    */
-  padding?: Padding;
+  padding?: Padding | undefined;
   /**
    * Which element to use as the offset parent.
    * @default 'real'

package/floating-ui-react/safePolygon.d.ts

@@ -1,9 +1,5 @@
-import type { HandleClose } from "./hooks/useHover.js";
-export interface SafePolygonOptions {
-  buffer?: number;
-  blockPointerEvents?: boolean;
-  requireIntent?: boolean;
-}
+import type { HandleClose, HandleCloseOptions } from "./hooks/useHoverShared.js";
+export interface SafePolygonOptions extends HandleCloseOptions {}
 /**
  * Generates a safe polygon area that the user can traverse without closing the
  * floating element once leaving the reference element.