@base-ui/react 1.2.0 → 1.3.0

package/tooltip/trigger/TooltipTrigger.js

@@ -33,6 +33,7 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     payload,
     disabled: disabledProp,
     delay,
+    closeOnClick = true,
     closeDelay,
     id: idProp,
     ...elementProps
@@ -54,6 +55,7 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     isMountedByThisTrigger
   } = (0, _popups.useTriggerDataForwarding)(thisTriggerId, triggerElementRef, store, {
     payload,
+    closeOnClick,
     closeDelay: closeDelayWithDefault
   });
   const providerContext = (0, _TooltipProviderContext.useTooltipProviderContext)();
@@ -111,6 +113,9 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
     props: [hoverProps, focusProps, rootTriggerProps, {
+      onPointerDown() {
+        store.set('closeOnClick', closeOnClick);
+      },
       id: thisTriggerId,
       [_TooltipTriggerDataAttributes.TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
     }, elementProps],

package/tooltip/viewport/TooltipViewport.d.ts

@@ -9,22 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
 export declare const TooltipViewport: React.ForwardRefExoticComponent<Omit<TooltipViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'delay' | 'dismiss' | 'focus' | undefined;
+}
 export declare namespace TooltipViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', TooltipViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    /**
-     * Present if animations should be instant.
-     */
-    instant: 'delay' | 'dismiss' | 'focus' | undefined;
-  }
+  type State = TooltipViewportState;
 }

package/types/index.d.ts

@@ -1 +1,16 @@
-export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+import type * as React from 'react';
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
+};

package/unstable-use-media-query/index.d.ts

@@ -26,6 +26,8 @@ export interface UseMediaQueryOptions {
     matches: boolean;
   }) | undefined;
 }
+export interface UseMediaQueryState {}
 export declare namespace useMediaQuery {
+  type State = UseMediaQueryState;
   type Options = UseMediaQueryOptions;
 }

package/use-button/useButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function useButton(parameters?: useButton.Parameters): useButton.ReturnValue;
+export declare function useButton(parameters?: UseButtonParameters): UseButtonReturnValue;
 export interface UseButtonParameters {
   /**
    * Whether the component should ignore user interaction.
@@ -17,6 +17,12 @@ export interface UseButtonParameters {
    * @default true
    */
   native?: boolean | undefined;
+  /**
+   * Whether the button is part of a composite widget.
+   * When `true`, keyboard activation for Space occurs on keydown rather than keyup.
+   * @default inferred from CompositeRoot context
+   */
+  composite?: boolean | undefined;
 }
 export interface UseButtonReturnValue {
   /**
@@ -31,7 +37,4 @@ export interface UseButtonReturnValue {
    */
   buttonRef: React.Ref<HTMLElement>;
 }
-export declare namespace useButton {
-  type Parameters = UseButtonParameters;
-  type ReturnValue = UseButtonReturnValue;
-}
+export interface UseButtonState {}

package/use-button/useButton.js

@@ -20,14 +20,12 @@ function useButton(parameters = {}) {
     disabled = false,
     focusableWhenDisabled,
     tabIndex = 0,
-    native: isNativeButton = true
+    native: isNativeButton = true,
+    composite: compositeProp
   } = parameters;
   const elementRef = React.useRef(null);
