@mui/x-date-pickers 9.0.0-alpha.1 → 9.0.0-alpha.2

package/TimePicker/shared.d.mts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TimeClockSlots, TimeClockSlotProps } from "../TimeClock/TimeClock.types.mjs";
+import { BasePickerInputProps } from "../internals/models/props/basePickerProps.mjs";
+import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.mjs";
+import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from "./TimePickerToolbar.mjs";
+import { TimeValidationError } from "../models/index.mjs";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.mjs";
+import { TimeViewRendererProps } from "../timeViewRenderers/index.mjs";
+import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.mjs";
+import { PickerValue, TimeViewWithMeridiem } from "../internals/models/index.mjs";
+import { ValidateTimePropsToDefault } from "../validation/validateTime.mjs";
+export interface BaseTimePickerSlots extends TimeClockSlots {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<TimePickerToolbarProps>;
+}
+export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
+  toolbar?: ExportedTimePickerToolbarProps;
+}
+export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>>;
+export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, TimeValidationError>, ExportedBaseClockProps {
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseTimePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<TimePickerViewRenderers<TView>>;
+}
+type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | ValidateTimePropsToDefault>>;
+export declare function useTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TView, Props>;
+export {};

package/TimePicker/shared.mjs

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useThemeProps } from '@mui/material/styles';
+import { TimePickerToolbar } from "./TimePickerToolbar.mjs";
+import { applyDefaultViewProps } from "../internals/utils/views.mjs";
+import { useApplyDefaultValuesToTimeValidationProps } from "../managers/useTimeManager.mjs";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.mjs";
+export function useTimePickerDefaultizedProps(props, name) {
+  const adapter = usePickerAdapter();
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  const validationProps = useApplyDefaultValuesToTimeValidationProps(themeProps);
+  const ampm = themeProps.ampm ?? adapter.is12HourCycleInCurrentLocale();
+  const localeText = React.useMemo(() => {
+    if (themeProps.localeText?.toolbarTitle == null) {
+      return themeProps.localeText;
+    }
+    return _extends({}, themeProps.localeText, {
+      timePickerToolbarTitle: themeProps.localeText.toolbarTitle
+    });
+  }, [themeProps.localeText]);
+  return _extends({}, themeProps, validationProps, {
+    ampm,
+    localeText
+  }, applyDefaultViewProps({
+    views: themeProps.views,
+    openTo: themeProps.openTo,
+    defaultViews: ['hours', 'minutes'],
+    defaultOpenTo: 'hours'
+  }), {
+    slots: _extends({
+      toolbar: TimePickerToolbar
+    }, themeProps.slots),
+    slotProps: _extends({}, themeProps.slotProps, {
+      toolbar: _extends({
+        ampm,
+        ampmInClock: themeProps.ampmInClock
+      }, themeProps.slotProps?.toolbar)
+    })
+  });
+}

