@base-ui/react 1.3.0 → 1.4.0

package/tooltip/positioner/TooltipPositioner.js

@@ -10,12 +10,10 @@ var React = _interopRequireWildcard(require("react"));
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPositionerContext = require("./TooltipPositionerContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _TooltipPortalContext = require("../portal/TooltipPortalContext");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../../utils/constants");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the tooltip against the trigger.
@@ -39,6 +37,7 @@ const TooltipPositioner = exports.TooltipPositioner = /*#__PURE__*/React.forward
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _TooltipRootContext.useTooltipRootContext)();
@@ -69,20 +68,6 @@ const TooltipPositioner = exports.TooltipPositioner = /*#__PURE__*/React.forward
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open || trackCursorAxis === 'both' || disableHoverablePopup) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, trackCursorAxis, disableHoverablePopup, mounted, positioning.positionerStyles]);
   const state = React.useMemo(() => ({
     open,
     side: positioning.side,
@@ -90,20 +75,16 @@ const TooltipPositioner = exports.TooltipPositioner = /*#__PURE__*/React.forward
     anchorHidden: positioning.anchorHidden,
     instant: trackCursorAxis !== 'none' ? 'tracking-cursor' : instantType
   }), [open, positioning.side, positioning.align, positioning.anchorHidden, trackCursorAxis, instantType]);
-  const contextValue = React.useMemo(() => ({
-    ...state,
-    arrowRef: positioning.arrowRef,
-    arrowStyles: positioning.arrowStyles,
-    arrowUncentered: positioning.arrowUncentered
-  }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open || trackCursorAxis === 'both' || disableHoverablePopup
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipPositionerContext.TooltipPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: element
   });
 });

package/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/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/tooltip/root/TooltipRoot.js

@@ -19,7 +19,7 @@ var _reasons = require("../../utils/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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)
  */
@@ -77,6 +77,7 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
     forceUnmount,
     transitionStatus
   } = (0, _popups.useOpenStateTransitions)(open, store);
+  const floatingRootContext = store.select('floatingRootContext');
   const isInstantPhase = store.useState('isInstantPhase');
   const instantType = store.useState('instantType');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
@@ -115,7 +116,6 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
     enabled: !disabled,
     referencePress: () => store.select('closeOnClick')

package/tooltip/store/TooltipStore.js

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

package/tooltip/trigger/TooltipTrigger.js

@@ -36,6 +36,7 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     closeOnClick = true,
     closeDelay,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _TooltipRootContext.useTooltipRootContext)(true);
@@ -100,7 +101,8 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
       };
     },
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
     enabled: !disabled

package/tooltip/viewport/TooltipViewport.js

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

package/types/temporal/index.d.ts

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

package/types/temporal/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _temporalAdapter = require("./temporal-adapter");
+Object.keys(_temporalAdapter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _temporalAdapter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _temporalAdapter[key];
+    }
+  });
+});
+var _temporal = require("./temporal");
+Object.keys(_temporal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _temporal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _temporal[key];
+    }
+  });
+});

package/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/types/temporal/temporal-adapter.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/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/types/temporal/temporal.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useMediaQuery = useMediaQuery;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _shim = require("use-sync-external-store/shim");
 function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
@@ -38,12 +39,7 @@ 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 => (0, _addEventListener.addEventListener)(mediaQueryList, 'change', notify)];
   }, [getDefaultSnapshot, matchMedia, query]);
   const match = (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
   if (process.env.NODE_ENV !== 'production') {

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

@@ -21,6 +21,7 @@ const FloatingPortalLite = exports.FloatingPortalLite = /*#__PURE__*/React.forwa
     container,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {