@base-ui/react 1.1.0 → 1.2.0

package/tooltip/trigger/TooltipTrigger.d.ts

@@ -21,21 +21,28 @@ export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentP
   /**
    * A handle to associate the trigger with a tooltip.
    */
-  handle?: TooltipHandle<Payload>;
+  handle?: TooltipHandle<Payload> | undefined;
   /**
    * A payload to pass to the tooltip when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * How long to wait before opening the tooltip. Specified in milliseconds.
    * @default 600
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing the tooltip. Specified in milliseconds.
    * @default 0
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
+  /**
+   * If `true`, the tooltip will not open when interacting with this trigger.
+   * Note that this doesn't apply the `disabled` attribute to the trigger element.
+   * If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop.
+   * @default false
+   */
+  disabled?: boolean | undefined;
 }
 export declare namespace TooltipTrigger {
   type State = TooltipTriggerState;

package/tooltip/trigger/TooltipTrigger.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TooltipTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+var _fastHooks = require("@base-ui/utils/fastHooks");
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _useRenderElement = require("../../utils/useRenderElement");
@@ -16,6 +17,7 @@ var _popups = require("../../utils/popups");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _TooltipProviderContext = require("../provider/TooltipProviderContext");
 var _floatingUiReact = require("../../floating-ui-react");
+var _TooltipTriggerDataAttributes = require("./TooltipTriggerDataAttributes");
 var _constants = require("../utils/constants");
 /**
  * An element to attach the tooltip to.
@@ -23,7 +25,7 @@ var _constants = require("../utils/constants");
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-const TooltipTrigger = exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(function TooltipTrigger(componentProps, forwardedRef) {
+const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)(function TooltipTrigger(componentProps, forwardedRef) {
   const {
     className,
     render,
@@ -38,7 +40,7 @@ const TooltipTrigger = exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(fu
   const rootContext = (0, _TooltipRootContext.useTooltipRootContext)(true);
   const store = handle?.store ?? rootContext;
   if (!store) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Tooltip.Trigger> must be either used within a <Tooltip.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(82));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Tooltip.Trigger> must be either used within a <Tooltip.Root> component or provided with a handle.' : (0, _formatErrorMessage2.default)(82));
   }
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
@@ -98,15 +100,19 @@ const TooltipTrigger = exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(fu
     triggerElementRef,
     isActiveTrigger: isTriggerActive
   });
-  const state = React.useMemo(() => ({
+  const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
+    enabled: !disabled
+  }).reference;
+  const state = {
     open: isOpenedByThisTrigger
-  }), [isOpenedByThisTrigger]);
+  };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, rootTriggerProps, {
-      id: thisTriggerId
+    props: [hoverProps, focusProps, rootTriggerProps, {
+      id: thisTriggerId,
+      [_TooltipTriggerDataAttributes.TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
     }, elementProps],
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping
   });

package/tooltip/trigger/TooltipTriggerDataAttributes.d.ts

@@ -3,4 +3,8 @@ export declare enum TooltipTriggerDataAttributes {
    * Present when the corresponding tooltip is open.
    */
   popupOpen = "data-popup-open",
+  /**
+   * Present when the trigger is disabled, either by the `disabled` prop or by a parent `<Tooltip.Root>` component.
+   */
+  triggerDisabled = "data-trigger-disabled",
 }

package/tooltip/trigger/TooltipTriggerDataAttributes.js

@@ -10,5 +10,9 @@ let TooltipTriggerDataAttributes = exports.TooltipTriggerDataAttributes = functi
    * Present when the corresponding tooltip is open.
    */
   TooltipTriggerDataAttributes[TooltipTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is disabled, either by the `disabled` prop or by a parent `<Tooltip.Root>` component.
+   */
+  TooltipTriggerDataAttributes["triggerDisabled"] = "data-trigger-disabled";
   return TooltipTriggerDataAttributes;
 }({});

package/tooltip/viewport/TooltipViewport.d.ts

@@ -17,6 +17,14 @@ export declare namespace TooltipViewport {
     children?: React.ReactNode;
   }
   interface State {
-    activationDirection?: string;
+    activationDirection: string | undefined;
+    /**
+     * Whether the viewport is currently transitioning between contents.
+     */
+    transitioning: boolean;
+    /**
+     * Present if animations should be instant.
+     */
+    instant: 'delay' | 'dismiss' | 'focus' | undefined;
   }
 }

package/tooltip/viewport/TooltipViewport.js

@@ -7,19 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _inertValue = require("@base-ui/utils/inertValue");
-var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
-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");
+var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
   activationDirection: value => value ? {
     'data-activation-direction': value
@@ -43,142 +35,21 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
   } = 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 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);
