@base-ui/react 1.4.0 → 1.5.0

package/floating-ui-react/utils/composite.js

@@ -12,6 +12,7 @@ exports.getMaxListIndex = getMaxListIndex;
 exports.getMinListIndex = getMinListIndex;
 exports.isDifferentGridRow = isDifferentGridRow;
 exports.isElementVisible = isElementVisible;
+exports.isHiddenByStyles = isHiddenByStyles;
 exports.isIndexOutOfListBounds = isIndexOutOfListBounds;
 exports.isListIndexDisabled = isListIndexDisabled;
 var _utils = require("@floating-ui/utils");
@@ -312,6 +313,8 @@ function createGridCellMap(sizes, cols, dense) {
   }, index) => {
     if (width > cols) {
       if (process.env.NODE_ENV !== 'production') {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(`[Floating UI]: Invalid grid - item width at index ${index} is greater than grid columns`);
       }
     }
@@ -386,9 +389,15 @@ function isListIndexDisabled(list, index, disabledIndices) {
   }
   return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
 }
-function isElementVisible(element) {
+function isHiddenByStyles(styles) {
+  return styles.visibility === 'hidden' || styles.visibility === 'collapse';
+}
+function isElementVisible(element, styles = element ? (0, _dom.getComputedStyle)(element) : null) {
+  if (!element || !element.isConnected || !styles || isHiddenByStyles(styles)) {
+    return false;
+  }
   if (typeof element.checkVisibility === 'function') {
     return element.checkVisibility();
   }
-  return (0, _dom.getComputedStyle)(element).display !== 'none';
+  return styles.display !== 'none' && styles.display !== 'contents';
 }

package/floating-ui-react/utils/element.d.ts

@@ -1,5 +1,5 @@
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
-import { activeElement, contains, getTarget } from "./shadowDom.js";
+import { activeElement, contains, getTarget } from "../../internals/shadowDom.js";
 export { activeElement, contains, getTarget };
 export declare function isTargetInsideEnabledTrigger(target: EventTarget | null, triggerElements: PopupTriggerMap): boolean;
 export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;

package/floating-ui-react/utils/element.js

@@ -32,7 +32,7 @@ exports.matchesFocusVisible = matchesFocusVisible;
 var _dom = require("@floating-ui/utils/dom");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _constants = require("./constants");
-var _shadowDom = require("./shadowDom");
+var _shadowDom = require("../../internals/shadowDom");
 function isTargetInsideEnabledTrigger(target, triggerElements) {
   if (!(0, _dom.isElement)(target)) {
     return false;

package/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,9 +1,9 @@
+import { NOOP } from '@base-ui/utils/empty';
 import type { FocusableElement } from "./tabbable.js";
-import { NOOP } from "../../utils/noop.js";
 interface Options {
   preventScroll?: boolean | undefined;
-  cancelPrevious?: boolean | undefined;
   sync?: boolean | undefined;
+  shouldFocus?: (() => boolean) | undefined;
 }
 export declare function enqueueFocus(el: FocusableElement | null, options?: Options): typeof NOOP;
 export {};

package/floating-ui-react/utils/enqueueFocus.js

@@ -4,23 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.enqueueFocus = enqueueFocus;
-var _noop = require("../../utils/noop");
+var _empty = require("@base-ui/utils/empty");
 let rafId = 0;
 function enqueueFocus(el, options = {}) {
   const {
     preventScroll = false,
-    cancelPrevious = true,
-    sync = false
+    sync = false,
+    shouldFocus
   } = options;
-  if (cancelPrevious) {
-    cancelAnimationFrame(rafId);
+  cancelAnimationFrame(rafId);
+  function exec() {
+    if (shouldFocus && !shouldFocus()) {
+      return;
+    }
+    el?.focus({
+      preventScroll
+    });
   }
-  const exec = () => el?.focus({
-    preventScroll
-  });
   if (sync) {
     exec();
-    return _noop.NOOP;
+    return _empty.NOOP;
   }
   const currentRafId = requestAnimationFrame(exec);
   rafId = currentRafId;

package/floating-ui-react/utils/getEmptyRootContext.js

@@ -13,7 +13,7 @@ function getEmptyRootContext() {
     floatingElement: null,
     referenceElement: null,
     triggerElements: new _popups.PopupTriggerMap(),
-    floatingId: '',
+    floatingId: undefined,
     syncOnly: false,
     nested: false,
     onOpenChange: undefined

package/floating-ui-react/utils/tabbable.js

@@ -50,16 +50,24 @@ function isFocusableElement(element) {
     return false;
   }
   for (let current = element; current; current = getParentElement(current)) {
+    const isAncestor = current !== element;
     const isSlot = (0, _dom.getNodeName)(current) === 'slot';
     if (current.hasAttribute('inert')) {
       return false;
     }
-    if (current !== element && (0, _dom.getNodeName)(current) === 'details' && !current.open && !isWithinOpenDetailsSummary(element, current) || current.hasAttribute('hidden') || !isSlot && !(0, _composite.isElementVisible)(current)) {
+    if (isAncestor && (0, _dom.getNodeName)(current) === 'details' && !current.open && !isWithinOpenDetailsSummary(element, current) || current.hasAttribute('hidden') || !isSlot && !isVisibleInTabbableTree(current, isAncestor)) {
       return false;
     }
   }
   return true;
 }
+function isVisibleInTabbableTree(element, isAncestor) {
+  const styles = (0, _dom.getComputedStyle)(element);
+  if (!isAncestor) {
+    return (0, _composite.isElementVisible)(element, styles);
+  }
+  return styles.display !== 'none';
+}
 function getTabIndex(element) {
   const tabIndex = element.tabIndex;
   if (tabIndex < 0) {

package/form/Form.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
-import type { BaseUIComponentProps } from "../utils/types.js";
-import { FormContext } from "./FormContext.js";
+import { type BaseUIGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
+import type { BaseUIComponentProps } from "../internals/types.js";
+import { FormContext } from "../internals/form-context/FormContext.js";
 /**
  * A native form element with consolidated error handling.
  * Renders a `<form>` element.

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.
@@ -66,11 +66,11 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     if (fieldName) {
       const namedField = values.find(field => field.name === fieldName);
       if (namedField) {
-        namedField.validate(false);
+        namedField.validate();
       }
     } else {
       values.forEach(field => {
-        field.validate(false);
+        field.validate();
       });
     }
   }, []);
@@ -112,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
       };
@@ -123,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.js

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

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).

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/{composite → 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;
@@ -17,7 +17,6 @@ export declare const HORIZONTAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const VERTICAL_KEYS: Set<string>;
 export declare const VERTICAL_KEYS_WITH_EXTRA_KEYS: Set<string>;
 export declare const ARROW_KEYS: Set<string>;
-export declare const ALL_KEYS: Set<string>;
 export declare const COMPOSITE_KEYS: Set<string>;
 export declare const SHIFT: "Shift";
 export declare const CONTROL: "Control";

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.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;
+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 = void 0;
 Object.defineProperty(exports, "createGridCellMap", {
   enumerable: true,
   get: function () {
@@ -67,7 +67,7 @@ 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';
@@ -81,8 +81,7 @@ const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = exports.HORIZONTAL_KEYS_WITH_EXTRA_KEYS
 const VERTICAL_KEYS = exports.VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN]);
 const VERTICAL_KEYS_WITH_EXTRA_KEYS = exports.VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([ARROW_UP, ARROW_DOWN, HOME, END]);
 const ARROW_KEYS = exports.ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS]);
-const ALL_KEYS = exports.ALL_KEYS = new Set([...ARROW_KEYS, HOME, END]);
-const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([ARROW_UP, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, HOME, END]);
+const COMPOSITE_KEYS = exports.COMPOSITE_KEYS = new Set([...ARROW_KEYS, HOME, END]);
 const SHIFT = exports.SHIFT = 'Shift';
 const CONTROL = exports.CONTROL = 'Control';
 const ALT = exports.ALT = 'Alt';

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/{composite → internals/composite}/item/CompositeItem.d.ts

@@ -1,6 +1,6 @@
 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
  */

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
  */
@@ -16,9 +16,9 @@ function CompositeItem(componentProps) {
     render,
     className,
     style,
-    state = _constants.EMPTY_OBJECT,
-    props = _constants.EMPTY_ARRAY,
-    refs = _constants.EMPTY_ARRAY,
+    state = _empty.EMPTY_OBJECT,
+    props = _empty.EMPTY_ARRAY,
+    refs = _empty.EMPTY_ARRAY,
     metadata,
     stateAttributesMapping,
     tag = 'div',

package/{composite → 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,8 +1,8 @@
 import * as React from 'react';
 import { type CompositeMetadata } from "../list/CompositeList.js";
-import type { BaseUIComponentProps, BaseUIEvent } 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
  */

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
@@ -22,9 +22,9 @@ function CompositeRoot(componentProps) {
     render,
     className,
     style,
-    refs = _constants.EMPTY_ARRAY,
-    props = _constants.EMPTY_ARRAY,
-    state = _constants.EMPTY_OBJECT,
+    refs = _empty.EMPTY_ARRAY,
+    props = _empty.EMPTY_ARRAY,
+    state = _empty.EMPTY_OBJECT,
     stateAttributesMapping,
     highlightedIndex: highlightedIndexProp,
     onHighlightedIndexChange: onHighlightedIndexChangeProp,

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

@@ -1,8 +1,8 @@
 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;