@base-ui/react 1.1.0 → 1.3.0

package/esm/utils/createBaseUIEventDetails.d.ts

@@ -17,12 +17,15 @@ interface ReasonToEventMap {
   [REASONS.inputClear]: InputEvent | FocusEvent | Event;
   [REASONS.inputBlur]: FocusEvent;
   [REASONS.inputPaste]: ClipboardEvent;
+  [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
   [REASONS.focusOut]: FocusEvent | KeyboardEvent;
   [REASONS.escapeKey]: KeyboardEvent;
+  [REASONS.closeWatcher]: Event;
   [REASONS.listNavigation]: KeyboardEvent;
   [REASONS.keyboard]: KeyboardEvent;
   [REASONS.pointer]: PointerEvent;
   [REASONS.drag]: PointerEvent | TouchEvent;
+  [REASONS.swipe]: PointerEvent | TouchEvent;
   [REASONS.wheel]: WheelEvent;
   [REASONS.scrub]: PointerEvent;
   [REASONS.cancelOpen]: MouseEvent;
@@ -88,5 +91,5 @@ export type BaseUIGenericEventDetails<Reason extends string, CustomProperties ex
  * for preventing Base UI's internal event handling.
  */
 export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: HTMLElement, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
-export declare function createGenericEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
+export declare function createGenericEventDetails<Reason extends keyof ReasonToEventMap, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
 export {};

package/esm/utils/formatNumber.d.ts

@@ -1,4 +1,5 @@
 export declare const cache: Map<string, Intl.NumberFormat>;
 export declare function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function formatNumber(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
-export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberValue(value: number | null, locale?: Intl.LocalesArgument, format?: Intl.NumberFormatOptions): string;

package/esm/utils/formatNumber.js

@@ -23,4 +23,15 @@ export function formatNumberMaxPrecision(value, locale, options) {
     ...options,
     maximumFractionDigits: 20
   });
+}
+export function formatNumberValue(value, locale, format) {
+  if (value == null) {
+    return '';
+  }
+  if (!format) {
+    return formatNumber(value / 100, locale, {
+      style: 'percent'
+    });
+  }
+  return formatNumber(value, locale, format);
 }

package/esm/utils/getDisabledMountTransitionStyles.d.ts

@@ -1,4 +1,4 @@
 import type { TransitionStatus } from "./useTransitionStatus.js";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
-  style?: React.CSSProperties;
+  style?: React.CSSProperties | undefined;
 };

package/esm/utils/getElementAtPoint.d.ts

@@ -0,0 +1 @@
+export declare function getElementAtPoint(doc: Document | null | undefined, x: number, y: number): Element | null;

package/esm/utils/getElementAtPoint.js

@@ -0,0 +1,3 @@
+export function getElementAtPoint(doc, x, y) {
+  return typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(x, y) : null;
+}

package/esm/utils/getPseudoElementBounds.js

@@ -2,7 +2,7 @@ export function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
   // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
   const beforeStyles = window.getComputedStyle(element, '::before');

package/esm/utils/itemEquality.d.ts

@@ -1,6 +1,6 @@
-export type ItemEqualityComparer<Item = any, Value = Item> = (item: Item, value: Value) => boolean;
+export type ItemEqualityComparer<Item = any, Value = Item> = (itemValue: Item, selectedValue: Value) => boolean;
 export declare const defaultItemEquality: ItemEqualityComparer;
-export declare function compareItemEquality<Item, Value>(item: Item, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function itemIncludes<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function findItemIndex<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): number;
-export declare function removeItem<Item, Value>(collection: readonly Item[], value: Value, comparer: ItemEqualityComparer<Item, Value>): Item[];
+export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
+export declare function selectedValueIncludes<Item, Value>(selectedValues: readonly Item[] | undefined | null, itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): boolean;
+export declare function findItemIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): number;
+export declare function removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];

package/esm/utils/itemEquality.js

