@cwellt_software/cwellt-reactjs-lib 1.3.3 → 1.3.6

package/dist/index.cjs.js

@@ -273,7 +273,7 @@ const CwMessage = props => {
         }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
         return () => clearTimeout(timer);
     }, [props]);
-    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
+    return (jsxRuntime.jsxs("div", { className: "cw-message", "data-message-type": Object.keys(exports.CwMessageType).find(key => exports.CwMessageType[key] === props.messageType), onClick: props.onClick, style: props.onClick ? { cursor: "pointer" } : undefined, children: [props.messageType && jsxRuntime.jsx(CwIcon, { iconId: props.messageType.toString(), size: "large" }), props.message] }));
 };
 /**
  * Hook for displaying inline messages within specific components.
@@ -336,11 +336,11 @@ class CwMessageManager {
         document.body.prepend(this.messageWrapper);
         this.root = client.createRoot(this.messageWrapper); // Create a root at the messageWrapper
     }
-    showMessage(message, type, duration) {
+    showMessage(message, type, duration, onClick) {
         const msg = document.createElement("div");
         this.messageWrapper?.prepend(msg);
         const msgRoot = client.createRoot(msg); // Create a root for the new message
-        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
+        msgRoot.render(jsxRuntime.jsx(CwMessage, { message: message, messageType: type, duration: duration, onClick: onClick, onClose: () => this.closeMessage(msgRoot) }));
     }
     closeMessage(msgRoot) {
         msgRoot.unmount(); // Unmount the message root
@@ -362,8 +362,8 @@ class CwMessageManager {
  *
  * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
  */
