@base-ui/react 1.2.0 → 1.4.0

package/esm/tooltip/trigger/TooltipTrigger.js

@@ -27,8 +27,10 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     payload,
     disabled: disabledProp,
     delay,
+    closeOnClick = true,
     closeDelay,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = useTooltipRootContext(true);
@@ -48,6 +50,7 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     isMountedByThisTrigger
   } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
     payload,
+    closeOnClick,
     closeDelay: closeDelayWithDefault
   });
   const providerContext = useTooltipProviderContext();
@@ -92,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
@@ -105,6 +109,9 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(component
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
     props: [hoverProps, focusProps, rootTriggerProps, {
+      onPointerDown() {
+        store.set('closeOnClick', closeOnClick);
+      },
       id: thisTriggerId,
       [TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
     }, elementProps],

package/esm/tooltip/viewport/TooltipViewport.d.ts

@@ -9,22 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
 export declare const TooltipViewport: React.ForwardRefExoticComponent<Omit<TooltipViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'delay' | 'dismiss' | 'focus' | undefined;
+}
 export declare namespace TooltipViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', TooltipViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    /**
-     * Present if animations should be instant.
-     */
-    instant: 'delay' | 'dismiss' | 'focus' | undefined;
-  }
+  type State = TooltipViewportState;
 }

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/index.d.ts

@@ -1 +1,16 @@
-export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+import type * as React from 'react';
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
+};

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.d.ts

@@ -26,6 +26,8 @@ export interface UseMediaQueryOptions {
     matches: boolean;
   }) | undefined;
 }
+export interface UseMediaQueryState {}
 export declare namespace useMediaQuery {
+  type State = UseMediaQueryState;
   type Options = UseMediaQueryOptions;
 }

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-button/useButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function useButton(parameters?: useButton.Parameters): useButton.ReturnValue;
+export declare function useButton(parameters?: UseButtonParameters): UseButtonReturnValue;
 export interface UseButtonParameters {
   /**
    * Whether the component should ignore user interaction.
@@ -17,6 +17,12 @@ export interface UseButtonParameters {
    * @default true
    */
   native?: boolean | undefined;
+  /**
+   * Whether the button is part of a composite widget.
+   * When `true`, keyboard activation for Space occurs on keydown rather than keyup.
+   * @default inferred from CompositeRoot context
+   */
+  composite?: boolean | undefined;
 }
 export interface UseButtonReturnValue {
   /**
@@ -31,7 +37,4 @@ export interface UseButtonReturnValue {
    */
   buttonRef: React.Ref<HTMLElement>;
 }
-export declare namespace useButton {
-  type Parameters = UseButtonParameters;
-  type ReturnValue = UseButtonReturnValue;
-}
+export interface UseButtonState {}