@base-ui/react 1.3.0 → 1.4.1

package/form/Form.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Form = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _createBaseUIEventDetails = require("../utils/createBaseUIEventDetails");
-var _reasons = require("../utils/reasons");
-var _FormContext = require("./FormContext");
-var _useRenderElement = require("../utils/useRenderElement");
-var _constants = require("../utils/constants");
-var _useValueChanged = require("../utils/useValueChanged");
+var _empty = require("@base-ui/utils/empty");
+var _createBaseUIEventDetails = require("../internals/createBaseUIEventDetails");
+var _reasons = require("../internals/reasons");
+var _FormContext = require("../internals/form-context/FormContext");
+var _useRenderElement = require("../internals/useRenderElement");
+var _useValueChanged = require("../internals/useValueChanged");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A native form element with consolidated error handling.
@@ -30,6 +30,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     onSubmit,
     onFormSubmit,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({
@@ -111,7 +112,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     }, elementProps]
   });
   const clearErrors = (0, _useStableCallback.useStableCallback)(name => {
-    if (name && errors && _constants.EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
+    if (name && errors && _empty.EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
       const nextErrors = {
         ...errors
       };
@@ -122,7 +123,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
   const contextValue = React.useMemo(() => ({
     formRef,
     validationMode,
-    errors: errors ?? _constants.EMPTY_OBJECT,
+    errors: errors ?? _empty.EMPTY_OBJECT,
     clearErrors,
     submitAttemptedRef
   }), [formRef, validationMode, errors, clearErrors]);

package/index.d.ts

@@ -22,6 +22,7 @@ export * from "./merge-props/index.js";
 export * from "./meter/index.js";
 export * from "./navigation-menu/index.js";
 export * from "./number-field/index.js";
+export * from "./otp-field/index.js";
 export * from "./popover/index.js";
 export * from "./preview-card/index.js";
 export * from "./progress/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @base-ui/react v1.3.0
+ * @base-ui/react v1.4.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -274,6 +274,17 @@ Object.keys(_numberField).forEach(function (key) {
     }
   });
 });
+var _otpField = require("./otp-field");
+Object.keys(_otpField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _otpField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _otpField[key];
+    }
+  });
+});
 var _popover = require("./popover");
 Object.keys(_popover).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/input/Input.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";
 import { Field, type FieldControlState } from "../field/index.js";
 /**
  * A native input element that automatically works with [Field](https://base-ui.com/react/components/field).
@@ -12,7 +12,7 @@ export interface InputProps extends BaseUIComponentProps<'input', InputState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  onValueChange?: ((value: string, eventDetails: Input.ChangeEventDetails) => void) | undefined;
   /**
    * The default value of the input. Use when uncontrolled.
    */

package/input/InputDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum InputDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the input is in valid state (when wrapped in Field.Root).
+   * Present when the input is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the input is in invalid state (when wrapped in Field.Root).
+   * Present when the input is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/input/InputDataAttributes.js

@@ -10,11 +10,11 @@ let InputDataAttributes = exports.InputDataAttributes = /*#__PURE__*/function (I
    */
   InputDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the input is in valid state (when wrapped in Field.Root).
+   * Present when the input is in a valid state (when wrapped in Field.Root).
    */
   InputDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the input is in invalid state (when wrapped in Field.Root).
+   * Present when the input is in an invalid state (when wrapped in Field.Root).
    */
   InputDataAttributes["invalid"] = "data-invalid";
   /**

package/internals/RequestQueue.d.ts

@@ -0,0 +1,42 @@
+export type RequestStatus = 'queued' | 'pending' | 'unknown';
+export interface RequestQueueOptions<TKey> {
+  /**
+   * The function to call when a queued key is ready to be fetched.
+   */
+  fetchFn: (key: TKey) => Promise<void>;
+  /**
+   * The maximum number of concurrent requests.
+   * @default Infinity
+   */
+  maxConcurrentRequests?: number | undefined;
+  /**
+   * Serialize a key to a string for use as a map key.
+   * Required for complex key types (e.g., objects).
+   * @default String(key)
+   */
+  getKeyId?: ((key: TKey) => string) | undefined;
+}
+/**
+ * Manages concurrent fetching with a queue system.
+ * Tracks request lifecycle through queued → pending states
+ * and limits concurrency to prevent overwhelming the server.
+ */
+export declare class RequestQueue<TKey> {
+  protected pendingRequests: Map<string, TKey>;
+  protected queuedRequests: Map<string, TKey>;
+  protected fetchFn: (key: TKey) => Promise<void>;
+  protected maxConcurrentRequests: number;
+  protected getKeyId: (key: TKey) => string;
+  constructor(options: RequestQueueOptions<TKey>);
+  /**
+   * Returns the next `count` entries to process from the queue.
+   * Default is FIFO (oldest first). Subclasses can override for different ordering.
+   */
+  protected pickEntries(count: number): [string, TKey][];
+  protected processQueue: () => Promise<void>;
+  queue: (keys: TKey[]) => Promise<void>;
+  setRequestSettled: (key: TKey) => Promise<void>;
+  clear: () => void;
+  clearPendingRequest: (key: TKey) => Promise<void>;
+  getRequestStatus: (key: TKey) => RequestStatus;
+}

package/internals/RequestQueue.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RequestQueue = void 0;
+/**
+ * Manages concurrent fetching with a queue system.
+ * Tracks request lifecycle through queued → pending states
+ * and limits concurrency to prevent overwhelming the server.
+ */
+class RequestQueue {
+  pendingRequests = new Map();
+  queuedRequests = new Map();
+  constructor(options) {
+    this.fetchFn = options.fetchFn;
+    this.maxConcurrentRequests = options.maxConcurrentRequests ?? Infinity;
+    this.getKeyId = options.getKeyId ?? String;
+  }
+
+  /**
+   * Returns the next `count` entries to process from the queue.
+   * Default is FIFO (oldest first). Subclasses can override for different ordering.
+   */
+  pickEntries(count) {
+    const result = [];
+    const iterator = this.queuedRequests.entries();
+    for (let i = 0; i < count; i += 1) {
+      const {
+        value
+      } = iterator.next();
+      result.push(value);
+    }
+    return result;
+  }
+  processQueue = async () => {
+    if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
+      return;
+    }
+    const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
+    if (loopLength === 0) {
+      return;
+    }
+    const fetchPromises = [];
+    for (const [keyId, key] of this.pickEntries(loopLength)) {
+      this.queuedRequests.delete(keyId);
+      this.pendingRequests.set(keyId, key);
+      fetchPromises.push(this.fetchFn(key).catch(() => {
+        this.pendingRequests.delete(keyId);
+      }));
+    }
+    await Promise.all(fetchPromises);
+    if (this.queuedRequests.size > 0) {
+      await this.processQueue();
+    }
+  };
+  queue = async keys => {
+    for (const key of keys) {
+      const keyId = this.getKeyId(key);
+      if (!this.pendingRequests.has(keyId)) {
+        this.queuedRequests.set(keyId, key);
+      }
+    }
+    await this.processQueue();
+  };
+  setRequestSettled = async key => {
+    const keyId = this.getKeyId(key);
+    this.pendingRequests.delete(keyId);
+    await this.processQueue();
+  };
+  clear = () => {
+    this.queuedRequests.clear();
+    this.pendingRequests.clear();
+  };
+  clearPendingRequest = async key => {
+    const keyId = this.getKeyId(key);
+    this.pendingRequests.delete(keyId);
+    await this.processQueue();
+  };
+  getRequestStatus = key => {
+    const keyId = this.getKeyId(key);
+    if (this.pendingRequests.has(keyId)) {
+      return 'pending';
+    }
+    if (this.queuedRequests.has(keyId)) {
+      return 'queued';
+    }
+    return 'unknown';
+  };
+}
+exports.RequestQueue = RequestQueue;

package/internals/TimeoutManager.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A utility class to manage multiple timeouts.
+ */
+export declare class TimeoutManager {
+  private ids;
+  start: (key: string, delay: number, fn: () => void) => void;
+  clear: (key: string) => void;
+  clearAll: () => void;
+}

