@mantine/schedule 9.6.1 → 9.6.2

package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts

@@ -95,7 +95,7 @@ export interface ResourcesScheduleProps extends BoxProps, StylesApiProps<Resourc
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
-    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day` and `week` views only – `ResourcesMonthView` does not render background events separately. @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day` and `week` views only – `ResourcesMonthView` does not render background events separately. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances @default 2000 */
     recurrenceExpansionLimit?: number;

package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts

@@ -76,7 +76,7 @@ export interface ResourcesWeekViewProps extends BoxProps, StylesApiProps<Resourc
         resourceId?: string | number;
     }) => void;
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     withDragSlotSelect?: boolean;
     onSlotDragEnd?: (data: {

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

@@ -84,7 +84,7 @@ export interface ScheduleProps extends BoxProps, StylesApiProps<ScheduleFactory>
     }) => void;
     /** Function to determine if event can be resized */
     canResizeEvent?: (event: ScheduleEventData) => boolean;
-    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day`, `week` and `month` views only – `YearView` and the `MobileMonthView` used by `layout="responsive"` on small screens do not render background events at all. @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Applies to `day`, `week` and `month` views only – `YearView` and the `MobileMonthView` used by `layout="responsive"` on small screens do not render background events at all. Combined with `withEventResize`, timed background events in `day` and `week` views can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** Max number of generated recurring instances per recurring series @default 2000 */
     recurrenceExpansionLimit?: number;

package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.d.ts

@@ -1,7 +1,8 @@
 import { BoxProps, ElementProps } from '@mantine/core';
 import { ScheduleEventData } from '../../types';
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
-export interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'div', 'onClick'> {
+export type ScheduleBackgroundEventResizeEdge = 'top' | 'bottom' | 'start' | 'end';
+export interface ScheduleBackgroundEventProps<Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge> extends BoxProps, ElementProps<'div', 'onClick'> {
     /** Background event to display */
     event: ScheduleEventData;
     /** If set, the root element is a `button` instead of a `div` and the event can be clicked @default false */
@@ -12,8 +13,20 @@ export interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'di
     renderEvent?: RenderEvent;
     /** Function to customize event body */
     renderEventBody?: RenderEventBody;
+    /** If set, the event renders resize handles on both of its edges @default false */
+    withResize?: boolean;
+    /** Axis along which the event is resized, defines which edges render handles @default 'vertical' */
+    resizeAxis?: 'vertical' | 'horizontal';
+    /** Props passed down to both resize handles, usually a styles api props object */
+    resizeHandleProps?: Record<string, any>;
+    /** Called when resize starts on an edge */
+    onResizeStart?: (edge: Edge, e: React.PointerEvent) => void;
+    /** If set, the event is currently being resized @default false */
+    isResizing?: boolean;
+    /** Edge that is currently being dragged, only relevant when `isResizing` is set */
+    activeResizeEdge?: Edge | null;
 }
-export declare function ScheduleBackgroundEvent(props: ScheduleBackgroundEventProps): import("react").JSX.Element;
+export declare function ScheduleBackgroundEvent<Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge>(props: ScheduleBackgroundEventProps<Edge>): import("react").JSX.Element;
 export declare namespace ScheduleBackgroundEvent {
     var displayName: string;
 }

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

@@ -7,7 +7,7 @@ import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/Current
 import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';
 import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';
 import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';
-export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewDragPreview' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
+export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | 'weekViewBackgroundEventResizeHandle' | 'weekViewDragPreview' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames;
 export type WeekViewCssVariables = {
     weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height';
 };
@@ -116,7 +116,7 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     onAllDaySlotClick?: (day: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Called when event is clicked */
     onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;
-    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick` @default false */
+    /** If set, background events (`display: 'background'`) can be clicked and trigger `onEventClick`. Combined with `withEventResize`, timed background events can also be resized by dragging their edges. @default false */
     withInteractiveBackgroundEvents?: boolean;
     /** If set, enables drag-to-select time slot ranges @default false */
     withDragSlotSelect?: boolean;

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

@@ -14,8 +14,9 @@ export interface UseEventResizeInput {
         event: ScheduleEventData;
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    withBackgroundEvents?: boolean;
 }
-export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseEventResizeInput): {
+export declare function useEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, withBackgroundEvents, }: UseEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalTop, originalHeight, eventDate, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;
@@ -27,7 +28,7 @@ export declare function useEventResize({ enabled, mode, startTime, endTime, inte
     }) => void;
     isResizing: boolean;
     resizingEventId: string | number | null;
-    getResizePosition: (eventId: string | number) => {
+    getResizePosition: (eventId: string | number, eventDate?: string) => {
         top: number;
         height: number;
     } | null;

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

@@ -14,8 +14,9 @@ export interface UseHorizontalEventResizeInput {
         event: ScheduleEventData;
     }) => void;
     canResizeEvent?: (event: ScheduleEventData) => boolean;
+    withBackgroundEvents?: boolean;
 }
