@base-ui/react 1.4.0 → 1.4.1

package/calendar/store/selectors.js

@@ -1,198 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.selectors = void 0;
-var _store = require("@base-ui/utils/store");
-var _getInitialReferenceDate = require("../../utils/temporal/getInitialReferenceDate");
-var _validateDate = require("../../utils/temporal/validateDate");
-const timezoneToRenderSelector = (0, _store.createSelectorMemoized)(state => state.adapter, state => state.manager, state => state.value, state => state.timezoneProp, state => state.referenceDateProp, (adapter, manager, value, timezoneProp, referenceDateProp) => {
-  if (timezoneProp != null) {
-    return timezoneProp;
-  }
-  const valueTimezone = manager.getTimezone(value);
-  if (valueTimezone) {
-    return valueTimezone;
-  }
-  if (referenceDateProp) {
-    return adapter.getTimezone(referenceDateProp);
-  }
-  return 'default';
-});
-const validationPropsSelector = (0, _store.createSelectorMemoized)(state => state.minDate, state => state.maxDate, (minDate, maxDate) => ({
-  minDate,
-  maxDate
-}));
-const referenceDateSelector = (0, _store.createSelectorMemoized)(state => state.adapter, timezoneToRenderSelector, state => state.initialReferenceDateFromValue, validationPropsSelector, state => state.referenceDateProp, (adapter, timezone, initialReferenceDateFromValue, validationProps, referenceDateProp) => (0, _getInitialReferenceDate.getInitialReferenceDate)({
-  adapter,
-  timezone,
-  validationProps,
-  externalReferenceDate: referenceDateProp,
-  externalDate: initialReferenceDateFromValue
-}));
-const valueWithTimezoneToRenderSelector = (0, _store.createSelectorMemoized)(timezoneToRenderSelector, state => state.manager, state => state.value, (timezone, manager, value) => manager.setTimezone(value, timezone));
-const selectedDatesSelector = (0, _store.createSelectorMemoized)(state => state.manager, state => state.value, timezoneToRenderSelector, (manager, value, timezone) => manager.getDatesFromValue(value).map(date => {
-  if (manager.getTimezone(date) === timezone) {
-    return date;
-  }
-  return manager.setTimezone(date, timezone);
-}));
-const isDayCellDisabledSelector = (0, _store.createSelector)((state, value) => {
-  if (state.disabled) {
-    return true;
-  }
-  const validationError = (0, _validateDate.validateDate)({
-    adapter: state.adapter,
-    value,
-    validationProps: validationPropsSelector(state)
-  });
-  return validationError != null;
-});
-const isDayCellUnavailableSelector = (0, _store.createSelector)((state, value) => state.isDateUnavailable?.(value) ?? false);
-const isDayButtonSelectedSelector = (0, _store.createSelector)(state => state.adapter, selectedDatesSelector, (adapter, selectedDates, cellValue) => {
-  return selectedDates.some(date => adapter.isSameDay(cellValue, date));
-});
-const isSetMonthButtonDisabledSelector = (0, _store.createSelector)(state => state.adapter, validationPropsSelector, state => state.disabled, (adapter, validationProps, isCalendarDisabled, targetDate, disabledProp) => {
-  // short-circuit if the disabled prop is explicitly provided.
-  if (disabledProp !== undefined) {
-    return disabledProp;
-  }
-  if (isCalendarDisabled) {
-    return true;
-  }
-
-  // The month targeted and all the months before are fully disabled, we disable the button.
-  if (validationProps.minDate != null && adapter.isBefore(adapter.endOfMonth(targetDate), validationProps.minDate)) {
-    return true;
-  }
-
-  // The month targeted and all the months after are fully disabled, we disable the button.
-  return validationProps.maxDate != null && adapter.isAfter(adapter.startOfMonth(targetDate), validationProps.maxDate);
-});
-const visibleDateSelector = (0, _store.createSelectorMemoized)(state => state.visibleDateProp, state => state.visibleDate, state => state.adapter, timezoneToRenderSelector, (visibleDateProp, visibleDate, adapter, timezone) => adapter.setTimezone(visibleDateProp ?? visibleDate, timezone));
-const visibleMonthSelector = (0, _store.createSelectorMemoized)(state => state.adapter, visibleDateSelector, (adapter, date) => adapter.startOfMonth(date));
-const isValueInvalidSelector = (0, _store.createSelectorMemoized)(state => state.manager, state => state.invalidProp, valueWithTimezoneToRenderSelector, validationPropsSelector, (manager, invalidProp, value, validationProps) => {
-  if (invalidProp != null) {
-    return invalidProp;
-  }
-  const error = manager.getValidationError(value, validationProps);
-  return !manager.isValidationErrorEmpty(error);
-});
-const rootElementStateSelector = (0, _store.createSelectorMemoized)(state => state.manager, state => state.readOnly, state => state.disabled, state => state.navigationDirection, isValueInvalidSelector, valueWithTimezoneToRenderSelector, (manager, readOnly, disabled, navigationDirection, invalid, value) => ({
-  empty: manager.areValuesEqual(value, manager.emptyValue),
-  invalid,
-  disabled,
-  readOnly,
-  navigationDirection
-}));
-const publicContextSelector = (0, _store.createSelectorMemoized)(visibleDateSelector, visibleDate => ({
-  visibleDate
-}));
-const getMonthKey = (adapter, date) => `${adapter.getYear(date)}-${adapter.getMonth(date)}`;
-const getDateKey = (adapter, date) => adapter.getTime(date);
-const tabbableCellsPerMonthSelector = (0, _store.createSelectorMemoized)(state => state.adapter, selectedDatesSelector, referenceDateSelector, (adapter, selectedDates, referenceDate) => {
-  const months = new Map();
-
-  // Each month that contains selected dates has these selected dates as tabbable cells.
-  for (const date of selectedDates) {
-    const monthKey = getMonthKey(adapter, date);
-    if (!months.has(monthKey)) {
-      months.set(monthKey, new Set());
-    }
-    months.get(monthKey).add(getDateKey(adapter, date));
-  }
-
-  // If the month containing the reference dates has no selected dates, then the reference date will be tabbable in this month.
-  const referenceDateMonthKey = getMonthKey(adapter, referenceDate);
-  if (!months.has(referenceDateMonthKey)) {
-    months.set(referenceDateMonthKey, new Set([getDateKey(adapter, referenceDate)]));
-  }
-  return months;
-});
-const isDayButtonTabbableSelector = (0, _store.createSelector)(tabbableCellsPerMonthSelector, state => state.adapter, (tabbableCellsPerMonth, adapter, date, month) => {
-  // If the date is not in the current month, it cannot be tabbable.
-  if (!adapter.isSameMonth(date, month)) {
-    return false;
-  }
-  const monthKey = getMonthKey(adapter, date);
-
-  // If the month has registered tabbable cells, we check if the date is one of them.
-  if (tabbableCellsPerMonth.has(monthKey)) {
-    const dateKey = getDateKey(adapter, date);
-    return tabbableCellsPerMonth.get(monthKey).has(dateKey);
-  }
-
-  // Otherwise, only the first day of the month is tabbable.
-  const firstDayOfMonth = adapter.startOfMonth(date);
-  return adapter.isSameDay(date, firstDayOfMonth);
-});
-const selectors = exports.selectors = {
-  /**
-   * Returns the timezone to use for rendering.
-   */
-  timezoneToRender: timezoneToRenderSelector,
-  /**
-   * Returns the state of the root element.
-   */
-  rootElementState: rootElementStateSelector,
-  /**
-   * Returns the context to publicly expose in render functions and hooks.
-   */
-  publicContext: publicContextSelector,
-  /**
-   * Returns the props to check if a date is valid or not.
-   */
-  validationProps: validationPropsSelector,
-  /**
-   * Returns the amount of months to navigate by when pressing `<Calendar.IncrementMonth>` or `<Calendar.DecrementMonth>`.
-   */
-  monthPageSize: (0, _store.createSelector)(state => state.monthPageSize),
-  /**
-   * Returns the date currently visible.
-   */
-  visibleDate: visibleDateSelector,
-  /**
-   * Returns the current visible month.
-   */
-  visibleMonth: visibleMonthSelector,
-  /**
-   * Returns the navigation direction.
-   */
-  navigationDirection: (0, _store.createSelector)(state => state.navigationDirection),
-  /**
-   * Returns the current value with the timezone to render applied.
-   */
-  valueWithTimezoneToRender: valueWithTimezoneToRenderSelector,
-  /**
-   * Returns the reference date.
-   */
-  referenceDate: referenceDateSelector,
-  /**
-   * 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: selectedDatesSelector,
-  /**
-   * Checks if a day cell should be disabled.
-   */
-  isDayCellDisabled: isDayCellDisabledSelector,
-  /**
-   * Checks if a day cell should be selected.
-   */
-  isDayButtonSelected: isDayButtonSelectedSelector,
-  /**
-   * Checks if a specific dates is unavailable.
-   * If so, this date should not be selectable but should still be focusable with the keyboard.
-   */
-  isDayCellUnavailable: isDayCellUnavailableSelector,
-  /**
-   * Checks if a month navigation button should be disabled.
-   */
-  isSetMonthButtonDisabled: isSetMonthButtonDisabledSelector,
-  /**
-   * Checks if a day should be reachable using tab navigation.
-   */
-  isDayButtonTabbable: isDayButtonTabbableSelector
-};

