@base-ui/react 1.4.0 → 1.5.0

package/esm/{field/root → internals/field-register-control}/useFieldControlRegistration.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import type { FieldValidityData } from "./FieldRoot.js";
+import type { FieldValidityData } from "../../field/root/FieldRoot.js";
 export interface FieldControlRegistration {
   controlRef: React.RefObject<any>;
-  getValue?: (() => unknown) | undefined;
   id: string | undefined;
+  getValue?: (() => unknown) | undefined;
   value: unknown;
 }
 export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
@@ -12,6 +12,7 @@ export interface UseFieldControlRegistrationParameters {
   invalid: boolean;
   markedDirtyRef: React.RefObject<boolean>;
   name: string | undefined;
+  setRegisteredFieldId: (id: string | undefined) => void;
   setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
   validityData: FieldValidityData;
 }

package/esm/{field/root → internals/field-register-control}/useFieldControlRegistration.js

@@ -1,17 +1,17 @@
 'use client';
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.js";
-import { useFormContext } from "../../form/FormContext.js";
+import { getCombinedFieldValidityData } from "../../field/utils/getCombinedFieldValidityData.js";
+import { useFormContext } from "../form-context/FormContext.js";
 export function useFieldControlRegistration(params) {
   const {
     commit,
     invalid,
     markedDirtyRef,
     name,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   } = params;
@@ -21,7 +21,7 @@ export function useFieldControlRegistration(params) {
   const activeFieldControlSourceRef = React.useRef(null);
   const registrationRef = React.useRef(null);
   const fallbackControlRef = React.useRef(null);
-  const getValue = useStableCallback(() => {
+  const getValueForForm = useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return undefined;
@@ -31,22 +31,17 @@ export function useFieldControlRegistration(params) {
     }
     return registration.value;
   });
-  const validate = useStableCallback((flushSync = true) => {
+  const validate = useStableCallback(() => {
     const registration = registrationRef.current;
     if (!registration) {
       return;
     }
     let nextValue = registration.value;
     if (nextValue === undefined) {
-      nextValue = getValue();
+      nextValue = getValueForForm();
     }
     markedDirtyRef.current = true;
-    if (!flushSync) {
-      commit(nextValue);
-    } else {
-      // Synchronously update the validity state so the submit event can be prevented.
-      ReactDOM.flushSync(() => commit(nextValue));
-    }
+    commit(nextValue);
   });
   function refreshRegistration() {
     const registration = registrationRef.current;
@@ -54,7 +49,7 @@ export function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
@@ -73,7 +68,7 @@ export function useFieldControlRegistration(params) {
     }
     let initialValue = registration.value;
     if (initialValue === undefined) {
-      initialValue = getValue();
+      initialValue = getValueForForm();
     }
     if (validityData.initialValue === null && initialValue !== null) {
       setValidityData(prev => ({
@@ -88,13 +83,13 @@ export function useFieldControlRegistration(params) {
       return;
     }
     formRef.current.fields.set(registration.id, {
-      getValue,
+      getValue: getValueForForm,
       name,
       controlRef: registration.controlRef ?? fallbackControlRef,
       validityData: getCombinedFieldValidityData(validityData, invalid),
       validate
     });
-  }, [formRef, getValue, invalid, name, validate, validityData]);
+  }, [formRef, getValueForForm, invalid, name, validate, validityData]);
   useIsoLayoutEffect(() => {
     const fields = formRef.current.fields;
     return () => {
@@ -110,12 +105,14 @@ export function useFieldControlRegistration(params) {
         activeFieldControlSourceRef.current = null;
         deleteRegistration();
         registrationRef.current = null;
+        setRegisteredFieldId(undefined);
       }
       return;
     }
     const previousId = registrationRef.current?.id;
     activeFieldControlSourceRef.current = source;
     registrationRef.current = registration;
+    setRegisteredFieldId(registration.id);
     if (previousId && previousId !== registration.id) {
       deleteRegistration(previousId);
     }

package/esm/internals/field-register-control/useRegisterFieldControl.d.ts

@@ -0,0 +1,2 @@
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
+export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], id: FieldControlRegistration['id'], value: FieldControlRegistration['value'], getFormValueOverride?: FieldControlRegistration['getValue'], enabled?: boolean): void;

package/esm/{field/root → internals/field-register-control}/useRegisterFieldControl.js

@@ -2,14 +2,8 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useFieldRootContext } from "./FieldRootContext.js";
-export function useRegisterFieldControl(controlRef, params) {
-  const {
-    enabled = true,
-    getValue,
-    id,
-    value
-  } = params;
+import { useFieldRootContext } from "../field-root-context/FieldRootContext.js";
+export function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true) {
   const {
     registerFieldControl
   } = useFieldRootContext();
@@ -22,14 +16,15 @@ export function useRegisterFieldControl(controlRef, params) {
     if (!source || !enabled) {
       return undefined;
     }
-    registerFieldControl(source, {
+    const registration = {
       controlRef,
-      getValue,
+      getValue: getFormValueOverride,
       id,
       value
-    });
+    };
+    registerFieldControl(source, registration);
     return () => {
       registerFieldControl(source, undefined);
     };
-  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+  }, [controlRef, enabled, getFormValueOverride, id, registerFieldControl, value]);
 }

package/esm/{field/root → internals/field-root-context}/FieldRootContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
+import type { FieldValidityData, FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Form } from "../../form/index.js";
-import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
-import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
+import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
+import type { FieldControlRegistration } from "../field-register-control/useFieldControlRegistration.js";
 export interface FieldRootContext {
   invalid: boolean | undefined;
   name: string | undefined;
@@ -26,5 +26,6 @@ export interface FieldRootContext {
   registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
+export declare const DEFAULT_FIELD_ROOT_CONTEXT: FieldRootContext;
 export declare const FieldRootContext: React.Context<FieldRootContext>;
 export declare function useFieldRootContext(optional?: boolean): FieldRootContext;

package/esm/{field/root → internals/field-root-context}/FieldRootContext.js

@@ -2,10 +2,10 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-import { NOOP } from "../../utils/noop.js";
-import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
-import { EMPTY_OBJECT } from "../../utils/constants.js";
-export const FieldRootContext = /*#__PURE__*/React.createContext({
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { NOOP } from "../noop.js";
+import { DEFAULT_FIELD_ROOT_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE } from "../field-constants/constants.js";
+export const DEFAULT_FIELD_ROOT_CONTEXT = {
   invalid: undefined,
   name: undefined,
   validityData: {
@@ -42,7 +42,8 @@ export const FieldRootContext = /*#__PURE__*/React.createContext({
     },
     commit: async () => {}
   }
-});
+};
+export const FieldRootContext = /*#__PURE__*/React.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
 if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
 export function useFieldRootContext(optional = true) {
   const context = React.useContext(FieldRootContext);

package/esm/internals/field-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldRootContext, useFieldRootContext } from "./FieldRootContext.js";
+export type { FieldRootContext as FieldRootContextType } from "./FieldRootContext.js";

package/esm/internals/field-root-context/index.js

@@ -0,0 +1 @@
+export { FieldRootContext, useFieldRootContext } from "./FieldRootContext.js";

package/esm/internals/filter.d.ts

@@ -0,0 +1,16 @@
+export declare function getFilter(options?: GetFilterParameters): Filter;
+export interface GetFilterParameters extends Intl.CollatorOptions {
+  /**
+   * The locale to use for string comparison.
+   * Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument | undefined;
+}
+export interface Filter {
+  /** Returns whether the item matches the query anywhere. */
+  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /** Returns whether the item starts with the query. */
+  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /** Returns whether the item ends with the query. */
+  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+}

package/esm/internals/filter.js

@@ -0,0 +1,56 @@
+import { stringifyAsLabel } from "./resolveValueLabel.js";
+const filterCache = new Map();
+export function getFilter(options = {}) {
+  const mergedOptions = {
+    usage: 'search',
+    sensitivity: 'base',
+    ignorePunctuation: true,
+    ...options
+  };
+  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
+  const cachedFilter = filterCache.get(cacheKey);
+  if (cachedFilter) {
+    return cachedFilter;
+  }
+  const collator = new Intl.Collator(options.locale, mergedOptions);
+  const filter = {
+    contains(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      for (let i = 0; i <= itemString.length - query.length; i += 1) {
+        if (collator.compare(itemString.slice(i, i + query.length), query) === 0) {
+          return true;
+        }
+      }
+      return false;
+    },
+    startsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      return collator.compare(itemString.slice(0, query.length), query) === 0;
+    },
+    endsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = stringifyAsLabel(item, itemToString);
+      const queryLength = query.length;
+      return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
+    }
+  };
+  filterCache.set(cacheKey, filter);
+  return filter;
+}
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}

package/{form → esm/internals/form-context}/FormContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { FieldValidityData } from "../field/root/FieldRoot.js";
-import type { Form } from "./Form.js";
+import type { FieldValidityData } from "../../field/root/FieldRoot.js";
+import type { Form } from "../../form/Form.js";
 export type Errors = Record<string, string | string[]>;
 export interface FormContext {
   errors: Errors;
@@ -8,7 +8,11 @@ export interface FormContext {
   formRef: React.RefObject<{
     fields: Map<string, {
       name: string | undefined;
-      validate: (flushSync?: boolean | undefined) => void;
+      /**
+       * After this returns, the field registry entry reflects the latest synchronous
+       * validity verdict. Async validators do not block submit.
+       */
+      validate: () => void;
       validityData: FieldValidityData;
       controlRef: React.RefObject<HTMLElement | null>;
       getValue: () => unknown;

package/esm/{form → internals/form-context}/FormContext.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { NOOP } from "../utils/noop.js";
+import { NOOP } from "../noop.js";
 export const FormContext = /*#__PURE__*/React.createContext({
   formRef: {
     current: {

package/esm/internals/form-context/index.d.ts

@@ -0,0 +1,2 @@
+export { FormContext, useFormContext } from "./FormContext.js";
+export type { Errors } from "./FormContext.js";

package/esm/internals/form-context/index.js

@@ -0,0 +1 @@
+export { FormContext, useFormContext } from "./FormContext.js";

package/esm/{labelable-provider → internals/labelable-provider}/LabelableContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HTMLProps } from "../utils/types.js";
+import { HTMLProps } from "../types.js";
 export interface LabelableContext {
   /**
    * The `id` of the labelable element.

package/esm/{labelable-provider → internals/labelable-provider}/LabelableContext.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { NOOP } from "../utils/noop.js";
+import { NOOP } from "../noop.js";
 /**
  * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
  * with an accessible name (label) and description.

package/esm/{labelable-provider → internals/labelable-provider}/LabelableProvider.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
-import { mergeProps } from "../merge-props/index.js";
-import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { mergeProps } from "../../merge-props/index.js";
+import { useBaseUiId } from "../useBaseUiId.js";
 import { LabelableContext, useLabelableContext } from "./LabelableContext.js";
 
 /**

package/esm/internals/labelable-provider/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./LabelableProvider.js";
+export { useAriaLabelledBy } from "./useAriaLabelledBy.js";
+export { useLabelableContext } from "./LabelableContext.js";
+export { useLabelableId } from "./useLabelableId.js";
+export { useLabel } from "./useLabel.js";
+export type { UseLabelParameters, UseLabelReturnValue } from "./useLabel.js";

package/esm/internals/labelable-provider/index.js

@@ -0,0 +1,5 @@
+export * from "./LabelableProvider.js";
+export { useAriaLabelledBy } from "./useAriaLabelledBy.js";
+export { useLabelableContext } from "./LabelableContext.js";
+export { useLabelableId } from "./useLabelableId.js";
+export { useLabel } from "./useLabel.js";

package/esm/{labelable-provider → internals/labelable-provider}/useAriaLabelledBy.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { useBaseUiId } from "../useBaseUiId.js";
 
 /**
  * @internal

package/esm/{labelable-provider → internals/labelable-provider}/useLabel.js

@@ -3,8 +3,8 @@
 import { isHTMLElement } from '@floating-ui/utils/dom';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { getTarget } from "../floating-ui-react/utils.js";
-import { useRegisteredLabelId } from "../utils/useRegisteredLabelId.js";
+import { getTarget } from "../../floating-ui-react/utils.js";
+import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 import { useLabelableContext } from "./LabelableContext.js";
 export function useLabel(params = {}) {
   const {

package/esm/{labelable-provider → internals/labelable-provider}/useLabelableId.js

@@ -5,8 +5,8 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { isElement } from '@floating-ui/utils/dom';
-import { NOOP } from "../utils/noop.js";
-import { useBaseUiId } from "../utils/useBaseUiId.js";
+import { NOOP } from "../noop.js";
+import { useBaseUiId } from "../useBaseUiId.js";
 import { useLabelableContext } from "./LabelableContext.js";
 export function useLabelableId(params = {}) {
   const {

package/esm/{utils → internals}/reason-parts.d.ts

@@ -28,9 +28,8 @@ export declare const scrub: "scrub";
 export declare const cancelOpen: "cancel-open";
 export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
+export declare const missing: "missing";
+export declare const initial: "initial";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
-export declare const windowResize: "window-resize";
-export declare const dayPress: "day-press";
-export declare const monthChange: "month-change";
-export declare const valuePropChange: "value-prop-change";
+export declare const windowResize: "window-resize";

package/esm/{utils → internals}/reason-parts.js

@@ -28,9 +28,8 @@ export const scrub = 'scrub';
 export const cancelOpen = 'cancel-open';
 export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
+export const missing = 'missing';
+export const initial = 'initial';
 export const imperativeAction = 'imperative-action';
 export const swipe = 'swipe';
-export const windowResize = 'window-resize';
-export const dayPress = 'day-press';
-export const monthChange = 'month-change';
-export const valuePropChange = 'value-prop-change';
+export const windowResize = 'window-resize';

package/esm/{types → internals}/temporal/temporal.d.ts

@@ -3,7 +3,7 @@
  *
  * ```
  * // Example taken from the TemporalAdapterDateFns.ts file.
- * declare module '@base-ui/react/types' {
+ * declare module '@base-ui/react/internals/temporal' {
  *   interface TemporalSupportedObjectLookup {
  *     'date-fns': Date;
  *   }

package/esm/{temporal-adapter-date-fns → internals/temporal-adapter-date-fns}/TemporalAdapterDateFns.d.ts

@@ -1,6 +1,6 @@
 import { Locale as DateFnsLocale } from 'date-fns/locale';
-import { TemporalAdapterFormats, DateBuilderReturnType, TemporalTimezone, TemporalAdapter } from "../types/temporal/index.js";
-declare module '@base-ui/react/types/temporal' {
+import { TemporalAdapterFormats, DateBuilderReturnType, TemporalTimezone, TemporalAdapter } from "../temporal/index.js";
+declare module '@base-ui/react/internals/temporal' {
   interface TemporalSupportedObjectLookup {
     'date-fns': Date;
   }

package/esm/{temporal-adapter-date-fns → internals/temporal-adapter-date-fns}/TemporalAdapterDateFns.js

@@ -82,9 +82,6 @@ const FORMATS = {
   localizedDateWithFullMonthAndWeekDay: 'PPPP',
   localizedNumericDate: 'P' // Note: Day and month are padded on enUS unlike Luxon
 };
-
-// TODO Temporal: Replace with `@base-ui/react/types` path when Temporal components will become public.
-
 export class TemporalAdapterDateFns {
   isTimezoneCompatible = true;
   lib = 'date-fns';
@@ -109,13 +106,22 @@ export class TemporalAdapterDateFns {
       return null;
     }
     const date = new Date(value);
+
+    // Date-only strings (e.g. "2026-04-06") are parsed as UTC midnight by the JS spec,
+    // so we must use UTC getters to extract the intended face-value components.
+    // Datetime strings (e.g. "2026-04-06T14:30") are parsed as local time,
+    // so local getters correctly return the face-value components.
+    const isDateOnly = typeof value === 'string' && !value.includes('T');
     if (timezone === 'system' || timezone === 'default') {
+      if (isDateOnly) {
+        return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+      }
       return date;
     }
 
     // `new TZDate(value, timezone)` returns a date with the same timestamp `new Date(value)` would return,
-    // whereas we want to create that represents the string in the given timezone.
-    return new TZDate(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds(), timezone);
+    // whereas we want to create a date that represents the string in the given timezone.
+    return new TZDate(isDateOnly ? date.getUTCFullYear() : date.getFullYear(), isDateOnly ? date.getUTCMonth() : date.getMonth(), isDateOnly ? date.getUTCDate() : date.getDate(), isDateOnly ? date.getUTCHours() : date.getHours(), isDateOnly ? date.getUTCMinutes() : date.getMinutes(), isDateOnly ? date.getUTCSeconds() : date.getSeconds(), isDateOnly ? date.getUTCMilliseconds() : date.getMilliseconds(), timezone);
   };
   parse = (value, format, timezone) => {
     const date = parse(value, format, new Date(), {
@@ -137,14 +143,12 @@ export class TemporalAdapterDateFns {
   };
   setTimezone = (value, timezone) => {
     const isSystemTimezone = timezone === 'system' || timezone === 'default';
-    if (value instanceof TZDate) {
-      if (isSystemTimezone) {
-        return this.toJsDate(value);
-      }
-      return value.withTimeZone(timezone);
-    }
+    const canChangeTz = typeof value?.withTimeZone === 'function';
     if (isSystemTimezone) {
-      return value;
+      return this.toJsDate(value);
+    }
+    if (canChangeTz) {
+      return value.withTimeZone(timezone);
     }
     return new TZDate(value, timezone);
   };

package/{temporal-adapter-luxon → esm/internals/temporal-adapter-luxon}/TemporalAdapterLuxon.d.ts

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon';
-import { TemporalAdapterFormats, DateBuilderReturnType, TemporalTimezone, TemporalAdapter } from "../types/index.js";
+import { TemporalAdapterFormats, DateBuilderReturnType, TemporalTimezone, TemporalAdapter } from "../temporal/index.js";
 export declare class TemporalAdapterLuxon implements TemporalAdapter {
   isTimezoneCompatible: boolean;
   lib: string;

package/esm/{temporal-adapter-luxon → internals/temporal-adapter-luxon}/TemporalAdapterLuxon.js

@@ -32,7 +32,7 @@ const FORMATS = {
 };
 
 // Temporarily disabled to avoid docs being built with `| DateTime`
-// declare module '@base-ui/react/types' {
+// declare module '@base-ui/react/internals/temporal' {
 //   interface TemporalSupportedObjectLookup {
 //     luxon: DateTime;
 //   }

package/{utils → esm/internals}/types.d.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
 export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
+export type MaybeBaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & Partial<Pick<BaseUIEvent<E>, 'preventBaseUIHandler' | 'baseUIHandlerPrevented'>>;
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;

package/esm/{use-button → internals/use-button}/useButton.js

@@ -6,9 +6,9 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { makeEventPreventable, mergeProps } from "../merge-props/index.js";
+import { makeEventPreventable, mergeProps } from "../../merge-props/index.js";
 import { useCompositeRootContext } from "../composite/root/CompositeRootContext.js";
-import { useFocusableWhenDisabled } from "../utils/useFocusableWhenDisabled.js";
+import { useFocusableWhenDisabled } from "../../utils/useFocusableWhenDisabled.js";
 export function useButton(parameters = {}) {
   const {
     disabled = false,
@@ -73,9 +73,7 @@ export function useButton(parameters = {}) {
       onPointerDown: externalOnPointerDown,
       ...otherExternalProps
     } = externalProps;
-    const type = isNativeButton ? 'button' : undefined;
     return mergeProps({
-      type,
       onClick(event) {
         if (disabled) {
           event.preventDefault();
@@ -160,9 +158,11 @@ export function useButton(parameters = {}) {
         }
         externalOnPointerDown?.(event);
       }
-    }, !isNativeButton ? {
+    }, isNativeButton ? {
+      type: 'button'
+    } : {
       role: 'button'
-    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+    }, focusableWhenDisabledProps, otherExternalProps);
   }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = useStableCallback(element => {
     elementRef.current = element;

package/esm/{utils → internals}/useAnimationsFinished.js

@@ -3,7 +3,7 @@
 import * as ReactDOM from 'react-dom';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { resolveRef } from "./resolveRef.js";
+import { resolveRef } from "../utils/resolveRef.js";
 import { TransitionStatusDataAttributes } from "./stateAttributesMapping.js";
 
 /**

package/esm/{utils → internals}/usePressAndHold.js

@@ -55,7 +55,7 @@ export function usePressAndHold(params) {
     unsubscribeFromGlobalContextMenuRef.current();
     movesAfterTouchRef.current = 0;
   });
-  const startAutoChange = useStableCallback(triggerNativeEvent => {
+  function startAutoChange(triggerNativeEvent) {
     stopAutoChange();
     const element = elementRef.current;
     if (!element) {
@@ -87,7 +87,7 @@ export function usePressAndHold(params) {
         }
       });
     });
-  });
+  }
   React.useEffect(() => () => stopAutoChange(), [stopAutoChange]);
   const pointerHandlers = {
     onTouchStart() {

package/esm/{utils → internals}/useRenderElement.js

@@ -4,11 +4,11 @@ import { useMergedRefs, useMergedRefsN } from '@base-ui/utils/useMergedRefs';
 import { getReactElementRef } from '@base-ui/utils/getReactElementRef';
 import { mergeObjects } from '@base-ui/utils/mergeObjects';
 import { warn } from '@base-ui/utils/warn';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { getStateAttributesProps } from "./getStateAttributesProps.js";
-import { resolveClassName } from "./resolveClassName.js";
-import { resolveStyle } from "./resolveStyle.js";
+import { resolveClassName } from "../utils/resolveClassName.js";
+import { resolveStyle } from "../utils/resolveStyle.js";
 import { mergeProps, mergePropsN, mergeClassNames } from "../merge-props/index.js";
-import { EMPTY_OBJECT } from "./constants.js";
 import { createElement as _createElement } from "react";
 /**
  * Renders a Base UI element.
@@ -121,6 +121,8 @@ function evaluateRenderProp(element, render, props, state) {
     // so we can throw before with custom message.
     if (process.env.NODE_ENV !== 'production') {
       if (! /*#__PURE__*/React.isValidElement(newElement)) {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(['Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.', 'A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.', 'https://base-ui.com/r/invalid-render-prop'].join('\n'));
       }
     }