package/YearCalendar/YearCalendar.d.mts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { YearCalendarProps } from "./YearCalendar.types.mjs";
+type YearCalendarComponent = ((props: YearCalendarProps) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ *
+ * API:
+ *
+ * - [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/)
+ */
+export declare const YearCalendar: YearCalendarComponent;
+export {};

package/YearCalendar/YearCalendar.mjs

@@ -0,0 +1,420 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "readOnly", "shouldDisableYear", "disableHighlightToday", "onYearFocus", "hasFocus", "onFocusedViewChange", "yearsOrder", "yearsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import useControlled from '@mui/utils/useControlled';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { YearCalendarButton } from "./YearCalendarButton.mjs";
+import { useNow } from "../internals/hooks/useUtils.mjs";
+import { getYearCalendarUtilityClass } from "./yearCalendarClasses.mjs";
+import { singleItemValueManager } from "../internals/utils/valueManagers.mjs";
+import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.mjs";
+import { useControlledValue } from "../internals/hooks/useControlledValue.mjs";
+import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from "../internals/constants/dimensions.mjs";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.mjs";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.mjs";
+import { usePickerAdapter } from "../hooks/usePickerAdapter.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getYearCalendarUtilityClass, classes);
+};
+function useYearCalendarDefaultizedProps(props, name) {
+  const themeProps = useThemeProps({
+    props,
+    name
+  });
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
+    yearsPerRow: themeProps.yearsPerRow ?? 3,
+    yearsOrder: themeProps.yearsOrder ?? 'asc'
+  });
+}
+const YearCalendarRoot = styled('div', {
+  name: 'MuiYearCalendar',
+  slot: 'Root',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'yearsPerRow'
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-evenly',
+  rowGap: 12,
+  padding: '6px 0',
+  overflowY: 'auto',
+  height: '100%',
+  width: DIALOG_WIDTH,
+  maxHeight: MAX_CALENDAR_HEIGHT,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box',
+  position: 'relative',
+  variants: [{
+    props: {
+      yearsPerRow: 3
+    },
+    style: {
+      columnGap: 24
+    }
+  }, {
+    props: {
+      yearsPerRow: 4
+    },
+    style: {
+      columnGap: 0,
+      padding: '0 2px'
+    }
+  }]
+});
+const YearCalendarButtonFiller = styled('div', {
+  name: 'MuiYearCalendar',
+  slot: 'ButtonFiller'
+})({
+  height: 36,
+  width: 72
+});
+/**
+ * Demos:
+ *
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
+ *
+ * API:
+ *
+ * - [YearCalendar API](https://mui.com/x/api/date-pickers/year-calendar/)
+ */
+export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(inProps, ref) {
+  const props = useYearCalendarDefaultizedProps(inProps, 'MuiYearCalendar');
+  const {
+      autoFocus,
+      className,
+      classes: classesProp,
+      value: valueProp,
+      defaultValue,
+      referenceDate: referenceDateProp,
+      disabled,
+      disableFuture,
+      disablePast,
+      maxDate,
+      minDate,
+      onChange,
+      readOnly,
+      shouldDisableYear,
+      onYearFocus,
+      hasFocus,
+      onFocusedViewChange,
+      yearsOrder,
+      yearsPerRow,
+      timezone: timezoneProp,
+      gridLabelId,
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    value,
+    handleValueChange,
+    timezone
+  } = useControlledValue({
+    name: 'YearCalendar',
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    referenceDate: referenceDateProp,
+    onChange,
+    valueManager: singleItemValueManager
+  });
+  const now = useNow(timezone);
+  const isRtl = useRtl();
+  const adapter = usePickerAdapter();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
+  const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
+    value,
+    adapter,
+    props,
+    timezone,
+    referenceDate: referenceDateProp,
+    granularity: SECTION_TYPE_GRANULARITY.year
+  }), [] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const classes = useUtilityClasses(classesProp);
+  const todayYear = React.useMemo(() => adapter.getYear(now), [adapter, now]);
+  const selectedYear = React.useMemo(() => {
+    if (value != null) {
+      return adapter.getYear(value);
+    }
+    return null;
+  }, [value, adapter]);
+  const [focusedYear, setFocusedYear] = React.useState(() => selectedYear || adapter.getYear(referenceDate));
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
+    name: 'YearCalendar',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus ?? false
+  });
+  const changeHasFocus = useEventCallback(newHasFocus => {
+    setInternalHasFocus(newHasFocus);
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  });
+  const isYearDisabled = React.useCallback(dateToValidate => {
+    if (disablePast && adapter.isBeforeYear(dateToValidate, now)) {
+      return true;
+    }
+    if (disableFuture && adapter.isAfterYear(dateToValidate, now)) {
+      return true;
+    }
+    if (minDate && adapter.isBeforeYear(dateToValidate, minDate)) {
+      return true;
+    }
+    if (maxDate && adapter.isAfterYear(dateToValidate, maxDate)) {
+      return true;
+    }
+    if (!shouldDisableYear) {
+      return false;
+    }
+    const yearToValidate = adapter.startOfYear(dateToValidate);
+    return shouldDisableYear(yearToValidate);
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, adapter]);
+  const handleYearSelection = useEventCallback((_event, year) => {
+    if (readOnly) {
+      return;
+    }
+    const newDate = adapter.setYear(value ?? referenceDate, year);
+    handleValueChange(newDate);
+  });
+  const focusYear = useEventCallback(year => {
+    if (!isYearDisabled(adapter.setYear(value ?? referenceDate, year))) {
+      setFocusedYear(year);
+      changeHasFocus(true);
+      onYearFocus?.(year);
+    }
+  });
+  React.useEffect(() => {
+    setFocusedYear(prevFocusedYear => selectedYear !== null && prevFocusedYear !== selectedYear ? selectedYear : prevFocusedYear);
+  }, [selectedYear]);
+  const verticalDirection = yearsOrder !== 'desc' ? yearsPerRow * 1 : yearsPerRow * -1;
+  const horizontalDirection = isRtl && yearsOrder === 'asc' || !isRtl && yearsOrder === 'desc' ? -1 : 1;
+  const handleKeyDown = useEventCallback((event, year) => {
+    switch (event.key) {
+      case 'ArrowUp':
+        focusYear(year - verticalDirection);
+        event.preventDefault();
+        break;
+      case 'ArrowDown':
+        focusYear(year + verticalDirection);
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        focusYear(year - horizontalDirection);
+        event.preventDefault();
+        break;
+      case 'ArrowRight':
+        focusYear(year + horizontalDirection);
+        event.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+        handleYearSelection(event, year);
+        event.preventDefault();
+        break;
+      default:
+        break;
+    }
+  });
+  const handleYearFocus = useEventCallback((event, year) => {
+    focusYear(year);
+  });
+  const handleYearBlur = useEventCallback((event, year) => {
+    if (focusedYear === year) {
+      changeHasFocus(false);
+    }
+  });
+  const scrollerRef = React.useRef(null);
+  const handleRef = useForkRef(ref, scrollerRef);
+  React.useEffect(() => {
+    if (autoFocus || scrollerRef.current === null) {
+      return;
+    }
+    const tabbableButton = scrollerRef.current.querySelector('[tabindex="0"]');
+    if (!tabbableButton) {
+      return;
+    }
+
+    // Taken from useScroll in x-data-grid, but vertically centered
+    const offsetHeight = tabbableButton.offsetHeight;
+    const offsetTop = tabbableButton.offsetTop;
+    const clientHeight = scrollerRef.current.clientHeight;
+    const scrollTop = scrollerRef.current.scrollTop;
+    const elementBottom = offsetTop + offsetHeight;
+    if (offsetHeight > clientHeight || offsetTop < scrollTop) {
+      // Button already visible
+      return;
+    }
+    scrollerRef.current.scrollTop = elementBottom - clientHeight / 2 - offsetHeight / 2;
+  }, [autoFocus]);
+  const yearRange = adapter.getYearRange([minDate, maxDate]);
+  if (yearsOrder === 'desc') {
+    yearRange.reverse();
+  }
+  let fillerAmount = yearsPerRow - yearRange.length % yearsPerRow;
+  if (fillerAmount === yearsPerRow) {
+    fillerAmount = 0;
+  }
+  return /*#__PURE__*/_jsxs(YearCalendarRoot, _extends({
+    ref: handleRef,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    role: "radiogroup",
+    "aria-labelledby": gridLabelId,
+    yearsPerRow: yearsPerRow
+  }, other, {
+    children: [yearRange.map(year => {
+      const yearNumber = adapter.getYear(year);
+      const isSelected = yearNumber === selectedYear;
+      const isDisabled = disabled || isYearDisabled(year);
+      return /*#__PURE__*/_jsx(YearCalendarButton, {
+        selected: isSelected,
+        value: yearNumber,
+        onClick: handleYearSelection,
+        onKeyDown: handleKeyDown,
+        autoFocus: internalHasFocus && yearNumber === focusedYear,
+        disabled: isDisabled,
+        tabIndex: yearNumber === focusedYear && !isDisabled ? 0 : -1,
+        onFocus: handleYearFocus,
+        onBlur: handleYearBlur,
+        "aria-current": todayYear === yearNumber ? 'date' : undefined,
+        slots: slots,
+        slotProps: slotProps,
+        classes: classesProp,
+        children: adapter.format(year, 'year')
+      }, adapter.format(year, 'year'));
+    }), Array.from({
+      length: fillerAmount
+    }, (_, index) => /*#__PURE__*/_jsx(YearCalendarButtonFiller, {}, index))]
+  }));
+});
+if (process.env.NODE_ENV !== "production") YearCalendar.displayName = "YearCalendar";
+process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  className: PropTypes.string,
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue: PropTypes.object,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: PropTypes.bool,
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday: PropTypes.bool,
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: PropTypes.bool,
+  gridLabelId: PropTypes.string,
+  hasFocus: PropTypes.bool,
+  /**
+   * Maximal selectable date.
+   * @default 2099-12-31
+   */
+  maxDate: PropTypes.object,
+  /**
+   * Minimal selectable date.
+   * @default 1900-01-01
+   */
+  minDate: PropTypes.object,
+  /**
+   * Callback fired when the value changes.
+   * @param {PickerValidDate} value The new value.
+   */
+  onChange: PropTypes.func,
+  onFocusedViewChange: PropTypes.func,
+  onYearFocus: PropTypes.func,
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
+   */
+  referenceDate: PropTypes.object,
+  /**
+   * Disable specific year.
+   * @param {PickerValidDate} year The year to test.
+   * @returns {boolean} If `true`, the year will be disabled.
+   */
+  shouldDisableYear: PropTypes.func,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documentation} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: PropTypes.string,
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value: PropTypes.object,
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow: PropTypes.oneOf([3, 4])
+} : void 0;

