@base-ui/react 1.1.0 → 1.2.0

package/esm/utils/useValueChanged.js

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

package/field/control/FieldControl.d.ts

@@ -13,14 +13,14 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
-export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const FieldControl: React.ForwardRefExoticComponent<Omit<FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export type FieldControlState = FieldRoot.State;
 export interface FieldControlProps extends BaseUIComponentProps<'input', FieldControl.State> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: (value: string, eventDetails: FieldControl.ChangeEventDetails) => void;
-  defaultValue?: React.ComponentProps<'input'>['defaultValue'];
+  onValueChange?: ((value: string, eventDetails: FieldControl.ChangeEventDetails) => void) | undefined;
+  defaultValue?: React.ComponentProps<'input'>['defaultValue'] | undefined;
 }
 export type FieldControlChangeEventReason = typeof REASONS.none;
 export type FieldControlChangeEventDetails = BaseUIChangeEventDetails<FieldControl.ChangeEventReason>;

package/field/control/FieldControl.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldControl = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
 var _FieldRootContext = require("../root/FieldRootContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
@@ -18,6 +18,7 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _useField = require("../useField");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
+var _utils = require("../../floating-ui-react/utils");
 /**
  * The form control to label and validate.
  * Renders an `<input>` element.
@@ -38,20 +39,13 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
     disabled: disabledProp = false,
     onValueChange,
     defaultValue,
+    autoFocus = false,
     ...elementProps
   } = componentProps;
   const {
     state: fieldState,
     name: fieldName,
-    disabled: fieldDisabled
-  } = (0, _FieldRootContext.useFieldRootContext)();
-  const disabled = fieldDisabled || disabledProp;
-  const name = fieldName ?? nameProp;
-  const state = React.useMemo(() => ({
-    ...fieldState,
-    disabled
-  }), [fieldState, disabled]);
-  const {
+    disabled: fieldDisabled,
     setTouched,
     setDirty,
     validityData,
@@ -60,6 +54,12 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
     validationMode,
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const state = {
+    ...fieldState,
+    disabled
+  };
   const {
     labelId
   } = (0, _LabelableContext.useLabelableContext)();
@@ -74,20 +74,20 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
       setFilled(false);
     }
   }, [validation.inputRef, setFilled, valueProp]);
-  const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
+  const inputRef = React.useRef(null);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (autoFocus && inputRef.current === (0, _utils.activeElement)((0, _owner.ownerDocument)(inputRef.current))) {
+      setFocused(true);
+    }
+  }, [autoFocus, setFocused]);
+  const [valueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: valueProp,
     default: defaultValue,
     name: 'FieldControl',
     state: 'value'
   });
   const isControlled = valueProp !== undefined;
-  const setValue = (0, _useStableCallback.useStableCallback)((nextValue, eventDetails) => {
-    onValueChange?.(nextValue, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
-    }
-    setValueUnwrapped(nextValue);
-  });
+  const value = isControlled ? valueUnwrapped : undefined;
   (0, _useField.useField)({
     id,
     name,
@@ -97,7 +97,7 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
     controlRef: validation.inputRef
   });
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, inputRef],
     state,
     props: [{
       id,
@@ -105,6 +105,7 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
       name,
       ref: validation.inputRef,
       'aria-labelledby': labelId,
+      autoFocus,
       ...(isControlled ? {
         value
       } : {
@@ -112,7 +113,7 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
       }),
       onChange(event) {
         const inputValue = event.currentTarget.value;
-        setValue(inputValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
+        onValueChange?.(inputValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
         setDirty(inputValue !== validityData.initialValue);
         setFilled(inputValue !== '');
       },

package/field/error/FieldError.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FieldRoot } from "../root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.
@@ -8,7 +9,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)
  */
 export declare const FieldError: React.ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export type FieldErrorState = FieldRoot.State;
+export interface FieldErrorState extends FieldRoot.State {
+  transitionStatus: TransitionStatus;
+}
 export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.State> {
   /**
    * Determines whether to show the error message according to the field’s
@@ -16,7 +19,7 @@ export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldError.
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.
    */
-  match?: boolean | keyof ValidityState;
+  match?: (boolean | keyof ValidityState) | undefined;
 }
 export declare namespace FieldError {
   type State = FieldErrorState;

package/field/error/FieldError.js

@@ -14,6 +14,15 @@ var _constants = require("../utils/constants");
 var _FormContext = require("../../form/FormContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _jsxRuntime = require("react/jsx-runtime");
+const stateAttributesMapping = {
+  ..._constants.fieldValidityMapping,
+  ..._stateAttributesMapping.transitionStatusMapping
+};
+
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.
@@ -31,7 +40,7 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     validityData,
-    state,
+    state: fieldState,
     name
   } = (0, _FieldRootContext.useFieldRootContext)(false);
   const {
@@ -49,6 +58,11 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
   } else {
     rendered = validityData.state.valid === false;
   }
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(rendered);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!rendered || !id) {
       return undefined;
@@ -58,18 +72,48 @@ const FieldError = exports.FieldError = /*#__PURE__*/React.forwardRef(function F
       setMessageIds(v => v.filter(item => item !== id));
     };
   }, [rendered, id, setMessageIds]);