-  const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
-  const currentContainerRef = React.useRef(null);
-  const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
-  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)(previousDimensions => {
-    currentContainerRef.current?.style.removeProperty('animation');
-    currentContainerRef.current?.style.removeProperty('transition');
-    previousContainerRef.current?.style.removeProperty('display');
-    if (previousDimensions) {
-      setPreviousContentDimensions(previousDimensions);
-    }
-  });
-  const lastHandledTriggerRef = React.useRef(null);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // When a trigger changes, set the captured children HTML to state,
-    // so we can render both new and old content.
-    if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
-      setPreviousContentNode(capturedNodeRef.current);
-      setShowStartingStyleAttribute(true);
-
-      // Calculate the relative position between the previous and new trigger,
-      // so we can pass it to the style hook for animation purposes.
-      const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
-      setNewTriggerOffset(offset);
-      cleanupFrame.request(() => {
-        cleanupFrame.request(() => {
-          setShowStartingStyleAttribute(false);
-          onAnimationsFinished(() => {
-            setPreviousContentNode(null);
-            setPreviousContentDimensions(null);
-            capturedNodeRef.current = null;
-          });
-        });
-      });
-      lastHandledTriggerRef.current = activeTrigger;
-    }
-  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
-
-  // Capture a clone of the current content DOM subtree when not transitioning.
-  // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // When a transition is in progress, we store the next content in capturedNodeRef.
-    // This handles the case where the trigger changes multiple times before the transition finishes.
-    // We want to always capture the latest content for the previous snapshot.
-    // So clicking quickly on T1, T2, T3 will result in the following sequence:
-    // 1. T1 -> T2: previousContent = T1, currentContent = T2
-    // 2. T2 -> T3: previousContent = T2, currentContent = T3
-    const source = currentContainerRef.current;
-    if (!source) {
-      return;
-    }
-    const wrapper = document.createElement('div');
-    for (const child of Array.from(source.childNodes)) {
-      wrapper.appendChild(child.cloneNode(true));
-    }
-    capturedNodeRef.current = wrapper;
-  });
-  const isTransitioning = previousContentNode != null;
-  let childrenToRender;
-  if (!isTransitioning) {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-current": true,
-      ref: currentContainerRef,
-      children: children
-    }, 'current');
-  } else {
-    childrenToRender = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-previous": true,
-        inert: (0, _inertValue.inertValue)(true),
-        ref: previousContainerRef,
-        style: {
-          [_TooltipViewportCssVars.TooltipViewportCssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [_TooltipViewportCssVars.TooltipViewportCssVars.popupHeight]: `${previousContentDimensions?.height}px`,
-          position: 'absolute'
-        },
-        "data-ending-style": showStartingStyleAttribute ? undefined : ''
-      }, 'previous'), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        "data-current": true,
-        ref: currentContainerRef,
-        "data-starting-style": showStartingStyleAttribute ? '' : undefined,
-        children: children
-      }, 'current')]
-    });
-  }
-
-  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const container = previousContainerRef.current;
-    if (!container || !previousContentNode) {
-      return;
-    }
-    container.replaceChildren(...Array.from(previousContentNode.childNodes));
-  }, [previousContentNode]);
-  (0, _usePopupAutoResize.usePopupAutoResize)({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
     side: positioner.side,
-    direction
+    cssVars: _TooltipViewportCssVars.TooltipViewportCssVars,
+    children
   });
-  const state = React.useMemo(() => {
-    return {
-      activationDirection: getActivationDirection(newTriggerOffset),
-      transitioning: isTransitioning,
-      instant: instantType
-    };
-  }, [newTriggerOffset, isTransitioning, instantType]);
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
@@ -188,56 +59,4 @@ const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(
     stateAttributesMapping
   });
 });
-if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";
-/**
- * Returns a string describing the provided offset.
- * It describes both the horizontal and vertical offset, separated by a space.
- *
- * @param offset
- */
-function getActivationDirection(offset) {
-  if (!offset) {
-    return undefined;
-  }
-  return `${getValueWithTolerance(offset.horizontal, 5, 'right', 'left')} ${getValueWithTolerance(offset.vertical, 5, 'down', 'up')}`;
-}
-
-/**
- * Returns a label describing the value (positive/negative) trating values
- * within tolarance as zero.
- *
- * @param value Value to check
- * @param tolerance Tolerance to treat the value as zero.
- * @param positiveLabel
- * @param negativeLabel
- * @returns If 0 < abs(value) < tolerance, returns an empty string. Otherwise returns positiveLabel or negativeLabel.
- */
-function getValueWithTolerance(value, tolerance, positiveLabel, negativeLabel) {
-  if (value > tolerance) {
-    return positiveLabel;
-  }
-  if (value < -tolerance) {
-    return negativeLabel;
-  }
-  return '';
-}
-
-/**
- * Calculates the relative position between centers of two elements.
- */
-function calculateRelativePosition(from, to) {
-  const fromRect = from.getBoundingClientRect();
-  const toRect = to.getBoundingClientRect();
-  const fromCenter = {
-    x: fromRect.left + fromRect.width / 2,
-    y: fromRect.top + fromRect.height / 2
-  };
-  const toCenter = {
-    x: toRect.left + toRect.width / 2,
-    y: toRect.top + toRect.height / 2
-  };
-  return {
-    horizontal: toCenter.x - fromCenter.x,
-    vertical: toCenter.y - fromCenter.y
-  };
-}
+if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";

