@fluentui/react-calendar-compat 0.0.0-nightly-20231018-0416.1 → 0.0.1

package/lib/components/CalendarDayGrid/CalendarGridDayCell.js

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Enter } from '@fluentui/keyboard-keys';
+import { getRTLSafeKey } from '@fluentui/react-utilities';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { mergeClasses } from '@griffel/react';
+import { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '../../utils';
+import { weekCornersClassNames } from './useWeekCornerStyles.styles';
+import { extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles';
+/**
+ * @internal
+ */ export const CalendarGridDayCell = (props)=>{
+    const { navigatedDate, dateTimeFormatter, allFocusable, strings, activeDescendantId, navigatedDayRef, calculateRoundedStyles, weeks, classNames, day, dayIndex, weekIndex, weekCorners, ariaHidden, customDayCellRef, dateRangeType, daysToSelectInDayView, onSelectDate, restrictedDates, minDate, maxDate, onNavigateDate, getDayInfosInRangeOfDay, getRefsFromDayInfos } = props;
+    var _weekCorners_;
+    const cornerStyle = (_weekCorners_ = weekCorners === null || weekCorners === void 0 ? void 0 : weekCorners[weekIndex + '_' + dayIndex]) !== null && _weekCorners_ !== void 0 ? _weekCorners_ : '';
+    const isNavigatedDate = compareDates(navigatedDate, day.originalDate);
+    const { dir } = useFluent_unstable();
+    const navigateMonthEdge = (ev, date)=>{
+        let targetDate = undefined;
+        let direction = 1; // by default search forward
+        if (ev.key === ArrowUp) {
+            targetDate = addWeeks(date, -1);
+            direction = -1;
+        } else if (ev.key === ArrowDown) {
+            targetDate = addWeeks(date, 1);
+        } else if (ev.key === getRTLSafeKey(ArrowLeft, dir)) {
+            targetDate = addDays(date, -1);
+            direction = -1;
+        } else if (ev.key === getRTLSafeKey(ArrowRight, dir)) {
+            targetDate = addDays(date, 1);
+        }
+        if (!targetDate) {
+            // if we couldn't find a target date at all, do nothing
+            return;
+        }
+        const findAvailableDateOptions = {
+            initialDate: date,
+            targetDate,
+            direction,
+            restrictedDates,
+            minDate,
+            maxDate
+        };
+        // target date is restricted, search in whatever direction until finding the next possible date,
+        // stopping at boundaries
+        let 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
+        const isInCurrentView = weeks && nextDate && weeks.slice(1, weeks.length - 1).some((week)=>{
+            return week.some((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();
+        }
+    };
+    const onMouseOverDay = (ev)=>{
+        const dayInfos = getDayInfosInRangeOfDay(day);
+        const dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach((dayRef, index)=>{
+            if (dayRef) {
+                dayRef.classList.add(extraCalendarDayGridClassNames.hoverStyle);
+                if (!dayInfos[index].isSelected && dateRangeType === DateRangeType.Day && daysToSelectInDayView && daysToSelectInDayView > 1) {
+                    // remove the static classes first to overwrite them
+                    dayRef.classList.remove(weekCornersClassNames.bottomLeftCornerDate, weekCornersClassNames.bottomRightCornerDate, weekCornersClassNames.topLeftCornerDate, weekCornersClassNames.topRightCornerDate);
+                    const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();
+                    if (classNamesToAdd) {
+                        dayRef.classList.add(...classNamesToAdd);
+                    }
+                }
+            }
+        });
+    };
+    const onMouseDownDay = (ev)=>{
+        const dayInfos = getDayInfosInRangeOfDay(day);
+        const dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach((dayRef)=>{
+            if (dayRef) {
+                dayRef.classList.add(extraCalendarDayGridClassNames.pressedStyle);
+            }
+        });
+    };
+    const onMouseUpDay = (ev)=>{
+        const dayInfos = getDayInfosInRangeOfDay(day);
+        const dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach((dayRef)=>{
+            if (dayRef) {
+                dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);
+            }
+        });
+    };
+    const onMouseOutDay = (ev)=>{
+        const dayInfos = getDayInfosInRangeOfDay(day);
+        const dayRefs = getRefsFromDayInfos(dayInfos);
+        dayRefs.forEach((dayRef, index)=>{
+            if (dayRef) {
+                dayRef.classList.remove(extraCalendarDayGridClassNames.hoverStyle);
+                dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);
+                if (!dayInfos[index].isSelected && dateRangeType === DateRangeType.Day && daysToSelectInDayView && daysToSelectInDayView > 1) {
+                    const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();
+                    if (classNamesToAdd) {
+                        dayRef.classList.remove(...classNamesToAdd);
+                    }
+                }
+            }
+        });
+    };
+    const onDayKeyDown = (ev)=>{
+        if (ev.key === Enter) {
+            onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(day.originalDate);
+        } else {
+            navigateMonthEdge(ev, day.originalDate);
+        }
+    };
+    let ariaLabel = day.originalDate.getDate() + ', ' + strings.months[day.originalDate.getMonth()] + ', ' + day.originalDate.getFullYear();
+    if (day.isMarked) {
+        ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;
+    }
+    const isFocusable = !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined));
+    return /*#__PURE__*/ React.createElement("td", {
+        className: mergeClasses(classNames.dayCell, weekCorners && cornerStyle, day.isSelected && classNames.daySelected, !day.isInBounds && classNames.dayOutsideBounds, !day.isInMonth && classNames.dayOutsideNavigatedMonth),
+        ref: (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 || isFocusable ? 0 : undefined,
+        "aria-current": day.isToday ? 'date' : undefined,
+        "aria-selected": day.isInBounds ? day.isSelected : undefined
+    }, /*#__PURE__*/ React.createElement("button", {
+        key: day.key + 'button',
+        "aria-hidden": ariaHidden,
+        className: mergeClasses(classNames.dayButton, day.isToday && classNames.dayIsToday),
+        "aria-label": ariaLabel,
+        id: isNavigatedDate ? activeDescendantId : undefined,
+        disabled: !ariaHidden && !day.isInBounds,
+        type: "button",
+        tabIndex: -1
+    }, /*#__PURE__*/ React.createElement("span", {
+        "aria-hidden": "true"
+    }, dateTimeFormatter.formatDay(day.originalDate)), day.isMarked && /*#__PURE__*/ React.createElement("div", {
+        "aria-hidden": "true",
+        className: classNames.dayMarker
+    })));
+};

package/lib/components/CalendarDayGrid/CalendarGridDayCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarGridDayCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Enter } from '@fluentui/keyboard-keys';\nimport { getRTLSafeKey } from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '../../utils';\nimport { weekCornersClassNames } from './useWeekCornerStyles.styles';\nimport { extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles';\nimport type { AvailableDateOptions } from '../../utils';\nimport type { DayInfo } from './CalendarDayGrid';\nimport type { CalendarGridRowProps } from './CalendarGridRow';\n\n/**\n * @internal\n */\nexport interface CalendarGridDayCellProps extends CalendarGridRowProps {\n  day: DayInfo;\n  dayIndex: number;\n}\n\n/**\n * @internal\n */\nexport const CalendarGridDayCell: React.FunctionComponent<CalendarGridDayCellProps> = props => {\n  const {\n    navigatedDate,\n    dateTimeFormatter,\n    allFocusable,\n    strings,\n    activeDescendantId,\n    navigatedDayRef,\n    calculateRoundedStyles,\n    weeks,\n    classNames,\n    day,\n    dayIndex,\n    weekIndex,\n    weekCorners,\n    ariaHidden,\n    customDayCellRef,\n    dateRangeType,\n    daysToSelectInDayView,\n    onSelectDate,\n    restrictedDates,\n    minDate,\n    maxDate,\n    onNavigateDate,\n    getDayInfosInRangeOfDay,\n    getRefsFromDayInfos,\n  } = props;\n  const cornerStyle = weekCorners?.[weekIndex + '_' + dayIndex] ?? '';\n  const isNavigatedDate = compareDates(navigatedDate, day.originalDate);\n\n  const { dir } = useFluent_unstable();\n\n  const navigateMonthEdge = (ev: React.KeyboardEvent<HTMLElement>, date: Date): void => {\n    let targetDate: Date | undefined = undefined;\n    let direction = 1; // by default search forward\n\n    if (ev.key === ArrowUp) {\n      targetDate = addWeeks(date, -1);\n      direction = -1;\n    } else if (ev.key === ArrowDown) {\n      targetDate = addWeeks(date, 1);\n    } else if (ev.key === getRTLSafeKey(ArrowLeft, dir)) {\n      targetDate = addDays(date, -1);\n      direction = -1;\n    } else if (ev.key === getRTLSafeKey(ArrowRight, dir)) {\n      targetDate = addDays(date, 1);\n    }\n\n    if (!targetDate) {\n      // if we couldn't find a target date at all, do nothing\n      return;\n    }\n\n    const findAvailableDateOptions: AvailableDateOptions = {\n      initialDate: date,\n      targetDate,\n      direction,\n      restrictedDates,\n      minDate,\n      maxDate,\n    };\n\n    // target date is restricted, search in whatever direction until finding the next possible date,\n    // stopping at boundaries\n    let nextDate = findAvailableDate(findAvailableDateOptions);\n\n    if (!nextDate) {\n      // if no dates available in initial direction, try going backwards\n      findAvailableDateOptions.direction = -direction;\n      nextDate = findAvailableDate(findAvailableDateOptions);\n    }\n\n    // if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we\n    // don't jump the view unnecessarily\n    const isInCurrentView =\n      weeks &&\n      nextDate &&\n      weeks.slice(1, weeks.length - 1).some((week: DayInfo[]) => {\n        return week.some((dayToCompare: DayInfo) => {\n          return compareDates(dayToCompare.originalDate, nextDate!);\n        });\n      });\n    if (isInCurrentView) {\n      return;\n    }\n\n    // else, fire navigation on the date to change the view to show it\n    if (nextDate) {\n      onNavigateDate(nextDate, true);\n      ev.preventDefault();\n    }\n  };\n\n  const onMouseOverDay = (ev: React.MouseEvent<HTMLElement>) => {\n    const dayInfos = getDayInfosInRangeOfDay(day);\n    const dayRefs = getRefsFromDayInfos(dayInfos);\n\n    dayRefs.forEach((dayRef: HTMLElement | null, index: number) => {\n      if (dayRef) {\n        dayRef.classList.add(extraCalendarDayGridClassNames.hoverStyle);\n        if (\n          !dayInfos[index].isSelected &&\n          dateRangeType === DateRangeType.Day &&\n          daysToSelectInDayView &&\n          daysToSelectInDayView > 1\n        ) {\n          // remove the static classes first to overwrite them\n          dayRef.classList.remove(\n            weekCornersClassNames.bottomLeftCornerDate!,\n            weekCornersClassNames.bottomRightCornerDate!,\n            weekCornersClassNames.topLeftCornerDate!,\n            weekCornersClassNames.topRightCornerDate!,\n          );\n\n          const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();\n          if (classNamesToAdd) {\n            dayRef.classList.add(...classNamesToAdd);\n          }\n        }\n      }\n    });\n  };\n\n  const onMouseDownDay = (ev: React.MouseEvent<HTMLElement>) => {\n    const dayInfos = getDayInfosInRangeOfDay(day);\n    const dayRefs = getRefsFromDayInfos(dayInfos);\n\n    dayRefs.forEach((dayRef: HTMLElement | null) => {\n      if (dayRef) {\n        dayRef.classList.add(extraCalendarDayGridClassNames.pressedStyle);\n      }\n    });\n  };\n\n  const onMouseUpDay = (ev: React.MouseEvent<HTMLElement>) => {\n    const dayInfos = getDayInfosInRangeOfDay(day);\n    const dayRefs = getRefsFromDayInfos(dayInfos);\n\n    dayRefs.forEach((dayRef: HTMLElement | null) => {\n      if (dayRef) {\n        dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);\n      }\n    });\n  };\n\n  const onMouseOutDay = (ev: React.MouseEvent<HTMLElement>) => {\n    const dayInfos = getDayInfosInRangeOfDay(day);\n    const dayRefs = getRefsFromDayInfos(dayInfos);\n\n    dayRefs.forEach((dayRef: HTMLElement | null, index: number) => {\n      if (dayRef) {\n        dayRef.classList.remove(extraCalendarDayGridClassNames.hoverStyle);\n        dayRef.classList.remove(extraCalendarDayGridClassNames.pressedStyle);\n        if (\n          !dayInfos[index].isSelected &&\n          dateRangeType === DateRangeType.Day &&\n          daysToSelectInDayView &&\n          daysToSelectInDayView > 1\n        ) {\n          const classNamesToAdd = calculateRoundedStyles(false, false, index > 0, index < dayRefs.length - 1).trim();\n          if (classNamesToAdd) {\n            dayRef.classList.remove(...classNamesToAdd);\n          }\n        }\n      }\n    });\n  };\n\n  const onDayKeyDown = (ev: React.KeyboardEvent<HTMLElement>): void => {\n    if (ev.key === Enter) {\n      onSelectDate?.(day.originalDate);\n    } else {\n      navigateMonthEdge(ev, day.originalDate);\n    }\n  };\n\n  let ariaLabel =\n    day.originalDate.getDate() +\n    ', ' +\n    strings.months[day.originalDate.getMonth()] +\n    ', ' +\n    day.originalDate.getFullYear();\n\n  if (day.isMarked) {\n    ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;\n  }\n\n  const isFocusable = !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined));\n\n  return (\n    <td\n      className={mergeClasses(\n        classNames.dayCell,\n        weekCorners && cornerStyle,\n        day.isSelected && classNames.daySelected,\n        !day.isInBounds && classNames.dayOutsideBounds,\n        !day.isInMonth && classNames.dayOutsideNavigatedMonth,\n      )}\n      ref={(element: HTMLTableCellElement) => {\n        customDayCellRef?.(element, day.originalDate, classNames);\n        day.setRef(element);\n        isNavigatedDate && (navigatedDayRef.current = element);\n      }}\n      aria-hidden={ariaHidden}\n      aria-disabled={!ariaHidden && !day.isInBounds}\n      onClick={day.isInBounds && !ariaHidden ? day.onSelected : undefined}\n      onMouseOver={!ariaHidden ? onMouseOverDay : undefined}\n      onMouseDown={!ariaHidden ? onMouseDownDay : undefined}\n      onMouseUp={!ariaHidden ? onMouseUpDay : undefined}\n      onMouseOut={!ariaHidden ? onMouseOutDay : undefined}\n      onKeyDown={!ariaHidden ? onDayKeyDown : undefined}\n      role=\"gridcell\"\n      tabIndex={isNavigatedDate || isFocusable ? 0 : undefined}\n      aria-current={day.isToday ? 'date' : undefined}\n      aria-selected={day.isInBounds ? day.isSelected : undefined}\n    >\n      <button\n        key={day.key + 'button'}\n        aria-hidden={ariaHidden}\n        className={mergeClasses(classNames.dayButton, day.isToday && classNames.dayIsToday)}\n        aria-label={ariaLabel}\n        id={isNavigatedDate ? activeDescendantId : undefined}\n        disabled={!ariaHidden && !day.isInBounds}\n        type=\"button\"\n        tabIndex={-1}\n      >\n        <span aria-hidden=\"true\">{dateTimeFormatter.formatDay(day.originalDate)}</span>\n        {day.isMarked && <div aria-hidden=\"true\" className={classNames.dayMarker} />}\n      </button>\n    </td>\n  );\n};\n"],"names":["React","ArrowDown","ArrowLeft","ArrowRight","ArrowUp","Enter","getRTLSafeKey","useFluent_unstable","mergeClasses","addDays","addWeeks","compareDates","findAvailableDate","DateRangeType","weekCornersClassNames","extraCalendarDayGridClassNames","CalendarGridDayCell","props","navigatedDate","dateTimeFormatter","allFocusable","strings","activeDescendantId","navigatedDayRef","calculateRoundedStyles","weeks","classNames","day","dayIndex","weekIndex","weekCorners","ariaHidden","customDayCellRef","dateRangeType","daysToSelectInDayView","onSelectDate","restrictedDates","minDate","maxDate","onNavigateDate","getDayInfosInRangeOfDay","getRefsFromDayInfos","cornerStyle","isNavigatedDate","originalDate","dir","navigateMonthEdge","ev","date","targetDate","undefined","direction","key","findAvailableDateOptions","initialDate","nextDate","isInCurrentView","slice","length","some","week","dayToCompare","preventDefault","onMouseOverDay","dayInfos","dayRefs","forEach","dayRef","index","classList","add","hoverStyle","isSelected","Day","remove","bottomLeftCornerDate","bottomRightCornerDate","topLeftCornerDate","topRightCornerDate","classNamesToAdd","trim","onMouseDownDay","pressedStyle","onMouseUpDay","onMouseOutDay","onDayKeyDown","ariaLabel","getDate","months","getMonth","getFullYear","isMarked","dayMarkedAriaLabel","isFocusable","isInBounds","td","className","dayCell","daySelected","dayOutsideBounds","isInMonth","dayOutsideNavigatedMonth","ref","element","setRef","current","aria-hidden","aria-disabled","onClick","onSelected","onMouseOver","onMouseDown","onMouseUp","onMouseOut","onKeyDown","role","tabIndex","aria-current","isToday","aria-selected","button","dayButton","dayIsToday","aria-label","id","disabled","type","span","formatDay","div","dayMarker"],"mappings":"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"}

package/lib/components/CalendarDayGrid/CalendarGridRow.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getWeekNumbersInMonth } from '../../utils';
+import { CalendarGridDayCell } from './CalendarGridDayCell';
+/**
+ * @internal
+ */ export const CalendarGridRow = (props)=>{
+    const { classNames, week, weeks, weekIndex, rowClassName, ariaRole, showWeekNumbers, firstDayOfWeek, firstWeekOfYear, navigatedDate, strings } = props;
+    const weekNumbers = showWeekNumbers ? getWeekNumbersInMonth(weeks.length, firstDayOfWeek, firstWeekOfYear, navigatedDate) : null;
+    const titleString = weekNumbers ? strings.weekNumberFormatString && strings.weekNumberFormatString.replace('{0}', `${weekNumbers[weekIndex]}`) : '';
+    return /*#__PURE__*/ React.createElement("tr", {
+        role: ariaRole,
+        className: rowClassName,
+        key: weekIndex + '_' + week[0].key
+    }, showWeekNumbers && weekNumbers && /*#__PURE__*/ React.createElement("th", {
+        className: classNames.weekNumberCell,
+        key: weekIndex,
+        title: titleString,
+        "aria-label": titleString,
+        scope: "row"
+    }, /*#__PURE__*/ React.createElement("span", null, weekNumbers[weekIndex])), week.map((day, dayIndex)=>/*#__PURE__*/ React.createElement(CalendarGridDayCell, {
+            ...props,
+            key: day.key,
+            day: day,
+            dayIndex: dayIndex
+        })));
+};

