@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.1.7

package/dist/src/components/custom/scheduler-new/presentation/components/row/SchedulerRow.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown } from "antd";
+import { memo, useState } from "react";
+import useSingleAndDoubleClicks from "../../../../../../common/functions/useSingleAndDoubleClicks";
+import { OnClickContextMenu, OnClickRowEvent, OnDoubleClickRowEvent, OnDropCtrlEvent, OnDropEvent, OnRightClickRow, } from "../../NewSchedulerUiEvents";
+import { dateFromPercentage } from "../../logic/dateFromPercentage";
+import { getPercentageFromMouseEvent } from "../../logic/getPercentageFromMouseEvent";
+import { separateEventsToInnerRows } from "../../logic/separateEventsToInnerRows";
+import { DivisionLine } from "../timeline/DivisionLine";
+import { TimeLine } from "../timeline/TimeLine";
+import { WeekEndLine } from "../timeline/WeekEndLine";
+import { BackgroundEvent } from "./BackgroundEvent";
+import { DefaultRowHeader } from "./DefaultRowHeader";
+import { SchedulerEvent } from "./Event";
+const onClickMenuItem = (e, event) => {
+    e.domEvent.nativeEvent.preventDefault();
+    e.domEvent.nativeEvent.stopPropagation();
+    e.domEvent.nativeEvent.stopImmediatePropagation();
+    e.domEvent.preventDefault();
+    e.domEvent.stopPropagation();
+    event();
+};
+export const SchedulerRow = memo((props) => {
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
+    const internalRows = separateEventsToInnerRows(events);
+    const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onEvent(new OnClickRowEvent(rowHeader.value.rowId));
+    }, (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onEvent(new OnDoubleClickRowEvent(rowHeader.value.rowId));
+    });
+    return (_jsxs("div", { style: {
+            display: "flex",
+            minHeight: props.rowHeightInRem + "rem",
+        }, children: [_jsx(RowTitleComp, { ...rowHeader }), _jsx(Dropdown, { open: isContextMenuOpen, onOpenChange: setIsContextMenuOpen, placement: "bottom", menu: {
+                    items: contextMenuItems,
+                    onClick: (e) => {
+                        onClickMenuItem(e, () => {
+                            onEvent(new OnClickContextMenu(rowHeader.value.rowId, e.key));
+                        });
+                    },
+                    onMouseLeave: () => setIsContextMenuOpen(false),
+                }, trigger: ["contextMenu"], overlayStyle: { animationDuration: "0" }, arrow: (contextMenuItems?.length ?? 0) > 0, children: _jsxs("div", { style: {
+                        flex: 1,
+                        display: "flex",
+                        flexDirection: "column",
+                        position: "relative",
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        const percentage = getPercentageFromMouseEvent(e);
+                        const date = dateFromPercentage(selectedDate, visibleDays, percentage);
+                        // https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData/platform
+                        // change for navigator.userAgentData.platform when acepted in all browsers
+                        const isMac = navigator.platform.toUpperCase().includes("MAC");
+                        const isCtrlOrAltPressed = isMac ? e.altKey : e.ctrlKey;
+                        if (isCtrlOrAltPressed) {
+                            onEvent(new OnDropCtrlEvent(rowHeader.value.rowId, date));
+                        }
+                        else {
+                            onEvent(new OnDropEvent(rowHeader.value.rowId, date));
+                        }
+                    }, onDragOver: (e) => {
+                        e.preventDefault();
+                    }, onClick: handleClick, onDoubleClick: handleDoubleClick, onContextMenu: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        const percentage = getPercentageFromMouseEvent(e);
+                        const date = dateFromPercentage(selectedDate, visibleDays, percentage);
+                        onEvent(new OnRightClickRow(rowHeader.value.rowId, date));
+                    }, children: [weekendLines.map((weekend) => (_jsx(WeekEndLine, { height: "100%", left: weekend.left, widthPercentage: weekend.width }, weekend.left))), divisionLines.map((division) => (_jsx(DivisionLine, { height: "100%", left: division.left }, division.left))), backgroundEvents.length > 0 && backgroundEvents.some((e) => e.isVisible) && (_jsx("div", { style: {
+                                height: "100%",
+                                position: internalRows.length > 0 ? "absolute" : "relative",
+                                width: "100%",
+                                pointerEvents: "none",
+                            }, children: backgroundEvents.map((event) => {
+                                return _jsx(BackgroundEventComp, { value: { ...event }, onEvent: onEvent, heightRem: props.rowHeightInRem * Math.max(1, internalRows.length) }, event.id);
+                            }) })), backgroundEvents.length === 0 && internalRows.length === 0 && (_jsx("div", { style: { position: "relative", height: props.rowHeightInRem + "rem" } })), internalRows.map((internalRow, index) => {
+                            return (_jsx("div", { style: {
+                                    position: "relative",
+                                    height: props.rowHeightInRem + "rem",
+                                    pointerEvents: "none"
+                                }, children: internalRow.map((event) => (_jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, event.id))) }, index));
+                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (_jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) }, rowHeader.value.rowId)] }));
+}, (prevProps, nextProps) => {
+    // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
+    const getEventKey = (event) => {
+        // Adjust these properties based on what uniquely identifies an event in your application
+        return `${event.id}-${event.startDate}-${event.endDate}`;
+    };
+    if (prevProps.timeLinePercentage != nextProps.timeLinePercentage) {
+        return false;
+    }
+    if (prevProps.rowHeader !== nextProps.rowHeader) {
+        return false;
+    }
+    // Create Sets of event keys for efficient comparison
+    const prevEventKeys = new Set(prevProps.events.map((it) => getEventKey(it)));
+    const nextEventKeys = new Set(nextProps.events.map((it) => getEventKey(it)));
+    // Check if both sets have the same size
+    if (prevEventKeys.size !== nextEventKeys.size) {
+        return false;
+    }
+    // Check if every event in prevProps exists in nextProps
+    for (const eventKey of prevEventKeys) {
+        if (!nextEventKeys.has(eventKey)) {
+            return false;
+        }
+    }
+    // If we got here, the events are the same
+    return true;
+});
+export const SchedulerRowPreview = () => {
+    const logOnEvent = (event) => {
+        console.log("Event:", event);
+    };
+    const events = [
+        {
+            id: "event-1",
+            name: "Sample Event",
+            rowId: "1",
+            color: "#4287f5",
+            startDate: new Date(),
+            endDate: new Date(Date.now() + 3600000),
+            isResizable: true,
+            isDraggable: true,
+            left: 0,
+            width: 100,
+            tooltip: _jsx("div", { children: "Sample Tooltip" }),
+            selected: false,
+        },
+        {
+            id: `${it}`,
+            name: `event ${it}`,
+            rowId: `${it}`,
+            color: "red",
+            startDate: new Date("2024-12-03T18:40:00.000Z"),
+            endDate: new Date("2024-12-03T18:50:00.000Z"),
+            isResizable: true,
+            isDraggable: true,
+            left: 0,
+            width: 30,
+            tooltip: _jsx("div", { children: "Sample Tooltip" }),
+            selected: false,
+        },
+    ];
+    return (_jsx(SchedulerRow, { EventComp: SchedulerEvent, events: events, backgroundEvents: [
+            {
+                id: "event-1",
+                name: "Sample Event",
+                rowId: "1",
+                isResizable: false,
+                isDraggable: false,
+                color: "#4287f5",
+                startDate: new Date(),
+                endDate: new Date(Date.now() + 3600000),
+                left: 0,
+                width: 100,
+                tooltip: _jsx("div", { children: "Sample Tooltip" }),
+                isVisible: true,
+                selected: false,
+            },
+        ], onEvent: logOnEvent, RowTitleComp: DefaultRowHeader, rowHeader: {
+            value: {
+                rowId: "1",
+                title: "Default Header",
+            },
+            width: 200,
+            onEvent: () => {
+            },
+        }, BackgroundEventComp: BackgroundEvent, rowHeightInRem: 2, timeLinePercentage: 50, weekendLines: [], divisionLines: [], visibleDays: 3, selectedDate: new Date() }));
+};
+export default SchedulerRow;

package/dist/src/components/custom/scheduler-new/presentation/components/timeline/DivisionLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimeLine } from "./TimeLine";
+export const DivisionLine = ({ left, top = "0px", height }) => {
+    return (_jsx(TimeLine, { color: "rgba(255,255,255,1)", left: left + "%", height: height, width: 1 + "px", top: top }));
+};
+export const _preview = () => {
+    return (_jsx("div", { style: { height: "100px" }, children: _jsx(DivisionLine, { left: 100, height: "100px" }) }));
+};