-export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, }: UseHorizontalEventResizeInput): {
+export declare function useHorizontalEventResize({ enabled, mode, startTime, endTime, intervalMinutes, resizeIntervalMinutes, onEventResize, canResizeEvent, withBackgroundEvents, }: UseHorizontalEventResizeInput): {
     handleResizeStart: ({ event, edge, container, originalLeft, originalWidth, eventDate, dayIndex, dayCount, pointerEvent, }: {
         event: ScheduleEventData;
         edge: ResizeEdge;
@@ -30,7 +31,7 @@ export declare function useHorizontalEventResize({ enabled, mode, startTime, end
     isResizing: boolean;
     resizingEventId: string | number | null;
     resizingEdge: ResizeEdge | null;
-    getResizePosition: (eventId: string | number) => {
+    getResizePosition: (eventId: string | number, eventDate?: string) => {
         left: number;
         width: number;
     } | null;

package/package.json

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

package/styles.css

@@ -984,9 +984,82 @@
   }
 }
 
-.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging]) .m_c5cd9a77 {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_c5cd9a77:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_c5cd9a77:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_cddb9413 {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  max-width: calc(2.5rem * var(--mantine-scale));
+  height: calc(0.25rem * var(--mantine-scale));
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  cursor: ns-resize;
+  pointer-events: all;
+  z-index: 4;
+  touch-action: none;
+  background-color: var(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_cddb9413::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_cddb9413:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_cddb9413:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_c5cd9a77:where(:hover, [data-resizing]) .m_cddb9413 {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_cddb9413:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_cddb9413:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) {
   pointer-events: none;
 }
+.m_3c5fb2d5:where([data-event-interaction], [data-slot-dragging])
+  .m_c5cd9a77:not([data-resizing]) .m_cddb9413 {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_c6f08d70 {
   position: relative;
@@ -1864,11 +1937,82 @@
   }
 }
 
-.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f,
-.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f,
-.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f {
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_41ce8f1f:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_41ce8f1f:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+.m_b20accbb {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  max-width: calc(2.5rem * var(--mantine-scale));
+  height: calc(0.25rem * var(--mantine-scale));
+  border-radius: calc(0.125rem * var(--mantine-scale));
+  cursor: ns-resize;
+  pointer-events: all;
+  z-index: 4;
+  touch-action: none;
+  background-color: var(--bg-event-color);
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+
+.m_b20accbb::before {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25rem * var(--mantine-scale)) calc(-0.375rem * var(--mantine-scale));
+  }
+
+.m_b20accbb:where([data-edge='top']) {
+    top: 0;
+  }
+
+.m_b20accbb:where([data-edge='bottom']) {
+    bottom: 0;
+  }
+
+.m_41ce8f1f:where(:hover, [data-resizing]) .m_b20accbb {
+    opacity: 0.5;
+  }
+
+@media (hover: hover) {
+
+  .m_b20accbb:hover {
+    opacity: 0.8;
+  }
+}
+
+@media (hover: none) {
+
+  .m_b20accbb:active {
+    opacity: 0.8;
+  }
+}
+
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]),
+.m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) {
   pointer-events: none;
 }
+.m_42b9032d:where([data-slot-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-event-interaction]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb, .m_6b2099af:where([data-all-day-dragging]) .m_41ce8f1f:not([data-resizing]) .m_b20accbb {
+    pointer-events: none;
+    opacity: 0;
+  }
 
 .m_cd58ae46 {
   position: relative;
@@ -2810,6 +2954,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_9cc838bf:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_9cc838bf:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_d6d6dd52 {
   position: absolute;
   inset-inline: calc(0.0625rem * var(--mantine-scale));
@@ -2871,10 +3031,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_25154d8d:where([data-event-interaction], [data-slot-dragging])
-  .m_9cc838bf {
+  .m_9cc838bf:not([data-resizing]) {
   pointer-events: none;
 }
+.m_25154d8d:where([data-event-interaction], [data-slot-dragging])
+  .m_9cc838bf:not([data-resizing]) .m_97715629 {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_9cc838bf .m_97715629 {
+    background-color: var(--bg-event-color);
+  }
+
+.m_9cc838bf .m_97715629:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_9cc838bf .m_97715629:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_9cc838bf:hover .m_97715629 {
+    opacity: 0.5;
+  }
+
+.m_9cc838bf .m_97715629:hover {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_9cc838bf:where([data-resizing]) .m_97715629:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_25154d8d:where([data-resizing]) * {
     cursor: ew-resize !important;
@@ -3251,6 +3447,22 @@
   }
 }
 
+/* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */
+
+@media (hover: hover) {
+
+  .m_3c19323d:where([data-resizing]):hover {
+      background-color: var(--bg-event-bg);
+  }
+}
+
+@media (hover: none) {
+
+  .m_3c19323d:where([data-resizing]):active {
+      background-color: var(--bg-event-bg);
+  }
+}
+
 .m_682c45d0 {
   position: absolute;
   height: var(--resources-week-view-all-day-height);
@@ -3311,10 +3523,46 @@
   pointer-events: none;
 }
 
+/* The resizing background event is the one that set `data-event-interaction`, so it must
+   keep capturing pointer events. */
 .m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
-  .m_3c19323d {
+  .m_3c19323d:not([data-resizing]) {
   pointer-events: none;
 }
+.m_ed4c47cf:where([data-event-interaction], [data-slot-dragging])
+  .m_3c19323d:not([data-resizing]) .m_30c8fd6b {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.m_3c19323d .m_30c8fd6b {
+    background-color: var(--bg-event-color);
+  }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='start']) {
+      left: 0;
+    }
+
+.m_3c19323d .m_30c8fd6b:where([data-edge='end']) {
+      right: 0;
+    }
+
+.m_3c19323d:hover .m_30c8fd6b {
+    opacity: 0.5;
+  }
+
+.m_3c19323d .m_30c8fd6b:hover {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:where([data-active]) {
+    opacity: 0.8;
+  }
+
+.m_3c19323d:where([data-resizing]) .m_30c8fd6b:not([data-active]) {
+    opacity: 0;
+    pointer-events: none;
+  }
 
 .m_ed4c47cf:where([data-resizing]) * {
     cursor: ew-resize !important;