@mantine/schedule 9.0.0-alpha.6 → 9.0.0

package/lib/components/MonthView/MonthView.d.ts

@@ -69,7 +69,12 @@ export interface MonthViewProps extends BoxProps, StylesApiProps<MonthViewFactor
     /** If true, events can be dragged and dropped @default false */
     withEventsDragAndDrop?: boolean;
     /** Called when event is dropped on new date */
-    onEventDrop?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
     /** Called when any event drag starts */

package/lib/components/Schedule/Schedule.d.ts

@@ -38,7 +38,12 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     /** Enable drag and drop for events @default false */
     withEventsDragAndDrop?: boolean;
     /** Called when event is dropped */
-    onEventDrop?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
     /** Called when any event drag starts */
@@ -46,7 +51,11 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     /** Called when any event drag ends */
     onEventDragEnd?: () => void;
     /** Called when time slot is clicked in DayView/WeekView */
-    onTimeSlotClick?: (slotStart: DateTimeStringValue, slotEnd: DateTimeStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    onTimeSlotClick?: (data: {
+        slotStart: DateTimeStringValue;
+        slotEnd: DateTimeStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+    }) => void;
     /** Called when all-day slot is clicked in DayView/WeekView */
     onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Called when day is clicked in MonthView */
@@ -67,7 +76,12 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     /** If true, events can be resized by dragging their edges @default false */
     withEventResize?: boolean;
     /** Called when event is resized */
-    onEventResize?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventResize?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
     /** Max number of generated recurring instances per recurring series @default 2000 */

package/lib/components/WeekView/WeekView.d.ts

@@ -80,7 +80,12 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     /** If true, events can be dragged and dropped @default false */
     withEventsDragAndDrop?: boolean;
     /** Called when event is dropped at new time */
-    onEventDrop?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
     /** Called when any event drag starts */
@@ -88,7 +93,11 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     /** Called when any event drag ends */
     onEventDragEnd?: () => void;
     /** Called when time slot is clicked */
-    onTimeSlotClick?: (slotStart: DateTimeStringValue, slotEnd: DateTimeStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
+    onTimeSlotClick?: (data: {
+        slotStart: DateTimeStringValue;
+        slotEnd: DateTimeStringValue;
+        nativeEvent: React.MouseEvent<HTMLButtonElement>;
+    }) => void;
     /** Called when all-day slot is clicked */
     onAllDaySlotClick?: (day: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Called when event is clicked */
@@ -111,11 +120,21 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     /** If true, events can be resized by dragging their edges @default false */
     withEventResize?: boolean;
     /** Called when event is resized */
-    onEventResize?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventResize?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;
+    /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */
+    getTimeSlotProps?: (data: {
+        start: DateTimeStringValue;
+        end: DateTimeStringValue;
+    }) => Record<string, any> | undefined;
 }
 export type WeekViewFactory = Factory<{
     props: WeekViewProps;

package/lib/components/WeekView/WeekViewDay.d.ts

@@ -1,6 +1,6 @@
 import { GetStylesApi } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { DateStringValue, DayOfWeek, ScheduleMode } from '../../types';
+import { DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleMode } from '../../types';
 import { DayTimeInterval } from '../../utils';
 import type { WeekViewControlsRef } from './handle-week-view-key-down';
 import type { WeekViewFactory } from './WeekView';
@@ -56,5 +56,10 @@ export interface WeekViewDayProps {
     isSlotDragSelected?: (index: number, group: string) => boolean;
     /** Ref callback for the day slots container */
     daySlotsContainerRef?: (node: HTMLDivElement | null) => void;
+    /** Function to get additional props for each time slot */
+    getTimeSlotProps?: (data: {
+        start: DateTimeStringValue;
+        end: DateTimeStringValue;
+    }) => Record<string, any> | undefined;
 }
-export declare function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef, }: WeekViewDayProps): import("react/jsx-runtime").JSX.Element;
+export declare function WeekViewDay({ day, dayIndex, slots, getStyles, weekendDays, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onDaySlotsDragOver, onDaySlotsDragLeave, onDaySlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, onFirstSlotArrowUp, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, daySlotsContainerRef, getTimeSlotProps, }: WeekViewDayProps): import("react/jsx-runtime").JSX.Element;

package/lib/hooks/use-drag-drop-handlers.d.ts

@@ -6,7 +6,12 @@ export interface UseDragDropHandlersOptions<T = any> {
     /** Schedule interaction mode */
     mode: ScheduleMode;
     /** Called when event is dropped at new location */
-    onEventDrop?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventDrop?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     /** Function to determine if event can be dragged */
     canDragEvent?: (event: ScheduleEventData) => boolean;
     /** Called when any event drag starts */

package/lib/hooks/use-event-resize.d.ts

@@ -6,11 +6,24 @@ export interface UseEventResizeInput {
     startTime: string;
     endTime: string;
     intervalMinutes: number;
-    onEventResize?: (eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData) => void;
+    onEventResize?: (data: {
+        eventId: string | number;
+        newStart: DateTimeStringValue;
+        newEnd: DateTimeStringValue;
+        event: ScheduleEventData;
+    }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
 }
 export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, onEventResize, canResizeEvent, }: UseEventResizeInput): {
-    handleResizeStart: (event: ScheduleEventData, edge: ResizeEdge, container: HTMLElement, originalTop: number, originalHeight: number, eventDate: string, pointerEvent: React.PointerEvent) => void;
+    handleResizeStart: ({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent, }: {
+        event: ScheduleEventData;
+        edge: ResizeEdge;
+        container: HTMLElement;
+        originalTop: number;
+        originalHeight: number;
+        eventDate: string;
+        pointerEvent: React.PointerEvent;
+    }) => void;
     isResizing: boolean;
     resizingEventId: string | number | null;
     getResizePosition: (eventId: string | number) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/schedule",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0",
   "description": "Schedule Mantine component",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "directory": "packages/@mantine/schedule"
   },
   "peerDependencies": {
-    "@mantine/core": "9.0.0-alpha.6",
-    "@mantine/dates": "9.0.0-alpha.6",
-    "@mantine/hooks": "9.0.0-alpha.6",
+    "@mantine/core": "9.0.0",
+    "@mantine/dates": "9.0.0",
+    "@mantine/hooks": "9.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles.css

@@ -804,6 +804,8 @@
 
 .m_7b47db0e {
   user-select: none;
+  font-weight: var(--mantine-font-weight-semibold);
+  text-transform: capitalize;
 }
 
 .m_a20935f7 {
@@ -1007,6 +1009,8 @@
 
 .m_9a1cef3f {
   margin-bottom: var(--mantine-spacing-sm);
+  font-weight: var(--mantine-font-weight-semibold);
+  text-transform: capitalize;
 }
 
 .m_16b7da81 {
@@ -1054,6 +1058,14 @@
 
 .m_ea7c78ee {
   margin-top: calc(0.125rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+.m_bbac00f3 {
+  color: var(--mantine-color-dimmed);
+  text-align: center;
+  padding-block: var(--mantine-spacing-xl);
 }
 
 .m_8eceba9d {

package/styles.layer.css

@@ -804,6 +804,8 @@
 
 .m_7b47db0e {
   user-select: none;
+  font-weight: var(--mantine-font-weight-semibold);
+  text-transform: capitalize;
 }
 
 .m_a20935f7 {
@@ -1007,6 +1009,8 @@
 
 .m_9a1cef3f {
   margin-bottom: var(--mantine-spacing-sm);
+  font-weight: var(--mantine-font-weight-semibold);
+  text-transform: capitalize;
 }
 
 .m_16b7da81 {
@@ -1054,6 +1058,14 @@
 
 .m_ea7c78ee {
   margin-top: calc(0.125rem * var(--mantine-scale));
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+.m_bbac00f3 {
+  color: var(--mantine-color-dimmed);
+  text-align: center;
+  padding-block: var(--mantine-spacing-xl);
 }
 
 .m_8eceba9d {