@base-ui/react 1.4.0 → 1.5.0

package/esm/calendar/root/CalendarRootDataAttributes.js

@@ -1,24 +0,0 @@
-export let CalendarRootDataAttributes = /*#__PURE__*/function (CalendarRootDataAttributes) {
-  /**
-   * Present when the current value is empty.
-   */
-  CalendarRootDataAttributes["empty"] = "data-empty";
-  /**
-   * Present when the current value is invalid (fails validation).
-   */
-  CalendarRootDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the calendar is disabled.
-   */
-  CalendarRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the calendar is readonly.
-   */
-  CalendarRootDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Indicates the direction of the navigation (based on the month navigating to).
-   * @type {'previous' | 'next' | 'none'}
-   */
-  CalendarRootDataAttributes["navigationDirection"] = "data-navigation-direction";
-  return CalendarRootDataAttributes;
-}({});

package/esm/calendar/root/SharedCalendarRootContext.d.ts

@@ -1,5 +0,0 @@
-import * as React from 'react';
-import { SharedCalendarStore } from "../store/index.js";
-export type SharedCalendarRootContext = SharedCalendarStore<any, any>;
-export declare const SharedCalendarRootContext: React.Context<SharedCalendarRootContext | undefined>;
-export declare function useSharedCalendarRootContext(): SharedCalendarRootContext;

package/esm/calendar/root/SharedCalendarRootContext.js

@@ -1,13 +0,0 @@
-'use client';
-
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
-import * as React from 'react';
-export const SharedCalendarRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") SharedCalendarRootContext.displayName = "SharedCalendarRootContext";
-export function useSharedCalendarRootContext() {
-  const context = React.useContext(SharedCalendarRootContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SharedCalendarRootContext is missing. Calendar parts must be placed within <Calendar.Root /> and Range Calendar parts must be placed within <RangeCalendar.Root />.' : _formatErrorMessage(97));
-  }
-  return context;
-}

package/esm/calendar/store/SharedCalendarState.d.ts

@@ -1,78 +0,0 @@
-import { TemporalManager } from "../../utils/temporal/types.js";
-import { TemporalAdapter, TemporalSupportedObject, TemporalSupportedValue, TemporalTimezone } from "../../types/temporal/index.js";
-export type CalendarNavigationDirection = 'previous' | 'next' | 'none';
-export interface SharedCalendarState<TValue extends TemporalSupportedValue = any> {
-  /**
-   * The value of the calendar, as passed to `props.value` or `props.defaultValue`.
-   */
-  value: TValue;
-  /**
-   * The controlled value prop.
-   * `undefined` means the value is uncontrolled.
-   */
-  readonly valueProp: TValue | undefined;
-  /**
-   * The date that is currently visible in the calendar.
-   */
-  visibleDate: TemporalSupportedObject;
-  /**
-   * The controlled visible date prop.
-   * `undefined` means the visible date is uncontrolled.
-   */
-  readonly visibleDateProp: TemporalSupportedObject | undefined;
-  /**
-   * The direction the calendar is currently navigating in.
-   */
-  navigationDirection: CalendarNavigationDirection;
-  /**
-   * The initial date used to generate the reference date if any.
-   */
-  initialReferenceDateFromValue: TemporalSupportedObject | null;
-  /**
-   * The timezone as passed to `props.timezone`.
-   */
-  timezoneProp: TemporalTimezone | undefined;
-  /**
-   * The reference date as passed to `props.referenceDate`.
-   */
-  referenceDateProp: TemporalSupportedObject | null;
-  /**
-   * Whether the calendar is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Whether the calendar is readonly.
-   */
-  readOnly: boolean;
-  /**
-   * Whether the calendar is forcefully marked as invalid.
-   */
-  invalidProp: boolean | undefined;
-  /**
-   * Minimal selectable date.
-   */
-  minDate: TemporalSupportedObject | undefined;
-  /**
-   * Maximal selectable date.
-   */
-  maxDate: TemporalSupportedObject | undefined;
-  /**
-   * Mark specific dates as unavailable.
-   * Those dates will not be selectable but they will still be focusable with the keyboard.
-   */
-  isDateUnavailable: ((day: TemporalSupportedObject) => boolean) | undefined;
-  /**
-   * The amount of months to navigate by when pressing `<Calendar.IncrementMonth>`, `<Calendar.DecrementMonth>`.
-   */
-  monthPageSize: number;
-  /**
-   * The manager of the calendar (uses `getDateManager` for Calendar and `getDateRangeManager` for RangeCalendar).
-   * Not publicly exposed, is only set in state to avoid passing it to the selectors.
-   */
-  manager: TemporalManager<TValue, any, any>;
-  /**
-   * The adapter of the date library.
-   * Not publicly exposed, is only set in state to avoid passing it to the selectors.
-   */
-  adapter: TemporalAdapter;
-}

