@jobber/components 9.3.0 → 9.5.0

package/dist/useCompositeListItem-cjs.js

@@ -1,12 +1,10 @@
 'use strict';
 
 var React = require('react');
-var useButton = require('./useButton-cjs.js');
-var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
 var useScrollLock = require('./useScrollLock-cjs.js');
+var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var floatingUi_utils = require('./floating-ui.utils-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -34,11 +32,11 @@ function useFloatingRootContext(options) {
     onOpenChange,
     elements = {}
   } = options;
-  const floatingId = useButton.useId();
+  const floatingId = useScrollLock.useId();
   const nested = useScrollLock.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
-    if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
+    if (optionDomReference && !floatingUi_utils.isElement(optionDomReference)) {
       console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `context.setPositionReference()`', 'instead.');
     }
   }
@@ -53,7 +51,7 @@ function useFloatingRootContext(options) {
     syncOnly: false,
     nested
   })).current;
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     const valuesToSync = {
       open,
       floatingId
@@ -62,7 +60,7 @@ function useFloatingRootContext(options) {
     // Only sync elements that are defined to avoid overwriting existing ones
     if (elements.reference !== undefined) {
       valuesToSync.referenceElement = elements.reference;
-      valuesToSync.domReferenceElement = floatingUi_utils_dom.isElement(elements.reference) ? elements.reference : null;
+      valuesToSync.domReferenceElement = floatingUi_utils.isElement(elements.reference) ? elements.reference : null;
     }
     if (elements.floating !== undefined) {
       valuesToSync.floatingElement = elements.floating;
@@ -109,13 +107,13 @@ function useFloating(options = {}) {
       })
     }
   });