-function CwDisplayMessage(message, type, duration) {
-    CwMessageManager.getInstance().showMessage(message, type, duration);
+function CwDisplayMessage(message, type, duration, onClick) {
+    CwMessageManager.getInstance().showMessage(message, type, duration, onClick);
 }
 
 /**
@@ -8040,30 +8040,90 @@ const BackgroundEvent = ({ value, heightRem }) => {
                                 }, children: value.icons }) : null, jsxRuntime.jsx("span", { className: styles$2["scheduler-event-text"], children: value.name })] }) }) }) }) })) : null;
 };
 
+const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
+    const schedulerEndDate = new Date(selectedDate.getTime() + visibleDays * 24 * 60 * 60 * 1000);
+    const isBefore = selectedDate > startDate && selectedDate > endDate;
+    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
+    return !isBefore && !isAfter;
+};
+
+const hoursBetween = (date1, date2) => {
+    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+    const timeDiff = date2.getTime() - date1.getTime();
+    return timeDiff / oneHourInMillis;
+};
+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(schedulerDate, startDate);
+    let durationHours = hoursBetween(startDate, endDate);
+    const startOutOfScheduler = startHours < 0;
+    if (startOutOfScheduler) {
+        durationHours += startHours;
+        startHours = 0;
+    }
+    const left = (startHours / totalHours) * 100;
+    // Minimum width equivalent to 15 minutes so zero/near-zero duration events stay visible
+    const MIN_WIDTH_HOURS = 0.25;
+    const minWidth = (MIN_WIDTH_HOURS * 100) / totalHours;
+    const width = Math.max((durationHours * 100) / totalHours, minWidth);
+    return {
+        left,
+        width,
+    };
+};
+
+const INDICATOR_HEIGHT_REM = 0.25;
+const IndicatorRow = ({ indicators, selectedDate, visibleDays }) => {
+    return (jsxRuntime.jsx("div", { style: {
+            position: "relative",
+            height: `${INDICATOR_HEIGHT_REM}rem`,
+            pointerEvents: "none",
+        }, "data-name": "indicator-row", children: indicators.map((indicator) => {
+            const { left, width } = getEventSizes(selectedDate, visibleDays, indicator.start, indicator.end);
+            if (width <= 0)
+                return null;
+            const bar = (jsxRuntime.jsx("div", { style: {
+                    position: "absolute",
+                    left: `${left}%`,
+                    width: `${width}%`,
+                    height: `${INDICATOR_HEIGHT_REM}rem`,
+                    backgroundColor: indicator.color,
+                    borderRadius: "1px",
+                    pointerEvents: "auto",
+                } }, indicator.id));
+            if (indicator.tooltip) {
+                return (jsxRuntime.jsx(CwTooltipNew, { content: indicator.tooltip, position: "bottom", dissapearsWhenHover: true, showDelay: 200, children: bar }, indicator.id));
+            }
+            return bar;
+        }) }));
+};
+
+// Fires onClick on the first click of a sequence (detail === 1) and
+// onDoubleClick on the native dblclick event. Subsequent clicks of a
+// double-click sequence (detail > 1) are suppressed so the same logical
+// interaction does not fire onClick twice. Selection therefore appears
+// within one paint frame instead of being delayed by an artificial timer.
 function useSingleAndDoubleClicks(onClick, onDoubleClick) {
-    const timer = React.useRef(null);
-    const cancelPendingClick = React.useCallback(() => {
-        if (timer.current) {
-            clearTimeout(timer.current);
-            timer.current = null;
-        }
-    }, [timer]);
     const handleClick = React.useCallback((e) => {
-        // We only cache the most recent click event, so cancel any pending clicks
         e.stopPropagation();
         e.preventDefault();
-        cancelPendingClick();
-        timer.current = setTimeout(() => {
-            timer.current = null;
-            onClick(e);
-        }, 500);
-    }, [timer, cancelPendingClick, onClick]);
+        if (e.detail > 1)
+            return;
+        onClick(e);
+    }, [onClick]);
     const handleDoubleClick = React.useCallback((e) => {
         e.stopPropagation();
         e.preventDefault();
-        cancelPendingClick();
         onDoubleClick(e);
-    }, [cancelPendingClick, onDoubleClick]);
+    }, [onDoubleClick]);
     return { handleClick, handleDoubleClick };
 }
 
@@ -8237,7 +8297,7 @@ const SchedulerEvent = ({ value, heightRem, onEvent }) => {
 
 const SchedulerRow = React.memo((props) => {
     const [isContextMenuOpen, setIsContextMenuOpen] = React.useState(false);
-    const { events, backgroundEvents, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
+    const { events, backgroundEvents, indicatorRows, rowHeader, contextMenuItems, RowTitleComp, EventComp, BackgroundEventComp, weekendLines, divisionLines, timeLinePercentage, selectedDate, visibleDays, onEvent, } = props;
     const internalRows = separateEventsToInnerRows(events);
     const schedulerDivRef = React.useRef(null);
     const { handleClick, handleDoubleClick } = useSingleAndDoubleClicks((e) => {
@@ -8294,7 +8354,7 @@ const SchedulerRow = React.memo((props) => {
                                     height: props.rowHeightInRem + "rem",
                                     pointerEvents: "none"
                                 }, children: internalRow.map((event) => (jsxRuntime.jsx(EventComp, { value: event, heightRem: props.rowHeightInRem, onEvent: onEvent }, event.id))) }, index));
-                        }), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
+                        }), indicatorRows.length > 0 && (jsxRuntime.jsx(IndicatorRow, { indicators: indicatorRows, selectedDate: selectedDate, visibleDays: visibleDays })), !(timeLinePercentage < 0 || timeLinePercentage > 100) && (jsxRuntime.jsx(TimeLine, { color: "red", left: `${timeLinePercentage}%`, top: "0px", height: `100%` }))] }) })] }));
 }, (prevProps, nextProps) => {
     // This memo is necessary to prevent re-render all the rows when a user makes drag and drop
     const getEventKey = (event) => {
@@ -8320,17 +8380,15 @@ const SchedulerRow = React.memo((props) => {
             return false;
         }
     }
+    if (prevProps.indicatorRows.length !== nextProps.indicatorRows.length) {
+        return false;
+    }
     // If we got here, the events are the same
     return true;
 });
 
 const filterVisibleEvents = (events, selectedDate, visibleDays) => {
-    const schedulerEnd = Temporal.PlainDate.from({
-        year: selectedDate.getFullYear(),
-        month: selectedDate.getMonth() + 1,
-        day: selectedDate.getDate(),
-    }).add({ days: visibleDays });
-    const lastDayOfScheduler = new Date(schedulerEnd.year, schedulerEnd.month - 1, schedulerEnd.day);
+    const lastDayOfScheduler = new Date(selectedDate.getTime() + visibleDays * 24 * 60 * 60 * 1000);
     return events.filter((event) => event.endDate > selectedDate && event.startDate < lastDayOfScheduler);
 };
 
@@ -8510,51 +8568,6 @@ const getWeeksByDays = (visibleDays, selectedDate) => {
     return weeks;
 };
 
-const eventIsVisible = (startDate, endDate, selectedDate, visibleDays) => {
-    const schedulerEnd = Temporal.PlainDate.from({
-        year: selectedDate.getFullYear(),
-        month: selectedDate.getMonth() + 1,
-        day: selectedDate.getDate(),
-    }).add({ days: visibleDays });
-    const schedulerEndDate = new Date(schedulerEnd.year, schedulerEnd.month - 1, schedulerEnd.day);
-    const isBefore = selectedDate > startDate && selectedDate > endDate;
-    const isAfter = schedulerEndDate < startDate && schedulerEndDate < endDate;
-    return !isBefore && !isAfter;
-};
-
-const hoursBetween = (date1, date2) => {
-    const oneHourInMillis = 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
-    const timeDiff = date2.getTime() - date1.getTime();
-    return timeDiff / oneHourInMillis;
-};
-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(schedulerDate, startDate);
-    let durationHours = hoursBetween(startDate, endDate);
-    const startOutOfScheduler = startHours < 0;
-    if (startOutOfScheduler) {
-        durationHours += startHours;
-        startHours = 0;
-    }
-    const left = (startHours / totalHours) * 100;
-    // Minimum width equivalent to 15 minutes so zero/near-zero duration events stay visible
-    const MIN_WIDTH_HOURS = 0.25;
-    const minWidth = (MIN_WIDTH_HOURS * 100) / totalHours;
-    const width = Math.max((durationHours * 100) / totalHours, minWidth);
-    return {
-        left,
-        width,
-    };
-};
-
 function getLinesByDivisions(headerDivision, _) {
     const lines = headerDivision.flatMap((division) => division.bottom.map((_, i) => ({ isDayBoundary: i === 0 })));
     const left = 100 / lines.length;
@@ -8610,8 +8623,65 @@ const getNow = (isUtc) => {
 };
 const milliSecondsInSecond = 1000;
 const refreshMilliSeconds = 45 * milliSecondsInSecond;
+const EMPTY_EVENTS = [];
+const EMPTY_BG_EVENTS = [];
+const EMPTY_INDICATORS = [];
+// Memoised row body. Receives flat props (the per-row buckets are looked up
+// by the outer Row wrapper). As long as those bucket arrays keep their
+// reference (see `groupByRowIdStable`) and the rest of the render-context
+// values are stable, this row will skip re-rendering on selection clicks
+// that don't affect it.
+const RowContent = React.memo(function RowContent(props) {
+    const header = {
+        value: props.row,
+        width: props.rowHeaderWidth,
+        onEvent: props.onEvent,
+    };
+    return (jsxRuntime.jsx("div", { style: {
+            ...props.style,
+            backgroundColor: props.rowColor
+        }, children: jsxRuntime.jsx(SchedulerRow, { events: props.events, backgroundEvents: props.backgroundEvents, indicatorRows: props.indicatorRows, rowHeader: header, EventComp: props.EventComp, BackgroundEventComp: props.BackgroundEventComp, RowTitleComp: props.RowTitleComp, weekendLines: props.weekendLines, divisionLines: props.divisionLines, timeLinePercentage: props.timeLinePercentage, rowHeightInRem: props.rowHeightRem, onEvent: props.onEvent, contextMenuItems: props.contextMenuItems, visibleDays: props.visibleDays, selectedDate: props.selectedDate }) }, props.row.rowId));
+});
+// Outer (unmemoised) row: looks up per-row buckets from the shared `data`
+// object and forwards them as flat props to `RowContent`. Because the
+// referenced arrays are reused when their contents are unchanged
+// (see `groupByRowIdStable`), `RowContent.memo` will skip the work.
+const Row = ({ index, style, data }) => {
+    const row = data.rows[index];
+    const rowColor = data.groupRowColors
+        ? Math.floor(index / 2) % 2 === 0 ? data.evenColor : data.oddColor
+        : index % 2 === 0 ? data.evenColor : data.oddColor;
+    return (jsxRuntime.jsx(RowContent, { style: style, row: row, rowColor: rowColor, events: data.eventsByRow.get(row.rowId) ?? EMPTY_EVENTS, backgroundEvents: data.backgroundEventsByRow.get(row.rowId) ?? EMPTY_BG_EVENTS, indicatorRows: data.indicatorRowsByRow.get(row.rowId) ?? EMPTY_INDICATORS, EventComp: data.EventComp, BackgroundEventComp: data.BackgroundEventComp, RowTitleComp: data.RowTitleComp, rowHeaderWidth: data.rowHeaderWidth, rowHeightRem: data.rowHeightRem, weekendLines: data.weekendLines, divisionLines: data.divisionLines, timeLinePercentage: data.timeLinePercentage, selectedDate: data.selectedDate, visibleDays: data.visibleDays, contextMenuItems: data.contextMenuItems, onEvent: data.onEvent }));
+};
+// Bucket items by rowId, but reuse previous bucket arrays whenever a row's
+// contents have not changed. Keeping bucket references stable is essential
+// for `RowContent.memo` to skip work when only one row's events change
+// (e.g. on selection clicks).
+const groupByRowIdStable = (items, prev) => {
+    const next = new Map();
+    for (const item of items) {
+        const bucket = next.get(item.rowId);
+        if (bucket) {
+            bucket.push(item);
+        }
+        else {
+            next.set(item.rowId, [item]);
+        }
+    }
+    if (!prev)
+        return next;
+    for (const [rowId, bucket] of next) {
+        const prevBucket = prev.get(rowId);
+        if (prevBucket
+            && prevBucket.length === bucket.length
+            && prevBucket.every((v, i) => v === bucket[i])) {
+            next.set(rowId, prevBucket);
+        }
+    }
+    return next;
+};
 const Scheduler = (props) => {
-    const { header: headerContent, id, events: eventsState, backgroundEvents, contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
+    const { header: headerContent, id, events: eventsState, backgroundEvents, indicatorRows: allIndicatorRows = [], contextMenuItems, EventComp, RowTitleComp, orderCategories = ["title"], useOrderCategory, onEvent, groupRowColors, rowHeaderWidth = 180, rowHeightRem = 1.75, } = props;
     const BackgroundEventComp = props.BackgroundEventComp ?? BackgroundEvent;
     const rows = useOrderCategory === false
         ? props.rows
@@ -8619,21 +8689,49 @@ const Scheduler = (props) => {
     const instanceRef = React.useRef(null);
     // const rowHeaderWidth = "180px";
     const { selectedDate, visibleDays, isUtc, isHeaderVisible, visibleRows: stateVisibleRows } = props.state;
-    const events = filterVisibleEvents(eventsState, selectedDate, visibleDays);
+    const events = React.useMemo(() => filterVisibleEvents(eventsState, selectedDate, visibleDays), [eventsState, selectedDate, visibleDays]);
     React.useEffect(() => {
         instanceRef.current?.resetAfterIndex(0);
-    }, [orderCategories, props.rows.length, events]);
-    const totalSubRows = rows.reduce((acc, row) => {
-        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+    }, [orderCategories, props.rows.length, events, allIndicatorRows]);
+    // Bucket events / backgroundEvents / indicatorRows by rowId once per render
+    // instead of running events.filter() per row inside the row renderer.
+    // Reuse previous bucket arrays when their contents are unchanged so the
+    // memoised RowContent below can skip work (essential for selection clicks
+    // to be cheap).
+    const eventsByRowRef = React.useRef();
+    const backgroundEventsByRowRef = React.useRef();
+    const indicatorRowsByRowRef = React.useRef();
+    const eventsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(events, eventsByRowRef.current);
+        eventsByRowRef.current = next;
+        return next;
+    }, [events]);
+    const backgroundEventsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(backgroundEvents, backgroundEventsByRowRef.current);
+        backgroundEventsByRowRef.current = next;
+        return next;
+    }, [backgroundEvents]);
+    const indicatorRowsByRow = React.useMemo(() => {
+        const next = groupByRowIdStable(allIndicatorRows, indicatorRowsByRowRef.current);
+        indicatorRowsByRowRef.current = next;
+        return next;
+    }, [allIndicatorRows]);
+    const totalHeightRem = rows.reduce((acc, row) => {
+        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
         const innerRows = separateEventsToInnerRows(filteredEvents);
-        return acc + Math.max(innerRows.length, 1);
+        const eventHeight = Math.max(innerRows.length, 1) * rowHeightRem;
+        const hasIndicators = indicatorRowsByRow.has(row.rowId);
+        return acc + eventHeight + (hasIndicators ? INDICATOR_HEIGHT_REM : 0);
     }, 0);
-    const visibleRows = Math.min(stateVisibleRows ?? totalSubRows, totalSubRows);
+    const schedulerContentHeight = stateVisibleRows != null
+        ? Math.min(totalHeightRem, stateVisibleRows * rowHeightRem)
+        : Math.max(totalHeightRem, rowHeightRem);
     const totalHours = visibleDays * 24;
     const [timeLinePercentage, setTimeLinePercentage] = React.useState(0);
+    const divisions = React.useMemo(() => getDefaultDivisions(visibleDays, selectedDate), [visibleDays, selectedDate]);
     const header = {
         content: headerContent,
-        divisions: getDefaultDivisions(visibleDays, selectedDate),
+        divisions,
         visibleDays: visibleDays,
         width: rowHeaderWidth,
         selectedDate,
@@ -8643,9 +8741,8 @@ const Scheduler = (props) => {
     };
     const evenColor = "var(--cw-color-surface-container-low)";
     const oddColor = "var(--cw-color-surface-container)";
-    const schedulerContentHeight = rowHeightRem * Math.max(visibleRows, 1);
-    const weekendsLines = getWeekendLinesByDatesVisible(selectedDate, visibleDays);
-    const divisionLines = getLinesByDivisions(header.divisions);
+    const weekendsLines = React.useMemo(() => getWeekendLinesByDatesVisible(selectedDate, visibleDays), [selectedDate, visibleDays]);
+    const divisionLines = React.useMemo(() => getLinesByDivisions(divisions), [divisions, visibleDays]);
     // Timeline percentage calculation
     React.useEffect(() => {
         const updateTimeLinePercentage = () => {
@@ -8656,30 +8753,55 @@ const Scheduler = (props) => {
         const interval = setInterval(updateTimeLinePercentage, refreshMilliSeconds);
         return () => clearInterval(interval);
     }, [selectedDate, isUtc, totalHours]);
-    // Memoized Row Component
-    const Row = React.memo(({ index, style }) => {
-        const row = rows[index];
-        const rowColor = groupRowColors
-            ? Math.floor(index / 2) % 2 === 0 ? evenColor : oddColor
-            : index % 2 === 0 ? evenColor : oddColor;
-        const header = {
-            value: row,
-            width: rowHeaderWidth,
-            onEvent: onEvent,
-        };
-        return (jsxRuntime.jsx("div", { style: {
-                ...style,
-                backgroundColor: rowColor
-            }, children: jsxRuntime.jsx(SchedulerRow, { events: events.filter((it) => it.rowId === row.rowId), backgroundEvents: backgroundEvents.filter((it) => it.rowId === row.rowId), rowHeader: header, EventComp: EventComp, BackgroundEventComp: BackgroundEventComp, RowTitleComp: RowTitleComp, weekendLines: weekendsLines, divisionLines: divisionLines, timeLinePercentage: timeLinePercentage, rowHeightInRem: rowHeightRem, onEvent: onEvent, contextMenuItems: contextMenuItems, visibleDays: visibleDays, selectedDate: selectedDate }) }, row.rowId));
-    });
+    const itemData = React.useMemo(() => ({
+        rows,
+        eventsByRow,
+        backgroundEventsByRow,
+        indicatorRowsByRow,
+        EventComp: EventComp,
+        BackgroundEventComp,
+        RowTitleComp: RowTitleComp,
+        rowHeaderWidth,
+        rowHeightRem,
+        weekendLines: weekendsLines,
+        divisionLines,
+        timeLinePercentage,
+        selectedDate,
+        visibleDays,
+        contextMenuItems,
+        onEvent,
+        groupRowColors,
+        evenColor,
+        oddColor,
+    }), [
+        rows,
+        eventsByRow,
+        backgroundEventsByRow,
+        indicatorRowsByRow,
+        EventComp,
+        BackgroundEventComp,
+        RowTitleComp,
+        rowHeaderWidth,
+        rowHeightRem,
+        weekendsLines,
+        divisionLines,
+        timeLinePercentage,
+        selectedDate,
+        visibleDays,
+        contextMenuItems,
+        onEvent,
+        groupRowColors,
+    ]);
     const getItemSize = React.useCallback((index) => {
         const row = rows[index];
-        const filteredEvents = events.filter((it) => it.rowId === row.rowId);
+        const filteredEvents = eventsByRow.get(row.rowId) ?? [];
         const innerRows = separateEventsToInnerRows(filteredEvents);
         const rowsNumber = innerRows.length > 0 ? innerRows.length : 1;
         const pixelsInRem = 16;
-        return rowsNumber * rowHeightRem * pixelsInRem;
-    }, [rows, events]);
+        const hasIndicators = indicatorRowsByRow.has(row.rowId);
+        const indicatorPixels = hasIndicators ? INDICATOR_HEIGHT_REM * pixelsInRem : 0;
+        return rowsNumber * rowHeightRem * pixelsInRem + indicatorPixels;
+    }, [rows, eventsByRow, indicatorRowsByRow, rowHeightRem]);
     // Render
     return (jsxRuntime.jsxs("div", { id: id, style: {
             position: "relative",
@@ -8690,7 +8812,7 @@ const Scheduler = (props) => {
                     position: "sticky",
                     top: 0,
                     zIndex: 1,
-                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
+                }, children: jsxRuntime.jsx(SchedulerHeader, { ...header }) })), jsxRuntime.jsx(reactWindow.VariableSizeList, { height: schedulerContentHeight * 16, itemCount: rows.length, itemSize: getItemSize, itemData: itemData, width: "100%", style: { overflowX: "hidden" }, ref: instanceRef, className: styles$2["hide-scrollbar"], children: Row })] }));
 };
 
 class UiEvent {
@@ -9053,13 +9175,13 @@ const PinRowHeader = ({ value, width, onEvent }) => {
                                         jsxRuntime.jsxs("span", { className: styles["scheduler-crewmember-functions"], children: ["(", value.title3, ")"] }), value.subtitle2 && jsxRuntime.jsxs("span", { children: ["-", value.subtitle2] })] })] }), isLoading ? jsxRuntime.jsx("span", { className: "cwi-icons cwi-spinner" }) : undefined] }) }, value.rowId) }, value.rowId);
 };
 
-const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
+const SuperScheduler = ({ id, state, header, rows, events, pinnedOrderCategory, unPinnedOrderCategory, backgroundEvents, indicatorRows = [], contextMenuItems, onEvent, rowHeightRem = 1.75 }) => {
     const pinnedRows = rows.filter((it) => it.isPinned);
     const notPinnedRows = rows.filter((it) => !it.isPinned);
     const isFirstVisible = pinnedRows.length > 0;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFirstVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scheduler, { id: `${id}-pinned`, state: state, header: header, rows: pinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: pinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(CwButton, { onClick: () => {
                                 onEvent(new OnClearPinned());
-                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
+                            }, children: "Clear pinned" }) })] })), jsxRuntime.jsx(Scheduler, { id: `${id}-notPinned`, state: { ...state, isHeaderVisible: !isFirstVisible }, header: header, rows: notPinnedRows, events: events, backgroundEvents: backgroundEvents, indicatorRows: indicatorRows, contextMenuItems: contextMenuItems, orderCategories: unPinnedOrderCategory, onEvent: onEvent, EventComp: SchedulerEvent, RowTitleComp: PinRowHeader, rowHeightRem: rowHeightRem })] }));
 };
 
 const CwFindAirport = ({ handleChange, searchType = "OnlyDatabase", placeHolder = "Search airport…", required = false, cblConfig, className = "", value, disabled = false, displayMode, initialDisplayText, labelProps, alignProps, width }) => {