@base-ui/react 1.2.0 → 1.3.0

package/esm/tooltip/root/TooltipRoot.d.ts

@@ -40,7 +40,7 @@ export interface TooltipRootProps<Payload = unknown> {
    * Determines which axis the tooltip should track the cursor on.
    * @default 'none'
    */
-  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
+  trackCursorAxis?: 'none' | 'x' | 'y' | 'both' | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: Unmounts the tooltip popup.
@@ -68,12 +68,12 @@ export interface TooltipRootProps<Payload = unknown> {
    * This is useful in conjunction with the `open` prop to create a controlled tooltip.
    * There's no need to specify this prop when the tooltip is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the tooltip is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface TooltipRootActions {
   unmount: () => void;

package/esm/tooltip/root/TooltipRoot.js

@@ -113,7 +113,7 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
-    referencePress: true
+    referencePress: () => store.select('closeOnClick')
   });
   const clientPoint = useClientPoint(floatingRootContext, {
     enabled: !disabled && trackCursorAxis !== 'none',

package/esm/tooltip/store/TooltipStore.d.ts

@@ -9,6 +9,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   trackCursorAxis: 'none' | 'x' | 'y' | 'both';
   disableHoverablePopup: boolean;
   openChangeReason: TooltipRoot.ChangeEventReason | null;
+  closeOnClick: boolean;
   closeDelay: number;
   hasViewport: boolean;
 };
@@ -22,6 +23,7 @@ declare const selectors: {
   trackCursorAxis: (state: State<unknown>) => "none" | "both" | "x" | "y";
   disableHoverablePopup: (state: State<unknown>) => boolean;
   lastOpenChangeReason: (state: State<unknown>) => import("../index.js").TooltipRootChangeEventReason | null;
+  closeOnClick: (state: State<unknown>) => boolean;
   closeDelay: (state: State<unknown>) => number;
   hasViewport: (state: State<unknown>) => boolean;
   open: (state: {

package/esm/tooltip/store/TooltipStore.js

@@ -13,6 +13,7 @@ const selectors = {
   trackCursorAxis: createSelector(state => state.trackCursorAxis),
   disableHoverablePopup: createSelector(state => state.disableHoverablePopup),
   lastOpenChangeReason: createSelector(state => state.openChangeReason),
+  closeOnClick: createSelector(state => state.closeOnClick),
   closeDelay: createSelector(state => state.closeDelay),
   hasViewport: createSelector(state => state.hasViewport)
 };
@@ -100,6 +101,7 @@ function createInitialState() {
     trackCursorAxis: 'none',
     disableHoverablePopup: false,
     openChangeReason: null,
+    closeOnClick: true,
     closeDelay: 0,
     hasViewport: false
   };

package/esm/tooltip/trigger/TooltipTrigger.d.ts

@@ -17,7 +17,7 @@ export interface TooltipTriggerState {
    */
   open: boolean;
 }
-export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentProps<'button', TooltipTrigger.State> {
+export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentProps<'button', TooltipTriggerState> {
   /**
    * A handle to associate the trigger with a tooltip.
    */
@@ -31,6 +31,11 @@ export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentP
    * @default 600
    */
   delay?: number | undefined;
+  /**
+   * Whether the tooltip should close when this trigger is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean | undefined;
   /**
    * How long to wait before closing the tooltip. Specified in milliseconds.
    * @default 0

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -27,6 +27,7 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     payload,
     disabled: disabledProp,
     delay,
+    closeOnClick = true,
     closeDelay,
     id: idProp,
     ...elementProps
@@ -48,6 +49,7 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     isMountedByThisTrigger
   } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload,
+    closeOnClick,
     closeDelay: closeDelayWithDefault
   });
   const providerContext = useTooltipProviderContext();
@@ -105,6 +107,9 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
     props: [hoverProps, focusProps, rootTriggerProps, {
+      onPointerDown() {
+        store.set('closeOnClick', closeOnClick);
+      },
       id: thisTriggerId,
       [TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
     }, elementProps],

package/esm/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/esm/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/esm/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/esm/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/esm/use-button/useButton.js

@@ -14,14 +14,12 @@ export function useButton(parameters = {}) {
     disabled = false,
     focusableWhenDisabled,
     tabIndex = 0,
-    native: isNativeButton = true
+    native: isNativeButton = true,
+    composite: compositeProp
   } = parameters;
   const elementRef = React.useRef(null);
-  const isCompositeItem = useCompositeRootContext(true) !== undefined;
-  const isValidLink = useStableCallback(() => {
-    const element = elementRef.current;
-    return Boolean(element?.tagName === 'A' && element?.href);
-  });
+  const compositeRootContext = useCompositeRootContext(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
   const {
     props: focusableWhenDisabledProps
   } = useFocusableWhenDisabled({
@@ -37,7 +35,7 @@ export 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.captureOwnerStack?.() || '';
@@ -91,39 +89,67 @@ export function useButton(parameters = {}) {
         }
       },
       onKeyDown(event) {
-        if (!disabled) {
-          makeEventPreventable(event);
-          externalOnKeyDown?.(event);
+        if (disabled) {
+          return;
         }
+        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) {
-          makeEventPreventable(event);
-          externalOnKeyUp?.(event);
+        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);
         }
       },
@@ -137,7 +163,7 @@ export function useButton(parameters = {}) {
     }, !isNativeButton ? {
       role: 'button'
     } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isNativeButton, isValidLink]);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = useStableCallback(element => {
     elementRef.current = element;
     updateDisabled();
@@ -149,4 +175,7 @@ export function useButton(parameters = {}) {
 }
 function isButtonElement(elem) {
   return isHTMLElement(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
 }

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

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ClosePartContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ClosePartContext.displayName = "ClosePartContext";
+export function useClosePartCount() {
+  const [closePartCount, setClosePartCount] = React.useState(0);
+  const register = useStableCallback(() => {
+    setClosePartCount(count => count + 1);
+    return () => {
+      setClosePartCount(count => Math.max(0, count - 1));
+    };
+  });
+  const context = React.useMemo(() => ({
+    register
+  }), [register]);
+  return {
+    context,
+    hasClosePart: closePartCount > 0
+  };
+}
+export function ClosePartProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(ClosePartContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useClosePartRegistration() {
+  const context = React.useContext(ClosePartContext);
+  useIsoLayoutEffect(() => {
+    return context?.register();
+  }, [context]);
+}

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

@@ -7,6 +7,10 @@ export const DISABLED_TRANSITIONS_STYLE = {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
+export const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = 'data-base-ui-swipe-ignore';
+export const LEGACY_SWIPE_IGNORE_ATTRIBUTE = 'data-swipe-ignore';
+export const BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
+export const LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and

package/esm/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/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/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/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';