@mantine/schedule 9.6.0 → 9.6.1

package/lib/components/DayView/DayView.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleEventOverlapMode, ScheduleMode, ScheduleViewLevel } from '../../types';
 import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
 import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';
@@ -28,6 +28,10 @@ export interface DayViewProps extends BoxProps, StylesApiProps<DayViewFactory>,
     intervalMinutes?: number;
     /** If set, grid lines are displayed for intervals smaller than one hour, for example 15 and 30 minutes intervals @default true */
     withSubHourGridLines?: boolean;
+    /** Determines how events that overlap in time are laid out: `columns` splits the available width between them, `cascade` indents each event and stacks it over the previous one @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms the pointer must rest on an event before it is raised above the events covering it, only used with `eventOverlapMode="cascade"` @default 600 */
+    eventOverlapRaiseDelay?: number;
     /** If set, the all-day slot is displayed below the header @default true */
     withAllDaySlot?: boolean;
     /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */

package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts

@@ -1,4 +1,4 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayPositionedEventsInput {
     /** Date at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -10,6 +10,8 @@ interface GetDayPositionedEventsInput {
     endTime?: string;
     /** Number of minutes per time slot, used to align the canvas to whole slots */
     intervalMinutes?: number;
+    /** Determines how events that overlap in time are laid out @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, }: GetDayPositionedEventsInput): DayPositionedEventData[];
+export declare function getDayPositionedEvents({ events, startTime, endTime, intervalMinutes, date, eventOverlapMode, }: GetDayPositionedEventsInput): DayPositionedEventData[];
 export {};

package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts

@@ -1,12 +1,13 @@
-import { AnyDateValue, DayPositionedEventData, ScheduleEventData } from '../../../types';
+import { AnyDateValue, DayPositionedEventData, ScheduleEventData, ScheduleEventOverlapMode } from '../../../types';
 interface GetDayViewEventsInput {
     events: ScheduleEventData[] | undefined;
     date: AnyDateValue;
     startTime?: string;
     endTime?: string;
     intervalMinutes?: number;
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
-export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, }: GetDayViewEventsInput): {
+export declare function getDayViewEvents({ events, date, startTime, endTime, intervalMinutes, eventOverlapMode, }: GetDayViewEventsInput): {
     allDayEvents: DayPositionedEventData[];
     regularEvents: DayPositionedEventData[];
     backgroundTimedEvents: DayPositionedEventData[];

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

@@ -1,6 +1,6 @@
 import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core';
 import { ScheduleLabelsOverride } from '../../labels';
-import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types';
+import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleEventOverlapMode, ScheduleMode, ScheduleViewLevel } from '../../types';
 import { BusinessHoursValue } from '../../utils';
 import { AgendaViewStylesNames } from '../AgendaView/AgendaView';
 import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator';
@@ -35,6 +35,10 @@ export interface WeekViewProps extends BoxProps, StylesApiProps<WeekViewFactory>
     weekendDays?: DayOfWeek[];
     /** If set to false, weekend days are hidden @default true */
     withWeekendDays?: boolean;
+    /** Determines how events that overlap in time are laid out: `columns` splits the available width between them, `cascade` indents each event and stacks it over the previous one @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
+    /** Time in ms the pointer must rest on an event before it is raised above the events covering it, only used with `eventOverlapMode="cascade"` @default 600 */
+    eventOverlapRaiseDelay?: number;
     /** If set to true, highlights today in the weekday row @default false */
     highlightToday?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */

package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts

@@ -1,4 +1,4 @@
-import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, WeekPositionedEventData } from '../../../types';
+import { AnyDateValue, DateStringValue, DayOfWeek, ScheduleEventData, ScheduleEventOverlapMode, WeekPositionedEventData } from '../../../types';
 export interface GetWeekPositionedEventsInput {
     /** Date (week start) at which events are positioned, used to check if events are all-day */
     date: AnyDateValue;
@@ -16,6 +16,8 @@ export interface GetWeekPositionedEventsInput {
     weekendDays?: DayOfWeek[];
     /** If set to false, weekend days are hidden @default true */
     withWeekendDays?: boolean;
+    /** Determines how events that overlap in time are laid out @default 'columns' */
+    eventOverlapMode?: ScheduleEventOverlapMode;
 }
 /** Events grouped by week day date (YYYY-MM-DD 00:00:00) and by columns */
 export interface GroupedWeekEvents {
@@ -23,4 +25,4 @@ export interface GroupedWeekEvents {
     regularEvents: Record<DateStringValue, WeekPositionedEventData[]>;
     backgroundEvents: Record<DateStringValue, WeekPositionedEventData[]>;
 }
-export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, }: GetWeekPositionedEventsInput): GroupedWeekEvents;
+export declare function getWeekPositionedEvents({ date, events, startTime, endTime, intervalMinutes, firstDayOfWeek, weekendDays, withWeekendDays, eventOverlapMode, }: GetWeekPositionedEventsInput): GroupedWeekEvents;