package/calendar/use-context/CalendarContext.d.ts

@@ -1,6 +0,0 @@
-import { useSharedCalendarRootContext } from "../root/SharedCalendarRootContext.js";
-import { selectors } from "../store/index.js";
-export type CalendarContext = ReturnType<typeof selectors.publicContext> & {
-  setVisibleDate: ReturnType<typeof useSharedCalendarRootContext>['setVisibleDate'];
-};
-export declare function useCalendarContext(): CalendarContext;

package/calendar/use-context/CalendarContext.js

@@ -1,20 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCalendarContext = useCalendarContext;
-var React = _interopRequireWildcard(require("react"));
-var _store = require("@base-ui/utils/store");
-var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
-var _store2 = require("../store");
-function useCalendarContext() {
-  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
-  const calendarPublicContext = (0, _store.useStore)(store, _store2.selectors.publicContext);
-  return React.useMemo(() => ({
-    ...calendarPublicContext,
-    setVisibleDate: store.setVisibleDate
-  }), [calendarPublicContext, store.setVisibleDate]);
-}

package/calendar/use-day-list/getDayList.d.ts

@@ -1,9 +0,0 @@
-import { TemporalAdapter, TemporalSupportedObject } from "../../types/temporal/index.js";
-/**
- * Computes a list of consecutive days starting from the given date.
- * This is a pure function — no React hooks required.
- */
-export declare function getDayList(adapter: TemporalAdapter, params: {
-  date: TemporalSupportedObject;
-  amount: number;
-}): TemporalSupportedObject[];

