@base-ui/react 1.3.0 → 1.4.1

package/internals/temporal-adapter-luxon/TemporalAdapterLuxon.js

@@ -0,0 +1,333 @@
+"use strict";
+// Intentionally ignore TS issues in this file to avoid docs being built with `| DateTime`
+// TODO: Remove if temporal adapters are supported
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TemporalAdapterLuxon = void 0;
+var _luxon = require("luxon");
+const FORMATS = {
+  // Digit formats with leading zeroes
+  yearPadded: 'yyyy',
+  monthPadded: 'MM',
+  dayOfMonthPadded: 'dd',
+  hours24hPadded: 'HH',
+  hours12hPadded: 'hh',
+  minutesPadded: 'mm',
+  secondsPadded: 'ss',
+  // Digit formats without leading zeroes
+  dayOfMonth: 'd',
+  hours24h: 'H',
+  hours12h: 'h',
+  // Letter formats
+  month3Letters: 'MMM',
+  monthFullLetter: 'MMMM',
+  weekday: 'cccc',
+  weekday3Letters: 'ccc',
+  weekday1Letter: 'ccccc',
+  meridiem: 'a',
+  // Full formats
+  localizedDateWithFullMonthAndWeekDay: 'DDDD',
+  localizedNumericDate: 'D',
+  fullMonthAndYear: 'MMMM yyyy'
+};
+
+// Temporarily disabled to avoid docs being built with `| DateTime`
+// declare module '@base-ui/react/internals/temporal' {
+//   interface TemporalSupportedObjectLookup {
+//     luxon: DateTime;
+//   }
+// }
+
+class TemporalAdapterLuxon {
+  isTimezoneCompatible = true;
+  lib = 'luxon';
+  formats = FORMATS;
+  escapedCharacters = {
+    start: "'",
+    end: "'"
+  };
+  constructor({
+    locale
+  } = {}) {
+    this.locale = locale ?? 'en-US';
+  }
+  setLocaleToValue = value => {
+    const expectedLocale = this.getCurrentLocaleCode();
+    if (expectedLocale === value.locale) {
+      return value;
+    }
+    return value.setLocale(expectedLocale);
+  };
+  now = timezone => {
+    // @ts-expect-error locale is not identified as a field
+    return _luxon.DateTime.fromJSDate(new Date(), {
+      locale: this.locale,
+      zone: timezone
+    });
+  };
+  date = (value, timezone) => {
+    if (value === null) {
+      return null;
+    }
+    return _luxon.DateTime.fromISO(value, {
+      locale: this.locale,
+      zone: timezone
+    });
+  };
+  parse = (value, format, timezone) => {
+    return _luxon.DateTime.fromFormat(value, format, {
+      locale: this.locale,
+      zone: timezone
+    });
+  };
+  getTimezone = value => {
+    // When using the system zone, we want to return "system", not something like "Europe/Paris"
+    if (value.zone.type === 'system') {
+      return 'system';
+    }
+    return value.zoneName;
+  };
+  setTimezone = (value, timezone) => {
+    if (!value.zone.equals(_luxon.Info.normalizeZone(timezone))) {
+      return value.setZone(timezone);
+    }
+    return value;
+  };
+  toJsDate = value => {
+    return value.toJSDate();
+  };
+  getCurrentLocaleCode = () => {
+    return this.locale;
+  };
+  isValid = value => {
+    if (value == null) {
+      return false;
+    }
+    return value.isValid;
+  };
+  format = (value, formatKey) => {
+    return this.formatByString(value, this.formats[formatKey]);
+  };
+  formatByString = (value, format) => {
+    return value.setLocale(this.locale).toFormat(format);
+  };
+  isEqual = (value, comparing) => {
+    if (value === null && comparing === null) {
+      return true;
+    }
+    if (value === null || comparing === null) {
+      return false;
+    }
+    return +value === +comparing;
+  };
+  isSameYear = (value, comparing) => {
+    const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+    return value.hasSame(comparingInValueTimezone, 'year');
+  };
+  isSameMonth = (value, comparing) => {
+    const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+    return value.hasSame(comparingInValueTimezone, 'month');
+  };
+  isSameDay = (value, comparing) => {
+    const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+    return value.hasSame(comparingInValueTimezone, 'day');
+  };
+  isSameHour = (value, comparing) => {
+    const comparingInValueTimezone = this.setTimezone(comparing, this.getTimezone(value));
+    return value.hasSame(comparingInValueTimezone, 'hour');
+  };
+  isAfter = (value, comparing) => {
+    return value > comparing;
+  };
+  isBefore = (value, comparing) => {
+    return value < comparing;
+  };
+  isWithinRange = (value, [start, end]) => {
+    if (this.isAfter(value, start) && this.isBefore(value, end)) {
+      return true;
+    }
+    return this.isEqual(value, start) || this.isEqual(value, end);
+  };
+  startOfYear = value => {
+    return value.startOf('year');
+  };
+  startOfMonth = value => {
+    return value.startOf('month');
+  };
+  startOfWeek = value => {
+    return this.setLocaleToValue(value).startOf('week', {
+      useLocaleWeeks: true
+    });
+  };
+  startOfDay = value => {
+    return value.startOf('day');
+  };
+  startOfHour = value => {
+    return value.startOf('hour');
+  };
+  startOfMinute = value => {
+    return value.startOf('minute');
+  };
+  startOfSecond = value => {
+    return value.startOf('second');
+  };
+  endOfYear = value => {
+    return value.endOf('year');
+  };
+  endOfMonth = value => {
+    return value.endOf('month');
+  };
+  endOfWeek = value => {
+    return this.setLocaleToValue(value).endOf('week', {
+      useLocaleWeeks: true
+    });
+  };
+  endOfDay = value => {
+    return value.endOf('day');
+  };
+  endOfHour = value => {
+    return value.endOf('hour');
+  };
+  endOfMinute = value => {
+    return value.endOf('minute');
+  };
+  endOfSecond = value => {
+    return value.endOf('second');
+  };
+  addYears = (value, amount) => {
+    return value.plus({
+      years: amount
+    });
+  };
+  addMonths = (value, amount) => {
+    return value.plus({
+      months: amount
+    });
+  };
+  addWeeks = (value, amount) => {
+    return value.plus({
+      weeks: amount
+    });
+  };
+  addDays = (value, amount) => {
+    return value.plus({
+      days: amount
+    });
+  };
+  addHours = (value, amount) => {
+    return value.plus({
+      hours: amount
+    });
+  };
+  addMinutes = (value, amount) => {
+    return value.plus({
+      minutes: amount
+    });
+  };
+  addSeconds = (value, amount) => {
+    return value.plus({
+      seconds: amount
+    });
+  };
+  addMilliseconds = (value, amount) => {
+    return value.plus({
+      milliseconds: amount
+    });
+  };
+  getYear = value => {
+    return value.get('year');
+  };
+  getMonth = value => {
+    // See https://github.com/moment/luxon/blob/master/docs/moment.md#major-functional-differences
+    return value.get('month') - 1;
+  };
+  getDate = value => {
+    return value.get('day');
+  };
+  getHours = value => {
+    return value.get('hour');
+  };
+  getMinutes = value => {
+    return value.get('minute');
+  };
+  getSeconds = value => {
+    return value.get('second');
+  };
+  getMilliseconds = value => {
+    return value.get('millisecond');
+  };
+  getTime = value => {
+    return value.toMillis();
+  };
+  setYear = (value, year) => {
+    return value.set({
+      year
+    });
+  };
+  setMonth = (value, month) => {
+    // See https://github.com/moment/luxon/blob/master/docs/moment.md#major-functional-differences
+    return value.set({
+      month: month + 1
+    });
+  };
+  setDate = (value, date) => {
+    return value.set({
+      day: date
+    });
+  };
+  setHours = (value, hours) => {
+    return value.set({
+      hour: hours
+    });
+  };
+  setMinutes = (value, minutes) => {
+    return value.set({
+      minute: minutes
+    });
+  };
+  setSeconds = (value, seconds) => {
+    return value.set({
+      second: seconds
+    });
+  };
+  setMilliseconds = (value, milliseconds) => {
+    return value.set({
+      millisecond: milliseconds
+    });
+  };
+  differenceInYears = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'years').as('years'));
+  };
+  differenceInMonths = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'months').as('months'));
+  };
+  differenceInWeeks = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'weeks').as('weeks'));
+  };
+  differenceInDays = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'days').as('days'));
+  };
+  differenceInHours = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'hours').as('hours'));
+  };
+  differenceInMinutes = (value, comparing) => {
+    return Math.floor(value.diff(comparing, 'minutes').as('minutes'));
+  };
+  getDaysInMonth = value => {
+    return value.daysInMonth;
+  };
+  getWeekNumber = value => {
+    /* istanbul ignore next */
+    return value.localWeekNumber ?? value.weekNumber;
+  };
+  getDayOfWeek = value => {
+    /* istanbul ignore next */
+    return value.localWeekday ?? value.weekday;
+  };
+}
+exports.TemporalAdapterLuxon = TemporalAdapterLuxon;

