@base-ui/react 1.3.0 → 1.4.1

package/esm/field/description/FieldDescriptionDataAttributes.js

@@ -4,11 +4,11 @@ export let FieldDescriptionDataAttributes = /*#__PURE__*/function (FieldDescript
    */
   FieldDescriptionDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldDescriptionDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldDescriptionDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/error/FieldError.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.
@@ -17,7 +17,7 @@ export interface FieldErrorState extends FieldRootState {
 }
 export interface FieldErrorProps extends BaseUIComponentProps<'div', FieldErrorState> {
   /**
-   * Determines whether to show the error message according to the field’s
+   * Determines whether to show the error message according to the field's
    * [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
    * Specifying `true` will always show the error message, and lets external libraries
    * control the visibility.

package/esm/field/error/FieldError.js

@@ -2,15 +2,15 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...fieldValidityMapping,
@@ -29,6 +29,7 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     id: idProp,
     className,
     match,
+    style,
     ...elementProps
   } = componentProps;
   const id = useBaseUiId(idProp);
@@ -44,13 +45,14 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
     errors
   } = useFormContext();
   const formError = name ? errors[name] : null;
+  const hasSpecificMatch = typeof match === 'string';
   let rendered = false;
-  if (formError || match === true) {
+  if (match === true) {
     rendered = true;
-  } else if (match) {
+  } else if (hasSpecificMatch) {
     rendered = Boolean(validityData.state[match]);
   } else {
-    rendered = validityData.state.valid === false;
+    rendered = Boolean(formError) || validityData.state.valid === false;
   }
   const {
     mounted,
@@ -69,11 +71,12 @@ export const FieldError = /*#__PURE__*/React.forwardRef(function FieldError(comp
   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__*/_jsx("ul", {
+  const clientErrorMessage = validityData.errors.length > 1 ? /*#__PURE__*/_jsx("ul", {
     children: validityData.errors.map(message => /*#__PURE__*/_jsx("li", {
       children: message
     }, message))
-  }) : validityData.error);
+  }) : validityData.error;
+  const errorMessage = hasSpecificMatch ? clientErrorMessage : formError || clientErrorMessage;
   let errorKey = validityData.error;
   if (formError != null) {
     errorKey = Array.isArray(formError) ? JSON.stringify(formError) : formError;

package/esm/field/error/FieldErrorDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldErrorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/esm/field/error/FieldErrorDataAttributes.js

@@ -1,15 +1,15 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
   FieldErrorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldErrorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldErrorDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/item/FieldItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
  * Renders a `<div>` element.

package/esm/field/item/FieldItem.js

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { FieldItemContext } from "./FieldItemContext.js";
-import { LabelableProvider } from "../../labelable-provider/index.js";
+import { LabelableProvider } from "../../internals/labelable-provider/index.js";
 import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
 
 /**
@@ -19,6 +19,7 @@ export const FieldItem = /*#__PURE__*/React.forwardRef(function FieldItem(compon
   const {
     render,
     className,
+    style,
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;

package/esm/field/label/FieldLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label that is automatically associated with the field control.
  * Renders a `<label>` element.
@@ -12,7 +12,7 @@ export interface FieldLabelState extends FieldRootState {}
 export interface FieldLabelProps extends BaseUIComponentProps<'label', FieldLabelState> {
   /**
    * Whether the component renders a native `<label>` element when replacing it via the `render` prop.
-   * Set to `false` if the rendered element is not a label (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a label (for example, `<div>`).
    *
    * 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

package/esm/field/label/FieldLabel.js

@@ -3,11 +3,11 @@
 import * as React from 'react';
 import { error } from '@base-ui/utils/error';
 import { SafeReact } from '@base-ui/utils/safeReact';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
-import { fieldValidityMapping } from "../utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { useLabel } from "../../labelable-provider/useLabel.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useLabel } from "../../internals/labelable-provider/useLabel.js";
 
 /**
  * An accessible label that is automatically associated with the field control.
@@ -19,6 +19,7 @@ export const FieldLabel = /*#__PURE__*/React.forwardRef(function FieldLabel(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     nativeLabel = true,
     ...elementProps

package/esm/field/label/FieldLabelDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldLabelDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/esm/field/label/FieldLabelDataAttributes.js

@@ -4,11 +4,11 @@ export let FieldLabelDataAttributes = /*#__PURE__*/function (FieldLabelDataAttri
    */
   FieldLabelDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldLabelDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldLabelDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/field/root/FieldRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Form } from "../../form/index.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups all parts of the field.
  * Renders a `<div>` element.

package/esm/field/root/FieldRoot.js

@@ -2,13 +2,14 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { FieldRootContext } from "./FieldRootContext.js";
-import { DEFAULT_VALIDITY_STATE, fieldValidityMapping } from "../utils/constants.js";
+import { FieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { DEFAULT_VALIDITY_STATE, fieldValidityMapping } from "../../internals/field-constants/constants.js";
 import { useFieldsetRootContext } from "../../fieldset/root/FieldsetRootContext.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { LabelableProvider } from "../../labelable-provider/index.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { LabelableProvider } from "../../internals/labelable-provider/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useFieldValidation } from "./useFieldValidation.js";
+import { useFieldControlRegistration } from "../../internals/field-register-control/useFieldControlRegistration.js";
 
 /**
  * @internal
@@ -32,6 +33,7 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     dirty: dirtyProp,
     touched: touchedProp,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -95,6 +97,14 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     markedDirtyRef.current = true;
     validation.commit(validityData.value);
   }, [validation, validityData]);
+  const registerFieldControl = useFieldControlRegistration({
+    commit: validation.commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  });
   React.useImperativeHandle(actionsRef, () => ({
     validate: handleImperativeValidate
   }), [handleImperativeValidate]);
@@ -118,8 +128,9 @@ const FieldRootInner = /*#__PURE__*/React.forwardRef(function FieldRootInner(com
     shouldValidateOnChange,
     state,
     markedDirtyRef,
+    registerFieldControl,
     validation
-  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, validation]);
+  }), [invalid, name, validityData, disabled, touched, setTouched, dirty, setDirty, filled, setFilled, focused, setFocused, validate, validationMode, validationDebounceTime, shouldValidateOnChange, state, registerFieldControl, validation]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,
     state,

package/esm/field/root/useFieldValidation.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Form } from "../../form/index.js";
-import type { HTMLProps } from "../../utils/types.js";
+import type { HTMLProps } from "../../internals/types.js";
 import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
 export declare function useFieldValidation(params: UseFieldValidationParameters): UseFieldValidationReturnValue;
 export interface UseFieldValidationParameters {

package/esm/field/root/useFieldValidation.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { DEFAULT_VALIDITY_STATE } from "../utils/constants.js";
-import { useFormContext } from "../../form/FormContext.js";
+import { DEFAULT_VALIDITY_STATE } from "../../internals/field-constants/constants.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
 import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.js";
 const validityKeys = Object.keys(DEFAULT_VALIDITY_STATE);
 function isOnlyValueMissing(state) {

package/esm/field/validity/FieldValidity.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FieldValidityData } from "../root/FieldRoot.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
- * Used to display a custom message based on the field’s validity.
+ * 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.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)

package/esm/field/validity/FieldValidity.js

@@ -1,12 +1,12 @@
 'use client';
 
 import * as React from 'react';
-import { useFieldRootContext } from "../root/FieldRootContext.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
 import { getCombinedFieldValidityData } from "../utils/getCombinedFieldValidityData.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 
 /**
- * Used to display a custom message based on the field’s validity.
+ * 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.
  *
  * Documentation: [Base UI Field](https://base-ui.com/react/components/field)

package/esm/fieldset/legend/FieldsetLegend.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label that is automatically associated with the fieldset.
  * Renders a `<div>` element.

package/esm/fieldset/legend/FieldsetLegend.js

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useFieldsetRootContext } from "../root/FieldsetRootContext.js";
 /**
  * An accessible label that is automatically associated with the fieldset.
@@ -15,6 +15,7 @@ export const FieldsetLegend = /*#__PURE__*/React.forwardRef(function FieldsetLeg
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/fieldset/root/FieldsetRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups a shared legend with related controls.
  * Renders a `<fieldset>` element.

package/esm/fieldset/root/FieldsetRoot.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { FieldsetRootContext } from "./FieldsetRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Groups a shared legend with related controls.
@@ -15,6 +15,7 @@ export const FieldsetRoot = /*#__PURE__*/React.forwardRef(function FieldsetRoot(
   const {
     render,
     className,
+    style,
     disabled = false,
     ...elementProps
   } = componentProps;

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

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { useTimeout, Timeout } from '@base-ui/utils/useTimeout';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { getDelay } from "../hooks/useHoverShared.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FloatingDelayGroupContext = /*#__PURE__*/React.createContext({
   hasProvider: false,