@base-ui/react 1.6.0 → 1.7.0

package/combobox/positioner/ComboboxPositioner.js

@@ -13,7 +13,8 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _inertValue = require("@base-ui/utils/inertValue");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _ComboboxPositionerContext = require("./ComboboxPositionerContext");
-var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
+var _parts = require("../utils/parts");
+var _useAnchorPositioning = require("../../internals/useAnchorPositioning");
 var _ComboboxPortalContext = require("../portal/ComboboxPortalContext");
 var _constants = require("../../internals/constants");
 var _store2 = require("../store");
@@ -32,24 +33,23 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     render,
     className,
     anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
+    collisionPadding,
+    arrowPadding,
+    sticky,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.DROPDOWN_COLLISION_AVOIDANCE,
     style: styleProp,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
-  const {
-    filteredItems
-  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const floatingRootContext = (0, _ComboboxRootContext.useComboboxFloatingContext)();
   const keepMounted = (0, _ComboboxPortalContext.useComboboxPortalContext)();
   const modal = (0, _store.useStore)(store, _store2.selectors.modal);
@@ -62,7 +62,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
+  const empty = (0, _parts.useListEmpty)();
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor: resolvedAnchor,

package/combobox/positioner/ComboboxPositioner.mjs

@@ -5,9 +5,10 @@ import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { inertValue } from '@base-ui/utils/inertValue';
-import { useComboboxFloatingContext, useComboboxRootContext, useComboboxDerivedItemsContext } from "../root/ComboboxRootContext.mjs";
+import { useComboboxFloatingContext, useComboboxRootContext } from "../root/ComboboxRootContext.mjs";
 import { ComboboxPositionerContext } from "./ComboboxPositionerContext.mjs";
-import { useAnchorPositioning } from "../../utils/useAnchorPositioning.mjs";
+import { useListEmpty } from "../utils/parts.mjs";
+import { useAnchorPositioning } from "../../internals/useAnchorPositioning.mjs";
 import { useComboboxPortalContext } from "../portal/ComboboxPortalContext.mjs";
 import { DROPDOWN_COLLISION_AVOIDANCE } from "../../internals/constants.mjs";
 import { selectors } from "../store.mjs";
@@ -27,24 +28,23 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
     render,
     className,
     anchor,
-    positionMethod = 'absolute',
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
-    collisionPadding = 5,
-    arrowPadding = 5,
-    sticky = false,
+    collisionPadding,
+    arrowPadding,
+    sticky,
     disableAnchorTracking = false,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
     style: styleProp,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const {
-    filteredItems
-  } = useComboboxDerivedItemsContext();
   const floatingRootContext = useComboboxFloatingContext();
   const keepMounted = useComboboxPortalContext();
   const modal = useStore(store, selectors.modal);
@@ -57,7 +57,7 @@ export const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function Combobo
   const inputGroupElement = useStore(store, selectors.inputGroupElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
   const transitionStatus = useStore(store, selectors.transitionStatus);
-  const empty = filteredItems.length === 0;
+  const empty = useListEmpty();
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = useAnchorPositioning({
     anchor: resolvedAnchor,

package/combobox/positioner/ComboboxPositionerContext.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.mjs";
+import type { UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.mjs";
 export type ComboboxPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'anchorHidden' | 'isPositioned'>;
 export declare const ComboboxPositionerContext: React.Context<ComboboxPositionerContext | undefined>;
 export declare function useComboboxPositionerContext(optional?: false): ComboboxPositionerContext;

package/combobox/positioner/ComboboxPositionerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+import type { UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.js";
 export type ComboboxPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'anchorHidden' | 'isPositioned'>;
 export declare const ComboboxPositionerContext: React.Context<ComboboxPositionerContext | undefined>;
 export declare function useComboboxPositionerContext(optional?: false): ComboboxPositionerContext;

package/combobox/root/AriaCombobox.d.mts

@@ -2,12 +2,6 @@ import * as React from 'react';
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
 import { Group } from "../../internals/resolveValueLabel.mjs";
-/**
- * @internal
- */
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
-  items: readonly Group<any>[];
-}): React.JSX.Element;
 export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
   items?: readonly any[] | undefined;
 }): React.JSX.Element;
@@ -184,6 +178,8 @@ interface ComboboxRootProps<ItemValue> {
    * Determines if the popup enters a modal state when open.
    * - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
    * @default false
    */
   modal?: boolean | undefined;
@@ -228,9 +224,8 @@ export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = Comb
    * - `single`: Remembers the last selected value.
    * - `multiple`: Remember all selected values.
    * - `none`: Do not remember the selected value.
-   * @default 'none'
    */
-  selectionMode?: Mode | undefined;
+  selectionMode: Mode;
   /**
    * The selected value of the combobox. Use when controlled.
    */
@@ -252,11 +247,11 @@ export declare namespace AriaCombobox {
   interface Actions {
     unmount: () => void;
   }
-  type HighlightEventReason = 'keyboard' | 'pointer' | 'none';
+  type HighlightEventReason = typeof REASONS.keyboard | typeof REASONS.pointer | typeof REASONS.none;
   type HighlightEventDetails = BaseUIGenericEventDetails<HighlightEventReason, {
     index: number;
   }>;
-  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
+  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.inputPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.cancelOpen | typeof REASONS.none;
   type ChangeEventDetails = BaseUIChangeEventDetails<ChangeEventReason>;
 }
 export {};

package/combobox/root/AriaCombobox.d.ts

@@ -2,12 +2,6 @@ import * as React from 'react';
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { Group } from "../../internals/resolveValueLabel.js";
-/**
- * @internal
- */
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
-  items: readonly Group<any>[];
-}): React.JSX.Element;
 export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
   items?: readonly any[] | undefined;
 }): React.JSX.Element;
@@ -184,6 +178,8 @@ interface ComboboxRootProps<ItemValue> {
    * Determines if the popup enters a modal state when open.
    * - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
    * @default false
    */
   modal?: boolean | undefined;
@@ -228,9 +224,8 @@ export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = Comb
    * - `single`: Remembers the last selected value.
    * - `multiple`: Remember all selected values.
    * - `none`: Do not remember the selected value.
-   * @default 'none'
    */
-  selectionMode?: Mode | undefined;
+  selectionMode: Mode;
   /**
    * The selected value of the combobox. Use when controlled.
    */
@@ -252,11 +247,11 @@ export declare namespace AriaCombobox {
   interface Actions {
     unmount: () => void;
   }
-  type HighlightEventReason = 'keyboard' | 'pointer' | 'none';
+  type HighlightEventReason = typeof REASONS.keyboard | typeof REASONS.pointer | typeof REASONS.none;
   type HighlightEventDetails = BaseUIGenericEventDetails<HighlightEventReason, {
     index: number;
   }>;
-  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
+  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.inputPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.cancelOpen | typeof REASONS.none;
   type ChangeEventDetails = BaseUIChangeEventDetails<ChangeEventReason>;
 }
 export {};