package/internals/temporal-adapter-luxon/index.d.ts

@@ -0,0 +1 @@
+export { TemporalAdapterLuxon } from "./TemporalAdapterLuxon.js";

package/internals/temporal-adapter-luxon/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TemporalAdapterLuxon", {
+  enumerable: true,
+  get: function () {
+    return _TemporalAdapterLuxon.TemporalAdapterLuxon;
+  }
+});
+var _TemporalAdapterLuxon = require("./TemporalAdapterLuxon");

package/{utils → internals}/types.d.ts

@@ -17,14 +17,14 @@ export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
  */
-export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
   /**
    * CSS class applied to the element, or a function that
-   * returns a class based on the component’s state.
+   * returns a class based on the component's state.
    */
   className?: string | ((state: State) => string | undefined) | undefined;
   /**
-   * 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.
@@ -32,7 +32,7 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
   render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
   /**
    * Style applied to the element, or a function that
-   * returns a style object based on the component’s state.
+   * returns a style object based on the component's state.
    */
   style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
@@ -40,7 +40,7 @@ export interface NativeButtonProps {
   /**
    * Whether the component renders a native `<button>` element when replacing it
    * via the `render` prop.
-   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a button (for example, `<div>`).
    * @default true
    */
   nativeButton?: boolean | undefined;
@@ -59,5 +59,11 @@ export interface NonNativeButtonProps {
  * Taken from https://effectivetypescript.com/2022/02/25/gentips-4-display/
  */
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
+/**
+ * Makes specified keys in a type required.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make required.
+ */
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
 export type Orientation = 'horizontal' | 'vertical';

package/internals/types.js

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

package/{use-button → internals/use-button}/useButton.js

@@ -12,9 +12,9 @@ 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 _mergeProps = require("../../merge-props");
 var _CompositeRootContext = require("../composite/root/CompositeRootContext");
-var _useFocusableWhenDisabled = require("../utils/useFocusableWhenDisabled");
+var _useFocusableWhenDisabled = require("../../utils/useFocusableWhenDisabled");
 function useButton(parameters = {}) {
   const {
     disabled = false,

package/{utils → internals}/useAnimationsFinished.js

@@ -9,7 +9,7 @@ exports.useAnimationsFinished = useAnimationsFinished;
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _resolveRef = require("./resolveRef");
+var _resolveRef = require("../utils/resolveRef");
 var _stateAttributesMapping = require("./stateAttributesMapping");
 /**
  * Executes a function once all animations have finished on the provided element.
@@ -29,69 +29,66 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
    */
   signal = null) => {
     frame.cancel();
-    function done() {
-      // Synchronously flush the unmounting of the component so that the browser doesn't
-      // paint: https://github.com/mui/base-ui/issues/979
-      ReactDOM.flushSync(fnToExecute);
-    }
     const element = (0, _resolveRef.resolveRef)(elementOrRef);
     if (element == null) {
       return;
     }
     const resolvedElement = element;
+    const done = () => {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
-    } else {
-      function execWaitForStartingStyleRemoved() {
-        const startingStyleAttribute = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
-
-        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
-        // to give "open" animations a chance to be registered.
-        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-          frame.request(exec);
-          return;
-        }
-
-        // Wait for `[data-starting-style]` to have been removed.
-        const attributeObserver = new MutationObserver(() => {
-          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-            attributeObserver.disconnect();
-            exec();
-          }
-        });
-        attributeObserver.observe(resolvedElement, {
-          attributes: true,
-          attributeFilter: [startingStyleAttribute]
-        });
-        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
-          once: true
-        });
-      }
-      function exec() {
-        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
-          if (signal?.aborted) {
-            return;
-          }
+      return;
+    }
+    function exec() {
+      Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {
+        if (!signal?.aborted) {
           done();
-        }).catch(() => {
-          const currentAnimations = resolvedElement.getAnimations();
-          if (treatAbortedAsFinished) {
-            if (signal?.aborted) {
-              return;
-            }
+        }
+      }).catch(() => {
+        if (treatAbortedAsFinished) {
+          if (!signal?.aborted) {
             done();
-          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
-            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-            // In such cases, we need to re-check if any new animations have started.
-            exec();
           }
-        });
-      }
-      if (waitForStartingStyleRemoved) {
-        execWaitForStartingStyleRemoved();
+          return;
+        }
+        const currentAnimations = resolvedElement.getAnimations();
+        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+          // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+          // In such cases, we need to re-check if any new animations have started.
+          exec();
+        }
+      });
+    }
+    if (waitForStartingStyleRemoved) {
+      const startingStyleAttribute = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
+
+      // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+      // to give "open" animations a chance to be registered.
+      if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+        frame.request(exec);
         return;
       }
