@base-ui/react 1.1.0 → 1.3.0

package/field/root/FieldRootContext.js

@@ -25,26 +25,19 @@ const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createCon
   },
   setValidityData: _noop.NOOP,
   disabled: undefined,
-  touched: false,
+  touched: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
   setTouched: _noop.NOOP,
-  dirty: false,
+  dirty: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
   setDirty: _noop.NOOP,
-  filled: false,
+  filled: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
   setFilled: _noop.NOOP,
-  focused: false,
+  focused: _constants.DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
   setFocused: _noop.NOOP,
   validate: () => null,
   validationMode: 'onSubmit',
   validationDebounceTime: 0,
   shouldValidateOnChange: () => false,
-  state: {
-    disabled: false,
-    valid: null,
-    touched: false,
-    dirty: false,
-    filled: false,
-    focused: false
-  },
+  state: _constants.DEFAULT_FIELD_ROOT_STATE,
   markedDirtyRef: {
     current: false
   },

package/field/root/useFieldValidation.js

@@ -197,6 +197,7 @@ function useFieldValidation(params) {
       if (currentFieldData) {
         formRef.current.fields.set(controlId, {
           ...currentFieldData,
+          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
           ...(0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(nextValidityData, invalid)
         });
       }
@@ -217,9 +218,9 @@ function useFieldValidation(params) {
         commit(event.currentTarget.value, true);
         return;
       }
-      if (invalid) {
-        return;
-      }
+
+      // When validating on change, run client-side validation even if
+      // externally invalid
       const element = event.currentTarget;
       if (element.value === '') {
         // Ignore the debounce time for empty values.
@@ -235,7 +236,7 @@ function useFieldValidation(params) {
         commit(element.value);
       }
     }
-  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, invalid, validationDebounceTime, shouldValidateOnChange]);
+  }, getValidationProps(externalProps)), [getValidationProps, clearErrors, name, timeout, commit, validationDebounceTime, shouldValidateOnChange]);
   return React.useMemo(() => ({
     getValidationProps,
     getInputValidationProps,

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/utils/constants.d.ts

@@ -1,3 +1,4 @@
+import type { FieldRootState } from "../root/FieldRoot.js";
 export declare const DEFAULT_VALIDITY_STATE: {
   badInput: boolean;
   customError: boolean;
@@ -11,6 +12,8 @@ export declare const DEFAULT_VALIDITY_STATE: {
   valid: null;
   valueMissing: boolean;
 };
+export declare const DEFAULT_FIELD_STATE_ATTRIBUTES: Pick<FieldRootState, 'valid' | 'touched' | 'dirty' | 'filled' | 'focused'>;
+export declare const DEFAULT_FIELD_ROOT_STATE: FieldRootState;
 export declare const fieldValidityMapping: {
   valid(value: boolean | null): Record<string, string> | null;
 };

package/field/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = void 0;
+exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_ROOT_STATE = void 0;
 var _FieldControlDataAttributes = require("../control/FieldControlDataAttributes");
 const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   badInput: false,
@@ -18,6 +18,17 @@ const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   valid: null,
   valueMissing: false
 };
+const DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = exports.DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
 const fieldValidityMapping = exports.fieldValidityMapping = {
   valid(value) {
     if (value === null) {

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.
@@ -8,7 +9,14 @@ import { FieldValidityData } from "../root/FieldRoot.js";
  */
 export declare const FieldValidity: React.FC<FieldValidity.Props>;
 export interface FieldValidityState extends Omit<FieldValidityData, 'state'> {
+  /**
+   * The validity state.
+   */
   validity: FieldValidityData['state'];
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus;
 }
 export interface FieldValidityProps {
   /**
@@ -22,7 +30,7 @@ export interface FieldValidityProps {
    * </Field.Validity>
    * ```
    */
-  children: (state: FieldValidity.State) => React.ReactNode;
+  children: (state: FieldValidityState) => React.ReactNode;
 }
 export declare namespace FieldValidity {
   type State = FieldValidityState;

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.d.ts

@@ -13,7 +13,7 @@ export interface FieldsetLegendState {
    */
   disabled: boolean;
 }
-export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegend.State> {}
+export interface FieldsetLegendProps extends BaseUIComponentProps<'div', FieldsetLegendState> {}
 export declare namespace FieldsetLegend {
   type State = FieldsetLegendState;
   type Props = FieldsetLegendProps;

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)
@@ -13,7 +13,7 @@ export interface FieldsetRootState {
    */
   disabled: boolean;
 }
-export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRoot.State> {}
+export interface FieldsetRootProps extends BaseUIComponentProps<'fieldset', FieldsetRootState> {}
 export declare namespace FieldsetRoot {
   type State = FieldsetRootState;
   type Props = FieldsetRootProps;

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

@@ -10,7 +10,7 @@ exports.useDelayGroup = useDelayGroup;
 var React = _interopRequireWildcard(require("react"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useHover = require("../hooks/useHover");
+var _useHoverShared = require("../hooks/useHoverShared");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -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;
     }
@@ -145,7 +138,7 @@ function useDelayGroup(context, options = {
     currentIdRef.current = floatingId;
     delayRef.current = {
       open: 0,
-      close: (0, _useHover.getDelay)(initialDelayRef.current, 'close')
+      close: (0, _useHoverShared.getDelay)(initialDelayRef.current, 'close')
     };
     if (prevId !== null && prevId !== floatingId) {
       setIsInstantPhase(true);
@@ -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,29 @@ 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.
+   * Can be useful to focus the popup programmatically.
    */
-  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;
+  /**
+   * Additional elements that should be treated as part of the floating subtree
+   * even if they are rendered outside the floating element itself.
+   */
+  getInsideElements?: (() => Array<Element | null | undefined>) | undefined;
 }
 /**
  * Provides focus management for the floating element.