first commit

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.base.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { IDay } from '@fluentui/date-time-utilities';
+import type { ICalendarDayGridProps } from './CalendarDayGrid.types';
+export interface IWeekCorners {
+    [key: string]: string;
+}
+export interface IDayInfo extends IDay {
+    onSelected: () => void;
+    setRef(element: HTMLElement | null): void;
+}
+export declare const CalendarDayGridBase: React.FunctionComponent<ICalendarDayGridProps>;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.base.js

@@ -0,0 +1,279 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { getRTL, classNamesFunction } from '@fluentui/utilities';
+import { FocusZone } from '../../FocusZone';
+import { getDateRangeArray, getDayGrid, getBoundedDateRange, isRestrictedDate, DAYS_IN_WEEK, compareDates, DateRangeType, } from '@fluentui/date-time-utilities';
+import { usePrevious, useId } from '@fluentui/react-hooks';
+import { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';
+import { CalendarGridRow } from './CalendarGridRow';
+var getClassNames = classNamesFunction();
+function useDayRefs() {
+    var daysRef = React.useRef({});
+    var getSetRefCallback = function (dayKey) { return function (element) {
+        if (element === null) {
+            delete daysRef.current[dayKey];
+        }
+        else {
+            daysRef.current[dayKey] = element;
+        }
+    }; };
+    return [daysRef, getSetRefCallback];
+}
+function useWeeks(props, onSelectDate, getSetRefCallback) {
+    /**
+     * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation
+     * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.
+     */
+    var weeks = React.useMemo(function () {
+        var _a;
+        var weeksGrid = getDayGrid(props);
+        var firstVisibleDay = weeksGrid[1][0].originalDate;
+        var lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;
+        var markedDays = ((_a = props.getMarkedDays) === null || _a === void 0 ? void 0 : _a.call(props, firstVisibleDay, lastVisibleDay)) || [];
+        /**
+         * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,
+         * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.
+         *
+         * Weeks[1... weeks.length - 2] contains the actual visible data
+         */
+        var returnValue = [];
+        for (var weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {
+            var week = [];
+            var _loop_1 = function (dayIndex) {
+                var day = weeksGrid[weekIndex][dayIndex];
+                var dayInfo = __assign(__assign({ onSelected: function () { return onSelectDate(day.originalDate); }, setRef: getSetRefCallback(day.key) }, day), { isMarked: day.isMarked || (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(function (markedDay) { return compareDates(day.originalDate, markedDay); })) });
+                week.push(dayInfo);
+            };
+            for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
+                _loop_1(dayIndex);
+            }
+            returnValue.push(week);
+        }
+        return returnValue;
+        // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire
+        // props object may not be a good idea due to likely frequent mutation). It would be easy to
+        // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from
+        // Calendar and trying to fix it requires a huge cascade of changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props]);
+    return weeks;
+}
+/**
+ * Hook to determine whether to animate the CalendarDayGrid forwards or backwards
+ * @returns true if the grid should animate backwards; false otherwise
+ */
+function useAnimateBackwards(weeks) {
+    var previousNavigatedDate = usePrevious(weeks[0][0].originalDate);
+    if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {
+        return undefined;
+    }
+    else if (previousNavigatedDate <= weeks[0][0].originalDate) {
+        return false;
+    }
+    else {
+        return true;
+    }
+}
+function useWeekCornerStyles(props) {
+    /**
+     *
+     * Section for setting the rounded corner styles on individual day cells. Individual day cells need different
+     * corners to be rounded depending on which date range type and where the cell is located in the current grid.
+     * If we just round all of the corners, there isn't a good overlap and we get gaps between contiguous day boxes
+     * in Edge browser.
+     *
+     */
+    var getWeekCornerStyles = function (classNames, initialWeeks) {
+        var weekCornersStyled = {};
+        /* need to handle setting all of the corners on arbitrarily shaped blobs
+              __
+           __|A |
+          |B |C |__
+          |D |E |F |
+    
+          in this case, A needs top left rounded, top right rounded
+          B needs top left rounded
+          C doesn't need any rounding
+          D needs bottom left rounded
+          E doesn't need any rounding
+          F needs top right rounding
+        */
+        // cut off the animation transition weeks
+        var weeks = initialWeeks.slice(1, initialWeeks.length - 1);
+        // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.
+        weeks.forEach(function (week, weekIndex) {
+            week.forEach(function (day, dayIndex) {
+                var above = weeks[weekIndex - 1] &&
+                    weeks[weekIndex - 1][dayIndex] &&
+                    isInSameHoverRange(weeks[weekIndex - 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex - 1][dayIndex].isSelected, day.isSelected);
+                var below = weeks[weekIndex + 1] &&
+                    weeks[weekIndex + 1][dayIndex] &&
+                    isInSameHoverRange(weeks[weekIndex + 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex + 1][dayIndex].isSelected, day.isSelected);
+                var left = weeks[weekIndex][dayIndex - 1] &&
+                    isInSameHoverRange(weeks[weekIndex][dayIndex - 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex - 1].isSelected, day.isSelected);
+                var right = weeks[weekIndex][dayIndex + 1] &&
+                    isInSameHoverRange(weeks[weekIndex][dayIndex + 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex + 1].isSelected, day.isSelected);
+                var style = [];
+                style.push(calculateRoundedStyles(classNames, above, below, left, right));
+                style.push(calculateBorderStyles(classNames, above, below, left, right));
+                weekCornersStyled[weekIndex + '_' + dayIndex] = style.join(' ');
+            });
+        });
+        return weekCornersStyled;
+    };
+    var calculateRoundedStyles = function (classNames, above, below, left, right) {
+        var style = [];
+        var roundedTopLeft = !above && !left;
+        var roundedTopRight = !above && !right;
+        var roundedBottomLeft = !below && !left;
+        var roundedBottomRight = !below && !right;
+        if (roundedTopLeft) {
+            style.push(getRTL() ? classNames.topRightCornerDate : classNames.topLeftCornerDate);
+        }
+        if (roundedTopRight) {
+            style.push(getRTL() ? classNames.topLeftCornerDate : classNames.topRightCornerDate);
+        }
+        if (roundedBottomLeft) {
+            style.push(getRTL() ? classNames.bottomRightCornerDate : classNames.bottomLeftCornerDate);
+        }
+        if (roundedBottomRight) {
+            style.push(getRTL() ? classNames.bottomLeftCornerDate : classNames.bottomRightCornerDate);
+        }
+        return style.join(' ');
+    };
+    var calculateBorderStyles = function (classNames, above, below, left, right) {
+        var style = [];
+        if (!above) {
+            style.push(classNames.datesAbove);
+        }
+        if (!below) {
+            style.push(classNames.datesBelow);
+        }
+        if (!left) {
+            style.push(getRTL() ? classNames.datesRight : classNames.datesLeft);
+        }
+        if (!right) {
+            style.push(getRTL() ? classNames.datesLeft : classNames.datesRight);
+        }
+        return style.join(' ');
+    };
+    var isInSameHoverRange = function (date1, date2, date1Selected, date2Selected) {
+        var dateRangeType = props.dateRangeType, firstDayOfWeek = props.firstDayOfWeek, workWeekDays = props.workWeekDays;
+        // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state
+        var dateRangeHoverType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;
+        // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver
+        var dateRange = getDateRangeArray(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);
+        if (date1Selected !== date2Selected) {
+            // if one is selected and the other is not, they can't be in the same range
+            return false;
+        }
+        else if (date1Selected && date2Selected) {
+            // if they're both selected at the same time they must be in the same range
+            return true;
+        }
+        // otherwise, both must be unselected, so check the dateRange
+        return dateRange.filter(function (date) { return date.getTime() === date2.getTime(); }).length > 0;
+    };
+    return [getWeekCornerStyles, calculateRoundedStyles];
+}
+export var CalendarDayGridBase = function (props) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    var navigatedDayRef = React.useRef(null);
+    var activeDescendantId = useId();
+    var onSelectDate = function (selectedDate) {
+        var _a, _b;
+        var firstDayOfWeek = props.firstDayOfWeek, minDate = props.minDate, maxDate = props.maxDate, workWeekDays = props.workWeekDays, daysToSelectInDayView = props.daysToSelectInDayView, restrictedDates = props.restrictedDates;
+        var restrictedDatesOptions = { minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates };
+        var dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);
+        dateRange = getBoundedDateRange(dateRange, minDate, maxDate);
+        dateRange = dateRange.filter(function (d) {
+            return !isRestrictedDate(d, restrictedDatesOptions);
+        });
+        (_a = props.onSelectDate) === null || _a === void 0 ? void 0 : _a.call(props, selectedDate, dateRange);
+        (_b = props.onNavigateDate) === null || _b === void 0 ? void 0 : _b.call(props, selectedDate, true);
+    };
+    var _a = useDayRefs(), daysRef = _a[0], getSetRefCallback = _a[1];
+    var weeks = useWeeks(props, onSelectDate, getSetRefCallback);
+    var animateBackwards = useAnimateBackwards(weeks);
+    var _b = useWeekCornerStyles(props), getWeekCornerStyles = _b[0], calculateRoundedStyles = _b[1];
+    React.useImperativeHandle(props.componentRef, function () { return ({
+        focus: function () {
+            var _a, _b;
+            (_b = (_a = navigatedDayRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        },
+    }); }, []);
+    /**
+     *
+     * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support
+     * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks
+     * to set classnames on all relevant child refs to apply the styling
+     *
+     */
+    var getDayInfosInRangeOfDay = function (dayToCompare) {
+        // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state
+        var dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);
+        // gets all the dates for the given date range type that are in the same date range as the given day
+        var dateRange = getDateRangeArray(dayToCompare.originalDate, dateRangeHoverType, props.firstDayOfWeek, props.workWeekDays, props.daysToSelectInDayView).map(function (date) { return date.getTime(); });
+        // gets all the day refs for the given dates
+        var dayInfosInRange = weeks.reduce(function (accumulatedValue, currentWeek) {
+            return accumulatedValue.concat(currentWeek.filter(function (weekDay) { return dateRange.indexOf(weekDay.originalDate.getTime()) !== -1; }));
+        }, []);
+        return dayInfosInRange;
+    };
+    var getRefsFromDayInfos = function (dayInfosInRange) {
+        var dayRefs = [];
+        dayRefs = dayInfosInRange.map(function (dayInfo) { return daysRef.current[dayInfo.key]; });
+        return dayRefs;
+    };
+    var styles = props.styles, theme = props.theme, className = props.className, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, labelledBy = props.labelledBy, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animationDirection = props.animationDirection;
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        className: className,
+        dateRangeType: dateRangeType,
+        showWeekNumbers: showWeekNumbers,
+        lightenDaysOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,
+        animationDirection: animationDirection,
+        animateBackwards: animateBackwards,
+    });
+    // When the month is highlighted get the corner dates so that styles can be added to them
+    var weekCorners = getWeekCornerStyles(classNames, weeks);
+    var partialWeekProps = {
+        weeks: weeks,
+        navigatedDayRef: navigatedDayRef,
+        calculateRoundedStyles: calculateRoundedStyles,
+        activeDescendantId: activeDescendantId,
+        classNames: classNames,
+        weekCorners: weekCorners,
+        getDayInfosInRangeOfDay: getDayInfosInRangeOfDay,
+        getRefsFromDayInfos: getRefsFromDayInfos,
+    };
+    return (React.createElement(FocusZone, { className: classNames.wrapper, preventDefaultWhenHandled: true },
+        React.createElement("table", { className: classNames.table, "aria-multiselectable": "false", "aria-labelledby": labelledBy, "aria-activedescendant": activeDescendantId, role: "grid" },
+            React.createElement("tbody", null,
+                React.createElement(CalendarMonthHeaderRow, __assign({}, props, { classNames: classNames, weeks: weeks })),
+                React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[0], weekIndex: -1, rowClassName: classNames.firstTransitionWeek, ariaRole: "presentation", ariaHidden: true })),
+                weeks.slice(1, weeks.length - 1).map(function (week, weekIndex) { return (React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { key: weekIndex, week: week, weekIndex: weekIndex, rowClassName: classNames.weekRow }))); }),
+                React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[weeks.length - 1], weekIndex: -2, rowClassName: classNames.lastTransitionWeek, ariaRole: "presentation", ariaHidden: true }))))));
+};
+CalendarDayGridBase.displayName = 'CalendarDayGridBase';
+/**
+ * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous
+ * work weeks, we'll just show week view instead.
+ */
+function getDateRangeTypeToUse(dateRangeType, workWeekDays) {
+    if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {
+        var sortedWWDays = workWeekDays.slice().sort();
+        var isContiguous = true;
+        for (var i = 1; i < sortedWWDays.length; i++) {
+            if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {
+                isContiguous = false;
+                break;
+            }
+        }
+        if (!isContiguous || workWeekDays.length === 0) {
+            return DateRangeType.Week;
+        }
+    }
+    return dateRangeType;
+}
+//# sourceMappingURL=CalendarDayGrid.base.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { ICalendarDayGridProps } from './CalendarDayGrid.types';
+export declare const CalendarDayGrid: React.FunctionComponent<ICalendarDayGridProps>;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.js

