@pnp/spfx-controls-react 3.24.0-beta.2252463 → 3.24.0-beta.2280641

package/lib-commonjs/controls/calendar/SelectCalendarView.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectCalendarView = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_icons_1 = require("@fluentui/react-icons");
+var react_components_1 = require("@fluentui/react-components");
+var ECalendarViews_1 = require("./models/ECalendarViews");
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var SelectCalendarView = function (props) {
+    var onSelected = props.onSelected, value = props.value;
+    // State for selected view
+    var _a = React.useState(value !== null && value !== void 0 ? value : ECalendarViews_1.ECalendarViews.Month), selectedView = _a[0], setSelectedView = _a[1];
+    var _b = React.useState({
+        view: [value !== null && value !== void 0 ? value : ECalendarViews_1.ECalendarViews.Month],
+    }), checkedValues = _b[0], setCheckedValues = _b[1];
+    var DayView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarDayFilled, react_icons_1.CalendarDayRegular); }, []);
+    var MonthView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarMonthFilled, react_icons_1.CalendarMonthRegular); }, []);
+    var WeekView = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.CalendarWorkWeekFilled, react_icons_1.CalendarWorkWeekRegular); }, []);
+    React.useEffect(function () {
+        if (value !== undefined) {
+            setSelectedView(value);
+            setCheckedValues({ view: [value] });
+        }
+    }, [value]);
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var onOpenChange = React.useCallback(function (_e, data) {
+        setOpen(data.open);
+    }, []);
+    var viewIcon = React.useCallback(function () {
+        switch (selectedView) {
+            case ECalendarViews_1.ECalendarViews.Month:
+                return React.createElement(MonthView, null);
+            case ECalendarViews_1.ECalendarViews.Week:
+                return React.createElement(WeekView, null);
+            case ECalendarViews_1.ECalendarViews.Day:
+                return React.createElement(DayView, null);
+            default:
+                return React.createElement(MonthView, null);
+        }
+    }, [selectedView]);
+    var getViewLabel = React.useCallback(function (view) {
+        switch (view) {
+            case ECalendarViews_1.ECalendarViews.Month:
+                return ControlStrings_1.default.CalendarControlViewMonthLabel;
+            case ECalendarViews_1.ECalendarViews.Week:
+                return ControlStrings_1.default.CalendarControlViewWeekLabel;
+            case ECalendarViews_1.ECalendarViews.Day:
+                return ControlStrings_1.default.CalendarControlViewDayLabel;
+            default:
+                return ControlStrings_1.default.CalendarControlViewMonthLabel;
+        }
+    }, []);
+    var onCheckedValueChange = React.useCallback(function (_e, _a) {
+        var name = _a.name, checkedItems = _a.checkedItems;
+        if (name === 'view') {
+            var newView = checkedItems[0];
+            setSelectedView(newView);
+            setCheckedValues({ view: checkedItems });
+            onSelected(newView);
+        }
+    }, [onSelected]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(react_components_1.Menu, { open: open, onOpenChange: onOpenChange },
+            React.createElement(react_components_1.MenuTrigger, { disableButtonEnhancement: true },
+                React.createElement(react_components_1.MenuButton, { shape: "circular", icon: viewIcon(), style: { minWidth: '150px' } }, getViewLabel(selectedView))),
+            React.createElement(react_components_1.MenuPopover, null,
+                React.createElement(react_components_1.MenuList, { onCheckedValueChange: onCheckedValueChange, checkedValues: checkedValues },
+                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(DayView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Day }, ControlStrings_1.default.CalendarControlViewDayLabel),
+                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(WeekView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Week }, ControlStrings_1.default.CalendarControlViewWeekLabel),
+                    React.createElement(react_components_1.MenuItemRadio, { icon: React.createElement(MonthView, null), name: "view", value: ECalendarViews_1.ECalendarViews.Month }, ControlStrings_1.default.CalendarControlViewMonthLabel))))));
+};
+exports.SelectCalendarView = SelectCalendarView;
+//# sourceMappingURL=SelectCalendarView.js.map

