@mantine/schedule 9.7.1 → 9.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/DayView/DayView.cjs +45 -29
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/DayView/DayView.module.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.cjs +60 -23
- package/cjs/components/MobileMonthView/MobileMonthView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.module.cjs.map +1 -1
- package/cjs/components/MobileMonthView/get-mobile-month-view-weeks.cjs +32 -0
- package/cjs/components/MobileMonthView/get-mobile-month-view-weeks.cjs.map +1 -0
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs +15 -7
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs +11 -6
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs.map +1 -1
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.module.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +15 -7
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs +11 -6
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs.map +1 -1
- package/cjs/components/Schedule/Schedule.cjs +2 -0
- package/cjs/components/Schedule/Schedule.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +29 -19
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.module.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs +13 -7
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs +1 -1
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/cjs/index.cjs +10 -0
- package/cjs/utils/add-minutes-to-time/add-minutes-to-time.cjs +17 -0
- package/cjs/utils/add-minutes-to-time/add-minutes-to-time.cjs.map +1 -0
- package/cjs/utils/clamp-slot-label-interval/clamp-slot-label-interval.cjs +22 -0
- package/cjs/utils/clamp-slot-label-interval/clamp-slot-label-interval.cjs.map +1 -0
- package/cjs/utils/get-business-hours-mod/get-business-hours-mod.cjs +74 -17
- package/cjs/utils/get-business-hours-mod/get-business-hours-mod.cjs.map +1 -1
- package/cjs/utils/get-day-time-intervals/get-day-time-intervals.cjs +7 -2
- package/cjs/utils/get-day-time-intervals/get-day-time-intervals.cjs.map +1 -1
- package/cjs/utils/get-slot-label-groups/get-slot-label-groups.cjs +26 -0
- package/cjs/utils/get-slot-label-groups/get-slot-label-groups.cjs.map +1 -0
- package/cjs/{components/YearView → utils/get-visible-week-days}/get-visible-week-days.cjs +1 -1
- package/cjs/utils/get-visible-week-days/get-visible-week-days.cjs.map +1 -0
- package/esm/components/DayView/DayView.mjs +46 -30
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/DayView/DayView.module.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.mjs +60 -23
- package/esm/components/MobileMonthView/MobileMonthView.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.module.mjs.map +1 -1
- package/esm/components/MobileMonthView/get-mobile-month-view-weeks.mjs +30 -0
- package/esm/components/MobileMonthView/get-mobile-month-view-weeks.mjs.map +1 -0
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs +16 -8
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs +12 -7
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs.map +1 -1
- package/esm/components/ResourcesMonthView/ResourcesMonthView.module.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +16 -8
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs +12 -7
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs.map +1 -1
- package/esm/components/Schedule/Schedule.mjs +2 -0
- package/esm/components/Schedule/Schedule.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +30 -20
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.module.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs +14 -8
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +1 -1
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs +1 -1
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/esm/index.mjs +6 -2
- package/esm/utils/add-minutes-to-time/add-minutes-to-time.mjs +17 -0
- package/esm/utils/add-minutes-to-time/add-minutes-to-time.mjs.map +1 -0
- package/esm/utils/clamp-slot-label-interval/clamp-slot-label-interval.mjs +22 -0
- package/esm/utils/clamp-slot-label-interval/clamp-slot-label-interval.mjs.map +1 -0
- package/esm/utils/get-business-hours-mod/get-business-hours-mod.mjs +74 -18
- package/esm/utils/get-business-hours-mod/get-business-hours-mod.mjs.map +1 -1
- package/esm/utils/get-day-time-intervals/get-day-time-intervals.mjs +7 -2
- package/esm/utils/get-day-time-intervals/get-day-time-intervals.mjs.map +1 -1
- package/esm/utils/get-slot-label-groups/get-slot-label-groups.mjs +26 -0
- package/esm/utils/get-slot-label-groups/get-slot-label-groups.mjs.map +1 -0
- package/esm/{components/YearView → utils/get-visible-week-days}/get-visible-week-days.mjs +1 -1
- package/esm/utils/get-visible-week-days/get-visible-week-days.mjs.map +1 -0
- package/lib/components/DayView/DayView.d.ts +3 -1
- package/lib/components/MobileMonthView/MobileMonthView.d.ts +2 -0
- package/lib/components/MobileMonthView/get-mobile-month-view-weeks.d.ts +11 -0
- package/lib/components/ResourcesDayView/ResourcesDayView.d.ts +1 -1
- package/lib/components/ResourcesDayView/ResourcesDayViewColumn.d.ts +2 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts +1 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekViewRow.d.ts +2 -1
- package/lib/components/Schedule/Schedule.d.ts +1 -1
- package/lib/components/WeekView/WeekView.d.ts +3 -1
- package/lib/utils/add-minutes-to-time/add-minutes-to-time.d.ts +1 -0
- package/lib/utils/clamp-slot-label-interval/clamp-slot-label-interval.d.ts +9 -0
- package/lib/utils/get-business-hours-mod/get-business-hours-mod.d.ts +24 -5
- package/lib/utils/get-day-time-intervals/get-day-time-intervals.d.ts +5 -1
- package/lib/utils/get-slot-label-groups/get-slot-label-groups.d.ts +15 -0
- package/lib/utils/index.d.ts +7 -2
- package/package.json +4 -4
- package/styles.css +178 -9
- package/styles.layer.css +178 -9
- package/cjs/components/YearView/get-visible-week-days.cjs.map +0 -1
- package/esm/components/YearView/get-visible-week-days.mjs.map +0 -1
- /package/lib/{components/YearView → utils/get-visible-week-days}/get-visible-week-days.d.ts +0 -0
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { getMonthDays } from "../../utils/get-month-days/get-month-days.mjs";
|
|
3
|
+
import { isSameMonth } from "../../utils/is-same-month/is-same-month.mjs";
|
|
4
|
+
import { getVisibleWeekDays } from "../../utils/get-visible-week-days/get-visible-week-days.mjs";
|
|
5
|
+
import dayjs from "dayjs";
|
|
6
|
+
//#region packages/@mantine/schedule/src/components/MobileMonthView/get-mobile-month-view-weeks.ts
|
|
7
|
+
const WEEKS_IN_MONTH_VIEW = 6;
|
|
8
|
+
const DAYS_IN_WEEK = 7;
|
|
9
|
+
function getNextWeek(week) {
|
|
10
|
+
const start = dayjs(week[week.length - 1]).add(1, "day");
|
|
11
|
+
return Array.from({ length: DAYS_IN_WEEK }, (_, index) => start.add(index, "day").format("YYYY-MM-DD 00:00:00"));
|
|
12
|
+
}
|
|
13
|
+
function getMobileMonthViewWeeks({ month, firstDayOfWeek, consistentWeeks, withOutsideDays, weekendDays, withWeekendDays }) {
|
|
14
|
+
const weeks = getMonthDays({
|
|
15
|
+
month: dayjs(month).format("YYYY-MM-DD"),
|
|
16
|
+
firstDayOfWeek,
|
|
17
|
+
consistentWeeks: false
|
|
18
|
+
}).filter((week) => getVisibleWeekDays({
|
|
19
|
+
week,
|
|
20
|
+
weekendDays,
|
|
21
|
+
withWeekendDays
|
|
22
|
+
}).some((day) => withOutsideDays || isSameMonth(day, month)));
|
|
23
|
+
if (!consistentWeeks || weeks.length === 0) return weeks;
|
|
24
|
+
while (weeks.length < WEEKS_IN_MONTH_VIEW) weeks.push(getNextWeek(weeks[weeks.length - 1]));
|
|
25
|
+
return weeks;
|
|
26
|
+
}
|
|
27
|
+
//#endregion
|
|
28
|
+
export { getMobileMonthViewWeeks };
|
|
29
|
+
|
|
30
|
+
//# sourceMappingURL=get-mobile-month-view-weeks.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-mobile-month-view-weeks.mjs","names":[],"sources":["../../../src/components/MobileMonthView/get-mobile-month-view-weeks.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getMonthDays, getVisibleWeekDays, isSameMonth } from '../../utils';\n\nconst WEEKS_IN_MONTH_VIEW = 6;\nconst DAYS_IN_WEEK = 7;\n\ninterface GetMobileMonthViewWeeksInput {\n month: AnyDateValue;\n firstDayOfWeek: DayOfWeek;\n consistentWeeks: boolean | undefined;\n withOutsideDays: boolean | undefined;\n weekendDays: DayOfWeek[];\n withWeekendDays: boolean | undefined;\n}\n\nfunction getNextWeek(week: DateStringValue[]): DateStringValue[] {\n const start = dayjs(week[week.length - 1]).add(1, 'day');\n return Array.from({ length: DAYS_IN_WEEK }, (_, index) =>\n start.add(index, 'day').format('YYYY-MM-DD 00:00:00')\n );\n}\n\nexport function getMobileMonthViewWeeks({\n month,\n firstDayOfWeek,\n consistentWeeks,\n withOutsideDays,\n weekendDays,\n withWeekendDays,\n}: GetMobileMonthViewWeeksInput): DateStringValue[][] {\n const weeks = getMonthDays({\n month: dayjs(month).format('YYYY-MM-DD'),\n firstDayOfWeek,\n consistentWeeks: false,\n }).filter((week) =>\n getVisibleWeekDays({ week, weekendDays, withWeekendDays }).some(\n (day) => withOutsideDays || isSameMonth(day, month)\n )\n );\n\n if (!consistentWeeks || weeks.length === 0) {\n return weeks;\n }\n\n while (weeks.length < WEEKS_IN_MONTH_VIEW) {\n weeks.push(getNextWeek(weeks[weeks.length - 1]));\n }\n\n return weeks;\n}\n"],"mappings":";;;;;;AAIA,MAAM,sBAAsB;AAC5B,MAAM,eAAe;AAWrB,SAAS,YAAY,MAA4C;CAC/D,MAAM,QAAQ,MAAM,KAAK,KAAK,SAAS,EAAE,CAAC,CAAC,IAAI,GAAG,KAAK;CACvD,OAAO,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAC9C,MAAM,IAAI,OAAO,KAAK,CAAC,CAAC,OAAO,qBAAqB,CACtD;AACF;AAEA,SAAgB,wBAAwB,EACtC,OACA,gBACA,iBACA,iBACA,aACA,mBACoD;CACpD,MAAM,QAAQ,aAAa;EACzB,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,YAAY;EACvC;EACA,iBAAiB;CACnB,CAAC,CAAC,CAAC,QAAQ,SACT,mBAAmB;EAAE;EAAM;EAAa;CAAgB,CAAC,CAAC,CAAC,MACxD,QAAQ,mBAAmB,YAAY,KAAK,KAAK,CACpD,CACF;CAEA,IAAI,CAAC,mBAAmB,MAAM,WAAW,GACvC,OAAO;CAGT,OAAO,MAAM,SAAS,qBACpB,MAAM,KAAK,YAAY,MAAM,MAAM,SAAS,EAAE,CAAC;CAGjD,OAAO;AACT"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { getLabel } from "../../labels.mjs";
|
|
3
3
|
import { formatDate } from "../../utils/format-date/format-date.mjs";
|
|
4
|
+
import { clampIntervalMinutes } from "../../utils/clamp-interval-minutes/clamp-interval-minutes.mjs";
|
|
4
5
|
import { getDayTimeIntervals } from "../../utils/get-day-time-intervals/get-day-time-intervals.mjs";
|
|
5
6
|
import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
|
|
6
7
|
import { getCurrentTimePosition } from "../../utils/get-current-time-position/get-current-time-position.mjs";
|
|
@@ -9,9 +10,10 @@ import { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.mjs
|
|
|
9
10
|
import { getDayPosition } from "../../utils/get-day-position/get-day-position.mjs";
|
|
10
11
|
import { getTimeAxisEventStyle } from "../../utils/get-time-axis-event-style/get-time-axis-event-style.mjs";
|
|
11
12
|
import { calculateDropTime } from "../../utils/calculate-drop-time/calculate-drop-time.mjs";
|
|
12
|
-
import {
|
|
13
|
+
import { getBusinessHoursState } from "../../utils/get-business-hours-mod/get-business-hours-mod.mjs";
|
|
13
14
|
import { expandRecurringEvents } from "../../utils/expand-recurring-events/expand-recurring-events.mjs";
|
|
14
15
|
import { getOrderedResources } from "../../utils/get-ordered-resources/get-ordered-resources.mjs";
|
|
16
|
+
import { addMinutesToTime } from "../../utils/add-minutes-to-time/add-minutes-to-time.mjs";
|
|
15
17
|
import { handleResourcesGridKeyDown } from "../../utils/handle-resources-grid-key-down/handle-resources-grid-key-down.mjs";
|
|
16
18
|
import { getGroupToResourceIdMap } from "../../utils/get-group-to-resource-id-map/get-group-to-resource-id-map.mjs";
|
|
17
19
|
import { getIndexFromDragPoint } from "../../utils/get-index-from-drag-point/get-index-from-drag-point.mjs";
|
|
@@ -56,7 +58,9 @@ const varsResolver = createVarsResolver((_theme, { radius, slotWidth, rowHeight,
|
|
|
56
58
|
"--resources-day-view-radius": radius ? getRadius(radius) : void 0,
|
|
57
59
|
"--resources-day-view-slot-width": rem(slotWidth),
|
|
58
60
|
"--resources-day-view-row-height": rem(rowHeight),
|
|
59
|
-
"--resources-day-view-group-label-width": rem(groupLabelWidth)
|
|
61
|
+
"--resources-day-view-group-label-width": rem(groupLabelWidth),
|
|
62
|
+
"--resources-day-view-business-hours-bg": void 0,
|
|
63
|
+
"--resources-day-view-non-business-hours-bg": void 0
|
|
60
64
|
} }));
|
|
61
65
|
const ResourcesDayView = factory((_props) => {
|
|
62
66
|
const props = useProps("ResourcesDayView", defaultProps, _props);
|
|
@@ -291,17 +295,20 @@ const ResourcesDayView = factory((_props) => {
|
|
|
291
295
|
locale: ctx.getLocale(locale),
|
|
292
296
|
format: slotLabelFormat
|
|
293
297
|
});
|
|
298
|
+
const labelBusinessHours = getBusinessHoursState({
|
|
299
|
+
time: interval.startTime,
|
|
300
|
+
endTime: addMinutesToTime(interval.startTime, clampIntervalMinutes(intervalMinutes)),
|
|
301
|
+
businessHours,
|
|
302
|
+
highlightBusinessHours
|
|
303
|
+
});
|
|
294
304
|
return /* @__PURE__ */ createElement(Box, {
|
|
295
305
|
...getStyles("resourcesDayViewTimeLabel"),
|
|
296
306
|
key: interval.startTime,
|
|
297
307
|
mod: {
|
|
298
308
|
"hour-start": interval.isHourStart,
|
|
299
|
-
...
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
highlightBusinessHours
|
|
303
|
-
})
|
|
304
|
-
}
|
|
309
|
+
...labelBusinessHours.mod
|
|
310
|
+
},
|
|
311
|
+
__vars: labelBusinessHours.vars
|
|
305
312
|
}, label);
|
|
306
313
|
});
|
|
307
314
|
const slotsRef = useRef([]);
|
|
@@ -522,6 +529,7 @@ const ResourcesDayView = factory((_props) => {
|
|
|
522
529
|
}) : [];
|
|
523
530
|
return /* @__PURE__ */ jsxs(ResourcesDayViewRow, {
|
|
524
531
|
resource,
|
|
532
|
+
intervalMinutes,
|
|
525
533
|
resourceIndex,
|
|
526
534
|
date: dateStr,
|
|
527
535
|
slots,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesDayView.mjs","names":["classes"],"sources":["../../../src/components/ResourcesDayView/ResourcesDayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaProps,\n StylesApiProps,\n useDirection,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval, useIsomorphicEffect, useMergedRef, useMounted } from '@mantine/hooks';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useHorizontalEventResize } from '../../hooks/use-horizontal-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n AnyDateValue,\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n DayPositionedEventData,\n PreventEventOverlap,\n ScheduleCanDropEventData,\n ScheduleCanDropExternalEventData,\n ScheduleCanResizeEventToData,\n ScheduleEventData,\n ScheduleEventPlacementRejectedData,\n ScheduleMode,\n ScheduleResourceData,\n ScheduleResourceGroup,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n expandRecurringEvents,\n formatDate,\n getBusinessHoursMod,\n getDayPosition,\n getCurrentTimePosition,\n getDayTimeIntervals,\n getGroupToResourceIdMap,\n getIndexFromDragPoint,\n getOrderedResources,\n getOverlapClusters,\n getTimeAxisEventStyle,\n handleResourcesGridKeyDown,\n isAllDayEvent,\n isInTimeRange,\n ResourcesGridControlsRef,\n toDateString,\n} from '../../utils';\nimport { DragContext, DragContextValue } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport { ScheduleBackgroundEvent } from '../ScheduleBackgroundEvent';\nimport { RenderEvent, RenderEventBody, ScheduleEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getResourcesDayViewEvents } from './get-resources-day-view-events/get-resources-day-view-events';\nimport { ResourcesDayViewRow } from './ResourcesDayViewColumn';\nimport classes from './ResourcesDayView.module.css';\n\nexport type ResourcesDayViewStylesNames =\n | 'resourcesDayView'\n | 'resourcesDayViewRoot'\n | 'resourcesDayViewInner'\n | 'resourcesDayViewTimeLabelsRow'\n | 'resourcesDayViewScrollArea'\n | 'resourcesDayViewCorner'\n | 'resourcesDayViewTimeLabel'\n | 'resourcesDayViewResourceLabel'\n | 'resourcesDayViewRow'\n | 'resourcesDayViewRowSlot'\n | 'resourcesDayViewRowSlots'\n | 'resourcesDayViewBackgroundEvent'\n | 'resourcesDayViewAllDayEvent'\n | 'resourcesDayViewCurrentTimeIndicator'\n | 'resourcesDayViewCurrentTimeIndicatorLine'\n | 'resourcesDayViewCurrentTimeIndicatorThumb'\n | 'resourcesDayViewCurrentTimeIndicatorTimeBubble'\n | 'resourcesDayViewEventWrapper'\n | 'resourcesDayViewDragPreview'\n | 'resourcesDayViewResizeHandle'\n | 'resourcesDayViewGroupColumn'\n | 'resourcesDayViewGroupColumnEmpty'\n | MoreEventsStylesNames\n | CombinedScheduleHeaderStylesNames;\n\nexport type ResourcesDayViewCssVariables = {\n resourcesDayView:\n | '--resources-day-view-radius'\n | '--resources-day-view-slot-width'\n | '--resources-day-view-row-height'\n | '--resources-day-view-group-label-width';\n};\n\nexport interface ResourcesDayViewProps\n extends BoxProps, StylesApiProps<ResourcesDayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | string;\n\n /** Called with the new date value when a date is selected */\n onDateChange?: (value: DateStringValue) => void;\n\n /** List of resources to display as rows */\n resources: ScheduleResourceData[];\n\n /** Start time for the day view, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each interval in the day view. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours (e.g. `120`, `240`) @default 60 */\n intervalMinutes?: number;\n\n /** Minimum on-screen size of an event along the time axis, in px. Prevents very short events from collapsing. Larger values make brief events easier to see but extend them past their real start time. @default 1 */\n minEventSize?: number;\n\n /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Props passed down to the `ScrollArea` component */\n scrollAreaProps?: Partial<ScrollAreaProps> & DataAttributes;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** If set, displays a vertical line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** A function to get the current time, called on every tick. Can be used to display the current time indicator in a different timezone. @default () => dayjs() */\n getCurrentTime?: () => AnyDateValue;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Dayjs format for header label @default 'MMMM D, YYYY' */\n headerFormat?: DateLabelFormat;\n\n /** List of events to display */\n events?: ScheduleEventData[];\n\n /** Width of each time slot column @default 80px */\n slotWidth?: React.CSSProperties['width'];\n\n /** Height of each resource row @default 64px */\n rowHeight?: React.CSSProperties['height'];\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** Function to customize event body */\n renderEventBody?: RenderEventBody;\n\n /** Function to fully customize event rendering */\n renderEvent?: RenderEvent;\n\n /** Function to customize resource label rendering */\n renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;\n\n /** List of resource groups to display as a column to the left of resource labels */\n groups?: ScheduleResourceGroup[];\n\n /** Function to customize group label rendering */\n renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;\n\n /** Width of the group label column @default 80px */\n groupLabelWidth?: React.CSSProperties['width'];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time, includes target resourceId */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n resourceId?: string | number;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */\n eventDragInterval?: number;\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, includes resourceId */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** 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 */\n withInteractiveBackgroundEvents?: boolean;\n\n /** If set, enables drag-to-select time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging, includes resourceId */\n onSlotDragEnd?: (data: {\n rangeStart: DateTimeStringValue;\n rangeEnd: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** Interaction mode @default default */\n mode?: ScheduleMode;\n\n /** Called when an external item is dropped onto the schedule */\n onExternalEventDrop?: (data: {\n dataTransfer: DataTransfer;\n dropDateTime: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** If true, events can be resized by dragging their left/right 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 /** Called while an event is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. */\n canDropEvent?: (data: ScheduleCanDropEventData) => boolean;\n\n /** Called while an external item is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. Only `dataTransfer.types` can be read while the drag is in progress. */\n canDropExternalEvent?: (data: ScheduleCanDropExternalEventData) => boolean;\n\n /** Called on every pointer move while an event is resized to compute live feedback and again before the resize is committed, return `false` to reject the new size. Must be pure and cheap. */\n canResizeEventTo?: (data: ScheduleCanResizeEventToData) => boolean;\n\n /** If set, drops and resizes that would make the event overlap another event are rejected. Pass a function to decide per pair of events: return `true` to forbid the overlap. The function runs while dragging and resizing to compute live feedback, it must be pure and cheap. @default false */\n preventEventOverlap?: PreventEventOverlap;\n\n /** Called when a drop or resize is rejected */\n onEventPlacementRejected?: (data: ScheduleEventPlacementRejectedData) => void;\n\n /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */\n eventResizeInterval?: number;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Maximum number of events visible per time slot before \"+more\" indicator shows, minimum value is 1 @default 2 */\n maxEventsPerTimeSlot?: number;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n}\n\nexport type ResourcesDayViewFactory = Factory<{\n props: ResourcesDayViewProps;\n ref: HTMLDivElement;\n stylesNames: ResourcesDayViewStylesNames;\n vars: ResourcesDayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ResourcesDayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n slotLabelFormat: 'HH:mm',\n intervalMinutes: 60,\n minEventSize: 1,\n withHeader: true,\n headerFormat: 'MMMM D, YYYY',\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n maxEventsPerTimeSlot: 2,\n withInteractiveBackgroundEvents: false,\n} satisfies Partial<ResourcesDayViewProps>;\n\nconst varsResolver = createVarsResolver<ResourcesDayViewFactory>(\n (_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({\n resourcesDayView: {\n '--resources-day-view-radius': radius ? getRadius(radius) : undefined,\n '--resources-day-view-slot-width': rem(slotWidth),\n '--resources-day-view-row-height': rem(rowHeight),\n '--resources-day-view-group-label-width': rem(groupLabelWidth),\n },\n })\n);\n\nexport const ResourcesDayView = factory<ResourcesDayViewFactory>((_props) => {\n const props = useProps('ResourcesDayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n startTime,\n endTime,\n date,\n onDateChange,\n resources,\n intervalMinutes,\n minEventSize,\n slotLabelFormat,\n radius,\n startScrollTime,\n scrollAreaProps,\n locale,\n withCurrentTimeIndicator: _withCurrentTimeIndicator,\n withCurrentTimeBubble = true,\n getCurrentTime,\n __staticSelector,\n withHeader,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n headerFormat,\n events,\n slotWidth,\n rowHeight,\n labels,\n highlightBusinessHours,\n businessHours,\n renderEventBody,\n renderEvent,\n renderResourceLabel,\n groups,\n renderGroupLabel,\n groupLabelWidth,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n eventDragInterval,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onEventClick,\n withInteractiveBackgroundEvents,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n canDropEvent,\n canDropExternalEvent,\n canResizeEventTo,\n preventEventOverlap,\n onEventPlacementRejected,\n eventResizeInterval,\n recurrenceExpansionLimit,\n maxEventsPerTimeSlot: _maxEventsPerTimeSlot,\n moreEventsProps,\n ...others\n } = props;\n\n const maxEventsPerTimeSlot =\n _maxEventsPerTimeSlot !== undefined ? Math.max(1, _maxEventsPerTimeSlot) : undefined;\n\n const getStyles = useStyles<ResourcesDayViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'resourcesDayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ResourcesDayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const [scrolled, setScrolled] = useState(false);\n const [scrolledX, setScrolledX] = useState(false);\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const { orderedResources, groupRanges, resourceGroupMap } = useMemo(\n () => getOrderedResources(resources, groups),\n [resources, groups]\n );\n const hasGroups = groupRanges.length > 0;\n\n type DropTargetSlot = { resourceId: string | number; slotIndex: number };\n\n const dragOffsetRef = useRef<{ offset: number; size: number }>({ offset: 0, size: 0 });\n\n const getExternalDropDateTime = useCallback(\n (target: DropTargetSlot) => {\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n const slotTime = slots[target.slotIndex].startTime;\n const dropDateTime = `${slotDate} ${slotTime}`;\n\n if (eventDragInterval == null) {\n return dropDateTime;\n }\n\n const { start } = calculateDropTime({\n draggedEvent: { start: dropDateTime, end: dropDateTime } as ScheduleEventData,\n targetDate: slotDate,\n targetSlotTime: slotTime,\n intervalMinutes,\n dragIntervalMinutes: eventDragInterval,\n slotOffset: dragOffsetRef.current.offset,\n slotSize: dragOffsetRef.current.size,\n startTime,\n endTime,\n });\n\n return dayjs(start).format('YYYY-MM-DD HH:mm:ss');\n },\n [slots, date, eventDragInterval, intervalMinutes, startTime, endTime]\n );\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, target: DropTargetSlot) => {\n if (!onExternalEventDrop) {\n return;\n }\n onExternalEventDrop({\n dataTransfer: e.dataTransfer,\n dropDateTime: getExternalDropDateTime(target),\n resourceId: target.resourceId,\n });\n },\n [onExternalEventDrop, getExternalDropDateTime]\n );\n\n const lastDropResourceId = useRef<string | number | undefined>(undefined);\n\n const getDropTimeForSlot = (target: DropTargetSlot, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[target.slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: dayjs(date).format('YYYY-MM-DD'),\n targetSlotTime: slotTime,\n intervalMinutes,\n dragIntervalMinutes: eventDragInterval,\n slotOffset: eventDragInterval == null ? undefined : dragOffsetRef.current.offset,\n slotSize: eventDragInterval == null ? undefined : dragOffsetRef.current.size,\n startTime,\n endTime,\n });\n };\n\n const handleInternalEventDrop = useCallback(\n (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => {\n onEventDrop?.({ ...data, resourceId: lastDropResourceId.current });\n },\n [onEventDrop]\n );\n\n const expandedEvents = useMemo(\n () =>\n expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n }),\n [events, date, recurrenceExpansionLimit]\n );\n\n const dragDrop = useDragDropHandlers<DropTargetSlot>({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop: handleInternalEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (target: DropTargetSlot, draggedEvent: ScheduleEventData) => {\n lastDropResourceId.current = target.resourceId;\n return getDropTimeForSlot(target, draggedEvent);\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n events: expandedEvents,\n preventEventOverlap,\n canDropEvent,\n canDropExternalEvent,\n onEventPlacementRejected,\n getExternalDropDateTime,\n getTargetResourceId: (target) => target.resourceId,\n });\n\n const updateDragPreview = (target: DropTargetSlot) => {\n const draggedEvent = dragDrop.dragContextValue.draggedEvent;\n if (eventDragInterval == null || !draggedEvent) {\n return;\n }\n const { start, end } = getDropTimeForSlot(target, draggedEvent);\n const newStart = dayjs(start).format('YYYY-MM-DD HH:mm:ss');\n if (\n dragDrop.dragPreview?.start !== newStart ||\n dragDrop.dragPreview?.target.resourceId !== target.resourceId\n ) {\n dragDrop.setDragPreview({\n start: newStart,\n end: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n target,\n });\n }\n };\n\n const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;\n\n const groupToResourceId = useMemo(() => getGroupToResourceIdMap(resources), [resources]);\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex, group) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd({\n rangeStart: `${slotDate} ${slots[startIndex].startTime}`,\n rangeEnd: `${slotDate} ${slots[endIndex].endTime}`,\n resourceId: groupToResourceId.get(group) ?? group,\n });\n },\n });\n\n const eventResize = useHorizontalEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n resizeIntervalMinutes: eventResizeInterval,\n onEventResize,\n canResizeEvent,\n events: expandedEvents,\n preventEventOverlap,\n canResizeEventTo,\n onEventPlacementRejected,\n withBackgroundEvents: withInteractiveBackgroundEvents,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const handleTimeSlotClick = (\n resourceId: string | number,\n slotTime: string,\n e: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!onTimeSlotClick) {\n return;\n }\n\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n const slotIndex = slots.findIndex((s) => s.startTime === slotTime);\n if (slotIndex === -1) {\n return;\n }\n\n const slot = slots[slotIndex];\n onTimeSlotClick({\n slotStart: `${slotDate} ${slot.startTime}`,\n slotEnd: `${slotDate} ${slot.endTime}`,\n nativeEvent: e,\n resourceId,\n });\n };\n\n const dateStr = dayjs(date).format('YYYY-MM-DD');\n const resolveNow = () => (getCurrentTime ? dayjs(getCurrentTime()) : dayjs());\n const now = resolveNow();\n const isToday = dayjs(date).isSame(now, 'day');\n const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;\n\n const mounted = useMounted();\n const [, setTimeIndicatorTick] = useState(0);\n useInterval(() => setTimeIndicatorTick((tick) => tick + 1), 60000, { autoInvoke: true });\n const timeIndicatorOffset = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n const showTimeIndicator =\n mounted &&\n withCurrentTimeIndicator &&\n isInTimeRange({ date: now.toDate(), startTime, endTime });\n const formattedCurrentTime = withCurrentTimeBubble\n ? formatDate({ locale: ctx.getLocale(locale), date: now, format: slotLabelFormat })\n : '';\n\n const resourceEvents = useMemo(\n () =>\n getResourcesDayViewEvents({\n date,\n events: expandedEvents,\n resources,\n startTime,\n endTime,\n intervalMinutes,\n }),\n [date, expandedEvents, resources, startTime, endTime, intervalMinutes]\n );\n\n const timeLabels = slots.map((interval) => {\n const intervalTime = dayjs(`${dateStr} ${interval.startTime}`);\n const label = formatDate({\n date: intervalTime,\n locale: ctx.getLocale(locale),\n format: slotLabelFormat,\n });\n\n return (\n <Box\n {...getStyles('resourcesDayViewTimeLabel')}\n key={interval.startTime}\n mod={{\n 'hour-start': interval.isHourStart,\n ...getBusinessHoursMod({\n time: interval.startTime,\n businessHours,\n highlightBusinessHours,\n }),\n }}\n >\n {label}\n </Box>\n );\n });\n\n const slotsRef: ResourcesGridControlsRef = useRef<HTMLButtonElement[][]>([]);\n const rowSlotsContainersRef = useRef<(HTMLDivElement | null)[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n const firstSlotIndex = { resourceIndex: 0, slotIndex: 0 };\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current) {\n return;\n }\n\n const firstResourceSlots = slotsRef.current[0];\n if (!firstResourceSlots || firstResourceSlots.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = firstResourceSlots[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n const cornerEl = viewportRef.current.querySelector(`.${classes.resourcesDayViewCorner}`);\n const labelWidth = cornerEl ? cornerEl.getBoundingClientRect().width : 0;\n viewportRef.current.scrollTo({\n left: slotRect.left - viewportRect.left + viewportRef.current.scrollLeft - labelWidth,\n top: 0,\n });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback(\n (event: React.DragEvent, resourceIndex: number) => {\n const daySlots = slotsRef.current[resourceIndex] ?? [];\n const index = getIndexFromDragPoint(daySlots, event.clientX);\n if (index !== null) {\n const rect = daySlots[index]?.getBoundingClientRect();\n if (rect) {\n const rawOffset = dir === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;\n dragOffsetRef.current = {\n offset: Math.max(0, Math.min(rect.width, rawOffset)),\n size: rect.width,\n };\n }\n }\n return index;\n },\n [dir]\n );\n\n const handleSlotKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n resourceIndex: number,\n slotIndex: number\n ) => {\n handleResourcesGridKeyDown({\n controlsRef: slotsRef,\n resourceIndex,\n slotIndex,\n event,\n });\n };\n\n const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== 'static';\n\n const rows = orderedResources.map((resource, resourceIndex) => {\n const renderBackgroundEvent = (event: DayPositionedEventData, allDay: boolean) => {\n const isResizable = !allDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n\n return (\n <ScheduleBackgroundEvent<'start' | 'end'>\n key={`bg-${event.id}`}\n event={event}\n renderEvent={renderEvent}\n renderEventBody={renderEventBody}\n interactive={interactiveBackgroundEvents}\n onEventClick={\n onEventClick\n ? (clickedEvent, e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(clickedEvent, e);\n }\n }\n : undefined\n }\n withResize={isResizable}\n isResizing={resizePosition !== null}\n activeResizeEdge={eventResize.resizingEdge}\n resizeAxis=\"horizontal\"\n resizeHandleProps={getStyles('resourcesDayViewResizeHandle')}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge,\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }\n : undefined\n }\n {...getStyles('resourcesDayViewBackgroundEvent', {\n style: {\n left: `${resizePosition ? resizePosition.left : event.position.top}%`,\n width: `${resizePosition ? resizePosition.width : event.position.height}%`,\n top: 0,\n height: '100%',\n },\n })}\n />\n );\n };\n\n const backgroundEventNodes = [\n ...(resourceEvents.backgroundTimedEvents[resource.id] || []).map((event) =>\n renderBackgroundEvent(event, false)\n ),\n ...(resourceEvents.backgroundAllDayEvents[resource.id] || []).map((event) =>\n renderBackgroundEvent(event, true)\n ),\n ];\n\n const allRegularEvents = (resourceEvents.regularEvents[resource.id] || []).filter(\n (event) => !isAllDayEvent({ event, date })\n );\n\n const visibleRegularEvents =\n maxEventsPerTimeSlot !== undefined\n ? allRegularEvents.filter((event) => event.position.column < maxEventsPerTimeSlot)\n : allRegularEvents;\n\n const regularEvents = visibleRegularEvents.map((event) => {\n const isDraggable = dragDrop.isDraggableEvent(event);\n const isResizable = eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventLeft = resizePosition ? resizePosition.left : event.position.top;\n const eventWidth = resizePosition ? resizePosition.width : event.position.height;\n\n const adjustPosition =\n maxEventsPerTimeSlot !== undefined && event.position.overlaps > maxEventsPerTimeSlot;\n\n const eventColors = isResizable\n ? theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: event.variant || 'light',\n autoContrast: true,\n })\n : null;\n\n const isThisEventResizing = resizePosition !== null;\n const activeEdge =\n isThisEventResizing && eventResize.resizingEdge ? eventResize.resizingEdge : null;\n\n return (\n <Box\n key={event.id}\n {...getStyles('resourcesDayViewEventWrapper')}\n __vars={eventColors ? { '--event-color': eventColors.color } : undefined}\n data-resizing={isThisEventResizing || undefined}\n style={{\n ...getTimeAxisEventStyle({\n start: eventLeft,\n span: eventWidth,\n minSize: minEventSize,\n }),\n top: adjustPosition\n ? `calc((100% - 22px) * ${event.position.column} / ${maxEventsPerTimeSlot})`\n : `${event.position.offset}%`,\n height: adjustPosition\n ? `calc((100% - 22px) / ${maxEventsPerTimeSlot})`\n : `${event.position.width}%`,\n }}\n >\n <ScheduleEvent\n event={event}\n autoSize\n nowrap\n draggable={isDraggable}\n isResizing={isThisEventResizing}\n mod={{ invalid: isThisEventResizing && !eventResize.resizeValid }}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n radius={radius}\n mode={mode}\n onClick={\n onEventClick\n ? (e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(event, e);\n }\n }\n : undefined\n }\n style={{ width: '100%', height: '100%', padding: 0 }}\n />\n {isResizable && mode !== 'static' && (\n <>\n <div\n {...getStyles('resourcesDayViewResizeHandle')}\n data-edge=\"start\"\n data-active={activeEdge === 'start' || undefined}\n onPointerDown={(e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge: 'start',\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }}\n />\n <div\n {...getStyles('resourcesDayViewResizeHandle')}\n data-edge=\"end\"\n data-active={activeEdge === 'end' || undefined}\n onPointerDown={(e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge: 'end',\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }}\n />\n </>\n )}\n </Box>\n );\n });\n\n const allDayEvents = resourceEvents.allDayEvents[resource.id] || [];\n\n const allDayEventNodes = allDayEvents.map((event, index) => (\n <Box\n key={`all-day-${event.id}`}\n {...getStyles('resourcesDayViewAllDayEvent', {\n style: {\n top: `calc(${index} * (var(--resources-day-view-all-day-height) + 2px) + 2px)`,\n },\n })}\n >\n <ScheduleEvent\n event={event}\n autoSize\n nowrap\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n radius={radius}\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n style={{ width: '100%', height: '100%' }}\n />\n </Box>\n ));\n\n const moreEventsForResource =\n maxEventsPerTimeSlot !== undefined\n ? getOverlapClusters(allRegularEvents)\n .filter((cluster) => cluster.some((e) => e.position.column >= maxEventsPerTimeSlot))\n .map((cluster) => {\n const hiddenCount = cluster.filter(\n (e) => e.position.column >= maxEventsPerTimeSlot\n ).length;\n const leftPercent = Math.min(...cluster.map((e) => e.position.top));\n const rightPercent = Math.max(\n ...cluster.map((e) => e.position.top + e.position.height)\n );\n\n return (\n <MoreEvents\n key={`more-${cluster[0].id}`}\n events={cluster}\n moreEventsCount={hiddenCount}\n mode={mode}\n labels={labels}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n onEventClick={onEventClick}\n style={{\n position: 'absolute',\n left: `calc(${leftPercent}% + 1px)`,\n width: `calc(${rightPercent - leftPercent}% - 2px)`,\n bottom: 0,\n height: '22px',\n paddingInline: 4,\n zIndex: 4,\n }}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n );\n })\n : [];\n\n return (\n <ResourcesDayViewRow\n key={resource.id}\n resource={resource}\n resourceIndex={resourceIndex}\n date={dateStr}\n slots={slots}\n getStyles={getStyles}\n labels={labels}\n highlightBusinessHours={highlightBusinessHours}\n businessHours={businessHours}\n withEventsDragAndDrop={withDragHandlers}\n mode={mode}\n slotsRef={slotsRef}\n firstSlotIndex={firstSlotIndex}\n onSlotKeyDown={handleSlotKeyDown}\n onSlotClick={handleTimeSlotClick}\n onRowSlotsDragOver={(event, resourceId, resIdx) => {\n const slotIndex = getSlotIndexFromDragPoint(event, resIdx);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, { resourceId, slotIndex });\n updateDragPreview({ resourceId, slotIndex });\n }\n }}\n onRowSlotsDragLeave={dragDrop.handleDragLeave}\n onRowSlotsDrop={(event, resourceId, resIdx) => {\n const slotIndex = getSlotIndexFromDragPoint(event, resIdx);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, { resourceId, slotIndex });\n }\n }}\n dropTargetSlotIndex={\n !suppressDropHighlight && dragDrop.dropTarget?.resourceId === resource.id\n ? dragDrop.dropTarget.slotIndex\n : undefined\n }\n withDragSlotSelect={withDragSlotSelect}\n onSlotPointerDown={slotDragSelect.handleSlotPointerDown}\n isSlotDragSelected={slotDragSelect.isSlotSelected}\n rowSlotsContainerRef={(node) => {\n rowSlotsContainersRef.current[resourceIndex] = node;\n }}\n renderResourceLabel={renderResourceLabel}\n renderGroupLabel={renderGroupLabel}\n scrolledX={scrolledX}\n groupInfo={hasGroups ? resourceGroupMap[resourceIndex] : undefined}\n allDayCount={allDayEvents.length}\n >\n {backgroundEventNodes}\n {allDayEventNodes}\n {regularEvents}\n {moreEventsForResource}\n {dragDrop.dragPreview?.target.resourceId === resource.id &&\n dragDrop.dragContextValue.draggedEvent && (\n <Box\n mod={{ invalid: !dragDrop.dropValid }}\n {...getStyles('resourcesDayViewDragPreview', {\n style: (() => {\n const { top, height } = getDayPosition({\n event: {\n ...dragDrop.dragContextValue.draggedEvent,\n start: dragDrop.dragPreview.start,\n end: dragDrop.dragPreview.end,\n },\n startTime,\n endTime,\n intervalMinutes,\n });\n return {\n position: 'absolute',\n insetBlockStart: 0,\n insetBlockEnd: 0,\n ...getTimeAxisEventStyle({ start: top, span: height, axis: 'horizontal' }),\n };\n })(),\n })}\n />\n )}\n </ResourcesDayViewRow>\n );\n });\n\n const headerLabel = formatDate({\n date: dayjs(date),\n locale: ctx.getLocale(locale),\n format: headerFormat,\n });\n\n const content = (\n <Box\n {...getStyles('resourcesDayView')}\n mod={{\n static: mode === 'static',\n 'slot-dragging': slotDragSelect.isDragging,\n resizing: eventResize.isResizing,\n 'event-interaction': eventResize.isResizing || dragDrop.dragContextValue.isDragging,\n }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(resolveNow()),\n }}\n control={{\n miw: 140,\n title: headerLabel,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={{ views: ['day', 'week', 'month'] as const, ...viewSelectProps }}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <Box {...getStyles('resourcesDayViewRoot')}>\n <ScrollArea\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('resourcesDayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n onScrollPositionChange={(position) => {\n scrollAreaProps?.onScrollPositionChange?.(position);\n setScrolled(position.y !== 0);\n setScrolledX(position.x !== 0);\n }}\n viewportRef={mergedViewportRef}\n >\n <div {...getStyles('resourcesDayViewInner')}>\n <Box {...getStyles('resourcesDayViewTimeLabelsRow')} mod={{ scrolled }}>\n <div\n {...getStyles('resourcesDayViewCorner')}\n key=\"corner\"\n style={\n hasGroups\n ? {\n flexBasis:\n 'calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))',\n minWidth:\n 'calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))',\n }\n : undefined\n }\n >\n {getLabel('resources', labels)}\n </div>\n {timeLabels}\n </Box>\n\n {rows}\n\n {showTimeIndicator && (\n <Box\n {...getStyles('resourcesDayViewCurrentTimeIndicator')}\n __vars={{\n '--indicator-left-offset': hasGroups\n ? `calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width) + (100% - var(--resources-day-view-resource-label-width) - var(--resources-day-view-group-label-width)) * ${timeIndicatorOffset} / 100)`\n : `calc(var(--resources-day-view-resource-label-width) + (100% - var(--resources-day-view-resource-label-width)) * ${timeIndicatorOffset} / 100)`,\n '--_time-bubble-width': formattedCurrentTime\n ?.toString()\n .toLowerCase()\n .includes('m')\n ? '64px'\n : '46px',\n }}\n >\n {withCurrentTimeBubble && (\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorTimeBubble')}>\n {formattedCurrentTime}\n </div>\n )}\n {!withCurrentTimeBubble && (\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorThumb')} />\n )}\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorLine')} />\n </Box>\n )}\n </div>\n </ScrollArea>\n </Box>\n </Box>\n );\n\n const dragContextValue = useMemo<DragContextValue>(\n () => dragDrop.dragContextValue,\n [dragDrop.dragContextValue]\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nResourcesDayView.displayName = '@mantine/schedule/ResourcesDayView';\nResourcesDayView.classes = classes;\nResourcesDayView.varsResolver = varsResolver;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ResourcesDayView.mjs","names":["classes"],"sources":["../../../src/components/ResourcesDayView/ResourcesDayView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useCallback, useMemo, useRef, useState } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n rem,\n ScrollArea,\n ScrollAreaProps,\n StylesApiProps,\n useDirection,\n useMantineTheme,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval, useIsomorphicEffect, useMergedRef, useMounted } from '@mantine/hooks';\nimport { useDragDropHandlers } from '../../hooks/use-drag-drop-handlers';\nimport { useHorizontalEventResize } from '../../hooks/use-horizontal-event-resize';\nimport { useSlotDragSelect } from '../../hooks/use-slot-drag-select';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport {\n AnyDateValue,\n DateLabelFormat,\n DateStringValue,\n DateTimeStringValue,\n DayPositionedEventData,\n PreventEventOverlap,\n ScheduleCanDropEventData,\n ScheduleCanDropExternalEventData,\n ScheduleCanResizeEventToData,\n ScheduleEventData,\n ScheduleEventPlacementRejectedData,\n ScheduleMode,\n ScheduleResourceData,\n ScheduleResourceGroup,\n ScheduleViewLevel,\n} from '../../types';\nimport {\n calculateDropTime,\n expandRecurringEvents,\n formatDate,\n addMinutesToTime,\n clampIntervalMinutes,\n getBusinessHoursState,\n getDayPosition,\n getCurrentTimePosition,\n getDayTimeIntervals,\n getGroupToResourceIdMap,\n getIndexFromDragPoint,\n getOrderedResources,\n getOverlapClusters,\n getTimeAxisEventStyle,\n handleResourcesGridKeyDown,\n isAllDayEvent,\n isInTimeRange,\n ResourcesGridControlsRef,\n toDateString,\n} from '../../utils';\nimport { DragContext, DragContextValue } from '../DragContext/DragContext';\nimport { MoreEvents, MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents';\nimport { ScheduleBackgroundEvent } from '../ScheduleBackgroundEvent';\nimport { RenderEvent, RenderEventBody, ScheduleEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader';\nimport { ScheduleHeaderBase } from '../ScheduleHeader/ScheduleHeaderBase';\nimport { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect';\nimport { getResourcesDayViewEvents } from './get-resources-day-view-events/get-resources-day-view-events';\nimport { ResourcesDayViewRow } from './ResourcesDayViewColumn';\nimport classes from './ResourcesDayView.module.css';\n\nexport type ResourcesDayViewStylesNames =\n | 'resourcesDayView'\n | 'resourcesDayViewRoot'\n | 'resourcesDayViewInner'\n | 'resourcesDayViewTimeLabelsRow'\n | 'resourcesDayViewScrollArea'\n | 'resourcesDayViewCorner'\n | 'resourcesDayViewTimeLabel'\n | 'resourcesDayViewResourceLabel'\n | 'resourcesDayViewRow'\n | 'resourcesDayViewRowSlot'\n | 'resourcesDayViewRowSlots'\n | 'resourcesDayViewBackgroundEvent'\n | 'resourcesDayViewAllDayEvent'\n | 'resourcesDayViewCurrentTimeIndicator'\n | 'resourcesDayViewCurrentTimeIndicatorLine'\n | 'resourcesDayViewCurrentTimeIndicatorThumb'\n | 'resourcesDayViewCurrentTimeIndicatorTimeBubble'\n | 'resourcesDayViewEventWrapper'\n | 'resourcesDayViewDragPreview'\n | 'resourcesDayViewResizeHandle'\n | 'resourcesDayViewGroupColumn'\n | 'resourcesDayViewGroupColumnEmpty'\n | MoreEventsStylesNames\n | CombinedScheduleHeaderStylesNames;\n\nexport type ResourcesDayViewCssVariables = {\n resourcesDayView:\n | '--resources-day-view-radius'\n | '--resources-day-view-slot-width'\n | '--resources-day-view-row-height'\n | '--resources-day-view-group-label-width'\n | '--resources-day-view-business-hours-bg'\n | '--resources-day-view-non-business-hours-bg';\n};\n\nexport interface ResourcesDayViewProps\n extends BoxProps, StylesApiProps<ResourcesDayViewFactory>, ElementProps<'div'> {\n __staticSelector?: string;\n\n /** Day to display, Date object or date string in `YYYY-MM-DD` format */\n date: Date | string;\n\n /** Called with the new date value when a date is selected */\n onDateChange?: (value: DateStringValue) => void;\n\n /** List of resources to display as rows */\n resources: ScheduleResourceData[];\n\n /** Start time for the day view, in `HH:mm:ss` format @default 00:00:00 */\n startTime?: string;\n\n /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */\n endTime?: string;\n\n /** Number of minutes for each interval in the day view. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours (e.g. `120`, `240`) @default 60 */\n intervalMinutes?: number;\n\n /** Minimum on-screen size of an event along the time axis, in px. Prevents very short events from collapsing. Larger values make brief events easier to see but extend them past their real start time. @default 1 */\n minEventSize?: number;\n\n /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */\n slotLabelFormat?: DateLabelFormat;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Time to scroll to on initial render, in `HH:mm:ss` format */\n startScrollTime?: string;\n\n /** Props passed down to the `ScrollArea` component */\n scrollAreaProps?: Partial<ScrollAreaProps> & DataAttributes;\n\n /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n locale?: string;\n\n /** If set, displays a vertical line indicating the current time. By default, displayed only for the current day. */\n withCurrentTimeIndicator?: boolean;\n\n /** If set, the time indicator displays the current time in the bubble @default true */\n withCurrentTimeBubble?: boolean;\n\n /** A function to get the current time, called on every tick. Can be used to display the current time indicator in a different timezone. @default () => dayjs() */\n getCurrentTime?: () => AnyDateValue;\n\n /** If set, the header is displayed @default true */\n withHeader?: boolean;\n\n /** Called when view level select button is clicked */\n onViewChange?: (view: ScheduleViewLevel) => void;\n\n /** Props passed to previous control */\n previousControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to next control */\n nextControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to today control */\n todayControlProps?: React.ComponentProps<'button'> & DataAttributes;\n\n /** Props passed to view level select */\n viewSelectProps?: Partial<ViewSelectProps> & DataAttributes;\n\n /** Dayjs format for header label @default 'MMMM D, YYYY' */\n headerFormat?: DateLabelFormat;\n\n /** List of events to display */\n events?: ScheduleEventData[];\n\n /** Width of each time slot column @default 80px */\n slotWidth?: React.CSSProperties['width'];\n\n /** Height of each resource row @default 64px */\n rowHeight?: React.CSSProperties['height'];\n\n /** Labels override */\n labels?: ScheduleLabelsOverride;\n\n /** If set to true, highlights business hours with white background @default false */\n highlightBusinessHours?: boolean;\n\n /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */\n businessHours?: [string, string];\n\n /** Function to customize event body */\n renderEventBody?: RenderEventBody;\n\n /** Function to fully customize event rendering */\n renderEvent?: RenderEvent;\n\n /** Function to customize resource label rendering */\n renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;\n\n /** List of resource groups to display as a column to the left of resource labels */\n groups?: ScheduleResourceGroup[];\n\n /** Function to customize group label rendering */\n renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;\n\n /** Width of the group label column @default 80px */\n groupLabelWidth?: React.CSSProperties['width'];\n\n /** If true, events can be dragged and dropped @default false */\n withEventsDragAndDrop?: boolean;\n\n /** Called when event is dropped at new time, includes target resourceId */\n onEventDrop?: (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n resourceId?: string | number;\n }) => void;\n\n /** Function to determine if event can be dragged */\n canDragEvent?: (event: ScheduleEventData) => boolean;\n\n /** Snap step for moving events by drag and drop, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */\n eventDragInterval?: number;\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, includes resourceId */\n onTimeSlotClick?: (data: {\n slotStart: DateTimeStringValue;\n slotEnd: DateTimeStringValue;\n nativeEvent: React.MouseEvent<HTMLButtonElement>;\n resourceId?: string | number;\n }) => void;\n\n /** Called when event is clicked */\n onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n /** 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 */\n withInteractiveBackgroundEvents?: boolean;\n\n /** If set, enables drag-to-select time slot ranges @default false */\n withDragSlotSelect?: boolean;\n\n /** Called when a time slot range is selected by dragging, includes resourceId */\n onSlotDragEnd?: (data: {\n rangeStart: DateTimeStringValue;\n rangeEnd: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** Interaction mode @default default */\n mode?: ScheduleMode;\n\n /** Called when an external item is dropped onto the schedule */\n onExternalEventDrop?: (data: {\n dataTransfer: DataTransfer;\n dropDateTime: DateTimeStringValue;\n resourceId?: string | number;\n }) => void;\n\n /** If true, events can be resized by dragging their left/right 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 /** Called while an event is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. */\n canDropEvent?: (data: ScheduleCanDropEventData) => boolean;\n\n /** Called while an external item is dragged over a target to compute live feedback and again before the drop is committed, return `false` to reject the drop. Must be pure and cheap. Only `dataTransfer.types` can be read while the drag is in progress. */\n canDropExternalEvent?: (data: ScheduleCanDropExternalEventData) => boolean;\n\n /** Called on every pointer move while an event is resized to compute live feedback and again before the resize is committed, return `false` to reject the new size. Must be pure and cheap. */\n canResizeEventTo?: (data: ScheduleCanResizeEventToData) => boolean;\n\n /** If set, drops and resizes that would make the event overlap another event are rejected. Pass a function to decide per pair of events: return `true` to forbid the overlap. The function runs while dragging and resizing to compute live feedback, it must be pure and cheap. @default false */\n preventEventOverlap?: PreventEventOverlap;\n\n /** Called when a drop or resize is rejected */\n onEventPlacementRejected?: (data: ScheduleEventPlacementRejectedData) => void;\n\n /** Snap step for resizing events, in minutes. Must divide evenly into an hour (e.g. `15`, `30`) or be a whole number of hours. When not set, `intervalMinutes` is used. @default intervalMinutes */\n eventResizeInterval?: number;\n\n /** Max number of generated recurring instances per recurring series @default 2000 */\n recurrenceExpansionLimit?: number;\n\n /** Maximum number of events visible per time slot before \"+more\" indicator shows, minimum value is 1 @default 2 */\n maxEventsPerTimeSlot?: number;\n\n /** Props passed down to `MoreEvents` component */\n moreEventsProps?: Partial<MoreEventsProps>;\n}\n\nexport type ResourcesDayViewFactory = Factory<{\n props: ResourcesDayViewProps;\n ref: HTMLDivElement;\n stylesNames: ResourcesDayViewStylesNames;\n vars: ResourcesDayViewCssVariables;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'ResourcesDayView',\n startTime: '00:00:00',\n endTime: '23:59:59',\n slotLabelFormat: 'HH:mm',\n intervalMinutes: 60,\n minEventSize: 1,\n withHeader: true,\n headerFormat: 'MMMM D, YYYY',\n highlightBusinessHours: false,\n businessHours: ['09:00:00', '17:00:00'],\n withEventsDragAndDrop: false,\n withDragSlotSelect: false,\n withEventResize: false,\n mode: 'default',\n maxEventsPerTimeSlot: 2,\n withInteractiveBackgroundEvents: false,\n} satisfies Partial<ResourcesDayViewProps>;\n\nconst varsResolver = createVarsResolver<ResourcesDayViewFactory>(\n (_theme, { radius, slotWidth, rowHeight, groupLabelWidth }) => ({\n resourcesDayView: {\n '--resources-day-view-radius': radius ? getRadius(radius) : undefined,\n '--resources-day-view-slot-width': rem(slotWidth),\n '--resources-day-view-row-height': rem(rowHeight),\n '--resources-day-view-group-label-width': rem(groupLabelWidth),\n '--resources-day-view-business-hours-bg': undefined,\n '--resources-day-view-non-business-hours-bg': undefined,\n },\n })\n);\n\nexport const ResourcesDayView = factory<ResourcesDayViewFactory>((_props) => {\n const props = useProps('ResourcesDayView', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n attributes,\n vars,\n startTime,\n endTime,\n date,\n onDateChange,\n resources,\n intervalMinutes,\n minEventSize,\n slotLabelFormat,\n radius,\n startScrollTime,\n scrollAreaProps,\n locale,\n withCurrentTimeIndicator: _withCurrentTimeIndicator,\n withCurrentTimeBubble = true,\n getCurrentTime,\n __staticSelector,\n withHeader,\n onViewChange,\n previousControlProps,\n nextControlProps,\n todayControlProps,\n viewSelectProps,\n headerFormat,\n events,\n slotWidth,\n rowHeight,\n labels,\n highlightBusinessHours,\n businessHours,\n renderEventBody,\n renderEvent,\n renderResourceLabel,\n groups,\n renderGroupLabel,\n groupLabelWidth,\n withEventsDragAndDrop,\n onEventDrop,\n canDragEvent,\n eventDragInterval,\n onEventDragStart,\n onEventDragEnd,\n onTimeSlotClick,\n onEventClick,\n withInteractiveBackgroundEvents,\n withDragSlotSelect,\n onSlotDragEnd,\n mode,\n onExternalEventDrop,\n withEventResize,\n onEventResize,\n canResizeEvent,\n canDropEvent,\n canDropExternalEvent,\n canResizeEventTo,\n preventEventOverlap,\n onEventPlacementRejected,\n eventResizeInterval,\n recurrenceExpansionLimit,\n maxEventsPerTimeSlot: _maxEventsPerTimeSlot,\n moreEventsProps,\n ...others\n } = props;\n\n const maxEventsPerTimeSlot =\n _maxEventsPerTimeSlot !== undefined ? Math.max(1, _maxEventsPerTimeSlot) : undefined;\n\n const getStyles = useStyles<ResourcesDayViewFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n varsResolver,\n attributes,\n rootSelector: 'resourcesDayView',\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ResourcesDayViewFactory>({\n classNames,\n styles,\n props,\n });\n\n const stylesApiProps = {\n classNames: resolvedClassNames,\n styles: resolvedStyles,\n attributes,\n __staticSelector,\n radius,\n };\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const [scrolled, setScrolled] = useState(false);\n const [scrolledX, setScrolledX] = useState(false);\n const ctx = useDatesContext();\n const slots = getDayTimeIntervals({ startTime, endTime, intervalMinutes });\n const { orderedResources, groupRanges, resourceGroupMap } = useMemo(\n () => getOrderedResources(resources, groups),\n [resources, groups]\n );\n const hasGroups = groupRanges.length > 0;\n\n type DropTargetSlot = { resourceId: string | number; slotIndex: number };\n\n const dragOffsetRef = useRef<{ offset: number; size: number }>({ offset: 0, size: 0 });\n\n const getExternalDropDateTime = useCallback(\n (target: DropTargetSlot) => {\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n const slotTime = slots[target.slotIndex].startTime;\n const dropDateTime = `${slotDate} ${slotTime}`;\n\n if (eventDragInterval == null) {\n return dropDateTime;\n }\n\n const { start } = calculateDropTime({\n draggedEvent: { start: dropDateTime, end: dropDateTime } as ScheduleEventData,\n targetDate: slotDate,\n targetSlotTime: slotTime,\n intervalMinutes,\n dragIntervalMinutes: eventDragInterval,\n slotOffset: dragOffsetRef.current.offset,\n slotSize: dragOffsetRef.current.size,\n startTime,\n endTime,\n });\n\n return dayjs(start).format('YYYY-MM-DD HH:mm:ss');\n },\n [slots, date, eventDragInterval, intervalMinutes, startTime, endTime]\n );\n\n const handleExternalDrop = useCallback(\n (e: React.DragEvent, target: DropTargetSlot) => {\n if (!onExternalEventDrop) {\n return;\n }\n onExternalEventDrop({\n dataTransfer: e.dataTransfer,\n dropDateTime: getExternalDropDateTime(target),\n resourceId: target.resourceId,\n });\n },\n [onExternalEventDrop, getExternalDropDateTime]\n );\n\n const lastDropResourceId = useRef<string | number | undefined>(undefined);\n\n const getDropTimeForSlot = (target: DropTargetSlot, draggedEvent: ScheduleEventData) => {\n const slotTime = slots[target.slotIndex].startTime;\n return calculateDropTime({\n draggedEvent,\n targetDate: dayjs(date).format('YYYY-MM-DD'),\n targetSlotTime: slotTime,\n intervalMinutes,\n dragIntervalMinutes: eventDragInterval,\n slotOffset: eventDragInterval == null ? undefined : dragOffsetRef.current.offset,\n slotSize: eventDragInterval == null ? undefined : dragOffsetRef.current.size,\n startTime,\n endTime,\n });\n };\n\n const handleInternalEventDrop = useCallback(\n (data: {\n eventId: string | number;\n newStart: DateTimeStringValue;\n newEnd: DateTimeStringValue;\n event: ScheduleEventData;\n }) => {\n onEventDrop?.({ ...data, resourceId: lastDropResourceId.current });\n },\n [onEventDrop]\n );\n\n const expandedEvents = useMemo(\n () =>\n expandRecurringEvents({\n events,\n rangeStart: dayjs(date).startOf('day').toDate(),\n rangeEnd: dayjs(date).endOf('day').toDate(),\n expansionLimit: recurrenceExpansionLimit,\n }),\n [events, date, recurrenceExpansionLimit]\n );\n\n const dragDrop = useDragDropHandlers<DropTargetSlot>({\n enabled: withEventsDragAndDrop,\n mode,\n onEventDrop: handleInternalEventDrop,\n canDragEvent,\n onEventDragStart,\n onEventDragEnd,\n calculateDropTarget: (target: DropTargetSlot, draggedEvent: ScheduleEventData) => {\n lastDropResourceId.current = target.resourceId;\n return getDropTimeForSlot(target, draggedEvent);\n },\n onExternalDrop: onExternalEventDrop ? handleExternalDrop : undefined,\n events: expandedEvents,\n preventEventOverlap,\n canDropEvent,\n canDropExternalEvent,\n onEventPlacementRejected,\n getExternalDropDateTime,\n getTargetResourceId: (target) => target.resourceId,\n });\n\n const updateDragPreview = (target: DropTargetSlot) => {\n const draggedEvent = dragDrop.dragContextValue.draggedEvent;\n if (eventDragInterval == null || !draggedEvent) {\n return;\n }\n const { start, end } = getDropTimeForSlot(target, draggedEvent);\n const newStart = dayjs(start).format('YYYY-MM-DD HH:mm:ss');\n if (\n dragDrop.dragPreview?.start !== newStart ||\n dragDrop.dragPreview?.target.resourceId !== target.resourceId\n ) {\n dragDrop.setDragPreview({\n start: newStart,\n end: dayjs(end).format('YYYY-MM-DD HH:mm:ss'),\n target,\n });\n }\n };\n\n const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;\n\n const groupToResourceId = useMemo(() => getGroupToResourceIdMap(resources), [resources]);\n\n const slotDragSelect = useSlotDragSelect({\n enabled: withDragSlotSelect && mode !== 'static',\n onDragEnd: (startIndex, endIndex, group) => {\n if (!onSlotDragEnd) {\n return;\n }\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n onSlotDragEnd({\n rangeStart: `${slotDate} ${slots[startIndex].startTime}`,\n rangeEnd: `${slotDate} ${slots[endIndex].endTime}`,\n resourceId: groupToResourceId.get(group) ?? group,\n });\n },\n });\n\n const eventResize = useHorizontalEventResize({\n enabled: withEventResize,\n mode,\n startTime,\n endTime,\n intervalMinutes,\n resizeIntervalMinutes: eventResizeInterval,\n onEventResize,\n canResizeEvent,\n events: expandedEvents,\n preventEventOverlap,\n canResizeEventTo,\n onEventPlacementRejected,\n withBackgroundEvents: withInteractiveBackgroundEvents,\n });\n\n const withDragHandlers = (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== 'static';\n\n const handleTimeSlotClick = (\n resourceId: string | number,\n slotTime: string,\n e: React.MouseEvent<HTMLButtonElement>\n ) => {\n if (!onTimeSlotClick) {\n return;\n }\n\n const slotDate = dayjs(date).format('YYYY-MM-DD');\n const slotIndex = slots.findIndex((s) => s.startTime === slotTime);\n if (slotIndex === -1) {\n return;\n }\n\n const slot = slots[slotIndex];\n onTimeSlotClick({\n slotStart: `${slotDate} ${slot.startTime}`,\n slotEnd: `${slotDate} ${slot.endTime}`,\n nativeEvent: e,\n resourceId,\n });\n };\n\n const dateStr = dayjs(date).format('YYYY-MM-DD');\n const resolveNow = () => (getCurrentTime ? dayjs(getCurrentTime()) : dayjs());\n const now = resolveNow();\n const isToday = dayjs(date).isSame(now, 'day');\n const withCurrentTimeIndicator = _withCurrentTimeIndicator ?? isToday;\n\n const mounted = useMounted();\n const [, setTimeIndicatorTick] = useState(0);\n useInterval(() => setTimeIndicatorTick((tick) => tick + 1), 60000, { autoInvoke: true });\n const timeIndicatorOffset = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n const showTimeIndicator =\n mounted &&\n withCurrentTimeIndicator &&\n isInTimeRange({ date: now.toDate(), startTime, endTime });\n const formattedCurrentTime = withCurrentTimeBubble\n ? formatDate({ locale: ctx.getLocale(locale), date: now, format: slotLabelFormat })\n : '';\n\n const resourceEvents = useMemo(\n () =>\n getResourcesDayViewEvents({\n date,\n events: expandedEvents,\n resources,\n startTime,\n endTime,\n intervalMinutes,\n }),\n [date, expandedEvents, resources, startTime, endTime, intervalMinutes]\n );\n\n const timeLabels = slots.map((interval) => {\n const intervalTime = dayjs(`${dateStr} ${interval.startTime}`);\n const label = formatDate({\n date: intervalTime,\n locale: ctx.getLocale(locale),\n format: slotLabelFormat,\n });\n\n const labelBusinessHours = getBusinessHoursState({\n time: interval.startTime,\n endTime: addMinutesToTime(interval.startTime, clampIntervalMinutes(intervalMinutes)),\n businessHours,\n highlightBusinessHours,\n });\n\n return (\n <Box\n {...getStyles('resourcesDayViewTimeLabel')}\n key={interval.startTime}\n mod={{ 'hour-start': interval.isHourStart, ...labelBusinessHours.mod }}\n __vars={labelBusinessHours.vars}\n >\n {label}\n </Box>\n );\n });\n\n const slotsRef: ResourcesGridControlsRef = useRef<HTMLButtonElement[][]>([]);\n const rowSlotsContainersRef = useRef<(HTMLDivElement | null)[]>([]);\n const viewportRef = useRef<HTMLDivElement>(null);\n const mergedViewportRef = useMergedRef(viewportRef, scrollAreaProps?.viewportRef);\n\n const firstSlotIndex = { resourceIndex: 0, slotIndex: 0 };\n\n useIsomorphicEffect(() => {\n if (!startScrollTime || !viewportRef.current) {\n return;\n }\n\n const firstResourceSlots = slotsRef.current[0];\n if (!firstResourceSlots || firstResourceSlots.length === 0) {\n return;\n }\n\n const targetIndex = slots.findIndex((s) => s.startTime >= startScrollTime);\n if (targetIndex < 0) {\n return;\n }\n\n const targetSlot = firstResourceSlots[targetIndex];\n if (!targetSlot) {\n return;\n }\n\n const slotRect = targetSlot.getBoundingClientRect();\n const viewportRect = viewportRef.current.getBoundingClientRect();\n const cornerEl = viewportRef.current.querySelector(`.${classes.resourcesDayViewCorner}`);\n const labelWidth = cornerEl ? cornerEl.getBoundingClientRect().width : 0;\n viewportRef.current.scrollTo({\n left: slotRect.left - viewportRect.left + viewportRef.current.scrollLeft - labelWidth,\n top: 0,\n });\n }, []);\n\n const getSlotIndexFromDragPoint = useCallback(\n (event: React.DragEvent, resourceIndex: number) => {\n const daySlots = slotsRef.current[resourceIndex] ?? [];\n const index = getIndexFromDragPoint(daySlots, event.clientX);\n if (index !== null) {\n const rect = daySlots[index]?.getBoundingClientRect();\n if (rect) {\n const rawOffset = dir === 'rtl' ? rect.right - event.clientX : event.clientX - rect.left;\n dragOffsetRef.current = {\n offset: Math.max(0, Math.min(rect.width, rawOffset)),\n size: rect.width,\n };\n }\n }\n return index;\n },\n [dir]\n );\n\n const handleSlotKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n resourceIndex: number,\n slotIndex: number\n ) => {\n handleResourcesGridKeyDown({\n controlsRef: slotsRef,\n resourceIndex,\n slotIndex,\n event,\n });\n };\n\n const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== 'static';\n\n const rows = orderedResources.map((resource, resourceIndex) => {\n const renderBackgroundEvent = (event: DayPositionedEventData, allDay: boolean) => {\n const isResizable = !allDay && eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n\n return (\n <ScheduleBackgroundEvent<'start' | 'end'>\n key={`bg-${event.id}`}\n event={event}\n renderEvent={renderEvent}\n renderEventBody={renderEventBody}\n interactive={interactiveBackgroundEvents}\n onEventClick={\n onEventClick\n ? (clickedEvent, e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(clickedEvent, e);\n }\n }\n : undefined\n }\n withResize={isResizable}\n isResizing={resizePosition !== null}\n activeResizeEdge={eventResize.resizingEdge}\n resizeAxis=\"horizontal\"\n resizeHandleProps={getStyles('resourcesDayViewResizeHandle')}\n onResizeStart={\n isResizable\n ? (edge, e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge,\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }\n : undefined\n }\n {...getStyles('resourcesDayViewBackgroundEvent', {\n style: {\n left: `${resizePosition ? resizePosition.left : event.position.top}%`,\n width: `${resizePosition ? resizePosition.width : event.position.height}%`,\n top: 0,\n height: '100%',\n },\n })}\n />\n );\n };\n\n const backgroundEventNodes = [\n ...(resourceEvents.backgroundTimedEvents[resource.id] || []).map((event) =>\n renderBackgroundEvent(event, false)\n ),\n ...(resourceEvents.backgroundAllDayEvents[resource.id] || []).map((event) =>\n renderBackgroundEvent(event, true)\n ),\n ];\n\n const allRegularEvents = (resourceEvents.regularEvents[resource.id] || []).filter(\n (event) => !isAllDayEvent({ event, date })\n );\n\n const visibleRegularEvents =\n maxEventsPerTimeSlot !== undefined\n ? allRegularEvents.filter((event) => event.position.column < maxEventsPerTimeSlot)\n : allRegularEvents;\n\n const regularEvents = visibleRegularEvents.map((event) => {\n const isDraggable = dragDrop.isDraggableEvent(event);\n const isResizable = eventResize.isResizableEvent(event);\n const resizePosition = eventResize.getResizePosition(event.id);\n const eventLeft = resizePosition ? resizePosition.left : event.position.top;\n const eventWidth = resizePosition ? resizePosition.width : event.position.height;\n\n const adjustPosition =\n maxEventsPerTimeSlot !== undefined && event.position.overlaps > maxEventsPerTimeSlot;\n\n const eventColors = isResizable\n ? theme.variantColorResolver({\n color: event.color || theme.primaryColor,\n theme,\n variant: event.variant || 'light',\n autoContrast: true,\n })\n : null;\n\n const isThisEventResizing = resizePosition !== null;\n const activeEdge =\n isThisEventResizing && eventResize.resizingEdge ? eventResize.resizingEdge : null;\n\n return (\n <Box\n key={event.id}\n {...getStyles('resourcesDayViewEventWrapper')}\n __vars={eventColors ? { '--event-color': eventColors.color } : undefined}\n data-resizing={isThisEventResizing || undefined}\n style={{\n ...getTimeAxisEventStyle({\n start: eventLeft,\n span: eventWidth,\n minSize: minEventSize,\n }),\n top: adjustPosition\n ? `calc((100% - 22px) * ${event.position.column} / ${maxEventsPerTimeSlot})`\n : `${event.position.offset}%`,\n height: adjustPosition\n ? `calc((100% - 22px) / ${maxEventsPerTimeSlot})`\n : `${event.position.width}%`,\n }}\n >\n <ScheduleEvent\n event={event}\n autoSize\n nowrap\n draggable={isDraggable}\n isResizing={isThisEventResizing}\n mod={{ invalid: isThisEventResizing && !eventResize.resizeValid }}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n radius={radius}\n mode={mode}\n onClick={\n onEventClick\n ? (e) => {\n if (!eventResize.wasResizing()) {\n onEventClick(event, e);\n }\n }\n : undefined\n }\n style={{ width: '100%', height: '100%', padding: 0 }}\n />\n {isResizable && mode !== 'static' && (\n <>\n <div\n {...getStyles('resourcesDayViewResizeHandle')}\n data-edge=\"start\"\n data-active={activeEdge === 'start' || undefined}\n onPointerDown={(e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge: 'start',\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }}\n />\n <div\n {...getStyles('resourcesDayViewResizeHandle')}\n data-edge=\"end\"\n data-active={activeEdge === 'end' || undefined}\n onPointerDown={(e) => {\n const container = rowSlotsContainersRef.current[resourceIndex];\n if (container) {\n eventResize.handleResizeStart({\n event,\n edge: 'end',\n container,\n originalLeft: event.position.top,\n originalWidth: event.position.height,\n eventDate: dateStr,\n pointerEvent: e,\n });\n }\n }}\n />\n </>\n )}\n </Box>\n );\n });\n\n const allDayEvents = resourceEvents.allDayEvents[resource.id] || [];\n\n const allDayEventNodes = allDayEvents.map((event, index) => (\n <Box\n key={`all-day-${event.id}`}\n {...getStyles('resourcesDayViewAllDayEvent', {\n style: {\n top: `calc(${index} * (var(--resources-day-view-all-day-height) + 2px) + 2px)`,\n },\n })}\n >\n <ScheduleEvent\n event={event}\n autoSize\n nowrap\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n radius={radius}\n mode={mode}\n onClick={onEventClick ? (e) => onEventClick(event, e) : undefined}\n style={{ width: '100%', height: '100%' }}\n />\n </Box>\n ));\n\n const moreEventsForResource =\n maxEventsPerTimeSlot !== undefined\n ? getOverlapClusters(allRegularEvents)\n .filter((cluster) => cluster.some((e) => e.position.column >= maxEventsPerTimeSlot))\n .map((cluster) => {\n const hiddenCount = cluster.filter(\n (e) => e.position.column >= maxEventsPerTimeSlot\n ).length;\n const leftPercent = Math.min(...cluster.map((e) => e.position.top));\n const rightPercent = Math.max(\n ...cluster.map((e) => e.position.top + e.position.height)\n );\n\n return (\n <MoreEvents\n key={`more-${cluster[0].id}`}\n events={cluster}\n moreEventsCount={hiddenCount}\n mode={mode}\n labels={labels}\n renderEventBody={renderEventBody}\n renderEvent={renderEvent}\n onEventClick={onEventClick}\n style={{\n position: 'absolute',\n left: `calc(${leftPercent}% + 1px)`,\n width: `calc(${rightPercent - leftPercent}% - 2px)`,\n bottom: 0,\n height: '22px',\n paddingInline: 4,\n zIndex: 4,\n }}\n {...stylesApiProps}\n {...moreEventsProps}\n />\n );\n })\n : [];\n\n return (\n <ResourcesDayViewRow\n key={resource.id}\n resource={resource}\n intervalMinutes={intervalMinutes}\n resourceIndex={resourceIndex}\n date={dateStr}\n slots={slots}\n getStyles={getStyles}\n labels={labels}\n highlightBusinessHours={highlightBusinessHours}\n businessHours={businessHours}\n withEventsDragAndDrop={withDragHandlers}\n mode={mode}\n slotsRef={slotsRef}\n firstSlotIndex={firstSlotIndex}\n onSlotKeyDown={handleSlotKeyDown}\n onSlotClick={handleTimeSlotClick}\n onRowSlotsDragOver={(event, resourceId, resIdx) => {\n const slotIndex = getSlotIndexFromDragPoint(event, resIdx);\n if (slotIndex !== null) {\n dragDrop.handleDragOver(event, { resourceId, slotIndex });\n updateDragPreview({ resourceId, slotIndex });\n }\n }}\n onRowSlotsDragLeave={dragDrop.handleDragLeave}\n onRowSlotsDrop={(event, resourceId, resIdx) => {\n const slotIndex = getSlotIndexFromDragPoint(event, resIdx);\n if (slotIndex !== null) {\n dragDrop.handleDrop(event, { resourceId, slotIndex });\n }\n }}\n dropTargetSlotIndex={\n !suppressDropHighlight && dragDrop.dropTarget?.resourceId === resource.id\n ? dragDrop.dropTarget.slotIndex\n : undefined\n }\n withDragSlotSelect={withDragSlotSelect}\n onSlotPointerDown={slotDragSelect.handleSlotPointerDown}\n isSlotDragSelected={slotDragSelect.isSlotSelected}\n rowSlotsContainerRef={(node) => {\n rowSlotsContainersRef.current[resourceIndex] = node;\n }}\n renderResourceLabel={renderResourceLabel}\n renderGroupLabel={renderGroupLabel}\n scrolledX={scrolledX}\n groupInfo={hasGroups ? resourceGroupMap[resourceIndex] : undefined}\n allDayCount={allDayEvents.length}\n >\n {backgroundEventNodes}\n {allDayEventNodes}\n {regularEvents}\n {moreEventsForResource}\n {dragDrop.dragPreview?.target.resourceId === resource.id &&\n dragDrop.dragContextValue.draggedEvent && (\n <Box\n mod={{ invalid: !dragDrop.dropValid }}\n {...getStyles('resourcesDayViewDragPreview', {\n style: (() => {\n const { top, height } = getDayPosition({\n event: {\n ...dragDrop.dragContextValue.draggedEvent,\n start: dragDrop.dragPreview.start,\n end: dragDrop.dragPreview.end,\n },\n startTime,\n endTime,\n intervalMinutes,\n });\n return {\n position: 'absolute',\n insetBlockStart: 0,\n insetBlockEnd: 0,\n ...getTimeAxisEventStyle({ start: top, span: height, axis: 'horizontal' }),\n };\n })(),\n })}\n />\n )}\n </ResourcesDayViewRow>\n );\n });\n\n const headerLabel = formatDate({\n date: dayjs(date),\n locale: ctx.getLocale(locale),\n format: headerFormat,\n });\n\n const content = (\n <Box\n {...getStyles('resourcesDayView')}\n mod={{\n static: mode === 'static',\n 'slot-dragging': slotDragSelect.isDragging,\n resizing: eventResize.isResizing,\n 'event-interaction': eventResize.isResizing || dragDrop.dragContextValue.isDragging,\n }}\n {...others}\n >\n {withHeader && (\n <ScheduleHeaderBase\n view=\"day\"\n navigationHandlers={{\n previous: () => toDateString(dayjs(date).subtract(1, 'day')),\n next: () => toDateString(dayjs(date).add(1, 'day')),\n today: () => toDateString(resolveNow()),\n }}\n control={{\n miw: 140,\n title: headerLabel,\n }}\n labels={labels}\n onDateChange={onDateChange}\n onViewChange={onViewChange}\n previousControlProps={previousControlProps}\n nextControlProps={nextControlProps}\n todayControlProps={todayControlProps}\n viewSelectProps={{ views: ['day', 'week', 'month'] as const, ...viewSelectProps }}\n stylesApiProps={stylesApiProps}\n />\n )}\n\n <Box {...getStyles('resourcesDayViewRoot')}>\n <ScrollArea\n scrollbarSize={4}\n {...scrollAreaProps}\n {...getStyles('resourcesDayViewScrollArea', {\n className: scrollAreaProps?.className,\n style: scrollAreaProps?.style,\n })}\n onScrollPositionChange={(position) => {\n scrollAreaProps?.onScrollPositionChange?.(position);\n setScrolled(position.y !== 0);\n setScrolledX(position.x !== 0);\n }}\n viewportRef={mergedViewportRef}\n >\n <div {...getStyles('resourcesDayViewInner')}>\n <Box {...getStyles('resourcesDayViewTimeLabelsRow')} mod={{ scrolled }}>\n <div\n {...getStyles('resourcesDayViewCorner')}\n key=\"corner\"\n style={\n hasGroups\n ? {\n flexBasis:\n 'calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))',\n minWidth:\n 'calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width))',\n }\n : undefined\n }\n >\n {getLabel('resources', labels)}\n </div>\n {timeLabels}\n </Box>\n\n {rows}\n\n {showTimeIndicator && (\n <Box\n {...getStyles('resourcesDayViewCurrentTimeIndicator')}\n __vars={{\n '--indicator-left-offset': hasGroups\n ? `calc(var(--resources-day-view-resource-label-width) + var(--resources-day-view-group-label-width) + (100% - var(--resources-day-view-resource-label-width) - var(--resources-day-view-group-label-width)) * ${timeIndicatorOffset} / 100)`\n : `calc(var(--resources-day-view-resource-label-width) + (100% - var(--resources-day-view-resource-label-width)) * ${timeIndicatorOffset} / 100)`,\n '--_time-bubble-width': formattedCurrentTime\n ?.toString()\n .toLowerCase()\n .includes('m')\n ? '64px'\n : '46px',\n }}\n >\n {withCurrentTimeBubble && (\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorTimeBubble')}>\n {formattedCurrentTime}\n </div>\n )}\n {!withCurrentTimeBubble && (\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorThumb')} />\n )}\n <div {...getStyles('resourcesDayViewCurrentTimeIndicatorLine')} />\n </Box>\n )}\n </div>\n </ScrollArea>\n </Box>\n </Box>\n );\n\n const dragContextValue = useMemo<DragContextValue>(\n () => dragDrop.dragContextValue,\n [dragDrop.dragContextValue]\n );\n\n if (withEventsDragAndDrop) {\n return <DragContext.Provider value={dragContextValue}>{content}</DragContext.Provider>;\n }\n\n return content;\n});\n\nResourcesDayView.displayName = '@mantine/schedule/ResourcesDayView';\nResourcesDayView.classes = classes;\nResourcesDayView.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsUA,MAAM,eAAe;CACnB,kBAAkB;CAClB,WAAW;CACX,SAAS;CACT,iBAAiB;CACjB,iBAAiB;CACjB,cAAc;CACd,YAAY;CACZ,cAAc;CACd,wBAAwB;CACxB,eAAe,CAAC,YAAY,UAAU;CACtC,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,MAAM;CACN,sBAAsB;CACtB,iCAAiC;AACnC;AAEA,MAAM,eAAe,oBAClB,QAAQ,EAAE,QAAQ,WAAW,WAAW,uBAAuB,EAC9D,kBAAkB;CAChB,+BAA+B,SAAS,UAAU,MAAM,IAAI,KAAA;CAC5D,mCAAmC,IAAI,SAAS;CAChD,mCAAmC,IAAI,SAAS;CAChD,0CAA0C,IAAI,eAAe;CAC7D,0CAA0C,KAAA;CAC1C,8CAA8C,KAAA;AAChD,EACF,EACF;AAEA,MAAa,mBAAmB,SAAkC,WAAW;CAC3E,MAAM,QAAQ,SAAS,oBAAoB,cAAc,MAAM;CAC/D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,YACA,MACA,WACA,SACA,MACA,cACA,WACA,iBACA,cACA,iBACA,QACA,iBACA,iBACA,QACA,0BAA0B,2BAC1B,wBAAwB,MACxB,gBACA,kBACA,YACA,cACA,sBACA,kBACA,mBACA,iBACA,cACA,QACA,WACA,WACA,QACA,wBACA,eACA,iBACA,aACA,qBACA,QACA,kBACA,iBACA,uBACA,aACA,cACA,mBACA,kBACA,gBACA,iBACA,cACA,iCACA,oBACA,eACA,MACA,qBACA,iBACA,eACA,gBACA,cACA,sBACA,kBACA,qBACA,0BACA,qBACA,0BACA,sBAAsB,uBACtB,iBACA,GAAG,WACD;CAEJ,MAAM,uBACJ,0BAA0B,KAAA,IAAY,KAAK,IAAI,GAAG,qBAAqB,IAAI,KAAA;CAE7E,MAAM,YAAY,UAAmC;EACnD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmB,qBAA8C;EAC3F;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB;EACrB,YAAY;EACZ,QAAQ;EACR;EACA;EACA;CACF;CAEA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,MAAM,gBAAgB;CAC5B,MAAM,QAAQ,oBAAoB;EAAE;EAAW;EAAS;CAAgB,CAAC;CACzE,MAAM,EAAE,kBAAkB,aAAa,qBAAqB,cACpD,oBAAoB,WAAW,MAAM,GAC3C,CAAC,WAAW,MAAM,CACpB;CACA,MAAM,YAAY,YAAY,SAAS;CAIvC,MAAM,gBAAgB,OAAyC;EAAE,QAAQ;EAAG,MAAM;CAAE,CAAC;CAErF,MAAM,0BAA0B,aAC7B,WAA2B;EAC1B,MAAM,WAAW,MAAM,IAAI,CAAC,CAAC,OAAO,YAAY;EAChD,MAAM,WAAW,MAAM,OAAO,UAAU,CAAC;EACzC,MAAM,eAAe,GAAG,SAAS,GAAG;EAEpC,IAAI,qBAAqB,MACvB,OAAO;EAGT,MAAM,EAAE,UAAU,kBAAkB;GAClC,cAAc;IAAE,OAAO;IAAc,KAAK;GAAa;GACvD,YAAY;GACZ,gBAAgB;GAChB;GACA,qBAAqB;GACrB,YAAY,cAAc,QAAQ;GAClC,UAAU,cAAc,QAAQ;GAChC;GACA;EACF,CAAC;EAED,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,qBAAqB;CAClD,GACA;EAAC;EAAO;EAAM;EAAmB;EAAiB;EAAW;CAAO,CACtE;CAEA,MAAM,qBAAqB,aACxB,GAAoB,WAA2B;EAC9C,IAAI,CAAC,qBACH;EAEF,oBAAoB;GAClB,cAAc,EAAE;GAChB,cAAc,wBAAwB,MAAM;GAC5C,YAAY,OAAO;EACrB,CAAC;CACH,GACA,CAAC,qBAAqB,uBAAuB,CAC/C;CAEA,MAAM,qBAAqB,OAAoC,KAAA,CAAS;CAExE,MAAM,sBAAsB,QAAwB,iBAAoC;EACtF,MAAM,WAAW,MAAM,OAAO,UAAU,CAAC;EACzC,OAAO,kBAAkB;GACvB;GACA,YAAY,MAAM,IAAI,CAAC,CAAC,OAAO,YAAY;GAC3C,gBAAgB;GAChB;GACA,qBAAqB;GACrB,YAAY,qBAAqB,OAAO,KAAA,IAAY,cAAc,QAAQ;GAC1E,UAAU,qBAAqB,OAAO,KAAA,IAAY,cAAc,QAAQ;GACxE;GACA;EACF,CAAC;CACH;CAEA,MAAM,0BAA0B,aAC7B,SAKK;EACJ,cAAc;GAAE,GAAG;GAAM,YAAY,mBAAmB;EAAQ,CAAC;CACnE,GACA,CAAC,WAAW,CACd;CAEA,MAAM,iBAAiB,cAEnB,sBAAsB;EACpB;EACA,YAAY,MAAM,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,OAAO;EAC9C,UAAU,MAAM,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO;EAC1C,gBAAgB;CAClB,CAAC,GACH;EAAC;EAAQ;EAAM;CAAwB,CACzC;CAEA,MAAM,WAAW,oBAAoC;EACnD,SAAS;EACT;EACA,aAAa;EACb;EACA;EACA;EACA,sBAAsB,QAAwB,iBAAoC;GAChF,mBAAmB,UAAU,OAAO;GACpC,OAAO,mBAAmB,QAAQ,YAAY;EAChD;EACA,gBAAgB,sBAAsB,qBAAqB,KAAA;EAC3D,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA,sBAAsB,WAAW,OAAO;CAC1C,CAAC;CAED,MAAM,qBAAqB,WAA2B;EACpD,MAAM,eAAe,SAAS,iBAAiB;EAC/C,IAAI,qBAAqB,QAAQ,CAAC,cAChC;EAEF,MAAM,EAAE,OAAO,QAAQ,mBAAmB,QAAQ,YAAY;EAC9D,MAAM,WAAW,MAAM,KAAK,CAAC,CAAC,OAAO,qBAAqB;EAC1D,IACE,SAAS,aAAa,UAAU,YAChC,SAAS,aAAa,OAAO,eAAe,OAAO,YAEnD,SAAS,eAAe;GACtB,OAAO;GACP,KAAK,MAAM,GAAG,CAAC,CAAC,OAAO,qBAAqB;GAC5C;EACF,CAAC;CAEL;CAEA,MAAM,wBAAwB,qBAAqB,QAAQ,SAAS,iBAAiB;CAErF,MAAM,oBAAoB,cAAc,wBAAwB,SAAS,GAAG,CAAC,SAAS,CAAC;CAEvF,MAAM,iBAAiB,kBAAkB;EACvC,SAAS,sBAAsB,SAAS;EACxC,YAAY,YAAY,UAAU,UAAU;GAC1C,IAAI,CAAC,eACH;GAEF,MAAM,WAAW,MAAM,IAAI,CAAC,CAAC,OAAO,YAAY;GAChD,cAAc;IACZ,YAAY,GAAG,SAAS,GAAG,MAAM,WAAW,CAAC;IAC7C,UAAU,GAAG,SAAS,GAAG,MAAM,SAAS,CAAC;IACzC,YAAY,kBAAkB,IAAI,KAAK,KAAK;GAC9C,CAAC;EACH;CACF,CAAC;CAED,MAAM,cAAc,yBAAyB;EAC3C,SAAS;EACT;EACA;EACA;EACA;EACA,uBAAuB;EACvB;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA,sBAAsB;CACxB,CAAC;CAED,MAAM,oBAAoB,yBAAyB,CAAC,CAAC,wBAAwB,SAAS;CAEtF,MAAM,uBACJ,YACA,UACA,MACG;EACH,IAAI,CAAC,iBACH;EAGF,MAAM,WAAW,MAAM,IAAI,CAAC,CAAC,OAAO,YAAY;EAChD,MAAM,YAAY,MAAM,WAAW,MAAM,EAAE,cAAc,QAAQ;EACjE,IAAI,cAAc,IAChB;EAGF,MAAM,OAAO,MAAM;EACnB,gBAAgB;GACd,WAAW,GAAG,SAAS,GAAG,KAAK;GAC/B,SAAS,GAAG,SAAS,GAAG,KAAK;GAC7B,aAAa;GACb;EACF,CAAC;CACH;CAEA,MAAM,UAAU,MAAM,IAAI,CAAC,CAAC,OAAO,YAAY;CAC/C,MAAM,mBAAoB,iBAAiB,MAAM,eAAe,CAAC,IAAI,MAAM;CAC3E,MAAM,MAAM,WAAW;CACvB,MAAM,UAAU,MAAM,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK;CAC7C,MAAM,2BAA2B,6BAA6B;CAE9D,MAAM,UAAU,WAAW;CAC3B,MAAM,GAAG,wBAAwB,SAAS,CAAC;CAC3C,kBAAkB,sBAAsB,SAAS,OAAO,CAAC,GAAG,KAAO,EAAE,YAAY,KAAK,CAAC;CACvF,MAAM,sBAAsB,uBAAuB;EAAE;EAAW;EAAS;EAAiB;CAAI,CAAC;CAC/F,MAAM,oBACJ,WACA,4BACA,cAAc;EAAE,MAAM,IAAI,OAAO;EAAG;EAAW;CAAQ,CAAC;CAC1D,MAAM,uBAAuB,wBACzB,WAAW;EAAE,QAAQ,IAAI,UAAU,MAAM;EAAG,MAAM;EAAK,QAAQ;CAAgB,CAAC,IAChF;CAEJ,MAAM,iBAAiB,cAEnB,0BAA0B;EACxB;EACA,QAAQ;EACR;EACA;EACA;EACA;CACF,CAAC,GACH;EAAC;EAAM;EAAgB;EAAW;EAAW;EAAS;CAAe,CACvE;CAEA,MAAM,aAAa,MAAM,KAAK,aAAa;EACzC,MAAM,eAAe,MAAM,GAAG,QAAQ,GAAG,SAAS,WAAW;EAC7D,MAAM,QAAQ,WAAW;GACvB,MAAM;GACN,QAAQ,IAAI,UAAU,MAAM;GAC5B,QAAQ;EACV,CAAC;EAED,MAAM,qBAAqB,sBAAsB;GAC/C,MAAM,SAAS;GACf,SAAS,iBAAiB,SAAS,WAAW,qBAAqB,eAAe,CAAC;GACnF;GACA;EACF,CAAC;EAED,OACE,8BAAC,KAAD;GACE,GAAI,UAAU,2BAA2B;GACzC,KAAK,SAAS;GACd,KAAK;IAAE,cAAc,SAAS;IAAa,GAAG,mBAAmB;GAAI;GACrE,QAAQ,mBAAmB;EAGxB,GADF,KACE;CAET,CAAC;CAED,MAAM,WAAqC,OAA8B,CAAC,CAAC;CAC3E,MAAM,wBAAwB,OAAkC,CAAC,CAAC;CAClE,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,oBAAoB,aAAa,aAAa,iBAAiB,WAAW;CAEhF,MAAM,iBAAiB;EAAE,eAAe;EAAG,WAAW;CAAE;CAExD,0BAA0B;EACxB,IAAI,CAAC,mBAAmB,CAAC,YAAY,SACnC;EAGF,MAAM,qBAAqB,SAAS,QAAQ;EAC5C,IAAI,CAAC,sBAAsB,mBAAmB,WAAW,GACvD;EAGF,MAAM,cAAc,MAAM,WAAW,MAAM,EAAE,aAAa,eAAe;EACzE,IAAI,cAAc,GAChB;EAGF,MAAM,aAAa,mBAAmB;EACtC,IAAI,CAAC,YACH;EAGF,MAAM,WAAW,WAAW,sBAAsB;EAClD,MAAM,eAAe,YAAY,QAAQ,sBAAsB;EAC/D,MAAM,WAAW,YAAY,QAAQ,cAAc,IAAIA,gCAAQ,wBAAwB;EACvF,MAAM,aAAa,WAAW,SAAS,sBAAsB,CAAC,CAAC,QAAQ;EACvE,YAAY,QAAQ,SAAS;GAC3B,MAAM,SAAS,OAAO,aAAa,OAAO,YAAY,QAAQ,aAAa;GAC3E,KAAK;EACP,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,4BAA4B,aAC/B,OAAwB,kBAA0B;EACjD,MAAM,WAAW,SAAS,QAAQ,kBAAkB,CAAC;EACrD,MAAM,QAAQ,sBAAsB,UAAU,MAAM,OAAO;EAC3D,IAAI,UAAU,MAAM;GAClB,MAAM,OAAO,SAAS,MAAM,EAAE,sBAAsB;GACpD,IAAI,MAAM;IACR,MAAM,YAAY,QAAQ,QAAQ,KAAK,QAAQ,MAAM,UAAU,MAAM,UAAU,KAAK;IACpF,cAAc,UAAU;KACtB,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,SAAS,CAAC;KACnD,MAAM,KAAK;IACb;GACF;EACF;EACA,OAAO;CACT,GACA,CAAC,GAAG,CACN;CAEA,MAAM,qBACJ,OACA,eACA,cACG;EACH,2BAA2B;GACzB,aAAa;GACb;GACA;GACA;EACF,CAAC;CACH;CAEA,MAAM,8BAA8B,mCAAmC,SAAS;CAEhF,MAAM,OAAO,iBAAiB,KAAK,UAAU,kBAAkB;EAC7D,MAAM,yBAAyB,OAA+B,WAAoB;GAChF,MAAM,cAAc,CAAC,UAAU,YAAY,iBAAiB,KAAK;GACjE,MAAM,iBAAiB,YAAY,kBAAkB,MAAM,EAAE;GAE7D,OACE,oBAAC,yBAAD;IAES;IACM;IACI;IACjB,aAAa;IACb,cACE,gBACK,cAAc,MAAM;KACnB,IAAI,CAAC,YAAY,YAAY,GAC3B,aAAa,cAAc,CAAC;IAEhC,IACA,KAAA;IAEN,YAAY;IACZ,YAAY,mBAAmB;IAC/B,kBAAkB,YAAY;IAC9B,YAAW;IACX,mBAAmB,UAAU,8BAA8B;IAC3D,eACE,eACK,MAAM,MAAM;KACX,MAAM,YAAY,sBAAsB,QAAQ;KAChD,IAAI,WACF,YAAY,kBAAkB;MAC5B;MACA;MACA;MACA,cAAc,MAAM,SAAS;MAC7B,eAAe,MAAM,SAAS;MAC9B,WAAW;MACX,cAAc;KAChB,CAAC;IAEL,IACA,KAAA;IAEN,GAAI,UAAU,mCAAmC,EAC/C,OAAO;KACL,MAAM,GAAG,iBAAiB,eAAe,OAAO,MAAM,SAAS,IAAI;KACnE,OAAO,GAAG,iBAAiB,eAAe,QAAQ,MAAM,SAAS,OAAO;KACxE,KAAK;KACL,QAAQ;IACV,EACF,CAAC;GACF,GA7CM,MAAM,MAAM,IA6ClB;EAEL;EAEA,MAAM,uBAAuB,CAC3B,IAAI,eAAe,sBAAsB,SAAS,OAAO,CAAC,EAAA,CAAG,KAAK,UAChE,sBAAsB,OAAO,KAAK,CACpC,GACA,IAAI,eAAe,uBAAuB,SAAS,OAAO,CAAC,EAAA,CAAG,KAAK,UACjE,sBAAsB,OAAO,IAAI,CACnC,CACF;EAEA,MAAM,oBAAoB,eAAe,cAAc,SAAS,OAAO,CAAC,EAAA,CAAG,QACxE,UAAU,CAAC,cAAc;GAAE;GAAO;EAAK,CAAC,CAC3C;EAOA,MAAM,iBAJJ,yBAAyB,KAAA,IACrB,iBAAiB,QAAQ,UAAU,MAAM,SAAS,SAAS,oBAAoB,IAC/E,iBAAA,CAEqC,KAAK,UAAU;GACxD,MAAM,cAAc,SAAS,iBAAiB,KAAK;GACnD,MAAM,cAAc,YAAY,iBAAiB,KAAK;GACtD,MAAM,iBAAiB,YAAY,kBAAkB,MAAM,EAAE;GAC7D,MAAM,YAAY,iBAAiB,eAAe,OAAO,MAAM,SAAS;GACxE,MAAM,aAAa,iBAAiB,eAAe,QAAQ,MAAM,SAAS;GAE1E,MAAM,iBACJ,yBAAyB,KAAA,KAAa,MAAM,SAAS,WAAW;GAElE,MAAM,cAAc,cAChB,MAAM,qBAAqB;IACzB,OAAO,MAAM,SAAS,MAAM;IAC5B;IACA,SAAS,MAAM,WAAW;IAC1B,cAAc;GAChB,CAAC,IACD;GAEJ,MAAM,sBAAsB,mBAAmB;GAC/C,MAAM,aACJ,uBAAuB,YAAY,eAAe,YAAY,eAAe;GAE/E,OACE,qBAAC,KAAD;IAEE,GAAI,UAAU,8BAA8B;IAC5C,QAAQ,cAAc,EAAE,iBAAiB,YAAY,MAAM,IAAI,KAAA;IAC/D,iBAAe,uBAAuB,KAAA;IACtC,OAAO;KACL,GAAG,sBAAsB;MACvB,OAAO;MACP,MAAM;MACN,SAAS;KACX,CAAC;KACD,KAAK,iBACD,wBAAwB,MAAM,SAAS,OAAO,KAAK,qBAAqB,KACxE,GAAG,MAAM,SAAS,OAAO;KAC7B,QAAQ,iBACJ,wBAAwB,qBAAqB,KAC7C,GAAG,MAAM,SAAS,MAAM;IAC9B;IAjBF,UAAA,CAmBE,oBAAC,eAAD;KACS;KACP,UAAA;KACA,QAAA;KACA,WAAW;KACX,YAAY;KACZ,KAAK,EAAE,SAAS,uBAAuB,CAAC,YAAY,YAAY;KAC/C;KACJ;KACL;KACF;KACN,SACE,gBACK,MAAM;MACL,IAAI,CAAC,YAAY,YAAY,GAC3B,aAAa,OAAO,CAAC;KAEzB,IACA,KAAA;KAEN,OAAO;MAAE,OAAO;MAAQ,QAAQ;MAAQ,SAAS;KAAE;IACpD,CAAA,GACA,eAAe,SAAS,YACvB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;KACE,GAAI,UAAU,8BAA8B;KAC5C,aAAU;KACV,eAAa,eAAe,WAAW,KAAA;KACvC,gBAAgB,MAAM;MACpB,MAAM,YAAY,sBAAsB,QAAQ;MAChD,IAAI,WACF,YAAY,kBAAkB;OAC5B;OACA,MAAM;OACN;OACA,cAAc,MAAM,SAAS;OAC7B,eAAe,MAAM,SAAS;OAC9B,WAAW;OACX,cAAc;MAChB,CAAC;KAEL;IACD,CAAA,GACD,oBAAC,OAAD;KACE,GAAI,UAAU,8BAA8B;KAC5C,aAAU;KACV,eAAa,eAAe,SAAS,KAAA;KACrC,gBAAgB,MAAM;MACpB,MAAM,YAAY,sBAAsB,QAAQ;MAChD,IAAI,WACF,YAAY,kBAAkB;OAC5B;OACA,MAAM;OACN;OACA,cAAc,MAAM,SAAS;OAC7B,eAAe,MAAM,SAAS;OAC9B,WAAW;OACX,cAAc;MAChB,CAAC;KAEL;IACD,CAAA,CACD,EAAA,CAAA,CAED;GAlFE,GAAA,MAAM,EAkFR;EAET,CAAC;EAED,MAAM,eAAe,eAAe,aAAa,SAAS,OAAO,CAAC;EAElE,MAAM,mBAAmB,aAAa,KAAK,OAAO,UAChD,oBAAC,KAAD;GAEE,GAAI,UAAU,+BAA+B,EAC3C,OAAO,EACL,KAAK,QAAQ,MAAM,4DACrB,EACF,CAAC;GAED,UAAA,oBAAC,eAAD;IACS;IACP,UAAA;IACA,QAAA;IACiB;IACJ;IACL;IACF;IACN,SAAS,gBAAgB,MAAM,aAAa,OAAO,CAAC,IAAI,KAAA;IACxD,OAAO;KAAE,OAAO;KAAQ,QAAQ;IAAO;GACxC,CAAA;EACE,GAlBE,WAAW,MAAM,IAkBnB,CACN;EAED,MAAM,wBACJ,yBAAyB,KAAA,IACrB,mBAAmB,gBAAgB,CAAC,CACjC,QAAQ,YAAY,QAAQ,MAAM,MAAM,EAAE,SAAS,UAAU,oBAAoB,CAAC,CAAC,CACnF,KAAK,YAAY;GAChB,MAAM,cAAc,QAAQ,QACzB,MAAM,EAAE,SAAS,UAAU,oBAC9B,CAAC,CAAC;GACF,MAAM,cAAc,KAAK,IAAI,GAAG,QAAQ,KAAK,MAAM,EAAE,SAAS,GAAG,CAAC;GAClE,MAAM,eAAe,KAAK,IACxB,GAAG,QAAQ,KAAK,MAAM,EAAE,SAAS,MAAM,EAAE,SAAS,MAAM,CAC1D;GAEA,OACE,oBAAC,YAAD;IAEE,QAAQ;IACR,iBAAiB;IACX;IACE;IACS;IACJ;IACC;IACd,OAAO;KACL,UAAU;KACV,MAAM,QAAQ,YAAY;KAC1B,OAAO,QAAQ,eAAe,YAAY;KAC1C,QAAQ;KACR,QAAQ;KACR,eAAe;KACf,QAAQ;IACV;IACA,GAAI;IACJ,GAAI;GACL,GAnBM,QAAQ,QAAQ,EAAE,CAAC,IAmBzB;EAEL,CAAC,IACH,CAAC;EAEP,OACE,qBAAC,qBAAD;GAEY;GACO;GACF;GACf,MAAM;GACC;GACI;GACH;GACgB;GACT;GACf,uBAAuB;GACjB;GACI;GACM;GAChB,eAAe;GACf,aAAa;GACb,qBAAqB,OAAO,YAAY,WAAW;IACjD,MAAM,YAAY,0BAA0B,OAAO,MAAM;IACzD,IAAI,cAAc,MAAM;KACtB,SAAS,eAAe,OAAO;MAAE;MAAY;KAAU,CAAC;KACxD,kBAAkB;MAAE;MAAY;KAAU,CAAC;IAC7C;GACF;GACA,qBAAqB,SAAS;GAC9B,iBAAiB,OAAO,YAAY,WAAW;IAC7C,MAAM,YAAY,0BAA0B,OAAO,MAAM;IACzD,IAAI,cAAc,MAChB,SAAS,WAAW,OAAO;KAAE;KAAY;IAAU,CAAC;GAExD;GACA,qBACE,CAAC,yBAAyB,SAAS,YAAY,eAAe,SAAS,KACnE,SAAS,WAAW,YACpB,KAAA;GAEc;GACpB,mBAAmB,eAAe;GAClC,oBAAoB,eAAe;GACnC,uBAAuB,SAAS;IAC9B,sBAAsB,QAAQ,iBAAiB;GACjD;GACqB;GACH;GACP;GACX,WAAW,YAAY,iBAAiB,iBAAiB,KAAA;GACzD,aAAa,aAAa;GA9C5B,UAAA;IAgDG;IACA;IACA;IACA;IACA,SAAS,aAAa,OAAO,eAAe,SAAS,MACpD,SAAS,iBAAiB,gBACxB,oBAAC,KAAD;KACE,KAAK,EAAE,SAAS,CAAC,SAAS,UAAU;KACpC,GAAI,UAAU,+BAA+B,EAC3C,cAAc;MACZ,MAAM,EAAE,KAAK,WAAW,eAAe;OACrC,OAAO;QACL,GAAG,SAAS,iBAAiB;QAC7B,OAAO,SAAS,YAAY;QAC5B,KAAK,SAAS,YAAY;OAC5B;OACA;OACA;OACA;MACF,CAAC;MACD,OAAO;OACL,UAAU;OACV,iBAAiB;OACjB,eAAe;OACf,GAAG,sBAAsB;QAAE,OAAO;QAAK,MAAM;QAAQ,MAAM;OAAa,CAAC;MAC3E;KACF,EAAA,CAAG,EACL,CAAC;IACF,CAAA;GAEc;EA7Ed,GAAA,SAAS,EA6EK;CAEzB,CAAC;CAED,MAAM,cAAc,WAAW;EAC7B,MAAM,MAAM,IAAI;EAChB,QAAQ,IAAI,UAAU,MAAM;EAC5B,QAAQ;CACV,CAAC;CAED,MAAM,UACJ,qBAAC,KAAD;EACE,GAAI,UAAU,kBAAkB;EAChC,KAAK;GACH,QAAQ,SAAS;GACjB,iBAAiB,eAAe;GAChC,UAAU,YAAY;GACtB,qBAAqB,YAAY,cAAc,SAAS,iBAAiB;EAC3E;EACA,GAAI;EARN,UAAA,CAUG,cACC,oBAAC,oBAAD;GACE,MAAK;GACL,oBAAoB;IAClB,gBAAgB,aAAa,MAAM,IAAI,CAAC,CAAC,SAAS,GAAG,KAAK,CAAC;IAC3D,YAAY,aAAa,MAAM,IAAI,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC;IAClD,aAAa,aAAa,WAAW,CAAC;GACxC;GACA,SAAS;IACP,KAAK;IACL,OAAO;GACT;GACQ;GACM;GACA;GACQ;GACJ;GACC;GACnB,iBAAiB;IAAE,OAAO;KAAC;KAAO;KAAQ;IAAO;IAAY,GAAG;GAAgB;GAChE;EACjB,CAAA,GAGH,oBAAC,KAAD;GAAK,GAAI,UAAU,sBAAsB;GACvC,UAAA,oBAAC,YAAD;IACE,eAAe;IACf,GAAI;IACJ,GAAI,UAAU,8BAA8B;KAC1C,WAAW,iBAAiB;KAC5B,OAAO,iBAAiB;IAC1B,CAAC;IACD,yBAAyB,aAAa;KACpC,iBAAiB,yBAAyB,QAAQ;KAClD,YAAY,SAAS,MAAM,CAAC;KAC5B,aAAa,SAAS,MAAM,CAAC;IAC/B;IACA,aAAa;IAEb,UAAA,qBAAC,OAAD;KAAK,GAAI,UAAU,uBAAuB;KAA1C,UAAA;MACE,qBAAC,KAAD;OAAK,GAAI,UAAU,+BAA+B;OAAG,KAAK,EAAE,SAAS;OAArE,UAAA,CACE,8BAAC,OAAD;QACE,GAAI,UAAU,wBAAwB;QACtC,KAAI;QACJ,OACE,YACI;SACE,WACE;SACF,UACE;QACJ,IACA,KAAA;OAIH,GADF,SAAS,aAAa,MAAM,CAC1B,GACJ,UACE;;MAEJ;MAEA,qBACC,qBAAC,KAAD;OACE,GAAI,UAAU,sCAAsC;OACpD,QAAQ;QACN,2BAA2B,YACvB,+MAA+M,oBAAoB,WACnO,mHAAmH,oBAAoB;QAC3I,wBAAwB,sBACpB,SAAS,CAAC,CACX,YAAY,CAAC,CACb,SAAS,GAAG,IACX,SACA;OACN;OAZF,UAAA;QAcG,yBACC,oBAAC,OAAD;SAAK,GAAI,UAAU,gDAAgD;SAChE,UAAA;QACE,CAAA;QAEN,CAAC,yBACA,oBAAC,OAAD,EAAK,GAAI,UAAU,2CAA2C,EAAI,CAAA;QAEpE,oBAAC,OAAD,EAAK,GAAI,UAAU,0CAA0C,EAAI,CAAA;OAC9D;;KAEJ;;GACK,CAAA;EACT,CAAA,CACF;;CAGP,MAAM,mBAAmB,cACjB,SAAS,kBACf,CAAC,SAAS,gBAAgB,CAC5B;CAEA,IAAI,uBACF,OAAO,oBAAC,YAAY,UAAb;EAAsB,OAAO;EAAmB,UAAA;CAA8B,CAAA;CAGvF,OAAO;AACT,CAAC;AAED,iBAAiB,cAAc;AAC/B,iBAAiB,UAAUA;AAC3B,iBAAiB,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesDayView.module.mjs","names":[],"sources":["../../../src/components/ResourcesDayView/ResourcesDayView.module.css"],"sourcesContent":[".resourcesDayView {\n --resources-day-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n --resources-day-view-resource-label-width: 120px;\n --resources-day-view-slot-width: 80px;\n --resources-day-view-row-height: 64px;\n --resources-day-view-group-label-width: 80px;\n --resources-day-view-all-day-height: 20px;\n\n @mixin where-light {\n --resources-day-view-border-color: var(--mantine-color-gray-3);\n --resources-day-view-business-hours-bg: var(--mantine-color-white);\n --resources-day-view-non-business-hours-bg: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --resources-day-view-border-color: var(--mantine-color-dark-4);\n --resources-day-view-business-hours-bg: var(--mantine-color-dark-7);\n --resources-day-view-non-business-hours-bg: var(--mantine-color-dark-6);\n }\n}\n\n.resourcesDayViewRoot {\n border: 1px solid var(--resources-day-view-border-color);\n border-radius: var(--resources-day-view-radius);\n overflow: hidden;\n max-width: fit-content;\n position: relative;\n}\n\n.resourcesDayViewScrollArea {\n :where([data-mantine-scrollbar]) {\n z-index: 20;\n }\n\n :where([data-scrollarea-viewport]) {\n overscroll-behavior-x: none;\n }\n}\n\n.resourcesDayViewInner {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n}\n\n.resourcesDayViewTimeLabelsRow {\n display: flex;\n position: sticky;\n top: 0;\n z-index: 5;\n background-color: var(--mantine-color-body);\n border-bottom: 1px solid var(--resources-day-view-border-color);\n margin-bottom: -1px;\n transition: box-shadow 100ms ease;\n\n &:where([data-scrolled]) {\n box-shadow: var(--mantine-shadow-sm);\n }\n}\n\n.resourcesDayViewCorner {\n flex: 0 0 var(--resources-day-view-resource-label-width);\n min-width: var(--resources-day-view-resource-label-width);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n position: sticky;\n left: 0;\n z-index: 11;\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n}\n\n.resourcesDayViewTimeLabel {\n flex: 0 0 var(--resources-day-view-slot-width);\n min-width: var(--resources-day-view-slot-width);\n max-width: var(--resources-day-view-slot-width);\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-sm);\n user-select: none;\n cursor: default;\n font-variant-numeric: tabular-nums;\n text-transform: uppercase;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where([data-business-hours]) {\n background-color: var(--resources-day-view-business-hours-bg);\n }\n\n &:where([data-non-business-hours]) {\n background-color: var(--resources-day-view-non-business-hours-bg);\n }\n}\n\n.resourcesDayViewRow {\n display: flex;\n border-top: 1px solid var(--resources-day-view-border-color);\n}\n\n.resourcesDayViewResourceLabel {\n flex: 0 0 var(--resources-day-view-resource-label-width);\n min-width: var(--resources-day-view-resource-label-width);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 11;\n background-color: var(--mantine-color-body);\n transition: box-shadow 100ms ease;\n\n &:where([data-scrolled-x]) {\n box-shadow: var(--mantine-shadow-sm);\n }\n\n &:where([data-has-groups]) {\n left: var(--resources-day-view-group-label-width);\n }\n}\n\n.resourcesDayViewGroupColumn {\n flex: 0 0 var(--resources-day-view-group-label-width);\n min-width: var(--resources-day-view-group-label-width);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 12;\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: break-word;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n overflow: visible;\n\n &:where([data-group-position='first']),\n &:where([data-group-position='only']) {\n z-index: 13;\n }\n\n &:where([data-group-position='middle']),\n &:where([data-group-position='last']) {\n margin-top: -1px;\n min-height: calc(var(--resources-day-view-row-height) + 1px);\n }\n}\n\n.resourcesDayViewGroupColumnEmpty {\n flex: 0 0 var(--resources-day-view-group-label-width);\n min-width: var(--resources-day-view-group-label-width);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 12;\n background-color: var(--mantine-color-body);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n}\n\n.resourcesDayViewRowSlots {\n display: flex;\n position: relative;\n min-height: var(--resources-day-view-row-height);\n}\n\n.resourcesDayViewRowSlot {\n flex: 0 0 var(--resources-day-view-slot-width);\n min-width: var(--resources-day-view-slot-width);\n max-width: var(--resources-day-view-slot-width);\n min-height: var(--resources-day-view-row-height);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n cursor: pointer;\n position: relative;\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where(:focus) {\n z-index: 1;\n }\n\n &:where([data-business-hours]) {\n background-color: var(--resources-day-view-business-hours-bg);\n }\n\n &:where([data-non-business-hours]) {\n background-color: var(--resources-day-view-non-business-hours-bg);\n }\n\n &:where([data-drop-target]) {\n @mixin where-light {\n background-color: var(--mantine-color-blue-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n border-radius: 2px;\n\n @mixin where-light {\n border-color: var(--mantine-color-blue-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-blue-6);\n }\n }\n }\n\n &:where([data-drag-selected]) {\n &,\n &:hover {\n background-color: var(--mantine-primary-color-light);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -1px;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-primary-color-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-primary-color-9);\n }\n }\n }\n\n &:where([data-drag-slot-index]) {\n touch-action: none;\n }\n\n &:where([data-static]) {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.resourcesDayViewCurrentTimeIndicator {\n --_indicator-color: var(--resources-day-view-indicator-color, var(--mantine-color-red-7));\n --_time-bubble-height: 18px;\n --_thumb-size: 12px;\n\n position: absolute;\n pointer-events: none;\n top: 37px;\n bottom: 0;\n left: var(--indicator-left-offset);\n width: 2px;\n z-index: 3;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--_indicator-color);\n opacity: 0.2;\n }\n}\n\n.resourcesDayViewCurrentTimeIndicatorLine {\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n background-color: var(--_indicator-color);\n}\n\n.resourcesDayViewCurrentTimeIndicatorThumb {\n position: absolute;\n top: calc(-1 * (var(--_thumb-size) / 2 - 1px));\n width: var(--_thumb-size);\n height: var(--_thumb-size);\n border-radius: 50%;\n border: 1px solid var(--mantine-color-body);\n background-color: var(--_indicator-color);\n left: calc(-1 * (var(--_thumb-size) / 2 - 1px));\n}\n\n.resourcesDayViewCurrentTimeIndicatorTimeBubble {\n position: absolute;\n height: var(--_time-bubble-height);\n width: var(--_time-bubble-width);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 1000px;\n background-color: var(--_indicator-color);\n color: var(--mantine-color-white);\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n box-shadow: var(--mantine-shadow-sm);\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n text-transform: uppercase;\n top: 0;\n left: calc(-1 * (var(--_time-bubble-width) / 2 - 1px));\n z-index: 3;\n}\n\n.resourcesDayViewBackgroundEvent {\n position: absolute;\n pointer-events: none;\n z-index: 2;\n border-radius: var(--resources-day-view-radius);\n background-color: var(--bg-event-bg);\n overflow: hidden;\n font-size: 12px;\n font-weight: var(--mantine-font-weight-medium);\n padding: 3px 4px;\n color: var(--bg-event-color);\n\n &:where([data-interactive]) {\n pointer-events: auto;\n cursor: pointer;\n user-select: none;\n\n @mixin hover {\n background-color: var(--bg-event-hover);\n }\n }\n\n /* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */\n &:where([data-resizing]) {\n @mixin hover {\n background-color: var(--bg-event-bg);\n }\n }\n}\n\n.resourcesDayViewAllDayEvent {\n position: absolute;\n inset-inline: 1px;\n height: var(--resources-day-view-all-day-height);\n z-index: 3;\n}\n\n.resourcesDayViewResizeHandle {\n position: absolute;\n top: 20%;\n width: 4px;\n height: 60%;\n cursor: ew-resize;\n z-index: 5;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 100ms ease;\n pointer-events: all;\n background-color: var(--event-color);\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px -6px;\n }\n\n &:where([data-edge='start']) {\n left: -2px;\n }\n\n &:where([data-edge='end']) {\n right: -2px;\n }\n}\n\n.resourcesDayViewEventWrapper {\n position: absolute;\n z-index: 3;\n\n &:hover .resourcesDayViewResizeHandle {\n opacity: 0.5;\n }\n\n & .resourcesDayViewResizeHandle:hover {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:where([data-active]) {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:not([data-active]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.resourcesDayView:where([data-event-interaction]) .resourcesDayViewRowSlot {\n pointer-events: none;\n}\n\n/* The resizing background event is the one that set `data-event-interaction`, so it must\n keep capturing pointer events. */\n.resourcesDayView:where([data-event-interaction], [data-slot-dragging])\n .resourcesDayViewBackgroundEvent:not([data-resizing]) {\n pointer-events: none;\n\n & .resourcesDayViewResizeHandle {\n pointer-events: none;\n opacity: 0;\n }\n}\n\n.resourcesDayViewBackgroundEvent {\n & .resourcesDayViewResizeHandle {\n background-color: var(--bg-event-color);\n\n &:where([data-edge='start']) {\n left: 0;\n }\n\n &:where([data-edge='end']) {\n right: 0;\n }\n }\n\n &:hover .resourcesDayViewResizeHandle {\n opacity: 0.5;\n }\n\n & .resourcesDayViewResizeHandle:hover {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:where([data-active]) {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:not([data-active]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.resourcesDayView:where([data-resizing]) {\n & * {\n cursor: ew-resize !important;\n }\n\n & .resourcesDayViewEventWrapper:not([data-resizing]) {\n pointer-events: none;\n\n & .resourcesDayViewResizeHandle {\n opacity: 0;\n }\n }\n}\n\n.resourcesDayViewDragPreview {\n pointer-events: none;\n z-index: 3;\n border-radius: var(--resources-day-view-radius);\n border: 1px dashed var(--mantine-color-blue-filled);\n background-color: var(--mantine-color-blue-light);\n opacity: 0.6;\n\n &:where([data-invalid]) {\n border-color: var(--mantine-color-error);\n background-color: transparent;\n opacity: 0.4;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ResourcesDayView.module.mjs","names":[],"sources":["../../../src/components/ResourcesDayView/ResourcesDayView.module.css"],"sourcesContent":[".resourcesDayView {\n --_business-hours-direction: to right;\n --resources-day-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n --resources-day-view-resource-label-width: 120px;\n --resources-day-view-slot-width: 80px;\n --resources-day-view-row-height: 64px;\n --resources-day-view-group-label-width: 80px;\n --resources-day-view-all-day-height: 20px;\n\n @mixin where-light {\n --resources-day-view-border-color: var(--mantine-color-gray-3);\n --resources-day-view-business-hours-bg: var(--mantine-color-white);\n --resources-day-view-non-business-hours-bg: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --resources-day-view-border-color: var(--mantine-color-dark-4);\n --resources-day-view-business-hours-bg: var(--mantine-color-dark-7);\n --resources-day-view-non-business-hours-bg: var(--mantine-color-dark-6);\n }\n\n @mixin rtl {\n --_business-hours-direction: to left;\n }\n}\n\n.resourcesDayViewRoot {\n border: 1px solid var(--resources-day-view-border-color);\n border-radius: var(--resources-day-view-radius);\n overflow: hidden;\n max-width: fit-content;\n position: relative;\n}\n\n.resourcesDayViewScrollArea {\n :where([data-mantine-scrollbar]) {\n z-index: 20;\n }\n\n :where([data-scrollarea-viewport]) {\n overscroll-behavior-x: none;\n }\n}\n\n.resourcesDayViewInner {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n}\n\n.resourcesDayViewTimeLabelsRow {\n display: flex;\n position: sticky;\n top: 0;\n z-index: 14;\n background-color: var(--mantine-color-body);\n border-bottom: 1px solid var(--resources-day-view-border-color);\n margin-bottom: -1px;\n transition: box-shadow 100ms ease;\n\n &:where([data-scrolled]) {\n box-shadow: var(--mantine-shadow-sm);\n }\n}\n\n.resourcesDayViewCorner {\n flex: 0 0 var(--resources-day-view-resource-label-width);\n min-width: var(--resources-day-view-resource-label-width);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n position: sticky;\n left: 0;\n z-index: 11;\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n}\n\n.resourcesDayViewTimeLabel {\n flex: 0 0 var(--resources-day-view-slot-width);\n min-width: var(--resources-day-view-slot-width);\n max-width: var(--resources-day-view-slot-width);\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-sm);\n user-select: none;\n cursor: default;\n font-variant-numeric: tabular-nums;\n text-transform: uppercase;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where([data-business-hours]) {\n background-color: var(--resources-day-view-business-hours-bg);\n }\n\n &:where([data-non-business-hours]) {\n background-color: var(--resources-day-view-non-business-hours-bg);\n }\n\n &:where([data-partial-business-hours]) {\n background-image: linear-gradient(\n var(--_business-hours-direction),\n var(--resources-day-view-non-business-hours-bg) var(--business-hours-from),\n var(--resources-day-view-business-hours-bg) var(--business-hours-from),\n var(--resources-day-view-business-hours-bg) var(--business-hours-to),\n var(--resources-day-view-non-business-hours-bg) var(--business-hours-to)\n );\n }\n}\n\n.resourcesDayViewRow {\n display: flex;\n border-top: 1px solid var(--resources-day-view-border-color);\n}\n\n.resourcesDayViewResourceLabel {\n flex: 0 0 var(--resources-day-view-resource-label-width);\n min-width: var(--resources-day-view-resource-label-width);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 11;\n background-color: var(--mantine-color-body);\n transition: box-shadow 100ms ease;\n\n &:where([data-scrolled-x]) {\n box-shadow: var(--mantine-shadow-sm);\n }\n\n &:where([data-has-groups]) {\n left: var(--resources-day-view-group-label-width);\n }\n}\n\n.resourcesDayViewGroupColumn {\n flex: 0 0 var(--resources-day-view-group-label-width);\n min-width: var(--resources-day-view-group-label-width);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 12;\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: break-word;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n overflow: visible;\n\n &:where([data-group-position='first']),\n &:where([data-group-position='only']) {\n z-index: 13;\n }\n\n &:where([data-group-position='middle']),\n &:where([data-group-position='last']) {\n margin-top: -1px;\n min-height: calc(var(--resources-day-view-row-height) + 1px);\n }\n}\n\n.resourcesDayViewGroupColumnEmpty {\n flex: 0 0 var(--resources-day-view-group-label-width);\n min-width: var(--resources-day-view-group-label-width);\n min-height: var(--resources-day-view-row-height);\n position: sticky;\n left: 0;\n z-index: 12;\n background-color: var(--mantine-color-body);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n}\n\n.resourcesDayViewRowSlots {\n display: flex;\n position: relative;\n min-height: var(--resources-day-view-row-height);\n}\n\n.resourcesDayViewRowSlot {\n flex: 0 0 var(--resources-day-view-slot-width);\n min-width: var(--resources-day-view-slot-width);\n max-width: var(--resources-day-view-slot-width);\n min-height: var(--resources-day-view-row-height);\n border-inline-end: 1px solid var(--resources-day-view-border-color);\n cursor: pointer;\n position: relative;\n\n @mixin hover {\n background-image: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where(:focus) {\n z-index: 1;\n }\n\n &:where([data-business-hours]) {\n background-color: var(--resources-day-view-business-hours-bg);\n }\n\n &:where([data-non-business-hours]) {\n background-color: var(--resources-day-view-non-business-hours-bg);\n }\n\n &:where([data-partial-business-hours]) {\n background-image: linear-gradient(\n var(--_business-hours-direction),\n var(--resources-day-view-non-business-hours-bg) var(--business-hours-from),\n var(--resources-day-view-business-hours-bg) var(--business-hours-from),\n var(--resources-day-view-business-hours-bg) var(--business-hours-to),\n var(--resources-day-view-non-business-hours-bg) var(--business-hours-to)\n );\n }\n\n &:where([data-drop-target]) {\n background-image: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-blue-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n border-radius: 2px;\n\n @mixin where-light {\n border-color: var(--mantine-color-blue-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-blue-6);\n }\n }\n }\n\n &:where([data-drag-selected]) {\n &,\n &:hover {\n background-image: none;\n background-color: var(--mantine-primary-color-light);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -1px;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-primary-color-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-primary-color-9);\n }\n }\n }\n\n &:where([data-drag-slot-index]) {\n touch-action: none;\n }\n\n &:where([data-static]) {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.resourcesDayViewCurrentTimeIndicator {\n --_indicator-color: var(--resources-day-view-indicator-color, var(--mantine-color-red-7));\n --_time-bubble-height: 18px;\n --_thumb-size: 12px;\n\n position: absolute;\n pointer-events: none;\n top: 37px;\n bottom: 0;\n left: var(--indicator-left-offset);\n width: 2px;\n z-index: 3;\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--_indicator-color);\n opacity: 0.2;\n }\n}\n\n.resourcesDayViewCurrentTimeIndicatorLine {\n width: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n background-color: var(--_indicator-color);\n}\n\n.resourcesDayViewCurrentTimeIndicatorThumb {\n position: absolute;\n top: calc(-1 * (var(--_thumb-size) / 2 - 1px));\n width: var(--_thumb-size);\n height: var(--_thumb-size);\n border-radius: 50%;\n border: 1px solid var(--mantine-color-body);\n background-color: var(--_indicator-color);\n left: calc(-1 * (var(--_thumb-size) / 2 - 1px));\n}\n\n.resourcesDayViewCurrentTimeIndicatorTimeBubble {\n position: absolute;\n height: var(--_time-bubble-height);\n width: var(--_time-bubble-width);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 1000px;\n background-color: var(--_indicator-color);\n color: var(--mantine-color-white);\n font-size: var(--mantine-font-size-xs);\n font-weight: var(--mantine-font-weight-bold);\n box-shadow: var(--mantine-shadow-sm);\n white-space: nowrap;\n font-variant-numeric: tabular-nums;\n text-transform: uppercase;\n top: 0;\n left: calc(-1 * (var(--_time-bubble-width) / 2 - 1px));\n z-index: 3;\n}\n\n.resourcesDayViewBackgroundEvent {\n position: absolute;\n pointer-events: none;\n z-index: 2;\n border-radius: var(--resources-day-view-radius);\n background-color: var(--bg-event-bg);\n overflow: hidden;\n font-size: 12px;\n font-weight: var(--mantine-font-weight-medium);\n padding: 3px 4px;\n color: var(--bg-event-color);\n\n &:where([data-interactive]) {\n pointer-events: auto;\n cursor: pointer;\n user-select: none;\n\n @mixin hover {\n background-color: var(--bg-event-hover);\n }\n }\n\n /* The resized edge repeatedly crosses the pointer, so hover feedback would flicker */\n &:where([data-resizing]) {\n @mixin hover {\n background-color: var(--bg-event-bg);\n }\n }\n}\n\n.resourcesDayViewAllDayEvent {\n position: absolute;\n inset-inline: 1px;\n height: var(--resources-day-view-all-day-height);\n z-index: 3;\n}\n\n.resourcesDayViewResizeHandle {\n position: absolute;\n top: 20%;\n width: 4px;\n height: 60%;\n cursor: ew-resize;\n z-index: 5;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 100ms ease;\n pointer-events: all;\n background-color: var(--event-color);\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px -6px;\n }\n\n &:where([data-edge='start']) {\n left: -2px;\n }\n\n &:where([data-edge='end']) {\n right: -2px;\n }\n}\n\n.resourcesDayViewEventWrapper {\n position: absolute;\n z-index: 3;\n\n &:hover .resourcesDayViewResizeHandle {\n opacity: 0.5;\n }\n\n & .resourcesDayViewResizeHandle:hover {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:where([data-active]) {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:not([data-active]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.resourcesDayView:where([data-event-interaction]) .resourcesDayViewRowSlot {\n pointer-events: none;\n}\n\n/* The resizing background event is the one that set `data-event-interaction`, so it must\n keep capturing pointer events. */\n.resourcesDayView:where([data-event-interaction], [data-slot-dragging])\n .resourcesDayViewBackgroundEvent:not([data-resizing]) {\n pointer-events: none;\n\n & .resourcesDayViewResizeHandle {\n pointer-events: none;\n opacity: 0;\n }\n}\n\n.resourcesDayViewBackgroundEvent {\n & .resourcesDayViewResizeHandle {\n background-color: var(--bg-event-color);\n\n &:where([data-edge='start']) {\n left: 0;\n }\n\n &:where([data-edge='end']) {\n right: 0;\n }\n }\n\n &:hover .resourcesDayViewResizeHandle {\n opacity: 0.5;\n }\n\n & .resourcesDayViewResizeHandle:hover {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:where([data-active]) {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesDayViewResizeHandle:not([data-active]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.resourcesDayView:where([data-resizing]) {\n & * {\n cursor: ew-resize !important;\n }\n\n & .resourcesDayViewEventWrapper:not([data-resizing]) {\n pointer-events: none;\n\n & .resourcesDayViewResizeHandle {\n opacity: 0;\n }\n }\n}\n\n.resourcesDayViewDragPreview {\n pointer-events: none;\n z-index: 3;\n border-radius: var(--resources-day-view-radius);\n border: 1px dashed var(--mantine-color-blue-filled);\n background-color: var(--mantine-color-blue-light);\n opacity: 0.6;\n\n &:where([data-invalid]) {\n border-color: var(--mantine-color-error);\n background-color: transparent;\n opacity: 0.4;\n }\n}\n"],"mappings":""}
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { getLabel } from "../../labels.mjs";
|
|
3
|
-
import {
|
|
3
|
+
import { clampIntervalMinutes } from "../../utils/clamp-interval-minutes/clamp-interval-minutes.mjs";
|
|
4
|
+
import { getBusinessHoursState } from "../../utils/get-business-hours-mod/get-business-hours-mod.mjs";
|
|
5
|
+
import { addMinutesToTime } from "../../utils/add-minutes-to-time/add-minutes-to-time.mjs";
|
|
4
6
|
import { Box, UnstyledButton } from "@mantine/core";
|
|
5
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
8
|
//#region packages/@mantine/schedule/src/components/ResourcesDayView/ResourcesDayViewColumn.tsx
|
|
7
|
-
function ResourcesDayViewRow({ resource, resourceIndex, date, slots, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount }) {
|
|
9
|
+
function ResourcesDayViewRow({ resource, resourceIndex, date, slots, intervalMinutes, getStyles, children, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onRowSlotsDragOver, onRowSlotsDragLeave, onRowSlotsDrop, onSlotClick, dropTargetSlotIndex, mode, slotsRef, firstSlotIndex, onSlotKeyDown, withDragSlotSelect, onSlotPointerDown, isSlotDragSelected, rowSlotsContainerRef, renderResourceLabel, renderGroupLabel, scrolledX, groupInfo, allDayCount }) {
|
|
8
10
|
const slotGroup = String(resource.id);
|
|
9
11
|
const items = slots.map((slot, slotIndex) => {
|
|
10
12
|
const isDropTarget = dropTargetSlotIndex === slotIndex;
|
|
11
13
|
const isFirstSlot = firstSlotIndex?.resourceIndex === resourceIndex && firstSlotIndex?.slotIndex === slotIndex;
|
|
12
14
|
const isDragSelected = isSlotDragSelected?.(slotIndex, slotGroup) || false;
|
|
15
|
+
const businessHoursState = getBusinessHoursState({
|
|
16
|
+
time: slot.startTime,
|
|
17
|
+
endTime: addMinutesToTime(slot.startTime, clampIntervalMinutes(intervalMinutes)),
|
|
18
|
+
businessHours,
|
|
19
|
+
highlightBusinessHours
|
|
20
|
+
});
|
|
13
21
|
return /* @__PURE__ */ jsx(UnstyledButton, {
|
|
14
22
|
ref: (node) => {
|
|
15
23
|
if (!slotsRef?.current) return;
|
|
@@ -24,15 +32,12 @@ function ResourcesDayViewRow({ resource, resourceIndex, date, slots, getStyles,
|
|
|
24
32
|
...getStyles("resourcesDayViewRowSlot"),
|
|
25
33
|
mod: {
|
|
26
34
|
"hour-start": slot.isHourStart,
|
|
27
|
-
...
|
|
28
|
-
time: slot.startTime,
|
|
29
|
-
businessHours,
|
|
30
|
-
highlightBusinessHours
|
|
31
|
-
}),
|
|
35
|
+
...businessHoursState.mod,
|
|
32
36
|
"drop-target": isDropTarget,
|
|
33
37
|
"drag-selected": isDragSelected,
|
|
34
38
|
static: mode === "static"
|
|
35
39
|
},
|
|
40
|
+
__vars: businessHoursState.vars,
|
|
36
41
|
"aria-label": `${getLabel("resourceSlot", labels)} ${resource.label} ${date} ${slot.startTime} - ${slot.endTime}`,
|
|
37
42
|
tabIndex: mode === "static" ? -1 : isFirstSlot ? 0 : -1,
|
|
38
43
|
"data-drag-slot-index": withDragSlotSelect && mode !== "static" ? slotIndex : void 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesDayViewColumn.mjs","names":[],"sources":["../../../src/components/ResourcesDayView/ResourcesDayViewColumn.tsx"],"sourcesContent":["import { Box, GetStylesApi, UnstyledButton } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { ScheduleMode, ScheduleResourceData, ScheduleResourceGroup } from '../../types';\nimport {\n DayTimeInterval,\n
|
|
1
|
+
{"version":3,"file":"ResourcesDayViewColumn.mjs","names":[],"sources":["../../../src/components/ResourcesDayView/ResourcesDayViewColumn.tsx"],"sourcesContent":["import { Box, GetStylesApi, UnstyledButton } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { ScheduleMode, ScheduleResourceData, ScheduleResourceGroup } from '../../types';\nimport {\n DayTimeInterval,\n addMinutesToTime,\n clampIntervalMinutes,\n getBusinessHoursState,\n ResourceGroupInfo,\n ResourcesGridControlsRef,\n} from '../../utils';\nimport type { ResourcesDayViewFactory } from './ResourcesDayView';\n\nexport interface ResourcesDayViewRowProps {\n resource: ScheduleResourceData;\n resourceIndex: number;\n date: string;\n slots: DayTimeInterval[];\n intervalMinutes: number;\n getStyles: GetStylesApi<ResourcesDayViewFactory>;\n children?: React.ReactNode;\n labels?: ScheduleLabelsOverride;\n highlightBusinessHours?: boolean;\n businessHours?: [string, string];\n withEventsDragAndDrop?: boolean;\n onRowSlotsDragOver?: (\n e: React.DragEvent<HTMLDivElement>,\n resourceId: string | number,\n resourceIndex: number\n ) => void;\n onRowSlotsDragLeave?: () => void;\n onRowSlotsDrop?: (\n e: React.DragEvent<HTMLDivElement>,\n resourceId: string | number,\n resourceIndex: number\n ) => void;\n onSlotClick?: (\n resourceId: string | number,\n slotTime: string,\n event: React.MouseEvent<HTMLButtonElement>\n ) => void;\n dropTargetSlotIndex?: number;\n mode?: ScheduleMode;\n slotsRef?: ResourcesGridControlsRef;\n firstSlotIndex?: { resourceIndex: number; slotIndex: number };\n onSlotKeyDown?: (\n event: React.KeyboardEvent<HTMLButtonElement>,\n resourceIndex: number,\n slotIndex: number\n ) => void;\n withDragSlotSelect?: boolean;\n onSlotPointerDown?: (\n event: React.PointerEvent<HTMLButtonElement>,\n index: number,\n group: string\n ) => void;\n isSlotDragSelected?: (index: number, group: string) => boolean;\n rowSlotsContainerRef?: (node: HTMLDivElement | null) => void;\n renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode;\n renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode;\n scrolledX?: boolean;\n groupInfo?: ResourceGroupInfo | null;\n allDayCount?: number;\n}\n\nexport function ResourcesDayViewRow({\n resource,\n resourceIndex,\n date,\n slots,\n intervalMinutes,\n getStyles,\n children,\n labels,\n highlightBusinessHours,\n businessHours,\n withEventsDragAndDrop,\n onRowSlotsDragOver,\n onRowSlotsDragLeave,\n onRowSlotsDrop,\n onSlotClick,\n dropTargetSlotIndex,\n mode,\n slotsRef,\n firstSlotIndex,\n onSlotKeyDown,\n withDragSlotSelect,\n onSlotPointerDown,\n isSlotDragSelected,\n rowSlotsContainerRef,\n renderResourceLabel,\n renderGroupLabel,\n scrolledX,\n groupInfo,\n allDayCount,\n}: ResourcesDayViewRowProps) {\n const slotGroup = String(resource.id);\n\n const items = slots.map((slot, slotIndex) => {\n const isDropTarget = dropTargetSlotIndex === slotIndex;\n const isFirstSlot =\n firstSlotIndex?.resourceIndex === resourceIndex && firstSlotIndex?.slotIndex === slotIndex;\n const isDragSelected = isSlotDragSelected?.(slotIndex, slotGroup) || false;\n\n const businessHoursState = getBusinessHoursState({\n time: slot.startTime,\n endTime: addMinutesToTime(slot.startTime, clampIntervalMinutes(intervalMinutes)),\n businessHours,\n highlightBusinessHours,\n });\n\n return (\n <UnstyledButton\n key={slot.startTime}\n ref={(node) => {\n if (!slotsRef?.current) {\n return;\n }\n if (!slotsRef.current[resourceIndex]) {\n slotsRef.current[resourceIndex] = [];\n }\n const row = slotsRef.current[resourceIndex];\n if (node) {\n row[slotIndex] = node;\n } else {\n delete row[slotIndex];\n while (row.length > 0 && row[row.length - 1] == null) {\n row.length -= 1;\n }\n }\n }}\n {...getStyles('resourcesDayViewRowSlot')}\n mod={{\n 'hour-start': slot.isHourStart,\n ...businessHoursState.mod,\n 'drop-target': isDropTarget,\n 'drag-selected': isDragSelected,\n static: mode === 'static',\n }}\n __vars={businessHoursState.vars}\n aria-label={`${getLabel('resourceSlot', labels)} ${resource.label} ${date} ${slot.startTime} - ${slot.endTime}`}\n tabIndex={mode === 'static' ? -1 : isFirstSlot ? 0 : -1}\n data-drag-slot-index={withDragSlotSelect && mode !== 'static' ? slotIndex : undefined}\n data-drag-slot-group={withDragSlotSelect && mode !== 'static' ? slotGroup : undefined}\n onKeyDown={(e) => {\n if (onSlotKeyDown) {\n onSlotKeyDown(e, resourceIndex, slotIndex);\n }\n }}\n onPointerDown={\n withDragSlotSelect && mode !== 'static'\n ? (e) => onSlotPointerDown?.(e, slotIndex, slotGroup)\n : undefined\n }\n onClick={\n mode === 'static' || !onSlotClick\n ? undefined\n : (e) => onSlotClick(resource.id, slot.startTime, e)\n }\n onDragOver={\n withEventsDragAndDrop && mode !== 'static' ? (e) => e.preventDefault() : undefined\n }\n />\n );\n });\n\n const isGroupStart = groupInfo?.position === 'first' || groupInfo?.position === 'only';\n const groupCell =\n groupInfo !== undefined ? (\n groupInfo !== null ? (\n <Box\n {...getStyles('resourcesDayViewGroupColumn')}\n mod={{ 'scrolled-x': scrolledX, 'group-position': groupInfo.position }}\n >\n {isGroupStart && (\n <span\n style={\n groupInfo.count > 1\n ? {\n transform: `translateY(calc((${groupInfo.count - 1} * (var(--resources-day-view-row-height) + 1px)) / 2))`,\n }\n : undefined\n }\n >\n {renderGroupLabel ? renderGroupLabel(groupInfo.group) : groupInfo.group.label}\n </span>\n )}\n </Box>\n ) : (\n <Box {...getStyles('resourcesDayViewGroupColumnEmpty')} mod={{ 'scrolled-x': scrolledX }} />\n )\n ) : null;\n\n return (\n <Box {...getStyles('resourcesDayViewRow')}>\n {groupCell}\n <Box\n {...getStyles('resourcesDayViewResourceLabel')}\n mod={{ 'scrolled-x': scrolledX, 'has-groups': groupInfo !== undefined }}\n >\n {renderResourceLabel ? renderResourceLabel(resource) : resource.label}\n </Box>\n <Box\n ref={rowSlotsContainerRef}\n {...getStyles('resourcesDayViewRowSlots', {\n style: allDayCount\n ? {\n minHeight: `max(var(--resources-day-view-row-height), calc(${allDayCount} * (var(--resources-day-view-all-day-height) + 2px) + 4px))`,\n }\n : undefined,\n })}\n onDragOver={\n withEventsDragAndDrop && mode !== 'static'\n ? (e) => onRowSlotsDragOver?.(e, resource.id, resourceIndex)\n : undefined\n }\n onDragLeave={withEventsDragAndDrop && mode !== 'static' ? onRowSlotsDragLeave : undefined}\n onDrop={\n withEventsDragAndDrop && mode !== 'static'\n ? (e) => onRowSlotsDrop?.(e, resource.id, resourceIndex)\n : undefined\n }\n >\n {children}\n {items}\n </Box>\n </Box>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResourcesMonthView.module.mjs","names":[],"sources":["../../../src/components/ResourcesMonthView/ResourcesMonthView.module.css"],"sourcesContent":[".resourcesMonthView {\n --resources-month-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n --resources-month-view-resource-label-width: 120px;\n --resources-month-view-day-width: 80px;\n --resources-month-view-row-height: 64px;\n --resources-month-view-group-label-width: 80px;\n\n @mixin where-light {\n --resources-month-view-border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --resources-month-view-border-color: var(--mantine-color-dark-4);\n }\n}\n\n.resourcesMonthViewRoot {\n border: 1px solid var(--resources-month-view-border-color);\n border-radius: var(--resources-month-view-radius);\n overflow: hidden;\n max-width: fit-content;\n}\n\n.resourcesMonthViewScrollArea {\n :where([data-mantine-scrollbar]) {\n z-index: 20;\n }\n\n :where([data-scrollarea-viewport]) {\n overscroll-behavior-x: none;\n }\n}\n\n.resourcesMonthViewInner {\n display: inline-flex;\n flex-direction: column;\n}\n\n.resourcesMonthViewDayLabelsRow {\n display: flex;\n position: sticky;\n top: 0;\n z-index:
|
|
1
|
+
{"version":3,"file":"ResourcesMonthView.module.mjs","names":[],"sources":["../../../src/components/ResourcesMonthView/ResourcesMonthView.module.css"],"sourcesContent":[".resourcesMonthView {\n --resources-month-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n --resources-month-view-resource-label-width: 120px;\n --resources-month-view-day-width: 80px;\n --resources-month-view-row-height: 64px;\n --resources-month-view-group-label-width: 80px;\n\n @mixin where-light {\n --resources-month-view-border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --resources-month-view-border-color: var(--mantine-color-dark-4);\n }\n}\n\n.resourcesMonthViewRoot {\n border: 1px solid var(--resources-month-view-border-color);\n border-radius: var(--resources-month-view-radius);\n overflow: hidden;\n max-width: fit-content;\n}\n\n.resourcesMonthViewScrollArea {\n :where([data-mantine-scrollbar]) {\n z-index: 20;\n }\n\n :where([data-scrollarea-viewport]) {\n overscroll-behavior-x: none;\n }\n}\n\n.resourcesMonthViewInner {\n display: inline-flex;\n flex-direction: column;\n}\n\n.resourcesMonthViewDayLabelsRow {\n display: flex;\n position: sticky;\n top: 0;\n z-index: 14;\n background-color: var(--mantine-color-body);\n border-bottom: 1px solid var(--resources-month-view-border-color);\n margin-bottom: -1px;\n}\n\n.resourcesMonthViewCorner {\n flex: 0 0 var(--resources-month-view-resource-label-width);\n min-width: var(--resources-month-view-resource-label-width);\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n position: sticky;\n left: 0;\n z-index: 6;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n background-color: var(--mantine-color-body);\n}\n\n.resourcesMonthViewDayLabel {\n flex: 0 0 var(--resources-month-view-day-width);\n min-width: var(--resources-month-view-day-width);\n max-width: var(--resources-month-view-day-width);\n height: 42px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: var(--mantine-font-size-xs);\n user-select: none;\n cursor: default;\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where([data-weekend]) {\n color: var(--mantine-color-red-6);\n }\n\n &:where([data-today]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-primary-color-contrast);\n }\n}\n\n.resourcesMonthViewDayLabelWeekday {\n font-size: 12px;\n font-weight: var(--mantine-font-weight-medium);\n text-transform: capitalize;\n line-height: 1;\n margin-bottom: 3px;\n}\n\n.resourcesMonthViewDayLabelNumber {\n font-weight: var(--mantine-font-weight-medium);\n font-size: 12px;\n line-height: 1;\n}\n\n.resourcesMonthViewRow {\n display: flex;\n border-top: 1px solid var(--resources-month-view-border-color);\n}\n\n.resourcesMonthViewResourceLabel {\n flex: 0 0 var(--resources-month-view-resource-label-width);\n min-width: var(--resources-month-view-resource-label-width);\n display: flex;\n align-items: center;\n padding: 4px 8px;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n min-height: var(--resources-month-view-row-height);\n position: sticky;\n left: 0;\n z-index: 4;\n background-color: var(--mantine-color-body);\n\n &:where([data-has-groups]) {\n left: var(--resources-month-view-group-label-width);\n }\n}\n\n.resourcesMonthViewGroupColumn {\n flex: 0 0 var(--resources-month-view-group-label-width);\n min-width: var(--resources-month-view-group-label-width);\n min-height: var(--resources-month-view-row-height);\n position: sticky;\n left: 0;\n z-index: 5;\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n overflow-wrap: break-word;\n font-size: var(--mantine-font-size-sm);\n font-weight: var(--mantine-font-weight-medium);\n user-select: none;\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n overflow: visible;\n\n &:where([data-group-position='first']),\n &:where([data-group-position='only']) {\n z-index: 6;\n }\n\n &:where([data-group-position='middle']),\n &:where([data-group-position='last']) {\n margin-top: -1px;\n min-height: calc(var(--resources-month-view-row-height) + 1px);\n }\n}\n\n.resourcesMonthViewGroupColumnEmpty {\n flex: 0 0 var(--resources-month-view-group-label-width);\n min-width: var(--resources-month-view-group-label-width);\n min-height: var(--resources-month-view-row-height);\n position: sticky;\n left: 0;\n z-index: 5;\n background-color: var(--mantine-color-body);\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n}\n\n.resourcesMonthViewRowSlots {\n display: flex;\n position: relative;\n min-height: var(--resources-month-view-row-height);\n}\n\n.resourcesMonthViewCell {\n flex: 0 0 var(--resources-month-view-day-width);\n min-width: var(--resources-month-view-day-width);\n max-width: var(--resources-month-view-day-width);\n min-height: var(--resources-month-view-row-height);\n border-inline-end: 1px solid var(--resources-month-view-border-color);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &:where(:last-of-type) {\n border-inline-end: none;\n }\n\n &:where(:focus) {\n z-index: 1;\n }\n\n @mixin hover {\n &:where(:not([data-static])) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n\n &:where([data-weekend]) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n }\n\n &:where([data-drop-target]) {\n @mixin where-light {\n background-color: var(--mantine-color-blue-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n border-radius: 2px;\n\n @mixin where-light {\n border-color: var(--mantine-color-blue-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-blue-6);\n }\n }\n }\n\n &:where([data-drag-selected]) {\n &,\n &:hover {\n background-color: var(--mantine-primary-color-light);\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -1px;\n pointer-events: none;\n z-index: 2;\n border: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-primary-color-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-primary-color-9);\n }\n }\n }\n\n &:where([data-drag-slot-index]) {\n touch-action: none;\n }\n\n &:where([data-static]) {\n cursor: default;\n pointer-events: none;\n }\n}\n\n.resourcesMonthView:where([data-event-interaction]) .resourcesMonthViewCell {\n pointer-events: none;\n}\n\n.resourcesMonthViewEventWrapper {\n &:hover .resourcesMonthViewResizeHandle {\n opacity: 0.5;\n }\n\n & .resourcesMonthViewResizeHandle:hover {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesMonthViewResizeHandle:where([data-active]) {\n opacity: 0.8;\n }\n\n &:where([data-resizing]) .resourcesMonthViewResizeHandle:not([data-active]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\n.resourcesMonthViewResizeHandle {\n position: absolute;\n top: 20%;\n width: 4px;\n height: 60%;\n cursor: ew-resize;\n z-index: 5;\n border-radius: 2px;\n opacity: 0;\n transition: opacity 100ms ease;\n pointer-events: all;\n touch-action: none;\n background-color: var(--event-color);\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px -6px;\n }\n\n &:where([data-edge='start']) {\n inset-inline-start: -2px;\n }\n\n &:where([data-edge='end']) {\n inset-inline-end: -2px;\n }\n}\n\n.resourcesMonthView:where([data-resizing]) {\n & * {\n cursor: ew-resize !important;\n }\n\n & .resourcesMonthViewEventWrapper:not([data-resizing]) {\n pointer-events: none;\n\n & .resourcesMonthViewResizeHandle {\n opacity: 0;\n }\n }\n}\n"],"mappings":""}
|