@@ -0,0 +1,5 @@
+import { CalendarDayGridBase } from './CalendarDayGrid.base';
+import { styles } from './CalendarDayGrid.styles';
+import { styled } from '../../Utilities';
+export var CalendarDayGrid = styled(CalendarDayGridBase, styles, undefined, { scope: 'CalendarDayGrid' });
+//# sourceMappingURL=CalendarDayGrid.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarDayGrid.js","sourceRoot":"../src/","sources":["components/CalendarDayGrid/CalendarDayGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGzC,MAAM,CAAC,IAAM,eAAe,GAAmD,MAAM,CACnF,mBAAmB,EACnB,MAAM,EACN,SAAS,EACT,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAC7B,CAAC","sourcesContent":["import * as React from 'react';\nimport { CalendarDayGridBase } from './CalendarDayGrid.base';\nimport { styles } from './CalendarDayGrid.styles';\nimport { styled } from '../../Utilities';\nimport type { ICalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport const CalendarDayGrid: React.FunctionComponent<ICalendarDayGridProps> = styled(\n  CalendarDayGridBase,\n  styles,\n  undefined,\n  { scope: 'CalendarDayGrid' },\n);\n"]}

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.styles.d.ts

@@ -0,0 +1,2 @@
+import type { ICalendarDayGridStyleProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';
+export declare const styles: (props: ICalendarDayGridStyleProps) => ICalendarDayGridStyles;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.styles.js

@@ -0,0 +1,263 @@
+import { __assign } from "tslib";
+import { FontSizes, FontWeights, getFocusStyle, getGlobalClassNames, AnimationStyles, keyframes, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';
+import { DateRangeType } from '@fluentui/date-time-utilities';
+import { AnimationDirection } from '../Calendar/Calendar.types';
+var GlobalClassNames = {
+    hoverStyle: 'ms-CalendarDay-hoverStyle',
+    pressedStyle: 'ms-CalendarDay-pressedStyle',
+    dayIsTodayStyle: 'ms-CalendarDay-dayIsToday',
+    daySelectedStyle: 'ms-CalendarDay-daySelected',
+};
+var transitionRowDisappearance = keyframes({
+    '100%': {
+        width: 0,
+        height: 0,
+        overflow: 'hidden',
+    },
+    '99.9%': {
+        width: '100%',
+        height: 28,
+        overflow: 'visible',
+    },
+    '0%': {
+        width: '100%',
+        height: 28,
+        overflow: 'visible',
+    },
+});
+export var styles = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var theme = props.theme, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;
+    var palette = theme.palette;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    var rowAnimationStyle = {};
+    if (animateBackwards !== undefined) {
+        if (animationDirection === AnimationDirection.Horizontal) {
+            rowAnimationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;
+        }
+        else {
+            rowAnimationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;
+        }
+    }
+    var firstTransitionRowAnimationStyle = {};
+    var lastTransitionRowAnimationStyle = {};
+    if (animateBackwards !== undefined) {
+        if (animationDirection !== AnimationDirection.Horizontal) {
+            firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : AnimationStyles.slideUpOut20;
+            lastTransitionRowAnimationStyle = animateBackwards ? AnimationStyles.slideDownOut20 : { animationName: '' };
+        }
+    }
+    var disabledStyle = {
+        selectors: {
+            '&, &:disabled, & button': {
+                color: palette.neutralTertiaryAlt,
+                pointerEvents: 'none',
+            },
+        },
+    };
+    return {
+        wrapper: {
+            paddingBottom: 10,
+        },
+        table: [
+            {
+                textAlign: 'center',
+                borderCollapse: 'collapse',
+                borderSpacing: '0',
+                tableLayout: 'fixed',
+                fontSize: 'inherit',
+                marginTop: 4,
+                width: 196,
+                position: 'relative',
+                paddingBottom: 10,
+            },
+            showWeekNumbers && {
+                width: 226,
+            },
+        ],
+        dayCell: [
+            getFocusStyle(theme, { inset: -3 }),
+            {
+                margin: 0,
+                padding: 0,
+                width: 28,
+                height: 28,
+                lineHeight: 28,
+                fontSize: FontSizes.small,
+                fontWeight: FontWeights.regular,
+                color: palette.neutralPrimary,
+                cursor: 'pointer',
+                position: 'relative',
+                selectors: (_a = {},
+                    _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'transparent', zIndex: 0 }, getHighContrastNoAdjustStyle()),
+                    _a['&.' + classNames.hoverStyle] = {
+                        backgroundColor: palette.neutralLighter,
+                        selectors: (_b = {},
+                            _b[HighContrastSelector] = {
+                                zIndex: 3,
+                                backgroundColor: 'Window',
+                                outline: '1px solid Highlight',
+                            },
+                            _b),
+                    },
+                    _a['&.' + classNames.pressedStyle] = {
+                        backgroundColor: palette.neutralLight,
+                        selectors: (_c = {},
+                            _c[HighContrastSelector] = {
+                                borderColor: 'Highlight',
+                                color: 'Highlight',
+                                backgroundColor: 'Window',
+                            },
+                            _c),
+                    },
+                    _a['&.' + classNames.pressedStyle + '.' + classNames.hoverStyle] = {
+                        selectors: (_d = {},
+                            _d[HighContrastSelector] = {
+                                backgroundColor: 'Window',
+                                outline: '1px solid Highlight',
+                            },
+                            _d),
+                    },
+                    _a),
+            },
+        ],
+        daySelected: [
+            dateRangeType !== DateRangeType.Month && {
+                backgroundColor: palette.neutralLight + '!important',
+                selectors: (_e = {
+                        '&::before': {
+                            content: '""',
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                        }
+                    },
+                    _e['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle] = (_f = {
+                            backgroundColor: palette.neutralLight + '!important'
+                        },
+                        _f[HighContrastSelector] = {
+                            color: 'HighlightText!important',
+                            background: 'Highlight!important',
+                        },
+                        _f),
+                    _e[HighContrastSelector] = __assign({ background: 'Highlight!important', color: 'HighlightText!important', borderColor: 'Highlight!important' }, getHighContrastNoAdjustStyle()),
+                    _e),
+            },
+        ],
+        weekRow: rowAnimationStyle,
+        weekDayLabelCell: AnimationStyles.fadeIn200,
+        weekNumberCell: {
+            margin: 0,
+            padding: 0,
+            borderRight: '1px solid',
+            borderColor: palette.neutralLight,
+            backgroundColor: palette.neutralLighterAlt,
+            color: palette.neutralSecondary,
+            boxSizing: 'border-box',
+            width: 28,
+            height: 28,
+            fontWeight: FontWeights.regular,
+            fontSize: FontSizes.small,
+        },
+        dayOutsideBounds: disabledStyle,
+        dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {
+            color: palette.neutralSecondary,
+            fontWeight: FontWeights.regular,
+        },
+        dayButton: {
+            width: 24,
+            height: 24,
+            lineHeight: 24,
+            fontSize: FontSizes.small,
+            fontWeight: 'inherit',
+            borderRadius: 2,
+            border: 'none',
+            padding: 0,
+            color: 'inherit',
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            overflow: 'visible', // explicitly specify for IE11
+            selectors: {
+                span: {
+                    height: 'inherit',
+                    lineHeight: 'inherit',
+                },
+            },
+        },
+        dayIsToday: {
+            backgroundColor: palette.themePrimary + '!important',
+            borderRadius: '100%',
+            color: palette.white + '!important',
+            fontWeight: (FontWeights.semibold + '!important'),
+            selectors: (_g = {},
+                _g[HighContrastSelector] = __assign({ background: 'WindowText!important', color: 'Window!important', borderColor: 'WindowText!important' }, getHighContrastNoAdjustStyle()),
+                _g),
+        },
+        firstTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden' }, firstTransitionRowAnimationStyle), { animationName: firstTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),
+        lastTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden', marginTop: -28 }, lastTransitionRowAnimationStyle), { animationName: lastTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),
+        dayMarker: {
+            width: 4,
+            height: 4,
+            backgroundColor: palette.neutralSecondary,
+            borderRadius: '100%',
+            bottom: 1,
+            left: 0,
+            right: 0,
+            position: 'absolute',
+            margin: 'auto',
+            selectors: (_h = {},
+                _h['.' + classNames.dayIsTodayStyle + ' &'] = {
+                    backgroundColor: palette.white,
+                    selectors: (_j = {},
+                        _j[HighContrastSelector] = {
+                            backgroundColor: 'Window',
+                        },
+                        _j),
+                },
+                _h['.' + classNames.daySelectedStyle + ' &'] = {
+                    selectors: (_k = {},
+                        _k[HighContrastSelector] = {
+                            backgroundColor: 'HighlightText',
+                        },
+                        _k),
+                },
+                _h[HighContrastSelector] = __assign({ backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),
+                _h),
+        },
+        topRightCornerDate: {
+            borderTopRightRadius: '2px',
+        },
+        topLeftCornerDate: {
+            borderTopLeftRadius: '2px',
+        },
+        bottomRightCornerDate: {
+            borderBottomRightRadius: '2px',
+        },
+        bottomLeftCornerDate: {
+            borderBottomLeftRadius: '2px',
+        },
+        datesAbove: {
+            '&::before': {
+                borderTop: "1px solid ".concat(palette.neutralSecondary),
+            },
+        },
+        datesBelow: {
+            '&::before': {
+                borderBottom: "1px solid ".concat(palette.neutralSecondary),
+            },
+        },
+        datesLeft: {
+            '&::before': {
+                borderLeft: "1px solid ".concat(palette.neutralSecondary),
+            },
+        },
+        datesRight: {
+            '&::before': {
+                borderRight: "1px solid ".concat(palette.neutralSecondary),
+            },
+        },
+    };
+};
+//# sourceMappingURL=CalendarDayGrid.styles.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.d.ts

