@fluentui/react-calendar-compat 0.4.2 → 0.4.4

package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js

@@ -20,6 +20,8 @@ const _CalendarGridRow = require("./CalendarGridRow");
 const _useWeeks = require("./useWeeks");
 const _useWeekCornerStylesstyles = require("./useWeekCornerStyles.styles");
 const _react1 = require("@griffel/react");
+const _calendarMotions = require("../../utils/calendarMotions");
+const _Calendar = require("../../Calendar");
 function useDayRefs() {
     const daysRef = _react.useRef({});
     const getSetRefCallback = (dayKey)=>(element)=>{
@@ -102,7 +104,7 @@ const CalendarDayGrid = (props)=>{
         dayRefs = dayInfosInRange.map((dayInfo)=>daysRef.current[dayInfo.key]);
         return dayRefs;
     };
-    const { gridLabel, dateRangeType, showWeekNumbers, labelledBy, lightenDaysOutsideNavigatedMonth, animationDirection } = props;
+    const { gridLabel, dateRangeType, showWeekNumbers, labelledBy, lightenDaysOutsideNavigatedMonth, animationDirection = _Calendar.AnimationDirection.Vertical } = props;
     const classNames = (0, _useCalendarDayGridStylesstyles.useCalendarDayGridStyles_unstable)({
         animateBackwards,
         animationDirection,
@@ -125,6 +127,12 @@ const CalendarDayGrid = (props)=>{
     const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
         axis: 'grid-linear'
     });
+    const firstWeek = weeks[0];
+    const finalWeek = weeks[weeks.length - 1];
+    // Single navigation epoch for all rows in the grid. Derived from the first visible day's key
+    // (`Date.toString()`), which changes when the user navigates to a different month but stays
+    // stable across intra-month interactions (e.g. day selection).
+    const navigationEpoch = firstWeek[0].key;
     return /*#__PURE__*/ _react.createElement("table", {
         className: (0, _react1.mergeClasses)(classNames.table, props.className),
         "aria-multiselectable": "false",
@@ -137,30 +145,44 @@ const CalendarDayGrid = (props)=>{
         ...props,
         classNames: classNames,
         weeks: weeks
-    }), /*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
+    }), /*#__PURE__*/ _react.createElement(_calendarMotions.DirectionalSlideOut, {
+        edge: "first",
+        replayKey: navigationEpoch,
+        animationDirection: animationDirection,
+        animateBackwards: animateBackwards
+    }, /*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
         ...props,
         ...partialWeekProps,
-        week: weeks[0],
+        week: firstWeek,
         weekIndex: -1,
         rowClassName: classNames.firstTransitionWeek,
         "aria-role": "presentation",
         ariaHidden: true
-    }), weeks.slice(1, weeks.length - 1).map((week, weekIndex)=>/*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
+    })), weeks.slice(1, weeks.length - 1).map((week, weekIndex)=>/*#__PURE__*/ _react.createElement(_calendarMotions.DirectionalSlideIn, {
+            key: weekIndex,
+            replayKey: navigationEpoch,
+            animationDirection: animationDirection,
+            animateBackwards: animateBackwards
+        }, /*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
             ...props,
             ...partialWeekProps,
-            key: weekIndex,
             week: week,
             weekIndex: weekIndex,
             rowClassName: classNames.weekRow
-        })), /*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
+        }))), /*#__PURE__*/ _react.createElement(_calendarMotions.DirectionalSlideOut, {
+        edge: "last",
+        replayKey: navigationEpoch,
+        animationDirection: animationDirection,
+        animateBackwards: animateBackwards
+    }, /*#__PURE__*/ _react.createElement(_CalendarGridRow.CalendarGridRow, {
         ...props,
         ...partialWeekProps,
-        week: weeks[weeks.length - 1],
+        week: finalWeek,
         weekIndex: -2,
         rowClassName: classNames.lastTransitionWeek,
         "aria-role": "presentation",
         ariaHidden: true
-    })));
+    }))));
 };
 CalendarDayGrid.displayName = 'CalendarDayGrid';
 /**

package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport type { WeekCorners } from './useWeekCornerStyles.styles';\nimport { useWeekCornerStyles } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day, DayOfWeek } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\nexport interface DayInfo extends Day {\n  onSelected: () => void;\n  setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n  const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n  const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n    if (element === null) {\n      delete daysRef.current[dayKey];\n    } else {\n      daysRef.current[dayKey] = element;\n    }\n  };\n\n  return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n  const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n  React.useEffect(() => {\n    previousNavigatedDateRef.current = weeks[0][0].originalDate;\n  });\n  const previousNavigatedDate = previousNavigatedDateRef.current;\n\n  // eslint-disable-next-line react-hooks/refs\n  if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n    return undefined;\n    // eslint-disable-next-line react-hooks/refs\n  } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n    return false;\n  } else {\n    return true;\n  }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n  const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n    null,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n  ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n  const activeDescendantId = useId();\n\n  const onSelectDate = (selectedDate: Date): void => {\n    const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n    const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n    // eslint-disable-next-line react-hooks/immutability\n    let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n    dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n    dateRange = dateRange.filter((d: Date) => {\n      return !isRestrictedDate(d, restrictedDatesOptions);\n    });\n\n    props.onSelectDate?.(selectedDate, dateRange);\n    props.onNavigateDate?.(selectedDate, true);\n  };\n\n  const [daysRef, getSetRefCallback] = useDayRefs();\n\n  const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n  const animateBackwards = useAnimateBackwards(weeks);\n  const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        navigatedDayRef.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  /**\n   *\n   * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n   * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n   * to set classnames on all relevant child refs to apply the styling\n   *\n   */\n  const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n    // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n    const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n    // gets all the dates for the given date range type that are in the same date range as the given day\n    const dateRange = getDateRangeArray(\n      dayToCompare.originalDate,\n      dateRangeHoverType,\n      props.firstDayOfWeek,\n      props.workWeekDays,\n      props.daysToSelectInDayView,\n    ).map((date: Date) => date.getTime());\n\n    // gets all the day refs for the given dates\n    const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n      return accumulatedValue.concat(\n        currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n      );\n    }, []);\n\n    return dayInfosInRange;\n  };\n\n  const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n    let dayRefs: (HTMLElement | null)[] = [];\n    dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n    return dayRefs;\n  };\n\n  const {\n    gridLabel,\n    dateRangeType,\n    showWeekNumbers,\n    labelledBy,\n    lightenDaysOutsideNavigatedMonth,\n    animationDirection,\n  } = props;\n\n  const classNames = useCalendarDayGridStyles_unstable({\n    animateBackwards,\n    animationDirection,\n    dateRangeType,\n    lightenDaysOutsideNavigatedMonth:\n      lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n    showWeekNumbers,\n  });\n\n  // When the month is highlighted get the corner dates so that styles can be added to them\n  const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n  const partialWeekProps = {\n    weeks,\n    navigatedDayRef,\n    calculateRoundedStyles,\n    activeDescendantId,\n    classNames,\n    weekCorners,\n    getDayInfosInRangeOfDay,\n    getRefsFromDayInfos,\n  } as const;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid-linear' });\n\n  return (\n    <table\n      className={mergeClasses(classNames.table, props.className)}\n      aria-multiselectable=\"false\"\n      aria-label={gridLabel}\n      aria-labelledby={labelledBy}\n      aria-activedescendant={activeDescendantId}\n      role=\"grid\"\n      {...arrowNavigationAttributes}\n    >\n      <tbody>\n        <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n        <CalendarGridRow\n          {...props}\n          {...partialWeekProps}\n          week={weeks[0]}\n          weekIndex={-1}\n          rowClassName={classNames.firstTransitionWeek}\n          aria-role=\"presentation\"\n          ariaHidden={true}\n        />\n        {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n          <CalendarGridRow\n            {...props}\n            {...partialWeekProps}\n            key={weekIndex}\n            week={week}\n            weekIndex={weekIndex}\n            rowClassName={classNames.weekRow}\n          />\n        ))}\n        <CalendarGridRow\n          {...props}\n          {...partialWeekProps}\n          week={weeks![weeks!.length - 1]}\n          weekIndex={-2}\n          rowClassName={classNames.lastTransitionWeek}\n          aria-role=\"presentation\"\n          ariaHidden={true}\n        />\n      </tbody>\n    </table>\n  );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n  if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n    const sortedWWDays = workWeekDays.slice().sort();\n    let isContiguous = true;\n    for (let i = 1; i < sortedWWDays.length; i++) {\n      if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n        isContiguous = false;\n        break;\n      }\n    }\n\n    if (!isContiguous || workWeekDays.length === 0) {\n      return DateRangeType.Week;\n    }\n  }\n\n  return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","length","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarDayGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useId } from '@fluentui/react-utilities';\nimport { getBoundedDateRange, getDateRangeArray, isRestrictedDate, DateRangeType } from '../../utils';\nimport { useCalendarDayGridStyles_unstable } from './useCalendarDayGridStyles.styles';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nimport { useWeeks } from './useWeeks';\nimport type { WeekCorners } from './useWeekCornerStyles.styles';\nimport { useWeekCornerStyles } from './useWeekCornerStyles.styles';\nimport { mergeClasses } from '@griffel/react';\nimport type { Day, DayOfWeek } from '../../utils';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\nimport { DirectionalSlideIn, DirectionalSlideOut } from '../../utils/calendarMotions';\nimport { AnimationDirection } from '../../Calendar';\n\nexport interface DayInfo extends Day {\n  onSelected: () => void;\n  setRef(element: HTMLElement | null): void;\n}\n\nfunction useDayRefs() {\n  const daysRef = React.useRef<Record<string, HTMLElement>>({});\n\n  const getSetRefCallback = (dayKey: string) => (element: HTMLElement | null) => {\n    if (element === null) {\n      delete daysRef.current[dayKey];\n    } else {\n      daysRef.current[dayKey] = element;\n    }\n  };\n\n  return [daysRef, getSetRefCallback] as const;\n}\n\nfunction useAnimateBackwards(weeks: DayInfo[][]): boolean | undefined {\n  const previousNavigatedDateRef = React.useRef<Date | undefined>(undefined);\n  React.useEffect(() => {\n    previousNavigatedDateRef.current = weeks[0][0].originalDate;\n  });\n  const previousNavigatedDate = previousNavigatedDateRef.current;\n\n  // eslint-disable-next-line react-hooks/refs\n  if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n    return undefined;\n    // eslint-disable-next-line react-hooks/refs\n  } else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n    return false;\n  } else {\n    return true;\n  }\n}\n\nexport const CalendarDayGrid: React.FunctionComponent<CalendarDayGridProps> = props => {\n  const navigatedDayRef = React.useRef<HTMLTableCellElement>(\n    null,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n  ) as React.MutableRefObject<HTMLTableCellElement | null>;\n\n  const activeDescendantId = useId();\n\n  const onSelectDate = (selectedDate: Date): void => {\n    const { firstDayOfWeek, minDate, maxDate, workWeekDays, daysToSelectInDayView, restrictedDates } = props;\n    const restrictedDatesOptions = { minDate, maxDate, restrictedDates };\n\n    // eslint-disable-next-line react-hooks/immutability\n    let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n    dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n\n    dateRange = dateRange.filter((d: Date) => {\n      return !isRestrictedDate(d, restrictedDatesOptions);\n    });\n\n    props.onSelectDate?.(selectedDate, dateRange);\n    props.onNavigateDate?.(selectedDate, true);\n  };\n\n  const [daysRef, getSetRefCallback] = useDayRefs();\n\n  const weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n  const animateBackwards = useAnimateBackwards(weeks);\n\n  const [getWeekCornerStyles, calculateRoundedStyles] = useWeekCornerStyles(props);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        navigatedDayRef.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  /**\n   *\n   * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n   * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n   * to set classnames on all relevant child refs to apply the styling\n   *\n   */\n  const getDayInfosInRangeOfDay = (dayToCompare: DayInfo): DayInfo[] => {\n    // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n    const dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n\n    // gets all the dates for the given date range type that are in the same date range as the given day\n    const dateRange = getDateRangeArray(\n      dayToCompare.originalDate,\n      dateRangeHoverType,\n      props.firstDayOfWeek,\n      props.workWeekDays,\n      props.daysToSelectInDayView,\n    ).map((date: Date) => date.getTime());\n\n    // gets all the day refs for the given dates\n    const dayInfosInRange = weeks.reduce((accumulatedValue: DayInfo[], currentWeek: DayInfo[]) => {\n      return accumulatedValue.concat(\n        currentWeek.filter((weekDay: DayInfo) => dateRange.indexOf(weekDay.originalDate.getTime()) !== -1),\n      );\n    }, []);\n\n    return dayInfosInRange;\n  };\n\n  const getRefsFromDayInfos = (dayInfosInRange: DayInfo[]): (HTMLElement | null)[] => {\n    let dayRefs: (HTMLElement | null)[] = [];\n    dayRefs = dayInfosInRange.map((dayInfo: DayInfo) => daysRef.current[dayInfo.key]);\n\n    return dayRefs;\n  };\n\n  const {\n    gridLabel,\n    dateRangeType,\n    showWeekNumbers,\n    labelledBy,\n    lightenDaysOutsideNavigatedMonth,\n    animationDirection = AnimationDirection.Vertical,\n  } = props;\n\n  const classNames = useCalendarDayGridStyles_unstable({\n    animateBackwards,\n    animationDirection,\n    dateRangeType,\n    lightenDaysOutsideNavigatedMonth:\n      lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n    showWeekNumbers,\n  });\n\n  // When the month is highlighted get the corner dates so that styles can be added to them\n  const weekCorners: WeekCorners = getWeekCornerStyles(weeks!);\n  const partialWeekProps = {\n    weeks,\n    navigatedDayRef,\n    calculateRoundedStyles,\n    activeDescendantId,\n    classNames,\n    weekCorners,\n    getDayInfosInRangeOfDay,\n    getRefsFromDayInfos,\n  } as const;\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid-linear' });\n  const firstWeek = weeks[0];\n  const finalWeek = weeks![weeks!.length - 1];\n  // Single navigation epoch for all rows in the grid. Derived from the first visible day's key\n  // (`Date.toString()`), which changes when the user navigates to a different month but stays\n  // stable across intra-month interactions (e.g. day selection).\n  const navigationEpoch = firstWeek[0].key;\n\n  return (\n    <table\n      className={mergeClasses(classNames.table, props.className)}\n      aria-multiselectable=\"false\"\n      aria-label={gridLabel}\n      aria-labelledby={labelledBy}\n      aria-activedescendant={activeDescendantId}\n      role=\"grid\"\n      {...arrowNavigationAttributes}\n    >\n      <tbody>\n        <CalendarMonthHeaderRow {...props} classNames={classNames} weeks={weeks} />\n        <DirectionalSlideOut\n          edge=\"first\"\n          replayKey={navigationEpoch}\n          animationDirection={animationDirection}\n          animateBackwards={animateBackwards}\n        >\n          <CalendarGridRow\n            {...props}\n            {...partialWeekProps}\n            week={firstWeek}\n            weekIndex={-1}\n            rowClassName={classNames.firstTransitionWeek}\n            aria-role=\"presentation\"\n            ariaHidden={true}\n          />\n        </DirectionalSlideOut>\n        {weeks!.slice(1, weeks!.length - 1).map((week: DayInfo[], weekIndex: number) => (\n          <DirectionalSlideIn\n            key={weekIndex}\n            replayKey={navigationEpoch}\n            animationDirection={animationDirection}\n            animateBackwards={animateBackwards}\n          >\n            <CalendarGridRow\n              {...props}\n              {...partialWeekProps}\n              week={week}\n              weekIndex={weekIndex}\n              rowClassName={classNames.weekRow}\n            />\n          </DirectionalSlideIn>\n        ))}\n        <DirectionalSlideOut\n          edge=\"last\"\n          replayKey={navigationEpoch}\n          animationDirection={animationDirection}\n          animateBackwards={animateBackwards}\n        >\n          <CalendarGridRow\n            {...props}\n            {...partialWeekProps}\n            week={finalWeek}\n            weekIndex={-2}\n            rowClassName={classNames.lastTransitionWeek}\n            aria-role=\"presentation\"\n            ariaHidden={true}\n          />\n        </DirectionalSlideOut>\n      </tbody>\n    </table>\n  );\n};\nCalendarDayGrid.displayName = 'CalendarDayGrid';\n\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType: DateRangeType, workWeekDays: DayOfWeek[] | undefined): DateRangeType {\n  if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n    const sortedWWDays = workWeekDays.slice().sort();\n    let isContiguous = true;\n    for (let i = 1; i < sortedWWDays.length; i++) {\n      if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n        isContiguous = false;\n        break;\n      }\n    }\n\n    if (!isContiguous || workWeekDays.length === 0) {\n      return DateRangeType.Week;\n    }\n  }\n\n  return dateRangeType;\n}\n"],"names":["React","useArrowNavigationGroup","useId","getBoundedDateRange","getDateRangeArray","isRestrictedDate","DateRangeType","useCalendarDayGridStyles_unstable","CalendarMonthHeaderRow","CalendarGridRow","useWeeks","useWeekCornerStyles","mergeClasses","DirectionalSlideIn","DirectionalSlideOut","AnimationDirection","useDayRefs","daysRef","useRef","getSetRefCallback","dayKey","element","current","useAnimateBackwards","weeks","previousNavigatedDateRef","undefined","useEffect","originalDate","previousNavigatedDate","getTime","CalendarDayGrid","props","navigatedDayRef","activeDescendantId","onSelectDate","selectedDate","firstDayOfWeek","minDate","maxDate","workWeekDays","daysToSelectInDayView","restrictedDates","restrictedDatesOptions","dateRange","dateRangeType","filter","d","onNavigateDate","animateBackwards","getWeekCornerStyles","calculateRoundedStyles","useImperativeHandle","componentRef","focus","getDayInfosInRangeOfDay","dayToCompare","dateRangeHoverType","getDateRangeTypeToUse","map","date","dayInfosInRange","reduce","accumulatedValue","currentWeek","concat","weekDay","indexOf","getRefsFromDayInfos","dayRefs","dayInfo","key","gridLabel","showWeekNumbers","labelledBy","lightenDaysOutsideNavigatedMonth","animationDirection","Vertical","classNames","weekCorners","partialWeekProps","arrowNavigationAttributes","axis","firstWeek","finalWeek","length","navigationEpoch","table","className","aria-multiselectable","aria-label","aria-labelledby","aria-activedescendant","role","tbody","edge","replayKey","week","weekIndex","rowClassName","firstTransitionWeek","aria-role","ariaHidden","slice","weekRow","lastTransitionWeek","displayName","WorkWeek","sortedWWDays","sort","isContiguous","i","Week"],"mappings":"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"}