package/internals/TimeoutManager.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimeoutManager = void 0;
+/**
+ * A utility class to manage multiple timeouts.
+ */
+class TimeoutManager {
+  ids = new Map();
+  start = (key, delay, fn) => {
+    this.clear(key);
+    const id = setTimeout(() => {
+      this.ids.delete(key);
+      fn();
+    }, delay); /* Node.js types are enabled in development */
+
+    this.ids.set(key, id);
+  };
+  clear = key => {
+    const id = this.ids.get(key);
+    if (id != null) {
+      clearTimeout(id);
+      this.ids.delete(key);
+    }
+  };
+  clearAll = () => {
+    this.ids.forEach(clearTimeout);
+    this.ids.clear();
+  };
+}
+exports.TimeoutManager = TimeoutManager;

package/{esm → internals}/composite/composite.d.ts

@@ -1,5 +1,5 @@
-import type { TextDirection } from "../direction-provider/DirectionContext.js";
-export { stopEvent, isIndexOutOfListBounds, isListIndexDisabled, createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex } from "../floating-ui-react/utils.js";
+import type { TextDirection } from "../direction-context/DirectionContext.js";
+export { stopEvent, isIndexOutOfListBounds, isListIndexDisabled, createGridCellMap, findNonDisabledListIndex, getGridCellIndexOfCorner, getGridCellIndices, getGridNavigatedIndex, getMaxListIndex, getMinListIndex } from "../../floating-ui-react/utils.js";
 export interface Dimensions {
   width: number;
   height: number;
@@ -10,6 +10,8 @@ export declare const ARROW_LEFT = "ArrowLeft";
 export declare const ARROW_RIGHT = "ArrowRight";
 export declare const HOME = "Home";
 export declare const END = "End";
+export declare const PAGE_UP = "PageUp";
+export declare const PAGE_DOWN = "PageDown";
 export declare const HORIZONTAL_KEYS: Set<string>;
 export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;

package/{composite → internals/composite}/composite.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = exports.ALL_KEYS = void 0;
+exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS = exports.SHIFT = exports.PAGE_UP = exports.PAGE_DOWN = exports.MODIFIER_KEYS = exports.META = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS = exports.HOME = exports.END = exports.CONTROL = exports.COMPOSITE_KEYS = exports.ARROW_UP = exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_KEYS = exports.ARROW_DOWN = exports.ALT = exports.ALL_KEYS = void 0;
 Object.defineProperty(exports, "createGridCellMap", {
   enumerable: true,
   get: function () {
@@ -67,13 +67,15 @@ Object.defineProperty(exports, "stopEvent", {
   }
 });
 var _dom = require("@floating-ui/utils/dom");
-var _utils = require("../floating-ui-react/utils");
+var _utils = require("../../floating-ui-react/utils");
 const ARROW_UP = exports.ARROW_UP = 'ArrowUp';
 const ARROW_DOWN = exports.ARROW_DOWN = 'ArrowDown';
 const ARROW_LEFT = exports.ARROW_LEFT = 'ArrowLeft';
 const ARROW_RIGHT = exports.ARROW_RIGHT = 'ArrowRight';
 const HOME = exports.HOME = 'Home';
 const END = exports.END = 'End';
+const PAGE_UP = exports.PAGE_UP = 'PageUp';
+const PAGE_DOWN = exports.PAGE_DOWN = 'PageDown';
 const HORIZONTAL_KEYS = exports.HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT]);
 const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT, HOME, END]);
 const VERTICAL_KEYS = exports.VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);

package/internals/composite/index.d.ts

@@ -0,0 +1,11 @@
+export { CompositeItem } from "./item/CompositeItem.js";
+export { CompositeList } from "./list/CompositeList.js";
+export type { CompositeMetadata } from "./list/CompositeList.js";
+export { CompositeRoot } from "./root/CompositeRoot.js";
+export { useCompositeListItem } from "./list/useCompositeListItem.js";
+export type { UseCompositeListItemParameters } from "./list/useCompositeListItem.js";
+export { IndexGuessBehavior } from "./list/useCompositeListItem.js";
+export { useCompositeRoot } from "./root/useCompositeRoot.js";
+export type { UseCompositeRootParameters } from "./root/useCompositeRoot.js";
+export { scrollIntoViewIfNeeded } from "./composite.js";
+export { findNonDisabledListIndex, isListIndexDisabled } from "../../floating-ui-react/utils.js";