@@ -0,0 +1,265 @@
+import { AnimationDirection } from '../Calendar/Calendar.types';
+import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';
+import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities';
+import type { ICalendarStrings, IDateFormatting, IDayGridOptions } from '@fluentui/date-time-utilities';
+import type { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities';
+/**
+ * {@docCategory Calendar}
+ */
+export interface ICalendarDayGrid {
+    focus(): void;
+}
+/**
+ * {@docCategory Calendar}
+ */
+export interface ICalendarDayGridProps extends IDayGridOptions, IBaseProps<ICalendarDayGrid> {
+    /**
+     * Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<ICalendarDayGrid>;
+    /**
+     * Customized styles for the component.
+     */
+    styles?: IStyleFunctionOrObject<ICalendarDayGridStyleProps, ICalendarDayGridStyles>;
+    /**
+     * Theme (provided through customization).
+     */
+    theme?: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the CalendarDayGrid.
+     */
+    className?: string;
+    /**
+     * Localized strings to use in the CalendarDayGrid
+     */
+    strings: ICalendarStrings;
+    /**
+     * The currently selected date
+     */
+    selectedDate: Date;
+    /**
+     * The currently navigated date
+     */
+    navigatedDate: Date;
+    /**
+     * Callback issued when a date is selected
+     * @param date - The date the user selected
+     * @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
+     * for the component.
+     */
+    onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
+    /**
+     * Callback issued when a date in the calendar is navigated
+     * @param date - The date that is navigated to
+     * @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
+     */
+    onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
+    /**
+     * Callback issued when calendar day is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * The first day of the week for your locale.
+     * @defaultvalue DayOfWeek.Sunday
+     */
+    firstDayOfWeek: DayOfWeek;
+    /**
+     * Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
+     * FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
+     * @defaultvalue FirstWeekOfYear.FirstDay
+     */
+    firstWeekOfYear: FirstWeekOfYear;
+    /**
+     * The date range type indicating how  many days should be selected as the user
+     * selects days
+     * @defaultValue DateRangeType.Day
+     */
+    dateRangeType: DateRangeType;
+    /**
+     * The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
+     * views.
+     * @defaultValue 1
+     */
+    daysToSelectInDayView?: number;
+    /**
+     * Value of today. If unspecified, current time in client machine will be used.
+     */
+    today?: Date;
+    /**
+     * Whether the calendar should show the week number (weeks 1 to 53) before each week row
+     * @defaultvalue false
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Apply additional formatting to dates, for example localized date formatting.
+     */
+    dateTimeFormatter: IDateFormatting;
+    /**
+     * Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the
+     * specific day.
+     */
+    customDayCellRef?: (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => void;
+    /**
+     * How many weeks to show by default. If not provided, will show enough weeks to display the current
+     * month, between 4 and 6 depending
+     * @defaultvalue undefined
+     */
+    weeksToShow?: number;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date earlier than this value.
+     */
+    minDate?: Date;
+    /**
+     * If set the Calendar will not allow navigation to or selection of a date later than this value.
+     */
+    maxDate?: Date;
+    /**
+     * If set the Calendar will not allow selection of dates in this array.
+     */
+    restrictedDates?: Date[];
+    /**
+     * The days that are selectable when `dateRangeType` is WorkWeek.
+     * If `dateRangeType` is not WorkWeek this property does nothing.
+     * @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday]
+     */
+    workWeekDays?: DayOfWeek[];
+    /**
+     * Whether the close button should be shown or not
+     * @defaultvalue false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Allows all dates and buttons to be focused, including disabled ones
+     * @defaultvalue false
+     */
+    allFocusable?: boolean;
+    /**
+     * The ID of the control that labels this one
+     */
+    labelledBy?: string;
+    /**
+     * Whether to show days outside the selected month with lighter styles
+     * @defaultvalue true
+     */
+    lightenDaysOutsideNavigatedMonth?: boolean;
+    /**
+     * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
+     */
+    animationDirection?: AnimationDirection;
+    /**
+     * Optional callback function to mark specific days with a small symbol. Fires when the date range changes,
+     * gives the starting and ending displayed dates and expects the list of which days in between should be
+     * marked.
+     */
+    getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];
+}
+/**
+ * {@docCategory Calendar}
+ */
+export interface ICalendarDayGridStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Accept custom classNames
+     */
+    className?: string;
+    /**
+     * The date range type
+     */
+    dateRangeType?: DateRangeType;
+    /**
+     * Whether week numbers are being shown
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * Whether to show days outside the selected month with lighter styles
+     */
+    lightenDaysOutsideNavigatedMonth?: boolean;
+    /**
+     * Whether grid entering animation should be forwards or backwards
+     */
+    animateBackwards?: boolean;
+    /**
+     * The cardinal directions for animation to occur during transitions, either horizontal or vertical
+     */
+    animationDirection?: AnimationDirection;
+}
+/**
+ * {@docCategory Calendar}
+ */
+export interface ICalendarDayGridStyles {
+    /**
+     * The style for the root div
+     */
+    wrapper?: IStyle;
+    /**
+     * The style for the table containing the grid
+     */
+    table?: IStyle;
+    /**
+     * The style to apply to the grid cells for days
+     */
+    dayCell?: IStyle;
+    /**
+     * The style to apply to grid cells for days in the selected range
+     */
+    daySelected?: IStyle;
+    /**
+     * The style to apply to row around weeks
+     */
+    weekRow?: IStyle;
+    /**
+     * The style to apply to the column headers above the weeks
+     */
+    weekDayLabelCell?: IStyle;
+    /**
+     * The style to apply to grid cells for week numbers
+     */
+    weekNumberCell?: IStyle;
+    /**
+     * The style to apply to individual days that are outside the min/max date range
+     */
+    dayOutsideBounds?: IStyle;
+    /**
+     * The style to apply to individual days that are outside the current month
+     */
+    dayOutsideNavigatedMonth?: IStyle;
+    /**
+     * The style to apply to the button element within the day cells
+     */
+    dayButton?: IStyle;
+    /**
+     * The style to apply to the individual button element that matches the "today" parameter
+     */
+    dayIsToday?: IStyle;
+    /**
+     * The style applied to the first placeholder week used during transitions
+     */
+    firstTransitionWeek?: IStyle;
+    /**
+     * The style applied to the last placeholder week used during transitions
+     */
+    lastTransitionWeek?: IStyle;
+    /**
+     * The style applied to the marker on days to mark as important
+     */
+    dayMarker?: IStyle;
+    /**
+     * The styles to apply to days for rounded corners. Can apply multiple to round multiple corners
+     */
+    topRightCornerDate?: IStyle;
+    topLeftCornerDate?: IStyle;
+    bottomRightCornerDate?: IStyle;
+    bottomLeftCornerDate?: IStyle;
+    /**
+     * The styles to apply to days for focus borders. Can apply multiple if there are multiple focused days
+     * around the current focused date
+     */
+    datesAbove?: IStyle;
+    datesBelow?: IStyle;
+    datesLeft?: IStyle;
+    datesRight?: IStyle;
+}

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarDayGrid.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CalendarDayGrid.types.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridDayCell.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { IDayInfo } from './CalendarDayGrid.base';
+import type { ICalendarGridRowProps } from './CalendarGridRow';
+export interface ICalendarGridDayCellProps extends ICalendarGridRowProps {
+    day: IDayInfo;
+    dayIndex: number;
+}
+export declare const CalendarGridDayCell: React.FunctionComponent<ICalendarGridDayCellProps>;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridDayCell.js

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { KeyCodes, css, getRTLSafeKeyCode } from '@fluentui/utilities';
+import { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '@fluentui/date-time-utilities';
+export var CalendarGridDayCell = function (props) {
+    var _a;
+    var navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, allFocusable = props.allFocusable, strings = props.strings, activeDescendantId = props.activeDescendantId, navigatedDayRef = props.navigatedDayRef, calculateRoundedStyles = props.calculateRoundedStyles, weeks = props.weeks, classNames = props.classNames, day = props.day, dayIndex = props.dayIndex, weekIndex = props.weekIndex, weekCorners = props.weekCorners, ariaHidden = props.ariaHidden, customDayCellRef = props.customDayCellRef, dateRangeType = props.dateRangeType, daysToSelectInDayView = props.daysToSelectInDayView, onSelectDate = props.onSelectDate, restrictedDates = props.restrictedDates, minDate = props.minDate, maxDate = props.maxDate, onNavigateDate = props.onNavigateDate, getDayInfosInRangeOfDay = props.getDayInfosInRangeOfDay, getRefsFromDayInfos = props.getRefsFromDayInfos;
+    var cornerStyle = (_a = weekCorners === null || weekCorners === void 0 ? void 0 : weekCorners[weekIndex + '_' + dayIndex]) !== null && _a !== void 0 ? _a : '';
+    var isNavigatedDate = compareDates(navigatedDate, day.originalDate);
+    var navigateMonthEdge = function (ev, date) {
+        var targetDate = undefined;
+        var direction = 1; // by default search forward
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        if (ev.which === KeyCodes.up) {
+            targetDate = addWeeks(date, -1);
+            direction = -1;
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+        }
+        else if (ev.which === KeyCodes.down) {
+            targetDate = addWeeks(date, 1);
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+        }
+        else if (ev.which === getRTLSafeKeyCode(KeyCodes.left)) {
+            targetDate = addDays(date, -1);
+            direction = -1;
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+        }
+        else if (ev.which === getRTLSafeKeyCode(KeyCodes.right)) {
+            targetDate = addDays(date, 1);
+        }
+        if (!targetDate) {
+            // if we couldn't find a target date at all, do nothing
+            return;
+        }
+        var findAvailableDateOptions = {
+            initialDate: date,
+            targetDate: targetDate,
+            direction: direction,
+            restrictedDates: restrictedDates,
+            minDate: minDate,
+            maxDate: maxDate,
+        };
+        // target date is restricted, search in whatever direction until finding the next possible date,
+        // stopping at boundaries
+        var nextDate = findAvailableDate(findAvailableDateOptions);
+        if (!nextDate) {
+            // if no dates available in initial direction, try going backwards
+            findAvailableDateOptions.direction = -direction;
+            nextDate = findAvailableDate(findAvailableDateOptions);
+        }
+        // if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we
+        // don't jump the view unnecessarily
+        var isInCurrentView = weeks &&
+            nextDate &&
+            weeks.slice(1, weeks.length - 1).some(function (week) {
+                return week.some(function (dayToCompare) {
+                    return compareDates(dayToCompare.originalDate, nextDate);
+                });
+            });
+        if (isInCurrentView) {
+            return;
+        }
+        // else, fire navigation on the date to change the view to show it
+        if (nextDate) {
+            onNavigateDate(nextDate, true);
+            ev.preventDefault();
+        }
+    };
+    var onMouseOverDay = function (ev) {
+        var dayInfos = getDayInfosInRangeOfDay(day);
+        var dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach(function (dayRef, index) {
+            var _a;
+            if (dayRef) {
+                dayRef.classList.add('ms-CalendarDay-hoverStyle');
+                if (!dayInfos[index].isSelected &&
+                    dateRangeType === DateRangeType.Day &&
+                    daysToSelectInDayView &&
+                    daysToSelectInDayView > 1) {
+                    // remove the static classes first to overwrite them
+                    dayRef.classList.remove(classNames.bottomLeftCornerDate, classNames.bottomRightCornerDate, classNames.topLeftCornerDate, classNames.topRightCornerDate);
+                    var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();
+                    if (classNamesToAdd) {
+                        (_a = dayRef.classList).add.apply(_a, classNamesToAdd.split(' '));
+                    }
+                }
+            }
+        });
+    };
+    var onMouseDownDay = function (ev) {
+        var dayInfos = getDayInfosInRangeOfDay(day);
+        var dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach(function (dayRef) {
+            if (dayRef) {
+                dayRef.classList.add('ms-CalendarDay-pressedStyle');
+            }
+        });
+    };
+    var onMouseUpDay = function (ev) {
+        var dayInfos = getDayInfosInRangeOfDay(day);
+        var dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach(function (dayRef) {
+            if (dayRef) {
+                dayRef.classList.remove('ms-CalendarDay-pressedStyle');
+            }
+        });
+    };
+    var onMouseOutDay = function (ev) {
+        var dayInfos = getDayInfosInRangeOfDay(day);
+        var dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach(function (dayRef, index) {
+            var _a;
+            if (dayRef) {
+                dayRef.classList.remove('ms-CalendarDay-hoverStyle');
+                dayRef.classList.remove('ms-CalendarDay-pressedStyle');
+                if (!dayInfos[index].isSelected &&
+                    dateRangeType === DateRangeType.Day &&
+                    daysToSelectInDayView &&
+                    daysToSelectInDayView > 1) {
+                    var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();
+                    if (classNamesToAdd) {
+                        (_a = dayRef.classList).remove.apply(_a, classNamesToAdd.split(' '));
+                    }
+                }
+            }
+        });
+    };
+    var onDayKeyDown = function (ev) {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        if (ev.which === KeyCodes.enter) {
+            onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(day.originalDate);
+        }
+        else {
+            navigateMonthEdge(ev, day.originalDate);
+        }
+    };
+    var ariaLabel = day.originalDate.getDate() +
+        ', ' +
+        strings.months[day.originalDate.getMonth()] +
+        ', ' +
+        day.originalDate.getFullYear();
+    if (day.isMarked) {
+        ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
+    }
+    return (React.createElement("td", { className: css(classNames.dayCell, weekCorners && cornerStyle, day.isSelected && classNames.daySelected, day.isSelected && 'ms-CalendarDay-daySelected', !day.isInBounds && classNames.dayOutsideBounds, !day.isInMonth && classNames.dayOutsideNavigatedMonth), ref: function (element) {
+            customDayCellRef === null || customDayCellRef === void 0 ? void 0 : customDayCellRef(element, day.originalDate, classNames);
+            day.setRef(element);
+            isNavigatedDate && (navigatedDayRef.current = element);
+        }, "aria-hidden": ariaHidden, "aria-disabled": !ariaHidden && !day.isInBounds, onClick: day.isInBounds && !ariaHidden ? day.onSelected : undefined, onMouseOver: !ariaHidden ? onMouseOverDay : undefined, onMouseDown: !ariaHidden ? onMouseDownDay : undefined, onMouseUp: !ariaHidden ? onMouseUpDay : undefined, onMouseOut: !ariaHidden ? onMouseOutDay : undefined, onKeyDown: !ariaHidden ? onDayKeyDown : undefined, role: "gridcell", tabIndex: isNavigatedDate ? 0 : undefined, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined)) },
+        React.createElement("button", { key: day.key + 'button', "aria-hidden": ariaHidden, className: css(classNames.dayButton, day.isToday && classNames.dayIsToday, day.isToday && 'ms-CalendarDay-dayIsToday'), "aria-label": ariaLabel, id: isNavigatedDate ? activeDescendantId : undefined, disabled: !ariaHidden && !day.isInBounds, type: "button", tabIndex: -1, "data-is-focusable": "false" },
+            React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)),
+            day.isMarked && React.createElement("div", { "aria-hidden": "true", className: classNames.dayMarker }))));
+};
+//# sourceMappingURL=CalendarGridDayCell.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridRow.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';
+import type { IProcessedStyleSet } from '@fluentui/style-utilities';
+import type { IDayInfo, IWeekCorners } from './CalendarDayGrid.base';
+export interface ICalendarGridRowProps extends ICalendarDayGridProps {
+    classNames: IProcessedStyleSet<ICalendarDayGridStyles>;
+    weeks: IDayInfo[][];
+    week: IDayInfo[];
+    weekIndex: number;
+    weekCorners?: IWeekCorners;
+    ariaHidden?: boolean;
+    rowClassName?: string;
+    ariaRole?: string;
+    navigatedDayRef: React.MutableRefObject<HTMLTableCellElement>;
+    activeDescendantId: string;
+    calculateRoundedStyles(classNames: IProcessedStyleSet<ICalendarDayGridStyles>, above: boolean, below: boolean, left: boolean, right: boolean): string;
+    getDayInfosInRangeOfDay(dayToCompare: IDayInfo): IDayInfo[];
+    getRefsFromDayInfos(dayInfosInRange: IDayInfo[]): (HTMLElement | null)[];
+}
+export declare const CalendarGridRow: React.FunctionComponent<ICalendarGridRowProps>;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridRow.js

