@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/meetings/MonthDatePicker.js

@@ -0,0 +1,422 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_T, hooks_module_y, hooks_module_d, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/css/index.js";
+import "../../styled-system/jsx/index.js";
+import { toIntlLocale } from "../../utils/locale.js";
+import { formatMonthTitle } from "./utils.js";
+import "../../../utils/native_globals.js";
+import { cx } from "../../styled-system/css/cx.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var __nativeDocumentAddEventListener = __webpack_require__(68034).Qj;
+/* provided dependency */ var __nativeDocumentRemoveEventListener = __webpack_require__(68034).LA;
+/** @jsxImportSource preact */ 
+
+
+
+
+
+function buildMonthGrid(year, month) {
+    const firstDayOfWeek = new Date(year, month, 1).getDay(); // 0=Sun
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const grid = [];
+    // Leading days from previous month
+    for(let i = firstDayOfWeek - 1; i >= 0; i--){
+        const d = new Date(year, month, -i);
+        grid.push({
+            year: d.getFullYear(),
+            month: d.getMonth(),
+            day: d.getDate(),
+            isCurrentMonth: false
+        });
+    }
+    // Current month days
+    for(let d = 1; d <= daysInMonth; d++){
+        grid.push({
+            year,
+            month,
+            day: d,
+            isCurrentMonth: true
+        });
+    }
+    // Trailing days to complete the last row
+    let trailing = 1;
+    while(grid.length % 7 !== 0){
+        const d = new Date(year, month + 1, trailing);
+        grid.push({
+            year: d.getFullYear(),
+            month: d.getMonth(),
+            day: trailing,
+            isCurrentMonth: false
+        });
+        trailing++;
+    }
+    return grid;
+}
+function toDateKey(year, month, day) {
+    return year + "-" + String(month + 1).padStart(2, "0") + "-" + String(day).padStart(2, "0");
+}
+function getLocalizedDayLabels(locale) {
+    const intlLocale = toIntlLocale(locale);
+    return Array.from({
+        length: 7
+    }, (_, dayOffset)=>new Intl.DateTimeFormat(intlLocale, {
+            weekday: "narrow"
+        }).format(new Date(2024, 0, 7 + dayOffset)));
+}
+function formatDayButtonLabel(gridDay, locale) {
+    return new Intl.DateTimeFormat(toIntlLocale(locale), {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric"
+    }).format(new Date(gridDay.year, gridDay.month, gridDay.day));
+}
+const MonthDatePicker = (param)=>{
+    let { monthTitle, minDate, maxDate, availableDateStrings, selectedDateString, onSelectDate, locale, openDatePickerLabel } = param;
+    const [isOpen, setIsOpen] = hooks_module_d(false);
+    const [popupMonth, setPopupMonth] = hooks_module_d(null);
+    const wrapperRef = hooks_module_A(null);
+    const dayLabels = hooks_module_T(()=>getLocalizedDayLabels(locale), [
+        locale
+    ]);
+    const openPopup = ()=>{
+        const sel = selectedDateString.value;
+        if (sel) {
+            const [y, m] = sel.split("-").map(Number);
+            setPopupMonth({
+                year: y,
+                month: m - 1
+            });
+        } else {
+            const now = new Date();
+            setPopupMonth({
+                year: now.getFullYear(),
+                month: now.getMonth()
+            });
+        }
+        setIsOpen(true);
+    };
+    const closePopup = ()=>setIsOpen(false);
+    // Click-outside and Escape handlers
+    hooks_module_y(()=>{
+        if (!isOpen) return;
+        const handleMouseDown = (e)=>{
+            if (wrapperRef.current && !e.composedPath().includes(wrapperRef.current)) {
+                closePopup();
+            }
+        };
+        const handleKeyDown = (e)=>{
+            if (e.key === "Escape") closePopup();
+        };
+        __nativeDocumentAddEventListener("mousedown", handleMouseDown);
+        __nativeDocumentAddEventListener("keydown", handleKeyDown);
+        return ()=>{
+            __nativeDocumentRemoveEventListener("mousedown", handleMouseDown);
+            __nativeDocumentRemoveEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        isOpen
+    ]);
+    const handleDayClick = (gridDay)=>{
+        if (!gridDay.isCurrentMonth) return;
+        const dateKey = toDateKey(gridDay.year, gridDay.month, gridDay.day);
+        if (!availableDateStrings.value.has(dateKey)) return;
+        onSelectDate(new Date(gridDay.year, gridDay.month, gridDay.day));
+        closePopup();
+    };
+    // Memoize the month grid — only recompute when the displayed month changes
+    const grid = hooks_module_T(()=>popupMonth ? buildMonthGrid(popupMonth.year, popupMonth.month) : [], // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        popupMonth == null ? void 0 : popupMonth.year,
+        popupMonth == null ? void 0 : popupMonth.month
+    ]);
+    const canGoPrev = hooks_module_T(()=>{
+        if (!popupMonth || !minDate.value) return false;
+        const [minYear, minMonthStr] = minDate.value.split("-").map(Number);
+        const minMonth = minMonthStr - 1;
+        const prevYear = popupMonth.month === 0 ? popupMonth.year - 1 : popupMonth.year;
+        const prevMonth = popupMonth.month === 0 ? 11 : popupMonth.month - 1;
+        return prevYear > minYear || prevYear === minYear && prevMonth >= minMonth;
+    }, [
+        popupMonth,
+        minDate.value
+    ]);
+    const canGoNext = hooks_module_T(()=>{
+        if (!popupMonth || !maxDate.value) return false;
+        const [maxYear, maxMonthStr] = maxDate.value.split("-").map(Number);
+        const maxMonth = maxMonthStr - 1;
+        const nextYear = popupMonth.month === 11 ? popupMonth.year + 1 : popupMonth.year;
+        const nextMonth = popupMonth.month === 11 ? 0 : popupMonth.month + 1;
+        return nextYear < maxYear || nextYear === maxYear && nextMonth <= maxMonth;
+    }, [
+        popupMonth,
+        maxDate.value
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        ref: wrapperRef,
+        className: datePickerWrapperStyle,
+        "data-component-name": "MonthDatePicker.DatePickerWrapper",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(MonthDisplay, {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": openDatePickerLabel,
+                "aria-expanded": isOpen,
+                onClick: isOpen ? closePopup : openPopup,
+                onKeyDown: (e)=>{
+                    if (e.key === "Enter" || e.key === " ") {
+                        // Prevent space bar from scrolling the page
+                        e.preventDefault();
+                        isOpen ? closePopup() : openPopup();
+                    }
+                },
+                "data-component-name": "MonthDatePicker.MonthDisplay",
+                children: [
+                    monthTitle.value,
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        className: chevronStyle,
+                        "aria-hidden": "true",
+                        children: "▾"
+                    })
+                ]
+            }),
+            isOpen && popupMonth && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: popupStyle,
+                "data-component-name": "MonthDatePicker.Popup",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: popupHeaderStyle,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                className: navButtonStyle,
+                                type: "button",
+                                disabled: !canGoPrev,
+                                onClick: ()=>{
+                                    const { year, month } = popupMonth;
+                                    setPopupMonth(month === 0 ? {
+                                        year: year - 1,
+                                        month: 11
+                                    } : {
+                                        year,
+                                        month: month - 1
+                                    });
+                                },
+                                "aria-label": formatMonthTitle((popupMonth.month === 0 ? popupMonth.year - 1 : popupMonth.year) + "-" + String(popupMonth.month === 0 ? 12 : popupMonth.month).padStart(2, "0") + "-01", locale),
+                                children: "‹"
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: popupMonthTitleStyle,
+                                children: formatMonthTitle(popupMonth.year + "-" + String(popupMonth.month + 1).padStart(2, "0") + "-01", locale)
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                className: navButtonStyle,
+                                type: "button",
+                                disabled: !canGoNext,
+                                onClick: ()=>{
+                                    const { year, month } = popupMonth;
+                                    setPopupMonth(month === 11 ? {
+                                        year: year + 1,
+                                        month: 0
+                                    } : {
+                                        year,
+                                        month: month + 1
+                                    });
+                                },
+                                "aria-label": formatMonthTitle((popupMonth.month === 11 ? popupMonth.year + 1 : popupMonth.year) + "-" + String(popupMonth.month === 11 ? 1 : popupMonth.month + 2).padStart(2, "0") + "-01", locale),
+                                children: "›"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: dayLabelsRowStyle,
+                        children: dayLabels.map((label, i)=>/*#__PURE__*/ jsxRuntime_module_u("span", {
+                                className: dayLabelStyle,
+                                children: label
+                            }, i))
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        className: gridStyle,
+                        children: grid.map((gridDay, i)=>{
+                            const dateKey = toDateKey(gridDay.year, gridDay.month, gridDay.day);
+                            const isAvailable = gridDay.isCurrentMonth && availableDateStrings.value.has(dateKey);
+                            const isSelected = dateKey === selectedDateString.value;
+                            const isDisabled = !gridDay.isCurrentMonth || !isAvailable;
+                            return /*#__PURE__*/ jsxRuntime_module_u("button", {
+                                type: "button",
+                                className: cx(gridDayStyle, !gridDay.isCurrentMonth ? gridDayOtherMonthStyle : null, gridDay.isCurrentMonth && isAvailable ? gridDayAvailableStyle : null, isSelected ? gridDaySelectedStyle : null, isDisabled ? gridDayDisabledStyle : null),
+                                disabled: isDisabled,
+                                onClick: ()=>handleDayClick(gridDay),
+                                "aria-label": formatDayButtonLabel(gridDay, locale),
+                                "aria-pressed": isSelected,
+                                "data-component-name": "MonthDatePicker.GridDay",
+                                children: gridDay.day
+                            }, i);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+const datePickerWrapperStyle = css_css({
+    position: "relative",
+    display: "inline-block",
+    outline: "none"
+});
+const MonthDisplay = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        paddingTop: "$sm",
+        paddingBottom: "$sm",
+        paddingLeft: "$md",
+        paddingRight: "$md",
+        borderRadius: "[6px]",
+        fontSize: "14px",
+        fontWeight: "$semibold",
+        fontFamily: "$inter",
+        color: "$text.dark",
+        userSelect: "none",
+        cursor: "pointer",
+        transition: "background 0.15s",
+        "&:hover": {
+            background: "[rgba(0,0,0,0.05)]"
+        }
+    }
+});
+MonthDisplay.displayName = "MonthDisplay";
+const chevronStyle = css_css({
+    fontSize: "12px",
+    color: "$text.secondary",
+    lineHeight: "1"
+});
+const popupStyle = css_css({
+    position: "absolute",
+    top: "[calc(100%+4px)]",
+    left: "[0]",
+    zIndex: "[9999]",
+    backgroundColor: "[white]",
+    borderRadius: "[8px]",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "$gray",
+    boxShadow: "[0_8px_24px_rgba(0,0,0,0.15)]",
+    paddingBlock: "[12px]",
+    paddingInline: "[12px]",
+    width: "[240px]"
+});
+const popupHeaderStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "[8px]"
+});
+const navButtonStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "[28px]",
+    height: "[28px]",
+    borderRadius: "[4px]",
+    border: "none",
+    background: "$transparent",
+    cursor: "pointer",
+    fontSize: "16px",
+    color: "$text.secondary",
+    lineHeight: "1",
+    "&:hover:not(:disabled)": {
+        background: "[rgba(0,0,0,0.06)]",
+        color: "$text.dark"
+    },
+    "&:disabled": {
+        opacity: "[0.3]",
+        cursor: "not-allowed"
+    }
+});
+const popupMonthTitleStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "14px",
+    lineHeight: "22px",
+    fontWeight: "$semibold",
+    color: "$text.dark"
+});
+const dayLabelsRowStyle = css_css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    marginBottom: "[4px]"
+});
+// The same micro label the week strip's day-of-week uses, so the picker and the
+// strip it opens from name the days identically.
+const dayLabelStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "10px",
+    fontWeight: "$medium",
+    lineHeight: "16px",
+    letterSpacing: "0.5px",
+    textTransform: "uppercase",
+    color: "$text.secondary",
+    textAlign: "center",
+    paddingBlock: "[2px]"
+});
+const gridStyle = css_css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: "[2px]"
+});
+const gridDayStyle = css_css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "[30px]",
+    height: "[30px]",
+    borderRadius: "[4px]",
+    border: "none",
+    background: "$transparent",
+    fontFamily: "$inter",
+    fontSize: "12px",
+    fontWeight: "$medium",
+    color: "$text.secondary",
+    cursor: "pointer",
+    padding: "[0]",
+    position: "relative"
+});
+const gridDayOtherMonthStyle = css_css({
+    opacity: "[0.25]"
+});
+const gridDayAvailableStyle = css_css({
+    color: "$text.dark",
+    fontWeight: "$semibold",
+    cursor: "pointer",
+    "&:hover": {
+        background: "[rgba(0,0,0,0.06)]"
+    },
+    "&::after": {
+        content: '""',
+        position: "absolute",
+        bottom: "[3px]",
+        left: "[50%]",
+        transform: "translateX(-50%)",
+        width: "[4px]",
+        height: "[4px]",
+        borderRadius: "[50%]",
+        backgroundColor: "$primary"
+    }
+});
+const gridDaySelectedStyle = css_css({
+    backgroundColor: "$primary",
+    color: "[white]",
+    "&:hover": {
+        backgroundColor: "$primary"
+    },
+    "&::after": {
+        display: "none"
+    }
+});
+const gridDayDisabledStyle = css_css({
+    cursor: "not-allowed"
+});
+
+export { MonthDatePicker };