package/lib-commonjs/controls/calendar/SelectCalendarView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCalendarView.js","sourceRoot":"","sources":["../../../src/controls/calendar/SelectCalendarView.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/calendar/Toolbar.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_icons_1 = require("@fluentui/react-icons");
+var react_button_1 = require("@fluentui/react-button");
+var ECalendarViews_1 = require("./models/ECalendarViews");
+var SelectCalendarView_1 = require("./SelectCalendarView");
+var react_controls_1 = require("@nuvemerudita/react-controls");
+var react_controls_2 = require("@nuvemerudita/react-controls");
+var react_controls_3 = require("@nuvemerudita/react-controls");
+var react_controls_4 = require("@nuvemerudita/react-controls");
+var react_tooltip_1 = require("@fluentui/react-tooltip");
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+exports.Toolbar = React.memo(function (_a) {
+    var selectedView = _a.selectedView, onSelectedView = _a.onSelectedView, currentDate = _a.currentDate, setCurrentDate = _a.setCurrentDate, onWeekChange = _a.onWeekChange, onMonthChange = _a.onMonthChange, onDayChange = _a.onDayChange;
+    var ArrowDown = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.ArrowDownFilled, react_icons_1.ArrowDownRegular); }, []);
+    var ArrowUp = React.useMemo(function () { return (0, react_icons_1.bundleIcon)(react_icons_1.ArrowUpFilled, react_icons_1.ArrowUpRegular); }, []);
+    var onSelectWeek = React.useCallback(function (week) {
+        onWeekChange(week.startDate);
+        setCurrentDate(week.startDate);
+    }, [onWeekChange, setCurrentDate]);
+    var onSelectMonth = React.useCallback(function (month) {
+        onMonthChange(month);
+        setCurrentDate(month);
+    }, [onMonthChange, setCurrentDate]);
+    var onSelectDay = React.useCallback(function (day) {
+        onDayChange(day);
+        setCurrentDate(day);
+    }, [onDayChange, setCurrentDate]);
+    var RenderSelectView = React.useCallback(function () {
+        switch (selectedView) {
+            case ECalendarViews_1.ECalendarViews.Month:
+                return React.createElement(react_controls_2.SelectMonth, { onSelected: onSelectMonth, value: currentDate });
+            case ECalendarViews_1.ECalendarViews.Week:
+                return React.createElement(react_controls_3.SelectWeek, { onSelected: onSelectWeek, value: currentDate });
+            case ECalendarViews_1.ECalendarViews.Day:
+                return React.createElement(react_controls_1.SelectDay, { onSelected: onSelectDay, value: currentDate });
+            default:
+                return React.createElement(react_controls_2.SelectMonth, { onSelected: onSelectMonth, value: currentDate });
+        }
+    }, [selectedView, onSelectMonth, onSelectWeek, onSelectDay, currentDate]);
+    var RenderToday = React.useCallback(function () { return (React.createElement(react_tooltip_1.Tooltip, { content: "Today", relationship: "label" },
+        React.createElement(react_button_1.Button, { shape: "circular", icon: React.createElement(react_icons_1.CalendarTodayRegular, null), size: "medium", onClick: function () { return onDayChange(new Date()); } }, ControlStrings_1.default.CalendarControlTodayLabel))); }, [onDayChange]);
+    var handleNavigation = React.useCallback(function (offset) {
+        var newDate = new Date(currentDate);
+        switch (selectedView) {
+            case ECalendarViews_1.ECalendarViews.Month:
+                newDate.setMonth(newDate.getMonth() + offset);
+                onMonthChange(newDate);
+                break;
+            case ECalendarViews_1.ECalendarViews.Week:
+                newDate.setDate(newDate.getDate() + offset * 7);
+                onWeekChange(newDate);
+                break;
+            case ECalendarViews_1.ECalendarViews.Day:
+                newDate.setDate(newDate.getDate() + offset);
+                onDayChange(newDate);
+                break;
+            default:
+                break;
+        }
+        setCurrentDate(newDate);
+    }, [
+        currentDate,
+        selectedView,
+        onMonthChange,
+        onWeekChange,
+        onDayChange,
+        setCurrentDate,
+    ]);
+    return (React.createElement(react_controls_4.Stack, { width: "calc(100% - 40px)", height: "fit-content", horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", paddingLeft: "20px", paddingRight: "20px", paddingBottom: "10px", paddingTop: "10px", columnGap: 10, styles: { overflow: 'hidden' } },
+        React.createElement(react_controls_4.Stack, { horizontal: true, horizontalAlign: "start", verticalAlign: "center", columnGap: 10 },
+            React.createElement(RenderToday, null),
+            React.createElement(RenderSelectView, null),
+            React.createElement(react_tooltip_1.Tooltip, { content: ControlStrings_1.default.CalendarControlPreviousLabel, relationship: "label" },
+                React.createElement(react_button_1.Button, { size: "medium", icon: React.createElement(ArrowUp, { fontSize: 14 }), onClick: function () { return handleNavigation(-1); } })),
+            React.createElement(react_tooltip_1.Tooltip, { content: ControlStrings_1.default.CalendarControlNextLabel, relationship: "label" },
+                React.createElement(react_button_1.Button, { size: "medium", icon: React.createElement(ArrowDown, { fontSize: 14 }), onClick: function () { return handleNavigation(1); } }))),
+        React.createElement(react_controls_4.Stack, { horizontal: true, horizontalAlign: "start", verticalAlign: "center", columnGap: 10 },
+            React.createElement(SelectCalendarView_1.SelectCalendarView, { onSelected: onSelectedView, value: selectedView }))));
+});
+exports.default = exports.Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/lib-commonjs/controls/calendar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/controls/calendar/Toolbar.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/calendar/WeekView.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WeekView = void 0;
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var react_components_1 = require("@fluentui/react-components");
+var date_fns_1 = require("date-fns");
+var react_1 = require("react");
+var EventRender_1 = require("./EventRender");
+var resize_observer_1 = require("@juggle/resize-observer");
+var ControlStrings_1 = tslib_1.__importDefault(require("ControlStrings"));
+var useCalendar_1 = require("./hooks/useCalendar");
+var useUtils_1 = require("./hooks/useUtils");
+var useWeekViewStyles_1 = require("./hooks/useWeekViewStyles");
+var WeekView = function (props) {
+    var events = props.events, currentDay = props.currentDay, height = props.height;
+    var styles = (0, useWeekViewStyles_1.useWeekViewStyles)().styles;
+    var currentDate = (0, react_1.useState)(currentDay)[0];
+    var _a = (0, react_1.useState)(32), rowHeight = _a[0], setRowHeight = _a[1]; // Default row height
+    var calendarRef = (0, react_1.useRef)(null);
+    var _b = (0, useUtils_1.useUtils)(), getSpanSlots = _b.getSpanSlots, getEventColors = _b.getEventColors, getCalendarColors = _b.getCalendarColors, formatDate = _b.formatDate;
+    var weekStart = (0, date_fns_1.startOfWeek)(currentDate, { weekStartsOn: 0 });
+    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    var getWeekEvents = (0, useCalendar_1.useCalendar)(timeZone).getWeekEvents;
+    // Dynamic row height calculation using ResizeObserver
+    (0, react_1.useEffect)(function () {
+        var observer = new resize_observer_1.ResizeObserver(function () {
+            if (calendarRef.current) {
+                var firstRowCell = calendarRef.current.querySelector('.dayCell');
+                if (firstRowCell) {
+                    setRowHeight(firstRowCell.offsetHeight);
+                }
+            }
+        });
+        if (calendarRef.current) {
+            observer.observe(calendarRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    var renderTimeColumn = React.useCallback(function () {
+        return Array.from({ length: 24 }, function (_, hour) { return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.timeCell },
+                React.createElement(react_components_1.Body1Strong, null,
+                    " ",
+                    hour,
+                    ":00 ")),
+            React.createElement("div", { className: styles.timeCell }))); });
+    }, []);
+    var renderDayHeaders = React.useCallback(function () {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.blankHeader }),
+            Array.from({ length: 7 }, function (_, dayIndex) {
+                var day = (0, date_fns_1.addDays)(weekStart, dayIndex);
+                var isTodayClass = (0, date_fns_1.isToday)(day) ? styles.todayHeaderCell : '';
+                return (React.createElement("div", { key: dayIndex, className: (0, react_components_1.mergeClasses)(styles.dayHeaderCell, isTodayClass) },
+                    React.createElement(react_components_1.Text, { weight: "regular", size: 600, style: { paddingRight: 10 } }, formatDate(day.toISOString(), 'dd')),
+                    React.createElement(react_components_1.Body1, null, formatDate(day.toISOString(), 'EEE'))));
+            })));
+    }, [weekStart, styles]);
+    var renderFullDayEvents = React.useCallback(function () {
+        var weekEvents = getWeekEvents(events, weekStart.toISOString());
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.fullDayLabel },
+                React.createElement(react_components_1.Body1, null, ControlStrings_1.default.CalendarControlFullDaylabel)),
+            Array.from({ length: 7 }, function (_, dayIndex) {
+                var weekDay = formatDate((0, date_fns_1.addDays)(weekStart, dayIndex).toISOString(), 'yyyy-MM-dd');
+                var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
+                var fullDayEvents = (dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.fullDayEvents) || [];
+                return (React.createElement("div", { key: dayIndex, className: styles.fullDayCell }, fullDayEvents.map(function (event) { return (React.createElement("div", { key: event.id, className: styles.fullDayEvent, style: {
+                        gridColumn: "".concat(dayIndex + 2), // Position event in the correct day column
+                        backgroundColor: event.color
+                            ? getCalendarColors(event.color).backgroundColor
+                            : getEventColors(event.category).backgroundColor,
+                    } },
+                    React.createElement(react_components_1.Caption1Strong, { className: styles.eventTitle }, event.title))); })));
+            })));
+    }, [
+        weekStart,
+        styles,
+        getWeekEvents,
+        getCalendarColors,
+        getEventColors,
+        events,
+    ]);
+    var renderDayCells = React.useCallback(function () {
+        var weekEvents = getWeekEvents(events, weekStart.toISOString());
+        return Array.from({ length: 7 }, function (_, dayIndex) {
+            var weekDay = (0, date_fns_1.format)((0, date_fns_1.addDays)(weekStart, dayIndex), 'yyyy-MM-dd');
+            var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
+            return (React.createElement(React.Fragment, null, dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.timeSlots.map(function (timeSlot, slotIndex) {
+                var eventCount = timeSlot.events.length; // Total events in the slot
+                return (React.createElement("div", { key: slotIndex, className: styles.dayCell, style: {
+                        gridRow: slotIndex + 3, // Offset to account for header and full-day row
+                    } }, timeSlot.events.map(function (event, eventIndex) {
+                    var startDate = new Date(event.start);
+                    var endDate = new Date(event.end);
+                    // Calculate the start and end slots based on event times
+                    var _a = getSpanSlots(startDate, endDate), spanSlots = _a.spanSlots, startSlot = _a.startSlot;
+                    // Only render the event in its starting timeslot
+                    if (slotIndex === startSlot) {
+                        // Event Render
+                        return (React.createElement(EventRender_1.EventRenderer, { key: event.id, event: event, eventCount: eventCount, spanSlots: spanSlots, rowHeight: rowHeight, eventIndex: eventIndex, view: "week" }));
+                    }
+                    return null; // Skip rendering for non-starting slots
+                })));
+            })));
+        });
+    }, [weekStart, styles, getWeekEvents, getSpanSlots, rowHeight, events]);
+    return (React.createElement("div", { className: styles.container, style: { height: height } },
+        React.createElement("div", { ref: calendarRef, className: styles.weekGrid },
+            React.createElement("div", { className: styles.timeColumn }, renderTimeColumn()),
+            renderDayHeaders(),
+            renderFullDayEvents(),
+            renderDayCells())));
+};
+exports.WeekView = WeekView;
+exports.default = exports.WeekView;
+//# sourceMappingURL=WeekView.js.map