package/calendar/use-day-list/getDayList.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDayList = getDayList;
-/**
- * Computes a list of consecutive days starting from the given date.
- * This is a pure function — no React hooks required.
- */
-function getDayList(adapter, params) {
-  const {
-    date,
-    amount
-  } = params;
-  if (process.env.NODE_ENV !== 'production') {
-    if (amount <= 0) {
-      throw new Error(`getDayList: The 'amount' parameter must be a positive number, but received ${amount}.`);
-    }
-  }
-  const start = adapter.startOfDay(date);
-  const end = adapter.endOfDay(adapter.addDays(start, amount - 1));
-  let current = start;
-  let currentDayNumber = adapter.getDayOfWeek(current);
-  const days = [];
-  while (adapter.isBefore(current, end)) {
-    days.push(current);
-    const prevDayNumber = currentDayNumber;
-    current = adapter.addDays(current, 1);
-    currentDayNumber = adapter.getDayOfWeek(current);
-
-    // If there is a TZ change at midnight, adding 1 day may only increase the date by 23 hours to 11pm
-    // To fix, bump the date into the next day (add 12 hours) and then revert to the start of the day
-    // See https://github.com/moment/moment/issues/4743#issuecomment-811306874 for context.
-    if (prevDayNumber === currentDayNumber) {
-      current = adapter.startOfDay(adapter.addHours(current, 12));
-    }
-  }
-  return days;
-}

package/calendar/use-day-list/useCalendarDayList.d.ts

@@ -1,12 +0,0 @@
-import { TemporalSupportedObject } from "../../types/temporal/index.js";
-export declare function useCalendarDayList(): UseCalendarDayListReturnValue;
-export type UseCalendarDayListReturnValue = (parameters: {
-  /**
-   * The date to get the weeks in month for.
-   */
-  date: TemporalSupportedObject;
-  /**
-   * The amount of days to return.
-   */
-  amount: number;
-}) => TemporalSupportedObject[];