package/lib-commonjs/components/CalendarDayGrid/CalendarGridDayCell.js

@@ -19,7 +19,7 @@ const _utils = require("../../utils");
 const _useWeekCornerStylesstyles = require("./useWeekCornerStyles.styles");
 const _useCalendarDayGridStylesstyles = require("./useCalendarDayGridStyles.styles");
 const CalendarGridDayCell = (props)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize unknown function — manual opt-out to preserve runtime behavior
     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_ : '';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarGridDayCell.tsx"],"sourcesContent":["'use client';\n\nimport * 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  'use no memo';\n\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.trim().split(' '));\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.trim().split(' '));\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 && !day.isSingleSelected && classNames.daySelected,\n        day.isSingleSelected && classNames.daySingleSelected,\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-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        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 className={day.isToday ? mergeClasses(classNames.dayTodayMarker) : undefined}>\n          {dateTimeFormatter.formatDay(day.originalDate)}\n        </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","split","onMouseDownDay","pressedStyle","onMouseUpDay","onMouseOutDay","onDayKeyDown","ariaLabel","getDate","months","getMonth","getFullYear","isMarked","dayMarkedAriaLabel","isFocusable","isInBounds","td","className","dayCell","isSingleSelected","daySelected","daySingleSelected","dayOutsideBounds","isInMonth","dayOutsideNavigatedMonth","ref","element","setRef","current","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","dayTodayMarker","formatDay","div","aria-hidden","dayMarker"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarGridDayCell.tsx"],"sourcesContent":["'use client';\n\nimport * 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  'use no memo'; // justified: compiler would optimize unknown function — manual opt-out to preserve runtime behavior\n\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.trim().split(' '));\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.trim().split(' '));\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 && !day.isSingleSelected && classNames.daySelected,\n        day.isSingleSelected && classNames.daySingleSelected,\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-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        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 className={day.isToday ? mergeClasses(classNames.dayTodayMarker) : undefined}>\n          {dateTimeFormatter.formatDay(day.originalDate)}\n        </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","split","onMouseDownDay","pressedStyle","onMouseUpDay","onMouseOutDay","onDayKeyDown","ariaLabel","getDate","months","getMonth","getFullYear","isMarked","dayMarkedAriaLabel","isFocusable","isInBounds","td","className","dayCell","isSingleSelected","daySelected","daySingleSelected","dayOutsideBounds","isInMonth","dayOutsideNavigatedMonth","ref","element","setRef","current","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","dayTodayMarker","formatDay","div","aria-hidden","dayMarker"],"mappings":"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"}

