@base-ui/react 1.3.0 → 1.4.1

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

@@ -12,12 +12,14 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _composite = require("../composite");
 var _constants = require("../constants");
+var _utils = require("../../../floating-ui-react/utils");
 const EMPTY_ARRAY = [];
 function useCompositeRoot(params) {
   const {
     itemSizes,
     cols = 1,
     loopFocus = true,
+    onLoop,
     dense = false,
     orientation = 'both',
     direction,
@@ -57,15 +59,22 @@ function useCompositeRoot(params) {
     }
     (0, _composite.scrollIntoViewIfNeeded)(rootRef.current, activeItem, direction, orientation);
   });
+  const wrappedOnLoop = (0, _useStableCallback.useStableCallback)((event, prevIndex, nextIndex) => {
+    if (!onLoop) {
+      return nextIndex;
+    }
+    return onLoop?.(event, prevIndex, nextIndex, elementsRef);
+  });
   const props = React.useMemo(() => ({
     'aria-orientation': orientation === 'both' ? undefined : orientation,
     ref: mergedRef,
     onFocus(event) {
       const element = rootRef.current;
-      if (!element || !(0, _composite.isNativeInput)(event.target)) {
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      if (!element || target == null || !(0, _composite.isNativeInput)(target)) {
         return;
       }
-      event.target.setSelectionRange(0, event.target.value.length ?? 0);
+      target.setSelectionRange(0, target.value.length ?? 0);
     },
     onKeyDown(event) {
       const RELEVANT_KEYS = enableHomeAndEndKeys ? _composite.ALL_KEYS : _composite.ARROW_KEYS;
@@ -92,10 +101,11 @@ function useCompositeRoot(params) {
         vertical: _composite.ARROW_UP,
         both: horizontalBackwardKey
       }[orientation];
-      if ((0, _composite.isNativeInput)(event.target) && !(0, _isElementDisabled.isElementDisabled)(event.target)) {
-        const selectionStart = event.target.selectionStart;
-        const selectionEnd = event.target.selectionEnd;
-        const textContent = event.target.value ?? '';
+      const target = (0, _utils.getTarget)(event.nativeEvent);
+      if (target != null && (0, _composite.isNativeInput)(target) && !(0, _isElementDisabled.isElementDisabled)(target)) {
+        const selectionStart = target.selectionStart;
+        const selectionEnd = target.selectionEnd;
+        const textContent = target.value ?? '';
         // return to native textbox behavior when
         // 1 - Shift is held to make a text selection, or if there already is a text selection
         if (selectionStart == null || event.shiftKey || selectionStart !== selectionEnd) {
@@ -123,19 +133,18 @@ function useCompositeRoot(params) {
         // To calculate movements on the grid, we use hypothetical cell indices
         // as if every item was 1x1, then convert back to real indices.
         const cellMap = (0, _composite.createGridCellMap)(sizes, cols, dense);
-        const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(elementsRef, index, disabledIndices));
+        const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(elementsRef.current, index, disabledIndices));
         // last enabled index
-        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(elementsRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-        nextIndex = cellMap[(0, _composite.getGridNavigatedIndex)({
-          current: cellMap.map(itemIndex => itemIndex ? elementsRef.current[itemIndex] : null)
-        }, {
+        const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(elementsRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+        nextIndex = cellMap[(0, _composite.getGridNavigatedIndex)(cellMap.map(itemIndex => itemIndex != null ? elementsRef.current[itemIndex] : null), {
           event,
           orientation,
           loopFocus,
+          onLoop: wrappedOnLoop,
           cols,
           // treat undefined (empty grid spaces) as disabled indices so we
           // don't end up in them
-          disabledIndices: (0, _composite.getGridCellIndices)([...(disabledIndices || elementsRef.current.map((_, index) => (0, _composite.isListIndexDisabled)(elementsRef, index) ? index : undefined)), undefined], cellMap),
+          disabledIndices: (0, _composite.getGridCellIndices)([...(disabledIndices || elementsRef.current.map((_, index) => (0, _composite.isListIndexDisabled)(elementsRef.current, index) ? index : undefined)), undefined], cellMap),
           minIndex: minGridIndex,
           maxIndex: maxGridIndex,
           prevIndex: (0, _composite.getGridCellIndexOfCorner)(highlightedIndex > maxIndex ? minIndex : highlightedIndex, sizes, cellMap, cols,
@@ -172,17 +181,23 @@ function useCompositeRoot(params) {
       if (nextIndex === highlightedIndex && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))) {
         if (loopFocus && nextIndex === maxIndex && forwardKeys.includes(event.key)) {
           nextIndex = minIndex;
+          if (onLoop) {
+            nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+          }
         } else if (loopFocus && nextIndex === minIndex && backwardKeys.includes(event.key)) {
           nextIndex = maxIndex;
+          if (onLoop) {
+            nextIndex = onLoop(event, highlightedIndex, nextIndex, elementsRef);
+          }
         } else {
-          nextIndex = (0, _composite.findNonDisabledListIndex)(elementsRef, {
+          nextIndex = (0, _composite.findNonDisabledListIndex)(elementsRef.current, {
             startingIndex: nextIndex,
             decrement: backwardKeys.includes(event.key),
             disabledIndices
           });
         }
       }
-      if (nextIndex !== highlightedIndex && !(0, _composite.isIndexOutOfListBounds)(elementsRef, nextIndex)) {
+      if (nextIndex !== highlightedIndex && !(0, _composite.isIndexOutOfListBounds)(elementsRef.current, nextIndex)) {
         if (stopEventPropagation) {
           event.stopPropagation();
         }
@@ -197,7 +212,7 @@ function useCompositeRoot(params) {
         });
       }
     }
-  }), [cols, dense, direction, disabledIndices, elementsRef, enableHomeAndEndKeys, highlightedIndex, isGrid, itemSizes, loopFocus, mergedRef, modifierKeys, onHighlightedIndexChange, orientation, stopEventPropagation]);
+  }), [cols, dense, direction, disabledIndices, elementsRef, enableHomeAndEndKeys, highlightedIndex, isGrid, itemSizes, loopFocus, onLoop, wrappedOnLoop, mergedRef, modifierKeys, onHighlightedIndexChange, orientation, stopEventPropagation]);
   return React.useMemo(() => ({
     props,
     highlightedIndex,

package/{utils → internals}/constants.d.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 export declare const TYPEAHEAD_RESET_MS = 500;
 export declare const PATIENT_CLICK_THRESHOLD = 500;
 export declare const DISABLED_TRANSITIONS_STYLE: {
@@ -5,7 +6,6 @@ export declare const DISABLED_TRANSITIONS_STYLE: {
     transition: string;
   };
 };
-export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export declare const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
 export declare const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
 export declare const LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";

package/{utils → internals}/constants.js

@@ -3,21 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DROPDOWN_COLLISION_AVOIDANCE = exports.DISABLED_TRANSITIONS_STYLE = exports.CLICK_TRIGGER_IDENTIFIER = exports.BASE_UI_SWIPE_IGNORE_SELECTOR = exports.BASE_UI_SWIPE_IGNORE_ATTRIBUTE = void 0;
-Object.defineProperty(exports, "EMPTY_ARRAY", {
-  enumerable: true,
-  get: function () {
-    return _empty.EMPTY_ARRAY;
-  }
-});
-Object.defineProperty(exports, "EMPTY_OBJECT", {
-  enumerable: true,
-  get: function () {
-    return _empty.EMPTY_OBJECT;
-  }
-});
-exports.ownerVisuallyHidden = exports.TYPEAHEAD_RESET_MS = exports.POPUP_COLLISION_AVOIDANCE = exports.PATIENT_CLICK_THRESHOLD = exports.LEGACY_SWIPE_IGNORE_SELECTOR = exports.LEGACY_SWIPE_IGNORE_ATTRIBUTE = void 0;
-var _empty = require("@base-ui/utils/empty");
+exports.ownerVisuallyHidden = exports.TYPEAHEAD_RESET_MS = exports.POPUP_COLLISION_AVOIDANCE = exports.PATIENT_CLICK_THRESHOLD = exports.LEGACY_SWIPE_IGNORE_SELECTOR = exports.LEGACY_SWIPE_IGNORE_ATTRIBUTE = exports.DROPDOWN_COLLISION_AVOIDANCE = exports.DISABLED_TRANSITIONS_STYLE = exports.CLICK_TRIGGER_IDENTIFIER = exports.BASE_UI_SWIPE_IGNORE_SELECTOR = exports.BASE_UI_SWIPE_IGNORE_ATTRIBUTE = void 0;
 const TYPEAHEAD_RESET_MS = exports.TYPEAHEAD_RESET_MS = 500;
 const PATIENT_CLICK_THRESHOLD = exports.PATIENT_CLICK_THRESHOLD = 500;
 const DISABLED_TRANSITIONS_STYLE = exports.DISABLED_TRANSITIONS_STYLE = {

package/{esm/utils → internals}/createBaseUIEventDetails.d.ts

@@ -71,7 +71,7 @@ type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends obj
 /**
  * Details of custom change events emitted by Base UI components.
  */
-export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> : never;
+export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Details of custom generic events emitted by Base UI components.
  */
@@ -85,7 +85,7 @@ type BaseUIGenericEventDetail<Reason extends string, CustomProperties extends ob
    */
   event: ReasonToEvent<Reason>;
 } & CustomProperties;
-export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> : never;
+export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.

package/{utils → internals}/createBaseUIEventDetails.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createChangeEventDetails = createChangeEventDetails;
 exports.createGenericEventDetails = createGenericEventDetails;
-var _constants = require("./constants");
+var _empty = require("@base-ui/utils/empty");
 var _reasons = require("./reasons");
 /**
  * Maps a change `reason` string to the corresponding native event type.
@@ -26,7 +26,7 @@ var _reasons = require("./reasons");
 function createChangeEventDetails(reason, event, trigger, customProperties) {
   let canceled = false;
   let allowPropagation = false;
-  const custom = customProperties ?? _constants.EMPTY_OBJECT;
+  const custom = customProperties ?? _empty.EMPTY_OBJECT;
   const details = {
     reason,
     event: event ?? new Event('base-ui'),
@@ -48,7 +48,7 @@ function createChangeEventDetails(reason, event, trigger, customProperties) {
   return details;
 }
 function createGenericEventDetails(reason, event, customProperties) {
-  const custom = customProperties ?? _constants.EMPTY_OBJECT;
+  const custom = customProperties ?? _empty.EMPTY_OBJECT;
   const details = {
     reason,
     event: event ?? new Event('base-ui'),

package/internals/direction-context/index.d.ts

@@ -0,0 +1,2 @@
+export { DirectionContext, useDirection } from "./DirectionContext.js";
+export type { TextDirection, DirectionContext as DirectionContextType } from "./DirectionContext.js";

package/internals/direction-context/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DirectionContext", {
+  enumerable: true,
+  get: function () {
+    return _DirectionContext.DirectionContext;
+  }
+});
+Object.defineProperty(exports, "useDirection", {
+  enumerable: true,
+  get: function () {
+    return _DirectionContext.useDirection;
+  }
+});
+var _DirectionContext = require("./DirectionContext");

package/{field/utils → internals/field-constants}/constants.d.ts

@@ -1,4 +1,4 @@
-import type { FieldRootState } from "../root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 export declare const DEFAULT_VALIDITY_STATE: {
   badInput: boolean;
   customError: boolean;

package/{field/utils → internals/field-constants}/constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fieldValidityMapping = exports.DEFAULT_VALIDITY_STATE = exports.DEFAULT_FIELD_STATE_ATTRIBUTES = exports.DEFAULT_FIELD_ROOT_STATE = void 0;
-var _FieldControlDataAttributes = require("../control/FieldControlDataAttributes");
+var _FieldControlDataAttributes = require("../../field/control/FieldControlDataAttributes");
 const DEFAULT_VALIDITY_STATE = exports.DEFAULT_VALIDITY_STATE = {
   badInput: false,
   customError: false,

package/internals/field-constants/index.d.ts

@@ -0,0 +1 @@
+export { DEFAULT_VALIDITY_STATE, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_FIELD_ROOT_STATE, fieldValidityMapping } from "./constants.js";

package/internals/field-constants/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_FIELD_ROOT_STATE", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_FIELD_ROOT_STATE;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_FIELD_STATE_ATTRIBUTES", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_FIELD_STATE_ATTRIBUTES;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_VALIDITY_STATE", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_VALIDITY_STATE;
+  }
+});
+Object.defineProperty(exports, "fieldValidityMapping", {
+  enumerable: true,
+  get: function () {
+    return _constants.fieldValidityMapping;
+  }
+});
+var _constants = require("./constants");

package/internals/field-register-control/index.d.ts

@@ -0,0 +1,4 @@
+export { useRegisterFieldControl } from "./useRegisterFieldControl.js";
+export type { UseRegisterFieldControlParameters } from "./useRegisterFieldControl.js";
+export { useFieldControlRegistration } from "./useFieldControlRegistration.js";
+export type { FieldControlRegistration, UseFieldControlRegistrationParameters } from "./useFieldControlRegistration.js";

package/internals/field-register-control/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useFieldControlRegistration", {
+  enumerable: true,
+  get: function () {
+    return _useFieldControlRegistration.useFieldControlRegistration;
+  }
+});
+Object.defineProperty(exports, "useRegisterFieldControl", {
+  enumerable: true,
+  get: function () {
+    return _useRegisterFieldControl.useRegisterFieldControl;
+  }
+});
+var _useRegisterFieldControl = require("./useRegisterFieldControl");
+var _useFieldControlRegistration = require("./useFieldControlRegistration");

package/internals/field-register-control/useFieldControlRegistration.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { FieldValidityData } from "../../field/root/FieldRoot.js";
+export interface FieldControlRegistration {
+  controlRef: React.RefObject<any>;
+  getValue?: (() => unknown) | undefined;
+  id: string | undefined;
+  value: unknown;
+}
+export declare function useFieldControlRegistration(params: UseFieldControlRegistrationParameters): (source: symbol, registration: FieldControlRegistration | undefined) => void;
+export interface UseFieldControlRegistrationParameters {
+  commit: (value: unknown) => void;
+  invalid: boolean;
+  markedDirtyRef: React.RefObject<boolean>;
+  name: string | undefined;
+  setValidityData: React.Dispatch<React.SetStateAction<FieldValidityData>>;
+  validityData: FieldValidityData;
+}

package/internals/field-register-control/useFieldControlRegistration.js

@@ -0,0 +1,131 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldControlRegistration = useFieldControlRegistration;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _getCombinedFieldValidityData = require("../../field/utils/getCombinedFieldValidityData");
+var _FormContext = require("../form-context/FormContext");
+function useFieldControlRegistration(params) {
+  const {
+    commit,
+    invalid,
+    markedDirtyRef,
+    name,
+    setValidityData,
+    validityData
+  } = params;
+  const {
+    formRef
+  } = (0, _FormContext.useFormContext)();
+  const activeFieldControlSourceRef = React.useRef(null);
+  const registrationRef = React.useRef(null);
+  const fallbackControlRef = React.useRef(null);
+  const getValue = (0, _useStableCallback.useStableCallback)(() => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return undefined;
+    }
+    if (registration.getValue) {
+      return registration.getValue();
+    }
+    return registration.value;
+  });
+  const validate = (0, _useStableCallback.useStableCallback)((flushSync = true) => {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let nextValue = registration.value;
+    if (nextValue === undefined) {
+      nextValue = getValue();
+    }
+    markedDirtyRef.current = true;
+    if (!flushSync) {
+      commit(nextValue);
+    } else {
+      // Synchronously update the validity state so the submit event can be prevented.
+      ReactDOM.flushSync(() => commit(nextValue));
+    }
+  });
+  function refreshRegistration() {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+      validate
+    });
+  }
+  function deleteRegistration(id = registrationRef.current?.id) {
+    if (id) {
+      formRef.current.fields.delete(id);
+    }
+  }
+  function syncInitialValue() {
+    const registration = registrationRef.current;
+    if (!registration) {
+      return;
+    }
+    let initialValue = registration.value;
+    if (initialValue === undefined) {
+      initialValue = getValue();
+    }
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
+  }
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const registration = registrationRef.current;
+    if (!registration || !registration.id) {
+      return;
+    }
+    formRef.current.fields.set(registration.id, {
+      getValue,
+      name,
+      controlRef: registration.controlRef ?? fallbackControlRef,
+      validityData: (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(validityData, invalid),
+      validate
+    });
+  }, [formRef, getValue, invalid, name, validate, validityData]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const fields = formRef.current.fields;
+    return () => {
+      const id = registrationRef.current?.id;
+      if (id) {
+        fields.delete(id);
+      }
+    };
+  }, [formRef]);
+  return (0, _useStableCallback.useStableCallback)((source, registration) => {
+    if (!registration) {
+      if (activeFieldControlSourceRef.current === source) {
+        activeFieldControlSourceRef.current = null;
+        deleteRegistration();
+        registrationRef.current = null;
+      }
+      return;
+    }
+    const previousId = registrationRef.current?.id;
+    activeFieldControlSourceRef.current = source;
+    registrationRef.current = registration;
+    if (previousId && previousId !== registration.id) {
+      deleteRegistration(previousId);
+    }
+    syncInitialValue();
+    refreshRegistration();
+  });
+}

package/internals/field-register-control/useRegisterFieldControl.d.ts

@@ -0,0 +1,5 @@
+import type { FieldControlRegistration } from "./useFieldControlRegistration.js";
+export interface UseRegisterFieldControlParameters extends FieldControlRegistration {
+  enabled?: boolean | undefined;
+}
+export declare function useRegisterFieldControl(controlRef: FieldControlRegistration['controlRef'], params: Omit<UseRegisterFieldControlParameters, 'controlRef'>): void;

package/internals/field-register-control/useRegisterFieldControl.js

@@ -0,0 +1,41 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterFieldControl = useRegisterFieldControl;
+var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _FieldRootContext = require("../field-root-context/FieldRootContext");
+function useRegisterFieldControl(controlRef, params) {
+  const {
+    enabled = true,
+    getValue,
+    id,
+    value
+  } = params;
+  const {
+    registerFieldControl
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const sourceRef = React.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
+    }
+    registerFieldControl(source, {
+      controlRef,
+      getValue,
+      id,
+      value
+    });
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getValue, id, registerFieldControl, value]);
+}

package/{field/root → internals/field-root-context}/FieldRootContext.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { FieldValidityData, FieldRootState } from "./FieldRoot.js";
+import type { FieldValidityData, FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Form } from "../../form/index.js";
-import type { UseFieldValidationReturnValue } from "./useFieldValidation.js";
+import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
+import type { FieldControlRegistration } from "../field-register-control/useFieldControlRegistration.js";
 export interface FieldRootContext {
   invalid: boolean | undefined;
   name: string | undefined;
@@ -22,6 +23,7 @@ export interface FieldRootContext {
   shouldValidateOnChange: () => boolean;
   state: FieldRootState;
   markedDirtyRef: React.RefObject<boolean>;
+  registerFieldControl: (source: symbol, registration: FieldControlRegistration | undefined) => void;
   validation: UseFieldValidationReturnValue;
 }
 export declare const FieldRootContext: React.Context<FieldRootContext>;

package/{field/root → internals/field-root-context}/FieldRootContext.js

@@ -10,9 +10,9 @@ exports.FieldRootContext = void 0;
 exports.useFieldRootContext = useFieldRootContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
-var _noop = require("../../utils/noop");
-var _constants = require("../utils/constants");
-var _constants2 = require("../../utils/constants");
+var _empty = require("@base-ui/utils/empty");
+var _noop = require("../noop");
+var _constants = require("../field-constants/constants");
 const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createContext({
   invalid: undefined,
   name: undefined,
@@ -41,9 +41,10 @@ const FieldRootContext = exports.FieldRootContext = /*#__PURE__*/React.createCon
   markedDirtyRef: {
     current: false
   },
+  registerFieldControl: _noop.NOOP,
   validation: {
-    getValidationProps: (props = _constants2.EMPTY_OBJECT) => props,
-    getInputValidationProps: (props = _constants2.EMPTY_OBJECT) => props,
+    getValidationProps: (props = _empty.EMPTY_OBJECT) => props,
+    getInputValidationProps: (props = _empty.EMPTY_OBJECT) => props,
     inputRef: {
       current: null
     },

package/internals/field-root-context/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldRootContext, useFieldRootContext } from "./FieldRootContext.js";
+export type { FieldRootContext as FieldRootContextType } from "./FieldRootContext.js";

package/internals/field-root-context/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FieldRootContext", {
+  enumerable: true,
+  get: function () {
+    return _FieldRootContext.FieldRootContext;
+  }
+});
+Object.defineProperty(exports, "useFieldRootContext", {
+  enumerable: true,
+  get: function () {
+    return _FieldRootContext.useFieldRootContext;
+  }
+});
+var _FieldRootContext = require("./FieldRootContext");

package/internals/filter.d.ts

@@ -0,0 +1,16 @@
+export declare function getFilter(options?: GetFilterParameters): Filter;
+export interface GetFilterParameters extends Intl.CollatorOptions {
+  /**
+   * The locale to use for string comparison.
+   * Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument | undefined;
+}
+export interface Filter {
+  /** Returns whether the item matches the query anywhere. */
+  contains: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /** Returns whether the item starts with the query. */
+  startsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+  /** Returns whether the item ends with the query. */
+  endsWith: <Item>(item: Item, query: string, itemToString?: (item: Item) => string) => boolean;
+}

package/internals/filter.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFilter = getFilter;
+var _resolveValueLabel = require("./resolveValueLabel");
+const filterCache = new Map();
+function getFilter(options = {}) {
+  const mergedOptions = {
+    usage: 'search',
+    sensitivity: 'base',
+    ignorePunctuation: true,
+    ...options
+  };
+  const cacheKey = `${stringifyLocale(options.locale)}|${JSON.stringify(mergedOptions)}`;
+  const cachedFilter = filterCache.get(cacheKey);
+  if (cachedFilter) {
+    return cachedFilter;
+  }
+  const collator = new Intl.Collator(options.locale, mergedOptions);
+  const filter = {
+    contains(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
+      for (let i = 0; i <= itemString.length - query.length; i += 1) {
+        if (collator.compare(itemString.slice(i, i + query.length), query) === 0) {
+          return true;
+        }
+      }
+      return false;
+    },
+    startsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
+      return collator.compare(itemString.slice(0, query.length), query) === 0;
+    },
+    endsWith(item, query, itemToString) {
+      if (!query) {
+        return true;
+      }
+      const itemString = (0, _resolveValueLabel.stringifyAsLabel)(item, itemToString);
+      const queryLength = query.length;
+      return itemString.length >= queryLength && collator.compare(itemString.slice(itemString.length - queryLength), query) === 0;
+    }
+  };
+  filterCache.set(cacheKey, filter);
+  return filter;
+}
+function stringifyLocale(locale) {
+  if (Array.isArray(locale)) {
+    return locale.map(value => stringifyLocale(value)).join(',');
+  }
+  if (locale == null) {
+    return '';
+  }
+  return String(locale);
+}

package/{form → internals/form-context}/FormContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { FieldValidityData } from "../field/root/FieldRoot.js";
-import type { Form } from "./Form.js";
+import type { FieldValidityData } from "../../field/root/FieldRoot.js";
+import type { Form } from "../../form/Form.js";
 export type Errors = Record<string, string | string[]>;
 export interface FormContext {
   errors: Errors;