package/unstable-use-media-query/index.d.ts

@@ -5,12 +5,12 @@ export interface UseMediaQueryOptions {
    * it returns a default matches during the first mount.
    * @default false
    */
-  defaultMatches?: boolean;
+  defaultMatches?: boolean | undefined;
   /**
    * You can provide your own implementation of matchMedia.
    * This can be used for handling an iframe content window.
    */
-  matchMedia?: typeof window.matchMedia;
+  matchMedia?: typeof window.matchMedia | undefined;
   /**
    * To perform the server-side hydration, the hook needs to render twice.
    * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
@@ -18,13 +18,13 @@ export interface UseMediaQueryOptions {
    * You can set this option to `true` if you use the returned value **only** client-side.
    * @default false
    */
-  noSsr?: boolean;
+  noSsr?: boolean | undefined;
   /**
    * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
    */
-  ssrMatchMedia?: (query: string) => {
+  ssrMatchMedia?: ((query: string) => {
     matches: boolean;
-  };
+  }) | undefined;
 }
 export declare namespace useMediaQuery {
   type Options = UseMediaQueryOptions;

package/use-button/useButton.d.ts

@@ -5,18 +5,18 @@ export interface UseButtonParameters {
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the button may receive focus even if it is disabled.
    * @default false
    */
-  focusableWhenDisabled?: boolean;
-  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']>;
+  focusableWhenDisabled?: boolean | undefined;
+  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']> | undefined;
   /**
    * Whether the component is being rendered as a native button.
    * @default true
    */
-  native?: boolean;
+  native?: boolean | undefined;
 }
 export interface UseButtonReturnValue {
   /**

package/use-button/useButton.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _mergeProps = require("../merge-props");
 var _CompositeRootContext = require("../composite/root/CompositeRootContext");
@@ -45,10 +46,14 @@ function useButton(parameters = {}) {
       const isButtonTag = elementRef.current.tagName === 'BUTTON';
       if (isNativeButton) {
         if (!isButtonTag) {
-          (0, _error.error)('A component that acts as a button was not rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is a real <button>, or set the `nativeButton` prop on the component to `false`.');
+          const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
+          (0, _error.error)(`${message}${ownerStackMessage}`);
         }
       } else if (isButtonTag) {
-        (0, _error.error)('A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.');
+        const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
+        (0, _error.error)(`${message}${ownerStackMessage}`);
       }
     }, [isNativeButton]);
   }

package/use-render/useRender.d.ts

@@ -8,7 +8,7 @@ import { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
  * @public
  */
 export declare function useRender<State extends Record<string, unknown>, RenderedElementType extends Element, Enabled extends boolean | undefined = undefined>(params: useRender.Parameters<State, RenderedElementType, Enabled>): useRender.ReturnValue<Enabled>;
-export type UseRenderRenderProp<State = Record<string, unknown>> = ComponentRenderFn<React.HTMLAttributes<any>, State> | React.ReactElement;
+export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactElement | ComponentRenderFn<React.HTMLAttributes<any>, State>;
 export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
 export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
   /**
@@ -17,46 +17,46 @@ export type UseRenderComponentProps<ElementType extends React.ElementType, State
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement;
+  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
 };
 export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
   /**
    * The React element or a function that returns one to override the default element.
    */
-  render?: UseRenderRenderProp<State>;
+  render?: UseRenderRenderProp<State> | undefined;
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[];
+  ref?: (React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[]) | undefined;
   /**
    * The state of the component, passed as the second argument to the `render` callback.
    * State properties are automatically converted to data-* attributes.
    */
-  state?: State;
+  state?: State | undefined;
   /**
    * Custom mapping for converting state properties to data-* attributes.
    * @example
    * { isActive: (value) => (value ? { 'data-is-active': '' } : null) }
    */
-  stateAttributesMapping?: StateAttributesMapping<State>;
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
   /**
    * Props to be spread on the rendered element.
    * They are merged with the internal props of the component, so that event handlers
    * are merged, `className` strings and `style` properties are joined, while other external props overwrite the
    * internal ones.
    */
-  props?: Record<string, unknown>;
+  props?: Record<string, unknown> | undefined;
   /**
    * If `false`, the hook will skip most of its internal logic and return `null`.
    * This is useful for rendering a component conditionally.
    * @default true
    */
-  enabled?: Enabled;
+  enabled?: Enabled | undefined;
   /**
    * The default tag name to use for the rendered element when `render` is not provided.
    * @default 'div'
    */
-  defaultTagName?: keyof React.JSX.IntrinsicElements;
+  defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
 export declare namespace useRender {

package/utils/InternalBackdrop.d.ts

@@ -8,7 +8,7 @@ export interface InternalBackdropProps extends React.HTMLAttributes<HTMLDivEleme
    * The element to cut out of the backdrop.
    * This is useful for allowing certain elements to be interactive while the backdrop is present.
    */
-  cutout?: Element | null;
+  cutout?: (Element | null) | undefined;
 }
 export declare namespace InternalBackdrop {
   type Props = InternalBackdropProps;

package/utils/createBaseUIEventDetails.d.ts

@@ -17,12 +17,15 @@ interface ReasonToEventMap {
   [REASONS.inputClear]: InputEvent | FocusEvent | Event;
   [REASONS.inputBlur]: FocusEvent;
   [REASONS.inputPaste]: ClipboardEvent;
+  [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
   [REASONS.focusOut]: FocusEvent | KeyboardEvent;
   [REASONS.escapeKey]: KeyboardEvent;
+  [REASONS.closeWatcher]: Event;
   [REASONS.listNavigation]: KeyboardEvent;
   [REASONS.keyboard]: KeyboardEvent;
   [REASONS.pointer]: PointerEvent;
   [REASONS.drag]: PointerEvent | TouchEvent;
+  [REASONS.swipe]: PointerEvent | TouchEvent;
   [REASONS.wheel]: WheelEvent;
   [REASONS.scrub]: PointerEvent;
   [REASONS.cancelOpen]: MouseEvent;

package/utils/formatNumber.d.ts

@@ -1,4 +1,5 @@
 export declare const cache: Map<string, Intl.NumberFormat>;
 export declare function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
 export declare function formatNumber(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
-export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberMaxPrecision(value: number | null, locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions): string;
+export declare function formatNumberValue(value: number | null, locale?: Intl.LocalesArgument, format?: Intl.NumberFormatOptions): string;

package/utils/formatNumber.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.cache = void 0;
 exports.formatNumber = formatNumber;
 exports.formatNumberMaxPrecision = formatNumberMaxPrecision;
+exports.formatNumberValue = formatNumberValue;
 exports.getFormatter = getFormatter;
 const cache = exports.cache = new Map();
 function getFormatter(locale, options) {
@@ -32,4 +33,15 @@ function formatNumberMaxPrecision(value, locale, options) {
     ...options,
     maximumFractionDigits: 20
   });
+}
+function formatNumberValue(value, locale, format) {
+  if (value == null) {
+    return '';
+  }
+  if (!format) {
+    return formatNumber(value / 100, locale, {
+      style: 'percent'
+    });
+  }
+  return formatNumber(value, locale, format);
 }

package/utils/getDisabledMountTransitionStyles.d.ts

@@ -1,4 +1,4 @@
 import type { TransitionStatus } from "./useTransitionStatus.js";
 export declare function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
-  style?: React.CSSProperties;
+  style?: React.CSSProperties | undefined;
 };

package/utils/getPseudoElementBounds.js

@@ -8,7 +8,7 @@ function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
   // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV === 'test') {
+  if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
   const beforeStyles = window.getComputedStyle(element, '::before');

package/utils/itemEquality.d.ts

@@ -1,6 +1,6 @@
-export type ItemEqualityComparer<Item = any, Value = Item> = (item: Item, value: Value) => boolean;
+export type ItemEqualityComparer<Item = any, Value = Item> = (itemValue: Item, selectedValue: Value) => boolean;
 export declare const defaultItemEquality: ItemEqualityComparer;
-export declare function compareItemEquality<Item, Value>(item: Item, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function itemIncludes<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
-export declare function findItemIndex<Item, Value>(collection: readonly Item[] | undefined | null, value: Value, comparer: ItemEqualityComparer<Item, Value>): number;
-export declare function removeItem<Item, Value>(collection: readonly Item[], value: Value, comparer: ItemEqualityComparer<Item, Value>): Item[];
+export declare function compareItemEquality<Item, Value>(itemValue: Item, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): boolean;
+export declare function selectedValueIncludes<Item, Value>(selectedValues: readonly Item[] | undefined | null, itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): boolean;
+export declare function findItemIndex<Item, Value>(itemValues: readonly Item[] | undefined | null, selectedValue: Value, comparer: ItemEqualityComparer<Item, Value>): number;
+export declare function removeItem<Item, Value>(selectedValues: readonly Item[], itemValue: Value, comparer: ItemEqualityComparer<Value, Item>): Item[];