@@ -1,32 +1,32 @@
-export const defaultItemEquality = (item, value) => Object.is(item, value);
-export function compareItemEquality(item, value, comparer) {
-  if (item == null || value == null) {
-    return Object.is(item, value);
+export const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+export function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
   }
-  return comparer(item, value);
+  return comparer(itemValue, selectedValue);
 }
-export function itemIncludes(collection, value, comparer) {
-  if (!collection || collection.length === 0) {
+export function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
     return false;
   }
-  return collection.some(item => {
-    if (item === undefined) {
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
       return false;
     }
-    return compareItemEquality(item, value, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
-export function findItemIndex(collection, value, comparer) {
-  if (!collection || collection.length === 0) {
+export function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
     return -1;
   }
-  return collection.findIndex(item => {
-    if (item === undefined) {
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
       return false;
     }
-    return compareItemEquality(item, value, comparer);
+    return compareItemEquality(itemValue, selectedValue, comparer);
   });
 }
-export function removeItem(collection, value, comparer) {
-  return collection.filter(item => !compareItemEquality(item, value, comparer));
+export function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
 }

package/esm/utils/popupStateMapping.d.ts

@@ -19,6 +19,16 @@ export declare enum CommonPopupDataAttributes {
    * Present when the anchor is hidden.
    */
   anchorHidden = "data-anchor-hidden",
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = "data-side",
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = "data-align",
 }
 export declare enum CommonTriggerDataAttributes {
   /**

package/esm/utils/popupStateMapping.js

@@ -20,6 +20,16 @@ export let CommonPopupDataAttributes = function (CommonPopupDataAttributes) {
    * Present when the anchor is hidden.
    */
   CommonPopupDataAttributes["anchorHidden"] = "data-anchor-hidden";
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type { 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  CommonPopupDataAttributes["side"] = "data-side";
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  CommonPopupDataAttributes["align"] = "data-align";
   return CommonPopupDataAttributes;
 }({});
 export let CommonTriggerDataAttributes = /*#__PURE__*/function (CommonTriggerDataAttributes) {

package/esm/utils/popups/popupStoreUtils.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';

package/esm/utils/popups/popupTriggerMap.d.ts

@@ -3,7 +3,7 @@
  * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
  */
 export declare class PopupTriggerMap {
-  private elements;
+  private elementsSet;
   private idMap;
   constructor();
   /**
@@ -24,7 +24,20 @@ export declare class PopupTriggerMap {
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate: (el: Element) => boolean): boolean;
+  /**
+   * Returns the trigger element associated with the given ID, or undefined if no such element exists.
+   */
   getById(id: string): Element | undefined;
+  /**
+   * Returns an iterable of all registered trigger entries, where each entry is a tuple of [id, element].
+   */
   entries(): IterableIterator<[string, Element]>;
+  /**
+   * Returns an iterable of all registered trigger elements.
+   */
+  elements(): IterableIterator<Element>;
+  /**
+   * Returns the number of registered trigger elements.
+   */
   get size(): number;
 }

package/esm/utils/popups/popupTriggerMap.js

@@ -1,11 +1,10 @@
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 /**
  * Data structure to keep track of popup trigger elements by their IDs.
  * Uses both a set of Elements and a map of IDs to Elements for efficient lookups.
  */
 export class PopupTriggerMap {
   constructor() {
-    this.elements = new Set();
+    this.elementsSet = new Set();
     this.idMap = new Map();
   }
 
@@ -22,13 +21,13 @@ export class PopupTriggerMap {
     if (existingElement !== undefined) {
       // We assume that the same element won't be registered under multiple ids.
       // This is safe considering how useTriggerRegistration is implemented.
-      this.elements.delete(existingElement);
+      this.elementsSet.delete(existingElement);
     }
-    this.elements.add(element);
+    this.elementsSet.add(element);
     this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
-      if (this.elements.size !== this.idMap.size) {
-        throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.' : _formatErrorMessage(87));
+      if (this.elementsSet.size !== this.idMap.size) {
+        throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
     }
   }
@@ -39,7 +38,7 @@ export class PopupTriggerMap {
   delete(id) {
     const element = this.idMap.get(id);
     if (element) {
-      this.elements.delete(element);
+      this.elementsSet.delete(element);
       this.idMap.delete(id);
     }
   }
@@ -48,26 +47,45 @@ export class PopupTriggerMap {
    * Whether the given element is registered as a trigger.
    */
   hasElement(element) {
-    return this.elements.has(element);
+    return this.elementsSet.has(element);
   }
 
   /**
    * Whether there is a registered trigger element matching the given predicate.
    */
   hasMatchingElement(predicate) {
-    for (const element of this.elements) {
+    for (const element of this.elementsSet) {
       if (predicate(element)) {
         return true;
       }
     }
     return false;
   }
+
+  /**
+   * Returns the trigger element associated with the given ID, or undefined if no such element exists.
+   */
   getById(id) {
     return this.idMap.get(id);
   }
+
+  /**
+   * Returns an iterable of all registered trigger entries, where each entry is a tuple of [id, element].
+   */
   entries() {
     return this.idMap.entries();
   }
+
+  /**
+   * Returns an iterable of all registered trigger elements.
+   */
+  elements() {
+    return this.elementsSet.values();
+  }
+
+  /**
+   * Returns the number of registered trigger elements.
+   */
   get size() {
     return this.idMap.size;
   }

package/esm/utils/popups/store.d.ts

@@ -7,9 +7,13 @@ import { HTMLProps } from "../types.js";
  */
 export type PopupStoreState<Payload> = {
   /**
-   * Whether the popup is open.
+   * Whether the popup is open (internal state).
    */
   open: boolean;
+  /**
+   * Whether the popup is open (external prop).
+   */
+  readonly openProp: boolean | undefined;
   /**
    * Whether the popup should be mounted in the DOM.
    * This usually follows `open` but can be different during exit transitions.
@@ -37,6 +41,10 @@ export type PopupStoreState<Payload> = {
    * The currently active trigger DOM element.
    */
   activeTriggerElement: Element | null;
+  /**
+   * ID of the trigger (external prop).
+   */
+  readonly triggerIdProp: string | null | undefined;
   /**
    * The popup DOM element.
    */
@@ -71,36 +79,38 @@ export type PopupStoreContext<ChangeEventDetails> = {
   /**
    * Callback fired when the open state changes.
    */
-  onOpenChange?: (open: boolean, eventDetails: ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: ChangeEventDetails) => void) | undefined;
   /**
    * Callback fired when the open state change animation completes.
    */
   onOpenChangeComplete: ((open: boolean) => void) | undefined;
 };
+type S = PopupStoreState<unknown>;
 export declare const popupStoreSelectors: {
-  open: (state: PopupStoreState<unknown>) => boolean;
-  mounted: (state: PopupStoreState<unknown>) => boolean;
-  transitionStatus: (state: PopupStoreState<unknown>) => TransitionStatus;
-  floatingRootContext: (state: PopupStoreState<unknown>) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
-  preventUnmountingOnClose: (state: PopupStoreState<unknown>) => boolean;
-  payload: (state: PopupStoreState<unknown>) => unknown;
-  activeTriggerId: (state: PopupStoreState<unknown>) => string | null;
-  activeTriggerElement: (state: PopupStoreState<unknown>) => Element | null;
+  open: (state: S) => boolean;
+  mounted: (state: S) => boolean;
+  transitionStatus: (state: S) => TransitionStatus;
+  floatingRootContext: (state: S) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  preventUnmountingOnClose: (state: S) => boolean;
+  payload: (state: S) => unknown;
+  activeTriggerId: (state: S) => string | null;
+  activeTriggerElement: (state: S) => Element | null;
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
+  isTriggerActive: (state: S, triggerId: string | undefined) => boolean;
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
+  isOpenedByTrigger: (state: S, triggerId: string | undefined) => boolean;
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => HTMLProps;
-  popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
-  positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
+  isMountedByTrigger: (state: S, triggerId: string | undefined) => boolean;
+  triggerProps: (state: S, isActive: boolean) => HTMLProps;
+  popupProps: (state: S) => HTMLProps;
+  popupElement: (state: S) => HTMLElement | null;
+  positionerElement: (state: S) => HTMLElement | null;
 };
-export type PopupStoreSelectors = typeof popupStoreSelectors;
+export type PopupStoreSelectors = typeof popupStoreSelectors;
+export {};

package/esm/utils/popups/store.js

@@ -9,6 +9,7 @@ import { EMPTY_OBJECT } from "../constants.js";
 export function createInitialPopupStoreState() {
   return {
     open: false,
+    openProp: undefined,
     mounted: false,
     transitionStatus: 'idle',
     floatingRootContext: getEmptyRootContext(),
@@ -16,6 +17,7 @@ export function createInitialPopupStoreState() {
     payload: undefined,
     activeTriggerId: null,
     activeTriggerElement: null,
+    triggerIdProp: undefined,
     popupElement: null,
     positionerElement: null,
     activeTriggerProps: EMPTY_OBJECT,
@@ -23,27 +25,28 @@ export function createInitialPopupStoreState() {
     popupProps: EMPTY_OBJECT
   };
 }
+const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
 export const popupStoreSelectors = {
-  open: createSelector(state => state.open),
+  open: createSelector(state => state.openProp ?? state.open),
   mounted: createSelector(state => state.mounted),
   transitionStatus: createSelector(state => state.transitionStatus),
   floatingRootContext: createSelector(state => state.floatingRootContext),
   preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
   payload: createSelector(state => state.payload),
-  activeTriggerId: createSelector(state => state.activeTriggerId),
+  activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
-  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId),
+  isTriggerActive: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId),
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.open),
+  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
-  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && state.activeTriggerId === triggerId && state.mounted),
+  isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
   popupProps: createSelector(state => state.popupProps),
   popupElement: createSelector(state => state.popupElement),

package/esm/utils/reason-parts.d.ts

@@ -15,8 +15,10 @@ export declare const inputChange: "input-change";
 export declare const inputClear: "input-clear";
 export declare const inputBlur: "input-blur";
 export declare const inputPaste: "input-paste";
+export declare const inputPress: "input-press";
 export declare const focusOut: "focus-out";
 export declare const escapeKey: "escape-key";
+export declare const closeWatcher: "close-watcher";
 export declare const listNavigation: "list-navigation";
 export declare const keyboard: "keyboard";
 export declare const pointer: "pointer";
@@ -27,4 +29,5 @@ export declare const cancelOpen: "cancel-open";
 export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
 export declare const imperativeAction: "imperative-action";
+export declare const swipe: "swipe";
 export declare const windowResize: "window-resize";

package/esm/utils/reason-parts.js

@@ -15,8 +15,10 @@ export const inputChange = 'input-change';
 export const inputClear = 'input-clear';
 export const inputBlur = 'input-blur';
 export const inputPaste = 'input-paste';
+export const inputPress = 'input-press';
 export const focusOut = 'focus-out';
 export const escapeKey = 'escape-key';
+export const closeWatcher = 'close-watcher';
 export const listNavigation = 'list-navigation';
 export const keyboard = 'keyboard';
 export const pointer = 'pointer';
@@ -27,4 +29,5 @@ export const cancelOpen = 'cancel-open';
 export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
 export const imperativeAction = 'imperative-action';
+export const swipe = 'swipe';
 export const windowResize = 'window-resize';

package/esm/utils/resolveAriaLabelledBy.d.ts

@@ -0,0 +1,2 @@
+export declare function getDefaultLabelId(id: string | null | undefined): string | undefined;
+export declare function resolveAriaLabelledBy(fieldLabelId: string | undefined, localLabelId: string | undefined): string | undefined;

package/esm/utils/resolveAriaLabelledBy.js

@@ -0,0 +1,8 @@
+'use client';
+
+export function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+export function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}

package/esm/utils/resolveValueLabel.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 type ItemRecord = Record<string, React.ReactNode>;
-type ItemsInput = ItemRecord | ReadonlyArray<LabeledItem> | ReadonlyArray<Group<LabeledItem>> | undefined;
+type ItemsInput = ItemRecord | ReadonlyArray<LabeledItem> | ReadonlyArray<Group<any>> | undefined;
 interface LabeledItem {
   value: any;
   label: React.ReactNode;
 }
 export interface Group<Item = any> {
-  value: unknown;
-  items: Item[];
+  [key: string]: unknown;
+  items: ReadonlyArray<Item>;
 }
-export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is Group<any>[];
+export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is ReadonlyArray<Group<any>>;
 /**
  * Checks if the items array contains an item with a null value that has a non-null label.
  */

package/esm/utils/resolveValueLabel.js

@@ -12,10 +12,11 @@ export function isGroupedItems(items) {
  */
 export function hasNullItemLabel(items) {
   if (!Array.isArray(items)) {
-    return items != null && !('null' in items);
+    return items != null && 'null' in items;
   }
-  if (isGroupedItems(items)) {
-    for (const group of items) {
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
       for (const item of group.items) {
         if (item && item.value == null && item.label != null) {
           return true;
@@ -24,7 +25,7 @@ export function hasNullItemLabel(items) {
     }
     return false;
   }
-  for (const item of items) {
+  for (const item of arrayItems) {
     if (item && item.value == null && item.label != null) {
       return true;
     }
@@ -74,7 +75,8 @@ export function resolveSelectedLabel(value, items, itemToStringLabel) {
 
   // Items provided as array (flat or grouped)
   if (Array.isArray(items)) {
-    const flatItems = isGroupedItems(items) ? items.flatMap(g => g.items) : items;
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
     if (value == null || typeof value !== 'object') {
       const match = flatItems.find(item => item.value === value);
       if (match && match.label != null) {

package/esm/utils/scrollable.d.ts

@@ -0,0 +1,4 @@
+export type ScrollAxis = 'horizontal' | 'vertical';
+export declare function isScrollable(element: HTMLElement, axis: ScrollAxis): boolean;
+export declare function hasScrollableAncestor(target: HTMLElement, root: HTMLElement, axes: ScrollAxis[]): boolean;
+export declare function findScrollableTouchTarget(target: EventTarget | null, root: HTMLElement, axis?: ScrollAxis): HTMLElement | null;

package/esm/utils/scrollable.js

@@ -0,0 +1,32 @@
+import { getComputedStyle, isHTMLElement } from '@floating-ui/utils/dom';
+export function isScrollable(element, axis) {
+  const style = getComputedStyle(element);
+  if (axis === 'vertical') {
+    const overflowY = style.overflowY;
+    return (overflowY === 'auto' || overflowY === 'scroll') && element.scrollHeight > element.clientHeight;
+  }
+  const overflowX = style.overflowX;
+  return (overflowX === 'auto' || overflowX === 'scroll') && element.scrollWidth > element.clientWidth;
+}
+export function hasScrollableAncestor(target, root, axes) {
+  let node = target;
+  while (node && node !== root) {
+    for (const axis of axes) {
+      if (isScrollable(node, axis)) {
+        return true;
+      }
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+export function findScrollableTouchTarget(target, root, axis = 'vertical') {
+  let node = isHTMLElement(target) ? target : null;
+  while (node && node !== root) {
+    if (isScrollable(node, axis)) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return isScrollable(root, axis) ? root : null;
+}