@base-ui/react 1.7.0 → 1.8.0

package/form/Form.mjs

@@ -33,7 +33,7 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
   });
   const elementRef = React.useRef(null);
   const submittedRef = React.useRef(false);
-  const submitAttemptedRef = React.useRef(false);
+  const submitCountRef = React.useRef(0);
   const focusFirstInvalid = useStableCallback(() => {
     // A field can be invalid without a focusable control (for example a checkbox group whose
     // custom validation failed while every checkbox is unmounted, disabled, or reassociated).
@@ -90,7 +90,7 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     props: [{
       noValidate: true,
       onSubmit(event) {
-        submitAttemptedRef.current = true;
+        submitCountRef.current += 1;
 
         // Async validation isn't supported to stop the submit event.
         formRef.current.fields.forEach(field => {
@@ -116,13 +116,19 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     }, elementProps]
   });
   const clearErrors = useStableCallback(name => {
-    if (name && errors && Object.hasOwn(errors, name)) {
+    if (!name) {
+      return;
+    }
+    setErrors(previousErrors => {
+      if (!previousErrors || !Object.hasOwn(previousErrors, name)) {
+        return previousErrors;
+      }
       const nextErrors = {
-        ...errors
+        ...previousErrors
       };
       delete nextErrors[name];
-      setErrors(nextErrors);
-    }
+      return nextErrors;
+    });
   });
   const contextValue = React.useMemo(() => ({
     elementRef,
@@ -130,7 +136,7 @@ export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps,
     validationMode,
     errors: errors ?? EMPTY_OBJECT,
     clearErrors,
-    submitAttemptedRef
+    submitCountRef
   }), [formRef, validationMode, errors, clearErrors]);
   return /*#__PURE__*/_jsx(FormContext.Provider, {
     value: contextValue,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.7.0
+ * @base-ui/react v1.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.7.0
+ * @base-ui/react v1.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/input/InputDataAttributes.d.mts

@@ -1,30 +1,28 @@
-export declare enum InputDataAttributes {
-  /**
-   * Present when the input is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the input is in a valid state (when wrapped in Field.Root).
-   */
-  valid = "data-valid",
-  /**
-   * Present when the input is in an invalid state (when wrapped in Field.Root).
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the input has been touched (when wrapped in Field.Root).
-   */
-  touched = "data-touched",
-  /**
-   * Present when the input's value has changed (when wrapped in Field.Root).
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the input is filled (when wrapped in Field.Root).
-   */
-  filled = "data-filled",
-  /**
-   * Present when the input is focused (when wrapped in Field.Root).
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when the input is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the input is in a valid state (when wrapped in Field.Root).
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the input is in an invalid state (when wrapped in Field.Root).
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the input has been touched (when wrapped in Field.Root).
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the input's value has changed (when wrapped in Field.Root).
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the input is filled (when wrapped in Field.Root).
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when the input is focused (when wrapped in Field.Root).
+ */
+export declare const focused = "data-focused";

package/input/InputDataAttributes.d.ts

@@ -1,30 +1,28 @@
-export declare enum InputDataAttributes {
-  /**
-   * Present when the input is disabled.
-   */
-  disabled = "data-disabled",
-  /**
-   * Present when the input is in a valid state (when wrapped in Field.Root).
-   */
-  valid = "data-valid",
-  /**
-   * Present when the input is in an invalid state (when wrapped in Field.Root).
-   */
-  invalid = "data-invalid",
-  /**
-   * Present when the input has been touched (when wrapped in Field.Root).
-   */
-  touched = "data-touched",
-  /**
-   * Present when the input's value has changed (when wrapped in Field.Root).
-   */
-  dirty = "data-dirty",
-  /**
-   * Present when the input is filled (when wrapped in Field.Root).
-   */
-  filled = "data-filled",
-  /**
-   * Present when the input is focused (when wrapped in Field.Root).
-   */
-  focused = "data-focused",
-}
+/**
+ * Present when the input is disabled.
+ */
+export declare const disabled = "data-disabled";
+/**
+ * Present when the input is in a valid state (when wrapped in Field.Root).
+ */
+export declare const valid = "data-valid";
+/**
+ * Present when the input is in an invalid state (when wrapped in Field.Root).
+ */
+export declare const invalid = "data-invalid";
+/**
+ * Present when the input has been touched (when wrapped in Field.Root).
+ */
+export declare const touched = "data-touched";
+/**
+ * Present when the input's value has changed (when wrapped in Field.Root).
+ */
+export declare const dirty = "data-dirty";
+/**
+ * Present when the input is filled (when wrapped in Field.Root).
+ */
+export declare const filled = "data-filled";
+/**
+ * Present when the input is focused (when wrapped in Field.Root).
+ */
+export declare const focused = "data-focused";

package/input/InputDataAttributes.js

@@ -3,35 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InputDataAttributes = void 0;
-let InputDataAttributes = exports.InputDataAttributes = /*#__PURE__*/function (InputDataAttributes) {
-  /**
-   * Present when the input is disabled.
-   */
-  InputDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the input is in a valid state (when wrapped in Field.Root).
-   */
-  InputDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the input is in an invalid state (when wrapped in Field.Root).
-   */
-  InputDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the input has been touched (when wrapped in Field.Root).
-   */
-  InputDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the input's value has changed (when wrapped in Field.Root).
-   */
-  InputDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the input is filled (when wrapped in Field.Root).
-   */
-  InputDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when the input is focused (when wrapped in Field.Root).
-   */
-  InputDataAttributes["focused"] = "data-focused";
-  return InputDataAttributes;
-}({});
+exports.valid = exports.touched = exports.invalid = exports.focused = exports.filled = exports.disabled = exports.dirty = void 0;
+/**
+ * Present when the input is disabled.
+ */
+const disabled = exports.disabled = 'data-disabled';
+/**
+ * Present when the input is in a valid state (when wrapped in Field.Root).
+ */
+const valid = exports.valid = 'data-valid';
+/**
+ * Present when the input is in an invalid state (when wrapped in Field.Root).
+ */
+const invalid = exports.invalid = 'data-invalid';
+/**
+ * Present when the input has been touched (when wrapped in Field.Root).
+ */
+const touched = exports.touched = 'data-touched';
+/**
+ * Present when the input's value has changed (when wrapped in Field.Root).
+ */
+const dirty = exports.dirty = 'data-dirty';
+/**
+ * Present when the input is filled (when wrapped in Field.Root).
+ */
+const filled = exports.filled = 'data-filled';
+/**
+ * Present when the input is focused (when wrapped in Field.Root).
+ */
+const focused = exports.focused = 'data-focused';

package/input/InputDataAttributes.mjs

@@ -1,31 +1,28 @@
-export let InputDataAttributes = /*#__PURE__*/function (InputDataAttributes) {
-  /**
-   * Present when the input is disabled.
-   */
-  InputDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the input is in a valid state (when wrapped in Field.Root).
-   */
-  InputDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the input is in an invalid state (when wrapped in Field.Root).
-   */
-  InputDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the input has been touched (when wrapped in Field.Root).
-   */
-  InputDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the input's value has changed (when wrapped in Field.Root).
-   */
-  InputDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the input is filled (when wrapped in Field.Root).
-   */
-  InputDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when the input is focused (when wrapped in Field.Root).
-   */
-  InputDataAttributes["focused"] = "data-focused";
-  return InputDataAttributes;
-}({});
+/**
+ * Present when the input is disabled.
+ */
+export const disabled = 'data-disabled';
+/**
+ * Present when the input is in a valid state (when wrapped in Field.Root).
+ */
+export const valid = 'data-valid';
+/**
+ * Present when the input is in an invalid state (when wrapped in Field.Root).
+ */
+export const invalid = 'data-invalid';
+/**
+ * Present when the input has been touched (when wrapped in Field.Root).
+ */
+export const touched = 'data-touched';
+/**
+ * Present when the input's value has changed (when wrapped in Field.Root).
+ */
+export const dirty = 'data-dirty';
+/**
+ * Present when the input is filled (when wrapped in Field.Root).
+ */
+export const filled = 'data-filled';
+/**
+ * Present when the input is focused (when wrapped in Field.Root).
+ */
+export const focused = 'data-focused';

package/internals/PrehydrationScript.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * Renders an inline script that runs before React hydrates, used by components that need
  * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
@@ -24,7 +25,7 @@
  * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
  * condition reuses the shared `internals/prehydrationScript.stub.ts`.
  */
-export declare function PrehydrationScript(props: PrehydrationScript.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function PrehydrationScript(props: PrehydrationScript.Props): React.JSX.Element | null;
 export declare namespace PrehydrationScript {
   interface Props {
     /**

package/internals/PrehydrationScript.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * Renders an inline script that runs before React hydrates, used by components that need
  * to position server-rendered content ahead of hydration (e.g. `Tabs.Indicator`,
@@ -24,7 +25,7 @@
  * and `default` conditions) in `packages/react/package.json` `imports`; the `browser`
  * condition reuses the shared `internals/prehydrationScript.stub.ts`.
  */
-export declare function PrehydrationScript(props: PrehydrationScript.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function PrehydrationScript(props: PrehydrationScript.Props): React.JSX.Element | null;
 export declare namespace PrehydrationScript {
   interface Props {
     /**

package/internals/TransitionStatusDataAttributes.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Present when the component begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the component is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/internals/TransitionStatusDataAttributes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Present when the component begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the component is animating out.
+ */
+export declare const endingStyle = "data-ending-style";

package/internals/TransitionStatusDataAttributes.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.startingStyle = exports.endingStyle = void 0;
+/**
+ * Present when the component begins animating in.
+ */
+const startingStyle = exports.startingStyle = 'data-starting-style';
+
+/**
+ * Present when the component is animating out.
+ */
+const endingStyle = exports.endingStyle = 'data-ending-style';

package/internals/TransitionStatusDataAttributes.mjs

@@ -0,0 +1,9 @@
+/**
+ * Present when the component begins animating in.
+ */
+export const startingStyle = 'data-starting-style';
+
+/**
+ * Present when the component is animating out.
+ */
+export const endingStyle = 'data-ending-style';

package/internals/composite/list/CompositeList.d.mts

@@ -5,7 +5,7 @@ export type CompositeMetadata<CustomMetadata> = {
 /**
  * Provides context for a list of items in a composite component.
  */
-export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): import("react/jsx-runtime").JSX.Element;
+export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): React.JSX.Element;
 export interface CompositeListState {}
 export interface CompositeListProps<Metadata> {
   children: React.ReactNode;

package/internals/composite/list/CompositeList.d.ts

@@ -5,7 +5,7 @@ export type CompositeMetadata<CustomMetadata> = {
 /**
  * Provides context for a list of items in a composite component.
  */
-export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): import("react/jsx-runtime").JSX.Element;
+export declare function CompositeList<Metadata>(props: CompositeList.Props<Metadata>): React.JSX.Element;
 export interface CompositeListState {}
 export interface CompositeListProps<Metadata> {
   children: React.ReactNode;

package/internals/composite/list/CompositeList.js

@@ -29,7 +29,7 @@ function CompositeList(props) {
   const map = (0, _useRefWithInit.useRefWithInit)(createMap).current;
   const nextIndexRef = React.useRef(0);
   const isDirtyRef = React.useRef(true);
-  const itemsRef = React.useRef([]);
+  const itemsRef = React.useRef(null);
   const mutationObserverRef = React.useRef(null);
 
   // Item effects can run without their parent rendering. Schedule one synchronous
@@ -120,16 +120,24 @@ function CompositeList(props) {
   const flush = (0, _useStableCallback.useStableCallback)(() => {
     const [items, automaticNodes] = getCompositeListSnapshot(map);
     const nextMap = syncRefs(items);
+    const previousItems = itemsRef.current;
+    const changed = !previousItems || previousItems.length !== items.length || items.some((item, index) => {
+      const previousItem = previousItems[index];
+      return item.index !== previousItem.index || item.element !== previousItem.element || item.registration.index !== previousItem.registration.index || item.registration.metadata !== previousItem.registration.metadata;
+    });
     observe(automaticNodes);
     itemsRef.current = items;
     isDirtyRef.current = false;
+    if (!changed) {
+      return;
+    }
     listeners.forEach(listener => listener(nextMap));
     onMapChange(nextMap);
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Re-copy the last committed snapshot when the ref objects change or Strict Mode replays
     // effects without reattaching callback refs.
-    if (!isDirtyRef.current) {
+    if (!isDirtyRef.current && itemsRef.current) {
       syncRefs(itemsRef.current);
     }
     return () => {

package/internals/composite/list/CompositeList.mjs

@@ -23,7 +23,7 @@ export function CompositeList(props) {
   const map = useRefWithInit(createMap).current;
   const nextIndexRef = React.useRef(0);
   const isDirtyRef = React.useRef(true);
-  const itemsRef = React.useRef([]);
+  const itemsRef = React.useRef(null);
   const mutationObserverRef = React.useRef(null);
 
   // Item effects can run without their parent rendering. Schedule one synchronous
@@ -114,16 +114,24 @@ export function CompositeList(props) {
   const flush = useStableCallback(() => {
     const [items, automaticNodes] = getCompositeListSnapshot(map);
     const nextMap = syncRefs(items);
+    const previousItems = itemsRef.current;
+    const changed = !previousItems || previousItems.length !== items.length || items.some((item, index) => {
+      const previousItem = previousItems[index];
+      return item.index !== previousItem.index || item.element !== previousItem.element || item.registration.index !== previousItem.registration.index || item.registration.metadata !== previousItem.registration.metadata;
+    });
     observe(automaticNodes);
     itemsRef.current = items;
     isDirtyRef.current = false;
+    if (!changed) {
+      return;
+    }
     listeners.forEach(listener => listener(nextMap));
     onMapChange(nextMap);
   });
   useIsoLayoutEffect(() => {
     // Re-copy the last committed snapshot when the ref objects change or Strict Mode replays
     // effects without reattaching callback refs.
-    if (!isDirtyRef.current) {
+    if (!isDirtyRef.current && itemsRef.current) {
       syncRefs(itemsRef.current);
     }
     return () => {

package/internals/composite/root/CompositeRoot.d.mts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps, BaseUIEvent } from "../../types.mjs";
 import type { ModifierKey } from "../composite.mjs";
 import type { CompositeGridNavigator } from "./gridNavigation.mjs";
 import { StateAttributesMapping } from "../../getStateAttributesProps.mjs";
-export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
+export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): React.JSX.Element;
 export interface CompositeRootState {}
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children' | 'style'> {
   props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;

package/internals/composite/root/CompositeRoot.d.ts

@@ -4,7 +4,7 @@ import type { BaseUIComponentProps, BaseUIEvent } from "../../types.js";
 import type { ModifierKey } from "../composite.js";
 import type { CompositeGridNavigator } from "./gridNavigation.js";
 import { StateAttributesMapping } from "../../getStateAttributesProps.js";
-export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
+export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): React.JSX.Element;
 export interface CompositeRootState {}
 export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children' | 'style'> {
   props?: Array<Record<string, any> | (() => Record<string, any>)> | undefined;

package/internals/composite/root/useCompositeRoot.js

@@ -11,10 +11,10 @@ var _isElementDisabled = require("@base-ui/utils/isElementDisabled");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _empty = require("@base-ui/utils/empty");
 var _composite = require("../composite");
 var _constants = require("../constants");
 var _utils = require("../../../floating-ui-react/utils");
-const EMPTY_ARRAY = [];
 function useCompositeRoot(params) {
   const {
     loopFocus = true,
@@ -28,7 +28,7 @@ function useCompositeRoot(params) {
     enableHomeAndEndKeys = false,
     stopEventPropagation,
     disabledIndices,
-    modifierKeys = EMPTY_ARRAY
+    modifierKeys = _empty.EMPTY_ARRAY
   } = params;
   const [internalHighlightedIndex, internalSetHighlightedIndex] = React.useState(0);
   const isGrid = grid != null;
@@ -36,8 +36,10 @@ function useCompositeRoot(params) {
   const mergedRef = (0, _useMergedRefs.useMergedRefs)(rootRef, externalRef);
   const elementsRef = React.useRef([]);
   const hasSetDefaultIndexRef = React.useRef(false);
+  const highlightedElementRef = React.useRef(null);
   const highlightedIndex = externalHighlightedIndex ?? internalHighlightedIndex;
   const onHighlightedIndexChange = (0, _useStableCallback.useStableCallback)((index, shouldScrollIntoView = false) => {
+    highlightedElementRef.current = elementsRef.current[index] ?? null;
     (externalSetHighlightedIndex ?? internalSetHighlightedIndex)(index);
     if (shouldScrollIntoView) {
       const newActiveItem = elementsRef.current[index];
@@ -45,7 +47,27 @@ function useCompositeRoot(params) {
     }
   });
   const onMapChange = (0, _useStableCallback.useStableCallback)(map => {
-    if (map.size === 0 || hasSetDefaultIndexRef.current) {
+    if (map.size === 0) {
+      return;
+    }
+    if (hasSetDefaultIndexRef.current) {
+      const elements = elementsRef.current;
+      // Items added or removed around the highlighted one shift its index, so the tab stop would
+      // otherwise move to a different item and navigation would resume from the wrong position.
+      const nextIndex = elements.indexOf(highlightedElementRef.current);
+      if (nextIndex === -1) {
+        // A replacement at the same index can keep the tab stop. Otherwise move it to an
+        // eligible item so a missing, hidden, or disabled replacement does not take the
+        // composite out of the tab order.
+        const replacement = elements[highlightedIndex];
+        if (!replacement || (0, _composite.isListIndexDisabled)(elements, highlightedIndex, disabledIndices)) {
+          onHighlightedIndexChange(getFallbackIndex(elements, disabledIndices));
+        } else {
+          highlightedElementRef.current = replacement;
+        }
+      } else if (nextIndex !== highlightedIndex) {
+        onHighlightedIndexChange(nextIndex);
+      }
       return;
     }
     hasSetDefaultIndexRef.current = true;
@@ -218,6 +240,26 @@ function useCompositeRoot(params) {
     relayKeyboardEvent: onKeyDown
   };
 }
+
+// Resolves the item that should hold the tab stop: the active item when it can take focus,
+// otherwise the first item that can. Falls back to index 0 so an all-disabled composite keeps the
+// index in range and regains a tab stop as soon as one of its items becomes focusable.
+function getFallbackIndex(elements, disabledIndices) {
+  let fallbackIndex = -1;
+  for (let index = 0; index < elements.length; index += 1) {
+    const element = elements[index];
+    if (!element || (0, _composite.isListIndexDisabled)(elements, index, disabledIndices)) {
+      continue;
+    }
+    if (element.hasAttribute(_constants.ACTIVE_COMPOSITE_ITEM)) {
+      return index;
+    }
+    if (fallbackIndex === -1) {
+      fallbackIndex = index;
+    }
+  }
+  return Math.max(fallbackIndex, 0);
+}
 function isModifierKeySet(event, ignoredModifierKeys) {
   for (const key of _composite.MODIFIER_KEYS) {
     if (ignoredModifierKeys.includes(key)) {