@base-ui/react 1.2.0 → 1.4.0

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

@@ -12,24 +12,26 @@ var _owner = require("@base-ui/utils/owner");
 
 const counters = {
   inert: new WeakMap(),
-  'aria-hidden': new WeakMap(),
-  none: new WeakMap()
+  'aria-hidden': new WeakMap()
 };
-function getCounterMap(control) {
-  if (control === 'inert') {
-    return counters.inert;
-  }
-  if (control === 'aria-hidden') {
-    return counters['aria-hidden'];
-  }
-  return counters.none;
-}
-let uncontrolledElementsSet = new WeakSet();
-let markerMap = {};
+const markerName = 'data-base-ui-inert';
+const uncontrolledElementsSets = {
+  inert: new WeakSet(),
+  'aria-hidden': new WeakSet()
+};
+let markerCounterMap = new WeakMap();
 let lockCount = 0;
+function getUncontrolledElementsSet(controlAttribute) {
+  return uncontrolledElementsSets[controlAttribute];
+}
 const supportsInert = () => typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
 exports.supportsInert = supportsInert;
-const unwrapHost = node => node && (node.host || unwrapHost(node.parentNode));
+function unwrapHost(node) {
+  if (!node) {
+    return null;
+  }
+  return (0, _dom.isShadowRoot)(node) ? node.host : unwrapHost(node.parentNode);
+}
 const correctElements = (parent, targets) => targets.map(target => {
   if (parent.contains(target)) {
     return target;
@@ -40,91 +42,127 @@ const correctElements = (parent, targets) => targets.map(target => {
   }
   return null;
 }).filter(x => x != null);
-function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert) {
-  const markerName = 'data-base-ui-inert';
-  // eslint-disable-next-line no-nested-ternary
-  const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
-  const avoidElements = correctElements(body, uncorrectedAvoidElements);
-  const elementsToKeep = new Set();
-  const elementsToStop = new Set(avoidElements);
-  const hiddenElements = [];
-  if (!markerMap[markerName]) {
-    markerMap[markerName] = new WeakMap();
-  }
-  const markerCounter = markerMap[markerName];
-  avoidElements.forEach(keep);
-  deep(body);
-  elementsToKeep.clear();
-  function keep(el) {
-    if (!el || elementsToKeep.has(el)) {
-      return;
+const buildKeepSet = targets => {
+  const keep = new Set();
+  targets.forEach(target => {
+    let node = target;
+    while (node && !keep.has(node)) {
+      keep.add(node);
+      node = node.parentNode;
     }
-    elementsToKeep.add(el);
-    if (el.parentNode) {
-      keep(el.parentNode);
-    }
-  }
-  function deep(parent) {
-    if (!parent || elementsToStop.has(parent)) {
+  });
+  return keep;
+};
+const collectOutsideElements = (root, keepElements, stopElements) => {
+  const outside = [];
+  const walk = parent => {
+    if (!parent || stopElements.has(parent)) {
       return;
     }
-    [].forEach.call(parent.children, node => {
+    Array.from(parent.children).forEach(node => {
       if ((0, _dom.getNodeName)(node) === 'script') {
         return;
       }
-      if (elementsToKeep.has(node)) {
-        deep(node);
+      if (keepElements.has(node)) {
+        walk(node);
       } else {
-        const attr = controlAttribute ? node.getAttribute(controlAttribute) : null;
-        const alreadyHidden = attr !== null && attr !== 'false';
-        const counterMap = getCounterMap(controlAttribute);
-        const counterValue = (counterMap.get(node) || 0) + 1;
-        const markerValue = (markerCounter.get(node) || 0) + 1;
-        counterMap.set(node, counterValue);
-        markerCounter.set(node, markerValue);
-        hiddenElements.push(node);
-        if (counterValue === 1 && alreadyHidden) {
-          uncontrolledElementsSet.add(node);
-        }
-        if (markerValue === 1) {
-          node.setAttribute(markerName, '');
-        }
-        if (!alreadyHidden && controlAttribute) {
-          node.setAttribute(controlAttribute, controlAttribute === 'inert' ? '' : 'true');
-        }
+        outside.push(node);
+      }
+    });
+  };
+  walk(root);
+  return outside;
+};
+function applyAttributeToOthers(uncorrectedAvoidElements, body, ariaHidden, inert, {
+  mark = true,
+  markerIgnoreElements = []
+}) {
+  // eslint-disable-next-line no-nested-ternary
+  const controlAttribute = inert ? 'inert' : ariaHidden ? 'aria-hidden' : null;
+  let counterMap = null;
+  let uncontrolledElementsSet = null;
+  const avoidElements = correctElements(body, uncorrectedAvoidElements);
+  const markerIgnoreTargets = mark ? correctElements(body, markerIgnoreElements) : [];
+  const markerIgnoreSet = new Set(markerIgnoreTargets);
+  const markerTargets = mark ? collectOutsideElements(body, buildKeepSet(avoidElements), new Set(avoidElements)).filter(target => !markerIgnoreSet.has(target)) : [];
+  const hiddenElements = [];
+  const markedElements = [];
+  if (controlAttribute) {
+    const map = counters[controlAttribute];
+    const currentUncontrolledElementsSet = getUncontrolledElementsSet(controlAttribute);
+    uncontrolledElementsSet = currentUncontrolledElementsSet;
+    counterMap = map;
+    const ariaLiveElements = correctElements(body, Array.from(body.querySelectorAll('[aria-live]')));
+    const controlElements = avoidElements.concat(ariaLiveElements);
+    const controlTargets = collectOutsideElements(body, buildKeepSet(controlElements), new Set(controlElements));
+    controlTargets.forEach(node => {
+      const attr = node.getAttribute(controlAttribute);
+      const alreadyHidden = attr !== null && attr !== 'false';
+      const counterValue = (map.get(node) || 0) + 1;
+      map.set(node, counterValue);
+      hiddenElements.push(node);
+      if (counterValue === 1 && alreadyHidden) {
+        currentUncontrolledElementsSet.add(node);
+      }
+      if (!alreadyHidden) {
+        node.setAttribute(controlAttribute, controlAttribute === 'inert' ? '' : 'true');
+      }
+    });
+  }
+  if (mark) {
+    markerTargets.forEach(node => {
+      const markerValue = (markerCounterMap.get(node) || 0) + 1;
+      markerCounterMap.set(node, markerValue);
+      markedElements.push(node);
+      if (markerValue === 1) {
+        node.setAttribute(markerName, '');
       }
     });
   }
   lockCount += 1;
   return () => {
-    hiddenElements.forEach(element => {
-      const counterMap = getCounterMap(controlAttribute);
-      const currentCounterValue = counterMap.get(element) || 0;
-      const counterValue = currentCounterValue - 1;
-      const markerValue = (markerCounter.get(element) || 0) - 1;
-      counterMap.set(element, counterValue);
-      markerCounter.set(element, markerValue);
-      if (!counterValue) {
-        if (!uncontrolledElementsSet.has(element) && controlAttribute) {
-          element.removeAttribute(controlAttribute);
+    if (counterMap) {
+      hiddenElements.forEach(element => {
+        const currentCounterValue = counterMap.get(element) || 0;
+        const counterValue = currentCounterValue - 1;
+        counterMap.set(element, counterValue);
+        if (!counterValue) {
+          if (!uncontrolledElementsSet?.has(element) && controlAttribute) {
+            element.removeAttribute(controlAttribute);
+          }
+          uncontrolledElementsSet?.delete(element);
         }
-        uncontrolledElementsSet.delete(element);
-      }
-      if (!markerValue) {
-        element.removeAttribute(markerName);
-      }
-    });
+      });
+    }
+    if (mark) {
+      markedElements.forEach(element => {
+        const markerValue = (markerCounterMap.get(element) || 0) - 1;
+        markerCounterMap.set(element, markerValue);
+        if (!markerValue) {
+          element.removeAttribute(markerName);
+        }
+      });
+    }
     lockCount -= 1;
     if (!lockCount) {
       counters.inert = new WeakMap();
       counters['aria-hidden'] = new WeakMap();
-      counters.none = new WeakMap();
-      uncontrolledElementsSet = new WeakSet();
-      markerMap = {};
+      uncontrolledElementsSets.inert = new WeakSet();
+      uncontrolledElementsSets['aria-hidden'] = new WeakSet();
+      markerCounterMap = new WeakMap();
     }
   };
 }
-function markOthers(avoidElements, ariaHidden = false, inert = false) {
+function markOthers(avoidElements, options = {}) {
+  const {
+    ariaHidden = false,
+    inert = false,
+    mark = true,
+    markerIgnoreElements = []
+  } = options;
   const body = (0, _owner.ownerDocument)(avoidElements[0]).body;
-  return applyAttributeToOthers(avoidElements.concat(Array.from(body.querySelectorAll('[aria-live]'))), body, ariaHidden, inert);
+  return applyAttributeToOthers(avoidElements, body, ariaHidden, inert, {
+    mark,
+    markerIgnoreElements
+  });
 }

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

@@ -9,8 +9,8 @@ exports.getNodeChildren = getNodeChildren;
 /* eslint-disable @typescript-eslint/no-loop-func */
 
 function getNodeChildren(nodes, id, onlyOpenChildren = true) {
-  const directChildren = nodes.filter(node => node.parentId === id && (!onlyOpenChildren || node.context?.open));
-  return directChildren.flatMap(child => [child, ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
+  const directChildren = nodes.filter(node => node.parentId === id);
+  return directChildren.flatMap(child => [...(!onlyOpenChildren || child.context?.open ? [child] : []), ...getNodeChildren(nodes, child.id, onlyOpenChildren)]);
 }
 function getDeepestNode(nodes, id) {
   let deepestNodeId;

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

@@ -0,0 +1,3 @@
+export declare function activeElement(doc: Document): Element | null;
+export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+export declare function getTarget(event: Event): EventTarget | null;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activeElement = activeElement;
+exports.contains = contains;
+exports.getTarget = getTarget;
+var _dom = require("@floating-ui/utils/dom");
+function activeElement(doc) {
+  let element = doc.activeElement;
+  while (element?.shadowRoot?.activeElement != null) {
+    element = element.shadowRoot.activeElement;
+  }
+  return element;
+}
+function contains(parent, child) {
+  if (!parent || !child) {
+    return false;
+  }
+  const rootNode = child.getRootNode?.();
+
+  // First, attempt with the faster native method.
+  if (parent.contains(child)) {
+    return true;
+  }
+
+  // Then fall back to traversing out of shadow roots when needed.
+  if (rootNode && (0, _dom.isShadowRoot)(rootNode)) {
+    let next = child;
+    while (next) {
+      if (parent === next) {
+        return true;
+      }
+      next = next.parentNode || next.host;
+    }
+  }
+  return false;
+}
+function getTarget(event) {
+  if ('composedPath' in event) {
+    return event.composedPath()[0];
+  }
+
+  // TS assumes `composedPath()` always exists, but older browsers without
+  // shadow DOM support still fall back to `target`.
+  return event.target;
+}

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

@@ -1,8 +1,7 @@
-import { type FocusableElement } from 'tabbable';
-export declare const getTabbableOptions: () => {
-  readonly getShadowRoot: true;
-  readonly displayCheck: "none" | "full";
-};
+export type FocusableElement = HTMLElement | SVGElement;
+export declare function isTabbable(element: Element | null): boolean;
+export declare function focusable(container: Element): FocusableElement[];
+export declare function tabbable(container: Element): FocusableElement[];
 export declare function getNextTabbable(referenceElement: Element | null): FocusableElement | null;
 export declare function getPreviousTabbable(referenceElement: Element | null): FocusableElement | null;
 export declare function getTabbableAfterElement(referenceElement: Element | null): FocusableElement | null;

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

@@ -5,26 +5,139 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.disableFocusInside = disableFocusInside;
 exports.enableFocusInside = enableFocusInside;
+exports.focusable = focusable;
 exports.getNextTabbable = getNextTabbable;
 exports.getPreviousTabbable = getPreviousTabbable;
 exports.getTabbableAfterElement = getTabbableAfterElement;
 exports.getTabbableBeforeElement = getTabbableBeforeElement;
-exports.getTabbableOptions = void 0;
 exports.isOutsideEvent = isOutsideEvent;
-var _tabbable = require("tabbable");
+exports.isTabbable = isTabbable;
+exports.tabbable = tabbable;
+var _dom = require("@floating-ui/utils/dom");
 var _owner = require("@base-ui/utils/owner");
 var _element = require("./element");
-const getTabbableOptions = () => ({
-  getShadowRoot: true,
-  displayCheck:
-  // JSDOM does not support the `tabbable` library. To solve this we can
-  // check if `ResizeObserver` is a real function (not polyfilled), which
-  // determines if the current environment is JSDOM-like.
-  typeof ResizeObserver === 'function' && ResizeObserver.toString().includes('[native code]') ? 'full' : 'none'
-});
-exports.getTabbableOptions = getTabbableOptions;
+var _composite = require("./composite");
+const CANDIDATE_SELECTOR = 'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]';
+function getParentElement(element) {
+  const assignedSlot = element.assignedSlot;
+  if (assignedSlot) {
+    return assignedSlot;
+  }
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+  const rootNode = element.getRootNode();
+  return (0, _dom.isShadowRoot)(rootNode) ? rootNode.host : null;
+}
+function getDetailsSummary(details) {
+  for (const child of Array.from(details.children)) {
+    if ((0, _dom.getNodeName)(child) === 'summary') {
+      return child;
+    }
+  }
+  return null;
+}
+function isWithinOpenDetailsSummary(element, details) {
+  const summary = getDetailsSummary(details);
+  return !!summary && (element === summary || (0, _element.contains)(summary, element));
+}
+function isFocusableCandidate(element) {
+  const nodeName = element ? (0, _dom.getNodeName)(element) : '';
+  return element != null && element.matches(CANDIDATE_SELECTOR) && (nodeName !== 'summary' || element.parentElement != null && (0, _dom.getNodeName)(element.parentElement) === 'details' && getDetailsSummary(element.parentElement) === element) && (nodeName !== 'details' || getDetailsSummary(element) == null) && (nodeName !== 'input' || element.type !== 'hidden');
+}
+function isFocusableElement(element) {
+  if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
+    return false;
+  }
+  for (let current = element; current; current = getParentElement(current)) {
+    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)) {
+      return false;
+    }
+  }
+  return true;
+}
+function getTabIndex(element) {
+  const tabIndex = element.tabIndex;
+  if (tabIndex < 0) {
+    const nodeName = (0, _dom.getNodeName)(element);
+    if (nodeName === 'details' || nodeName === 'audio' || nodeName === 'video' || (0, _dom.isHTMLElement)(element) && element.isContentEditable) {
+      return 0;
+    }
+  }
+  return tabIndex;
+}
+function getNamedRadioInput(element) {
+  if ((0, _dom.getNodeName)(element) !== 'input') {
+    return null;
+  }
+  const input = element;
+  return input.type === 'radio' && input.name !== '' ? input : null;
+}
+function isTabbableRadio(element, candidates) {
+  const input = getNamedRadioInput(element);
+  if (!input) {
+    return true;
+  }
+  const checkedRadio = candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form && radio.checked;
+  });
+  if (checkedRadio) {
+    return checkedRadio === input;
+  }
+  return candidates.find(candidate => {
+    const radio = getNamedRadioInput(candidate);
+    return radio?.name === input.name && radio.form === input.form;
+  }) === input;
+}
+function getComposedChildren(container) {
+  if ((0, _dom.isHTMLElement)(container) && (0, _dom.getNodeName)(container) === 'slot') {
+    const assignedElements = container.assignedElements({
+      flatten: true
+    });
+    if (assignedElements.length > 0) {
+      return assignedElements;
+    }
+  }
+  if ((0, _dom.isHTMLElement)(container) && container.shadowRoot) {
+    return Array.from(container.shadowRoot.children);
+  }
+  return Array.from(container.children);
+}
+function appendCandidates(container, list) {
+  getComposedChildren(container).forEach(child => {
+    if (isFocusableCandidate(child)) {
+      list.push(child);
+    }
+    appendCandidates(child, list);
+  });
+}
+function appendMatchingElements(container, selector, list) {
+  getComposedChildren(container).forEach(child => {
+    if ((0, _dom.isHTMLElement)(child) && child.matches(selector)) {
+      list.push(child);
+    }
+    appendMatchingElements(child, selector, list);
+  });
+}
+function isTabbable(element) {
+  return isFocusableElement(element) && getTabIndex(element) >= 0;
+}
+function focusable(container) {
+  const candidates = [];
+  appendCandidates(container, candidates);
+  return candidates.filter(isFocusableElement);
+}
+function tabbable(container) {
+  const candidates = focusable(container);
+  return candidates.filter(element => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates));
+}
 function getTabbableIn(container, dir) {
-  const list = (0, _tabbable.tabbable)(container, getTabbableOptions());
+  const list = tabbable(container);
   const len = list.length;
   if (len === 0) {
     return undefined;
@@ -45,7 +158,7 @@ function getTabbableNearElement(referenceElement, dir) {
   if (!referenceElement) {
     return null;
   }
-  const list = (0, _tabbable.tabbable)((0, _owner.ownerDocument)(referenceElement).body, getTabbableOptions());
+  const list = tabbable((0, _owner.ownerDocument)(referenceElement).body);
   const elementCount = list.length;
   if (elementCount === 0) {
     return null;
@@ -69,14 +182,15 @@ function isOutsideEvent(event, container) {
   return !relatedTarget || !(0, _element.contains)(containerElement, relatedTarget);
 }
 function disableFocusInside(container) {
-  const tabbableElements = (0, _tabbable.tabbable)(container, getTabbableOptions());
+  const tabbableElements = tabbable(container);
   tabbableElements.forEach(element => {
     element.dataset.tabindex = element.getAttribute('tabindex') || '';
     element.setAttribute('tabindex', '-1');
   });
 }
 function enableFocusInside(container) {
-  const elements = container.querySelectorAll('[data-tabindex]');
+  const elements = [];
+  appendMatchingElements(container, '[data-tabindex]', elements);
   elements.forEach(element => {
     const tabindex = element.dataset.tabindex;
     delete element.dataset.tabindex;

package/form/Form.d.ts

@@ -21,7 +21,7 @@ export interface FormActions {
   validate: (fieldName?: string | undefined) => void;
 }
 export interface FormState {}
-export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', Form.State> {
+export interface FormProps<FormValues extends Record<string, any> = Record<string, any>> extends BaseUIComponentProps<'form', FormState> {
   /**
    * Determines when the form should be validated.
    * The `validationMode` prop on `<Field.Root>` takes precedence over this.

package/form/Form.js

@@ -30,6 +30,7 @@ const Form = exports.Form = /*#__PURE__*/React.forwardRef(function Form(componen
     onSubmit,
     onFormSubmit,
     actionsRef,
+    style,
     ...elementProps
   } = componentProps;
   const formRef = React.useRef({

package/global.d.ts

@@ -1,6 +1,6 @@
 declare global {
   /**
-   * When `true`, disables animation-related code, even if supported by the runtime enviroment.
+   * When `true`, disables animation-related code, even if supported by the runtime environment.
    */
   // eslint-disable-next-line vars-on-top
   var BASE_UI_ANIMATIONS_DISABLED: boolean;

package/index.d.ts

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

package/index.js

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

package/input/Input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../utils/types.js";
-import { Field } from "../field/index.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).
  * Renders an `<input>` element.
@@ -8,14 +8,21 @@ import { Field } from "../field/index.js";
  * Documentation: [Base UI Input](https://base-ui.com/react/components/input)
  */
 export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface InputProps extends BaseUIComponentProps<'input', Input.State> {
+export interface InputProps extends BaseUIComponentProps<'input', InputState> {
   /**
    * Callback fired when the `value` changes. Use when controlled.
    */
-  onValueChange?: Field.Control.Props['onValueChange'] | undefined;
+  onValueChange?: ((value: string, eventDetails: Input.ChangeEventDetails) => void) | undefined;
+  /**
+   * The default value of the input. Use when uncontrolled.
+   */
   defaultValue?: Field.Control.Props['defaultValue'] | undefined;
+  /**
+   * The value of the input. Use when controlled.
+   */
+  value?: React.ComponentProps<'input'>['value'] | undefined;
 }
-export interface InputState extends Field.Control.State {}
+export interface InputState extends FieldControlState {}
 export type InputChangeEventReason = Field.Control.ChangeEventReason;
 export type InputChangeEventDetails = Field.Control.ChangeEventDetails;
 export declare namespace Input {

package/labelable-provider/LabelableProvider.d.ts

@@ -3,10 +3,13 @@ import * as React from 'react';
  * @internal
  */
 export declare const LabelableProvider: React.FC<LabelableProvider.Props>;
+export interface LabelableProviderState {}
 export interface LabelableProviderProps {
-  initialControlId?: string | null | undefined;
+  controlId?: string | null | undefined;
+  labelId?: string | undefined;
   children?: React.ReactNode;
 }
 export declare namespace LabelableProvider {
+  type State = LabelableProviderState;
   type Props = LabelableProviderProps;
 }

package/labelable-provider/LabelableProvider.js

@@ -18,8 +18,9 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const LabelableProvider = exports.LabelableProvider = function LabelableProvider(props) {
   const defaultId = (0, _useBaseUiId.useBaseUiId)();
-  const [controlId, setControlIdState] = React.useState(props.initialControlId === undefined ? defaultId : props.initialControlId);
-  const [labelId, setLabelId] = React.useState(undefined);
+  const initialControlId = props.controlId === undefined ? defaultId : props.controlId;
+  const [controlId, setControlIdState] = React.useState(initialControlId);
+  const [labelId, setLabelId] = React.useState(props.labelId);
   const [messageIds, setMessageIds] = React.useState([]);
   const registrationsRef = (0, _useRefWithInit.useRefWithInit)(() => new Map());
   const {

package/labelable-provider/useAriaLabelledBy.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare function useAriaLabelledBy(explicitAriaLabelledBy: string | undefined, labelId: string | undefined, labelSourceRef: React.RefObject<LabelSource | null>, enableFallback?: boolean, labelSourceId?: string): string | undefined;
+type LabelSource = HTMLElement & {
+  labels?: NodeListOf<HTMLLabelElement> | null | undefined;
+};
+export {};