package/internals/composite/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CompositeItem", {
+  enumerable: true,
+  get: function () {
+    return _CompositeItem.CompositeItem;
+  }
+});
+Object.defineProperty(exports, "CompositeList", {
+  enumerable: true,
+  get: function () {
+    return _CompositeList.CompositeList;
+  }
+});
+Object.defineProperty(exports, "CompositeRoot", {
+  enumerable: true,
+  get: function () {
+    return _CompositeRoot.CompositeRoot;
+  }
+});
+Object.defineProperty(exports, "IndexGuessBehavior", {
+  enumerable: true,
+  get: function () {
+    return _useCompositeListItem.IndexGuessBehavior;
+  }
+});
+Object.defineProperty(exports, "findNonDisabledListIndex", {
+  enumerable: true,
+  get: function () {
+    return _utils.findNonDisabledListIndex;
+  }
+});
+Object.defineProperty(exports, "isListIndexDisabled", {
+  enumerable: true,
+  get: function () {
+    return _utils.isListIndexDisabled;
+  }
+});
+Object.defineProperty(exports, "scrollIntoViewIfNeeded", {
+  enumerable: true,
+  get: function () {
+    return _composite.scrollIntoViewIfNeeded;
+  }
+});
+Object.defineProperty(exports, "useCompositeListItem", {
+  enumerable: true,
+  get: function () {
+    return _useCompositeListItem.useCompositeListItem;
+  }
+});
+Object.defineProperty(exports, "useCompositeRoot", {
+  enumerable: true,
+  get: function () {
+    return _useCompositeRoot.useCompositeRoot;
+  }
+});
+var _CompositeItem = require("./item/CompositeItem");
+var _CompositeList = require("./list/CompositeList");
+var _CompositeRoot = require("./root/CompositeRoot");
+var _useCompositeListItem = require("./list/useCompositeListItem");
+var _useCompositeRoot = require("./root/useCompositeRoot");
+var _composite = require("./composite");
+var _utils = require("../../floating-ui-react/utils");

