@mantine/dates 7.16.3 → 8.0.0-alpha.0

package/lib/components/YearLevel/YearLevel.d.ts

@@ -1,10 +1,11 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateLabelFormat, DateStringValue } from '../../types';
 import { CalendarHeaderSettings, CalendarHeaderStylesNames } from '../CalendarHeader';
 import { MonthsListSettings, MonthsListStylesNames } from '../MonthsList';
 export type YearLevelStylesNames = MonthsListStylesNames | CalendarHeaderStylesNames;
 export interface YearLevelBaseSettings extends MonthsListSettings {
-    /** Dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY" */
-    yearLabelFormat?: string | ((year: Date) => React.ReactNode);
+    /** dayjs label format to display year label or a function that returns year label based on year value, `"YYYY"` by default */
+    yearLabelFormat?: DateLabelFormat;
 }
 export interface YearLevelSettings extends YearLevelBaseSettings, CalendarHeaderSettings {
 }
@@ -12,9 +13,9 @@ export interface YearLevelProps extends BoxProps, YearLevelSettings, Omit<Styles
     classNames?: Partial<Record<string, string>>;
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
-    /** Year that is currently displayed */
-    year: Date;
-    /** Aria-label for change level control */
+    /** Displayed year value in `YYYY-MM-DD` format */
+    year: DateStringValue;
+    /** `aria-label` for change level control */
     levelControlAriaLabel?: string;
 }
 export type YearLevelFactory = Factory<{

package/lib/components/YearLevelGroup/YearLevelGroup.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
+import { DateStringValue } from '../../types';
 import { LevelsGroupStylesNames } from '../LevelsGroup';
 import { YearLevelSettings, YearLevelStylesNames } from '../YearLevel';
 export type YearLevelGroupStylesNames = YearLevelStylesNames | LevelsGroupStylesNames;
@@ -6,12 +7,12 @@ export interface YearLevelGroupProps extends BoxProps, Omit<YearLevelSettings, '
     classNames?: Partial<Record<string, string>>;
     styles?: Partial<Record<string, React.CSSProperties>>;
     __staticSelector?: string;
-    /** Number of columns to render next to each other */
+    /** Number of columns displayed next to each other */
     numberOfColumns?: number;
-    /** Year that is currently displayed */
-    year: Date;
-    /** Function that returns level control aria-label based on year date */
-    levelControlAriaLabel?: ((year: Date) => string) | string;
+    /** Displayed year */
+    year: DateStringValue;
+    /** Function that returns level control `aria-label` */
+    levelControlAriaLabel?: ((year: DateStringValue) => string) | string;
 }
 export type YearLevelGroupFactory = Factory<{
     props: YearLevelGroupProps;

package/lib/components/YearPicker/YearPicker.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
-import { DatePickerType, PickerBaseProps } from '../../types';
+import { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
 import { CalendarBaseProps } from '../Calendar';
 import { DecadeLevelBaseSettings } from '../DecadeLevel';
 import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
@@ -8,7 +8,7 @@ export interface YearPickerBaseProps<Type extends DatePickerType = 'default'> ex
 }
 export interface YearPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, YearPickerBaseProps<Type>, StylesApiProps<YearPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     /** Called when year is selected */
-    onYearSelect?: (date: Date) => void;
+    onYearSelect?: (date: DateStringValue) => void;
 }
 export type YearPickerFactory = Factory<{
     props: YearPickerProps;

package/lib/components/YearPickerInput/YearPickerInput.d.ts

@@ -4,7 +4,7 @@ import { DateInputSharedProps } from '../PickerInputBase';
 import { YearPickerBaseProps, YearPickerStylesNames } from '../YearPicker';
 export type YearPickerInputStylesNames = __InputStylesNames | 'placeholder' | YearPickerStylesNames;
 export interface YearPickerInputProps<Type extends DatePickerType = 'default'> extends BoxProps, DateInputSharedProps, YearPickerBaseProps<Type>, StylesApiProps<YearPickerInputFactory> {
-    /** Dayjs format to display input value, "YYYY" by default  */
+    /** day format to display input value, `"YYYY"` by default  */
     valueFormat?: string;
 }
 export type YearPickerInputFactory = Factory<{

package/lib/components/YearsList/YearsList.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
-import { ControlsGroupSettings } from '../../types';
+import { ControlsGroupSettings, DateStringValue } from '../../types';
 import { PickerControlProps } from '../PickerControl';
 export type YearsListStylesNames = 'yearsListControl' | 'yearsList' | 'yearsListCell' | 'yearsListRow';
 export interface YearsListSettings extends ControlsGroupSettings {
@@ -7,19 +7,19 @@ export interface YearsListSettings extends ControlsGroupSettings {
     __preventFocus?: boolean;
     /** Determines whether propagation for Escape key should be stopped */
     __stopPropagation?: boolean;
-    /** Dayjs format for years list, `'YYYY'` by default  */
+    /** dayjs format for years list, `'YYYY'` by default  */
     yearsListFormat?: string;
-    /** Adds props to year picker control based on date */
-    getYearControlProps?: (date: Date) => Partial<PickerControlProps>;
+    /** Passes props down to year picker control based on date */
+    getYearControlProps?: (date: DateStringValue) => Partial<PickerControlProps>;
     /** Component size */
     size?: MantineSize;
-    /** Determines whether controls should be separated by spacing, true by default */
+    /** Determines whether controls should be separated, `true` by default */
     withCellSpacing?: boolean;
 }
 export interface YearsListProps extends BoxProps, YearsListSettings, StylesApiProps<YearsListFactory>, ElementProps<'table'> {
     __staticSelector?: string;
-    /** Decade for which years list should be displayed */
-    decade: Date;
+    /** Decade value to display */
+    decade: DateStringValue;
 }
 export type YearsListFactory = Factory<{
     props: YearsListProps;

package/lib/components/YearsList/get-year-in-tab-order/get-year-in-tab-order.d.ts

@@ -1,2 +1,10 @@
+import { DateStringValue } from '../../../types';
 import { PickerControlProps } from '../../PickerControl';
-export declare function getYearInTabOrder(years: Date[][], minDate: Date | undefined, maxDate: Date | undefined, getYearControlProps: ((year: Date) => Partial<PickerControlProps>) | undefined): Date;
+interface GetYearInTabOrderInput {
+    years: DateStringValue[][];
+    minDate: DateStringValue | Date | undefined;
+    maxDate: DateStringValue | Date | undefined;
+    getYearControlProps: ((year: DateStringValue) => Partial<PickerControlProps>) | undefined;
+}
+export declare function getYearInTabOrder({ years, minDate, maxDate, getYearControlProps, }: GetYearInTabOrderInput): string;
+export {};

package/lib/components/YearsList/get-years-data/get-years-data.d.ts

@@ -1 +1,2 @@
-export declare function getYearsData(decade: Date): Date[][];
+import { DateStringValue } from '../../../types';
+export declare function getYearsData(decade: DateStringValue): string[][];

package/lib/components/YearsList/is-year-disabled/is-year-disabled.d.ts

@@ -1 +1,8 @@
-export declare function isYearDisabled(year: Date, minDate: Date | null | undefined, maxDate: Date | null | undefined): boolean;
+import { DateStringValue } from '../../../types';
+interface IsYearDisabledInput {
+    year: DateStringValue;
+    minDate: DateStringValue | Date | undefined;
+    maxDate: DateStringValue | Date | undefined;
+}
+export declare function isYearDisabled({ year, minDate, maxDate }: IsYearDisabledInput): boolean;
+export {};

package/lib/hooks/use-dates-state/is-in-range/is-in-range.d.ts

@@ -1 +1,2 @@
-export declare function isInRange(date: Date, range: [Date, Date]): boolean;
+import { DateStringValue } from '../../../types';
+export declare function isInRange(date: DateStringValue, range: [DateStringValue, DateStringValue]): boolean;

package/lib/hooks/use-dates-state/use-dates-state.d.ts

@@ -1,15 +1,14 @@
-import { DatePickerType, PickerBaseProps } from '../../types';
+import { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
 interface UseDatesRangeInput<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type> {
     level: 'year' | 'month' | 'day';
     type: Type;
     onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    applyTimezone?: boolean;
 }
-export declare function useDatesState<Type extends DatePickerType = 'default'>({ type, level, value, defaultValue, onChange, allowSingleDateInRange, allowDeselect, onMouseLeave, applyTimezone, }: UseDatesRangeInput<Type>): {
-    onDateChange: (date: Date) => void;
+export declare function useDatesState<Type extends DatePickerType = 'default'>({ type, level, value, defaultValue, onChange, allowSingleDateInRange, allowDeselect, onMouseLeave, }: UseDatesRangeInput<Type>): {
+    onDateChange: (date: DateStringValue) => void;
     onRootMouseLeave: ((event: React.MouseEvent<HTMLDivElement>) => void) | undefined;
-    onHoveredDateChange: import("react").Dispatch<import("react").SetStateAction<Date | null>>;
-    getControlProps: (date: Date) => {
+    onHoveredDateChange: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    getControlProps: (date: DateStringValue) => {
         selected: any;
         inRange: boolean;
         firstInRange: boolean;

package/lib/hooks/use-uncontrolled-dates/use-uncontrolled-dates.d.ts

@@ -1,10 +1,11 @@
-import { DatePickerType, DatePickerValue } from '../../types';
+import { DatePickerType, DatePickerValue, DateStringValue } from '../../types';
 interface UseUncontrolledDates<Type extends DatePickerType = 'default'> {
     type: Type;
     value: DatePickerValue<Type> | undefined;
     defaultValue: DatePickerValue<Type> | undefined;
-    onChange: ((value: DatePickerValue<Type>) => void) | undefined;
-    applyTimezone?: boolean;
+    onChange: ((value: DatePickerValue<Type, DateStringValue>) => void) | undefined;
+    withTime?: boolean;
 }
-export declare function useUncontrolledDates<Type extends DatePickerType = 'default'>({ type, value, defaultValue, onChange, applyTimezone, }: UseUncontrolledDates<Type>): any[];
+export declare const convertDatesValue: (value: any, withTime: boolean) => string | (string | null | undefined)[] | null | undefined;
+export declare function useUncontrolledDates<Type extends DatePickerType = 'default'>({ type, value, defaultValue, onChange, withTime, }: UseUncontrolledDates<Type>): any[];
 export {};

package/lib/index.d.mts

@@ -3,6 +3,8 @@ export * from './utils/index.js';
 export * from './components/DatesProvider/index.js';
 export * from './components/HiddenDatesInput/index.js';
 export * from './components/TimeInput/index.js';
+export * from './components/TimePicker/index.js';
+export * from './components/TimeValue/index.js';
 export * from './components/Day/index.js';
 export * from './components/WeekdaysRow/index.js';
 export * from './components/Month/index.js';
@@ -27,3 +29,4 @@ export * from './components/DateTimePicker/index.js';
 export * from './components/YearPickerInput/index.js';
 export * from './components/MonthPickerInput/index.js';
 export * from './components/DatePickerInput/index.js';
+export * from './components/TimeGrid/index.js';

package/lib/index.d.ts

@@ -3,6 +3,8 @@ export * from './utils/index.js';
 export * from './components/DatesProvider/index.js';
 export * from './components/HiddenDatesInput/index.js';
 export * from './components/TimeInput/index.js';
+export * from './components/TimePicker/index.js';
+export * from './components/TimeValue/index.js';
 export * from './components/Day/index.js';
 export * from './components/WeekdaysRow/index.js';
 export * from './components/Month/index.js';
@@ -27,3 +29,4 @@ export * from './components/DateTimePicker/index.js';
 export * from './components/YearPickerInput/index.js';
 export * from './components/MonthPickerInput/index.js';
 export * from './components/DatePickerInput/index.js';
+export * from './components/TimeGrid/index.js';

package/lib/types/ControlsGroupSettings.d.ts

@@ -1,17 +1,17 @@
-import type { ControlKeydownPayload } from './GeneralTypes';
+import type { ControlKeydownPayload, DateStringValue } from './GeneralTypes';
 export interface ControlsGroupSettings {
     /** Called when control is clicked with event and date */
-    __onControlClick?: (event: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+    __onControlClick?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
     /** Called when mouse enters control with event and date, used for ranges */
-    __onControlMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: Date) => void;
+    __onControlMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, date: DateStringValue) => void;
     /** Called when any keydown event is registered on control, used for arrows navigation */
     __onControlKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, payload: ControlKeydownPayload) => void;
     /** Assigns ref of every control based on its position in the table, used for arrows navigation */
     __getControlRef?: (rowIndex: number, cellIndex: number, node: HTMLButtonElement) => void;
-    /** Minimum possible date */
-    minDate?: Date;
-    /** Maximum possible date */
-    maxDate?: Date;
+    /** Minimum possible date in `YYYY-MM-DD` format or Date object */
+    minDate?: DateStringValue | Date;
+    /** Maximum possible date in `YYYY-MM-DD` format or Date object */
+    maxDate?: DateStringValue | Date;
     /** Dayjs locale, defaults to value defined in DatesProvider */
     locale?: string;
 }

package/lib/types/DatePickerValue.d.ts

@@ -1,4 +1,5 @@
-export type DateValue = Date | null;
-export type DatesRangeValue = [DateValue, DateValue];
+import { DateStringValue } from './GeneralTypes';
+export type DateValue = DateStringValue | Date | null;
+export type DatesRangeValue<ValueType = DateValue> = [ValueType, ValueType];
 export type DatePickerType = 'default' | 'multiple' | 'range';
-export type DatePickerValue<Type extends DatePickerType = 'default'> = Type extends 'range' ? DatesRangeValue : Type extends 'multiple' ? Date[] : DateValue;
+export type DatePickerValue<Type extends DatePickerType = 'default', ValueType = DateValue> = Type extends 'range' ? DatesRangeValue<ValueType> : Type extends 'multiple' ? ValueType[] : ValueType;

package/lib/types/GeneralTypes.d.ts

@@ -1,7 +1,10 @@
+/** Date value used by all Mantine components, format: `YYYY-MM-DD` */
+export type DateStringValue = string;
 export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type CalendarLevel = 'month' | 'year' | 'decade';
 export interface ControlKeydownPayload {
     cellIndex: number;
     rowIndex: number;
-    date: Date;
+    date: DateStringValue;
 }
+export type DateLabelFormat = string | ((date: DateStringValue) => React.ReactNode);

package/lib/types/PickerBaseProps.d.ts

@@ -1,4 +1,5 @@
 import type { DatePickerType, DatePickerValue } from './DatePickerValue';
+import { DateStringValue } from './GeneralTypes';
 export interface PickerBaseProps<Type extends DatePickerType = 'default'> {
     /** Picker type: range, multiple or default */
     type?: DatePickerType | Type;
@@ -7,7 +8,7 @@ export interface PickerBaseProps<Type extends DatePickerType = 'default'> {
     /** Default value for uncontrolled component */
     defaultValue?: DatePickerValue<Type>;
     /** Called when value changes */
-    onChange?: (value: DatePickerValue<Type>) => void;
+    onChange?: (value: DatePickerValue<Type, DateStringValue>) => void;
     /** Determines whether user can deselect the date by clicking on selected item, applicable only when type="default" */
     allowDeselect?: Type extends 'default' ? boolean : never;
     /** Determines whether a single day can be selected as range, applicable only when type="range" */

package/lib/utils/assign-time/assign-time.d.ts

@@ -1 +1,3 @@
-export declare function assignTime(originalDate: Date, resultDate: Date): Date;
+import { DateStringValue } from '../../types';
+export declare function assignTime(dateValue: DateStringValue | null, // Date to assign time to
+timeString: string): DateStringValue | null;

package/lib/utils/clamp-date/clamp-date.d.ts

@@ -0,0 +1,2 @@
+import { DateStringValue } from '../../types';
+export declare function clampDate(minDate: DateStringValue | Date | undefined, maxDate: DateStringValue | Date | undefined, date: DateStringValue | Date): DateStringValue;

package/lib/utils/get-default-clamped-date/get-default-clamped-date.d.ts

@@ -0,0 +1,7 @@
+import { DateStringValue } from '../../types';
+interface GetDefaultClampedDate {
+    minDate: DateStringValue | Date | undefined;
+    maxDate: DateStringValue | Date | undefined;
+}
+export declare function getDefaultClampedDate({ minDate, maxDate, }: GetDefaultClampedDate): DateStringValue;
+export {};

package/lib/utils/get-formatted-date/get-formatted-date.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerType, DatePickerValue } from '../../types';
+interface DateFormatterInput {
+    type: DatePickerType;
+    date: DatePickerValue<DatePickerType>;
+    locale: string;
+    format: string;
+    labelSeparator: string;
+}
+export type DateFormatter = (input: DateFormatterInput) => string;
+export declare function defaultDateFormatter({ type, date, locale, format, labelSeparator, }: DateFormatterInput): string;
+interface GetFormattedDateInput extends DateFormatterInput {
+    formatter?: DateFormatter;
+}
+export declare function getFormattedDate({ formatter, ...others }: GetFormattedDateInput): string;
+export {};

package/lib/utils/handle-control-key-down/handle-control-key-down.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+type ControlsRef = RefObject<HTMLButtonElement[][][]>;
+interface HandleControlKeyDownInput {
+    controlsRef: ControlsRef;
+    levelIndex: number;
+    rowIndex: number;
+    cellIndex: number;
+    event: React.KeyboardEvent<HTMLButtonElement>;
+}
+export declare function handleControlKeyDown({ controlsRef, levelIndex, rowIndex, cellIndex, event, }: HandleControlKeyDownInput): void;
+export {};

package/lib/utils/index.d.ts

@@ -1,6 +1,7 @@
-export { getFormattedDate } from './get-formatted-date';
-export { handleControlKeyDown } from './handle-control-key-down';
+export { getFormattedDate } from './get-formatted-date/get-formatted-date';
+export { handleControlKeyDown } from './handle-control-key-down/handle-control-key-down';
 export { assignTime } from './assign-time/assign-time';
-export { getDefaultClampedDate } from './get-default-clamped-date';
-export { shiftTimezone } from './shift-timezone';
-export type { DateFormatter } from './get-formatted-date';
+export { getDefaultClampedDate } from './get-default-clamped-date/get-default-clamped-date';
+export { clampDate } from './clamp-date/clamp-date';
+export { toDateString, toDateTimeString } from './to-date-string/to-date-string';
+export type { DateFormatter } from './get-formatted-date/get-formatted-date';

package/lib/utils/to-date-string/to-date-string.d.ts

@@ -0,0 +1,4 @@
+import { Dayjs } from 'dayjs';
+import { DateStringValue } from '../../types';
+export declare function toDateString(value: string | number | Date | Dayjs | undefined | null): DateStringValue | undefined | null;
+export declare function toDateTimeString(value: string | number | Date | Dayjs | undefined | null): DateStringValue | undefined | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/dates",
-  "version": "7.16.3",
+  "version": "8.0.0-alpha.0",
   "description": "Calendars, date and time pickers based on Mantine components",
   "homepage": "https://mantine.dev/dates/getting-started/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/dates"
   },
   "peerDependencies": {
-    "@mantine/core": "7.16.3",
-    "@mantine/hooks": "7.16.3",
+    "@mantine/core": "8.0.0-alpha.0",
+    "@mantine/hooks": "8.0.0-alpha.0",
     "dayjs": ">=1.0.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
@@ -59,7 +59,7 @@
     "@mantine-tests/dates": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   }
 }