package/dist/src/components/custom/scheduler-new/presentation/components/timeline/TimeLine.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styles from "../../styles/scheduler-header.module.css";
+const getNow = (isUtc) => {
+    let now = new Date();
+    if (isUtc) {
+        now = new Date(now.getTime() + now.getTimezoneOffset() * 60_000);
+    }
+    return now;
+};
+export const TimeLine = ({ left, top = "0px", height, color, width = "2px", zIndexNumber = 0, isHeader, isUtc = false }) => {
+    const [currentTime, setCurrentTime] = useState(getNow(isUtc));
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentTime(getNow(isUtc));
+        }, 60000); // Actualiza cada minuto
+        return () => clearInterval(interval);
+    }, [isUtc]);
+    const timeString = currentTime.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+    });
+    return (_jsx("div", { style: {
+            position: "absolute",
+            top: top,
+            height: height,
+            left: left,
+            width: width,
+            background: color,
+            pointerEvents: "none",
+            zIndex: zIndexNumber,
+        }, className: styles["scheduler-timeline-now"], children: isHeader && (_jsx("span", { style: {
+                color: color,
+            }, className: styles["scheduler-timeline-label"], children: timeString })) }));
+};
+export const _preview = () => {
+    return (_jsx("div", { style: { height: "100px" }, children: _jsx(TimeLine, { color: "red", left: "100px", height: "100px" }) }));
+};

