@base-ui/react 1.3.0 → 1.4.0

package/esm/tooltip/positioner/TooltipPositionerContext.d.ts

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface TooltipPositionerContext {
-  open: boolean;
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type TooltipPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles'>;
 export declare const TooltipPositionerContext: React.Context<TooltipPositionerContext | undefined>;
 export declare function useTooltipPositionerContext(): TooltipPositionerContext;

package/esm/tooltip/root/TooltipRoot.d.ts

@@ -5,7 +5,7 @@ import { type TooltipHandle } from "../store/TooltipHandle.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
  * Groups all parts of the tooltip.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
@@ -66,7 +66,7 @@ export interface TooltipRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the tooltip is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled tooltip.
-   * There's no need to specify this prop when the tooltip is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/esm/tooltip/root/TooltipRoot.js

@@ -13,7 +13,7 @@ import { REASONS } from "../../utils/reasons.js";
 
 /**
  * Groups all parts of the tooltip.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
@@ -72,6 +72,7 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     forceUnmount,
     transitionStatus
   } = useOpenStateTransitions(open, store);
+  const floatingRootContext = store.select('floatingRootContext');
   const isInstantPhase = store.useState('isInstantPhase');
   const instantType = store.useState('instantType');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
@@ -110,7 +111,6 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
     referencePress: () => store.select('closeOnClick')

package/esm/tooltip/store/TooltipStore.js

@@ -41,6 +41,7 @@ export class TooltipStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
         open: nextOpen,

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -30,6 +30,7 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     closeOnClick = true,
     closeDelay,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = useTooltipRootContext(true);
@@ -94,7 +95,8 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
       };
     },
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const focusProps = useFocus(floatingRootContext, {
     enabled: !disabled

package/esm/tooltip/viewport/TooltipViewport.js

@@ -24,6 +24,7 @@ export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipVie
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/esm/types/temporal/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./temporal-adapter.js";
+export * from "./temporal.js";

package/esm/types/temporal/index.js

@@ -0,0 +1,2 @@
+export * from "./temporal-adapter.js";
+export * from "./temporal.js";

package/esm/types/temporal/temporal-adapter.d.ts

@@ -0,0 +1,371 @@
+import { TemporalTimezone, TemporalSupportedObject, TemporalSupportedValue } from "./temporal.js";
+export interface TemporalAdapterFormats {
+  /**
+   * The 4-digit year.
+   * @example "2019"
+   */
+  yearPadded: string;
+  /**
+   * The month with leading zeros.
+   * @example "08"
+   */
+  monthPadded: string;
+  /**
+   * The day of the month with leading zeros.
+   * @example "01"
+   */
+  dayOfMonthPadded: string;
+  /**
+   * The hours with leading zeros, 24-hour clock.
+   * @example "01", "23"
+   */
+  hours24hPadded: string;
+  /**
+   * The hours with leading zeros, 12-hour clock.
+   * @example "01", "11"
+   */
+  hours12hPadded: string;
+  /**
+   * The minutes with leading zeros.
+   * @example "01", "59"
+   */
+  minutesPadded: string;
+  /**
+   * The seconds with leading zeros.
+   * @example "01", "59"
+   */
+  secondsPadded: string;
+  /**
+   * The day of the month without leading zeros.
+   * @example "1"
+   */
+  dayOfMonth: string;
+  /**
+   * The hours without leading zeros, 24-hour clock.
+   * @example "1", "23"
+   */
+  hours24h: string;
+  /**
+   * The hours without leading zeros, 12-hour clock.
+   * @example "1", "11"
+   */
+  hours12h: string;
+  /**
+   * The abbreviated month name.
+   * @example "Aug"
+   */
+  month3Letters: string;
+  /**
+   * The full month name.
+   * @example "August"
+   */
+  monthFullLetter: string;
+  /**
+   * The week day name.
+   * @example "Wednesday"
+   */
+  weekday: string;
+  /**
+   * The abbreviated week day name.
+   * @example "Wed"
+   * */
+  weekday3Letters: string;
+  /**
+   * The initial of the week day name.
+   * @example "W"
+   * */
+  weekday1Letter: string;
+  /**
+   * The meridiem.
+   * @example "AM"
+   */
+  meridiem: string;
+  /**
+   * The localized date format including year, month, day and weekday.
+   * @example "Wednesday, August 6, 2014"
+   */
+  localizedDateWithFullMonthAndWeekDay: string;
+  /**
+   * The localized numeric date format including year, month and day.
+   * @example "8/6/2014"
+   */
+  localizedNumericDate: string;
+}
+export type DateBuilderReturnType<T extends string | null> = [T] extends [null] ? null : TemporalSupportedObject;
+export interface TemporalAdapter {
+  isTimezoneCompatible: boolean;
+  formats: TemporalAdapterFormats;
+  /**
+   * Name of the library that is used right now.
+   */
+  lib: string;
+  /**
+   * Characters used to escape a string inside a format.
+   */
+  escapedCharacters: {
+    start: string;
+    end: string;
+  };
+  /**
+   * Creates a date in the date library format.
+   */
+  date<T extends string | null>(value: T, timezone: TemporalTimezone): DateBuilderReturnType<T>;
+  /**
+   * Parses a date from a string in the given format.
+   */
+  parse(value: string, format: string, timezone: TemporalTimezone): TemporalSupportedObject;
+  /**
+   * Creates a date in the date library format for the current time.
+   */
+  now(timezone: TemporalTimezone): TemporalSupportedObject;
+  /**
+   * Extracts the timezone from a date.
+   */
+  getTimezone(value: TemporalSupportedValue | null): TemporalTimezone;
+  /**
+   * Converts a date to another timezone.
+   */
+  setTimezone(value: TemporalSupportedObject, timezone: TemporalTimezone): TemporalSupportedObject;
+  /**
+   * Converts a date in the library format into a JavaScript `Date` object.
+   */
+  toJsDate(value: TemporalSupportedObject): Date;
+  /**
+   * Gets the code of the locale currently used by the adapter.
+   */
+  getCurrentLocaleCode(): string;
+  /**
+   * Checks if the date is valid.
+   */
+  isValid(value: TemporalSupportedValue): value is TemporalSupportedObject;
+  /**
+   * Formats a date using an adapter format string (see the `AdapterFormats` interface).
+   */
+  format(value: TemporalSupportedObject, formatKey: keyof TemporalAdapterFormats): string;
+  /**
+   * Formats a date using a format of the date library.
+   */
+  formatByString(value: TemporalSupportedObject, formatString: string): string;
+  /**
+   * Checks if the two dates are equal (which means they represent the same timestamp).
+   */
+  isEqual(value: TemporalSupportedValue, comparing: TemporalSupportedValue): boolean;
+  /**
+   * Checks if the two dates are in the same year.
+   * Uses the timezone of the `value`.
+   */
+  isSameYear(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the two dates are in the same month.
+   * Uses the timezone of the `value`.
+   */
+  isSameMonth(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the two dates are in the same day.
+   * Uses the timezone of the `value`.
+   */
+  isSameDay(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the two dates are at the same hour.
+   * Uses the timezone of the `value`.
+   */
+  isSameHour(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the `value` date is after the `comparing` date.
+   */
+  isAfter(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the `value` date is before the `comparing` date.
+   */
+  isBefore(value: TemporalSupportedObject, comparing: TemporalSupportedObject): boolean;
+  /**
+   * Checks if the value is within the provided range.
+   */
+  isWithinRange(value: TemporalSupportedObject, range: [TemporalSupportedObject, TemporalSupportedObject]): boolean;
+  /**
+   * Returns the start of the year for the given date.
+   */
+  startOfYear(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the month for the given date.
+   */
+  startOfMonth(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the week for the given date.
+   */
+  startOfWeek(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the day for the given date.
+   */
+  startOfDay(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the hour for the given date.
+   */
+  startOfHour(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the minute for the given date.
+   */
+  startOfMinute(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the start of the second for the given date.
+   */
+  startOfSecond(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the year for the given date.
+   */
+  endOfYear(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the month for the given date.
+   */
+  endOfMonth(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the week for the given date.
+   */
+  endOfWeek(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the day for the given date.
+   */
+  endOfDay(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the hour for the given date.
+   */
+  endOfHour(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the minute for the given date.
+   */
+  endOfMinute(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Returns the end of the second for the given date.
+   */
+  endOfSecond(value: TemporalSupportedObject): TemporalSupportedObject;
+  /**
+   * Adds the specified number of years to the given date.
+   */
+  addYears(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of months to the given date.
+   */
+  addMonths(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of weeks to the given date.
+   */
+  addWeeks(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of days to the given date.
+   */
+  addDays(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of hours to the given date.
+   */
+  addHours(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of minutes to the given date.
+   */
+  addMinutes(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of seconds to the given date.
+   */
+  addSeconds(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Adds the specified number of milliseconds to the given date.
+   */
+  addMilliseconds(value: TemporalSupportedObject, amount: number): TemporalSupportedObject;
+  /**
+   * Gets the year of the given date.
+   */
+  getYear(value: TemporalSupportedObject): number;
+  /**
+   * Gets the month of the given date.
+   * The value is 0-based, in the Gregorian calendar January = 0, February = 1, ...
+   */
+  getMonth(value: TemporalSupportedObject): number;
+  /**
+   * Gets the date (day in the month) of the given date.
+   */
+  getDate(value: TemporalSupportedObject): number;
+  /**
+   * Gets the hours of the given date.
+   */
+  getHours(value: TemporalSupportedObject): number;
+  /**
+   * Gets the minutes of the given date.
+   */
+  getMinutes(value: TemporalSupportedObject): number;
+  /**
+   * Gets the seconds of the given date.
+   */
+  getSeconds(value: TemporalSupportedObject): number;
+  /**
+   * Gets the milliseconds of the given date.
+   */
+  getMilliseconds(value: TemporalSupportedObject): number;
+  /**
+   * Gets the time since epoch of the given date.
+   */
+  getTime(value: TemporalSupportedObject): number;
+  /**
+   * Sets the year to the given date.
+   */
+  setYear(value: TemporalSupportedObject, year: number): TemporalSupportedObject;
+  /**
+   * Sets the month to the given date.
+   */
+  setMonth(value: TemporalSupportedObject, month: number): TemporalSupportedObject;
+  /**
+   * Sets the date (day in the month) to the given date.
+   */
+  setDate(value: TemporalSupportedObject, date: number): TemporalSupportedObject;
+  /**
+   * Sets the hours to the given date.
+   */
+  setHours(value: TemporalSupportedObject, hours: number): TemporalSupportedObject;
+  /**
+   * Sets the minutes to the given date.
+   */
+  setMinutes(value: TemporalSupportedObject, minutes: number): TemporalSupportedObject;
+  /**
+   * Sets the seconds to the given date.
+   */
+  setSeconds(value: TemporalSupportedObject, seconds: number): TemporalSupportedObject;
+  /**
+   * Sets the milliseconds to the given date.
+   */
+  setMilliseconds(value: TemporalSupportedObject, milliseconds: number): TemporalSupportedObject;
+  /**
+   * Gets the number of full years between the given dates.
+   */
+  differenceInYears: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of full months between the given dates.
+   */
+  differenceInMonths: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of full weeks between the given dates.
+   */
+  differenceInWeeks: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of full days between the given dates.
+   */
+  differenceInDays: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of full hours between the given dates.
+   */
+  differenceInHours: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of full minutes between the given dates.
+   */
+  differenceInMinutes: (value: TemporalSupportedObject, comparing: TemporalSupportedObject) => number;
+  /**
+   * Gets the number of days in a month of the given date.
+   */
+  getDaysInMonth(value: TemporalSupportedObject): number;
+  /**
+   * Gets the number of the week of the given date.
+   */
+  getWeekNumber(value: TemporalSupportedObject): number;
+  /**
+   * Gets the number of the day of the week of the given date.
+   * The value is 1-based, 1 - first day of the week, 7 - last day of the week.
+   */
+  getDayOfWeek(value: TemporalSupportedObject): number;
+}

package/esm/types/temporal/temporal-adapter.js

@@ -0,0 +1 @@
+export {};

package/esm/types/temporal/temporal.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Lookup in which each date library can register its supported date object type.
+ *
+ * ```
+ * // Example taken from the TemporalAdapterDateFns.ts file.
+ * declare module '@base-ui/react/types' {
+ *   interface TemporalSupportedObjectLookup {
+ *     'date-fns': Date;
+ *   }
+ * }
+ * ```
+ */
+export interface TemporalSupportedObjectLookup {}
+/**
+ * The valid shape date objects can take in the components and utilities that deal with dates and times.
+ */
+export type TemporalSupportedObject = keyof TemporalSupportedObjectLookup extends never ? any : TemporalSupportedObjectLookup[keyof TemporalSupportedObjectLookup];
+/**
+ * The valid value for the timezone argument in components and utilities that deal with dates and times.
+ */
+export type TemporalTimezone = 'default' | 'system' | 'UTC' | string;
+/**
+ * The type that the `value` and `defaultValue` props can receive on non-range date and time components (date, time and date-time).
+ */
+export type TemporalValue = TemporalSupportedObject | null;
+/**
+ * The type that the `value` and `defaultValue` props can receive on range components (date-range, time-range and date-time-range).
+ */
+export type TemporalRangeValue = [TemporalValue, TemporalValue];
+/**
+ * The type that the `value` and `defaultValue` props can receive on all temporal components.
+ */
+export type TemporalSupportedValue = TemporalValue | TemporalRangeValue;
+export type TemporalNonNullableRangeValue = [TemporalSupportedObject, TemporalSupportedObject];
+export type TemporalNonNullableValue<TValue extends TemporalSupportedValue> = TValue extends TemporalRangeValue ? TValue extends TemporalValue ? TemporalSupportedObject | TemporalNonNullableRangeValue : TemporalNonNullableRangeValue : TemporalSupportedObject;

package/esm/types/temporal/temporal.js

@@ -0,0 +1 @@
+export {};

package/esm/unstable-use-media-query/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 export function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
@@ -31,12 +32,7 @@ export function useMediaQuery(query, options) {
       return [getDefaultSnapshot, () => () => {}];
     }
     const mediaQueryList = matchMedia(query);
-    return [() => mediaQueryList.matches, notify => {
-      mediaQueryList.addEventListener('change', notify);
-      return () => {
-        mediaQueryList.removeEventListener('change', notify);
-      };
-    }];
+    return [() => mediaQueryList.matches, notify => addEventListener(mediaQueryList, 'change', notify)];
   }, [getDefaultSnapshot, matchMedia, query]);
   const match = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   if (process.env.NODE_ENV !== 'production') {

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

@@ -12,7 +12,7 @@ export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactEl
 export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
 export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
   /**
-   * Allows you to replace the component’s HTML element
+   * Allows you to replace the component's HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.

package/esm/utils/FloatingPortalLite.js

@@ -16,6 +16,7 @@ export const FloatingPortalLite = /*#__PURE__*/React.forwardRef(function Floatin
     container,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/utils/InternalBackdrop.js

@@ -11,19 +11,8 @@ export const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalB
   } = props;
   let clipPath;
   if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+    const rect = cutout.getBoundingClientRect();
+    clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
   }
   return /*#__PURE__*/_jsx("div", {
     ref: ref,

package/esm/utils/createBaseUIEventDetails.d.ts

@@ -71,7 +71,7 @@ type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends obj
 /**
  * Details of custom change events emitted by Base UI components.
  */
-export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> : never;
+export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Details of custom generic events emitted by Base UI components.
  */
@@ -85,7 +85,7 @@ type BaseUIGenericEventDetail<Reason extends string, CustomProperties extends ob
    */
   event: ReasonToEvent<Reason>;
 } & CustomProperties;
-export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> : never;
+export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.

package/esm/utils/getPseudoElementBounds.js

@@ -1,3 +1,4 @@
+import { ownerWindow } from '@base-ui/utils/owner';
 export function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
@@ -5,8 +6,9 @@ export function getPseudoElementBounds(element) {
   if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const win = ownerWindow(element);
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;

package/esm/utils/popups/store.js

@@ -11,7 +11,7 @@ export function createInitialPopupStoreState() {
     open: false,
     openProp: undefined,
     mounted: false,
-    transitionStatus: 'idle',
+    transitionStatus: undefined,
     floatingRootContext: getEmptyRootContext(),
     preventUnmountingOnClose: false,
     payload: undefined,

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type BaseUIChangeEventDetails } from "../createBaseUIEventDetails.js";
+import { REASONS } from "../reasons.js";
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+interface TriggerFocusGuardStore {
+  setOpen(open: boolean, eventDetails: BaseUIChangeEventDetails<typeof REASONS.focusOut>): void;
+  select(key: 'positionerElement'): HTMLElement | null;
+  context: {
+    readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
+    readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
+  };
+}
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export declare function useTriggerFocusGuards(store: TriggerFocusGuardStore, triggerElementRef: React.RefObject<HTMLElement | null>): {
+  preFocusGuardRef: React.RefObject<HTMLElement | null>;
+  handlePreFocusGuardFocus: (event: React.FocusEvent) => void;
+  handleFocusTargetFocus: (event: React.FocusEvent) => void;
+};
+export {};