package/{esm → internals}/composite/item/CompositeItem.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { BaseUIComponentProps } from "../../types.js";
+import { StateAttributesMapping } from "../../getStateAttributesProps.js";
 /**
  * @internal
  */
 export declare function CompositeItem<Metadata, State extends Record<string, any>>(componentProps: CompositeItem.Props<Metadata, State>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export interface CompositeItemState {}
-export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className'> {
+export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<any, State>, 'render' | 'className' | 'style'> {
   children?: React.ReactNode;
   metadata?: Metadata | undefined;
   refs?: React.Ref<HTMLElement | null>[] | undefined;

package/{composite → internals/composite}/item/CompositeItem.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CompositeItem = CompositeItem;
-var _useRenderElement = require("../../utils/useRenderElement");
+var _empty = require("@base-ui/utils/empty");
+var _useRenderElement = require("../../useRenderElement");
 var _useCompositeItem = require("./useCompositeItem");
-var _constants = require("../../utils/constants");
 /**
  * @internal
  */
@@ -15,9 +15,10 @@ function CompositeItem(componentProps) {
   const {
     render,
     className,
-    state = _constants.EMPTY_OBJECT,
-    props = _constants.EMPTY_ARRAY,
-    refs = _constants.EMPTY_ARRAY,
+    style,
+    state = _empty.EMPTY_OBJECT,
+    props = _empty.EMPTY_ARRAY,
+    refs = _empty.EMPTY_ARRAY,
     metadata,
     stateAttributesMapping,
     tag = 'div',

package/{esm → internals}/composite/item/useCompositeItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type UseCompositeListItemParameters } from "../list/useCompositeListItem.js";
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../types.js";
 export interface UseCompositeItemParameters<Metadata> extends Pick<UseCompositeListItemParameters<Metadata>, 'metadata' | 'indexGuessBehavior'> {}
 export declare function useCompositeItem<Metadata>(params?: UseCompositeItemParameters<Metadata>): {
   compositeProps: HTMLProps;

package/{composite → internals/composite}/root/CompositeRoot.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { type CompositeMetadata } from "../list/CompositeList.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, BaseUIEvent } from "../../types.js";
 import type { Dimensions, ModifierKey } from "../composite.js";
-import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import { StateAttributesMapping } from "../../getStateAttributesProps.js";
 /**
  * @internal
  */
 export declare function CompositeRoot<Metadata extends {}, State extends Record<string, any>>(componentProps: CompositeRoot.Props<Metadata, State>): import("react/jsx-runtime").JSX.Element;
 export interface CompositeRootState {}
-export interface CompositeRootProps<Metadata, State extends Record<string, any>> extends Pick<BaseUIComponentProps<'div', State>, 'render' | 'className' | 'children'> {
+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;
   state?: State | undefined;
   stateAttributesMapping?: StateAttributesMapping<State> | undefined;
@@ -17,12 +17,14 @@ export interface CompositeRootProps<Metadata, State extends Record<string, any>>
   orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
+  onLoop?: ((event: React.KeyboardEvent, prevIndex: number, nextIndex: number, elementsRef: React.RefObject<(HTMLDivElement | null)[]>) => number) | undefined;
   highlightedIndex?: number | undefined;
   onHighlightedIndexChange?: ((index: number) => void) | undefined;
   itemSizes?: Dimensions[] | undefined;
   dense?: boolean | undefined;
   enableHomeAndEndKeys?: boolean | undefined;
   onMapChange?: ((newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void) | undefined;
+  onKeyDown?: ((event: BaseUIEvent<React.KeyboardEvent>) => void) | undefined;
   stopEventPropagation?: boolean | undefined;
   rootRef?: React.RefObject<HTMLElement | null> | undefined;
   disabledIndices?: number[] | undefined;

package/{composite → internals/composite}/root/CompositeRoot.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CompositeRoot = CompositeRoot;
 var React = _interopRequireWildcard(require("react"));
+var _empty = require("@base-ui/utils/empty");
 var _CompositeList = require("../list/CompositeList");
 var _useCompositeRoot = require("./useCompositeRoot");
 var _CompositeRootContext = require("./CompositeRootContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
-var _constants = require("../../utils/constants");
+var _useRenderElement = require("../../useRenderElement");
+var _DirectionContext = require("../../direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @internal
@@ -21,9 +21,10 @@ function CompositeRoot(componentProps) {
   const {
     render,
     className,
-    refs = _constants.EMPTY_ARRAY,
-    props = _constants.EMPTY_ARRAY,
-    state = _constants.EMPTY_OBJECT,
+    style,
+    refs = _empty.EMPTY_ARRAY,
+    props = _empty.EMPTY_ARRAY,
+    state = _empty.EMPTY_OBJECT,
     stateAttributesMapping,
     highlightedIndex: highlightedIndexProp,
     onHighlightedIndexChange: onHighlightedIndexChangeProp,
@@ -31,6 +32,7 @@ function CompositeRoot(componentProps) {
     dense,
     itemSizes,
     loopFocus,
+    onLoop,
     cols,
     enableHomeAndEndKeys,
     onMapChange: onMapChangeProp,
@@ -54,6 +56,7 @@ function CompositeRoot(componentProps) {
     itemSizes,
     cols,
     loopFocus,
+    onLoop,
     dense,
     orientation,
     highlightedIndex: highlightedIndexProp,

package/{composite → internals/composite}/root/useCompositeRoot.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { TextDirection } from "../../direction-provider/DirectionContext.js";
+import type { TextDirection } from "../../direction-context/DirectionContext.js";
 import { type Dimensions, type ModifierKey } from "../composite.js";
 import { CompositeMetadata } from "../list/CompositeList.js";
-import { HTMLProps } from "../../utils/types.js";
+import { HTMLProps } from "../../types.js";
 export interface UseCompositeRootParameters {
   orientation?: 'horizontal' | 'vertical' | 'both' | undefined;
   cols?: number | undefined;
   loopFocus?: boolean | undefined;
+  onLoop?: ((event: React.KeyboardEvent, prevIndex: number, nextIndex: number, elementsRef: React.RefObject<(HTMLDivElement | null)[]>) => number) | undefined;
   highlightedIndex?: number | undefined;
   onHighlightedIndexChange?: ((index: number) => void) | undefined;
   dense?: boolean | undefined;