package/YearCalendar/YearCalendar.types.d.mts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { YearCalendarClasses } from "./yearCalendarClasses.mjs";
+import { BaseDateValidationProps, YearValidationProps } from "../internals/models/validation.mjs";
+import { PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.mjs";
+import { FormProps } from "../internals/models/formProps.mjs";
+export interface YearButtonOwnerState extends PickerOwnerState {
+  isYearSelected: boolean;
+  isYearDisabled: boolean;
+}
+export interface YearCalendarSlots {
+  /**
+   * Button displayed to render a single year in the `year` view.
+   * @default YearCalendarButton
+   */
+  yearButton?: React.ElementType;
+}
+export interface YearCalendarSlotProps {
+  yearButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
+    sx: SxProps;
+  }, {}, YearButtonOwnerState>;
+}
+export interface ExportedYearCalendarProps {
+  /**
+   * Years are displayed in ascending (chronological) order by default.
+   * If `desc`, years are displayed in descending order.
+   * @default 'asc'
+   */
+  yearsOrder?: 'asc' | 'desc';
+  /**
+   * Years rendered per row.
+   * @default 3
+   */
+  yearsPerRow?: 3 | 4;
+}
+export interface YearCalendarProps extends ExportedYearCalendarProps, YearValidationProps, BaseDateValidationProps, TimezoneProps, FormProps {
+  autoFocus?: boolean;
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<YearCalendarClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: YearCalendarSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: YearCalendarSlotProps;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value?: PickerValidDate | null;
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue?: PickerValidDate | null;
+  /**
+   * The date used to generate the new value when both `value` and `defaultValue` are empty.
+   * @default The closest valid year using the validation props, except callbacks such as `shouldDisableYear`.
+   */
+  referenceDate?: PickerValidDate;
+  /**
+   * Callback fired when the value changes.
+   * @param {PickerValidDate} value The new value.
+   */
+  onChange?: (value: PickerValidDate) => void;
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  onYearFocus?: (year: number) => void;
+  hasFocus?: boolean;
+  onFocusedViewChange?: (hasFocus: boolean) => void;
+  gridLabelId?: string;
+}

package/YearCalendar/YearCalendarButton.d.mts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { YearCalendarSlotProps, YearCalendarSlots } from "./YearCalendar.types.mjs";
+import { YearCalendarClasses } from "./yearCalendarClasses.mjs";
+export interface YearCalendarButtonProps {
+  value: number;
+  tabIndex: number;
+  selected: boolean;
+  disabled: boolean;
+  autoFocus: boolean;
+  classes: Partial<YearCalendarClasses> | undefined;
+  slots: YearCalendarSlots | undefined;
+  slotProps: YearCalendarSlotProps | undefined;
+  'aria-current': React.AriaAttributes['aria-current'];
+  children: React.ReactNode;
+  onClick: (event: React.MouseEvent, year: number) => void;
+  onKeyDown: (event: React.KeyboardEvent, year: number) => void;
+  onFocus: (event: React.FocusEvent, year: number) => void;
+  onBlur: (event: React.FocusEvent, year: number) => void;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const YearCalendarButton: React.NamedExoticComponent<YearCalendarButtonProps>;