-  const isCompositeItem = (0, _CompositeRootContext.useCompositeRootContext)(true) !== undefined;
-  const isValidLink = (0, _useStableCallback.useStableCallback)(() => {
-    const element = elementRef.current;
-    return Boolean(element?.tagName === 'A' && element?.href);
-  });
+  const compositeRootContext = (0, _CompositeRootContext.useCompositeRootContext)(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
   const {
     props: focusableWhenDisabledProps
   } = (0, _useFocusableWhenDisabled.useFocusableWhenDisabled)({
@@ -43,7 +41,7 @@ function useButton(parameters = {}) {
       if (!elementRef.current) {
         return;
       }
-      const isButtonTag = elementRef.current.tagName === 'BUTTON';
+      const isButtonTag = isButtonElement(elementRef.current);
       if (isNativeButton) {
         if (!isButtonTag) {
           const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
@@ -97,39 +95,67 @@ function useButton(parameters = {}) {
         }
       },
       onKeyDown(event) {
-        if (!disabled) {
-          (0, _mergeProps.makeEventPreventable)(event);
-          externalOnKeyDown?.(event);
+        if (disabled) {
+          return;
         }
+        (0, _mergeProps.makeEventPreventable)(event);
+        externalOnKeyDown?.(event);
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        const shouldClick = event.target === event.currentTarget && !isNativeButton && !isValidLink() && !disabled;
+        const isCurrentTarget = event.target === event.currentTarget;
+        const currentTarget = event.currentTarget;
+        const isButton = isButtonElement(currentTarget);
+        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
+        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
         const isEnterKey = event.key === 'Enter';
         const isSpaceKey = event.key === ' ';
+        const role = currentTarget.getAttribute('role');
+        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
+        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
+          if (event.defaultPrevented && isTextNavigationRole) {
+            return;
+          }
+          event.preventDefault();
+          if (isLink || isNativeButton && isButton) {
+            currentTarget.click();
+            event.preventBaseUIHandler();
+          } else if (shouldClick) {
+            externalOnClick?.(event);
+            event.preventBaseUIHandler();
+          }
+          return;
+        }
 
-        // Keyboard accessibility for non interactive elements
+        // Keyboard accessibility for native and non-native elements.
         if (shouldClick) {
-          if (isSpaceKey || isEnterKey) {
+          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
             event.preventDefault();
           }
-          if (isEnterKey) {
+          if (!isNativeButton && isEnterKey) {
             externalOnClick?.(event);
           }
         }
       },
       onKeyUp(event) {
+        if (disabled) {
+          return;
+        }
+
         // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
         // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-        // Keyboard accessibility for non interactive elements
-        if (!disabled) {
-          (0, _mergeProps.makeEventPreventable)(event);
-          externalOnKeyUp?.(event);
+        (0, _mergeProps.makeEventPreventable)(event);
+        externalOnKeyUp?.(event);
+        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
+          event.preventDefault();
+          return;
         }
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        if (event.target === event.currentTarget && !isNativeButton && !disabled && event.key === ' ') {
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
           externalOnClick?.(event);
         }
       },
@@ -143,7 +169,7 @@ function useButton(parameters = {}) {
     }, !isNativeButton ? {
       role: 'button'
     } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isNativeButton, isValidLink]);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = (0, _useStableCallback.useStableCallback)(element => {
     elementRef.current = element;
     updateDisabled();
@@ -155,4 +181,7 @@ function useButton(parameters = {}) {
 }
 function isButtonElement(elem) {
   return (0, _dom.isHTMLElement)(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
 }

package/use-render/useRender.d.ts

@@ -17,7 +17,7 @@ export type UseRenderComponentProps<ElementType extends React.ElementType, State
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
+  render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
 };
 export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
   /**
@@ -27,7 +27,7 @@ export interface UseRenderParameters<State, RenderedElementType extends Element,
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: (React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[]) | undefined;
+  ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[] | undefined;
   /**
    * The state of the component, passed as the second argument to the `render` callback.
    * State properties are automatically converted to data-* attributes.
@@ -59,10 +59,12 @@ export interface UseRenderParameters<State, RenderedElementType extends Element,
   defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
+export interface UseRenderState {}
 export declare namespace useRender {
-  type RenderProp<State = Record<string, unknown>> = UseRenderRenderProp<State>;
+  type State = UseRenderState;
+  type RenderProp<TState = Record<string, unknown>> = UseRenderRenderProp<TState>;
   type ElementProps<ElementType extends React.ElementType> = UseRenderElementProps<ElementType>;
-  type ComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, State, RenderFunctionProps>;
-  type Parameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<State, RenderedElementType, Enabled>;
+  type ComponentProps<ElementType extends React.ElementType, TState = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, TState, RenderFunctionProps>;
+  type Parameters<TState, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<TState, RenderedElementType, Enabled>;
   type ReturnValue<Enabled extends boolean | undefined> = UseRenderReturnValue<Enabled>;
 }

package/utils/FloatingPortalLite.d.ts

@@ -6,7 +6,9 @@ import { type FloatingPortal } from "../floating-ui-react/index.js";
  * @internal
  */
 export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
+export interface FloatingPortalLiteState {}
+export interface FloatingPortalLiteProps<TState> extends FloatingPortal.Props<TState> {}
 export declare namespace FloatingPortalLite {
-  type Props<State> = FloatingPortalLiteProps<State>;
+  type State = FloatingPortalLiteState;
+  type Props<TState> = FloatingPortalLiteProps<TState>;
 }

package/utils/InternalBackdrop.d.ts

@@ -3,13 +3,15 @@ import * as React from 'react';
  * @internal
  */
 export declare const InternalBackdrop: React.ForwardRefExoticComponent<InternalBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export interface InternalBackdropState {}
 export interface InternalBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The element to cut out of the backdrop.
    * This is useful for allowing certain elements to be interactive while the backdrop is present.
    */
-  cutout?: (Element | null) | undefined;
+  cutout?: Element | null | undefined;
 }
 export declare namespace InternalBackdrop {
+  type State = InternalBackdropState;
   type Props = InternalBackdropProps;
 }

package/utils/closePart.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ClosePartContextValue {
+  register: () => () => void;
+}
+export declare function useClosePartCount(): {
+  context: {
+    register: () => () => void;
+  };
+  hasClosePart: boolean;
+};
+export declare function ClosePartProvider(props: {
+  value: ClosePartContextValue;
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useClosePartRegistration(): void;
+export {};

package/utils/closePart.js

@@ -0,0 +1,48 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClosePartProvider = ClosePartProvider;
+exports.useClosePartCount = useClosePartCount;
+exports.useClosePartRegistration = useClosePartRegistration;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _jsxRuntime = require("react/jsx-runtime");
+const ClosePartContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ClosePartContext.displayName = "ClosePartContext";
+function useClosePartCount() {
+  const [closePartCount, setClosePartCount] = React.useState(0);
+  const register = (0, _useStableCallback.useStableCallback)(() => {
+    setClosePartCount(count => count + 1);
+    return () => {
+      setClosePartCount(count => Math.max(0, count - 1));
+    };
+  });
+  const context = React.useMemo(() => ({
+    register
+  }), [register]);
+  return {
+    context,
+    hasClosePart: closePartCount > 0
+  };
+}
+function ClosePartProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClosePartContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+function useClosePartRegistration() {
+  const context = React.useContext(ClosePartContext);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return context?.register();
+  }, [context]);
+}

package/utils/constants.d.ts

@@ -7,6 +7,10 @@ export declare const DISABLED_TRANSITIONS_STYLE: {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export declare const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+export declare const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
+export declare const LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";
+export declare const BASE_UI_SWIPE_IGNORE_SELECTOR = "[data-base-ui-swipe-ignore]";
+export declare const LEGACY_SWIPE_IGNORE_SELECTOR = "[data-swipe-ignore]";
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and
  * use `var(--available-height)` to limit their height.

package/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DROPDOWN_COLLISION_AVOIDANCE = exports.DISABLED_TRANSITIONS_STYLE = exports.CLICK_TRIGGER_IDENTIFIER = void 0;
+exports.DROPDOWN_COLLISION_AVOIDANCE = exports.DISABLED_TRANSITIONS_STYLE = exports.CLICK_TRIGGER_IDENTIFIER = exports.BASE_UI_SWIPE_IGNORE_SELECTOR = exports.BASE_UI_SWIPE_IGNORE_ATTRIBUTE = void 0;
 Object.defineProperty(exports, "EMPTY_ARRAY", {
   enumerable: true,
   get: function () {
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "EMPTY_OBJECT", {
     return _empty.EMPTY_OBJECT;
   }
 });
-exports.ownerVisuallyHidden = exports.TYPEAHEAD_RESET_MS = exports.POPUP_COLLISION_AVOIDANCE = exports.PATIENT_CLICK_THRESHOLD = void 0;
+exports.ownerVisuallyHidden = exports.TYPEAHEAD_RESET_MS = exports.POPUP_COLLISION_AVOIDANCE = exports.PATIENT_CLICK_THRESHOLD = exports.LEGACY_SWIPE_IGNORE_SELECTOR = exports.LEGACY_SWIPE_IGNORE_ATTRIBUTE = void 0;
 var _empty = require("@base-ui/utils/empty");
 const TYPEAHEAD_RESET_MS = exports.TYPEAHEAD_RESET_MS = 500;
 const PATIENT_CLICK_THRESHOLD = exports.PATIENT_CLICK_THRESHOLD = 500;
@@ -26,6 +26,10 @@ const DISABLED_TRANSITIONS_STYLE = exports.DISABLED_TRANSITIONS_STYLE = {
   }
 };
 const CLICK_TRIGGER_IDENTIFIER = exports.CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
+const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = exports.BASE_UI_SWIPE_IGNORE_ATTRIBUTE = 'data-base-ui-swipe-ignore';
+const LEGACY_SWIPE_IGNORE_ATTRIBUTE = exports.LEGACY_SWIPE_IGNORE_ATTRIBUTE = 'data-swipe-ignore';
+const BASE_UI_SWIPE_IGNORE_SELECTOR = exports.BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
+const LEGACY_SWIPE_IGNORE_SELECTOR = exports.LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and

package/utils/createBaseUIEventDetails.d.ts

@@ -91,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/utils/getElementAtPoint.d.ts

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

package/utils/getElementAtPoint.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getElementAtPoint = getElementAtPoint;
+function getElementAtPoint(doc, x, y) {
+  return typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(x, y) : null;
+}

package/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/utils/resolveAriaLabelledBy.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultLabelId = getDefaultLabelId;
+exports.resolveAriaLabelledBy = resolveAriaLabelledBy;
+function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}

package/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/utils/resolveValueLabel.js

@@ -23,10 +23,11 @@ function isGroupedItems(items) {
  */
 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;
@@ -35,7 +36,7 @@ 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;
     }
@@ -85,7 +86,8 @@ 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/utils/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
-  ref?: React.Ref<T> | undefined;
-};
+import type * as React from 'react';
+import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
+export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;
@@ -9,22 +8,11 @@ export interface FloatingUIOpenChangeDetails {
   nested: boolean;
   triggerElement?: Element | undefined;
 }
-export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
-  preventBaseUIHandler: () => void;
-  readonly baseUIHandlerPrevented?: boolean | undefined;
-};
 type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 /**
  * Adds a `preventBaseUIHandler` method to all event handlers.
  */
 export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
-/**
- * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
- *
- * @template Props Props to be spread on the rendered element.
- * @template State Component's internal state.
- */
-export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
 /**
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
@@ -34,19 +22,19 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
    * CSS class applied to the element, or a function that
    * returns a class based on the component’s state.
    */
-  className?: (string | ((state: State) => string | undefined)) | undefined;
+  className?: string | ((state: State) => string | undefined) | undefined;
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
+  render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
   /**
    * Style applied to the element, or a function that
    * returns a style object based on the component’s state.
    */
-  style?: (React.CSSProperties | ((state: State) => React.CSSProperties | undefined)) | undefined;
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
 export interface NativeButtonProps {
   /**
@@ -72,5 +60,4 @@ export interface NonNativeButtonProps {
  */
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
-export type Orientation = 'horizontal' | 'vertical';
-export {};
+export type Orientation = 'horizontal' | 'vertical';