package/lib/components/CalendarDayGrid/CalendarGridRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWeekNumbersInMonth } from '../../utils';\nimport { CalendarGridDayCell } from './CalendarGridDayCell';\nimport type { CalendarDayGridProps, CalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { DayInfo } from './CalendarDayGrid';\nimport type { WeekCorners } from './useWeekCornerStyles.styles';\n\n/**\n * @internal\n */\nexport interface CalendarGridRowProps extends CalendarDayGridProps {\n  classNames: CalendarDayGridStyles;\n  weeks: DayInfo[][];\n  week: DayInfo[];\n  weekIndex: number;\n  weekCorners?: WeekCorners;\n  ariaHidden?: boolean;\n  rowClassName?: string;\n  ariaRole?: string;\n  navigatedDayRef: React.MutableRefObject<HTMLTableCellElement>;\n  activeDescendantId: string;\n  calculateRoundedStyles(above: boolean, below: boolean, left: boolean, right: boolean): string;\n  getDayInfosInRangeOfDay(dayToCompare: DayInfo): DayInfo[];\n  getRefsFromDayInfos(dayInfosInRange: DayInfo[]): (HTMLElement | null)[];\n}\n\n/**\n * @internal\n */\nexport const CalendarGridRow: React.FunctionComponent<CalendarGridRowProps> = 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 && strings.weekNumberFormatString.replace('{0}', `${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: DayInfo, dayIndex: number) => (\n        <CalendarGridDayCell {...props} key={day.key} day={day} dayIndex={dayIndex} />\n      ))}\n    </tr>\n  );\n};\n"],"names":["React","getWeekNumbersInMonth","CalendarGridDayCell","CalendarGridRow","props","classNames","week","weeks","weekIndex","rowClassName","ariaRole","showWeekNumbers","firstDayOfWeek","firstWeekOfYear","navigatedDate","strings","weekNumbers","length","titleString","weekNumberFormatString","replace","tr","role","className","key","th","weekNumberCell","title","aria-label","scope","span","map","day","dayIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,mBAAmB,QAAQ,wBAAwB;AAwB5D;;CAEC,GACD,OAAO,MAAMC,kBAAiEC,CAAAA;IAC5E,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,aAAa,EACbC,OAAO,EACR,GAAGX;IACJ,MAAMY,cAAcL,kBAChBV,sBAAsBM,MAAOU,MAAM,EAAEL,gBAAgBC,iBAAiBC,iBACtE;IAEJ,MAAMI,cAAcF,cAChBD,QAAQI,sBAAsB,IAAIJ,QAAQI,sBAAsB,CAACC,OAAO,CAAC,OAAO,CAAC,EAAEJ,WAAW,CAACR,UAAU,CAAC,CAAC,IAC3G;IAEJ,qBACE,oBAACa;QAAGC,MAAMZ;QAAUa,WAAWd;QAAce,KAAKhB,YAAY,MAAMF,IAAI,CAAC,EAAE,CAACkB,GAAG;OAC5Eb,mBAAmBK,6BAClB,oBAACS;QACCF,WAAWlB,WAAWqB,cAAc;QACpCF,KAAKhB;QACLmB,OAAOT;QACPU,cAAYV;QACZW,OAAM;qBAEN,oBAACC,cAAMd,WAAW,CAACR,UAAU,IAGhCF,KAAKyB,GAAG,CAAC,CAACC,KAAcC,yBACvB,oBAAC/B;YAAqB,GAAGE,KAAK;YAAEoB,KAAKQ,IAAIR,GAAG;YAAEQ,KAAKA;YAAKC,UAAUA;;AAI1E,EAAE"}

package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { DAYS_IN_WEEK } from '../../utils';
+/**
+ * @internal
+ */ export const CalendarMonthHeaderRow = (props)=>{
+    const { showWeekNumbers, strings, firstDayOfWeek, allFocusable, weeksToShow, weeks, classNames } = props;
+    const dayLabels = strings.shortDays.slice();
+    let firstOfMonthIndex = -1;
+    const firstWeekOfMonth = weeks[1];
+    for(let i = 0; i < weeks[1].length; i++){
+        if (firstWeekOfMonth[i].originalDate.getDate() === 1) {
+            firstOfMonthIndex = i;
+            break;
+        }
+    }
+    if (weeksToShow === 1 && firstOfMonthIndex >= 0) {
+        // if we only show one week, replace the header with short month name
+        const firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;
+        dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks[1][firstOfMonthIndex].originalDate.getMonth()];
+    }
+    return /*#__PURE__*/ React.createElement("tr", null, showWeekNumbers && /*#__PURE__*/ React.createElement("th", {
+        className: classNames.dayCell
+    }), dayLabels.map((val, index)=>{
+        const i = (index + firstDayOfWeek) % DAYS_IN_WEEK;
+        const label = strings.days[i];
+        return /*#__PURE__*/ React.createElement("th", {
+            className: mergeClasses(classNames.dayCell, classNames.weekDayLabelCell),
+            scope: "col",
+            key: dayLabels[i] + ' ' + index,
+            title: label,
+            "aria-label": label,
+            tabIndex: allFocusable ? 0 : undefined
+        }, dayLabels[i]);
+    }));
+};

package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["CalendarMonthHeaderRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { DAYS_IN_WEEK } from '../../utils';\nimport type { CalendarDayGridProps, CalendarDayGridStyles } from './CalendarDayGrid.types';\nimport type { DayInfo } from './CalendarDayGrid';\n\n/**\n * @internal\n */\nexport interface CalendarDayMonthHeaderRowProps extends CalendarDayGridProps {\n  weeks: DayInfo[][];\n  classNames: CalendarDayGridStyles;\n}\n\n/**\n * @internal\n */\nexport const CalendarMonthHeaderRow: React.FunctionComponent<CalendarDayMonthHeaderRowProps> = props => {\n  const { showWeekNumbers, strings, firstDayOfWeek, allFocusable, weeksToShow, weeks, classNames } = props;\n  const dayLabels = strings.shortDays.slice();\n\n  let firstOfMonthIndex = -1;\n  const firstWeekOfMonth = weeks![1];\n  for (let i = 0; i < weeks![1].length; i++) {\n    if (firstWeekOfMonth[i].originalDate.getDate() === 1) {\n      firstOfMonthIndex = i;\n      break;\n    }\n  }\n\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={mergeClasses(classNames.dayCell, classNames.weekDayLabelCell)}\n            scope=\"col\"\n            key={dayLabels[i] + ' ' + index}\n            title={label}\n            aria-label={label}\n            tabIndex={allFocusable ? 0 : undefined}\n          >\n            {dayLabels[i]}\n          </th>\n        );\n      })}\n    </tr>\n  );\n};\n"],"names":["React","mergeClasses","DAYS_IN_WEEK","CalendarMonthHeaderRow","props","showWeekNumbers","strings","firstDayOfWeek","allFocusable","weeksToShow","weeks","classNames","dayLabels","shortDays","slice","firstOfMonthIndex","firstWeekOfMonth","i","length","originalDate","getDate","firstOfMonthIndexOffset","shortMonths","getMonth","tr","th","className","dayCell","map","val","index","label","days","weekDayLabelCell","scope","key","title","aria-label","tabIndex","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,YAAY,QAAQ,cAAc;AAY3C;;CAEC,GACD,OAAO,MAAMC,yBAAkFC,CAAAA;IAC7F,MAAM,EAAEC,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAEC,YAAY,EAAEC,WAAW,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGP;IACnG,MAAMQ,YAAYN,QAAQO,SAAS,CAACC,KAAK;IAEzC,IAAIC,oBAAoB,CAAC;IACzB,MAAMC,mBAAmBN,KAAM,CAAC,EAAE;IAClC,IAAK,IAAIO,IAAI,GAAGA,IAAIP,KAAM,CAAC,EAAE,CAACQ,MAAM,EAAED,IAAK;QACzC,IAAID,gBAAgB,CAACC,EAAE,CAACE,YAAY,CAACC,OAAO,OAAO,GAAG;YACpDL,oBAAoBE;YACpB;QACF;IACF;IAEA,IAAIR,gBAAgB,KAAKM,qBAAqB,GAAG;QAC/C,qEAAqE;QACrE,MAAMM,0BAA0B,AAACN,CAAAA,oBAAoBR,cAAa,IAAKL;QACvEU,SAAS,CAACS,wBAAwB,GAAGf,QAAQgB,WAAW,CAACZ,KAAM,CAAC,EAAE,CAACK,kBAAkB,CAACI,YAAY,CAACI,QAAQ,GAAG;IAChH;IAEA,qBACE,oBAACC,YACEnB,iCAAmB,oBAACoB;QAAGC,WAAWf,WAAWgB,OAAO;QACpDf,UAAUgB,GAAG,CAAC,CAACC,KAAaC;QAC3B,MAAMb,IAAI,AAACa,CAAAA,QAAQvB,cAAa,IAAKL;QACrC,MAAM6B,QAAQzB,QAAQ0B,IAAI,CAACf,EAAE;QAC7B,qBACE,oBAACQ;YACCC,WAAWzB,aAAaU,WAAWgB,OAAO,EAAEhB,WAAWsB,gBAAgB;YACvEC,OAAM;YACNC,KAAKvB,SAAS,CAACK,EAAE,GAAG,MAAMa;YAC1BM,OAAOL;YACPM,cAAYN;YACZO,UAAU9B,eAAe,IAAI+B;WAE5B3B,SAAS,CAACK,EAAE;IAGnB;AAGN,EAAE"}

package/lib/components/CalendarDayGrid/index.js

@@ -0,0 +1,4 @@
+export * from './CalendarDayGrid';
+export * from './CalendarDayGrid.types';
+export * from './useCalendarDayGridStyles.styles';
+export { calendarDayGridClassNames, extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles';

package/lib/components/CalendarDayGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CalendarDayGrid';\nexport * from './CalendarDayGrid.types';\nexport * from './useCalendarDayGridStyles.styles';\nexport { calendarDayGridClassNames, extraCalendarDayGridClassNames } from './useCalendarDayGridStyles.styles';\nexport type { WeekCorners } from './useWeekCornerStyles.styles';\n"],"names":["calendarDayGridClassNames","extraCalendarDayGridClassNames"],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,0BAA0B;AACxC,cAAc,oCAAoC;AAClD,SAASA,yBAAyB,EAAEC,8BAA8B,QAAQ,oCAAoC"}