package/lib-commonjs/components/CalendarDayGrid/CalendarGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -12,18 +13,17 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _utils = require("../../utils");
 const _CalendarGridDayCell = require("./CalendarGridDayCell");
-const CalendarGridRow = (props)=>{
+const CalendarGridRow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const { ariaHidden, classNames, week, weeks, weekIndex, rowClassName, ariaRole, showWeekNumbers, firstDayOfWeek, firstWeekOfYear, navigatedDate, strings } = props;
     const weekNumbers = showWeekNumbers ? (0, _utils.getWeekNumbersInMonth)(weeks.length, firstDayOfWeek, firstWeekOfYear, navigatedDate) : null;
     const titleString = weekNumbers ? strings.weekNumberFormatString && strings.weekNumberFormatString.replace('{0}', `${weekNumbers[weekIndex]}`) : '';
     return /*#__PURE__*/ _react.createElement("tr", {
+        ref: ref,
         role: ariaRole,
         "aria-hidden": ariaHidden,
-        className: rowClassName,
-        key: weekIndex + '_' + week[0].key
+        className: rowClassName
     }, showWeekNumbers && weekNumbers && /*#__PURE__*/ _react.createElement("th", {
         className: classNames.weekNumberCell,
-        key: weekIndex,
         title: titleString,
         "aria-label": titleString,
         scope: "row"
@@ -33,4 +33,5 @@ const CalendarGridRow = (props)=>{
             day: day,
             dayIndex: dayIndex
         })));
-};
+});
+CalendarGridRow.displayName = 'CalendarGridRow';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/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  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  navigatedDayRef: React.MutableRefObject<HTMLTableCellElement | null>;\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    ariaHidden,\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} aria-hidden={ariaHidden} 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","ariaHidden","classNames","week","weeks","weekIndex","rowClassName","ariaRole","showWeekNumbers","firstDayOfWeek","firstWeekOfYear","navigatedDate","strings","weekNumbers","length","titleString","weekNumberFormatString","replace","tr","role","aria-hidden","className","key","th","weekNumberCell","title","aria-label","scope","span","map","day","dayIndex"],"mappings":";;;;+BA8BaG;;;;;;;iEA9BU,QAAQ;uBACO,cAAc;qCAChB,wBAAwB;AA4BrD,wBAAuEC,CAAAA;IAC5E,MAAM,EACJC,UAAU,EACVC,UAAU,EACVC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,aAAa,EACbC,OAAO,EACR,GAAGZ;IACJ,MAAMa,cAAcL,sBAChBX,4BAAAA,EAAsBO,MAAOU,MAAM,EAAEL,gBAAgBC,iBAAiBC,iBACtE;IAEJ,MAAMI,cAAcF,cAChBD,QAAQI,sBAAsB,IAAIJ,QAAQI,sBAAsB,CAACC,OAAO,CAAC,OAAO,GAAGJ,WAAW,CAACR,UAAU,EAAE,IAC3G;IAEJ,OAAA,WAAA,GACE,OAAA,aAAA,CAACa,MAAAA;QAAGC,MAAMZ;QAAUa,eAAanB;QAAYoB,WAAWf;QAAcgB,KAAKjB,YAAY,MAAMF,IAAI,CAAC,EAAE,CAACmB,GAAG;OACrGd,mBAAmBK,eAAAA,WAAAA,GAClB,OAAA,aAAA,CAACU,MAAAA;QACCF,WAAWnB,WAAWsB,cAAc;QACpCF,KAAKjB;QACLoB,OAAOV;QACPW,cAAYX;QACZY,OAAM;qBAEN,OAAA,aAAA,CAACC,QAAAA,MAAMf,WAAW,CAACR,UAAU,IAGhCF,KAAK0B,GAAG,CAAC,CAACC,KAAcC,WAAAA,WAAAA,GACvB,OAAA,aAAA,CAACjC,wCAAAA,EAAAA;YAAqB,GAAGE,KAAK;YAAEsB,KAAKQ,IAAIR,GAAG;YAAEQ,KAAKA;YAAKC,UAAUA;;AAI1E,EAAE"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarGridRow.tsx"],"sourcesContent":["'use client';\n\nimport * 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  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  navigatedDayRef: React.MutableRefObject<HTMLTableCellElement | null>;\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.forwardRef<HTMLTableRowElement, CalendarGridRowProps>((props, ref) => {\n  const {\n    ariaHidden,\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 ref={ref} role={ariaRole} aria-hidden={ariaHidden} className={rowClassName}>\n      {showWeekNumbers && weekNumbers && (\n        <th className={classNames.weekNumberCell} title={titleString} aria-label={titleString} scope=\"row\">\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\nCalendarGridRow.displayName = 'CalendarGridRow';\n"],"names":["React","getWeekNumbersInMonth","CalendarGridDayCell","CalendarGridRow","forwardRef","props","ref","ariaHidden","classNames","week","weeks","weekIndex","rowClassName","ariaRole","showWeekNumbers","firstDayOfWeek","firstWeekOfYear","navigatedDate","strings","weekNumbers","length","titleString","weekNumberFormatString","replace","tr","role","aria-hidden","className","th","weekNumberCell","title","aria-label","scope","span","map","day","dayIndex","key","displayName"],"mappings":"AAAA;;;;;+BAgCaG;;;;;;;iEA9BU,QAAQ;uBACO,cAAc;qCAChB,wBAAwB;AA4BrD,wBAAMA,WAAAA,GAAkBH,OAAMI,UAAU,CAA4C,CAACC,OAAOC;IACjG,MAAM,EACJC,UAAU,EACVC,UAAU,EACVC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,QAAQ,EACRC,eAAe,EACfC,cAAc,EACdC,eAAe,EACfC,aAAa,EACbC,OAAO,EACR,GAAGb;IACJ,MAAMc,cAAcL,kBAChBb,gCAAAA,EAAsBS,MAAOU,MAAM,EAAEL,gBAAgBC,iBAAiBC,iBACtE;IAEJ,MAAMI,cAAcF,cAChBD,QAAQI,sBAAsB,IAAIJ,QAAQI,sBAAsB,CAACC,OAAO,CAAC,OAAO,GAAGJ,WAAW,CAACR,UAAU,EAAE,IAC3G;IAEJ,OAAA,WAAA,GACE,OAAA,aAAA,CAACa,MAAAA;QAAGlB,KAAKA;QAAKmB,MAAMZ;QAAUa,eAAanB;QAAYoB,WAAWf;OAC/DE,mBAAmBK,eAAAA,WAAAA,GAClB,OAAA,aAAA,CAACS,MAAAA;QAAGD,WAAWnB,WAAWqB,cAAc;QAAEC,OAAOT;QAAaU,cAAYV;QAAaW,OAAM;qBAC3F,OAAA,aAAA,CAACC,QAAAA,MAAMd,WAAW,CAACR,UAAU,IAGhCF,KAAKyB,GAAG,CAAC,CAACC,KAAcC,WAAAA,WAAAA,GACvB,OAAA,aAAA,CAAClC,wCAAAA,EAAAA;YAAqB,GAAGG,KAAK;YAAEgC,KAAKF,IAAIE,GAAG;YAAEF,KAAKA;YAAKC,UAAUA;;AAI1E,GAAG;AAEHjC,gBAAgBmC,WAAW,GAAG"}

