@base-ui/react 1.4.0 → 1.5.0

package/esm/otp-field/root/OTPFieldRoot.js

@@ -9,21 +9,21 @@ import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { warn } from '@base-ui/utils/warn';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains } from "../../floating-ui-react/utils/shadowDom.js";
-import { CompositeList } from "../../composite/list/CompositeList.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
-import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { contains } from "../../floating-ui-react/utils.js";
+import { CompositeList } from "../../internals/composite/list/CompositeList.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { OTPFieldRootContext } from "./OTPFieldRootContext.js";
 import { rootStateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { getOTPValidationConfig, normalizeOTPValue, stripOTPWhitespace } from "../utils/otp.js";
+import { getOTPValidationConfig, normalizeOTPValue, normalizeOTPValueWithDetails } from "../utils/otp.js";
 
 /**
  * Groups all OTP field parts and manages their state.
@@ -48,7 +48,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     mask = false,
     inputMode: inputModeProp,
     validationType = 'numeric',
-    sanitizeValue,
+    normalizeValue,
     disabled: disabledProp = false,
     readOnly = false,
     required = false,
@@ -108,7 +108,8 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
   const pattern = validationConfig?.slotPattern;
   const hiddenInputPattern = validationConfig?.getRootPattern(length);
   const inputMode = inputModeProp ?? validationConfig?.inputMode;
-  const value = normalizeOTPValue(valueUnwrapped, length, validationType, sanitizeValue);
+  const hasValidLength = Number.isInteger(length) && length > 0;
+  const value = normalizeOTPValue(valueUnwrapped, length, validationType, normalizeValue);
   const valueRef = useValueAsRef(value);
   const filled = value !== '';
   const [inputCount, setInputCount] = React.useState(0);
@@ -122,16 +123,10 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useOTPFieldRootDevWarnings({
       inputCount,
-      length,
-      sanitizeValue,
-      validationType
+      length
     });
   }
-  useRegisterFieldControl(firstInputRef, {
-    id,
-    getValue: () => valueRef.current,
-    value
-  });
+  useRegisterFieldControl(firstInputRef, id, value);
   const focusInput = useStableCallback(index => {
     const targetIndex = Math.min(Math.max(index, 0), Math.max(inputRefs.current.length - 1, 0));
     const target = inputRefs.current[targetIndex];
@@ -156,6 +151,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
       formElement.requestSubmit();
     }
   }
+  function completeValue(completedValue, eventDetails) {
+    onValueCompleteProp?.(completedValue, eventDetails);
+    if (autoSubmit) {
+      requestSubmit();
+    }
+  }
   useValueChanged(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -168,10 +169,7 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     if (pendingCompleteValue != null) {
       pendingCompleteValueRef.current = null;
       if (pendingCompleteValue.value === value) {
-        onValueCompleteProp?.(value, pendingCompleteValue.eventDetails);
-        if (autoSubmit) {
-          requestSubmit();
-        }
+        completeValue(value, pendingCompleteValue.eventDetails);
       }
     }
     const pendingFocus = pendingFocusRef.current;
@@ -183,8 +181,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     }
   });
   const setValue = useStableCallback((nextValue, details) => {
-    const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+    const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
+    const completeEventDetails = normalizedValue.length === length && (valueRef.current.length !== length || details.reason === REASONS.inputPaste) ? getCompleteEventDetails(details) : null;
     if (normalizedValue === valueRef.current) {
+      if (completeEventDetails != null) {
+        completeValue(normalizedValue, completeEventDetails);
+      }
       return null;
     }
     onValueChange?.(normalizedValue, details);
@@ -192,10 +194,10 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
       return null;
     }
     setValueUnwrapped(normalizedValue);
-    if (normalizedValue.length === length && valueRef.current.length !== length) {
+    if (completeEventDetails != null) {
       pendingCompleteValueRef.current = {
         value: normalizedValue,
-        eventDetails: createGenericEventDetails(details.reason, details.event)
+        eventDetails: completeEventDetails
       };
     } else if (normalizedValue.length !== length) {
       pendingCompleteValueRef.current = null;
@@ -262,12 +264,12 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     reportValueInvalid,
     readOnly,
     required,
-    sanitizeValue,
+    normalizeValue,
     setValue,
     state,
     validationType,
     value
-  }), [activeIndex, autoComplete, disabled, focusInput, form, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, queueFocusInput, readOnly, reportValueInvalid, required, sanitizeValue, setValue, state, validationType, value]);
+  }), [activeIndex, autoComplete, disabled, focusInput, form, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, queueFocusInput, readOnly, reportValueInvalid, required, normalizeValue, setValue, state, validationType, value]);
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, rootRef],
     state,
@@ -285,92 +287,55 @@ export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(
     },
     children: /*#__PURE__*/_jsxs(OTPFieldRootContext.Provider, {
       value: contextValue,
-      children: [element, /*#__PURE__*/_jsx(OTPFieldHiddenInput, {
-        autoComplete: autoComplete,
-        disabled: disabled,
-        focusInput: focusInput,
+      children: [element, hasValidLength && /*#__PURE__*/_jsx("input", {
+        ...validation.getInputValidationProps({
+          onFocus() {
+            focusInput(0);
+          },
+          onChange(event) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+              // Outside Field.Root, the event is not wrapped by mergeProps.
+              event.preventBaseUIHandler?.();
+              return;
+            }
+            const rawValue = event.currentTarget.value;
+            const [normalizedValue, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, length, validationType, normalizeValue);
+            if (didRejectCharacters) {
+              reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
+            }
+            const committedValue = setValue(normalizedValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
+            if (committedValue != null && committedValue !== '') {
+              queueFocusInput(committedValue.length - 1, committedValue);
+            }
+          }
+        }),
+        ref: validation.inputRef,
+        type: "text",
+        id: id && name == null ? `${id}-hidden-input` : undefined,
         form: form,
-        id: id,
-        inputMode: inputMode,
-        length: length,
         name: name,
-        onValueInvalid: reportValueInvalid,
+        value: value,
+        autoComplete: autoComplete,
+        inputMode: inputMode,
+        minLength: length,
+        maxLength: length,
         pattern: hiddenInputPattern,
-        queueFocusInput: queueFocusInput,
+        disabled: disabled,
         readOnly: readOnly,
-        sanitizeValue: sanitizeValue,
         required: required,
-        setValue: setValue,
-        validationType: validationType,
-        validation: validation,
-        value: value
+        "aria-hidden": true,
+        tabIndex: -1,
+        style: name ? visuallyHiddenInput : visuallyHidden
       })]
     })
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function OTPFieldHiddenInput(props) {
-  const {
-    autoComplete,
-    disabled,
-    focusInput,
-    form,
-    id,
-    inputMode,
-    length,
-    name,
-    onValueInvalid,
-    pattern,
-    queueFocusInput,
-    readOnly,
-    sanitizeValue,
-    required,
-    setValue,
-    validationType,
-    validation,
-    value
-  } = props;
-  if (!Number.isInteger(length) || length <= 0) {
-    return null;
+function getCompleteEventDetails(details) {
+  if (details.reason === REASONS.inputChange || details.reason === REASONS.inputPaste) {
+    return createGenericEventDetails(details.reason, details.event);
   }
-  return /*#__PURE__*/_jsx("input", {
-    ...validation.getInputValidationProps({
-      onFocus() {
-        focusInput(0);
-      },
-      onChange(event) {
-        if (event.nativeEvent.defaultPrevented) {
-          return;
-        }
-        const rawValue = event.currentTarget.value;
-        const normalizedValue = normalizeOTPValue(rawValue, length, validationType, sanitizeValue);
-        if (stripOTPWhitespace(rawValue).length > normalizedValue.length) {
-          onValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
-        }
-        const committedValue = setValue(normalizedValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
-        if (committedValue != null && committedValue !== '') {
-          queueFocusInput(committedValue.length - 1, committedValue);
-        }
-      }
-    }),
-    ref: validation.inputRef,
-    type: "text",
-    id: id && name == null ? `${id}-hidden-input` : undefined,
-    form: form,
-    name: name,
-    value: value,
-    autoComplete: autoComplete,
-    inputMode: inputMode,
-    minLength: length,
-    maxLength: length,
-    pattern: pattern,
-    disabled: disabled,
-    readOnly: readOnly,
-    required: required,
-    "aria-hidden": true,
-    tabIndex: -1,
-    style: name ? visuallyHiddenInput : visuallyHidden
-  });
+  return null;
 }
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
@@ -379,9 +344,7 @@ function mergeAriaIds(...values) {
 function useOTPFieldRootDevWarnings(parameters) {
   const {
     inputCount,
-    length,
-    sanitizeValue,
-    validationType
+    length
   } = parameters;
   React.useEffect(() => {
     if (!Number.isInteger(length) || length <= 0 || inputCount === 0 || inputCount === length) {
@@ -398,11 +361,4 @@ function useOTPFieldRootDevWarnings(parameters) {
     const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
     warn(`<OTPField.Root> \`length\` must be a positive integer. Received \`length={${String(length)}}\`.`, ownerStackMessage);
   }, [length]);
-  React.useEffect(() => {
-    if (sanitizeValue == null || validationType === 'none') {
-      return;
-    }
-    const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
-    warn('<OTPField.Root> `sanitizeValue` is only used when `validationType="none"`.', ownerStackMessage);
-  }, [sanitizeValue, validationType]);
 }

package/esm/otp-field/root/OTPFieldRootContext.d.ts

@@ -20,7 +20,7 @@ export interface OTPFieldRootContext {
   reportValueInvalid: (value: string, details: OTPFieldRoot.InvalidEventDetails) => void;
   readOnly: boolean;
   required: boolean;
-  sanitizeValue: ((value: string) => string) | undefined;
+  normalizeValue: ((value: string) => string) | undefined;
   setValue: (value: string, details: OTPFieldRoot.ChangeEventDetails) => string | null;
   state: OTPFieldRootState;
   validationType: OTPFieldRoot.ValidationType;

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

@@ -16,11 +16,11 @@ export declare enum OTPFieldRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * 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 invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/otp-field/root/OTPFieldRootDataAttributes.js

@@ -16,11 +16,11 @@ export let OTPFieldRootDataAttributes = /*#__PURE__*/function (OTPFieldRootDataA
    */
   OTPFieldRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * 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 invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   OTPFieldRootDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/otp-field/utils/otp.d.ts

@@ -8,14 +8,15 @@ export type OTPValidationType = 'numeric' | 'alpha' | 'alphanumeric' | 'none';
 export declare function getOTPValidationConfig(validationType: OTPValidationType): OTPValidationConfig | null;
 export declare function stripOTPWhitespace(value: string | null | undefined): string;
 /**
- * Normalizes user-entered OTP text by stripping whitespace, applying validation or custom
- * sanitization, and clamping the final value to the configured slot count.
+ * Normalizes user-entered OTP text by stripping whitespace, applying validation and custom
+ * normalization, and clamping the final value to the configured slot count.
  */
-export declare function normalizeOTPValue(value: string | null | undefined, length: number, validationType: OTPValidationType, sanitizeValue?: ((value: string) => string) | undefined): string;
+export declare function normalizeOTPValueWithDetails(value: string | null | undefined, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): readonly [value: string, didRejectCharacters: boolean];
+export declare function normalizeOTPValue(value: string | null | undefined, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): string;
 /**
  * Replaces characters starting at the provided slot index, then re-normalizes the final OTP value
  * so paste and multi-character edits stay contiguous and length-bounded.
  */
-export declare function replaceOTPValue(currentValue: string, index: number, nextValue: string, length: number, validationType: OTPValidationType, sanitizeValue?: ((value: string) => string) | undefined): string;
+export declare function replaceOTPValue(currentValue: string, index: number, nextValue: string, length: number, validationType: OTPValidationType, normalizeValue?: ((value: string) => string) | undefined): string;
 export declare function removeOTPCharacter(currentValue: string, index: number): string;
 export {};

package/esm/otp-field/utils/otp.js

@@ -24,39 +24,47 @@ export function getOTPValidationConfig(validationType) {
   }
   return OTP_VALIDATION_CONFIG[validationType];
 }
-function removeWhitespace(value) {
-  return value.replace(/\s/g, '');
-}
 export function stripOTPWhitespace(value) {
-  return removeWhitespace(value ?? '');
+  return (value ?? '').replace(/\s/g, '');
+}
+function applyOTPValidation(value, validation) {
+  return validation ? value.replace(validation.regexp, '') : value;
 }
 
 /**
- * Normalizes user-entered OTP text by stripping whitespace, applying validation or custom
- * sanitization, and clamping the final value to the configured slot count.
+ * Normalizes user-entered OTP text by stripping whitespace, applying validation and custom
+ * normalization, and clamping the final value to the configured slot count.
  */
-export function normalizeOTPValue(value, length, validationType, sanitizeValue) {
-  let sanitizedValue = stripOTPWhitespace(value);
+export function normalizeOTPValueWithDetails(value, length, validationType, normalizeValue) {
+  const strippedValue = stripOTPWhitespace(value);
   const validation = getOTPValidationConfig(validationType);
-  if (validation) {
-    sanitizedValue = sanitizedValue.replace(validation.regexp, '');
-  } else if (sanitizeValue) {
-    sanitizedValue = sanitizeValue(sanitizedValue);
+  let normalizedValue = applyOTPValidation(strippedValue, validation);
+  let didRejectCharacters = strippedValue.length > normalizedValue.length;
+  if (normalizeValue) {
+    const customNormalizedValue = normalizeValue(normalizedValue);
+    didRejectCharacters ||= normalizedValue.length > customNormalizedValue.length;
+    normalizedValue = applyOTPValidation(customNormalizedValue, validation);
+    didRejectCharacters ||= customNormalizedValue.length > normalizedValue.length;
   }
 
   // Slice by Unicode code points so multi-byte characters do not split across OTP slots.
-  return Array.from(sanitizedValue).slice(0, Math.max(length, 0)).join('');
+  const maxLength = length < 0 ? 0 : length;
+  const normalizedCharacters = Array.from(normalizedValue);
+  return [normalizedCharacters.slice(0, maxLength).join(''), didRejectCharacters || normalizedCharacters.length > maxLength];
+}
+export function normalizeOTPValue(value, length, validationType, normalizeValue) {
+  return normalizeOTPValueWithDetails(value, length, validationType, normalizeValue)[0];
 }
 
 /**
  * Replaces characters starting at the provided slot index, then re-normalizes the final OTP value
  * so paste and multi-character edits stay contiguous and length-bounded.
  */
-export function replaceOTPValue(currentValue, index, nextValue, length, validationType, sanitizeValue) {
-  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+export function replaceOTPValue(currentValue, index, nextValue, length, validationType, normalizeValue) {
+  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
   const prefix = currentValue.slice(0, index);
   const suffix = currentValue.slice(index + normalizedValue.length);
-  return normalizeOTPValue(`${prefix}${normalizedValue}${suffix}`, length, validationType, sanitizeValue);
+  return normalizeOTPValue(`${prefix}${normalizedValue}${suffix}`, length, validationType, normalizeValue);
 }
 export function removeOTPCharacter(currentValue, index) {
   if (index < 0 || index >= currentValue.length) {

package/esm/otp-field/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { OTPFieldRootState } from "../root/OTPFieldRoot.js";
 import type { OTPFieldInputState } from "../input/OTPFieldInput.js";
 export declare const rootStateAttributesMapping: StateAttributesMapping<OTPFieldRootState>;

package/esm/otp-field/utils/stateAttributesMapping.js

@@ -1,4 +1,4 @@
-import { fieldValidityMapping } from "../../field/utils/constants.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
 export const rootStateAttributesMapping = {
   value: () => null,
   length: () => null,

package/esm/popover/arrow/PopoverArrow.d.ts

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

package/esm/popover/arrow/PopoverArrow.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Displays an element positioned against the popover anchor.
@@ -14,8 +14,8 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
  */
 export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/popover/backdrop/PopoverBackdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-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 overlay displayed beneath the popover.
  * Renders a `<div>` element.

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { REASONS } from "../../utils/reasons.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { REASONS } from "../../internals/reasons.js";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -19,8 +19,8 @@ const stateAttributesMapping = {
  */
 export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBackdrop(props, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = props;

package/esm/popover/close/PopoverClose.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 /**
  * A button that closes the popover.
  * Renders a `<button>` element.

package/esm/popover/close/PopoverClose.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useClosePartRegistration } from "../../utils/closePart.js";
 
 /**
@@ -18,9 +18,9 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -39,7 +39,7 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
     ref: [forwardedRef, buttonRef],
     props: [{
       onClick(event) {
-        store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent, event.currentTarget));
+        store.setOpen(false, createChangeEventDetails(REASONS.closePress, event.nativeEvent));
       }
     }, elementProps, getButtonProps]
   });

package/esm/popover/description/PopoverDescription.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";
 /**
  * A paragraph with additional information about the popover.
  * Renders a `<p>` element.

package/esm/popover/description/PopoverDescription.js

@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A paragraph with additional information about the popover.
@@ -23,12 +22,7 @@ export const PopoverDescription = /*#__PURE__*/React.forwardRef(function Popover
     store
   } = usePopoverRootContext();
   const id = useBaseUiId(elementProps.id);
-  useIsoLayoutEffect(() => {
-    store.set('descriptionElementId', id);
-    return () => {
-      store.set('descriptionElementId', undefined);
-    };
-  }, [store, id]);
+  store.useSyncedValueWithCleanup('descriptionElementId', id);
   const element = useRenderElement('p', componentProps, {
     ref: forwardedRef,
     props: [{

package/esm/popover/popup/PopoverPopup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { Side, Align } from "../../utils/useAnchorPositioning.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";
 /**
  * A container for the popover contents.
  * Renders a `<div>` element.
@@ -30,7 +30,7 @@ export interface PopoverPopupState {
   /**
    * Whether transitions should be skipped.
    */
-  instant: 'dismiss' | 'click' | undefined;
+  instant: 'dismiss' | 'click' | 'focus' | 'trigger-change' | undefined;
 }
 export interface PopoverPopupProps extends BaseUIComponentProps<'div', PopoverPopupState> {
   /**