@base-ui/react 1.3.0 → 1.4.0

package/calendar/root/CalendarRoot.js

@@ -0,0 +1,147 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calendarValueManager = exports.CalendarRoot = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@base-ui/utils/store");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var _SharedCalendarRootContext = require("./SharedCalendarRootContext");
+var _getDateManager = require("../../utils/temporal/getDateManager");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _dateHelpers = require("../../utils/temporal/date-helpers");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+var _store2 = require("../store");
+var _CalendarRootDataAttributes = require("./CalendarRootDataAttributes");
+var _jsxRuntime = require("react/jsx-runtime");
+const stateAttributesMapping = {
+  navigationDirection: direction => {
+    if (direction === 'none') {
+      return null;
+    }
+    return {
+      [_CalendarRootDataAttributes.CalendarRootDataAttributes.navigationDirection]: direction
+    };
+  }
+};
+const calendarValueManager = exports.calendarValueManager = {
+  getDateToUseForReferenceDate: value => value,
+  onSelectDate: ({
+    setValue,
+    selectedDate
+  }) => setValue(selectedDate),
+  getActiveDateFromValue: value => value
+};
+
+/**
+ * Groups all parts of the calendar.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+const CalendarRoot = exports.CalendarRoot = /*#__PURE__*/React.forwardRef(function CalendarRoot(componentProps, forwardedRef) {
+  const {
+    // Rendering props
+    className,
+    render,
+    // Form props
+    readOnly,
+    disabled,
+    invalid,
+    // Focus and navigation props
+    monthPageSize,
+    // Value props
+    onValueChange,
+    defaultValue,
+    value,
+    timezone,
+    referenceDate,
+    // Visible date props
+    onVisibleDateChange,
+    visibleDate,
+    defaultVisibleDate,
+    // Children
+    children,
+    // Validation props
+    minDate,
+    maxDate,
+    isDateUnavailable,
+    // Accessibility props
+    'aria-label': ariaLabelProp,
+    // Props forwarded to the DOM element
+    style,
+    ...elementProps
+  } = componentProps;
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const manager = React.useMemo(() => (0, _getDateManager.getDateManager)(adapter), [adapter]);
+  const store = (0, _useRefWithInit.useRefWithInit)(() => new _store2.SharedCalendarStore({
+    readOnly,
+    disabled,
+    invalid,
+    monthPageSize,
+    onValueChange,
+    defaultValue,
+    value,
+    timezone,
+    referenceDate,
+    onVisibleDateChange,
+    visibleDate,
+    defaultVisibleDate,
+    isDateUnavailable,
+    minDate,
+    maxDate
+  }, adapter, manager, calendarValueManager)).current;
+  store.useControlledProp('valueProp', value);
+  store.useControlledProp('visibleDateProp', visibleDate);
+  store.useContextCallback('onValueChange', onValueChange);
+  store.useContextCallback('onVisibleDateChange', onVisibleDateChange);
+  store.useSyncedValues({
+    adapter,
+    manager,
+    timezoneProp: timezone,
+    referenceDateProp: referenceDate ?? null,
+    minDate,
+    maxDate,
+    isDateUnavailable,
+    disabled: disabled ?? false,
+    readOnly: readOnly ?? false,
+    invalidProp: invalid,
+    monthPageSize: monthPageSize ?? 1
+  });
+  const visibleMonth = (0, _store.useStore)(store, _store2.selectors.visibleMonth);
+  const state = (0, _store.useStore)(store, _store2.selectors.rootElementState);
+  const publicContext = (0, _store.useStore)(store, _store2.selectors.publicContext);
+  const resolvedChildren = React.useMemo(() => {
+    if (! /*#__PURE__*/React.isValidElement(children) && typeof children === 'function') {
+      return children({
+        ...publicContext,
+        setVisibleDate: store.setVisibleDate
+      });
+    }
+    return children;
+  }, [children, publicContext, store.setVisibleDate]);
+
+  // TODO: Improve localization support (right now it doesn't work well with RTL languages)
+  const ariaLabel = React.useMemo(() => {
+    const formattedVisibleMonth = (0, _dateHelpers.formatMonthFullLetterAndYear)(adapter, visibleMonth);
+    const prefix = ariaLabelProp ? `${ariaLabelProp}, ` : '';
+    return `${prefix}${formattedVisibleMonth}`;
+  }, [adapter, ariaLabelProp, visibleMonth]);
+  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      children: resolvedChildren,
+      'aria-label': ariaLabel
+    }, elementProps],
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharedCalendarRootContext.SharedCalendarRootContext.Provider, {
+    value: store,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") CalendarRoot.displayName = "CalendarRoot";

package/calendar/root/CalendarRootDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum CalendarRootDataAttributes {
+  /**
+   * Present when the current value is empty.
+   */
+  empty = "data-empty",
+  /**
+   * Present when the current value is invalid (fails validation).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the calendar is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the calendar is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Indicates the direction of the navigation (based on the month navigating to).
+   * @type {'previous' | 'next' | 'none'}
+   */
+  navigationDirection = "data-navigation-direction",
+}

package/calendar/root/CalendarRootDataAttributes.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarRootDataAttributes = void 0;
+let CalendarRootDataAttributes = exports.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/calendar/root/SharedCalendarRootContext.d.ts

@@ -0,0 +1,5 @@
+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/calendar/root/SharedCalendarRootContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SharedCalendarRootContext = void 0;
+exports.useSharedCalendarRootContext = useSharedCalendarRootContext;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+const SharedCalendarRootContext = exports.SharedCalendarRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SharedCalendarRootContext.displayName = "SharedCalendarRootContext";
+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 />.' : (0, _formatErrorMessage2.default)(97));
+  }
+  return context;
+}

package/calendar/store/SharedCalendarState.d.ts

@@ -0,0 +1,78 @@
+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/calendar/store/SharedCalendarState.js

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

package/calendar/store/SharedCalendarStore.d.ts

@@ -0,0 +1,144 @@
+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/calendar/store/SharedCalendarStore.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SharedCalendarStore = void 0;
+var _store = require("@base-ui/utils/store");
+var _getInitialReferenceDate = require("../../utils/temporal/getInitialReferenceDate");
+var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _dateHelpers = require("../../utils/temporal/date-helpers");
+var _selectors = require("./selectors");
+var _reasons = require("../../utils/reasons");
+/**
+ * Store managing the state of the Calendar and the Range Calendar components.
+ */
+class SharedCalendarStore extends _store.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 = (0, _getInitialReferenceDate.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.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 = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason ?? _reasons.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.selectors.referenceDate(this.state);
+    const activeDate = this.valueManager.getActiveDateFromValue(this.state.value) ?? referenceDate;
+    const cleanSelectedDate = (0, _dateHelpers.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 = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.dayPress, event.nativeEvent, event.currentTarget, {
+      getValidationError: () => this.state.manager.getValidationError(newValueWithInputTimezone, _selectors.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;
+  }
+}
+exports.SharedCalendarStore = SharedCalendarStore;

package/calendar/store/index.d.ts

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

package/calendar/store/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SharedCalendarStore = require("./SharedCalendarStore");
+Object.keys(_SharedCalendarStore).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SharedCalendarStore[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SharedCalendarStore[key];
+    }
+  });
+});
+var _SharedCalendarState = require("./SharedCalendarState");
+Object.keys(_SharedCalendarState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SharedCalendarState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SharedCalendarState[key];
+    }
+  });
+});
+var _selectors = require("./selectors");
+Object.keys(_selectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectors[key];
+    }
+  });
+});