@base-ui/react 1.0.0 → 1.1.0

package/esm/tooltip/viewport/TooltipViewport.js

@@ -7,9 +7,12 @@ import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
+import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
 import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { TooltipViewportCssVars } from "./TooltipViewportCssVars.js";
+import { useDirection } from "../../direction-provider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const stateAttributesMapping = {
   activationDirection: value => value ? {
@@ -33,10 +36,15 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
+  const positioner = useTooltipPositionerContext();
+  const direction = useDirection();
   const activeTrigger = store.useState('activeTriggerElement');
   const open = store.useState('open');
-  const floatingContext = store.useState('floatingRootContext');
   const instantType = store.useState('instantType');
+  const mounted = store.useState('mounted');
+  const payload = store.useState('payload');
+  const popupElement = store.useState('popupElement');
+  const positionerElement = store.useState('positionerElement');
   const previousActiveTrigger = usePreviousValue(open ? activeTrigger : null);
   const capturedNodeRef = React.useRef(null);
   const [previousContentNode, setPreviousContentNode] = React.useState(null);
@@ -47,27 +55,25 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
   const cleanupFrame = useAnimationFrame();
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  useIsoLayoutEffect(() => {
+    store.set('hasViewport', true);
+    return () => {
+      store.set('hasViewport', false);
+    };
+  }, [store]);
   const handleMeasureLayout = useStableCallback(() => {
     currentContainerRef.current?.style.setProperty('animation', 'none');
     currentContainerRef.current?.style.setProperty('transition', 'none');
     previousContainerRef.current?.style.setProperty('display', 'none');
   });
-  const handleMeasureLayoutComplete = useStableCallback(data => {
+  const handleMeasureLayoutComplete = useStableCallback(previousDimensions => {
     currentContainerRef.current?.style.removeProperty('animation');
     currentContainerRef.current?.style.removeProperty('transition');
     previousContainerRef.current?.style.removeProperty('display');
-    if (!previousContentDimensions) {
-      setPreviousContentDimensions(data.previousDimensions);
+    if (previousDimensions) {
+      setPreviousContentDimensions(previousDimensions);
     }
   });
-  React.useEffect(() => {
-    floatingContext.context.events.on('measure-layout', handleMeasureLayout);
-    floatingContext.context.events.on('measure-layout-complete', handleMeasureLayoutComplete);
-    return () => {
-      floatingContext.context.events.off('measure-layout', handleMeasureLayout);
-      floatingContext.context.events.off('measure-layout-complete', handleMeasureLayoutComplete);
-    };
-  }, [floatingContext, handleMeasureLayout, handleMeasureLayoutComplete]);
   const lastHandledTriggerRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     // When a trigger changes, set the captured children HTML to state,
@@ -150,6 +156,16 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
     }
     container.replaceChildren(...Array.from(previousContentNode.childNodes));
   }, [previousContentNode]);
+  usePopupAutoResize({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: payload,
+    onMeasureLayout: handleMeasureLayout,
+    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+    side: positioner.side,
+    direction
+  });
   const state = React.useMemo(() => {
     return {
       activationDirection: getActivationDirection(newTriggerOffset),

package/esm/use-render/index.d.ts

@@ -1 +1,2 @@
-export * from "./useRender.js";
+export * from "./useRender.js";
+export type { HTMLProps, ComponentRenderFn } from "../utils/types.js";

package/esm/use-render/index.js

@@ -1 +1,2 @@
-export * from "./useRender.js";
+export * from "./useRender.js";
+export {};

package/esm/utils/FloatingPortalLite.d.ts

@@ -5,7 +5,7 @@ import { type FloatingPortal } from "../floating-ui-react/index.js";
  * For components that don't need tabbable logic, use `FloatingPortalLite`.
  * @internal
  */
-export declare const FloatingPortalLite: React.ForwardRefExoticComponent<FloatingPortalLite.Props<any> & React.RefAttributes<HTMLDivElement>>;
+export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
 export declare namespace FloatingPortalLite {
   type Props<State> = FloatingPortalLiteProps<State>;

package/esm/utils/popups/popupStoreUtils.js

@@ -11,16 +11,24 @@ import { useOpenChangeComplete } from "../useOpenChangeComplete.js";
 export function useTriggerRegistration(id, store) {
   // Keep track of the currently registered element to unregister it on unmount or id change.
   const registeredElementIdRef = React.useRef(null);
+  const registeredElementRef = React.useRef(null);
   return React.useCallback(element => {
     if (id === undefined) {
       return;
     }
     if (registeredElementIdRef.current !== null) {
-      store.context.triggerElements.delete(registeredElementIdRef.current);
+      const registeredId = registeredElementIdRef.current;
+      const registeredElement = registeredElementRef.current;
+      const currentElement = store.context.triggerElements.getById(registeredId);
+      if (registeredElement && currentElement === registeredElement) {
+        store.context.triggerElements.delete(registeredId);
+      }
       registeredElementIdRef.current = null;
+      registeredElementRef.current = null;
     }
     if (element !== null) {
       registeredElementIdRef.current = id;
+      registeredElementRef.current = element;
       store.context.triggerElements.add(id, element);
     }
   }, [store, id]);
@@ -39,7 +47,18 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
   const registerTrigger = useStableCallback(element => {
     baseRegisterTrigger(element);
-    if (element !== null && store.select('open') && store.select('activeTriggerId') == null) {
+    if (!element || !store.select('open')) {
+      return;
+    }
+    const activeTriggerId = store.select('activeTriggerId');
+    if (activeTriggerId === triggerId) {
+      store.update({
+        activeTriggerElement: element,
+        ...stateUpdates
+      });
+      return;
+    }
+    if (activeTriggerId == null) {
       // This runs when popup is open, but no active trigger is set.
       // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
       // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).

package/esm/utils/resolveValueLabel.d.ts

@@ -10,8 +10,12 @@ export interface Group<Item = any> {
   items: Item[];
 }
 export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is Group<any>[];
+/**
+ * Checks if the items array contains an item with a null value that has a non-null label.
+ */
+export declare function hasNullItemLabel(items: ItemsInput): boolean;
 export declare function stringifyAsLabel(item: any, itemToStringLabel?: (item: any) => string): string;
 export declare function stringifyAsValue(item: any, itemToStringValue?: (item: any) => string): string;
 export declare function resolveSelectedLabel(value: any, items: ItemsInput, itemToStringLabel?: (item: any) => string): React.ReactNode;
-export declare function resolveMultipleLabels(values: any[] | undefined, itemToStringLabel?: (item: any) => string): string;
+export declare function resolveMultipleLabels(values: any[], items: ItemsInput, itemToStringLabel?: (item: any) => string): React.ReactNode;
 export {};

package/esm/utils/resolveValueLabel.js

@@ -1,9 +1,36 @@
 'use client';
 
+import * as React from 'react';
 import { serializeValue } from "./serializeValue.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 export 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.
+ */
+export function hasNullItemLabel(items) {
+  if (!Array.isArray(items)) {
+    return items != null && !('null' in items);
+  }
+  if (isGroupedItems(items)) {
+    for (const group of items) {
+      for (const item of group.items) {
+        if (item && item.value == null && item.label != null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  for (const item of items) {
+    if (item && item.value == null && item.label != null) {
+      return true;
+    }
+  }
+  return false;
+}
 export function stringifyAsLabel(item, itemToStringLabel) {
   if (itemToStringLabel && item != null) {
     return itemToStringLabel(item) ?? '';
@@ -28,6 +55,9 @@ export function stringifyAsValue(item, itemToStringValue) {
   return serializeValue(item);
 }
 export function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
   if (itemToStringLabel && value != null) {
     return itemToStringLabel(value);
   }
@@ -39,44 +69,38 @@ export function resolveSelectedLabel(value, items, itemToStringLabel) {
 
   // Items provided as plain record map
   if (items && !Array.isArray(items)) {
-    return items[value] ?? stringifyAsLabel(value, itemToStringLabel);
+    return items[value] ?? fallback();
   }
 
   // Items provided as array (flat or grouped)
   if (Array.isArray(items)) {
     const flatItems = isGroupedItems(items) ? items.flatMap(g => g.items) : items;
-
-    // If no value selected, prefer the null option label when available
-    if (value == null) {
-      const nullItem = flatItems.find(it => it.value == null);
-      if (nullItem && nullItem.label != null) {
-        return nullItem.label;
-      }
-      return stringifyAsLabel(value, itemToStringLabel);
-    }
-
-    // Primitive selected value: map to first matching item's label
-    if (typeof value !== 'object') {
-      const match = flatItems.find(it => it && it.value === value);
+    if (value == null || typeof value !== 'object') {
+      const match = flatItems.find(item => item.value === value);
       if (match && match.label != null) {
         return match.label;
       }
-      return stringifyAsLabel(value, itemToStringLabel);
+      return fallback();
     }
 
     // Object without explicit label: try matching by its `value` property
     if ('value' in value) {
-      const match = flatItems.find(it => it && it.value === value.value);
+      const match = flatItems.find(item => item && item.value === value.value);
       if (match && match.label != null) {
         return match.label;
       }
     }
   }
-  return stringifyAsLabel(value, itemToStringLabel);
+  return fallback();
 }
-export function resolveMultipleLabels(values, itemToStringLabel) {
-  if (!Array.isArray(values) || values.length === 0) {
-    return '';
-  }
-  return values.map(v => stringifyAsLabel(v, itemToStringLabel)).join(', ');
+export function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/_jsx(React.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
 }

package/esm/utils/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const styleDisableScrollbar: {
   className: string;
-  element: import("react/jsx-runtime").JSX.Element;
+  getElement(nonce?: string): import("react/jsx-runtime").JSX.Element;
 };

package/esm/utils/styles.js

@@ -2,9 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar';
 export const styleDisableScrollbar = {
   className: DISABLE_SCROLLBAR_CLASS_NAME,
-  element: /*#__PURE__*/_jsx("style", {
-    href: DISABLE_SCROLLBAR_CLASS_NAME,
-    precedence: "base-ui:low",
-    children: `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
-  })
-};
+  getElement(nonce) {
+    return /*#__PURE__*/_jsx("style", {
+      nonce: nonce,
+      href: DISABLE_SCROLLBAR_CLASS_NAME,
+      precedence: "base-ui:low",
+      children: `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
+    });
+  }
+};
+if (process.env.NODE_ENV !== "production") styleDisableScrollbar.getElement.displayName = "styleDisableScrollbar.getElement";

package/esm/utils/types.d.ts

@@ -29,7 +29,7 @@ export type ComponentRenderFn<Props, State> = (props: Props, state: State) => Re
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
  */
-export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithoutRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
   /**
    * CSS class applied to the element, or a function that
    * returns a class based on the component’s state.

package/esm/utils/useAnimationsFinished.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForNextTick?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/esm/utils/useAnimationsFinished.js

@@ -4,16 +4,17 @@ import * as ReactDOM from 'react-dom';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { resolveRef } from "./resolveRef.js";
+import { TransitionStatusDataAttributes } from "./stateAttributesMapping.js";
 
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbortedAsFinished = true) {
+export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
   const frame = useAnimationFrame();
   return useStableCallback((fnToExecute,
   /**
@@ -23,47 +24,69 @@ export function useAnimationsFinished(elementOrRef, waitForNextTick = false, tre
    */
   signal = null) => {
     frame.cancel();
+    function done() {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    }
     const element = resolveRef(elementOrRef);
     if (element == null) {
       return;
     }
-    if (typeof element.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+    const resolvedElement = element;
+    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
     } else {
-      frame.request(() => {
-        function exec() {
-          if (!element) {
+      function execWaitForStartingStyleRemoved() {
+        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+
+        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+        // to give "open" animations a chance to be registered.
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          frame.request(exec);
+          return;
+        }
+
+        // Wait for `[data-starting-style]` to have been removed.
+        const attributeObserver = new MutationObserver(() => {
+          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+            attributeObserver.disconnect();
+            exec();
+          }
+        });
+        attributeObserver.observe(resolvedElement, {
+          attributes: true,
+          attributeFilter: [startingStyleAttribute]
+        });
+        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+          once: true
+        });
+      }
+      function exec() {
+        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
+          if (signal?.aborted) {
             return;
           }
-          Promise.all(element.getAnimations().map(anim => anim.finished)).then(() => {
-            if (signal != null && signal.aborted) {
+          done();
+        }).catch(() => {
+          const currentAnimations = resolvedElement.getAnimations();
+          if (treatAbortedAsFinished) {
+            if (signal?.aborted) {
               return;
             }
-
-            // Synchronously flush the unmounting of the component so that the browser doesn't
-            // paint: https://github.com/mui/base-ui/issues/979
-            ReactDOM.flushSync(fnToExecute);
-          }).catch(() => {
-            if (treatAbortedAsFinished) {
-              if (signal != null && signal.aborted) {
-                return;
-              }
-              ReactDOM.flushSync(fnToExecute);
-            } else if (element.getAnimations().length > 0 && element.getAnimations().some(anim => anim.pending || anim.playState !== 'finished')) {
-              // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-              // In such cases, we need to re-check if any new animations have started.
-              exec();
-            }
-          });
-        }
-
-        // `open: true` animations need to wait for the next tick to be detected
-        if (waitForNextTick) {
-          frame.request(exec);
-        } else {
-          exec();
-        }
-      });
+            done();
+          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
+            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+            // In such cases, we need to re-check if any new animations have started.
+            exec();
+          }
+        });
+      }
+      if (waitForStartingStyleRemoved) {
+        execWaitForStartingStyleRemoved();
+        return;
+      }
+      frame.request(exec);
     }
   });
 }

package/esm/utils/useOpenChangeComplete.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 
 /**
@@ -15,17 +14,16 @@ export function useOpenChangeComplete(parameters) {
     ref,
     onComplete: onCompleteParam
   } = parameters;
-  const openRef = useValueAsRef(open);
   const onComplete = useStableCallback(onCompleteParam);
-  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false);
   React.useEffect(() => {
     if (!enabled) {
-      return;
+      return undefined;
     }
-    runOnceAnimationsFinish(() => {
-      if (open === openRef.current) {
-        onComplete();
-      }
-    });
-  }, [enabled, open, onComplete, runOnceAnimationsFinish, openRef]);
+    const abortController = new AbortController();
+    runOnceAnimationsFinish(onComplete, abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [enabled, open, onComplete, runOnceAnimationsFinish]);
 }

package/esm/utils/useOpenInteractionType.js

@@ -3,6 +3,7 @@
 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';
 
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
@@ -13,7 +14,11 @@ export function useOpenInteractionType(open) {
   const [openMethod, setOpenMethod] = React.useState(null);
   const handleTriggerClick = useStableCallback((_, interactionType) => {
     if (!open) {
-      setOpenMethod(interactionType);
+      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`
+      // will be "" in that case.
+      isIOS ? 'touch' : ''));
     }
   });
   const reset = React.useCallback(() => {