package/lib/types.d.ts

@@ -102,6 +102,8 @@ interface ScheduleEventRuntimeMeta {
 }
 /** Event data object passed to all `@mantine/schedule` components */
 export type ScheduleEventData<Payload extends EventPayload = EventPayload> = (ScheduleSingleEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringSeriesEventData<Payload> & ScheduleEventRuntimeMeta) | (ScheduleRecurringOverrideEventData<Payload> & ScheduleEventRuntimeMeta);
+/** Controls how events that overlap in time are laid out along the horizontal axis */
+export type ScheduleEventOverlapMode = 'columns' | 'cascade';
 export interface DayEventPositionData {
     /** All day events */
     allDay: boolean;

package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts

@@ -0,0 +1,6 @@
+import { DayEventPositionData, ScheduleEventData } from '../../types';
+/** Minimal shape `applyCascadeLayout` needs, shared by day and week positioned events */
+export type CascadePositionedEvent = ScheduleEventData & {
+    position: Pick<DayEventPositionData, 'allDay' | 'column' | 'width' | 'offset' | 'overlaps'>;
+};
+export declare function applyCascadeLayout<T extends CascadePositionedEvent>(events: T[]): void;

package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts

@@ -0,0 +1,2 @@
+import { ScheduleEventData } from '../../types';
+export declare function getOverlapClusters<T extends ScheduleEventData>(events: T[]): T[][];

package/lib/utils/index.d.ts

@@ -47,3 +47,6 @@ export type { HandleResourcesGridKeyDownInput, ResourcesGridControlsRef, } from
 export { getGroupToResourceIdMap } from './get-group-to-resource-id-map/get-group-to-resource-id-map';
 export { getIndexFromDragPoint } from './get-index-from-drag-point/get-index-from-drag-point';
 export { getDayRelativePercent } from './get-day-relative-percent/get-day-relative-percent';
+export { getOverlapClusters } from './get-overlap-clusters/get-overlap-clusters';
+export { applyCascadeLayout } from './apply-cascade-layout/apply-cascade-layout';
+export type { CascadePositionedEvent } from './apply-cascade-layout/apply-cascade-layout';

package/package.json

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

package/styles.css

@@ -215,6 +215,37 @@
     cursor: default;
   }
 
+  .m_1ac94670:where([data-cascade]) {
+    z-index: var(--event-z-index, 3);
+    transition: z-index 0s;
+  }
+
+  .m_1ac94670:where([data-cascade]) .m_71699dc6 {
+      box-shadow: 0 0 0 1px var(--mantine-color-body);
+    }
+
+  @media (hover: hover) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):hover {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  @media (hover: none) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):active {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):where(:focus-visible) {
+        z-index: var(--event-z-index-raised, 9);
+      }
+
   .m_1ac94670:where([data-resizing]) {
     z-index: 10;
   }
@@ -233,6 +264,10 @@
   }
 }
 
+  .m_1ac94670:where([data-cascade][data-resizing]) {
+    z-index: var(--event-cascade-interaction-z-index, 999);
+  }
+
   .m_1ac94670:where([data-hanging='start'], [data-hanging='both'])::before {
       content: '';
       position: absolute;
@@ -751,6 +786,19 @@
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_9389813:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_9389813:where(:has([data-cascade])) .m_2d4819df {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_9389813:where(:first-of-type) .m_cd179e73:where([data-first]) {
     border-top-color: transparent;
   }
@@ -1826,6 +1874,19 @@
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_cd58ae46:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_cd58ae46:where(:has([data-cascade])) .m_e0da287 {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_8ac0cbcd {
   display: block;
   width: 100%;

package/styles.layer.css

@@ -215,6 +215,37 @@
     cursor: default;
   }
 
+  .m_1ac94670:where([data-cascade]) {
+    z-index: var(--event-z-index, 3);
+    transition: z-index 0s;
+  }
+
+  .m_1ac94670:where([data-cascade]) .m_71699dc6 {
+      box-shadow: 0 0 0 1px var(--mantine-color-body);
+    }
+
+  @media (hover: hover) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):hover {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  @media (hover: none) {
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):active {
+        z-index: var(--event-z-index-raised, 9);
+        transition-delay: var(--event-raise-delay, 600ms);
+  }
+}
+
+  /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */
+
+  .m_1ac94670:where([data-cascade]):where(:not([data-resizing], [data-dragging])):where(:focus-visible) {
+        z-index: var(--event-z-index-raised, 9);
+      }
+
   .m_1ac94670:where([data-resizing]) {
     z-index: 10;
   }
@@ -233,6 +264,10 @@
   }
 }
 
+  .m_1ac94670:where([data-cascade][data-resizing]) {
+    z-index: var(--event-cascade-interaction-z-index, 999);
+  }
+
   .m_1ac94670:where([data-hanging='start'], [data-hanging='both'])::before {
       content: '';
       position: absolute;
@@ -751,6 +786,19 @@
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_9389813:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_9389813:where(:has([data-cascade])) .m_2d4819df {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_9389813:where(:first-of-type) .m_cd179e73:where([data-first]) {
     border-top-color: transparent;
   }
@@ -1826,6 +1874,19 @@
   position: relative;
 }
 
+/* Cascade events stack with an unbounded z-index, keep them out of the sticky header's layer */
+
+.m_cd58ae46:where(:has([data-cascade])) {
+    isolation: isolate;
+
+    /* Drag and resize feedback must stay above every cascade column */
+    --event-cascade-interaction-z-index: 999;
+  }
+
+.m_cd58ae46:where(:has([data-cascade])) .m_e0da287 {
+      z-index: var(--event-cascade-interaction-z-index);
+    }
+
 .m_8ac0cbcd {
   display: block;
   width: 100%;

package/cjs/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-overlap-clusters.cjs","names":["isEventsOverlap"],"sources":["../../../../src/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.ts"],"sourcesContent":["import { DayPositionedEventData } from '../../../types';\nimport { isEventsOverlap } from '../../../utils';\n\nexport function getOverlapClusters(events: DayPositionedEventData[]): DayPositionedEventData[][] {\n  const clusters: DayPositionedEventData[][] = [];\n  const assigned = new Set<number>();\n\n  for (let i = 0; i < events.length; i++) {\n    if (assigned.has(i)) {\n      continue;\n    }\n\n    const cluster: DayPositionedEventData[] = [events[i]];\n    assigned.add(i);\n\n    let j = 0;\n    while (j < cluster.length) {\n      for (let k = 0; k < events.length; k++) {\n        if (!assigned.has(k) && isEventsOverlap(cluster[j], events[k])) {\n          cluster.push(events[k]);\n          assigned.add(k);\n        }\n      }\n      j++;\n    }\n\n    clusters.push(cluster);\n  }\n\n  return clusters;\n}\n"],"mappings":";;;AAGA,SAAgB,mBAAmB,QAA8D;CAC/F,MAAM,WAAuC,CAAC;CAC9C,MAAM,2BAAW,IAAI,IAAY;CAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,IAAI,SAAS,IAAI,CAAC,GAChB;EAGF,MAAM,UAAoC,CAAC,OAAO,EAAE;EACpD,SAAS,IAAI,CAAC;EAEd,IAAI,IAAI;EACR,OAAO,IAAI,QAAQ,QAAQ;GACzB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KACjC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAKA,0BAAAA,gBAAgB,QAAQ,IAAI,OAAO,EAAE,GAAG;IAC9D,QAAQ,KAAK,OAAO,EAAE;IACtB,SAAS,IAAI,CAAC;GAChB;GAEF;EACF;EAEA,SAAS,KAAK,OAAO;CACvB;CAEA,OAAO;AACT"}

package/esm/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-overlap-clusters.mjs","names":[],"sources":["../../../../src/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.ts"],"sourcesContent":["import { DayPositionedEventData } from '../../../types';\nimport { isEventsOverlap } from '../../../utils';\n\nexport function getOverlapClusters(events: DayPositionedEventData[]): DayPositionedEventData[][] {\n  const clusters: DayPositionedEventData[][] = [];\n  const assigned = new Set<number>();\n\n  for (let i = 0; i < events.length; i++) {\n    if (assigned.has(i)) {\n      continue;\n    }\n\n    const cluster: DayPositionedEventData[] = [events[i]];\n    assigned.add(i);\n\n    let j = 0;\n    while (j < cluster.length) {\n      for (let k = 0; k < events.length; k++) {\n        if (!assigned.has(k) && isEventsOverlap(cluster[j], events[k])) {\n          cluster.push(events[k]);\n          assigned.add(k);\n        }\n      }\n      j++;\n    }\n\n    clusters.push(cluster);\n  }\n\n  return clusters;\n}\n"],"mappings":";;;AAGA,SAAgB,mBAAmB,QAA8D;CAC/F,MAAM,WAAuC,CAAC;CAC9C,MAAM,2BAAW,IAAI,IAAY;CAEjC,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;EACtC,IAAI,SAAS,IAAI,CAAC,GAChB;EAGF,MAAM,UAAoC,CAAC,OAAO,EAAE;EACpD,SAAS,IAAI,CAAC;EAEd,IAAI,IAAI;EACR,OAAO,IAAI,QAAQ,QAAQ;GACzB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,QAAQ,KACjC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,gBAAgB,QAAQ,IAAI,OAAO,EAAE,GAAG;IAC9D,QAAQ,KAAK,OAAO,EAAE;IACtB,SAAS,IAAI,CAAC;GAChB;GAEF;EACF;EAEA,SAAS,KAAK,OAAO;CACvB;CAEA,OAAO;AACT"}

package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts

@@ -1,2 +0,0 @@
-import { DayPositionedEventData } from '../../../types';
-export declare function getOverlapClusters(events: DayPositionedEventData[]): DayPositionedEventData[][];