package/calendar/use-day-list/useCalendarDayList.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCalendarDayList = useCalendarDayList;
-var React = _interopRequireWildcard(require("react"));
-var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
-var _getDayList = require("./getDayList");
-function useCalendarDayList() {
-  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
-  return React.useCallback(params => (0, _getDayList.getDayList)(adapter, params), [adapter]);
-}

package/calendar/use-week-list/getWeekList.d.ts

@@ -1,9 +0,0 @@
-import { TemporalSupportedObject, TemporalAdapter } from "../../types/temporal/index.js";
-/**
- * Computes a list of week-start dates for the given month/date.
- * This is a pure function — no React hooks required.
- */
-export declare function getWeekList(adapter: TemporalAdapter, params: {
-  date: TemporalSupportedObject;
-  amount: number | 'end-of-month';
-}): TemporalSupportedObject[];

package/calendar/use-week-list/getWeekList.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getWeekList = getWeekList;
-/**
- * Computes a list of week-start dates for the given month/date.
- * This is a pure function — no React hooks required.
- */
-function getWeekList(adapter, params) {
-  const {
-    date,
-    amount
-  } = params;
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof amount === 'number' && amount <= 0) {
-      throw new Error(`getWeekList: The 'amount' parameter must be a positive number, but received ${amount}.`);
-    }
-  }
-  const start = adapter.startOfWeek(date);
-  const end = amount === 'end-of-month' ? adapter.endOfWeek(adapter.endOfMonth(date)) : adapter.endOfWeek(adapter.addWeeks(start, amount - 1));
-  let current = start;
-  let currentWeekNumber = adapter.getWeekNumber(current);
-  const weeks = [];
-  while (adapter.isBefore(current, end)) {
-    weeks.push(current);
-    const prevWeekNumber = currentWeekNumber;
-    current = adapter.addWeeks(current, 1);
-    currentWeekNumber = adapter.getWeekNumber(current);
-
-    // If there is a TZ change at midnight, adding 1 week may only increase the date by 6 days and 23 hours to 11pm
-    // To fix, bump the date into the next day (add 12 hours) and then revert to the start of the day
-    // See https://github.com/moment/moment/issues/4743#issuecomment-811306874 for context.
-    if (prevWeekNumber === currentWeekNumber) {
-      current = adapter.startOfDay(adapter.addHours(current, 12));
-    }
-  }
-  return weeks;
-}

package/calendar/use-week-list/useCalendarWeekList.d.ts

@@ -1,17 +0,0 @@
-import { TemporalSupportedObject } from "../../types/temporal/temporal.js";
-export declare function useCalendarWeekList(): UseWeekListReturnValue;
-export type UseWeekListReturnValue = (parameters: UseWeekListReturnValueParameters) => TemporalSupportedObject[];
-interface UseWeekListReturnValueParameters {
-  /**
-   * The date to get the weeks in month for.
-   */
-  date: TemporalSupportedObject;
-  /**
-   * The amount of weeks to return.
-   * When equal to "end-of-month", the method will return all the weeks until the end of the month.
-   * When equal to a number, the method will return that many weeks.
-   * Set it to 6 to create a Gregorian calendar where all months have the same number of weeks.
-   */
-  amount: number | 'end-of-month';
-}
-export {};

package/calendar/use-week-list/useCalendarWeekList.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCalendarWeekList = useCalendarWeekList;
-var React = _interopRequireWildcard(require("react"));
-var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
-var _getWeekList = require("./getWeekList");
-function useCalendarWeekList() {
-  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
-  return React.useCallback(params => (0, _getWeekList.getWeekList)(adapter, params), [adapter]);
-}

package/calendar/utils/computeMonthDayGrid.d.ts

@@ -1,6 +0,0 @@
-import { TemporalSupportedObject, TemporalAdapter } from "../../types/temporal/index.js";
-/**
- * Computes a flat, chronologically ordered array of all days in a month's grid.
- * Composes `getWeekList` and `getDayList` to produce the same result as the rendered grid.
- */
-export declare function computeMonthDayGrid(adapter: TemporalAdapter, month: TemporalSupportedObject, fixedWeekNumber?: number, weeks?: TemporalSupportedObject[]): TemporalSupportedObject[];

