@base-ui/react 1.6.0 → 1.8.0

package/otp-field/root/OTPFieldRoot.mjs

@@ -38,7 +38,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     'aria-labelledby': ariaLabelledByProp,
     id: idProp,
     autoComplete = 'one-time-code',
-    defaultValue,
+    defaultValue = '',
     value: valueProp,
     onValueChange,
     onValueComplete: onValueCompleteProp,
@@ -118,6 +118,8 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   useIsoLayoutEffect(() => {
     setFilled(filled);
   }, [filled, setFilled]);
+
+  /* istanbul ignore else -- `process.env.NODE_ENV` is a build-time constant under test */
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
@@ -139,6 +141,8 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     };
   });
   function requestSubmit() {
+    // The hidden validation input only renders for a valid `length`, but the slots always do,
+    // so fall back to the owning form of the first slot.
     let formElement = validation.inputRef.current?.form ?? inputRefs.current[0]?.form ?? null;
     if (form) {
       const associatedElement = ownerDocument(rootRef.current).getElementById(form);
@@ -160,13 +164,6 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
     validation.change(value);
-    const pendingCompleteValue = pendingCompleteValueRef.current;
-    if (pendingCompleteValue != null) {
-      pendingCompleteValueRef.current = null;
-      if (pendingCompleteValue.value === value) {
-        completeValue(value, pendingCompleteValue.eventDetails);
-      }
-    }
     const pendingFocus = pendingFocusRef.current;
     if (pendingFocus != null) {
       pendingFocusRef.current = null;
@@ -174,10 +171,18 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
         focusInput(pendingFocus.index);
       }
     }
+    const pendingCompleteValue = pendingCompleteValueRef.current;
+    if (pendingCompleteValue != null) {
+      pendingCompleteValueRef.current = null;
+      if (pendingCompleteValue.value === value) {
+        completeValue(value, pendingCompleteValue.eventDetails);
+      }
+    }
   });
   const setValue = useStableCallback((nextValue, details) => {
     const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
-    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
+    const canComplete = details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste;
+    const completeEventDetails = canComplete && normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? createGenericEventDetails(details.reason, details.event) : null;
     if (normalizedValue === valueRef.current) {
       if (completeEventDetails != null) {
         completeValue(normalizedValue, completeEventDetails);
@@ -324,12 +329,6 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function getCompleteEventDetails(details) {
-  if (details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste) {
-    return createGenericEventDetails(details.reason, details.event);
-  }
-  return null;
-}
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
   return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;

package/otp-field/root/OTPFieldRootDataAttributes.d.mts

@@ -1,42 +1,40 @@
-export declare enum OTPFieldRootDataAttributes {
-  /**
-   * Present when all slots are filled.
-   */
-  complete = "data-complete",
-  /**
-   * Present when the OTP field is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the OTP field is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the OTP field is required.
-   */
-  required = "data-required",
-  /**
-   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
-   */
-  valid = "data-valid",
-  /**
-   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the OTP field has been touched (when wrapped in Field.Root).
-   */
-  touched = "data-touched",
-  /**
-   * Present when the OTP field's value has changed (when wrapped in Field.Root).
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the OTP field contains at least one character.
-   */
-  filled = "data-filled",
-  /**
-   * Present when one of the OTP field inputs is focused.
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when all slots are filled.
+ */
+export declare const complete = "data-complete";
+/**
+ * Present when the OTP field is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the OTP field is readonly.
+ */
+export declare const readonly = "data-readonly";
+/**
+ * Present when the OTP field is required.
+ */
+export declare const required = "data-required";
+/**
+ * Present when the OTP field is in a valid state (when wrapped in Field.Root).
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the OTP field has been touched (when wrapped in Field.Root).
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the OTP field's value has changed (when wrapped in Field.Root).
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the OTP field contains at least one character.
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when one of the OTP field inputs is focused.
+ */
+export declare const focused = "data-focused";

package/otp-field/root/OTPFieldRootDataAttributes.d.ts

@@ -1,42 +1,40 @@
-export declare enum OTPFieldRootDataAttributes {
-  /**
-   * Present when all slots are filled.
-   */
-  complete = "data-complete",
-  /**
-   * Present when the OTP field is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the OTP field is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the OTP field is required.
-   */
-  required = "data-required",
-  /**
-   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
-   */
-  valid = "data-valid",
-  /**
-   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the OTP field has been touched (when wrapped in Field.Root).
-   */
-  touched = "data-touched",
-  /**
-   * Present when the OTP field's value has changed (when wrapped in Field.Root).
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the OTP field contains at least one character.
-   */
-  filled = "data-filled",
-  /**
-   * Present when one of the OTP field inputs is focused.
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when all slots are filled.
+ */
+export declare const complete = "data-complete";
+/**
+ * Present when the OTP field is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the OTP field is readonly.
+ */
+export declare const readonly = "data-readonly";
+/**
+ * Present when the OTP field is required.
+ */
+export declare const required = "data-required";
+/**
+ * Present when the OTP field is in a valid state (when wrapped in Field.Root).
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the OTP field has been touched (when wrapped in Field.Root).
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the OTP field's value has changed (when wrapped in Field.Root).
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the OTP field contains at least one character.
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when one of the OTP field inputs is focused.
+ */
+export declare const focused = "data-focused";

package/otp-field/root/OTPFieldRootDataAttributes.js

@@ -3,47 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OTPFieldRootDataAttributes = void 0;
-let OTPFieldRootDataAttributes = exports.OTPFieldRootDataAttributes = /*#__PURE__*/function (OTPFieldRootDataAttributes) {
-  /**
-   * Present when all slots are filled.
-   */
-  OTPFieldRootDataAttributes["complete"] = "data-complete";
-  /**
-   * Present when the OTP field is disabled.
-   */
-  OTPFieldRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the OTP field is readonly.
-   */
-  OTPFieldRootDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the OTP field is required.
-   */
-  OTPFieldRootDataAttributes["required"] = "data-required";
-  /**
-   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the OTP field has been touched (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the OTP field's value has changed (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the OTP field contains at least one character.
-   */
-  OTPFieldRootDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when one of the OTP field inputs is focused.
-   */
-  OTPFieldRootDataAttributes["focused"] = "data-focused";
-  return OTPFieldRootDataAttributes;
-}({});
+exports.valid = exports.touched = exports.required = exports.readonly = exports.invalid = exports.focused = exports.filled = exports.disabled = exports.dirty = exports.complete = void 0;
+/**
+ * Present when all slots are filled.
+ */
+const complete = exports.complete = 'data-complete';
+/**
+ * Present when the OTP field is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the OTP field is readonly.
+ */
+const readonly = exports.readonly = 'data-readonly';
+/**
+ * Present when the OTP field is required.
+ */
+const required = exports.required = 'data-required';
+/**
+ * Present when the OTP field is in a valid state (when wrapped in Field.Root).
+ */
+const valid = exports.valid = 'data-valid';
+/**
+ * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
+ */
+const invalid = exports.invalid = 'data-invalid';
+/**
+ * Present when the OTP field has been touched (when wrapped in Field.Root).
+ */
+const touched = exports.touched = 'data-touched';
+/**
+ * Present when the OTP field's value has changed (when wrapped in Field.Root).
+ */
+const dirty = exports.dirty = 'data-dirty';
+/**
+ * Present when the OTP field contains at least one character.
+ */
+const filled = exports.filled = 'data-filled';
+/**
+ * Present when one of the OTP field inputs is focused.
+ */
+const focused = exports.focused = 'data-focused';

package/otp-field/root/OTPFieldRootDataAttributes.mjs

@@ -1,43 +1,40 @@
-export let OTPFieldRootDataAttributes = /*#__PURE__*/function (OTPFieldRootDataAttributes) {
-  /**
-   * Present when all slots are filled.
-   */
-  OTPFieldRootDataAttributes["complete"] = "data-complete";
-  /**
-   * Present when the OTP field is disabled.
-   */
-  OTPFieldRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the OTP field is readonly.
-   */
-  OTPFieldRootDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the OTP field is required.
-   */
-  OTPFieldRootDataAttributes["required"] = "data-required";
-  /**
-   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the OTP field has been touched (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the OTP field's value has changed (when wrapped in Field.Root).
-   */
-  OTPFieldRootDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the OTP field contains at least one character.
-   */
-  OTPFieldRootDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when one of the OTP field inputs is focused.
-   */
-  OTPFieldRootDataAttributes["focused"] = "data-focused";
-  return OTPFieldRootDataAttributes;
-}({});
+/**
+ * Present when all slots are filled.
+ */
+export const complete = 'data-complete';
+/**
+ * Present when the OTP field is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the OTP field is readonly.
+ */
+export const readonly = 'data-readonly';
+/**
+ * Present when the OTP field is required.
+ */
+export const required = 'data-required';
+/**
+ * Present when the OTP field is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the OTP field has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the OTP field's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the OTP field contains at least one character.
+ */
+export const filled = 'data-filled';
+/**
+ * Present when one of the OTP field inputs is focused.
+ */
+export const focused = 'data-focused';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base-ui/react",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
   "license": "MIT",
@@ -26,11 +26,11 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.29.2",
-    "@floating-ui/react-dom": "^2.1.8",
-    "@floating-ui/utils": "^0.2.11",
+    "@babel/runtime": "^7.29.7",
+    "@floating-ui/react-dom": "^2.1.9",
+    "@floating-ui/utils": "^0.2.12",
     "use-sync-external-store": "^1.6.0",
-    "@base-ui/utils": "0.3.1"
+    "@base-ui/utils": "0.4.0"
   },
   "peerDependencies": {
     "@date-fns/tz": "^1.2.0",
@@ -690,34 +690,6 @@
         "default": "./use-render/index.mjs"
       }
     },
-    "./internals/areArraysEqual": {
-      "import": {
-        "types": "./internals/areArraysEqual.d.mts",
-        "default": "./internals/areArraysEqual.mjs"
-      },
-      "require": {
-        "types": "./internals/areArraysEqual.d.ts",
-        "default": "./internals/areArraysEqual.js"
-      },
-      "default": {
-        "types": "./internals/areArraysEqual.d.mts",
-        "default": "./internals/areArraysEqual.mjs"
-      }
-    },
-    "./internals/clamp": {
-      "import": {
-        "types": "./internals/clamp.d.mts",
-        "default": "./internals/clamp.mjs"
-      },
-      "require": {
-        "types": "./internals/clamp.d.ts",
-        "default": "./internals/clamp.js"
-      },
-      "default": {
-        "types": "./internals/clamp.d.mts",
-        "default": "./internals/clamp.mjs"
-      }
-    },
     "./internals/composite": {
       "import": {
         "types": "./internals/composite/index.d.mts",
@@ -872,6 +844,20 @@
         "default": "./internals/form-context/index.mjs"
       }
     },
+    "./internals/getDisabledMountTransitionStyles": {
+      "import": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.mts",
+        "default": "./internals/getDisabledMountTransitionStyles.mjs"
+      },
+      "require": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.ts",
+        "default": "./internals/getDisabledMountTransitionStyles.js"
+      },
+      "default": {
+        "types": "./internals/getDisabledMountTransitionStyles.d.mts",
+        "default": "./internals/getDisabledMountTransitionStyles.mjs"
+      }
+    },
     "./internals/getStateAttributesProps": {
       "import": {
         "types": "./internals/getStateAttributesProps.d.mts",
@@ -970,20 +956,6 @@
         "default": "./internals/serializeValue.mjs"
       }
     },
-    "./internals/shadowDom": {
-      "import": {
-        "types": "./internals/shadowDom.d.mts",
-        "default": "./internals/shadowDom.mjs"
-      },
-      "require": {
-        "types": "./internals/shadowDom.d.ts",
-        "default": "./internals/shadowDom.js"
-      },
-      "default": {
-        "types": "./internals/shadowDom.d.mts",
-        "default": "./internals/shadowDom.mjs"
-      }
-    },
     "./internals/stateAttributesMapping": {
       "import": {
         "types": "./internals/stateAttributesMapping.d.mts",
@@ -1096,6 +1068,20 @@
         "default": "./internals/useBaseUiId.mjs"
       }
     },
+    "./internals/useAnchorPositioning": {
+      "import": {
+        "types": "./internals/useAnchorPositioning.d.mts",
+        "default": "./internals/useAnchorPositioning.mjs"
+      },
+      "require": {
+        "types": "./internals/useAnchorPositioning.d.ts",
+        "default": "./internals/useAnchorPositioning.js"
+      },
+      "default": {
+        "types": "./internals/useAnchorPositioning.d.mts",
+        "default": "./internals/useAnchorPositioning.mjs"
+      }
+    },
     "./internals/useAnimationsFinished": {
       "import": {
         "types": "./internals/useAnimationsFinished.d.mts",
@@ -1183,7 +1169,67 @@
   },
   "imports": {
     "#test-utils": "./test/index.ts",
-    "#formatErrorMessage": "@base-ui/utils/formatErrorMessage"
+    "#formatErrorMessage": "@base-ui/utils/formatErrorMessage",
+    "#prehydration/tabs/indicator": {
+      "browser": {
+        "import": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        },
+        "require": {
+          "types": "./internals/prehydrationScript.stub.d.ts",
+          "default": "./internals/prehydrationScript.stub.js"
+        },
+        "default": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.mts",
+          "default": "./tabs/indicator/prehydrationScript.min.mjs"
+        },
+        "require": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.ts",
+          "default": "./tabs/indicator/prehydrationScript.min.js"
+        },
+        "default": {
+          "types": "./tabs/indicator/prehydrationScript.min.d.mts",
+          "default": "./tabs/indicator/prehydrationScript.min.mjs"
+        }
+      }
+    },
+    "#prehydration/slider/thumb": {
+      "browser": {
+        "import": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        },
+        "require": {
+          "types": "./internals/prehydrationScript.stub.d.ts",
+          "default": "./internals/prehydrationScript.stub.js"
+        },
+        "default": {
+          "types": "./internals/prehydrationScript.stub.d.mts",
+          "default": "./internals/prehydrationScript.stub.mjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./slider/thumb/prehydrationScript.min.d.mts",
+          "default": "./slider/thumb/prehydrationScript.min.mjs"
+        },
+        "require": {
+          "types": "./slider/thumb/prehydrationScript.min.d.ts",
+          "default": "./slider/thumb/prehydrationScript.min.js"
+        },
+        "default": {
+          "types": "./slider/thumb/prehydrationScript.min.d.mts",
+          "default": "./slider/thumb/prehydrationScript.min.mjs"
+        }
+      }
+    }
   },
   "main": "./index.js",
   "types": "./index.d.ts"

package/popover/arrow/PopoverArrow.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.mjs";
+import type { Align, Side } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Displays an element positioned against the popover anchor.

package/popover/arrow/PopoverArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Align, Side } from "../../utils/useAnchorPositioning.js";
+import type { Align, Side } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element positioned against the popover anchor.

package/popover/arrow/PopoverArrow.js

@@ -24,9 +24,7 @@ const PopoverArrow = exports.PopoverArrow = /*#__PURE__*/React.forwardRef(functi
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _PopoverRootContext.usePopoverRootContext)();
+  const store = (0, _PopoverRootContext.usePopoverRootContext)();
   const open = store.useState('open');
   const {
     arrowRef,

package/popover/arrow/PopoverArrow.mjs

@@ -19,9 +19,7 @@ export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(
     style,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = usePopoverRootContext();
+  const store = usePopoverRootContext();
   const open = store.useState('open');
   const {
     arrowRef,