@@ -0,0 +1,19 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { format } from '@fluentui/utilities';
+import { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';
+import { CalendarGridDayCell } from './CalendarGridDayCell';
+export var CalendarGridRow = function (props) {
+    var classNames = props.classNames, week = props.week, weeks = props.weeks, weekIndex = props.weekIndex, rowClassName = props.rowClassName, ariaRole = props.ariaRole, showWeekNumbers = props.showWeekNumbers, firstDayOfWeek = props.firstDayOfWeek, firstWeekOfYear = props.firstWeekOfYear, navigatedDate = props.navigatedDate, strings = props.strings;
+    var weekNumbers = showWeekNumbers
+        ? getWeekNumbersInMonth(weeks.length, firstDayOfWeek, firstWeekOfYear, navigatedDate)
+        : null;
+    var titleString = weekNumbers
+        ? strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex])
+        : '';
+    return (React.createElement("tr", { role: ariaRole, className: rowClassName, key: weekIndex + '_' + week[0].key },
+        showWeekNumbers && weekNumbers && (React.createElement("th", { className: classNames.weekNumberCell, key: weekIndex, title: titleString, "aria-label": titleString, scope: "row" },
+            React.createElement("span", null, weekNumbers[weekIndex]))),
+        week.map(function (day, dayIndex) { return (React.createElement(CalendarGridDayCell, __assign({}, props, { key: day.key, day: day, dayIndex: dayIndex }))); })));
+};
+//# sourceMappingURL=CalendarGridRow.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarGridRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarGridRow.js","sourceRoot":"../src/","sources":["components/CalendarDayGrid/CalendarGridRow.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AA4B5D,MAAM,CAAC,IAAM,eAAe,GAAmD,UAAA,KAAK;IAEhF,IAAA,UAAU,GAWR,KAAK,WAXG,EACV,IAAI,GAUF,KAAK,KAVH,EACJ,KAAK,GASH,KAAK,MATF,EACL,SAAS,GAQP,KAAK,UARE,EACT,YAAY,GAOV,KAAK,aAPK,EACZ,QAAQ,GAMN,KAAK,SANC,EACR,eAAe,GAKb,KAAK,gBALQ,EACf,cAAc,GAIZ,KAAK,eAJO,EACd,eAAe,GAGb,KAAK,gBAHQ,EACf,aAAa,GAEX,KAAK,cAFM,EACb,OAAO,GACL,KAAK,QADA,CACC;IACV,IAAM,WAAW,GAAG,eAAe;QACjC,CAAC,CAAC,qBAAqB,CAAC,KAAM,CAAC,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,CAAC;QACtF,CAAC,CAAC,IAAI,CAAC;IAET,IAAM,WAAW,GAAG,WAAW;QAC7B,CAAC,CAAC,OAAO,CAAC,sBAAsB,IAAI,MAAM,CAAC,OAAO,CAAC,sBAAsB,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAClG,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL,4BAAI,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;QAC5E,eAAe,IAAI,WAAW,IAAI,CACjC,4BACE,SAAS,EAAE,UAAU,CAAC,cAAc,EACpC,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,gBACN,WAAW,EACvB,KAAK,EAAC,KAAK;YAEX,kCAAO,WAAW,CAAC,SAAS,CAAC,CAAQ,CAClC,CACN;QACA,IAAI,CAAC,GAAG,CAAC,UAAC,GAAa,EAAE,QAAgB,IAAK,OAAA,CAC7C,oBAAC,mBAAmB,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAC/E,EAF8C,CAE9C,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { format } from '@fluentui/utilities';\nimport { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';\nimport { CalendarGridDayCell } from './CalendarGridDayCell';\nimport type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\nimport type { IDayInfo, IWeekCorners } from './CalendarDayGrid.base';\n\nexport interface ICalendarGridRowProps extends ICalendarDayGridProps {\n  classNames: IProcessedStyleSet<ICalendarDayGridStyles>;\n  weeks: IDayInfo[][];\n  week: IDayInfo[];\n  weekIndex: number;\n  weekCorners?: IWeekCorners;\n  ariaHidden?: boolean;\n  rowClassName?: string;\n  ariaRole?: string;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  navigatedDayRef: React.MutableRefObject<HTMLTableCellElement>;\n  activeDescendantId: string;\n  calculateRoundedStyles(\n    classNames: IProcessedStyleSet<ICalendarDayGridStyles>,\n    above: boolean,\n    below: boolean,\n    left: boolean,\n    right: boolean,\n  ): string;\n  getDayInfosInRangeOfDay(dayToCompare: IDayInfo): IDayInfo[];\n  getRefsFromDayInfos(dayInfosInRange: IDayInfo[]): (HTMLElement | null)[];\n}\n\nexport const CalendarGridRow: React.FunctionComponent<ICalendarGridRowProps> = props => {\n  const {\n    classNames,\n    week,\n    weeks,\n    weekIndex,\n    rowClassName,\n    ariaRole,\n    showWeekNumbers,\n    firstDayOfWeek,\n    firstWeekOfYear,\n    navigatedDate,\n    strings,\n  } = props;\n  const weekNumbers = showWeekNumbers\n    ? getWeekNumbersInMonth(weeks!.length, firstDayOfWeek, firstWeekOfYear, navigatedDate)\n    : null;\n\n  const titleString = weekNumbers\n    ? strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex])\n    : '';\n\n  return (\n    <tr role={ariaRole} className={rowClassName} key={weekIndex + '_' + week[0].key}>\n      {showWeekNumbers && weekNumbers && (\n        <th\n          className={classNames.weekNumberCell}\n          key={weekIndex}\n          title={titleString}\n          aria-label={titleString}\n          scope=\"row\"\n        >\n          <span>{weekNumbers[weekIndex]}</span>\n        </th>\n      )}\n      {week.map((day: IDayInfo, dayIndex: number) => (\n        <CalendarGridDayCell {...props} key={day.key} day={day} dayIndex={dayIndex} />\n      ))}\n    </tr>\n  );\n};\n"]}

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';
+import type { IProcessedStyleSet } from '@fluentui/style-utilities';
+import type { IDayInfo } from './CalendarDayGrid.base';
+export interface ICalendarDayMonthHeaderRowProps extends ICalendarDayGridProps {
+    weeks: IDayInfo[][];
+    classNames: IProcessedStyleSet<ICalendarDayGridStyles>;
+}
+export declare const CalendarMonthHeaderRow: React.FunctionComponent<ICalendarDayMonthHeaderRowProps>;

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { css, findIndex } from '@fluentui/utilities';
+import { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';
+export var CalendarMonthHeaderRow = function (props) {
+    var showWeekNumbers = props.showWeekNumbers, strings = props.strings, firstDayOfWeek = props.firstDayOfWeek, allFocusable = props.allFocusable, weeksToShow = props.weeksToShow, weeks = props.weeks, classNames = props.classNames;
+    var dayLabels = strings.shortDays.slice();
+    var firstOfMonthIndex = findIndex(weeks[1], function (day) { return day.originalDate.getDate() === 1; });
+    if (weeksToShow === 1 && firstOfMonthIndex >= 0) {
+        // if we only show one week, replace the header with short month name
+        var firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;
+        dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks[1][firstOfMonthIndex].originalDate.getMonth()];
+    }
+    return (React.createElement("tr", null,
+        showWeekNumbers && React.createElement("th", { className: classNames.dayCell }),
+        dayLabels.map(function (val, index) {
+            var i = (index + firstDayOfWeek) % DAYS_IN_WEEK;
+            var label = strings.days[i];
+            return (React.createElement("th", { className: css(classNames.dayCell, classNames.weekDayLabelCell), scope: "col", key: dayLabels[i] + ' ' + index, title: label, "aria-label": label, "data-is-focusable": allFocusable ? true : undefined }, dayLabels[i]));
+        })));
+};
+//# sourceMappingURL=CalendarMonthHeaderRow.js.map