package/calendar/utils/computeMonthDayGrid.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.computeMonthDayGrid = computeMonthDayGrid;
-var _getDayList = require("../use-day-list/getDayList");
-var _getWeekList = require("../use-week-list/getWeekList");
-/**
- * Computes a flat, chronologically ordered array of all days in a month's grid.
- * Composes `getWeekList` and `getDayList` to produce the same result as the rendered grid.
- */
-function computeMonthDayGrid(adapter, month, fixedWeekNumber, weeks) {
-  const weeksList = weeks ?? (0, _getWeekList.getWeekList)(adapter, {
-    date: month,
-    amount: fixedWeekNumber ?? 'end-of-month'
-  });
-  return weeksList.flatMap(week => (0, _getDayList.getDayList)(adapter, {
-    date: week,
-    amount: 7
-  }));
-}

package/calendar/utils/useCalendarMonthButton.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import type { SharedCalendarStore } from "../store/SharedCalendarStore.js";
-import type { TemporalSupportedValue, TemporalAdapter } from "../../types/temporal/index.js";
-interface UseCalendarMonthButtonParameters {
-  direction: 1 | -1;
-  disabled: boolean;
-  disabledProp?: boolean | undefined;
-  store: SharedCalendarStore<TemporalSupportedValue, unknown>;
-  adapter: TemporalAdapter;
-  monthPageSize: number;
-}
-/**
- * Adds press-and-hold behavior to Calendar month navigation buttons.
- * On pointer down, performs one navigation immediately, then after a delay
- * starts continuous navigation at a fixed interval.
- */
-export declare function useCalendarMonthButton(params: UseCalendarMonthButtonParameters): {
-  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>;
-  };
-  autoChangeButtonRef: React.RefObject<HTMLElement | null>;
-  shouldSkipClick: (event: React.MouseEvent) => boolean;
-};
-export {};

package/calendar/utils/useCalendarMonthButton.js

@@ -1,53 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCalendarMonthButton = useCalendarMonthButton;
-var React = _interopRequireWildcard(require("react"));
-var _usePressAndHold = require("../../utils/usePressAndHold");
-var _reasons = require("../../utils/reasons");
-var _store = require("../store");
-const CHANGE_MONTH_TICK_DELAY = 100;
-/**
- * Adds press-and-hold behavior to Calendar month navigation buttons.
- * On pointer down, performs one navigation immediately, then after a delay
- * starts continuous navigation at a fixed interval.
- */
-function useCalendarMonthButton(params) {
-  const {
-    direction,
-    disabled,
-    disabledProp,
-    store,
-    adapter,
-    monthPageSize
-  } = params;
-  const autoChangeButtonRef = React.useRef(null);
-  const {
-    pointerHandlers,
-    shouldSkipClick
-  } = (0, _usePressAndHold.usePressAndHold)({
-    disabled,
-    elementRef: autoChangeButtonRef,
-    tickDelay: CHANGE_MONTH_TICK_DELAY,
-    tick(triggerNativeEvent) {
-      const button = autoChangeButtonRef.current;
-      const currentVisibleDate = _store.selectors.visibleDate(store.state);
-      const targetDate = adapter.addMonths(currentVisibleDate, direction * monthPageSize);
-      const wouldBeDisabled = _store.selectors.isSetMonthButtonDisabled(store.state, targetDate, disabledProp);
-      if (wouldBeDisabled) {
-        return false;
-      }
-      store.setVisibleDate(targetDate, triggerNativeEvent, button ?? undefined, _reasons.REASONS.monthChange);
-      return true;
-    }
-  });
-  return {
-    pointerHandlers,
-    autoChangeButtonRef,
-    shouldSkipClick
-  };
-}

package/calendar/viewport/CalendarViewport.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { CalendarNavigationDirection } from "../store/index.js";
-/**
- * A viewport for displaying calendar month transitions.
- * This component is only required if you want to animate certain part of a calendar when navigating between months.
- * The first rendered child element has to handle a ref.
- * Passes `data-current` to the currently visible content and `data-previous` to the previous content when animating between two.
- * Doesn't render its own HTML element.
- *
- * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
- */
-export declare function CalendarViewport({
-  children
-}: CalendarViewport.Props): React.JSX.Element;
-export interface CalendarViewportProps {
-  /**
-   * The content to render inside the transition container.
-   */
-  children: React.JSX.Element;
-}
-export interface CalendarViewportState {
-  /**
-   * Indicates the direction of the navigation (based on the month navigating to).
-   */
-  navigationDirection: CalendarNavigationDirection;
-}
-export declare namespace CalendarViewport {
-  type Props = CalendarViewportProps;
-  type State = CalendarViewportState;
-}