package/esm/calendar/store/SharedCalendarState.js

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

package/esm/calendar/store/SharedCalendarStore.d.ts

@@ -1,144 +0,0 @@
-import { ReactStore } from '@base-ui/utils/store';
-import { TemporalSupportedObject, TemporalSupportedValue, TemporalAdapter } from "../../types/temporal/index.js";
-import { ValidateDateValidationProps } from "../../utils/temporal/validateDate.js";
-import { TemporalManager, TemporalTimezoneProps } from "../../utils/temporal/types.js";
-import { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { SharedCalendarState as State } from "./SharedCalendarState.js";
-import { BaseUIEventReasons } from "../../utils/reasons.js";
-export interface SharedCalendarStoreContext<TValue extends TemporalSupportedValue, TError> {
-  onValueChange?: ((value: TValue, eventDetails: CalendarValueChangeEventDetails<TError>) => void) | undefined;
-  onVisibleDateChange?: ((visibleDate: TemporalSupportedObject, eventDetails: CalendarVisibleDateChangeEventDetails) => void) | undefined;
-}
-/**
- * Store managing the state of the Calendar and the Range Calendar components.
- */
-export declare class SharedCalendarStore<TValue extends TemporalSupportedValue, TError> extends ReactStore<State<TValue>, SharedCalendarStoreContext<TValue, TError>> {
-  private valueManager;
-  constructor(parameters: SharedCalendarStoreParameters<TValue, TError>, adapter: TemporalAdapter, manager: TemporalManager<TValue, TError, any>, valueManager: ValueManager<TValue>);
-  /**
-   * Sets the visible date.
-   */
-  setVisibleDate: (visibleDate: TemporalSupportedObject, nativeEvent?: Event, trigger?: HTMLElement, reason?: CalendarChangeEventReason) => void;
-  /**
-   * Selects a date.
-   */
-  selectDate: (selectedDate: TemporalSupportedObject, event: React.MouseEvent<HTMLButtonElement>) => void;
-  /**
-   * Sets the value.
-   * Should only be used internally through `selectDate` method.
-   */
-  private setValue;
-  /**
-   * Determines the navigation direction based on the new and the previous visible date.
-   */
-  private getNavigationDirectionFromVisibleDateChange;
-}
-export interface SharedCalendarStoreParameters<TValue extends TemporalSupportedValue, TError> extends TemporalTimezoneProps, ValidateDateValidationProps {
-  /**
-   * The controlled value that should be selected.
-   * To render an uncontrolled (Range)Calendar, use the `defaultValue` prop instead.
-   */
-  value?: TValue | undefined;
-  /**
-   * The uncontrolled value that should be initially selected.
-   * To render a controlled (Range)Calendar, use the `value` prop instead.
-   */
-  defaultValue?: TValue | undefined;
-  /**
-   * Event handler called when the selected value changes.
-   * Provides the new value as an argument.
-   * Has `getValidationError()` in the `eventDetails` to retrieve the validation error associated to the new value.
-   */
-  onValueChange?: ((value: TValue, eventDetails: CalendarValueChangeEventDetails<TError>) => void) | undefined;
-  /**
-   * Whether the component should ignore user interaction.
-   * @default false
-   */
-  disabled?: boolean | undefined;
-  /**
-   * Whether the user should be unable to select a date in the calendar.
-   * @default false
-   */
-  readOnly?: boolean | undefined;
-  /**
-   * Whether the calendar is forcefully marked as invalid.
-   * A calendar can be invalid when the selected date fails validation (that is, is outside of the allowed `minDate` and `maxDate` range).
-   * @default false
-   */
-  invalid?: boolean | undefined;
-  /**
-   * Mark specific dates as unavailable.
-   * Those dates will not be selectable but they will still be focusable with the keyboard.
-   */
-  isDateUnavailable?: ((day: TemporalSupportedObject) => boolean) | undefined;
-  /**
-   * The date used to decide which month should be displayed in the Day Grid.
-   * To render an uncontrolled Calendar, use the `defaultVisibleDate` prop instead.
-   */
-  visibleDate?: TemporalSupportedObject | undefined;
-  /**
-   * The date used to decide which month should be initially displayed in the Day Grid.
-   * To render a controlled Calendar, use the `visibleDate` prop instead.
-   */
-  defaultVisibleDate?: TemporalSupportedObject | undefined;
-  /**
-   * Event handler called when the visible date changes.
-   * Provides the new date as an argument.
-   * Has the change reason in the `eventDetails`.
-   */
-  onVisibleDateChange?: ((visibleDate: TemporalSupportedObject, eventDetails: CalendarVisibleDateChangeEventDetails) => void) | undefined;
-  /**
-   * The date used to generate the new value when both `value` and `defaultValue` are empty.
-   * It can be used to:
-   * - set a desired time on the selected date;
-   * - set a desired default year or month;
-   * @default 'The closest valid date using the validation props.'
-   */
-  referenceDate?: TemporalSupportedObject | undefined;
-  /**
-   * The amount of months to move by when navigating.
-   * This is mostly useful when displaying multiple day grids.
-   * @default 1
-   */
-  monthPageSize?: number | undefined;
-}
-export interface ValueManager<TValue extends TemporalSupportedValue> {
-  /**
-   * Returns the date to use for the reference date.
-   */
-  getDateToUseForReferenceDate: (value: TValue) => TemporalSupportedObject | null;
-  /**
-   * Runs logic when a date is selected.
-   * This is used to correctly update the value on the Range Calendar.
-   */
-  onSelectDate: (parameters: OnSelectDateParameters<TValue>) => void;
-  /**
-   * Returns the active date from the value.
-   * This is used to determine which date is being edited in the Range Calendar (start of end date).
-   */
-  getActiveDateFromValue: (value: TValue) => TemporalSupportedObject | null;
-}
-export interface OnSelectDateParameters<TValue extends TemporalSupportedValue> {
-  setValue: (value: TValue) => void;
-  /**
-   * The value before the change.
-   */
-  prevValue: TValue;
-  /**
-   * The date to select.
-   */
-  selectedDate: TemporalSupportedObject;
-  /**
-   * The reference date.
-   */
-  referenceDate: TemporalSupportedObject;
-}
-export interface CalendarValueChangeHandlerContext<TError> {
-  /**
-   * The validation error associated to the new value.
-   */
-  getValidationError: () => TError;
-}
-export type CalendarChangeEventReason = BaseUIEventReasons['monthChange'] | BaseUIEventReasons['valuePropChange'] | BaseUIEventReasons['dayPress'] | BaseUIEventReasons['keyboard'];
-export type CalendarValueChangeEventDetails<TError> = BaseUIChangeEventDetails<CalendarChangeEventReason, CalendarValueChangeHandlerContext<TError>>;
-export type CalendarVisibleDateChangeEventDetails = BaseUIChangeEventDetails<CalendarChangeEventReason, {}>;

package/esm/calendar/store/SharedCalendarStore.js

@@ -1,137 +0,0 @@
-import { ReactStore } from '@base-ui/utils/store';
-import { getInitialReferenceDate } from "../../utils/temporal/getInitialReferenceDate.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { mergeDateAndTime } from "../../utils/temporal/date-helpers.js";
-import { selectors } from "./selectors.js";
-import { REASONS } from "../../utils/reasons.js";
-/**
- * Store managing the state of the Calendar and the Range Calendar components.
- */
-export class SharedCalendarStore extends ReactStore {
-  constructor(parameters, adapter, manager, valueManager) {
-    const value = parameters.value ?? parameters.defaultValue ?? manager.emptyValue;
-    const initialReferenceDateFromValue = valueManager.getDateToUseForReferenceDate(value);
-    let initialVisibleDate;
-    if (parameters.visibleDate) {
-      initialVisibleDate = parameters.visibleDate;
-    } else if (parameters.defaultVisibleDate) {
-      initialVisibleDate = parameters.defaultVisibleDate;
-    } else {
-      initialVisibleDate = getInitialReferenceDate({
-        adapter,
-        timezone: parameters.timezone ?? 'default',
-        validationProps: {
-          minDate: parameters.minDate,
-          maxDate: parameters.maxDate
-        },
-        externalReferenceDate: parameters.referenceDate ?? null,
-        externalDate: initialReferenceDateFromValue
-      });
-    }
-    super({
-      adapter,
-      manager,
-      timezoneProp: parameters.timezone,
-      referenceDateProp: parameters.referenceDate ?? null,
-      minDate: parameters.minDate,
-      maxDate: parameters.maxDate,
-      isDateUnavailable: parameters.isDateUnavailable,
-      disabled: parameters.disabled ?? false,
-      readOnly: parameters.readOnly ?? false,
-      invalidProp: parameters.invalid,
-      monthPageSize: parameters.monthPageSize ?? 1,
-      visibleDate: initialVisibleDate,
-      visibleDateProp: parameters.visibleDate,
-      initialReferenceDateFromValue,
-      value,
-      valueProp: parameters.value,
-      navigationDirection: 'none'
-    }, {
-      onValueChange: parameters.onValueChange,
-      onVisibleDateChange: parameters.onVisibleDateChange
-    });
-    this.valueManager = valueManager;
-
-    // When the controlled value prop changes, sync the internal value
-    // and auto-update visibleDate to the active date.
-    this.observe(state => state.valueProp, (newValueProp, oldValueProp) => {
-      if (newValueProp !== undefined && oldValueProp !== undefined && !this.state.adapter.isEqual(newValueProp, oldValueProp)) {
-        this.set('value', newValueProp);
-        const visibleDate = this.valueManager.getActiveDateFromValue(newValueProp);
-        if (this.state.adapter.isValid(visibleDate) && !this.state.adapter.isSameMonth(visibleDate, this.state.visibleDate)) {
-          this.setVisibleDate(visibleDate, undefined, undefined, REASONS.valuePropChange);
-        }
-      }
-    });
-
-    // When the controlled visible date prop changes, update the navigation direction.
-    this.observe(state => state.visibleDateProp, (newVisibleDateProp, oldVisibleDateProp) => {
-      if (newVisibleDateProp !== undefined && oldVisibleDateProp !== undefined && !this.state.adapter.isEqual(newVisibleDateProp, oldVisibleDateProp)) {
-        this.set('navigationDirection', this.getNavigationDirectionFromVisibleDateChange(newVisibleDateProp, oldVisibleDateProp));
-      }
-    });
-  }
-
-  /**
-   * Sets the visible date.
-   */
-  setVisibleDate = (visibleDate, nativeEvent, trigger, reason) => {
-    const eventDetails = createChangeEventDetails(reason ?? REASONS.dayPress, nativeEvent, trigger);
-    this.context.onVisibleDateChange?.(visibleDate, eventDetails);
-    if (!eventDetails.isCanceled && this.state.visibleDateProp === undefined) {
-      this.update({
-        visibleDate,
-        navigationDirection: this.getNavigationDirectionFromVisibleDateChange(visibleDate, this.state.visibleDate)
-      });
-    }
-  };
-
-  /**
-   * Selects a date.
-   */
-  selectDate = (selectedDate, event) => {
-    if (this.state.readOnly) {
-      return;
-    }
-    const referenceDate = selectors.referenceDate(this.state);
-    const activeDate = this.valueManager.getActiveDateFromValue(this.state.value) ?? referenceDate;
-    const cleanSelectedDate = mergeDateAndTime(this.state.adapter, selectedDate, activeDate);
-    this.valueManager.onSelectDate({
-      setValue: newValue => this.setValue(newValue, event),
-      prevValue: this.state.value,
-      selectedDate: cleanSelectedDate,
-      referenceDate
-    });
-  };
-
-  /**
-   * Sets the value.
-   * Should only be used internally through `selectDate` method.
-   */
-  setValue(newValue, event) {
-    const inputTimezone = this.state.manager.getTimezone(this.state.value);
-    const newValueWithInputTimezone = inputTimezone == null ? newValue : this.state.manager.setTimezone(newValue, inputTimezone);
-    const eventDetails = createChangeEventDetails(REASONS.dayPress, event.nativeEvent, event.currentTarget, {
-      getValidationError: () => this.state.manager.getValidationError(newValueWithInputTimezone, selectors.validationProps(this.state))
-    });
-    this.context.onValueChange?.(newValueWithInputTimezone, eventDetails);
-    if (!eventDetails.isCanceled && this.state.valueProp === undefined) {
-      this.set('value', newValueWithInputTimezone);
-    }
-  }
-
-  /**
-   * Determines the navigation direction based on the new and the previous visible date.
-   */
-  getNavigationDirectionFromVisibleDateChange(visibleDate, previousVisibleDate) {
-    const prevVisibleDateTimestamp = this.state.adapter.getTime(previousVisibleDate);
-    const visibleDateTimestamp = this.state.adapter.getTime(visibleDate);
-    let newNavigationDirection = 'none';
-    if (visibleDateTimestamp < prevVisibleDateTimestamp) {
-      newNavigationDirection = 'previous';
-    } else if (visibleDateTimestamp > prevVisibleDateTimestamp) {
-      newNavigationDirection = 'next';
-    }
-    return newNavigationDirection;
-  }
-}

package/esm/calendar/store/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./SharedCalendarStore.js";
-export * from "./SharedCalendarState.js";
-export * from "./selectors.js";

package/esm/calendar/store/index.js

@@ -1,3 +0,0 @@
-export * from "./SharedCalendarStore.js";
-export * from "./SharedCalendarState.js";
-export * from "./selectors.js";

package/esm/calendar/store/selectors.d.ts

@@ -1,104 +0,0 @@
-import { TemporalSupportedValue } from "../../types/temporal/index.js";
-import { CalendarNavigationDirection, SharedCalendarState as State } from "./SharedCalendarState.js";
-export declare const selectors: {
-  /**
-   * Returns the timezone to use for rendering.
-   */
-  timezoneToRender: (args_0: State<any>) => string;
-  /**
-   * Returns the state of the root element.
-   */
-  rootElementState: (args_0: State<any>) => {
-    empty: boolean;
-    invalid: boolean;
-    disabled: boolean;
-    readOnly: boolean;
-    navigationDirection: CalendarNavigationDirection;
-  };
-  /**
-   * Returns the context to publicly expose in render functions and hooks.
-   */
-  publicContext: (args_0: State<any>) => {
-    visibleDate: Date;
-  };
-  /**
-   * Returns the props to check if a date is valid or not.
-   */
-  validationProps: (args_0: State<any>) => {
-    minDate: Date | undefined;
-    maxDate: Date | undefined;
-  };
-  /**
-   * Returns the amount of months to navigate by when pressing `<Calendar.IncrementMonth>` or `<Calendar.DecrementMonth>`.
-   */
-  monthPageSize: (state: State<any>) => number;
-  /**
-   * Returns the date currently visible.
-   */
-  visibleDate: (args_0: State<any>) => Date;
-  /**
-   * Returns the current visible month.
-   */
-  visibleMonth: (args_0: State<any>) => Date;
-  /**
-   * Returns the navigation direction.
-   */
-  navigationDirection: (state: State<any>) => CalendarNavigationDirection;
-  /**
-   * Returns the current value with the timezone to render applied.
-   */
-  valueWithTimezoneToRender: <TValue extends TemporalSupportedValue>(state: State<TValue>) => TValue;
-  /**
-   * Returns the reference date.
-   */
-  referenceDate: (args_0: State<any>) => Date;
-  /**
-   * Returns the list of currently selected dates.
-   * When used inside the Calendar component, it contains the current value if not null.
-   * When used inside the RangeCalendar component, it contains the selected start and/or end dates if not null.
-   */
-  selectedDates: (args_0: State<any>) => any[];
-  /**
-   * Checks if a day cell should be disabled.
-   */
-  isDayCellDisabled: (state: State<any>, value: Date) => boolean;
-  /**
-   * Checks if a day cell should be selected.
-   */
-  isDayButtonSelected: (args_0: State<any>, cellValue: Date) => boolean;
-  /**
-   * Checks if a specific dates is unavailable.
-   * If so, this date should not be selectable but should still be focusable with the keyboard.
-   */
-  isDayCellUnavailable: (state: State<any>, value: Date) => boolean;
-  /**
-   * Checks if a month navigation button should be disabled.
-   */
-  isSetMonthButtonDisabled: (args_0: State<any>, targetDate: Date, disabledProp: boolean | undefined) => boolean;
-  /**
-   * Checks if a day should be reachable using tab navigation.
-   */
-  isDayButtonTabbable: (args_0: State<any>, date: Date, month: Date) => boolean;
-};
-export interface CalendarRootElementState {
-  /**
-   * Whether the current value is empty.
-   */
-  empty: boolean;
-  /**
-   * Whether the current value is invalid.
-   */
-  invalid: boolean;
-  /**
-   * Whether the calendar is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Whether the calendar is readonly.
-   */
-  readOnly?: boolean | undefined;
-  /**
-   * The direction of the navigation (based on the month navigating to).
-   */
-  navigationDirection: CalendarNavigationDirection;
-}