+  const errorRef = React.useRef(null);
+  const [lastRenderedMessage, setLastRenderedMessage] = React.useState(null);
+  const [lastRenderedMessageKey, setLastRenderedMessageKey] = React.useState(null);
+  const errorMessage = formError || (validityData.errors.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+    children: validityData.errors.map(message => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      children: message
+    }, message))
+  }) : validityData.error);
+  let errorKey = validityData.error;
+  if (formError != null) {
+    errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;
+  } else if (validityData.errors.length > 1) {
+    errorKey = JSON.stringify(validityData.errors);
+  }
+  if (rendered && errorKey !== lastRenderedMessageKey) {
+    setLastRenderedMessageKey(errorKey);
+    setLastRenderedMessage(errorMessage);
+  }
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open: rendered,
+    ref: errorRef,
+    onComplete() {
+      if (!rendered) {
+        setMounted(false);
+      }
+    }
+  });
+  const state = {
+    ...fieldState,
+    transitionStatus
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: forwardedRef,
+    ref: [forwardedRef, errorRef],
     state,
     props: [{
       id,
-      children: formError || (validityData.errors.length > 1 ? /*#__PURE__*/React.createElement('ul', {}, validityData.errors.map(message => /*#__PURE__*/React.createElement('li', {
-        key: message
-      }, message))) : validityData.error)
+      children: rendered ? errorMessage : lastRenderedMessage
     }, elementProps],
-    stateAttributesMapping: _constants.fieldValidityMapping
+    stateAttributesMapping,
+    enabled: mounted
   });
-  if (!rendered) {
+  if (!mounted) {
     return null;
   }
   return element;

package/field/item/FieldItem.d.ts

@@ -14,7 +14,7 @@ export interface FieldItemProps extends BaseUIComponentProps<'div', FieldItem.St
    * The `disabled` prop on `<Field.Root>` takes precedence over this.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace FieldItem {
   type State = FieldRoot.State;

package/field/item/FieldItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/field/label/FieldLabel.d.ts

@@ -17,7 +17,7 @@ export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabe
    * This is useful to avoid inheriting label behaviors on `<button>` controls (such as `<Select.Trigger>` and `<Combobox.Trigger>`), including avoiding `:hover` on the button when hovering the label, and preventing clicks on the label from firing on the button.
    * @default true
    */
-  nativeLabel?: boolean;
+  nativeLabel?: boolean | undefined;
 }
 export declare namespace FieldLabel {
   type State = FieldLabelState;

package/field/label/FieldLabel.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FieldLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _dom = require("@floating-ui/utils/dom");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
@@ -72,10 +73,14 @@ const FieldLabel = exports.FieldLabel = /*#__PURE__*/React.forwardRef(function F
       const isLabelTag = labelRef.current.tagName === 'LABEL';
       if (nativeLabel) {
         if (!isLabelTag) {
-          (0, _error.error)('<Field.Label> was not rendered as a <label> element, which does not match the `nativeLabel` prop on the component. Ensure that the element passed to the `render` prop of <Field.Label> is a real <label>, or set the `nativeLabel` prop on the component to `false`.');
+          const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+          const message = '<Field.Label> expected a <label> element because the `nativeLabel` prop is true. ' + 'Rendering a non-<label> disables native label association, so `htmlFor` will not ' + 'work. Use a real <label> in the `render` prop, or set `nativeLabel` to `false`.';
+          (0, _error.error)(`${message}${ownerStackMessage}`);
         }
       } else if (isLabelTag) {
-        (0, _error.error)('<Field.Label> was rendered as a <label> element, which does not match the `nativeLabel` prop on the component. Ensure that the element passed to the `render` prop of <Field.Label> is not a real <label>, or set the `nativeLabel` prop on the component to `true`.');
+        const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+        const message = '<Field.Label> expected a non-<label> element because the `nativeLabel` prop is false. ' + 'Rendering a <label> assumes native label behavior while Base UI treats it as ' + 'non-native, which can cause unexpected pointer behavior. Use a non-<label> in the ' + '`render` prop, or set `nativeLabel` to `true`.';
+        (0, _error.error)(`${message}${ownerStackMessage}`);
       }
     }, [nativeLabel]);
   }

package/field/root/FieldRoot.d.ts

@@ -45,19 +45,19 @@ export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.St
    * Takes precedence over the `disabled` prop on the `<Field.Control>` component.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    * Takes precedence over the `name` prop on the `<Field.Control>` component.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * A function for custom validation. Return a string or an array of strings with
    * the error message(s) if the value is invalid, or `null` if the value is valid.
    * Asynchronous functions are supported, but they do not prevent form submission
    * when using `validationMode="onSubmit"`.
    */
-  validate?: (value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>;
+  validate?: ((value: unknown, formValues: Form.Values) => string | string[] | null | Promise<string | string[] | null>) | undefined;
   /**
    * Determines when the field should be validated.
    * This takes precedence over the `validationMode` prop on `<Form>`.
@@ -68,33 +68,33 @@ export interface FieldRootProps extends BaseUIComponentProps<'div', FieldRoot.St
    *
    * @default 'onSubmit'
    */
-  validationMode?: Form.ValidationMode;
+  validationMode?: Form.ValidationMode | undefined;
   /**
    * How long to wait between `validate` callbacks if
    * `validationMode="onChange"` is used. Specified in milliseconds.
    * @default 0
    */
-  validationDebounceTime?: number;
+  validationDebounceTime?: number | undefined;
   /**
    * Whether the field is invalid.
    * Useful when the field state is controlled by an external library.
    */
-  invalid?: boolean;
+  invalid?: boolean | undefined;
   /**
    * Whether the field's value has been changed from its initial value.
    * Useful when the field state is controlled by an external library.
    */
-  dirty?: boolean;
+  dirty?: boolean | undefined;
   /**
    * Whether the field has been touched.
    * Useful when the field state is controlled by an external library.
    */
-  touched?: boolean;
+  touched?: boolean | undefined;
   /**
    * A ref to imperative actions.
    * - `validate`: Validates the field when called.
    */
-  actionsRef?: React.RefObject<FieldRoot.Actions | null>;
+  actionsRef?: React.RefObject<FieldRoot.Actions | null> | undefined;
 }
 export declare namespace FieldRoot {
   type State = FieldRootState;

package/field/root/FieldRootContext.d.ts

@@ -21,7 +21,7 @@ export interface FieldRootContext {
   validationDebounceTime: number;
   shouldValidateOnChange: () => boolean;
   state: FieldRoot.State;
-  markedDirtyRef: React.MutableRefObject<boolean>;
+  markedDirtyRef: React.RefObject<boolean>;
   validation: UseFieldValidationReturnValue;
 }
 export declare const FieldRootContext: React.Context<FieldRootContext>;

package/field/useField.d.ts

@@ -1,6 +1,6 @@
 export declare function useField(params: UseFieldParameters): void;
 export interface UseFieldParameters {
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   value: unknown;
   getValue?: (() => unknown) | undefined;
   id: string | undefined;

package/field/useField.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/field/validity/FieldValidity.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { FieldValidityData } from "../root/FieldRoot.js";
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Used to display a custom message based on the field’s validity.
  * Requires `children` to be a function that accepts field validity state as an argument.
@@ -9,6 +10,7 @@ import { FieldValidityData } from "../root/FieldRoot.js";
 export declare const FieldValidity: React.FC<FieldValidity.Props>;
 export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
   validity: FieldValidityData['state'];
+  transitionStatus: TransitionStatus;
 }
 export interface FieldValidityProps {
   /**

package/field/validity/FieldValidity.js

@@ -9,6 +9,7 @@ exports.FieldValidity = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _FieldRootContext = require("../root/FieldRootContext");
 var _getCombinedFieldValidityData = require("../utils/getCombinedFieldValidityData");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Used to display a custom message based on the field’s validity.
@@ -24,13 +25,18 @@ const FieldValidity = exports.FieldValidity = function FieldValidity(props) {
     validityData,
     invalid
   } = (0, _FieldRootContext.useFieldRootContext)(false);
+  const combinedFieldValidityData = React.useMemo(() => (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid), [validityData, invalid]);
+  const isInvalid = combinedFieldValidityData.state.valid === false;
+  const {
+    transitionStatus
+  } = (0, _useTransitionStatus.useTransitionStatus)(isInvalid);
   const fieldValidityState = React.useMemo(() => {
-    const combinedFieldValidityData = (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid);
     return {
       ...combinedFieldValidityData,
-      validity: combinedFieldValidityData.state
+      validity: combinedFieldValidityData.state,
+      transitionStatus
     };
-  }, [validityData, invalid]);
+  }, [combinedFieldValidityData, transitionStatus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: children(fieldValidityState)
   });

package/fieldset/legend/FieldsetLegend.js

@@ -35,9 +35,9 @@ const FieldsetLegend = exports.FieldsetLegend = /*#__PURE__*/React.forwardRef(fu
       setLegendId(undefined);
     };
   }, [setLegendId, id]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled: disabled ?? false
-  }), [disabled]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,