package/dist/src/components/custom/scheduler-new/presentation/components/timeline/WeekEndLine.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimeLine } from "./TimeLine";
+export const WeekEndLine = ({ left, top = "0px", height, widthPercentage }) => {
+    return (_jsx(TimeLine, { color: "rgba(0,0,0,0.05)", left: left + "%", height: height, width: widthPercentage + "%", top: top }));
+};
+export const _preview = () => {
+    return (_jsx("div", { style: { height: "100px" }, children: _jsx(WeekEndLine, { left: 100, height: "100px", widthPercentage: 20 }) }));
+};

package/dist/src/components/custom/scheduler-new/presentation/helpers.js

@@ -0,0 +1,43 @@
+import moment from "moment";
+export const getListOfNumbers = (len) => Array(len)
+    .fill(0)
+    .map((_, idx) => idx);
+const getRandomColor = () => {
+    return "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
+};
+export const getRandomEvents = (date, visibleDays, resourceId) => {
+    return getListOfNumbers(visibleDays).map((e) => {
+        const len1 = Math.floor(Math.random() * 24) + 1;
+        const moment1 = moment(date).add(e, "days").add(e, "minutes");
+        const len2 = Math.floor(Math.random() * 25) + 1;
+        return {
+            id: crypto.randomUUID(),
+            rowId: resourceId.toString(),
+            name: "API Design",
+            color: getRandomColor(),
+            startDate: moment1.add(-len1, "hour").toDate(),
+            endDate: moment1.add(len2, "hour").toDate(),
+        };
+    });
+};
+export const isLight = (color) => {
+    // extract values of red, green and blue from color
+    const clrarr = color.match(/\d+/g)?.map((num) => +num);
+    // Check if clrarr is valid and has the necessary values
+    if (clrarr && clrarr.length === 3) {
+        if (clrarr[0] + clrarr[1] + clrarr[2] >= (255 * 3) / 2)
+            return true;
+    }
+    return false;
+};
+export function hexToRGB(hex) {
+    hex = hex.replaceAll("#", "").trim();
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return { r, g, b };
+}
+export const getColorLuminanceOf = (r, g, b, a = 1) => {
+    a; // discard
+    return 0.299 * r + 0.587 * g + 0.114 * b;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/WeekendCalc.js

@@ -0,0 +1,24 @@
+import { getEventSizes } from "./getEventSizes";
+export const getWeekendLinesByDatesVisible = (initialDate, visibleDays) => {
+    const dateString = initialDate.toISOString().split('T')[0];
+    const todayAtO = new Date(dateString);
+    const days = getWeekendsDaysInDateRange(todayAtO, visibleDays);
+    return days.map(it => {
+        const endDate = new Date(it);
+        endDate.setDate(it.getDate() + 1);
+        const weekLine = getEventSizes(initialDate, visibleDays, it, endDate);
+        return weekLine;
+    });
+};
+export const getWeekendsDaysInDateRange = (initialDate, visibleDays) => {
+    const weekends = [];
+    for (let i = 0; i < visibleDays; i++) {
+        const currentDate = new Date(initialDate);
+        currentDate.setDate(initialDate.getDate() + i);
+        const dayOfWeek = currentDate.getDay(); // 0 is Sunday, 6 is Saturday
+        if (dayOfWeek === 0 || dayOfWeek === 6) {
+            weekends.push(currentDate);
+        }
+    }
+    return weekends;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/dateFromPercentage.js

@@ -0,0 +1,7 @@
+import moment from "moment";
+export function dateFromPercentage(startDate, visibleDays, percentage) {
+    const endTime = moment(startDate).add(visibleDays, "day").toDate();
+    const timeSpan = endTime.getTime() - startDate.getTime();
+    const clickedDate = new Date(startDate.getTime() + (timeSpan * percentage));
+    return clickedDate;
+}

package/dist/src/components/custom/scheduler-new/presentation/logic/eventIsVisible.js

@@ -0,0 +1,7 @@
+import moment from "moment";
+export const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
+    const schedulerEnd = moment(selectedDate).add(visibleDays, "days").toDate();
+    const isBefore = selectedDate > startDate && selectedDate > endDate;
+    const isAfter = schedulerEnd < startDate && schedulerEnd < endDate;
+    return !isBefore && !isAfter;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/getDefaultDivisions.js

@@ -0,0 +1,113 @@
+import moment from "moment";
+import { calculateDivisionsByDays, getHoursFromDivisions } from "./getDivisions";
+export const getDefaultDivisions = (visibleDays, selectedDate) => {
+    if (visibleDays <= 15) {
+        return getDayDivisions(visibleDays, selectedDate);
+    }
+    if (visibleDays <= 30) {
+        return getWeekDivisions(visibleDays, selectedDate);
+    }
+    // from 31 to infinity
+    return getMonthDivisions(visibleDays, selectedDate);
+};
+const getDayDivisions = (visibleDays, selectedDate) => {
+    const divisionsNumber = calculateDivisionsByDays(visibleDays);
+    const divisions = getHoursFromDivisions(divisionsNumber);
+    const calculatedDivision = [];
+    for (let i = 0; i < visibleDays; i++) {
+        const currentDate = moment(selectedDate).add(i, "days");
+        calculatedDivision.push({
+            top: currentDate.format("DD.MM.YYYY"),
+            bottom: divisions,
+            startDate: currentDate.toDate(),
+            endDate: currentDate.toDate()
+        });
+    }
+    return calculatedDivision;
+};
+const getWeekDivisions = (visibleDays, selectedDate) => {
+    const weeks = getWeeksByDays(visibleDays, selectedDate);
+    const divisions = weeks.map((week) => {
+        const days = Array.from({ length: week.days }, (_, i) => moment(week.start).add(i, "days").date().toString());
+        const weekEnd = moment(week.start).add(week.days - 1, "days");
+        const top = days.length > 2
+            ? moment(week.start).format("DD.MM.YYYY") + " - " + moment(week.start).add(week.days - 1, "days").format("DD.MM.YYYY")
+            : moment(week.start).format("DD.MM.YYYY");
+        const division = {
+            top: top,
+            bottom: days,
+            startDate: moment(week.start).toDate(),
+            endDate: weekEnd.toDate()
+        };
+        return division;
+    });
+    return divisions;
+};
+const getMonthDivisions = (visibleDays, selectedDate) => {
+    const months = getMonthsByDays(visibleDays, selectedDate);
+    const divisions = months.map((month) => {
+        const days = Array.from({ length: month.days }, (_, i) => moment(month.start).add(i, "days").date().toString());
+        const monthEnd = moment(month.start).add(month.days - 1, "days");
+        const division = {
+            top: moment(month.start).format("MM.YYYY"),
+            bottom: days,
+            startDate: moment(month.start).toDate(), // Añadir fecha de inicio
+            endDate: monthEnd.toDate()
+        };
+        return division;
+    });
+    return divisions;
+};
+export const getMonthsByDays = (visibleDays, selectedDate) => {
+    if (visibleDays <= 0) {
+        return [];
+    }
+    const month = [];
+    let temporalDay = moment(selectedDate);
+    for (let i = 0; i < visibleDays; i++) {
+        const currentDay = moment(selectedDate).add(i, "days");
+        const isLastLoop = i + 1 === visibleDays;
+        if (isLastLoop) {
+            month.push({
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+            });
+            break;
+        }
+        if (currentDay.date() === currentDay.daysInMonth()) {
+            month.push({
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+            });
+            temporalDay = currentDay.add(1, "days");
+        }
+    }
+    return month;
+};
+const SUNDAY = 0;
+export const getWeeksByDays = (visibleDays, selectedDate) => {
+    if (visibleDays <= 0) {
+        return [];
+    }
+    const weeks = [];
+    let temporalDay = moment(selectedDate);
+    for (let i = 0; i < visibleDays; i++) {
+        const currentDay = moment(selectedDate).add(i, "days");
+        const isLastLoop = i + 1 === visibleDays;
+        if (isLastLoop) {
+            weeks.push({
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+            });
+            break;
+        }
+        if (currentDay.day() === SUNDAY) {
+            weeks.push({
+                start: temporalDay.toDate(),
+                days: Math.abs(temporalDay.diff(currentDay, "days")) + 1,
+            });
+            temporalDay = currentDay.add(1, "days");
+        }
+    }
+    return weeks;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/getDivisions.js

@@ -0,0 +1,21 @@
+import moment from "moment";
+export const calculateDivisionsByDays = (days) => {
+    if (days <= 3) {
+        return 8;
+    }
+    if (days <= 7) {
+        return 3;
+    }
+    return 2;
+};
+export const getHoursFromDivisions = (divisions) => {
+    const hoursInterval = 24 / divisions;
+    const array = [];
+    for (let i = 0; i < divisions; i++) {
+        const newHour = moment(new Date(1, 1, 1))
+            .add(hoursInterval * i, "hours")
+            .format("HH:mm");
+        array.push(newHour);
+    }
+    return array;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/getEventSizes.js

@@ -0,0 +1,30 @@
+import { eventIsVisible } from "./eventIsVisible";
+export const hoursBetween = (date1, date2) => {
+    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+    const timeDiff = date2.getTime() - date1.getTime();
+    return timeDiff / oneHourInMillis;
+};
+export const getEventSizes = (schedulerDate, totalDays, startDate, endDate) => {
+    if (!eventIsVisible(startDate, endDate, schedulerDate, totalDays)) {
+        return {
+            left: 0,
+            width: 0,
+        };
+    }
+    const totalHours = totalDays * 24;
+    const dateString = schedulerDate.toISOString().split('T')[0];
+    const schedulerDateAtZero = new Date(dateString);
+    let startHours = hoursBetween(schedulerDateAtZero, startDate);
+    let durationHours = hoursBetween(startDate, endDate);
+    const startOutOfScheduler = startHours < 0;
+    if (startOutOfScheduler) {
+        durationHours += startHours;
+        startHours = 0;
+    }
+    const left = (startHours / totalHours) * 100;
+    const width = (durationHours * 100) / totalHours;
+    return {
+        left,
+        width,
+    };
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/getLinesByDivisions.js

@@ -0,0 +1,13 @@
+export function getLinesByDivisions(headerDivision, _) {
+    const lines = headerDivision.flatMap((division) => {
+        return division.bottom;
+    });
+    const left = 100 / lines.length;
+    const finalLines = lines.map((_, index) => {
+        return {
+            left: left * index,
+            width: 1,
+        };
+    }).filter((_, index) => index !== 0);
+    return finalLines;
+}

package/dist/src/components/custom/scheduler-new/presentation/logic/getPercentageFromMouseEvent.js

@@ -0,0 +1,7 @@
+export function getPercentageFromMouseEvent(event) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const totalWidth = rect.width;
+    const clickPercentage = x / totalWidth;
+    return clickPercentage;
+}

package/dist/src/components/custom/scheduler-new/presentation/logic/separateEventsToInnerRows.js

@@ -0,0 +1,32 @@
+const eventsCollide = (event1, event2) => {
+    const eventInsideOther = event1.startDate <= event2.startDate && event1.endDate >= event2.endDate;
+    const eventCollideStart = event1.endDate > event2.startDate && event1.endDate < event2.endDate;
+    const eventCollideEnd = event2.endDate > event1.startDate && event2.endDate < event1.endDate;
+    return eventInsideOther || eventCollideStart || eventCollideEnd;
+};
+// Function to separate events into non-colliding rows
+export const separateEventsToInnerRows = (events) => {
+    const sortedEvents = [...events].sort((a, b) => {
+        const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
+        const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
+        if (aOrder !== bOrder) {
+            return aOrder - bOrder; // Prioridad al order si ambos están definidos
+        }
+        return a.startDate.getTime() - b.startDate.getTime();
+    });
+    const rows = [];
+    for (const event of sortedEvents) {
+        let placed = false;
+        for (const row of rows) {
+            if (!row.some((existingEvent) => eventsCollide(existingEvent, event))) {
+                row.push(event);
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            rows.push([event]);
+        }
+    }
+    return rows;
+};

package/dist/src/components/custom/scheduler-new/presentation/logic/sortByCategoryAndTitle.js

@@ -0,0 +1,12 @@
+export const sortByCategoryAndTitle = (previous, next, orderCategories) => {
+    for (const orderCategory of orderCategories) {
+        const prevOrder = previous[orderCategory];
+        const nextOrder = next[orderCategory];
+        if (prevOrder !== nextOrder) {
+            return prevOrder > nextOrder ? 1 : -1;
+        }
+    }
+    const prevTitle = previous["title"];
+    const nextTitle = next["title"];
+    return prevTitle > nextTitle ? 1 : -1;
+};