node_modules/@fluentui/react/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarMonthHeaderRow.js","sourceRoot":"../src/","sources":["components/CalendarDayGrid/CalendarMonthHeaderRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAU7D,MAAM,CAAC,IAAM,sBAAsB,GAA6D,UAAA,KAAK;IAC3F,IAAA,eAAe,GAA4E,KAAK,gBAAjF,EAAE,OAAO,GAAmE,KAAK,QAAxE,EAAE,cAAc,GAAmD,KAAK,eAAxD,EAAE,YAAY,GAAqC,KAAK,aAA1C,EAAE,WAAW,GAAwB,KAAK,YAA7B,EAAE,KAAK,GAAiB,KAAK,MAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IACzG,IAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;IAC5C,IAAM,iBAAiB,GAAG,SAAS,CAAC,KAAM,CAAC,CAAC,CAAC,EAAE,UAAC,GAAa,IAAK,OAAA,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,EAAhC,CAAgC,CAAC,CAAC;IACpG,IAAI,WAAW,KAAK,CAAC,IAAI,iBAAiB,IAAI,CAAC,EAAE,CAAC;QAChD,qEAAqE;QACrE,IAAM,uBAAuB,GAAG,CAAC,iBAAiB,GAAG,cAAc,CAAC,GAAG,YAAY,CAAC;QACpF,SAAS,CAAC,uBAAuB,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjH,CAAC;IAED,OAAO,CACL;QACG,eAAe,IAAI,4BAAI,SAAS,EAAE,UAAU,CAAC,OAAO,GAAI;QACxD,SAAS,CAAC,GAAG,CAAC,UAAC,GAAW,EAAE,KAAa;YACxC,IAAM,CAAC,GAAG,CAAC,KAAK,GAAG,cAAc,CAAC,GAAG,YAAY,CAAC;YAClD,IAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAC9B,OAAO,CACL,4BACE,SAAS,EAAE,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,gBAAgB,CAAC,EAC/D,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,EAC/B,KAAK,EAAE,KAAK,gBACA,KAAK,uBACE,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAEjD,SAAS,CAAC,CAAC,CAAC,CACV,CACN,CAAC;QACJ,CAAC,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { css, findIndex } from '@fluentui/utilities';\nimport { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';\nimport type { ICalendarDayGridProps, ICalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { IProcessedStyleSet } from '@fluentui/style-utilities';\nimport type { IDayInfo } from './CalendarDayGrid.base';\n\nexport interface ICalendarDayMonthHeaderRowProps extends ICalendarDayGridProps {\n  weeks: IDayInfo[][];\n  classNames: IProcessedStyleSet<ICalendarDayGridStyles>;\n}\n\nexport const CalendarMonthHeaderRow: React.FunctionComponent<ICalendarDayMonthHeaderRowProps> = props => {\n  const { showWeekNumbers, strings, firstDayOfWeek, allFocusable, weeksToShow, weeks, classNames } = props;\n  const dayLabels = strings.shortDays.slice();\n  const firstOfMonthIndex = findIndex(weeks![1], (day: IDayInfo) => day.originalDate.getDate() === 1);\n  if (weeksToShow === 1 && firstOfMonthIndex >= 0) {\n    // if we only show one week, replace the header with short month name\n    const firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;\n    dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks![1][firstOfMonthIndex].originalDate.getMonth()];\n  }\n\n  return (\n    <tr>\n      {showWeekNumbers && <th className={classNames.dayCell} />}\n      {dayLabels.map((val: string, index: number) => {\n        const i = (index + firstDayOfWeek) % DAYS_IN_WEEK;\n        const label = strings.days[i];\n        return (\n          <th\n            className={css(classNames.dayCell, classNames.weekDayLabelCell)}\n            scope=\"col\"\n            key={dayLabels[i] + ' ' + index}\n            title={label}\n            aria-label={label}\n            data-is-focusable={allFocusable ? true : undefined}\n          >\n            {dayLabels[i]}\n          </th>\n        );\n      })}\n    </tr>\n  );\n};\n"]}