-      frame.request(exec);
+
+      // Wait for `[data-starting-style]` to have been removed.
+      const attributeObserver = new MutationObserver(() => {
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          attributeObserver.disconnect();
+          exec();
+        }
+      });
+      attributeObserver.observe(resolvedElement, {
+        attributes: true,
+        attributeFilter: [startingStyleAttribute]
+      });
+      signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+        once: true
+      });
+      return;
     }
+    frame.request(exec);
   });
 }

package/internals/usePressAndHold.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+export interface UsePressAndHoldParameters {
+  disabled: boolean;
+  readOnly?: boolean | undefined;
+  /**
+   * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
+   */
+  tick: (triggerEvent?: Event) => boolean;
+  /**
+   * Called when the hold ends via the global `pointerup` event.
+   */
+  onStop?: ((nativeEvent: PointerEvent) => void) | undefined;
+  /**
+   * Interval between ticks once the hold is active.
+   * @default 60
+   */
+  tickDelay?: number | undefined;
+  /**
+   * Delay before the repeating ticks start after the initial hold.
+   * @default 400
+   */
+  startDelay?: number | undefined;
+  /**
+   * Pointer movement distance (px) that cancels the hold and is treated as scrolling.
+   * @default 8
+   */
+  scrollDistance?: number | undefined;
+  /**
+   * Ref to the anchor element used to resolve `ownerWindow`.
+   */
+  elementRef: React.RefObject<HTMLElement | null>;
+}
+export interface UsePressAndHoldReturnValue {
+  pointerHandlers: {
+    onTouchStart: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd: React.TouchEventHandler<HTMLElement>;
+    onPointerDown: React.PointerEventHandler<HTMLElement>;
+    onPointerUp: React.PointerEventHandler<HTMLElement>;
+    onPointerMove: React.PointerEventHandler<HTMLElement>;
+    onMouseEnter: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave: React.MouseEventHandler<HTMLElement>;
+    onMouseUp: React.MouseEventHandler<HTMLElement>;
+  };
+  /**
+   * Returns `true` if the `onClick` handler should be skipped.
+   * Use this in the element's `onClick` to prevent double-firing on mouse clicks
+   * (already handled by `onPointerDown`) and to suppress the synthesized click
+   * that browsers fire after a touch hold.
+   */
+  shouldSkipClick: (event: React.MouseEvent) => boolean;
+}
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen
+ * inputs correctly, including Android-specific quirks.
+ */
+export declare function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndHoldReturnValue;