@mantine/schedule 9.6.0 → 9.6.2

package/cjs/components/Schedule/Schedule.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Schedule.cjs","names":["factory","useProps","useStyles","useUncontrolled","DayView","WeekView","MonthView","YearView","MobileMonthView","Box","classes"],"sources":["../../../src/components/Schedule/Schedule.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateStringValue,\n  DateTimeStringValue,\n  ScheduleEventData,\n  ScheduleMode,\n  ScheduleViewLevel,\n} from '../../types';\nimport { DayView, DayViewProps, DayViewStylesNames } from '../DayView/DayView';\nimport {\n  MobileMonthView,\n  MobileMonthViewProps,\n  MobileMonthViewStylesNames,\n} from '../MobileMonthView/MobileMonthView';\nimport { MonthView, MonthViewProps, MonthViewStylesNames } from '../MonthView/MonthView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport { WeekView, WeekViewProps, WeekViewStylesNames } from '../WeekView/WeekView';\nimport { YearView, YearViewProps, YearViewStylesNames } from '../YearView/YearView';\nimport classes from './Schedule.module.css';\n\nexport type ScheduleStylesNames =\n  | 'root'\n  | 'desktopView'\n  | 'mobileView'\n  | DayViewStylesNames\n  | WeekViewStylesNames\n  | MonthViewStylesNames\n  | YearViewStylesNames\n  | MobileMonthViewStylesNames;\n\nexport type ScheduleLayout = 'default' | 'responsive';\n\ntype ScheduleCommonProps =\n  | 'date'\n  | 'onDateChange'\n  | 'events'\n  | 'locale'\n  | 'radius'\n  | 'labels'\n  | 'renderEventBody'\n  | 'withEventsDragAndDrop'\n  | 'onEventDrop'\n  | 'canDragEvent'\n  | 'onEventDragStart'\n  | 'onEventDragEnd'\n  | 'onTimeSlotClick'\n  | 'onAllDaySlotClick'\n  | 'onEventClick'\n  | 'onDayClick'\n  | 'onMonthClick'\n  | 'withDragSlotSelect'\n  | 'onSlotDragEnd'\n  | 'view'\n  | 'onViewChange'\n  | 'mode'\n  | 'withAgenda'\n  | 'onExternalEventDrop'\n  | 'withEventResize'\n  | 'onEventResize'\n  | 'canResizeEvent'\n  | 'recurrenceExpansionLimit'\n  | 'withInteractiveBackgroundEvents';\n\ntype ScheduleViewProps<T> = Partial<Omit<T, ScheduleCommonProps>>;\n\nexport interface ScheduleProps\n  extends BoxProps, StylesApiProps<ScheduleFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Current date to display (controlled) */\n  date?: Date | DateStringValue;\n\n  /** Default date (uncontrolled) */\n  defaultDate?: Date | DateStringValue;\n\n  /** Called when date changes via navigation */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Current view level (controlled) */\n  view?: ScheduleViewLevel;\n\n  /** Default view level (uncontrolled) */\n  defaultView?: ScheduleViewLevel;\n\n  /** Called when view level changes */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Events to display across all views */\n  events?: ScheduleEventData[];\n\n  /** Locale for date formatting (overrides `DatesProvider`) */\n  locale?: string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Custom event body renderer */\n  renderEventBody?: RenderEventBody;\n\n  /** Enable drag and drop for events @default false */\n  withEventsDragAndDrop?: boolean;\n\n  /** Called when event is dropped */\n  onEventDrop?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be dragged */\n  canDragEvent?: (event: ScheduleEventData) => boolean;\n\n  /** Called when any event drag starts */\n  onEventDragStart?: (event: ScheduleEventData) => void;\n\n  /** Called when any event drag ends */\n  onEventDragEnd?: () => void;\n\n  /** Called when time slot is clicked in DayView/WeekView */\n  onTimeSlotClick?: (data: {\n    slotStart: DateTimeStringValue;\n    slotEnd: DateTimeStringValue;\n    nativeEvent: React.MouseEvent<HTMLButtonElement>;\n  }) => void;\n\n  /** Called when all-day slot is clicked in DayView/WeekView */\n  onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called when a day is clicked in MonthView and YearView */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, enables drag-to-select slot ranges @default false */\n  withDragSlotSelect?: boolean;\n\n  /** Called when a slot range is selected by dragging */\n  onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n  /** Called when event is clicked in any view */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Interaction mode:\n   * - `'default'` allows all interactions\n   * - `'static'` disables event interactions\n   * @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n  onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n  /** If true, events can be resized by dragging their edges @default false */\n  withEventResize?: boolean;\n\n  /** Called when event is resized */\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be resized */\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n  /** 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 */\n  withInteractiveBackgroundEvents?: boolean;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n\n  /** Layout mode:\n   * - `'default'` uses same views on all screen sizes\n   * - `'responsive'` switches to YearView/MobileMonthView on small screens\n   * @default 'default' */\n  layout?: ScheduleLayout;\n\n  /** Props specific to DayView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  dayViewProps?: ScheduleViewProps<DayViewProps>;\n\n  /** Props specific to WeekView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  weekViewProps?: ScheduleViewProps<WeekViewProps>;\n\n  /** Props specific to MonthView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  monthViewProps?: ScheduleViewProps<MonthViewProps>;\n\n  /** Props specific to YearView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  yearViewProps?: ScheduleViewProps<YearViewProps>;\n\n  /** Props specific to MobileMonthView (used in responsive layout) */\n  mobileMonthViewProps?: ScheduleViewProps<MobileMonthViewProps>;\n\n  /** If set, displays an Agenda button in the header of DayView, WeekView and MonthView @default false */\n  withAgenda?: boolean;\n}\n\nexport type ScheduleFactory = Factory<{\n  props: ScheduleProps;\n  ref: HTMLDivElement;\n  stylesNames: ScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ScheduleProps> = {\n  defaultView: 'week',\n  mode: 'default',\n  layout: 'default',\n};\n\nexport const Schedule = factory<ScheduleFactory>((_props) => {\n  const props = useProps('Schedule', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    date,\n    defaultDate,\n    onDateChange,\n    view,\n    defaultView,\n    onViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize,\n    onEventResize,\n    canResizeEvent,\n    withInteractiveBackgroundEvents,\n    recurrenceExpansionLimit,\n    mode,\n    layout,\n    dayViewProps,\n    weekViewProps,\n    monthViewProps,\n    yearViewProps,\n    mobileMonthViewProps,\n    withAgenda,\n    __staticSelector,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScheduleFactory>({\n    name: __staticSelector || 'Schedule',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const [_view, _setView] = useUncontrolled<ScheduleViewLevel>({\n    value: view,\n    defaultValue: defaultView,\n    onChange: onViewChange,\n  });\n\n  const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n    value: date,\n    defaultValue: defaultDate ?? new Date(),\n  });\n\n  const handleDateChange = (newDate: DateStringValue) => {\n    _setDate(newDate);\n    onDateChange?.(newDate);\n  };\n\n  const handleViewChange = (newView: ScheduleViewLevel) => {\n    _setView(newView);\n    onViewChange?.(newView);\n  };\n\n  const handleMonthClick = (monthDate: DateStringValue) => {\n    handleDateChange(monthDate);\n    handleViewChange('month');\n  };\n\n  const commonProps = {\n    date: _date,\n    onDateChange: handleDateChange,\n    view: _view,\n    onViewChange: handleViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize: mode === 'static' ? false : withEventResize,\n    onEventResize,\n    canResizeEvent,\n    recurrenceExpansionLimit,\n    mode,\n    withAgenda,\n  };\n\n  const desktopContent = (() => {\n    switch (_view) {\n      case 'day':\n        return (\n          <DayView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...dayViewProps}\n          />\n        );\n      case 'week':\n        return (\n          <WeekView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...weekViewProps}\n          />\n        );\n      case 'month':\n        return (\n          <MonthView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...monthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  const mobileContent = (() => {\n    switch (_view) {\n      case 'day':\n      case 'week':\n      case 'month':\n        return (\n          <MobileMonthView\n            date={_date}\n            onDateChange={handleDateChange}\n            events={events}\n            locale={locale}\n            radius={radius}\n            labels={labels}\n            mode={mode}\n            recurrenceExpansionLimit={recurrenceExpansionLimit}\n            onYearClick={() => handleViewChange('year')}\n            onEventClick={onEventClick}\n            {...mobileMonthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  if (layout === 'responsive') {\n    return (\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others}>\n        <Box {...getStyles('desktopView')}>{desktopContent}</Box>\n        <Box {...getStyles('mobileView')}>{mobileContent}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box {...getStyles('root')} mod={mod} {...others}>\n      {desktopContent}\n    </Box>\n  );\n});\n\nSchedule.displayName = '@mantine/schedule/Schedule';\nSchedule.classes = classes;\n\nexport namespace Schedule {\n  export type Props = ScheduleProps;\n  export type StylesNames = ScheduleStylesNames;\n  export type Factory = ScheduleFactory;\n  export type Layout = ScheduleLayout;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Schedule.cjs","names":["factory","useProps","useStyles","useUncontrolled","DayView","WeekView","MonthView","YearView","MobileMonthView","Box","classes"],"sources":["../../../src/components/Schedule/Schedule.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { ScheduleLabelsOverride } from '../../labels';\nimport {\n  DateStringValue,\n  DateTimeStringValue,\n  ScheduleEventData,\n  ScheduleMode,\n  ScheduleViewLevel,\n} from '../../types';\nimport { DayView, DayViewProps, DayViewStylesNames } from '../DayView/DayView';\nimport {\n  MobileMonthView,\n  MobileMonthViewProps,\n  MobileMonthViewStylesNames,\n} from '../MobileMonthView/MobileMonthView';\nimport { MonthView, MonthViewProps, MonthViewStylesNames } from '../MonthView/MonthView';\nimport { RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\nimport { WeekView, WeekViewProps, WeekViewStylesNames } from '../WeekView/WeekView';\nimport { YearView, YearViewProps, YearViewStylesNames } from '../YearView/YearView';\nimport classes from './Schedule.module.css';\n\nexport type ScheduleStylesNames =\n  | 'root'\n  | 'desktopView'\n  | 'mobileView'\n  | DayViewStylesNames\n  | WeekViewStylesNames\n  | MonthViewStylesNames\n  | YearViewStylesNames\n  | MobileMonthViewStylesNames;\n\nexport type ScheduleLayout = 'default' | 'responsive';\n\ntype ScheduleCommonProps =\n  | 'date'\n  | 'onDateChange'\n  | 'events'\n  | 'locale'\n  | 'radius'\n  | 'labels'\n  | 'renderEventBody'\n  | 'withEventsDragAndDrop'\n  | 'onEventDrop'\n  | 'canDragEvent'\n  | 'onEventDragStart'\n  | 'onEventDragEnd'\n  | 'onTimeSlotClick'\n  | 'onAllDaySlotClick'\n  | 'onEventClick'\n  | 'onDayClick'\n  | 'onMonthClick'\n  | 'withDragSlotSelect'\n  | 'onSlotDragEnd'\n  | 'view'\n  | 'onViewChange'\n  | 'mode'\n  | 'withAgenda'\n  | 'onExternalEventDrop'\n  | 'withEventResize'\n  | 'onEventResize'\n  | 'canResizeEvent'\n  | 'recurrenceExpansionLimit'\n  | 'withInteractiveBackgroundEvents';\n\ntype ScheduleViewProps<T> = Partial<Omit<T, ScheduleCommonProps>>;\n\nexport interface ScheduleProps\n  extends BoxProps, StylesApiProps<ScheduleFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Current date to display (controlled) */\n  date?: Date | DateStringValue;\n\n  /** Default date (uncontrolled) */\n  defaultDate?: Date | DateStringValue;\n\n  /** Called when date changes via navigation */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Current view level (controlled) */\n  view?: ScheduleViewLevel;\n\n  /** Default view level (uncontrolled) */\n  defaultView?: ScheduleViewLevel;\n\n  /** Called when view level changes */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Events to display across all views */\n  events?: ScheduleEventData[];\n\n  /** Locale for date formatting (overrides `DatesProvider`) */\n  locale?: string;\n\n  /** Key of theme.radius or any valid CSS value to set border-radius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Custom event body renderer */\n  renderEventBody?: RenderEventBody;\n\n  /** Enable drag and drop for events @default false */\n  withEventsDragAndDrop?: boolean;\n\n  /** Called when event is dropped */\n  onEventDrop?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be dragged */\n  canDragEvent?: (event: ScheduleEventData) => boolean;\n\n  /** Called when any event drag starts */\n  onEventDragStart?: (event: ScheduleEventData) => void;\n\n  /** Called when any event drag ends */\n  onEventDragEnd?: () => void;\n\n  /** Called when time slot is clicked in DayView/WeekView */\n  onTimeSlotClick?: (data: {\n    slotStart: DateTimeStringValue;\n    slotEnd: DateTimeStringValue;\n    nativeEvent: React.MouseEvent<HTMLButtonElement>;\n  }) => void;\n\n  /** Called when all-day slot is clicked in DayView/WeekView */\n  onAllDaySlotClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Called when a day is clicked in MonthView and YearView */\n  onDayClick?: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** If set, enables drag-to-select slot ranges @default false */\n  withDragSlotSelect?: boolean;\n\n  /** Called when a slot range is selected by dragging */\n  onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void;\n\n  /** Called when event is clicked in any view */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Interaction mode:\n   * - `'default'` allows all interactions\n   * - `'static'` disables event interactions\n   * @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */\n  onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void;\n\n  /** If true, events can be resized by dragging their edges @default false */\n  withEventResize?: boolean;\n\n  /** Called when event is resized */\n  onEventResize?: (data: {\n    eventId: string | number;\n    newStart: DateTimeStringValue;\n    newEnd: DateTimeStringValue;\n    event: ScheduleEventData;\n  }) => void;\n\n  /** Function to determine if event can be resized */\n  canResizeEvent?: (event: ScheduleEventData) => boolean;\n\n  /** 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 */\n  withInteractiveBackgroundEvents?: boolean;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n\n  /** Layout mode:\n   * - `'default'` uses same views on all screen sizes\n   * - `'responsive'` switches to YearView/MobileMonthView on small screens\n   * @default 'default' */\n  layout?: ScheduleLayout;\n\n  /** Props specific to DayView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  dayViewProps?: ScheduleViewProps<DayViewProps>;\n\n  /** Props specific to WeekView (includes `startTime`, `endTime`, `intervalMinutes`, etc.) */\n  weekViewProps?: ScheduleViewProps<WeekViewProps>;\n\n  /** Props specific to MonthView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  monthViewProps?: ScheduleViewProps<MonthViewProps>;\n\n  /** Props specific to YearView (includes `firstDayOfWeek`, `weekendDays`, etc.) */\n  yearViewProps?: ScheduleViewProps<YearViewProps>;\n\n  /** Props specific to MobileMonthView (used in responsive layout) */\n  mobileMonthViewProps?: ScheduleViewProps<MobileMonthViewProps>;\n\n  /** If set, displays an Agenda button in the header of DayView, WeekView and MonthView @default false */\n  withAgenda?: boolean;\n}\n\nexport type ScheduleFactory = Factory<{\n  props: ScheduleProps;\n  ref: HTMLDivElement;\n  stylesNames: ScheduleStylesNames;\n}>;\n\nconst defaultProps: Partial<ScheduleProps> = {\n  defaultView: 'week',\n  mode: 'default',\n  layout: 'default',\n};\n\nexport const Schedule = factory<ScheduleFactory>((_props) => {\n  const props = useProps('Schedule', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    date,\n    defaultDate,\n    onDateChange,\n    view,\n    defaultView,\n    onViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize,\n    onEventResize,\n    canResizeEvent,\n    withInteractiveBackgroundEvents,\n    recurrenceExpansionLimit,\n    mode,\n    layout,\n    dayViewProps,\n    weekViewProps,\n    monthViewProps,\n    yearViewProps,\n    mobileMonthViewProps,\n    withAgenda,\n    __staticSelector,\n    mod,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScheduleFactory>({\n    name: __staticSelector || 'Schedule',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const [_view, _setView] = useUncontrolled<ScheduleViewLevel>({\n    value: view,\n    defaultValue: defaultView,\n    onChange: onViewChange,\n  });\n\n  const [_date, _setDate] = useUncontrolled<Date | DateStringValue>({\n    value: date,\n    defaultValue: defaultDate ?? new Date(),\n  });\n\n  const handleDateChange = (newDate: DateStringValue) => {\n    _setDate(newDate);\n    onDateChange?.(newDate);\n  };\n\n  const handleViewChange = (newView: ScheduleViewLevel) => {\n    _setView(newView);\n    onViewChange?.(newView);\n  };\n\n  const handleMonthClick = (monthDate: DateStringValue) => {\n    handleDateChange(monthDate);\n    handleViewChange('month');\n  };\n\n  const commonProps = {\n    date: _date,\n    onDateChange: handleDateChange,\n    view: _view,\n    onViewChange: handleViewChange,\n    events,\n    locale,\n    radius,\n    labels,\n    renderEventBody,\n    withEventsDragAndDrop: mode === 'static' ? false : withEventsDragAndDrop,\n    onEventDrop,\n    canDragEvent,\n    onEventDragStart,\n    onEventDragEnd,\n    onTimeSlotClick,\n    onAllDaySlotClick,\n    onDayClick,\n    onEventClick,\n    withDragSlotSelect,\n    onSlotDragEnd,\n    onExternalEventDrop,\n    withEventResize: mode === 'static' ? false : withEventResize,\n    onEventResize,\n    canResizeEvent,\n    recurrenceExpansionLimit,\n    mode,\n    withAgenda,\n  };\n\n  const desktopContent = (() => {\n    switch (_view) {\n      case 'day':\n        return (\n          <DayView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...dayViewProps}\n          />\n        );\n      case 'week':\n        return (\n          <WeekView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...weekViewProps}\n          />\n        );\n      case 'month':\n        return (\n          <MonthView\n            {...commonProps}\n            withInteractiveBackgroundEvents={\n              mode === 'static' ? false : withInteractiveBackgroundEvents\n            }\n            {...monthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  const mobileContent = (() => {\n    switch (_view) {\n      case 'day':\n      case 'week':\n      case 'month':\n        return (\n          <MobileMonthView\n            date={_date}\n            onDateChange={handleDateChange}\n            events={events}\n            locale={locale}\n            radius={radius}\n            labels={labels}\n            mode={mode}\n            recurrenceExpansionLimit={recurrenceExpansionLimit}\n            onYearClick={() => handleViewChange('year')}\n            onEventClick={onEventClick}\n            {...mobileMonthViewProps}\n          />\n        );\n      case 'year':\n        return <YearView {...commonProps} onMonthClick={handleMonthClick} {...yearViewProps} />;\n      default:\n        return null;\n    }\n  })();\n\n  if (layout === 'responsive') {\n    return (\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others}>\n        <Box {...getStyles('desktopView')}>{desktopContent}</Box>\n        <Box {...getStyles('mobileView')}>{mobileContent}</Box>\n      </Box>\n    );\n  }\n\n  return (\n    <Box {...getStyles('root')} mod={mod} {...others}>\n      {desktopContent}\n    </Box>\n  );\n});\n\nSchedule.displayName = '@mantine/schedule/Schedule';\nSchedule.classes = classes;\n\nexport namespace Schedule {\n  export type Props = ScheduleProps;\n  export type StylesNames = ScheduleStylesNames;\n  export type Factory = ScheduleFactory;\n  export type Layout = ScheduleLayout;\n}\n"],"mappings":"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"}

package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs

@@ -3,8 +3,12 @@ let _mantine_core = require("@mantine/core");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/schedule/src/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.tsx
+const RESIZE_EDGES = {
+	vertical: ["top", "bottom"],
+	horizontal: ["start", "end"]
+};
 function ScheduleBackgroundEvent(props) {
-	const { event, interactive, onEventClick, renderEvent, renderEventBody, mod, ...others } = (0, _mantine_core.useProps)("ScheduleBackgroundEvent", null, props);
+	const { event, interactive, onEventClick, renderEvent, renderEventBody, mod, withResize, resizeAxis = "vertical", resizeHandleProps, onResizeStart, isResizing, activeResizeEdge, ...others } = (0, _mantine_core.useProps)("ScheduleBackgroundEvent", null, props);
 	const theme = (0, _mantine_core.useMantineTheme)();
 	const [dragPassthrough, setDragPassthrough] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
@@ -25,6 +29,13 @@ function ScheduleBackgroundEvent(props) {
 		variant: "light",
 		autoContrast: true
 	});
+	const body = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
+	const children = withResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [RESIZE_EDGES[resizeAxis].map((edge) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
+		...resizeHandleProps,
+		mod: { edge },
+		"data-active": isResizing && activeResizeEdge === edge || void 0,
+		onPointerDown: (e) => onResizeStart?.(edge, e)
+	}, edge)), body] }) : body;
 	const rootProps = {
 		...others,
 		__vars: {
@@ -32,8 +43,12 @@ function ScheduleBackgroundEvent(props) {
 			"--bg-event-color": colors.color,
 			"--bg-event-hover": colors.hover
 		},
-		children: typeof renderEventBody === "function" ? renderEventBody(event) : event.title,
-		mod: interactive ? [mod, { interactive: true }] : mod,
+		children,
+		mod: [mod, {
+			interactive,
+			resizable: withResize,
+			resizing: isResizing
+		}],
 		...interactive ? {
 			"data-event-id": event.id,
 			title: event.title,

package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScheduleBackgroundEvent.cjs","names":["useProps","useMantineTheme","useState","UnstyledButton","Box"],"sources":["../../../src/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  UnstyledButton,\n  useMantineTheme,\n  useProps,\n} from '@mantine/core';\nimport { ScheduleEventData } from '../../types';\nimport { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\n\nexport interface ScheduleBackgroundEventProps extends BoxProps, ElementProps<'div', 'onClick'> {\n  /** Background event to display */\n  event: ScheduleEventData;\n\n  /** If set, the root element is a `button` instead of a `div` and the event can be clicked @default false */\n  interactive?: boolean;\n\n  /** Called when the event is clicked, only when `interactive` is set */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Function to fully customize event rendering */\n  renderEvent?: RenderEvent;\n\n  /** Function to customize event body */\n  renderEventBody?: RenderEventBody;\n}\n\nexport function ScheduleBackgroundEvent(props: ScheduleBackgroundEventProps) {\n  const { event, interactive, onEventClick, renderEvent, renderEventBody, mod, ...others } =\n    useProps('ScheduleBackgroundEvent', null, props);\n\n  const theme = useMantineTheme();\n\n  // An interactive background event captures pointer events so it can be clicked, which\n  // also makes it the target of drag events – the drop targets underneath (day cells and\n  // slots) would then never receive `dragover` and could not accept a drop. Stepping out\n  // of the way for the duration of the drag keeps both behaviours working, including for\n  // drags started outside the schedule.\n  const [dragPassthrough, setDragPassthrough] = useState(false);\n\n  useEffect(() => {\n    if (!dragPassthrough) {\n      return undefined;\n    }\n\n    const reset = () => setDragPassthrough(false);\n\n    document.addEventListener('dragend', reset);\n    document.addEventListener('drop', reset);\n    // A drag can end without either of those firing – dropped on another window, or with\n    // propagation stopped. Pointer events are suppressed for the duration of a drag, so\n    // seeing one means the drag is over and the element can capture input again.\n    document.addEventListener('pointermove', reset);\n\n    return () => {\n      document.removeEventListener('dragend', reset);\n      document.removeEventListener('drop', reset);\n      document.removeEventListener('pointermove', reset);\n    };\n  }, [dragPassthrough]);\n\n  const colors = theme.variantColorResolver({\n    color: event.color || theme.primaryColor,\n    theme,\n    variant: 'light',\n    autoContrast: true,\n  });\n\n  const eventProps = {\n    ...others,\n    __vars: {\n      '--bg-event-bg': colors.background,\n      '--bg-event-color': colors.color,\n      '--bg-event-hover': colors.hover,\n    },\n    children: typeof renderEventBody === 'function' ? renderEventBody(event) : event.title,\n    // Composed rather than replaced – `mod` is a public prop, and overwriting it would\n    // silently drop the caller's data modifiers whenever `interactive` is set.\n    mod: interactive ? [mod, { interactive: true }] : mod,\n    ...(interactive\n      ? {\n          'data-event-id': event.id,\n          title: event.title,\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => onEventClick?.(event, e),\n          onDragEnter: () => setDragPassthrough(true),\n          onDragOver: () => setDragPassthrough(true),\n        }\n      : null),\n    // Appended rather than replaced – the views position background events with `style`,\n    // and the array form preserves the function and array style values Box supports.\n    ...(interactive && dragPassthrough\n      ? { style: [others.style, { pointerEvents: 'none' as const }] }\n      : null),\n  };\n\n  // The root element switches between a div and a button depending on `interactive`, so\n  // the shared prop bag cannot satisfy both element types at once.\n  const rootProps = eventProps as Parameters<RenderEvent>[1];\n\n  if (typeof renderEvent === 'function') {\n    return renderEvent(event, rootProps);\n  }\n\n  return interactive ? (\n    <UnstyledButton {...rootProps} />\n  ) : (\n    <Box {...(rootProps as React.ComponentPropsWithoutRef<'div'>)} />\n  );\n}\n\nScheduleBackgroundEvent.displayName = '@mantine/schedule/ScheduleBackgroundEvent';\n"],"mappings":";;;;;AA6BA,SAAgB,wBAAwB,OAAqC;CAC3E,MAAM,EAAE,OAAO,aAAa,cAAc,aAAa,iBAAiB,KAAK,GAAG,YAAA,GAC9EA,cAAAA,SAAAA,CAAS,2BAA2B,MAAM,KAAK;CAEjD,MAAM,SAAA,GAAQC,cAAAA,gBAAAA,CAAgB;CAO9B,MAAM,CAAC,iBAAiB,uBAAA,GAAsBC,MAAAA,SAAAA,CAAS,KAAK;CAE5D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,iBACH;EAGF,MAAM,cAAc,mBAAmB,KAAK;EAE5C,SAAS,iBAAiB,WAAW,KAAK;EAC1C,SAAS,iBAAiB,QAAQ,KAAK;EAIvC,SAAS,iBAAiB,eAAe,KAAK;EAE9C,aAAa;GACX,SAAS,oBAAoB,WAAW,KAAK;GAC7C,SAAS,oBAAoB,QAAQ,KAAK;GAC1C,SAAS,oBAAoB,eAAe,KAAK;EACnD;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,MAAM,SAAS,MAAM;EAC5B;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CA+BD,MAAM,YAAY;EA5BhB,GAAG;EACH,QAAQ;GACN,iBAAiB,OAAO;GACxB,oBAAoB,OAAO;GAC3B,oBAAoB,OAAO;EAC7B;EACA,UAAU,OAAO,oBAAoB,aAAa,gBAAgB,KAAK,IAAI,MAAM;EAGjF,KAAK,cAAc,CAAC,KAAK,EAAE,aAAa,KAAK,CAAC,IAAI;EAClD,GAAI,cACA;GACE,iBAAiB,MAAM;GACvB,OAAO,MAAM;GACb,UAAU,MAA2C,eAAe,OAAO,CAAC;GAC5E,mBAAmB,mBAAmB,IAAI;GAC1C,kBAAkB,mBAAmB,IAAI;EAC3C,IACA;EAGJ,GAAI,eAAe,kBACf,EAAE,OAAO,CAAC,OAAO,OAAO,EAAE,eAAe,OAAgB,CAAC,EAAE,IAC5D;CAKqB;CAE3B,IAAI,OAAO,gBAAgB,YACzB,OAAO,YAAY,OAAO,SAAS;CAGrC,OAAO,cACL,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD,EAAgB,GAAI,UAAY,CAAA,IAEhC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD,EAAK,GAAK,UAAsD,CAAA;AAEpE;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"ScheduleBackgroundEvent.cjs","names":["useProps","useMantineTheme","useState","Box","UnstyledButton"],"sources":["../../../src/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  UnstyledButton,\n  useMantineTheme,\n  useProps,\n} from '@mantine/core';\nimport { ScheduleEventData } from '../../types';\nimport { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent';\n\nexport type ScheduleBackgroundEventResizeEdge = 'top' | 'bottom' | 'start' | 'end';\n\nconst RESIZE_EDGES = {\n  vertical: ['top', 'bottom'],\n  horizontal: ['start', 'end'],\n} satisfies Record<string, ScheduleBackgroundEventResizeEdge[]>;\n\nexport interface ScheduleBackgroundEventProps<\n  Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge,\n>\n  extends BoxProps, ElementProps<'div', 'onClick'> {\n  /** Background event to display */\n  event: ScheduleEventData;\n\n  /** If set, the root element is a `button` instead of a `div` and the event can be clicked @default false */\n  interactive?: boolean;\n\n  /** Called when the event is clicked, only when `interactive` is set */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Function to fully customize event rendering */\n  renderEvent?: RenderEvent;\n\n  /** Function to customize event body */\n  renderEventBody?: RenderEventBody;\n\n  /** If set, the event renders resize handles on both of its edges @default false */\n  withResize?: boolean;\n\n  /** Axis along which the event is resized, defines which edges render handles @default 'vertical' */\n  resizeAxis?: 'vertical' | 'horizontal';\n\n  /** Props passed down to both resize handles, usually a styles api props object */\n  resizeHandleProps?: Record<string, any>;\n\n  /** Called when resize starts on an edge */\n  onResizeStart?: (edge: Edge, e: React.PointerEvent) => void;\n\n  /** If set, the event is currently being resized @default false */\n  isResizing?: boolean;\n\n  /** Edge that is currently being dragged, only relevant when `isResizing` is set */\n  activeResizeEdge?: Edge | null;\n}\n\nexport function ScheduleBackgroundEvent<\n  Edge extends ScheduleBackgroundEventResizeEdge = ScheduleBackgroundEventResizeEdge,\n>(props: ScheduleBackgroundEventProps<Edge>) {\n  const {\n    event,\n    interactive,\n    onEventClick,\n    renderEvent,\n    renderEventBody,\n    mod,\n    withResize,\n    resizeAxis = 'vertical',\n    resizeHandleProps,\n    onResizeStart,\n    isResizing,\n    activeResizeEdge,\n    ...others\n  } = useProps('ScheduleBackgroundEvent', null, props);\n\n  const theme = useMantineTheme();\n\n  // An interactive background event captures pointer events so it can be clicked, which\n  // also makes it the target of drag events – the drop targets underneath (day cells and\n  // slots) would then never receive `dragover` and could not accept a drop. Stepping out\n  // of the way for the duration of the drag keeps both behaviours working, including for\n  // drags started outside the schedule.\n  const [dragPassthrough, setDragPassthrough] = useState(false);\n\n  useEffect(() => {\n    if (!dragPassthrough) {\n      return undefined;\n    }\n\n    const reset = () => setDragPassthrough(false);\n\n    document.addEventListener('dragend', reset);\n    document.addEventListener('drop', reset);\n    // A drag can end without either of those firing – dropped on another window, or with\n    // propagation stopped. Pointer events are suppressed for the duration of a drag, so\n    // seeing one means the drag is over and the element can capture input again.\n    document.addEventListener('pointermove', reset);\n\n    return () => {\n      document.removeEventListener('dragend', reset);\n      document.removeEventListener('drop', reset);\n      document.removeEventListener('pointermove', reset);\n    };\n  }, [dragPassthrough]);\n\n  const colors = theme.variantColorResolver({\n    color: event.color || theme.primaryColor,\n    theme,\n    variant: 'light',\n    autoContrast: true,\n  });\n\n  // Handles are part of the children rather than a wrapper so that `renderEvent` consumers\n  // keep them – the same contract `ScheduleEvent` uses for its own resize handles.\n  const body = typeof renderEventBody === 'function' ? renderEventBody(event) : event.title;\n  const children = withResize ? (\n    <>\n      {(RESIZE_EDGES[resizeAxis] as Edge[]).map((edge) => (\n        <Box\n          key={edge}\n          {...resizeHandleProps}\n          mod={{ edge }}\n          data-active={(isResizing && activeResizeEdge === edge) || undefined}\n          onPointerDown={(e: React.PointerEvent) => onResizeStart?.(edge, e)}\n        />\n      ))}\n      {body}\n    </>\n  ) : (\n    body\n  );\n\n  const eventProps = {\n    ...others,\n    __vars: {\n      '--bg-event-bg': colors.background,\n      '--bg-event-color': colors.color,\n      '--bg-event-hover': colors.hover,\n    },\n    children,\n    // Composed rather than replaced – `mod` is a public prop, and overwriting it would\n    // silently drop the caller's data modifiers whenever `interactive` is set.\n    mod: [mod, { interactive, resizable: withResize, resizing: isResizing }],\n    ...(interactive\n      ? {\n          'data-event-id': event.id,\n          title: event.title,\n          onClick: (e: React.MouseEvent<HTMLButtonElement>) => onEventClick?.(event, e),\n          onDragEnter: () => setDragPassthrough(true),\n          onDragOver: () => setDragPassthrough(true),\n        }\n      : null),\n    // Appended rather than replaced – the views position background events with `style`,\n    // and the array form preserves the function and array style values Box supports.\n    ...(interactive && dragPassthrough\n      ? { style: [others.style, { pointerEvents: 'none' as const }] }\n      : null),\n  };\n\n  // The root element switches between a div and a button depending on `interactive`, so\n  // the shared prop bag cannot satisfy both element types at once.\n  const rootProps = eventProps as Parameters<RenderEvent>[1];\n\n  if (typeof renderEvent === 'function') {\n    return renderEvent(event, rootProps);\n  }\n\n  return interactive ? (\n    <UnstyledButton {...rootProps} />\n  ) : (\n    <Box {...(rootProps as React.ComponentPropsWithoutRef<'div'>)} />\n  );\n}\n\nScheduleBackgroundEvent.displayName = '@mantine/schedule/ScheduleBackgroundEvent';\n"],"mappings":";;;;;AAcA,MAAM,eAAe;CACnB,UAAU,CAAC,OAAO,QAAQ;CAC1B,YAAY,CAAC,SAAS,KAAK;AAC7B;AAwCA,SAAgB,wBAEd,OAA2C;CAC3C,MAAM,EACJ,OACA,aACA,cACA,aACA,iBACA,KACA,YACA,aAAa,YACb,mBACA,eACA,YACA,kBACA,GAAG,YAAA,GACDA,cAAAA,SAAAA,CAAS,2BAA2B,MAAM,KAAK;CAEnD,MAAM,SAAA,GAAQC,cAAAA,gBAAAA,CAAgB;CAO9B,MAAM,CAAC,iBAAiB,uBAAA,GAAsBC,MAAAA,SAAAA,CAAS,KAAK;CAE5D,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,iBACH;EAGF,MAAM,cAAc,mBAAmB,KAAK;EAE5C,SAAS,iBAAiB,WAAW,KAAK;EAC1C,SAAS,iBAAiB,QAAQ,KAAK;EAIvC,SAAS,iBAAiB,eAAe,KAAK;EAE9C,aAAa;GACX,SAAS,oBAAoB,WAAW,KAAK;GAC7C,SAAS,oBAAoB,QAAQ,KAAK;GAC1C,SAAS,oBAAoB,eAAe,KAAK;EACnD;CACF,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,MAAM,SAAS,MAAM;EAC5B;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,MAAM,OAAO,OAAO,oBAAoB,aAAa,gBAAgB,KAAK,IAAI,MAAM;CACpF,MAAM,WAAW,aACf,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACI,aAAa,WAAW,CAAY,KAAK,SACzC,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,KAAD;EAEE,GAAI;EACJ,KAAK,EAAE,KAAK;EACZ,eAAc,cAAc,qBAAqB,QAAS,KAAA;EAC1D,gBAAgB,MAA0B,gBAAgB,MAAM,CAAC;CAClE,GALM,IAKN,CACF,GACA,IACD,EAAA,CAAA,IAEF;CAgCF,MAAM,YAAY;EA5BhB,GAAG;EACH,QAAQ;GACN,iBAAiB,OAAO;GACxB,oBAAoB,OAAO;GAC3B,oBAAoB,OAAO;EAC7B;EACA;EAGA,KAAK,CAAC,KAAK;GAAE;GAAa,WAAW;GAAY,UAAU;EAAW,CAAC;EACvE,GAAI,cACA;GACE,iBAAiB,MAAM;GACvB,OAAO,MAAM;GACb,UAAU,MAA2C,eAAe,OAAO,CAAC;GAC5E,mBAAmB,mBAAmB,IAAI;GAC1C,kBAAkB,mBAAmB,IAAI;EAC3C,IACA;EAGJ,GAAI,eAAe,kBACf,EAAE,OAAO,CAAC,OAAO,OAAO,EAAE,eAAe,OAAgB,CAAC,EAAE,IAC5D;CAKqB;CAE3B,IAAI,OAAO,gBAAgB,YACzB,OAAO,YAAY,OAAO,SAAS;CAGrC,OAAO,cACL,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,gBAAD,EAAgB,GAAI,UAAY,CAAA,IAEhC,iBAAA,GAAA,kBAAA,IAAA,CAACD,cAAAA,KAAD,EAAK,GAAK,UAAsD,CAAA;AAEpE;AAEA,wBAAwB,cAAc"}

package/cjs/components/ScheduleEvent/ScheduleEvent.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScheduleEvent.module.cjs","names":[],"sources":["../../../src/components/ScheduleEvent/ScheduleEvent.module.css"],"sourcesContent":[".event {\n  padding: 1px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  position: relative;\n  z-index: 3;\n\n  &:where([data-auto-size]) {\n    container-type: size;\n  }\n\n  &:where([data-draggable]) .eventInner {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.2;\n\n    .eventInner {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-any-dragging]:not([data-dragging])) {\n    pointer-events: none;\n\n    .eventInner {\n      pointer-events: none;\n    }\n  }\n\n  &:where([data-static]) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &:where([data-resizing]) {\n    z-index: 10;\n\n    .eventInner {\n      @mixin hover {\n        background-color: var(--event-bg);\n      }\n    }\n  }\n\n  &:where([data-hanging='start'], [data-hanging='both']) {\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-start: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-start: 6px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n\n  &:where([data-hanging='end'], [data-hanging='both']) {\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-end: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-end: 6px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  &:where([data-clip-start]) {\n    .eventInner {\n      padding-inline-start: 12px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);\n    }\n  }\n\n  &:where([data-clip-end]) {\n    .eventInner {\n      padding-inline-end: 12px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);\n    }\n  }\n\n  &:where([data-clip-start][data-clip-end]) {\n    .eventInner {\n      clip-path: polygon(\n        10px 0,\n        calc(100% - 10px) 0,\n        100% 50%,\n        calc(100% - 10px) 100%,\n        10px 100%,\n        0 50%\n      );\n    }\n  }\n}\n\n.eventInner {\n  background-color: var(--event-bg);\n  color: var(--event-color);\n  pointer-events: all;\n  border-radius: min(var(--event-radius), 50%);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: 12px;\n  line-height: 1;\n  padding: 3px 4px;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n\n  &:where([data-nowrap]) {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 1.25;\n  }\n\n  &:where([data-size='md']) {\n    font-size: 14px;\n    padding: 4px 6px;\n  }\n\n  @mixin hover {\n    background-color: var(--event-hover);\n  }\n\n  &:where([data-auto-size]) {\n    @container (max-width: 12px) {\n      padding-inline: 0;\n    }\n\n    @container (min-width: 16px) {\n      width: calc(100% - 2px);\n      margin-inline: auto;\n    }\n\n    @container (max-height: 18px) {\n      font-size: 9px;\n      padding-block: 0px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n\n  .event[data-static] & {\n    cursor: default;\n    pointer-events: none;\n\n    @mixin hover {\n      background-color: var(--event-bg);\n    }\n  }\n\n  :where([data-slot-dragging]) & {\n    pointer-events: none;\n  }\n}\n\n.eventResizeHandle {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40%;\n  max-width: 40px;\n  height: 4px;\n  border-radius: 2px;\n  cursor: ns-resize;\n  pointer-events: all;\n  z-index: 4;\n  touch-action: none;\n  background-color: var(--event-color);\n  opacity: 0;\n  transition: opacity 100ms ease;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: -4px -6px;\n  }\n\n  &:where([data-edge='top']) {\n    top: -2px;\n  }\n\n  &:where([data-edge='bottom']) {\n    bottom: -2px;\n  }\n\n  .event:where(:hover, [data-resizing]) & {\n    opacity: 0.5;\n  }\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ScheduleEvent.module.cjs","names":[],"sources":["../../../src/components/ScheduleEvent/ScheduleEvent.module.css"],"sourcesContent":[".event {\n  padding: 1px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  position: relative;\n  z-index: 3;\n\n  &:where([data-auto-size]) {\n    container-type: size;\n  }\n\n  &:where([data-draggable]) .eventInner {\n    cursor: grab;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.2;\n\n    .eventInner {\n      cursor: grabbing;\n    }\n  }\n\n  &:where([data-any-dragging]:not([data-dragging])) {\n    pointer-events: none;\n\n    .eventInner {\n      pointer-events: none;\n    }\n  }\n\n  &:where([data-static]) {\n    pointer-events: none;\n    cursor: default;\n  }\n\n  &:where([data-cascade]) {\n    z-index: var(--event-z-index, 3);\n    transition: z-index 0s;\n\n    .eventInner {\n      box-shadow: 0 0 0 1px var(--mantine-color-body);\n    }\n\n    &:where(:not([data-resizing], [data-dragging])) {\n      @mixin hover {\n        z-index: var(--event-z-index-raised, 9);\n        transition-delay: var(--event-raise-delay, 600ms);\n      }\n\n      /* Keyboard focus reveals a covered event immediately, hover waits for the dwell delay */\n      &:where(:focus-visible) {\n        z-index: var(--event-z-index-raised, 9);\n      }\n    }\n  }\n\n  &:where([data-resizing]) {\n    z-index: 10;\n\n    .eventInner {\n      @mixin hover {\n        background-color: var(--event-bg);\n      }\n    }\n  }\n\n  &:where([data-cascade][data-resizing]) {\n    z-index: var(--event-cascade-interaction-z-index, 999);\n  }\n\n  &:where([data-hanging='start'], [data-hanging='both']) {\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-start: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-start: 6px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n    }\n  }\n\n  &:where([data-hanging='end'], [data-hanging='both']) {\n    &::after {\n      content: '';\n      position: absolute;\n      inset-block: 2px;\n      inset-inline-end: 2px;\n      width: 2px;\n      background-color: var(--event-color);\n      border-radius: 10px;\n      opacity: 0.3;\n    }\n\n    .eventInner {\n      padding-inline-end: 6px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n  }\n\n  &:where([data-clip-start]) {\n    .eventInner {\n      padding-inline-start: 12px;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);\n    }\n  }\n\n  &:where([data-clip-end]) {\n    .eventInner {\n      padding-inline-end: 12px;\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);\n    }\n  }\n\n  &:where([data-clip-start][data-clip-end]) {\n    .eventInner {\n      clip-path: polygon(\n        10px 0,\n        calc(100% - 10px) 0,\n        100% 50%,\n        calc(100% - 10px) 100%,\n        10px 100%,\n        0 50%\n      );\n    }\n  }\n}\n\n.eventInner {\n  background-color: var(--event-bg);\n  color: var(--event-color);\n  pointer-events: all;\n  border-radius: min(var(--event-radius), 50%);\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: 12px;\n  line-height: 1;\n  padding: 3px 4px;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n\n  &:where([data-nowrap]) {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 1.25;\n  }\n\n  &:where([data-size='md']) {\n    font-size: 14px;\n    padding: 4px 6px;\n  }\n\n  @mixin hover {\n    background-color: var(--event-hover);\n  }\n\n  &:where([data-auto-size]) {\n    @container (max-width: 12px) {\n      padding-inline: 0;\n    }\n\n    @container (min-width: 16px) {\n      width: calc(100% - 2px);\n      margin-inline: auto;\n    }\n\n    @container (max-height: 18px) {\n      font-size: 9px;\n      padding-block: 0px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  }\n\n  .event[data-static] & {\n    cursor: default;\n    pointer-events: none;\n\n    @mixin hover {\n      background-color: var(--event-bg);\n    }\n  }\n\n  :where([data-slot-dragging]) & {\n    pointer-events: none;\n  }\n}\n\n.eventResizeHandle {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40%;\n  max-width: 40px;\n  height: 4px;\n  border-radius: 2px;\n  cursor: ns-resize;\n  pointer-events: all;\n  z-index: 4;\n  touch-action: none;\n  background-color: var(--event-color);\n  opacity: 0;\n  transition: opacity 100ms ease;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: -4px -6px;\n  }\n\n  &:where([data-edge='top']) {\n    top: -2px;\n  }\n\n  &:where([data-edge='bottom']) {\n    bottom: -2px;\n  }\n\n  .event:where(:hover, [data-resizing]) & {\n    opacity: 0.5;\n  }\n\n  @mixin hover {\n    opacity: 0.8;\n  }\n}\n"],"mappings":""}

package/cjs/components/WeekView/WeekView.cjs

@@ -58,7 +58,9 @@ const defaultProps = {
 	withDragSlotSelect: false,
 	withEventResize: false,
 	mode: "default",
-	withInteractiveBackgroundEvents: false
+	withInteractiveBackgroundEvents: false,
+	eventOverlapMode: "columns",
+	eventOverlapRaiseDelay: 600
 };
 const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, allDaySlotHeight, slotHeight }) => ({ weekView: {
 	"--week-view-radius": radius !== void 0 ? (0, _mantine_core.getRadius)(radius) : void 0,
@@ -67,7 +69,7 @@ const varsResolver = (0, _mantine_core.createVarsResolver)((_theme, { radius, al
 } }));
 const WeekView = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("WeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, eventOverlapMode, eventOverlapRaiseDelay, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = (0, react.useState)(false);
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: __staticSelector,
@@ -216,7 +218,8 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		intervalMinutes,
 		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
-		canResizeEvent
+		canResizeEvent,
+		withBackgroundEvents: withInteractiveBackgroundEvents
 	});
 	const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static";
 	const handleTimeSlotClick = (day, slotTime, e) => {
@@ -251,7 +254,8 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 		intervalMinutes,
 		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek),
 		weekendDays: ctx.getWeekendDays(weekendDays),
-		withWeekendDays
+		withWeekendDays,
+		eventOverlapMode
 	});
 	const timeValues = slots.reduce((acc, interval) => {
 		if (!interval.isHourStart) return acc;
@@ -400,18 +404,40 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 	}, (0, dayjs.default)(day).date())));
 	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const days = weekdays.map((day, dayIndex) => {
-		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
-			event,
-			renderEvent,
-			renderEventBody,
-			interactive: interactiveBackgroundEvents,
-			onEventClick,
-			...getStyles("weekViewBackgroundEvent", { style: {
-				top: `${event.position.top}%`,
-				height: `${event.position.height}%`,
-				width: "100%"
-			} })
-		}, `bg-${event.id}`));
+		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => {
+			const eventDate = (0, dayjs.default)(day).format("YYYY-MM-DD");
+			const isResizable = eventResize.isResizableEvent(event);
+			const resizePosition = eventResize.getResizePosition(event.id, eventDate);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ScheduleBackgroundEvent.ScheduleBackgroundEvent, {
+				event,
+				renderEvent,
+				renderEventBody,
+				interactive: interactiveBackgroundEvents,
+				onEventClick: onEventClick ? (clickedEvent, e) => {
+					if (!eventResize.wasResizing()) onEventClick(clickedEvent, e);
+				} : void 0,
+				withResize: isResizable,
+				isResizing: resizePosition !== null,
+				resizeHandleProps: getStyles("weekViewBackgroundEventResizeHandle"),
+				onResizeStart: isResizable ? (edge, e) => {
+					const container = daySlotsContainersRef.current[dayIndex];
+					if (container) eventResize.handleResizeStart({
+						event,
+						edge,
+						container,
+						originalTop: event.position.top,
+						originalHeight: event.position.height,
+						eventDate,
+						pointerEvent: e
+					});
+				} : void 0,
+				...getStyles("weekViewBackgroundEvent", { style: {
+					top: `${resizePosition ? resizePosition.top : event.position.top}%`,
+					height: `${resizePosition ? resizePosition.height : event.position.height}%`,
+					width: "100%"
+				} })
+			}, `bg-${event.id}`);
+		});
 		const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
 			const eventIsAllDay = require_is_all_day_event.isAllDayEvent({
 				event,
@@ -448,6 +474,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 				onClick: onEventClick ? (e) => {
 					if (!eventResize.wasResizing()) onEventClick(event, e);
 				} : void 0,
+				mod: { cascade: eventOverlapMode === "cascade" },
 				style: {
 					position: "absolute",
 					...require_get_time_axis_event_style.getTimeAxisEventStyle({
@@ -456,7 +483,9 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 						axis: "vertical"
 					}),
 					left: `${event.position.offset}%`,
-					width: `${event.position.width}%`
+					width: `${event.position.width}%`,
+					"--event-z-index": event.position.column + 3,
+					"--event-z-index-raised": event.position.overlaps + 3
 				}
 			}, event.id);
 		});
@@ -635,6 +664,7 @@ const WeekView = (0, _mantine_core.factory)((_props) => {
 			!agendaOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Box, {
 				...getStyles("weekViewRoot"),
 				__vars: {
+					"--event-raise-delay": `${eventOverlapRaiseDelay}ms`,
 					"--indicator-offset-index": currentWeekdayIndex === -1 ? void 0 : `${currentWeekdayIndex + 1}`,
 					"--number-of-days": withWeekendDays ? "7" : `${7 - ctx.getWeekendDays(weekendDays).length}`
 				},