package/lib-commonjs/controls/calendar/WeekView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekView.js","sourceRoot":"","sources":["../../../src/controls/calendar/WeekView.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/calendar/hooks/useCalendar.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendar = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var uuid_1 = require("uuid"); // Use UUID for generating unique IDs
+var useCalendar = function (timezone) {
+    // Initialize events with a unique ID
+    var initializeEventsWithId = (0, react_1.useCallback)(function (events) {
+        return events.map(function (event) { return (tslib_1.__assign(tslib_1.__assign({}, event), { id: event.id || (0, uuid_1.v4)() })); });
+    }, []);
+    // Memoized helper for timezone handling
+    var toLocalDate = (0, react_1.useCallback)(function (dateString) {
+        return new Date(new Date(dateString).toLocaleString(undefined, { timeZone: timezone }));
+    }, [timezone]);
+    // Memoize getMonthCalendar to avoid re-creation unless dependencies change
+    var getMonthCalendar = (0, react_1.useCallback)(function (events, year, month) {
+        var eventsWithId = initializeEventsWithId(events);
+        var daysInMonth = new Date(year, month + 1, 0).getDate();
+        var calendarEventsByDay = {};
+        for (var day = 1; day <= daysInMonth; day++) {
+            var date = new Date(year, month, day);
+            var dateString = date.toISOString().split('T')[0];
+            calendarEventsByDay[dateString] = [];
+        }
+        eventsWithId.forEach(function (event) {
+            var eventStart = toLocalDate(event.start);
+            var eventEnd = toLocalDate(event.end);
+            var currentDate = new Date(eventStart);
+            while (currentDate <= eventEnd) {
+                var dateString = currentDate.toISOString().split('T')[0];
+                if (calendarEventsByDay[dateString]) {
+                    calendarEventsByDay[dateString].push(event);
+                }
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+        });
+        return calendarEventsByDay;
+    }, [toLocalDate]);
+    // Memoize getWeekEvents to avoid unnecessary re-computation
+    var getWeekEvents = (0, react_1.useCallback)(function (events, startDate) {
+        var weekEvents = [];
+        var start = toLocalDate(startDate);
+        var eventsWithId = initializeEventsWithId(events);
+        var _loop_1 = function (i) {
+            var currentDate = new Date(start);
+            currentDate.setDate(start.getDate() + i);
+            var dateString = currentDate.toISOString().split('T')[0];
+            var dayTimeSlots = Array.from({ length: 48 }, function (_, index) { return ({
+                time: "".concat(String(Math.floor(index / 2)).padStart(2, '0'), ":").concat(index % 2 === 0 ? '00' : '30'),
+                events: [],
+            }); });
+            var fullDayEvents = [];
+            eventsWithId.forEach(function (event) {
+                var eventStart = toLocalDate(event.start);
+                var eventEnd = toLocalDate(event.end);
+                if (event.isFullDay) {
+                    if (eventStart.toISOString().split('T')[0] <= dateString &&
+                        eventEnd.toISOString().split('T')[0] >= dateString) {
+                        fullDayEvents.push(event);
+                    }
+                    return;
+                }
+                if (eventStart.toISOString().split('T')[0] <= dateString &&
+                    eventEnd.toISOString().split('T')[0] >= dateString) {
+                    var currentSlot = new Date(eventStart);
+                    while (currentSlot <= eventEnd) {
+                        var slotDateString = currentSlot.toISOString().split('T')[0];
+                        if (slotDateString === dateString) {
+                            var slotIndex = currentSlot.getHours() * 2 +
+                                (currentSlot.getMinutes() >= 30 ? 1 : 0);
+                            if (dayTimeSlots[slotIndex]) {
+                                dayTimeSlots[slotIndex].events.push(event);
+                            }
+                        }
+                        currentSlot.setMinutes(currentSlot.getMinutes() + 30);
+                    }
+                }
+            });
+            weekEvents.push({
+                date: dateString,
+                fullDayEvents: fullDayEvents,
+                timeSlots: dayTimeSlots,
+            });
+        };
+        for (var i = 0; i < 7; i++) {
+            _loop_1(i);
+        }
+        return weekEvents;
+    }, [toLocalDate]);
+    return {
+        getMonthCalendar: getMonthCalendar,
+        getWeekEvents: getWeekEvents,
+    };
+};
+exports.useCalendar = useCalendar;
+exports.default = exports.useCalendar;
+//# sourceMappingURL=useCalendar.js.map

package/lib-commonjs/controls/calendar/hooks/useCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendar.js","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendar.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/controls/calendar/hooks/useCalendarStyles.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCalendarStyles = void 0;
+var css_1 = require("@emotion/css");
+var react_components_1 = require("@fluentui/react-components");
+var useCalendarStyles = function () {
+    var styles = {
+        calendarWrapper: (0, css_1.css)({
+            padding: "20px",
+            paddingTop: "10px",
+            overflow: "auto",
+            flex: 1,
+            display: "grid",
+            gridTemplateColumns: "repeat(7, 1fr)", // 7 columns for the days of the week
+            gridTemplateRows: "auto", // Automatically sizes the header row
+            gridAutoRows: "minmax(100px, 1fr)", // Ensures all rows have a minimum height of 100px and grow equally
+            gap: "1px", // Gap between cells
+            width: "calc(100% - 40px)", // Full width minus padding
+        }),
+        header: (0, css_1.css)({
+            display: "flex",
+            justifyContent: "start",
+            gap: "10px",
+            alignItems: "center",
+            padding: "16px",
+        }),
+        dayHeader: (0, css_1.css)({
+            textAlign: "start",
+            padding: "8px",
+            borderBottom: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
+        }),
+        day: (0, css_1.css)({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            border: "1px solid ".concat(react_components_1.tokens.colorNeutralStroke1),
+            backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+            position: "relative", // Ensure proper stacking context
+        }),
+        otherMonthDay: (0, css_1.css)({
+            color: react_components_1.tokens.colorNeutralStroke2,
+            backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+        }),
+        cardDay: (0, css_1.css)({
+            height: "100%",
+            minHeight: 100,
+            borderRadius: 0,
+            overflow: "hidden !important",
+        }),
+        cardDayOnHover: (0, css_1.css)({
+            ":hover": {
+                backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+            },
+        }),
+        currentDay: (0, css_1.css)({
+            borderTop: "5px solid ".concat(react_components_1.tokens.colorBrandBackground),
+        }),
+        currentDayLabel: (0, css_1.css)({
+            color: react_components_1.tokens.colorBrandBackground,
+            fontWeight: 600,
+        }),
+        eventCard: (0, css_1.css)({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            zIndex: 1, // Ensure it appears above parent hover styles
+        }),
+        eventContainer: (0, css_1.css)({
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto", // Ensures proper overflow handling
+            paddingTop: "5px",
+            paddingBottom: "5px",
+            paddingLeft: "5px",
+            paddingRight: "5px",
+            // Scrollbar styles
+            "::-webkit-scrollbar": {
+                width: "5px", // Width for vertical scrollbars
+                height: "5px", // Height for horizontal scrollbars
+            },
+            "::-webkit-scrollbar-track": {
+                background: react_components_1.tokens.colorNeutralBackground4, // Light gray for the track
+                borderRadius: "10px",
+            },
+            "::-webkit-scrollbar-thumb": {
+                background: react_components_1.tokens.colorBrandStroke2Hover, // Dark gray for the thumb
+                borderRadius: "10px",
+            },
+            "::-webkit-scrollbar-thumb:hover": {
+                background: react_components_1.tokens.colorNeutralStroke2, // Dark gray for the thumb
+            },
+        }),
+        eventCardWeekView: (0, css_1.css)({
+            backgroundColor: react_components_1.tokens.colorBrandBackground,
+            color: react_components_1.tokens.colorNeutralForegroundOnBrand,
+            borderRadius: "4px",
+            padding: "4px",
+            margin: "2px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            height: "100%",
+        }),
+        popoverContent: (0, css_1.css)({
+            padding: 0,
+            borderTopWidth: 20,
+            borderTopStyle: "solid",
+        }),
+    };
+    var applyEventHouverColorClass = function (backgroundColor, houverColor) {
+        return (0, css_1.css)({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : react_components_1.tokens.colorBrandBackground,
+            ":hover": {
+                backgroundColor: houverColor !== null && houverColor !== void 0 ? houverColor : react_components_1.tokens.colorBrandBackgroundHover,
+            },
+        });
+    };
+    return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
+};
+exports.useCalendarStyles = useCalendarStyles;
+//# sourceMappingURL=useCalendarStyles.js.map

package/lib-commonjs/controls/calendar/hooks/useCalendarStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarStyles.js","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendarStyles.ts"],"names":[],"mappings":"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"}