package/widget/multimodal_v2/components/meetings/NavigationButtons.js

@@ -0,0 +1,76 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { RightArrowIcon, LeftArrowIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const NavigationButtons = (param)=>{
+    let { hasPrev, hasNext, onPrevious, onNext, prevAriaLabel = "Previous", nextAriaLabel = "Next" } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "NavigationButtons.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(NavButton, {
+                "data-component-name": "NavigationButtons.NavButton",
+                type: "button",
+                "aria-label": prevAriaLabel,
+                onClick: onPrevious,
+                disabled: !hasPrev.value,
+                visible: hasPrev,
+                children: /*#__PURE__*/ jsxRuntime_module_u(LeftArrowIcon, {})
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(NavButton, {
+                "data-component-name": "NavigationButtons.NavButton",
+                type: "button",
+                "aria-label": nextAriaLabel,
+                onClick: onNext,
+                disabled: !hasNext.value,
+                visible: hasNext,
+                children: /*#__PURE__*/ jsxRuntime_module_u(RightArrowIcon, {})
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm"
+    }
+});
+Container.displayName = "Container";
+const NavButton = styled("button", {
+    base: {
+        display: "flex",
+        width: "[24px]",
+        height: "[24px]",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "$sm",
+        backgroundColor: "$transparent",
+        border: "none",
+        cursor: "pointer",
+        padding: "$none",
+        margin: "$none",
+        borderRadius: "[6px]",
+        transition: "[background-color 150ms ease]",
+        "&:is(:hover, :focus-visible):not(:disabled)": {
+            backgroundColor: "[rgba(0, 0, 0, 0.05)]"
+        }
+    },
+    variants: {
+        visible: {
+            true: {
+                opacity: 1
+            },
+            false: {
+                opacity: 0.3
+            }
+        }
+    }
+});
+NavButton.displayName = "NavButton";
+
+export { NavigationButtons };