package/lib-commonjs/components/CalendarDayGrid/CalendarMonthHeaderRow.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, "CalendarMonthHeaderRow", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _react1 = require("@griffel/react");
+const _reactmotion = require("@fluentui/react-motion");
+const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const _utils = require("../../utils");
 const CalendarMonthHeaderRow = (props)=>{
     const { showWeekNumbers, strings, firstDayOfWeek, allFocusable, weeksToShow, weeks, classNames } = props;
@@ -33,13 +35,17 @@ const CalendarMonthHeaderRow = (props)=>{
     }), dayLabels.map((val, index)=>{
         const i = (index + firstDayOfWeek) % _utils.DAYS_IN_WEEK;
         const label = strings.days[i];
-        return /*#__PURE__*/ _react.createElement("th", {
+        return(// plays once on mount. The only remount is in single-week view, when a label is swapped
+        // for a short month name.
+        /*#__PURE__*/ _react.createElement(_reactmotioncomponentspreview.Fade.In, {
+            key: dayLabels[i] + ' ' + index,
+            duration: _reactmotion.motionTokens.durationGentle
+        }, /*#__PURE__*/ _react.createElement("th", {
             className: (0, _react1.mergeClasses)(classNames.dayCell, classNames.weekDayLabelCell),
             scope: "col",
-            key: dayLabels[i] + ' ' + index,
             title: label,
             "aria-label": label,
             tabIndex: allFocusable ? 0 : undefined
-        }, dayLabels[i]);
+        }, dayLabels[i])));
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/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":";;;;+BAiBaG;;;;;;;iEAjBU,QAAQ;wBACF,iBAAiB;uBACjB,cAAc;AAepC,+BAAwFC,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,0BAA2BN,qBAAoBR,cAAAA,CAAa,GAAKL,mBAAAA;QACvEU,SAAS,CAACS,wBAAwB,GAAGf,QAAQgB,WAAW,CAACZ,KAAM,CAAC,EAAE,CAACK,kBAAkB,CAACI,YAAY,CAACI,QAAQ,GAAG;IAChH;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACC,MAAAA,MACEnB,mBAAAA,WAAAA,GAAmB,OAAA,aAAA,CAACoB,MAAAA;QAAGC,WAAWf,WAAWgB,OAAO;QACpDf,UAAUgB,GAAG,CAAC,CAACC,KAAaC;QAC3B,MAAMb,IAAKa,CAAAA,QAAQvB,cAAAA,CAAa,GAAKL,mBAAAA;QACrC,MAAM6B,QAAQzB,QAAQ0B,IAAI,CAACf,EAAE;QAC7B,OAAA,WAAA,GACE,OAAA,aAAA,CAACQ,MAAAA;YACCC,eAAWzB,oBAAAA,EAAaU,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"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/CalendarMonthHeaderRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { motionTokens } from '@fluentui/react-motion';\nimport { Fade } from '@fluentui/react-motion-components-preview';\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          // Plain list key, not a `replayKey`: day labels are stable across navigation so the fade\n          // plays once on mount. The only remount is in single-week view, when a label is swapped\n          // for a short month name.\n          <Fade.In key={dayLabels[i] + ' ' + index} duration={motionTokens.durationGentle}>\n            <th\n              className={mergeClasses(classNames.dayCell, classNames.weekDayLabelCell)}\n              scope=\"col\"\n              title={label}\n              aria-label={label}\n              tabIndex={allFocusable ? 0 : undefined}\n            >\n              {dayLabels[i]}\n            </th>\n          </Fade.In>\n        );\n      })}\n    </tr>\n  );\n};\n"],"names":["React","mergeClasses","motionTokens","Fade","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","In","key","duration","durationGentle","weekDayLabelCell","scope","title","aria-label","tabIndex","undefined"],"mappings":";;;;+BAmBaK;;;;;;;iEAnBU,QAAQ;wBACF,iBAAiB;6BACjB,yBAAyB;8CACjC,4CAA4C;uBACpC,cAAc;AAepC,+BAAwFC,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,0BAA2BN,CAAAA,oBAAoBR,cAAAA,CAAa,GAAKL,mBAAAA;QACvEU,SAAS,CAACS,wBAAwB,GAAGf,QAAQgB,WAAW,CAACZ,KAAM,CAAC,EAAE,CAACK,kBAAkB,CAACI,YAAY,CAACI,QAAQ,GAAG;IAChH;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACC,MAAAA,MACEnB,mBAAAA,WAAAA,GAAmB,OAAA,aAAA,CAACoB,MAAAA;QAAGC,WAAWf,WAAWgB,OAAO;QACpDf,UAAUgB,GAAG,CAAC,CAACC,KAAaC;QAC3B,MAAMb,IAAKa,CAAAA,QAAQvB,cAAAA,CAAa,GAAKL,mBAAAA;QACrC,MAAM6B,QAAQzB,QAAQ0B,IAAI,CAACf,EAAE;QAC7B,OACE,AACA,wFAAwF,CADC;QAEzF,0BAA0B;sBAC1B,OAAA,aAAA,CAAChB,kCAAAA,CAAKgC,EAAE,EAAA;YAACC,KAAKtB,SAAS,CAACK,EAAE,GAAG,MAAMa;YAAOK,UAAUnC,yBAAAA,CAAaoC,cAAc;yBAC7E,OAAA,aAAA,CAACX,MAAAA;YACCC,eAAW3B,oBAAAA,EAAaY,WAAWgB,OAAO,EAAEhB,WAAW0B,gBAAgB;YACvEC,OAAM;YACNC,OAAOR;YACPS,cAAYT;YACZU,UAAUjC,eAAe,IAAIkC;WAE5B9B,SAAS,CAACK,EAAE;IAIrB;AAGN,EAAE"}

package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js

@@ -21,7 +21,6 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
-const _Calendartypes = require("../Calendar/Calendar.types");
 const calendarDayGridClassNames = {
     wrapper: 'fui-CalendarDayGrid__wrapper',
     table: 'fui-CalendarDayGrid__table',
@@ -516,70 +515,22 @@ const useWeekRowStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
         qhf8xq: "f10pi13n",
         mlyf9c: "f1gazwyt"
-    },
-    animation: {
-        vin17d: "f5f2jbu",
-        Bf5fcs: "fywypte",
-        Ezkn3b: "f1ee2ue"
-    },
-    horizontalBackward: {
-        Bv12yb3: [
-            "f1o9w3l8",
-            "f1kwjajc"
-        ]
-    },
-    horizontalForward: {
-        Bv12yb3: [
-            "f1kwjajc",
-            "f1o9w3l8"
-        ]
-    },
-    verticalBackward: {
-        Bv12yb3: "fgl3yn7"
-    },
-    verticalForward: {
-        Bv12yb3: "faiu5ye"
     }
 }, {
     d: [
-        ".f10pi13n{position:relative;}",
-        ".f5f2jbu{animation-duration:0.367s;}",
-        ".fywypte{animation-fill-mode:both;}",
-        ".f1ee2ue{animation-timing-function:cubic-bezier(.1,.9,.2,1);}",
-        ".f1o9w3l8{animation-name:f5j8bii,f2lgmc3;}",
-        ".f1kwjajc{animation-name:f5j8bii,fpktcv7;}",
-        ".fgl3yn7{animation-name:f5j8bii,f3bv9km;}",
-        ".faiu5ye{animation-name:f5j8bii,funtx0y;}"
+        ".f10pi13n{position:relative;}"
     ],
     w: [
         ".f1gazwyt:focus-within{z-index:1;}"
-    ],
-    k: [
-        "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}",
-        "@keyframes f2lgmc3{from{pointer-events:none;transform:translate3d(-20px, 0, 0);}to{pointer-events:auto;transform:translate3d(0, 0, 0);}}",
-        "@keyframes fpktcv7{from{pointer-events:none;transform:translate3d(20px, 0, 0);}to{pointer-events:auto;transform:translate3d(0, 0, 0);}}",
-        "@keyframes f3bv9km{from{pointer-events:none;transform:translate3d(0, -20px, 0);}to{pointer-events:auto;transform:translate3d(0, 0, 0);}}",
-        "@keyframes funtx0y{from{pointer-events:none;transform:translate3d(0, 20px, 0);}to{pointer-events:auto;transform:translate3d(0, 0, 0);}}"
     ]
 });
 const useWeekDayLabelCellStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
