@base-ui/react 1.0.0-rc.2 → 1.1.0

package/tooltip/viewport/TooltipViewport.js

@@ -13,9 +13,12 @@ var _usePreviousValue = require("@base-ui/utils/usePreviousValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _TooltipRootContext = require("../root/TooltipRootContext");
+var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
 var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _usePopupAutoResize = require("../../utils/usePopupAutoResize");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _TooltipViewportCssVars = require("./TooltipViewportCssVars");
+var _directionProvider = require("../../direction-provider");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   activationDirection: value => value ? {
@@ -39,10 +42,15 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
     ...elementProps
   } = componentProps;
   const store = (0, _TooltipRootContext.useTooltipRootContext)();
+  const positioner = (0, _TooltipPositionerContext.useTooltipPositionerContext)();
+  const direction = (0, _directionProvider.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 = (0, _usePreviousValue.usePreviousValue)(open ? activeTrigger : null);
   const capturedNodeRef = React.useRef(null);
   const [previousContentNode, setPreviousContentNode] = React.useState(null);
@@ -53,27 +61,25 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
   const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    store.set('hasViewport', true);
+    return () => {
+      store.set('hasViewport', false);
+    };
+  }, [store]);
   const handleMeasureLayout = (0, _useStableCallback.useStableCallback)(() => {
     currentContainerRef.current?.style.setProperty('animation', 'none');
     currentContainerRef.current?.style.setProperty('transition', 'none');
     previousContainerRef.current?.style.setProperty('display', 'none');
   });
-  const handleMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(data => {
+  const handleMeasureLayoutComplete = (0, _useStableCallback.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);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // When a trigger changes, set the captured children HTML to state,
@@ -156,6 +162,16 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
     }
     container.replaceChildren(...Array.from(previousContentNode.childNodes));
   }, [previousContentNode]);
+  (0, _usePopupAutoResize.usePopupAutoResize)({
+    popupElement,
+    positionerElement,
+    mounted,
+    content: payload,
+    onMeasureLayout: handleMeasureLayout,
+    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+    side: positioner.side,
+    direction
+  });
   const state = React.useMemo(() => {
     return {
       activationDirection: getActivationDirection(newTriggerOffset),

package/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/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/utils/popups/popupStoreUtils.js

@@ -21,16 +21,24 @@ var _useOpenChangeComplete = require("../useOpenChangeComplete");
 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]);
@@ -49,7 +57,18 @@ function useTriggerDataForwarding(triggerId, triggerElementRef, store, stateUpda
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
   const registerTrigger = (0, _useStableCallback.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/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/utils/resolveValueLabel.js

@@ -1,18 +1,47 @@
 "use strict";
 'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.hasNullItemLabel = hasNullItemLabel;
 exports.isGroupedItems = isGroupedItems;
 exports.resolveMultipleLabels = resolveMultipleLabels;
 exports.resolveSelectedLabel = resolveSelectedLabel;
 exports.stringifyAsLabel = stringifyAsLabel;
 exports.stringifyAsValue = stringifyAsValue;
+var React = _interopRequireWildcard(require("react"));
 var _serializeValue = require("./serializeValue");
+var _jsxRuntime = require("react/jsx-runtime");
 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);
+  }
+  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;
+}
 function stringifyAsLabel(item, itemToStringLabel) {
   if (itemToStringLabel && item != null) {
     return itemToStringLabel(item) ?? '';
@@ -37,6 +66,9 @@ function stringifyAsValue(item, itemToStringValue) {
   return (0, _serializeValue.serializeValue)(item);
 }
 function resolveSelectedLabel(value, items, itemToStringLabel) {
+  function fallback() {
+    return stringifyAsLabel(value, itemToStringLabel);
+  }
   if (itemToStringLabel && value != null) {
     return itemToStringLabel(value);
   }
@@ -48,44 +80,38 @@ 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();
 }
-function resolveMultipleLabels(values, itemToStringLabel) {
-  if (!Array.isArray(values) || values.length === 0) {
-    return '';
-  }
-  return values.map(v => stringifyAsLabel(v, itemToStringLabel)).join(', ');
+function resolveMultipleLabels(values, items, itemToStringLabel) {
+  return values.reduce((acc, value, index) => {
+    if (index > 0) {
+      acc.push(', ');
+    }
+    acc.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+      children: resolveSelectedLabel(value, items, itemToStringLabel)
+    }, index));
+    return acc;
+  }, []);
 }

package/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/utils/styles.js

@@ -8,9 +8,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar';
 const styleDisableScrollbar = exports.styleDisableScrollbar = {
   className: DISABLE_SCROLLBAR_CLASS_NAME,
-  element: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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/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/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/utils/useAnimationsFinished.js

@@ -10,15 +10,16 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _resolveRef = require("./resolveRef");
+var _stateAttributesMapping = require("./stateAttributesMapping");
 /**
  * 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
  */
-function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbortedAsFinished = true) {
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
   return (0, _useStableCallback.useStableCallback)((fnToExecute,
   /**
@@ -28,47 +29,69 @@ function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbort
    */
   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 = (0, _resolveRef.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 = _stateAttributesMapping.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/utils/useOpenChangeComplete.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useOpenChangeComplete = useOpenChangeComplete;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
@@ -20,17 +19,16 @@ function useOpenChangeComplete(parameters) {
     ref,
     onComplete: onCompleteParam
   } = parameters;
-  const openRef = (0, _useValueAsRef.useValueAsRef)(open);
   const onComplete = (0, _useStableCallback.useStableCallback)(onCompleteParam);
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(ref, open);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.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/utils/useOpenInteractionType.js

@@ -9,6 +9,7 @@ exports.useOpenInteractionType = useOpenInteractionType;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *
@@ -18,7 +19,11 @@ function useOpenInteractionType(open) {
   const [openMethod, setOpenMethod] = React.useState(null);
   const handleTriggerClick = (0, _useStableCallback.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.
+      _detectBrowser.isIOS ? 'touch' : ''));
     }
   });
   const reset = React.useCallback(() => {