-  const localDomReferenceElement = floatingUi_utils_dom.isElement(localDomReference) ? localDomReference : null;
+  const localDomReferenceElement = floatingUi_utils.isElement(localDomReference) ? localDomReference : null;
   const syncedFloatingElement = localFloatingElement === undefined ? store.state.floatingElement : localFloatingElement;
   store.useSyncedValue('referenceElement', localDomReference ?? null);
   store.useSyncedValue('domReferenceElement', localDomReference === undefined ? domReferenceElement : localDomReferenceElement);
   store.useSyncedValue('floatingElement', syncedFloatingElement);
   const setPositionReference = React__namespace.useCallback(node => {
-    const computedPositionReference = floatingUi_utils_dom.isElement(node) ? {
+    const computedPositionReference = floatingUi_utils.isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       getClientRects: () => node.getClientRects(),
       contextElement: node
@@ -126,18 +124,18 @@ function useFloating(options = {}) {
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
   const setReference = React__namespace.useCallback(node => {
-    if (floatingUi_utils_dom.isElement(node) || node === null) {
+    if (floatingUi_utils.isElement(node) || node === null) {
       domReferenceRef.current = node;
       setLocalDomReference(node);
     }
 
     // Backwards-compatibility for passing a virtual element to `reference`
     // after it has set the DOM reference.
-    if (floatingUi_utils_dom.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    if (floatingUi_utils.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
     // Don't allow setting virtual elements using the old technique back to
     // `null` to support `positionReference` + an unstable `reference`
     // callback ref.
-    node !== null && !floatingUi_utils_dom.isElement(node)) {
+    node !== null && !floatingUi_utils.isElement(node)) {
       position.refs.setReference(node);
     }
   }, [position.refs, setLocalDomReference]);
@@ -168,12 +166,12 @@ function useFloating(options = {}) {
     nodeId,
     rootStore: store
   }), [position, refs, elements, nodeId, store, open, floatingId]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (domReferenceElement) {
       domReferenceRef.current = domReferenceElement;
     }
   }, [domReferenceElement]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     store.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
@@ -272,14 +270,14 @@ function useListNavigation(context, props) {
   const dataRef = store.context.dataRef;
   const floatingFocusElement = useScrollLock.getFloatingFocusElement(floatingElement);
   const typeableComboboxReference = useScrollLock.isTypeableCombobox(domReferenceElement);
-  const floatingFocusElementRef = useButton.useValueAsRef(floatingFocusElement);
+  const floatingFocusElementRef = useScrollLock.useValueAsRef(floatingFocusElement);
   const parentId = useScrollLock.useFloatingParentNodeId();
   const tree = useScrollLock.useFloatingTree(externalTree);
   const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
   const indexRef = React__namespace.useRef(selectedIndex ?? -1);
   const keyRef = React__namespace.useRef(null);
   const isPointerModalityRef = React__namespace.useRef(true);
-  const onNavigate = useButton.useStableCallback(event => {
+  const onNavigate = useScrollLock.useStableCallback(event => {
     onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
   });
   const previousMountedRef = React__namespace.useRef(!!floatingElement);
@@ -287,13 +285,13 @@ function useListNavigation(context, props) {
   const forceSyncFocusRef = React__namespace.useRef(false);
   const forceScrollIntoViewRef = React__namespace.useRef(false);
   const cancelQueuedFocusRef = React__namespace.useRef(null);
-  const disabledIndicesRef = useButton.useValueAsRef(disabledIndices);
-  const latestOpenRef = useButton.useValueAsRef(open);
-  const selectedIndexRef = useButton.useValueAsRef(selectedIndex);
-  const resetOnPointerLeaveRef = useButton.useValueAsRef(resetOnPointerLeave);
-  const focusFrame = useButton.useAnimationFrame();
-  const waitForListPopulatedFrame = useButton.useAnimationFrame();
-  const focusItem = useButton.useStableCallback(() => {
+  const disabledIndicesRef = useScrollLock.useValueAsRef(disabledIndices);
+  const latestOpenRef = useScrollLock.useValueAsRef(open);
+  const selectedIndexRef = useScrollLock.useValueAsRef(selectedIndex);
+  const resetOnPointerLeaveRef = useScrollLock.useValueAsRef(resetOnPointerLeave);
+  const focusFrame = useScrollLock.useAnimationFrame();
+  const waitForListPopulatedFrame = useScrollLock.useAnimationFrame();
+  const focusItem = useScrollLock.useStableCallback(() => {
     function runFocus(item) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
@@ -331,13 +329,13 @@ function useListNavigation(context, props) {
       }
     });
   });
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
 
   // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
   // element. Also, reset `activeIndex` upon closing the floating element.
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -360,7 +358,7 @@ function useListNavigation(context, props) {
 
   // Sync `activeIndex` to be the focused item while the floating element is
   // open.
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -417,7 +415,7 @@ function useListNavigation(context, props) {
 
   // Ensure the parent floating element has focus when a nested child closes
   // to allow arrow key navigation to work after the pointer leaves the child.
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!enabled || floatingElement || !tree || virtual || !previousMountedRef.current) {
       return;
     }
@@ -426,26 +424,26 @@ function useListNavigation(context, props) {
     // `floatingElement` is null here (see the guard above), so resolve the owner document from an
     // in-DOM element for realm-safety (shadow DOM/iframes): the reference element, falling back to
     // the parent floating element when the reference is virtual (`domReferenceElement` is null).
-    const activeEl = useButton.activeElement(useButton.ownerDocument(domReferenceElement ?? parent ?? null));
-    const treeContainsActiveEl = nodes.some(node => node.context && useButton.contains(node.context.elements.floating, activeEl));
+    const activeEl = useScrollLock.activeElement(useScrollLock.ownerDocument(domReferenceElement ?? parent ?? null));
+    const treeContainsActiveEl = nodes.some(node => node.context && useScrollLock.contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
       });
     }
   }, [enabled, floatingElement, domReferenceElement, tree, parentId, virtual]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     previousOpenRef.current = open;
     previousMountedRef.current = !!floatingElement;
   });
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!open) {
       keyRef.current = null;
       focusItemOnOpenRef.current = focusItemOnOpen;
     }
   }, [open, focusItemOnOpen]);
   const hasActiveIndex = activeIndex != null;
-  const syncCurrentTarget = useButton.useStableCallback(event => {
+  const syncCurrentTarget = useScrollLock.useStableCallback(event => {
     if (!latestOpenRef.current) {
       return;
     }
@@ -455,13 +453,13 @@ function useListNavigation(context, props) {
       onNavigate(event);
     }
   });
-  const getParentOrientation = useButton.useStableCallback(() => {
+  const getParentOrientation = useScrollLock.useStableCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   });
-  const getMinEnabledIndex = useButton.useStableCallback(() => {
+  const getMinEnabledIndex = useScrollLock.useStableCallback(() => {
     return useScrollLock.getMinListIndex(listRef, disabledIndicesRef.current);
   });
-  const commonOnKeyDown = useButton.useStableCallback(event => {
+  const commonOnKeyDown = useScrollLock.useStableCallback(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
 
@@ -483,10 +481,10 @@ function useListNavigation(context, props) {
       // If the nested list's close key is also the parent navigation key,
       // let the parent navigate. Otherwise, stop propagating the event.
       if (!isMainOrientationKey(event.key, getParentOrientation())) {
-        useButton.stopEvent(event);
+        useScrollLock.stopEvent(event);
       }
-      store.setOpen(false, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent));
-      if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
+      store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.listNavigation, event.nativeEvent));
+      if (floatingUi_utils.isHTMLElement(domReferenceElement)) {
         if (virtual) {
           tree?.events.emit('virtualfocus', domReferenceElement);
         } else {
@@ -500,12 +498,12 @@ function useListNavigation(context, props) {
     const maxIndex = useScrollLock.getMaxListIndex(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
-        useButton.stopEvent(event);
+        useScrollLock.stopEvent(event);
         indexRef.current = minIndex;
         onNavigate(event);
       }
       if (event.key === 'End') {
-        useButton.stopEvent(event);
+        useScrollLock.stopEvent(event);
         indexRef.current = maxIndex;
         onNavigate(event);
       }
@@ -524,10 +522,10 @@ function useListNavigation(context, props) {
       }
     }
     if (isMainOrientationKey(event.key, orientation)) {
-      useButton.stopEvent(event);
+      useScrollLock.stopEvent(event);
 
       // Reset the index if no item is focused.
-      if (open && !virtual && useButton.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
+      if (open && !virtual && useScrollLock.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
         indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(event);
         return;
@@ -620,8 +618,8 @@ function useListNavigation(context, props) {
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = useButton.activeElement(useButton.ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && useButton.contains(floatingFocusEl, activeEl)) {
+          const activeEl = useScrollLock.activeElement(useScrollLock.ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && useScrollLock.contains(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
             });
@@ -646,13 +644,13 @@ function useListNavigation(context, props) {
           // If the event originated from within a nested element (e.g., a Dialog opened from
           // within the menu), don't close the menu. The nested element has its own focus
           // management and should handle the Tab key.
-          const target = useButton.getTarget(event.nativeEvent);
-          if (target && !useButton.contains(floatingFocusElementRef.current, target)) {
+          const target = useScrollLock.getTarget(event.nativeEvent);
+          if (target && !useScrollLock.contains(floatingFocusElementRef.current, target)) {
             return;
           }
-          useButton.stopEvent(event);
-          store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent));
-          if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
+          useScrollLock.stopEvent(event);
+          store.setOpen(false, useScrollLock.createChangeEventDetails(useScrollLock.focusOut, event.nativeEvent));
+          if (floatingUi_utils.isHTMLElement(domReferenceElement)) {
             domReferenceElement.focus();
           }
           return;
@@ -666,17 +664,17 @@ function useListNavigation(context, props) {
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React__namespace.useMemo(() => {
     function openOnNavigationKeyDown(event) {
-      store.setOpen(true, useButton.createChangeEventDetails(useButton.listNavigation, event.nativeEvent, event.currentTarget));
+      store.setOpen(true, useScrollLock.createChangeEventDetails(useScrollLock.listNavigation, event.nativeEvent, event.currentTarget));
     }
     function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && useButton.isVirtualClick(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && useScrollLock.isVirtualClick(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
       }
     }
     function checkVirtualPointer(event) {
       // `pointerdown` fires first, reset the state then perform the checks.
       focusItemOnOpenRef.current = focusItemOnOpen;
-      if (focusItemOnOpen === 'auto' && useButton.isVirtualPointerEvent(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && useScrollLock.isVirtualPointerEvent(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
       }
     }
@@ -704,7 +702,7 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            useButton.stopEvent(event);
+            useScrollLock.stopEvent(event);
             if (currentOpen) {
               indexRef.current = getMinEnabledIndex();
               onNavigate(event);
@@ -718,7 +716,7 @@ function useListNavigation(context, props) {
           if (selectedIndexRef.current != null) {
             indexRef.current = selectedIndexRef.current;
           }
-          useButton.stopEvent(event);
+          useScrollLock.stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
             openOnNavigationKeyDown(event);
           } else {
@@ -775,11 +773,11 @@ function useTypeahead(context, props) {
   } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
-  const timeout = useButton.useTimeout();
+  const timeout = useScrollLock.useTimeout();
   const stringRef = React__namespace.useRef('');
   const prevIndexRef = React__namespace.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React__namespace.useRef(null);
-  const onKeyDown = useButton.useStableCallback(event => {
+  const onKeyDown = useScrollLock.useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
       return !element || useScrollLock.isElementVisible(element);
@@ -813,7 +811,7 @@ function useTypeahead(context, props) {
     const listContent = listRef.current;
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
-      useButton.stopEvent(event);
+      useScrollLock.stopEvent(event);
       onTyping?.(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
@@ -829,7 +827,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      useButton.stopEvent(event);
+      useScrollLock.stopEvent(event);
       onTyping?.(true);
     }
 
@@ -872,11 +870,11 @@ function useTypeahead(context, props) {
       onTyping?.(false);
     }
   });
-  const onBlur = useButton.useStableCallback(event => {
+  const onBlur = useScrollLock.useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinComposite = useButton.contains(currentDomReferenceElement, next) || useButton.contains(currentFloatingElement, next);
+    const withinComposite = useScrollLock.contains(currentDomReferenceElement, next) || useScrollLock.contains(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
     if (withinComposite) {
@@ -889,7 +887,7 @@ function useTypeahead(context, props) {
     prevIndexRef.current = matchIndexRef.current;
     onTyping?.(false);
   });
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!open && selectedIndex !== null) {
       return;
     }
@@ -899,7 +897,7 @@ function useTypeahead(context, props) {
       stringRef.current = '';
     }
   }, [open, selectedIndex, timeout]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
       prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
@@ -915,12 +913,408 @@ function useTypeahead(context, props) {
   } : {}, [enabled, sharedProps]);
 }
 
+const defaultItemEquality = (itemValue, selectedValue) => Object.is(itemValue, selectedValue);
+function compareItemEquality(itemValue, selectedValue, comparer) {
+  if (itemValue == null || selectedValue == null) {
+    return Object.is(itemValue, selectedValue);
+  }
+  return comparer(itemValue, selectedValue);
+}
+function selectedValueIncludes(selectedValues, itemValue, comparer) {
+  if (!selectedValues || selectedValues.length === 0) {
+    return false;
+  }
+  return selectedValues.some(selectedValue => {
+    if (selectedValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function findItemIndex(itemValues, selectedValue, comparer) {
+  if (!itemValues || itemValues.length === 0) {
+    return -1;
+  }
+  return itemValues.findIndex(itemValue => {
+    if (itemValue === undefined) {
+      return false;
+    }
+    return compareItemEquality(itemValue, selectedValue, comparer);
+  });
+}
+function removeItem(selectedValues, itemValue, comparer) {
+  return selectedValues.filter(selectedValue => !compareItemEquality(itemValue, selectedValue, comparer));
+}
+
+function serializeValue(value) {
+  if (value == null) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+
+function isGroupedItems(items) {
+  return items != null && items.length > 0 && typeof items[0] === 'object' && items[0] != null && 'items' in items[0];
+}
+
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && 'null' in items;
+  }
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of arrayItems) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
+function stringifyAsLabel(item, itemToStringLabel) {
+  if (itemToStringLabel && item != null) {
+    return itemToStringLabel(item) ?? '';
+  }
+  if (item && typeof item === 'object') {
+    if ('label' in item && item.label != null) {
+      return String(item.label);
+    }
+    if ('value' in item) {
+      return String(item.value);
+    }
+  }
+  return serializeValue(item);
+}
+function stringifyAsValue(item, itemToStringValue) {
+  if (itemToStringValue && item != null) {
+    return itemToStringValue(item) ?? '';
+  }
+  if (item && typeof item === 'object' && 'value' in item && 'label' in item) {
+    return serializeValue(item.value);
+  }
+  return serializeValue(item);
+}
+function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
+  if (itemToStringLabel && value != null) {
+    return itemToStringLabel(value);
+  }
+
+  // Custom object with explicit label takes precedence
+  if (value && typeof value === 'object' && 'label' in value && value.label != null) {
+    return value.label;
+  }
+
+  // Items provided as plain record map
+  if (items && !Array.isArray(items)) {
+    return items[value] ?? fallback();
+  }
+
+  // Items provided as array (flat or grouped)
+  if (Array.isArray(items)) {
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+      return fallback();
+    }
+
+    // Object without explicit label: try matching by its `value` property
+    if ('value' in value) {
+      const match = flatItems.find(item => item && item.value === value.value);
+      if (match && match.label != null) {
+        return match.label;
+      }
+    }
+  }
+  return fallback();
+}
+function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
+}
+
+let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldControlDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field is in a valid state.
+   */
+  FieldControlDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is in an invalid state.
+   */
+  FieldControlDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the field has been touched.
+   */
+  FieldControlDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the field's value has changed.
+   */
+  FieldControlDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the field is filled.
+   */
+  FieldControlDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the field control is focused.
+   */
+  FieldControlDataAttributes["focused"] = "data-focused";
+  return FieldControlDataAttributes;
+}({});
+
+const DEFAULT_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: null,
+  valueMissing: false
+};
+const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
+const fieldValidityMapping = {
+  valid(value) {
+    if (value === null) {
+      return null;
+    }
+    if (value) {
+      return {
+        [FieldControlDataAttributes.valid]: ''
+      };
+    }
+    return {
+      [FieldControlDataAttributes.invalid]: ''
+    };
+  }
+};
+
+const DEFAULT_FIELD_ROOT_CONTEXT = {
+  invalid: undefined,
+  name: undefined,
+  validityData: {
+    state: DEFAULT_VALIDITY_STATE,
+    errors: [],
+    error: '',
+    value: '',
+    initialValue: null
+  },
+  setValidityData: useRenderElement.NOOP,
+  disabled: undefined,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+  setTouched: useRenderElement.NOOP,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+  setDirty: useRenderElement.NOOP,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+  setFilled: useRenderElement.NOOP,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+  setFocused: useRenderElement.NOOP,
+  validate: () => null,
+  validationMode: 'onSubmit',
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => false,
+  state: DEFAULT_FIELD_ROOT_STATE,
+  markedDirtyRef: {
+    current: false
+  },
+  registerFieldControl: useRenderElement.NOOP,
+  validation: {
+    getValidationProps: (_disabled, props = useRenderElement.EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    registerInput: useRenderElement.NOOP,
+    commit: async () => {},
+    change: useRenderElement.NOOP
+  }
+};
+const FieldRootContext = /*#__PURE__*/React__namespace.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
+if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+  const context = React__namespace.useContext(FieldRootContext);
+  if (context.setValidityData === useRenderElement.NOOP && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : useRenderElement.formatErrorMessage(28));
+  }
+  return context;
+}
+
+function useRegisterFieldControl(controlRef, id, value, getFormValueOverride, enabled = true, name) {
+  const {
+    registerFieldControl
+  } = useFieldRootContext();
+  const sourceRef = React__namespace.useRef(null);
+  if (!sourceRef.current) {
+    sourceRef.current = Symbol();
+  }
+  useScrollLock.useIsoLayoutEffect(() => {
+    const source = sourceRef.current;
+    if (!source || !enabled) {
+      return undefined;
+    }
+    const registration = {
+      controlRef,
+      getValue: getFormValueOverride,
+      id,
+      name,
+      value
+    };
+    registerFieldControl(source, registration);
+    return () => {
+      registerFieldControl(source, undefined);
+    };
+  }, [controlRef, enabled, getFormValueOverride, id, name, registerFieldControl, value]);
+}
+
+const FormContext = /*#__PURE__*/React__namespace.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: useRenderElement.NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+function useFormContext() {
+  return React__namespace.useContext(FormContext);
+}
+
+/**
+ * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
+ * with an accessible name (label) and description.
+ */
+const LabelableContext = /*#__PURE__*/React__namespace.createContext({
+  controlId: undefined,
+  registerControlId: useRenderElement.NOOP,
+  labelId: undefined,
+  setLabelId: useRenderElement.NOOP,
+  messageIds: [],
+  setMessageIds: useRenderElement.NOOP,
+  getDescriptionProps: externalProps => externalProps
+});
+if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+  return React__namespace.useContext(LabelableContext);
+}
+
+function useLabelableId(params = {}) {
+  const {
+    id,
+    implicit = false,
+    controlRef
+  } = params;
+  const {
+    controlId,
+    registerControlId
+  } = useLabelableContext();
+  const defaultId = useScrollLock.useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React__namespace.useRef(false);
+  const hadExplicitIdRef = React__namespace.useRef(id != null);
+  const unregisterControlId = useScrollLock.useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === useRenderElement.NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
+  useScrollLock.useIsoLayoutEffect(() => {
+    if (registerControlId === useRenderElement.NOOP) {
+      return undefined;
+    }
+    let nextId;
+    if (implicit) {
+      const elem = controlRef?.current;
+      if (floatingUi_utils.isElement(elem) && elem.closest('label') != null) {
+        nextId = id ?? null;
+      } else {
+        nextId = controlIdForEffect ?? defaultId;
+      }
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
+    }
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React__namespace.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
+  return controlId ?? defaultId;
+}
+
+function areArraysEqual(array1, array2, itemComparer = (a, b) => a === b) {
+  return array1.length === array2.length && array1.every((value, index) => itemComparer(value, array2[index]));
+}
+
 function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
-  const win = floatingUi_utils_dom.getWindow(element);
+  const win = floatingUi_utils.getWindow(element);
 
   // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)" in jsdom.
-  if (useButton.jsdom) {
+  if (useScrollLock.jsdom) {
     return elementRect;
   }
   const beforeStyles = win.getComputedStyle(element, '::before');
@@ -951,6 +1345,13 @@ function getPseudoElementBounds(element) {
   };
 }
 
+function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}
+
 const CompositeListContext = /*#__PURE__*/React__namespace.createContext({
   register: () => {},
   unregister: () => {},
@@ -981,7 +1382,7 @@ function CompositeList(props) {
     labelsRef,
     onMapChange: onMapChangeProp
   } = props;
-  const onMapChange = useButton.useStableCallback(onMapChangeProp);
+  const onMapChange = useScrollLock.useStableCallback(onMapChangeProp);
   const nextIndexRef = React__namespace.useRef(0);
   const listeners = useRenderElement.useRefWithInit(createListeners).current;
 
@@ -997,12 +1398,12 @@ function CompositeList(props) {
   // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
   const [mapTick, setMapTick] = React__namespace.useState(0);
   const lastTickRef = React__namespace.useRef(mapTick);
-  const register = useButton.useStableCallback((node, metadata) => {
+  const register = useScrollLock.useStableCallback((node, metadata) => {
     map.set(node, metadata ?? null);
     lastTickRef.current += 1;
     setMapTick(lastTickRef.current);
   });
-  const unregister = useButton.useStableCallback(node => {
+  const unregister = useScrollLock.useStableCallback(node => {
     map.delete(node);
     lastTickRef.current += 1;
     setMapTick(lastTickRef.current);
@@ -1021,7 +1422,7 @@ function CompositeList(props) {
     });
     return newMap;
   }, [map, mapTick]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
       return undefined;
     }
@@ -1048,7 +1449,7 @@ function CompositeList(props) {
       mutationObserver.disconnect();
     };
   }, [sortedMap]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     const shouldUpdateLengths = lastTickRef.current === mapTick;
     if (shouldUpdateLengths) {
       if (elementsRef.current.length !== sortedMap.size) {
@@ -1061,25 +1462,25 @@ function CompositeList(props) {
     }
     onMapChange(sortedMap);
   }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     return () => {
       elementsRef.current = [];
     };
   }, [elementsRef]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     return () => {
       if (labelsRef) {
         labelsRef.current = [];
       }
     };
   }, [labelsRef]);
-  const subscribeMapChange = useButton.useStableCallback(fn => {
+  const subscribeMapChange = useScrollLock.useStableCallback(fn => {
     listeners.add(fn);
     return () => {
       listeners.delete(fn);
     };
   });
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     listeners.forEach(l => l(sortedMap));
   }, [listeners, sortedMap]);
   const contextValue = React__namespace.useMemo(() => ({
@@ -1246,7 +1647,7 @@ const adaptiveOrigin = {
       strategy,
       placement
     } = state;
-    const win = floatingUi_utils_dom.getWindow(floating);
+    const win = floatingUi_utils.getWindow(floating);
     const styles = win.getComputedStyle(floating);
     const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
     if (!hasTransition) {
@@ -1269,7 +1670,7 @@ const adaptiveOrigin = {
         height: win.visualViewport.height
       };
     } else if (offsetParent === win) {
-      const doc = useButton.ownerDocument(floating);
+      const doc = useScrollLock.ownerDocument(floating);
       offsetDimensions = {
         width: doc.documentElement.clientWidth,
         height: doc.documentElement.clientHeight
@@ -1367,10 +1768,10 @@ function useAnchorPositioning(params) {
   const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
   const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
   const anchorFn = typeof anchor === 'function' ? anchor : undefined;
-  const anchorFnCallback = useButton.useStableCallback(anchorFn);
+  const anchorFnCallback = useScrollLock.useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = useButton.useValueAsRef(anchor);
-  const mountedRef = useButton.useValueAsRef(mounted);
+  const anchorValueRef = useScrollLock.useValueAsRef(anchor);
+  const mountedRef = useScrollLock.useValueAsRef(mounted);
   const direction = useScrollLock.useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -1418,8 +1819,8 @@ function useAnchorPositioning(params) {
   const arrowRef = React__namespace.useRef(null);
 
   // Keep these reactive if they're not functions
-  const sideOffsetRef = useButton.useValueAsRef(sideOffset);
-  const alignOffsetRef = useButton.useValueAsRef(alignOffset);
+  const sideOffsetRef = useScrollLock.useValueAsRef(sideOffset);
+  const alignOffsetRef = useScrollLock.useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
   const middleware = [];
@@ -1453,7 +1854,7 @@ function useAnchorPositioning(params) {
     fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
   });
   const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
-    const html = useButton.ownerDocument(data.elements.floating).documentElement;
+    const html = useScrollLock.ownerDocument(data.elements.floating).documentElement;
     return {
       ...commonCollisionProps,
       // Use the Layout Viewport to avoid shifting around when pinch-zooming
@@ -1508,7 +1909,7 @@ function useAnchorPositioning(params) {
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = floatingUi_utils_dom.getWindow(floating).devicePixelRatio || 1;
+      const dpr = floatingUi_utils.getWindow(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -1523,7 +1924,7 @@ function useAnchorPositioning(params) {
   }), arrow(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || useButton.ownerDocument(state.elements.floating).createElement('div'),
+    element: arrowRef.current || useScrollLock.ownerDocument(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -1560,7 +1961,7 @@ function useAnchorPositioning(params) {
       return {};
     }
   }, hide, adaptiveOrigin);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     // Ensure positioning doesn't run initially for `keepMounted` elements that
     // aren't initially open.
     if (!mounted && floatingRootContext) {
@@ -1620,7 +2021,7 @@ function useAnchorPositioning(params) {
     return base;
   }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React__namespace.useRef(null);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!mounted) {
       return;
     }
@@ -1663,7 +2064,7 @@ function useAnchorPositioning(params) {
   // Locks the flip (makes it "sticky") so it doesn't prefer a given placement
   // and flips back lazily, not eagerly. Ideal for filtered lists that change
   // the size of the popup dynamically to avoid unwanted flipping when typing.
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);
     }
@@ -1740,12 +2141,12 @@ const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
  */
 function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
   const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React__namespace.useState(false);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (!enabled || !touchOpen || positionerElement == null) {
       setTouchOpenShouldLockScroll(false);
       return;
     }
-    const viewportWidth = useButton.ownerDocument(positionerElement).documentElement.clientWidth;
+    const viewportWidth = useScrollLock.ownerDocument(positionerElement).documentElement.clientWidth;
     const popupWidth = positionerElement.offsetWidth;
     setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
   }, [enabled, touchOpen, positionerElement]);
@@ -1797,7 +2198,7 @@ function useCompositeListItem(params = {}) {
       }
     }
   }, [index, elementsRef, labelsRef, label, textRef]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (externalIndex != null) {
       return undefined;
     }
@@ -1810,7 +2211,7 @@ function useCompositeListItem(params = {}) {
     }
     return undefined;
   }, [externalIndex, register, unregister, metadata]);
-  useButton.useIsoLayoutEffect(() => {
+  useScrollLock.useIsoLayoutEffect(() => {
     if (externalIndex != null) {
       return undefined;
     }
@@ -1828,14 +2229,39 @@ function useCompositeListItem(params = {}) {
 }
 
 exports.CompositeList = CompositeList;
+exports.DEFAULT_FIELD_ROOT_CONTEXT = DEFAULT_FIELD_ROOT_CONTEXT;
+exports.DEFAULT_FIELD_STATE_ATTRIBUTES = DEFAULT_FIELD_STATE_ATTRIBUTES;
+exports.DEFAULT_VALIDITY_STATE = DEFAULT_VALIDITY_STATE;
+exports.FieldRootContext = FieldRootContext;
 exports.IndexGuessBehavior = IndexGuessBehavior;
+exports.LabelableContext = LabelableContext;
 exports.adaptiveOrigin = adaptiveOrigin;
+exports.areArraysEqual = areArraysEqual;
+exports.compareItemEquality = compareItemEquality;
+exports.defaultItemEquality = defaultItemEquality;
+exports.fieldValidityMapping = fieldValidityMapping;
+exports.findItemIndex = findItemIndex;
+exports.getDefaultLabelId = getDefaultLabelId;
 exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 exports.getPseudoElementBounds = getPseudoElementBounds;
+exports.hasNullItemLabel = hasNullItemLabel;
+exports.isGroupedItems = isGroupedItems;
+exports.removeItem = removeItem;
+exports.resolveAriaLabelledBy = resolveAriaLabelledBy;
+exports.resolveMultipleLabels = resolveMultipleLabels;
+exports.resolveSelectedLabel = resolveSelectedLabel;
+exports.selectedValueIncludes = selectedValueIncludes;
+exports.stringifyAsLabel = stringifyAsLabel;
+exports.stringifyAsValue = stringifyAsValue;
 exports.useAnchorPositioning = useAnchorPositioning;
 exports.useAnchoredPopupScrollLock = useAnchoredPopupScrollLock;
 exports.useCompositeListItem = useCompositeListItem;
+exports.useFieldRootContext = useFieldRootContext;
 exports.useFloatingRootContext = useFloatingRootContext;
+exports.useFormContext = useFormContext;
+exports.useLabelableContext = useLabelableContext;
+exports.useLabelableId = useLabelableId;
 exports.useListNavigation = useListNavigation;
 exports.usePositioner = usePositioner;
+exports.useRegisterFieldControl = useRegisterFieldControl;
 exports.useTypeahead = useTypeahead;