-        famaaq: "f1xqy1su",
-        vin17d: "fhsqnsn",
-        Bf5fcs: "fywypte",
-        Bv12yb3: "f1h7u52p",
-        Ezkn3b: "fjq4c94"
+        famaaq: "f1xqy1su"
     }
 }, {
     d: [
-        ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
-        ".fhsqnsn{animation-duration:0.267s;}",
-        ".fywypte{animation-fill-mode:both;}",
-        ".f1h7u52p{animation-name:f5j8bii;}",
-        ".fjq4c94{animation-timing-function:cubic-bezier(.1,.25,.75,.9);}"
-    ],
-    k: [
-        "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}"
+        ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;user-select:none;}"
     ]
 });
 const useWeekNumberCellStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -888,23 +839,15 @@ const useDayTodayMarkerStyles = /*#__PURE__*/ (0, _react.__styles)({
 });
 const useFirstTransitionWeekStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
-        Bqenvij: "fniina8",
         abs64n: "fk73vx1",
         B68tc82: 0,
         Bmxbyg5: 0,
         Bpg54ce: "f1a3p1vp",
-        qhf8xq: "f1euv43f",
-        a9b677: "f3tsq5r"
-    },
-    verticalForward: {
-        vin17d: "f5f2jbu",
-        Bf5fcs: "fywypte",
-        Bv12yb3: "fupj2f5",
-        Ezkn3b: "f1ee2ue"
+        Bkecrkj: "f1aehjj5",
+        qhf8xq: "f1euv43f"
     }
 }, {
     d: [
-        ".fniina8{height:0;}",
         ".fk73vx1{opacity:0;}",
         [
             ".f1a3p1vp{overflow:hidden;}",
@@ -912,39 +855,22 @@ const useFirstTransitionWeekStyles = /*#__PURE__*/ (0, _react.__styles)({
                 p: -1
             }
         ],
-        ".f1euv43f{position:absolute;}",
-        ".f3tsq5r{width:0;}",
-        ".f5f2jbu{animation-duration:0.367s;}",
-        ".fywypte{animation-fill-mode:both;}",
-        ".fupj2f5{animation-name:f199e34v,f76svrd,f13agkrc;}",
-        ".f1ee2ue{animation-timing-function:cubic-bezier(.1,.9,.2,1);}"
-    ],
-    k: [
-        "@keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}",
-        "@keyframes f76svrd{from{transform:translate3d(0, 0, 0);}to{transform:translate3d(0, -20px, 0);}}",
-        "@keyframes f13agkrc{100%{height:0px;overflow:hidden;width:0px;}99.9%{height:28px;overflow:visible;width:100%;}0%{height:28px;overflow:visible;width:100%;}}"
+        ".f1aehjj5{pointer-events:none;}",
+        ".f1euv43f{position:absolute;}"
     ]
 });
 const useLastTransitionWeekStyles = /*#__PURE__*/ (0, _react.__styles)({
     base: {
-        Bqenvij: "fniina8",
         B6of3ja: "flykjtj",
         abs64n: "fk73vx1",
         B68tc82: 0,
         Bmxbyg5: 0,
         Bpg54ce: "f1a3p1vp",
-        qhf8xq: "f1euv43f",
-        a9b677: "f3tsq5r"
-    },
-    verticalBackward: {
-        vin17d: "f5f2jbu",
-        Bf5fcs: "fywypte",
-        Bv12yb3: "fifoktk",
-        Ezkn3b: "f1ee2ue"
+        Bkecrkj: "f1aehjj5",
+        qhf8xq: "f1euv43f"
     }
 }, {
     d: [
-        ".fniina8{height:0;}",
         ".flykjtj{margin-top:-28px;}",
         ".fk73vx1{opacity:0;}",
         [
@@ -953,17 +879,8 @@ const useLastTransitionWeekStyles = /*#__PURE__*/ (0, _react.__styles)({
                 p: -1
             }
         ],
-        ".f1euv43f{position:absolute;}",
-        ".f3tsq5r{width:0;}",
-        ".f5f2jbu{animation-duration:0.367s;}",
-        ".fywypte{animation-fill-mode:both;}",
-        ".fifoktk{animation-name:f199e34v,f18895iq,f13agkrc;}",
-        ".f1ee2ue{animation-timing-function:cubic-bezier(.1,.9,.2,1);}"
-    ],
-    k: [
-        "@keyframes f199e34v{from{opacity:1;}to{opacity:0;visibility:hidden;}}",
-        "@keyframes f18895iq{from{transform:translate3d(0, 0, 0);}to{transform:translate3d(0, 20px, 0);}}",
-        "@keyframes f13agkrc{100%{height:0px;overflow:hidden;width:0px;}99.9%{height:28px;overflow:visible;width:100%;}0%{height:28px;overflow:visible;width:100%;}}"
+        ".f1aehjj5{pointer-events:none;}",
+        ".f1euv43f{position:absolute;}"
     ]
 });
 const useDayMarkerStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -1064,6 +981,7 @@ const useCornerBorderAndRadiusStyles = /*#__PURE__*/ (0, _react.__styles)({
 });
 const useCalendarDayGridStyles_unstable = (props)=>{
     'use no memo';
+    // justified: compiler would optimize useCalendarDayGridStyles_unstable — manual opt-out to preserve runtime behavior
     const wrapperStyles = useWrapperStyles();
     const tableStyles = useTableStyles();
     const dayCellStyles = useDayCellStyles();
@@ -1081,22 +999,22 @@ const useCalendarDayGridStyles_unstable = (props)=>{
     const dayMarkerStyles = useDayMarkerStyles();
     const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
     const dayTodayMarkerStyles = useDayTodayMarkerStyles();
-    const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
+    const { lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
     return {
         wrapper: (0, _react.mergeClasses)(calendarDayGridClassNames.wrapper, wrapperStyles.base),
         table: (0, _react.mergeClasses)(calendarDayGridClassNames.table, tableStyles.base, showWeekNumbers && tableStyles.showWeekNumbers),
         dayCell: (0, _react.mergeClasses)(calendarDayGridClassNames.dayCell, dayCellStyles.base, dayCellStyles.focusIndicator, cornerBorderAndRadiusStyles.corners),
         daySelected: (0, _react.mergeClasses)(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
         daySingleSelected: (0, _react.mergeClasses)(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),
-        weekRow: (0, _react.mergeClasses)(calendarDayGridClassNames.weekRow, weekRowStyles.base, animateBackwards !== undefined && weekRowStyles.animation, animateBackwards !== undefined && (animationDirection === _Calendartypes.AnimationDirection.Horizontal ? animateBackwards ? weekRowStyles.horizontalBackward : weekRowStyles.horizontalForward : animateBackwards ? weekRowStyles.verticalBackward : weekRowStyles.verticalForward)),
+        weekRow: (0, _react.mergeClasses)(calendarDayGridClassNames.weekRow, weekRowStyles.base),
         weekDayLabelCell: (0, _react.mergeClasses)(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),
         weekNumberCell: (0, _react.mergeClasses)(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),
         dayOutsideBounds: (0, _react.mergeClasses)(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),
         dayOutsideNavigatedMonth: (0, _react.mergeClasses)(calendarDayGridClassNames.dayOutsideNavigatedMonth, lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth),
         dayButton: (0, _react.mergeClasses)(calendarDayGridClassNames.dayButton, dayButtonStyles.base),
         dayIsToday: (0, _react.mergeClasses)(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),
-        firstTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== _Calendartypes.AnimationDirection.Horizontal && !animateBackwards && firstTransitionWeekStyles.verticalForward),
-        lastTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== _Calendartypes.AnimationDirection.Horizontal && animateBackwards && lastTransitionWeekStyles.verticalBackward),
+        firstTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base),
+        lastTransitionWeek: (0, _react.mergeClasses)(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base),
         dayMarker: (0, _react.mergeClasses)(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),
         dayTodayMarker: (0, _react.mergeClasses)(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base)
     };