@base-ui/react 1.4.0 → 1.5.0

package/esm/utils/popups/store.js

@@ -1,6 +1,7 @@
 import { createSelector } from '@base-ui/utils/store';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
-import { EMPTY_OBJECT } from "../constants.js";
 
 /**
  * State common to all popup stores.
@@ -13,6 +14,8 @@ export function createInitialPopupStoreState() {
     mounted: false,
     transitionStatus: undefined,
     floatingRootContext: getEmptyRootContext(),
+    floatingId: undefined,
+    triggerCount: 0,
     preventUnmountingOnClose: false,
     payload: undefined,
     activeTriggerId: null,
@@ -25,16 +28,45 @@ export function createInitialPopupStoreState() {
     popupProps: EMPTY_OBJECT
   };
 }
+export function createPopupFloatingRootContext(triggerElements, floatingId, nested = false) {
+  return new FloatingRootStore({
+    open: false,
+    transitionStatus: undefined,
+    floatingElement: null,
+    referenceElement: null,
+    triggerElements,
+    floatingId,
+    syncOnly: true,
+    nested,
+    onOpenChange: undefined
+  });
+}
 const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
+const openSelector = createSelector(state => state.openProp ?? state.open);
+const popupIdSelector = createSelector(state => {
+  const popupId = state.popupElement?.id ?? state.floatingId;
+  return popupId || undefined;
+});
+function triggerOwnsOpenPopup(state, triggerId) {
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
+}
+function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
+  if (triggerOwnsOpenPopup(state, triggerId)) {
+    return true;
+  }
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) == null && state.triggerCount === 1;
+}
 export const popupStoreSelectors = {
-  open: createSelector(state => state.openProp ?? state.open),
+  open: openSelector,
   mounted: createSelector(state => state.mounted),
   transitionStatus: createSelector(state => state.transitionStatus),
   floatingRootContext: createSelector(state => state.floatingRootContext),
+  triggerCount: createSelector(state => state.triggerCount),
   preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
   payload: createSelector(state => state.payload),
   activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -42,12 +74,16 @@ export const popupStoreSelectors = {
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
+  isOpenedByTrigger: createSelector((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
   isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: createSelector((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
   popupProps: createSelector(state => state.popupProps),
   popupElement: createSelector(state => state.popupElement),
   positionerElement: createSelector(state => state.positionerElement)

package/esm/utils/popups/useTriggerFocusGuards.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails } from "../createBaseUIEventDetails.js";
-import { REASONS } from "../reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Minimal store interface required by the focus guard hook.
  * Both PopoverStore and MenuStore satisfy this interface.

package/esm/utils/popups/useTriggerFocusGuards.js

@@ -2,10 +2,9 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
-import { createChangeEventDetails } from "../createBaseUIEventDetails.js";
-import { REASONS } from "../reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * Minimal store interface required by the focus guard hook.
@@ -21,14 +20,14 @@ import { REASONS } from "../reasons.js";
  */
 export function useTriggerFocusGuards(store, triggerElementRef) {
   const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
+  function handlePreFocusGuardFocus(event) {
     ReactDOM.flushSync(() => {
       store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
     });
     const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
+  }
+  function handleFocusTargetFocus(event) {
     const positionerElement = store.select('positionerElement');
     if (positionerElement && isOutsideEvent(event, positionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
@@ -46,7 +45,7 @@ export function useTriggerFocusGuards(store, triggerElementRef) {
       }
       nextTabbable?.focus();
     }
-  });
+  }
   return {
     preFocusGuardRef,
     handlePreFocusGuardFocus,

package/esm/utils/scrollEdges.js

@@ -1,4 +1,4 @@
-import { clamp } from "./clamp.js";
+import { clamp } from "../internals/clamp.js";
 export const SCROLL_EDGE_TOLERANCE_PX = 1;
 export function getMaxScrollOffset(scrollSize, clientSize) {
   return Math.max(0, scrollSize - clientSize);

package/esm/utils/useAnchorPositioning.d.ts

@@ -220,6 +220,11 @@ export interface UseAnchorPositioningParameters extends UseAnchorPositioningShar
   shiftCrossAxis?: boolean | undefined;
   lazyFlip?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Optional middleware that can replace the measured reference rect before offsets and collision
+   * middleware run. Used by Preview Card to position against a specific inline line box.
+   */
+  inline?: Middleware | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;

package/esm/utils/useAnchorPositioning.js

@@ -7,7 +7,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { autoUpdate, flip, limitShift, offset, shift, useFloating, size } from "../floating-ui-react/index.js";
-import { useDirection } from "../direction-provider/DirectionContext.js";
+import { useDirection } from "../internals/direction-context/DirectionContext.js";
 import { arrow } from "../floating-ui-react/middleware/arrow.js";
 import { hide } from "./hideMiddleware.js";
 import { DEFAULT_SIDES } from "./adaptiveOriginMiddleware.js";
@@ -59,6 +59,7 @@ export function useAnchorPositioning(params) {
     sticky = false,
     arrowPadding = 5,
     disableAnchorTracking = false,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -133,7 +134,11 @@ export function useAnchorPositioning(params) {
   const alignOffsetRef = useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [offset(state => {
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  middleware.push(offset(state => {
     const data = getOffsetData(state, sideParam, isRtl);
     const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
     const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
@@ -142,7 +147,7 @@ export function useAnchorPositioning(params) {
       crossAxis: alignAxis,
       alignmentAxis: alignAxis
     };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
+  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam]));
   const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
   const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
   const flipMiddleware = collisionAvoidanceSide === 'none' ? null : flip({
@@ -227,10 +232,10 @@ export function useAnchorPositioning(params) {
       floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
       floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
-  }), arrow(() => ({
+  }), 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 || ownerDocument(arrowRef.current).createElement('div'),
+    element: arrowRef.current || ownerDocument(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -367,11 +372,9 @@ export function useAnchorPositioning(params) {
   const renderedAlign = getAlignment(renderedPlacement) || 'center';
   const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
 
-  /**
-   * 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.
-   */
+  // 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.
   useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);

package/esm/utils/useIsHydrating.js

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { NOOP } from "./noop.js";
+import { NOOP } from "../internals/noop.js";
 function subscribe() {
   return NOOP;
 }

package/esm/utils/useMixedToggleClickHandler.js

@@ -2,8 +2,7 @@
 
 import * as React from 'react';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { EMPTY_OBJECT } from "./constants.js";
-
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 /**
  * Returns `click` and `mousedown` handlers that fix the behavior of triggers of popups that are toggled by different events.
  * For example, a button that opens a popup on mousedown and closes it on click.

package/esm/utils/useOpenInteractionType.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+export declare function useOpenMethodTriggerProps(open: boolean | (() => boolean), setOpenMethod: (interactionType: InteractionType | null) => void): {
+  onClick: (event: React.MouseEvent | React.PointerEvent) => void;
+  onPointerDown: (event: React.PointerEvent) => void;
+};
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *

package/esm/utils/useOpenInteractionType.js

@@ -4,17 +4,11 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useEnhancedClickHandler } from '@base-ui/utils/useEnhancedClickHandler';
 import { isIOS } from '@base-ui/utils/detectBrowser';
-import { useValueChanged } from "./useValueChanged.js";
-
-/**
- * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
- *
- * @param open The open state of the component.
- */
-export function useOpenInteractionType(open) {
-  const [openMethod, setOpenMethod] = React.useState(null);
+import { useValueChanged } from "../internals/useValueChanged.js";
+export function useOpenMethodTriggerProps(open, setOpenMethod) {
   const handleTriggerClick = useStableCallback((_, interactionType) => {
-    if (!open) {
+    const isOpen = typeof open === 'function' ? open() : open;
+    if (!isOpen) {
       setOpenMethod(interactionType || (
       // On iOS Safari, the hitslop around touch targets means tapping outside an element's
       // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
@@ -22,20 +16,31 @@ export function useOpenInteractionType(open) {
       isIOS ? 'touch' : ''));
     }
   });
+  const {
+    onClick,
+    onPointerDown
+  } = useEnhancedClickHandler(handleTriggerClick);
+  return React.useMemo(() => ({
+    onClick,
+    onPointerDown
+  }), [onClick, onPointerDown]);
+}
+
+/**
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
+ *
+ * @param open The open state of the component.
+ */
+export function useOpenInteractionType(open) {
+  const [openMethod, setOpenMethod] = React.useState(null);
+  const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod);
   useValueChanged(open, previousOpen => {
     if (previousOpen && !open) {
       setOpenMethod(null);
     }
   });
-  const {
-    onClick,
-    onPointerDown
-  } = useEnhancedClickHandler(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    triggerProps: {
-      onClick,
-      onPointerDown
-    }
-  }), [openMethod, onClick, onPointerDown]);
+    triggerProps
+  }), [openMethod, triggerProps]);
 }

package/esm/utils/usePopupAutoResize.js

@@ -4,10 +4,9 @@ import * as React from 'react';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { NOOP } from '@base-ui/utils/empty';
-import { useAnimationsFinished } from "./useAnimationsFinished.js";
+import { NOOP, EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { useAnimationsFinished } from "../internals/useAnimationsFinished.js";
 import { getCssDimensions } from "./getCssDimensions.js";
-import { EMPTY_OBJECT } from "./constants.js";
 const DEFAULT_ENABLED = () => true;
 
 /**

package/esm/utils/usePopupViewport.js

@@ -8,7 +8,7 @@ import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { useAnimationsFinished } from "./useAnimationsFinished.js";
+import { useAnimationsFinished } from "../internals/useAnimationsFinished.js";
 import { usePopupAutoResize } from "./usePopupAutoResize.js";
 import { useDirection } from "../direction-provider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/utils/usePositioner.d.ts

@@ -1,5 +1,5 @@
-import { type UseRenderElementComponentProps } from "./useRenderElement.js";
-import type { TransitionStatus } from "./useTransitionStatus.js";
+import { type UseRenderElementComponentProps } from "../internals/useRenderElement.js";
+import type { TransitionStatus } from "../internals/useTransitionStatus.js";
 interface UsePositionerOptions {
   styles: React.CSSProperties;
   transitionStatus: TransitionStatus;

package/esm/utils/usePositioner.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { popupStateMapping } from "./popupStateMapping.js";
-import { useRenderElement } from "./useRenderElement.js";
+import { useRenderElement } from "../internals/useRenderElement.js";
 import { getDisabledMountTransitionStyles } from "./getDisabledMountTransitionStyles.js";
 /**
  * Renders the shared outer Positioner element used by popup components.

package/esm/utils/useRegisteredLabelId.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "./useBaseUiId.js";
+import { useBaseUiId } from "../internals/useBaseUiId.js";
 export function useRegisteredLabelId(idProp, setLabelId) {
   const id = useBaseUiId(idProp);
   useIsoLayoutEffect(() => {

package/esm/utils/useSwipeDismiss.js

@@ -5,7 +5,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { contains, getTarget } from "../floating-ui-react/utils.js";
 import { findScrollableTouchTarget, hasScrollableAncestor } from "./scrollable.js";
-import { clamp } from "./clamp.js";
+import { clamp } from "../internals/clamp.js";
 import { getElementAtPoint } from "./getElementAtPoint.js";
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;

package/field/control/FieldControl.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import { BaseUIComponentProps } from "../../utils/types.js";
-import { REASONS } from "../../utils/reasons.js";
-import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
+import { REASONS } from "../../internals/reasons.js";
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 /**
  * The form control to label and validate.
  * Renders an `<input>` element.

package/field/control/FieldControl.js

@@ -11,14 +11,14 @@ var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _FieldRootContext = require("../root/FieldRootContext");
-var _useRegisterFieldControl = require("../root/useRegisterFieldControl");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
-var _constants = require("../utils/constants");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
+var _constants = require("../../internals/field-constants/constants");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _utils = require("../../floating-ui-react/utils");
 /**
  * The form control to label and validate.
@@ -90,12 +90,8 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, {
-    id,
-    value,
-    getValue: getFieldValue
-  });
+  const getValueFromInput = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, id, value, getValueFromInput);
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
     ref: [forwardedRef, inputRef],
     state,

package/field/control/FieldControlDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldControlDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/field/control/FieldControlDataAttributes.js

@@ -10,11 +10,11 @@ let FieldControlDataAttributes = exports.FieldControlDataAttributes = /*#__PURE_
    */
   FieldControlDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldControlDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldControlDataAttributes["invalid"] = "data-invalid";
   /**

package/field/description/FieldDescription.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A paragraph with additional information about the field.
  * Renders a `<p>` element.

package/field/description/FieldDescription.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.FieldDescription = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _FieldRootContext = require("../root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _constants = require("../utils/constants");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _constants = require("../../internals/field-constants/constants");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A paragraph with additional information about the field.
  * Renders a `<p>` element.

package/field/description/FieldDescriptionDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldDescriptionDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/field/description/FieldDescriptionDataAttributes.js

@@ -10,11 +10,11 @@ let FieldDescriptionDataAttributes = exports.FieldDescriptionDataAttributes = /*
    */
   FieldDescriptionDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldDescriptionDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldDescriptionDataAttributes["invalid"] = "data-invalid";
   /**

package/field/error/FieldError.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * An error message displayed if the field control fails validation.
  * Renders a `<div>` element.

package/field/error/FieldError.js

@@ -8,15 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.FieldError = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _FieldRootContext = require("../root/FieldRootContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _constants = require("../utils/constants");
-var _FormContext = require("../../form/FormContext");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useBaseUiId = require("../../utils/useBaseUiId");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _constants = require("../../internals/field-constants/constants");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useBaseUiId = require("../../internals/useBaseUiId");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._constants.fieldValidityMapping,

package/field/error/FieldErrorDataAttributes.d.ts

@@ -4,11 +4,11 @@ export declare enum FieldErrorDataAttributes {
    */
   disabled = "data-disabled",
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   valid = "data-valid",
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   invalid = "data-invalid",
   /**

package/field/error/FieldErrorDataAttributes.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldErrorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let FieldErrorDataAttributes = exports.FieldErrorDataAttributes = function (FieldErrorDataAttributes) {
   /**
    * Present when the field is disabled.
    */
   FieldErrorDataAttributes["disabled"] = "data-disabled";
   /**
-   * Present when the field is in valid state.
+   * Present when the field is in a valid state.
    */
   FieldErrorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the field is in invalid state.
+   * Present when the field is in an invalid state.
    */
   FieldErrorDataAttributes["invalid"] = "data-invalid";
   /**

package/field/item/FieldItem.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type FieldRootState } from "../root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups individual items in a checkbox group or radio group with a label and description.
  * Renders a `<div>` element.

package/field/item/FieldItem.js

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldItem = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _FieldRootContext = require("../root/FieldRootContext");
-var _constants = require("../utils/constants");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _constants = require("../../internals/field-constants/constants");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _FieldItemContext = require("./FieldItemContext");
-var _labelableProvider = require("../../labelable-provider");
+var _labelableProvider = require("../../internals/labelable-provider");
 var _CheckboxGroupContext = require("../../checkbox-group/CheckboxGroupContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -34,11 +34,8 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
   } = (0, _FieldRootContext.useFieldRootContext)(false);
   const disabled = rootDisabled || disabledProp;
   const checkboxGroupContext = (0, _CheckboxGroupContext.useCheckboxGroupContext)();
-  // checkboxGroupContext.parent is truthy even if no parent checkbox is involved
-  const parentId = checkboxGroupContext?.parent.id;
-  // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const controlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);