package/fieldset/root/FieldsetRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * Groups the fieldset legend and the associated fields.
+ * Groups a shared legend with related controls.
  * Renders a `<fieldset>` element.
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)

package/fieldset/root/FieldsetRoot.js

@@ -11,7 +11,7 @@ var _FieldsetRootContext = require("./FieldsetRootContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
- * Groups the fieldset legend and the associated fields.
+ * Groups a shared legend with related controls.
  * Renders a `<fieldset>` element.
  *
  * Documentation: [Base UI Fieldset](https://base-ui.com/react/components/fieldset)
@@ -24,9 +24,9 @@ const FieldsetRoot = exports.FieldsetRoot = /*#__PURE__*/React.forwardRef(functi
     ...elementProps
   } = componentProps;
   const [legendId, setLegendId] = React.useState(undefined);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('fieldset', componentProps, {
     ref: forwardedRef,
     state,

package/floating-ui-react/components/FloatingDelayGroup.d.ts

@@ -12,7 +12,7 @@ export interface FloatingDelayGroupProps {
    * This is useful if you want grouping to “last” longer than the close delay,
    * for example if there is no close delay at all.
    */
-  timeoutMs?: number;
+  timeoutMs?: number | undefined;
 }
 /**
  * Experimental next version of `FloatingDelayGroup` to become the default
@@ -26,11 +26,6 @@ export interface FloatingDelayGroupProps {
  */
 export declare function FloatingDelayGroup(props: FloatingDelayGroupProps): React.JSX.Element;
 interface UseDelayGroupOptions {
-  /**
-   * Whether delay grouping should be enabled.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * Whether the trigger this hook is used in has opened the tooltip.
    */
@@ -40,7 +35,7 @@ interface UseDelayGroupReturn {
   /**
    * The delay reference object.
    */
-  delayRef: React.MutableRefObject<Delay>;
+  delayRef: React.RefObject<Delay>;
   /**
    * Whether animations should be removed.
    */

package/floating-ui-react/components/FloatingDelayGroup.js

@@ -78,7 +78,6 @@ function useDelayGroup(context, options = {
   const store = 'rootStore' in context ? context.rootStore : context;
   const floatingId = store.useState('floatingId');
   const {
-    enabled = true,
     open
   } = options;
   const groupContext = React.useContext(FloatingDelayGroupContext);
@@ -100,9 +99,6 @@ function useDelayGroup(context, options = {
       currentContextRef.current = null;
       delayRef.current = initialDelayRef.current;
     }
-    if (!enabled) {
-      return undefined;
-    }
     if (!currentIdRef.current) {
       return undefined;
     }
@@ -124,11 +120,8 @@ function useDelayGroup(context, options = {
       unset();
     }
     return undefined;
-  }, [enabled, open, floatingId, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout, store]);
+  }, [open, floatingId, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!enabled) {
-      return;
-    }
     if (!open) {
       return;
     }
@@ -155,7 +148,7 @@ function useDelayGroup(context, options = {
       setIsInstantPhase(false);
       prevContext?.setIsInstantPhase(false);
     }
-  }, [enabled, open, floatingId, store, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout]);
+  }, [open, floatingId, store, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     return () => {
       currentContextRef.current = null;

package/floating-ui-react/components/FloatingFocusManager.d.ts

@@ -11,19 +11,14 @@ export interface FloatingFocusManagerProps {
   /**
    * The interaction type used to open the floating element.
    */
-  openInteractionType?: InteractionType | null;
+  openInteractionType?: (InteractionType | null) | undefined;
   /**
    * Whether or not the focus manager should be disabled. Useful to delay focus
    * management until after a transition completes or some other conditional
    * state.
    * @default false
    */
-  disabled?: boolean;
-  /**
-   * The order in which focus cycles.
-   * @default ['content']
-   */
-  order?: Array<'reference' | 'floating' | 'content'>;
+  disabled?: boolean | undefined;
   /**
    * Determines the element to focus when the floating element is opened.
    *
@@ -35,7 +30,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void);
+  initialFocus?: (boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
   /**
    * Determines the element to focus when the floating element is closed.
    *
@@ -47,7 +42,7 @@ export interface FloatingFocusManagerProps {
    *   or `false`/`undefined` to do nothing.
    * @default true
    */
-  returnFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void);
+  returnFocus?: (boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => boolean | HTMLElement | null | void)) | undefined;
   /**
    * Determines where focus should be restored if focus inside the floating element is lost
    * (such as due to the removal of the currently focused element from the DOM).
@@ -58,14 +53,14 @@ export interface FloatingFocusManagerProps {
    * - `false`: do not restore focus
    * @default false
    */
-  restoreFocus?: boolean | 'popup';
+  restoreFocus?: (boolean | 'popup') | undefined;
   /**
    * Determines if focus is “modal”, meaning focus is fully trapped inside the
    * floating element and outside content cannot be accessed. This includes
    * screen reader virtual cursors.
    * @default true
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * Determines whether `focusout` event listeners that control whether the
    * floating element should be closed if the focus moves outside of it are
@@ -73,29 +68,24 @@ export interface FloatingFocusManagerProps {
    * focus management.
    * @default true
    */
-  closeOnFocusOut?: boolean;
-  /**
-   * Returns a list of elements that should be considered part of the
-   * floating element.
-   */
-  getInsideElements?: () => Element[];
+  closeOnFocusOut?: boolean | undefined;
   /**
    * Overrides the element to focus when tabbing forward out of the floating element.
    */
-  nextFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  nextFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
   /**
    * Overrides the element to focus when tabbing backward out of the floating element.
    */
-  previousFocusableElement?: HTMLElement | React.RefObject<HTMLElement | null> | null;
+  previousFocusableElement?: (HTMLElement | React.RefObject<HTMLElement | null> | null) | undefined;
   /**
    * Ref to the focus guard preceding the floating element content.
    * Can be useful to focus the popup progammatically.
    */
-  beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null>;
+  beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null> | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */
-  externalTree?: FloatingTreeStore;
+  externalTree?: FloatingTreeStore | undefined;
 }
 /**
  * Provides focus management for the floating element.