@fluentui/react-calendar-compat 0.4.1 → 0.4.3

package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js

@@ -1,8 +1,6 @@
 'use client';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { DURATION_2, DURATION_3, EASING_FUNCTION_1, EASING_FUNCTION_2, FADE_IN, FADE_OUT, SLIDE_DOWN_IN20, SLIDE_DOWN_OUT20, SLIDE_LEFT_IN20, SLIDE_RIGHT_IN20, SLIDE_UP_IN20, SLIDE_UP_OUT20, TRANSITION_ROW_DISAPPEARANCE } from '../../utils';
-import { AnimationDirection } from '../Calendar/Calendar.types';
 import { weekCornersClassNames } from './useWeekCornerStyles.styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 /**
@@ -145,44 +143,11 @@ const useWeekRowStyles = makeStyles({
         ':focus-within': {
             zIndex: 1
         }
-    },
-    animation: {
-        animationDuration: DURATION_3,
-        animationFillMode: 'both',
-        animationTimingFunction: EASING_FUNCTION_1
-    },
-    horizontalBackward: {
-        animationName: [
-            FADE_IN,
-            SLIDE_RIGHT_IN20
-        ]
-    },
-    horizontalForward: {
-        animationName: [
-            FADE_IN,
-            SLIDE_LEFT_IN20
-        ]
-    },
-    verticalBackward: {
-        animationName: [
-            FADE_IN,
-            SLIDE_DOWN_IN20
-        ]
-    },
-    verticalForward: {
-        animationName: [
-            FADE_IN,
-            SLIDE_UP_IN20
-        ]
     }
 });
 const useWeekDayLabelCellStyles = makeStyles({
     base: {
-        userSelect: 'none',
-        animationDuration: DURATION_2,
-        animationFillMode: 'both',
-        animationName: FADE_IN,
-        animationTimingFunction: EASING_FUNCTION_2
+        userSelect: 'none'
     }
 });
 const useWeekNumberCellStyles = makeStyles({
@@ -281,41 +246,21 @@ const useDayTodayMarkerStyles = makeStyles({
 });
 const useFirstTransitionWeekStyles = makeStyles({
     base: {
-        height: 0,
+        // Overlaid out of flow and transparent at rest; `pointerEvents: 'none'` stops the invisible
+        // overlay from intercepting clicks. `TransitionRowSlideOut` fades opacity 1 → 0, ending here.
         opacity: 0,
         overflow: 'hidden',
-        position: 'absolute',
-        width: 0
-    },
-    verticalForward: {
-        animationDuration: DURATION_3,
-        animationFillMode: 'both',
-        animationName: [
-            FADE_OUT,
-            SLIDE_UP_OUT20,
-            TRANSITION_ROW_DISAPPEARANCE
-        ],
-        animationTimingFunction: EASING_FUNCTION_1
+        pointerEvents: 'none',
+        position: 'absolute'
     }
 });
 const useLastTransitionWeekStyles = makeStyles({
     base: {
-        height: 0,
         marginTop: '-28px',
         opacity: 0,
         overflow: 'hidden',
-        position: 'absolute',
-        width: 0
-    },
-    verticalBackward: {
-        animationDuration: DURATION_3,
-        animationFillMode: 'both',
-        animationName: [
-            FADE_OUT,
-            SLIDE_DOWN_OUT20,
-            TRANSITION_ROW_DISAPPEARANCE
-        ],
-        animationTimingFunction: EASING_FUNCTION_1
+        pointerEvents: 'none',
+        position: 'absolute'
     }
 });
 const useDayMarkerStyles = makeStyles({
@@ -356,7 +301,7 @@ const useCornerBorderAndRadiusStyles = makeStyles({
  *
  * @internal
  */ export const useCalendarDayGridStyles_unstable = (props)=>{
-    'use no memo';
+    '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();
@@ -374,22 +319,22 @@ const useCornerBorderAndRadiusStyles = makeStyles({
     const dayMarkerStyles = useDayMarkerStyles();
     const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
     const dayTodayMarkerStyles = useDayTodayMarkerStyles();
-    const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
+    const { lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
     return {
         wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),
         table: mergeClasses(calendarDayGridClassNames.table, tableStyles.base, showWeekNumbers && tableStyles.showWeekNumbers),
         dayCell: mergeClasses(calendarDayGridClassNames.dayCell, dayCellStyles.base, dayCellStyles.focusIndicator, cornerBorderAndRadiusStyles.corners),
         daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
         daySingleSelected: mergeClasses(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),
-        weekRow: mergeClasses(calendarDayGridClassNames.weekRow, weekRowStyles.base, animateBackwards !== undefined && weekRowStyles.animation, animateBackwards !== undefined && (animationDirection === AnimationDirection.Horizontal ? animateBackwards ? weekRowStyles.horizontalBackward : weekRowStyles.horizontalForward : animateBackwards ? weekRowStyles.verticalBackward : weekRowStyles.verticalForward)),
+        weekRow: mergeClasses(calendarDayGridClassNames.weekRow, weekRowStyles.base),
         weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),
         weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),
         dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),
         dayOutsideNavigatedMonth: mergeClasses(calendarDayGridClassNames.dayOutsideNavigatedMonth, lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth),
         dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),
         dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),
-        firstTransitionWeek: mergeClasses(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== AnimationDirection.Horizontal && !animateBackwards && firstTransitionWeekStyles.verticalForward),
-        lastTransitionWeek: mergeClasses(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base, animateBackwards !== undefined && animationDirection !== AnimationDirection.Horizontal && animateBackwards && lastTransitionWeekStyles.verticalBackward),
+        firstTransitionWeek: mergeClasses(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base),
+        lastTransitionWeek: mergeClasses(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base),
         dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),
         dayTodayMarker: mergeClasses(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base)
     };

package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport {\n  DURATION_2,\n  DURATION_3,\n  EASING_FUNCTION_1,\n  EASING_FUNCTION_2,\n  FADE_IN,\n  FADE_OUT,\n  SLIDE_DOWN_IN20,\n  SLIDE_DOWN_OUT20,\n  SLIDE_LEFT_IN20,\n  SLIDE_RIGHT_IN20,\n  SLIDE_UP_IN20,\n  SLIDE_UP_OUT20,\n  TRANSITION_ROW_DISAPPEARANCE,\n} from '../../utils';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport { weekCornersClassNames } from './useWeekCornerStyles.styles';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayGridStyles, CalendarDayGridStyleProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> = {\n  wrapper: 'fui-CalendarDayGrid__wrapper',\n  table: 'fui-CalendarDayGrid__table',\n  dayCell: 'fui-CalendarDayGrid__dayCell',\n  daySelected: 'fui-CalendarDayGrid__daySelected',\n  daySingleSelected: 'fui-CalendarDayGrid__daySingleSelected',\n  weekRow: 'fui-CalendarDayGrid__weekRow',\n  weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',\n  weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',\n  dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',\n  dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',\n  dayButton: 'fui-CalendarDayGrid__dayButton',\n  dayIsToday: 'fui-CalendarDayGrid__dayIsToday',\n  firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',\n  lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',\n  dayMarker: 'fui-CalendarDayGrid__dayMarker',\n  dayTodayMarker: 'fui-CalendarDayGrid__dayTodayMarker',\n};\n\n/**\n * @internal\n */\nexport const extraCalendarDayGridClassNames = {\n  hoverStyle: 'fui-CalendarDayGrid__hoverStyle',\n  pressedStyle: 'fui-CalendarDayGrid__pressedStyle',\n};\n\nconst useWrapperStyles = makeStyles({\n  base: {\n    paddingBottom: '10px',\n  },\n});\n\nconst useTableStyles = makeStyles({\n  base: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    fontSize: 'inherit',\n    marginTop: '4px',\n    paddingBottom: '10px',\n    position: 'relative',\n    tableLayout: 'fixed',\n    textAlign: 'center',\n    width: '196px',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useDayCellStyles = makeStyles({\n  base: {\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '2px',\n    position: 'relative',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n\n    [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      '@media (forced-colors: active)': {\n        outline: '1px solid Highlight',\n        zIndex: 3,\n        [`& .${calendarDayGridClassNames.dayTodayMarker}`]: {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    [`&.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  }),\n});\n\nconst useDaySelectedStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    color: tokens.colorNeutralForeground1Static,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n    },\n\n    [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useDaySingleSelectedStyles = makeStyles({\n  base: {\n    color: tokens.colorNeutralForeground1Static,\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n\n    [`& > .${calendarDayGridClassNames.dayButton}`]: {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      borderRadius: tokens.borderRadiusMedium,\n      border: `1px solid ${tokens.colorBrandStroke1}`,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        ...shorthands.borderColor('Highlight'),\n        color: 'HighlightText',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useWeekRowStyles = makeStyles({\n  base: {\n    position: 'relative',\n    ':focus-within': {\n      zIndex: 1,\n    },\n  },\n  animation: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n  horizontalBackward: {\n    animationName: [FADE_IN, SLIDE_RIGHT_IN20],\n  },\n  horizontalForward: {\n    animationName: [FADE_IN, SLIDE_LEFT_IN20],\n  },\n  verticalBackward: {\n    animationName: [FADE_IN, SLIDE_DOWN_IN20],\n  },\n  verticalForward: {\n    animationName: [FADE_IN, SLIDE_UP_IN20],\n  },\n});\n\nconst useWeekDayLabelCellStyles = makeStyles({\n  base: {\n    userSelect: 'none',\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n});\n\nconst useWeekNumberCellStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground4,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    height: '28px',\n    margin: '0',\n    padding: '0',\n    width: '28px',\n  },\n});\n\nconst useDayOutsideBoundsStyles = makeStyles({\n  base: {\n    [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +\n    `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayOutsideNavigatedMonthStyles = makeStyles({\n  lightenDaysOutsideNavigatedMonth: {\n    color: tokens.colorNeutralForeground4,\n    fontWeight: tokens.fontWeightRegular,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    color: 'inherit',\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: 'inherit',\n    height: '24px',\n    lineHeight: '24px',\n    overflow: 'visible',\n    padding: '0',\n    width: '24px',\n\n    '&span': {\n      height: 'inherit',\n      lineHeight: 'inherit',\n    },\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n    },\n  },\n});\n\nconst useDayIsTodayStyles = makeStyles({\n  base: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForegroundOnBrand,\n    fontWeight: tokens.fontWeightSemibold,\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useDayTodayMarkerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: tokens.colorBrandBackground,\n    borderRadius: '100%',\n    width: '20px',\n    height: '20px',\n    lineHeight: '20px',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      ...shorthands.borderColor('WindowText'),\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\nconst useFirstTransitionWeekStyles = makeStyles({\n  base: {\n    height: 0,\n    opacity: 0,\n    overflow: 'hidden',\n\n    position: 'absolute',\n    width: 0,\n  },\n  verticalForward: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationName: [FADE_OUT, SLIDE_UP_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n});\n\nconst useLastTransitionWeekStyles = makeStyles({\n  base: {\n    height: 0,\n    marginTop: '-28px',\n    opacity: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    width: 0,\n  },\n  verticalBackward: {\n    animationDuration: DURATION_3,\n    animationFillMode: 'both',\n    animationName: [FADE_OUT, SLIDE_DOWN_OUT20, TRANSITION_ROW_DISAPPEARANCE],\n    animationTimingFunction: EASING_FUNCTION_1,\n  },\n});\n\nconst useDayMarkerStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandForeground2,\n    borderRadius: '100%',\n    bottom: '1px',\n    height: '4px',\n    left: 0,\n    margin: 'auto',\n\n    position: 'absolute',\n    right: 0,\n    width: '4px',\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\nconst useCornerBorderAndRadiusStyles = makeStyles({\n  corners: {\n    [`&.${weekCornersClassNames.topRightCornerDate}`]: {\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.topLeftCornerDate}`]: {\n      borderTopLeftRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.bottomRightCornerDate}`]: {\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.bottomLeftCornerDate}`]: {\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n    },\n  },\n});\n\n/**\n * Apply styling to the CalendarDayGrid slots based on the state\n *\n * @internal\n */\nexport const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStyleProps): CalendarDayGridStyles => {\n  'use no memo';\n\n  const wrapperStyles = useWrapperStyles();\n  const tableStyles = useTableStyles();\n  const dayCellStyles = useDayCellStyles();\n  const daySelectedStyles = useDaySelectedStyles();\n  const daySingleSelectedStyles = useDaySingleSelectedStyles();\n  const weekRowStyles = useWeekRowStyles();\n  const weekDayLabelCellStyles = useWeekDayLabelCellStyles();\n  const weekNumberCellStyles = useWeekNumberCellStyles();\n  const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();\n  const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();\n  const dayButtonStyles = useDayButtonStyles();\n  const dayIsTodayStyles = useDayIsTodayStyles();\n  const firstTransitionWeekStyles = useFirstTransitionWeekStyles();\n  const lastTransitionWeekStyles = useLastTransitionWeekStyles();\n  const dayMarkerStyles = useDayMarkerStyles();\n  const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();\n  const dayTodayMarkerStyles = useDayTodayMarkerStyles();\n\n  const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;\n\n  return {\n    wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),\n    table: mergeClasses(\n      calendarDayGridClassNames.table,\n      tableStyles.base,\n      showWeekNumbers && tableStyles.showWeekNumbers,\n    ),\n    dayCell: mergeClasses(\n      calendarDayGridClassNames.dayCell,\n      dayCellStyles.base,\n      dayCellStyles.focusIndicator,\n      cornerBorderAndRadiusStyles.corners,\n    ),\n    daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),\n    daySingleSelected: mergeClasses(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),\n    weekRow: mergeClasses(\n      calendarDayGridClassNames.weekRow,\n      weekRowStyles.base,\n      animateBackwards !== undefined && weekRowStyles.animation,\n      animateBackwards !== undefined &&\n        (animationDirection === AnimationDirection.Horizontal\n          ? animateBackwards\n            ? weekRowStyles.horizontalBackward\n            : weekRowStyles.horizontalForward\n          : animateBackwards\n          ? weekRowStyles.verticalBackward\n          : weekRowStyles.verticalForward),\n    ),\n    weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),\n    weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),\n    dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),\n    dayOutsideNavigatedMonth: mergeClasses(\n      calendarDayGridClassNames.dayOutsideNavigatedMonth,\n      lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth,\n    ),\n    dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),\n    dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),\n    firstTransitionWeek: mergeClasses(\n      calendarDayGridClassNames.firstTransitionWeek,\n      firstTransitionWeekStyles.base,\n      animateBackwards !== undefined &&\n        animationDirection !== AnimationDirection.Horizontal &&\n        !animateBackwards &&\n        firstTransitionWeekStyles.verticalForward,\n    ),\n    lastTransitionWeek: mergeClasses(\n      calendarDayGridClassNames.lastTransitionWeek,\n      lastTransitionWeekStyles.base,\n      animateBackwards !== undefined &&\n        animationDirection !== AnimationDirection.Horizontal &&\n        animateBackwards &&\n        lastTransitionWeekStyles.verticalBackward,\n    ),\n    dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),\n    dayTodayMarker: mergeClasses(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","DURATION_3","EASING_FUNCTION_1","EASING_FUNCTION_2","FADE_IN","FADE_OUT","SLIDE_DOWN_IN20","SLIDE_DOWN_OUT20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","SLIDE_UP_OUT20","TRANSITION_ROW_DISAPPEARANCE","AnimationDirection","weekCornersClassNames","createFocusOutlineStyle","calendarDayGridClassNames","wrapper","table","dayCell","daySelected","daySingleSelected","weekRow","weekDayLabelCell","weekNumberCell","dayOutsideBounds","dayOutsideNavigatedMonth","dayButton","dayIsToday","firstTransitionWeek","lastTransitionWeek","dayMarker","dayTodayMarker","extraCalendarDayGridClassNames","hoverStyle","pressedStyle","useWrapperStyles","base","paddingBottom","useTableStyles","borderCollapse","borderSpacing","fontSize","marginTop","position","tableLayout","textAlign","width","showWeekNumbers","useDayCellStyles","color","colorNeutralForeground1","cursor","fontSizeBase200","fontWeight","fontWeightRegular","margin","padding","backgroundColor","colorNeutralForeground1Static","colorBrandBackgroundInvertedHover","outline","zIndex","colorBrandBackgroundInvertedPressed","borderColor","focusIndicator","style","outlineWidth","strokeWidthThick","borderWidth","useDaySelectedStyles","colorBrandBackgroundInvertedSelected","forcedColorAdjust","useDaySingleSelectedStyles","borderRadius","borderRadiusMedium","border","colorBrandStroke1","useWeekRowStyles","animation","animationDuration","animationFillMode","animationTimingFunction","horizontalBackward","animationName","horizontalForward","verticalBackward","verticalForward","useWeekDayLabelCellStyles","userSelect","useWeekNumberCellStyles","colorTransparentBackground","borderRight","colorNeutralStroke2","boxSizing","colorNeutralForeground4","height","useDayOutsideBoundsStyles","colorNeutralForegroundDisabled","pointerEvents","useDayOutsideNavigatedMonthStyles","lightenDaysOutsideNavigatedMonth","useDayButtonStyles","lineHeight","overflow","useDayIsTodayStyles","display","justifyContent","alignItems","colorNeutralForegroundOnBrand","fontWeightSemibold","useDayTodayMarkerStyles","colorBrandBackground","useFirstTransitionWeekStyles","opacity","useLastTransitionWeekStyles","useDayMarkerStyles","colorBrandForeground2","bottom","left","right","useCornerBorderAndRadiusStyles","corners","topRightCornerDate","borderTopRightRadius","topLeftCornerDate","borderTopLeftRadius","bottomRightCornerDate","borderBottomRightRadius","bottomLeftCornerDate","borderBottomLeftRadius","useCalendarDayGridStyles_unstable","props","wrapperStyles","tableStyles","dayCellStyles","daySelectedStyles","daySingleSelectedStyles","weekRowStyles","weekDayLabelCellStyles","weekNumberCellStyles","dayOutsideBoundsStyles","dayOutsideNavigatedMonthStyles","dayButtonStyles","dayIsTodayStyles","firstTransitionWeekStyles","lastTransitionWeekStyles","dayMarkerStyles","cornerBorderAndRadiusStyles","dayTodayMarkerStyles","animateBackwards","animationDirection","undefined","Horizontal"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SACEC,UAAU,EACVC,UAAU,EACVC,iBAAiB,EACjBC,iBAAiB,EACjBC,OAAO,EACPC,QAAQ,EACRC,eAAe,EACfC,gBAAgB,EAChBC,eAAe,EACfC,gBAAgB,EAChBC,aAAa,EACbC,cAAc,EACdC,4BAA4B,QACvB,cAAc;AACrB,SAASC,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,qBAAqB,QAAQ,+BAA+B;AACrE,SAASC,uBAAuB,QAAQ,0BAA0B;AAIlE;;CAEC,GACD,OAAO,MAAMC,4BAAmE;IAC9EC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,aAAa;IACbC,mBAAmB;IACnBC,SAAS;IACTC,kBAAkB;IAClBC,gBAAgB;IAChBC,kBAAkB;IAClBC,0BAA0B;IAC1BC,WAAW;IACXC,YAAY;IACZC,qBAAqB;IACrBC,oBAAoB;IACpBC,WAAW;IACXC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,iCAAiC;IAC5CC,YAAY;IACZC,cAAc;AAChB,EAAE;AAEF,MAAMC,mBAAmBvC,WAAW;IAClCwC,MAAM;QACJC,eAAe;IACjB;AACF;AAEA,MAAMC,iBAAiB1C,WAAW;IAChCwC,MAAM;QACJG,gBAAgB;QAChBC,eAAe;QACfC,UAAU;QACVC,WAAW;QACXL,eAAe;QACfM,UAAU;QACVC,aAAa;QACbC,WAAW;QACXC,OAAO;IACT;IACAC,iBAAiB;QACfD,OAAO;IACT;AACF;AAEA,MAAME,mBAAmBpD,WAAW;IAClCwC,MAAM;QACJa,OAAOtD,OAAOuD,uBAAuB;QACrCC,QAAQ;QACRV,UAAU9C,OAAOyD,eAAe;QAChCC,YAAY1D,OAAO2D,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTb,UAAU;QACV,kCAAkC;YAChCc,iBAAiB;YACjBR,OAAO;QACT;QAEA,CAAC,CAAC,EAAE,EAAEjB,+BAA+BC,UAAU,EAAE,CAAC,EAAE;YAClDgB,OAAOtD,OAAO+D,6BAA6B;YAC3CD,iBAAiB9D,OAAOgE,iCAAiC;YACzD,kCAAkC;gBAChCC,SAAS;gBACTC,QAAQ;gBACR,CAAC,CAAC,GAAG,EAAE9C,0BAA0BgB,cAAc,EAAE,CAAC,EAAE;oBAClD0B,iBAAiB;gBACnB;YACF;QACF;QAEA,CAAC,CAAC,EAAE,EAAEzB,+BAA+BE,YAAY,EAAE,CAAC,EAAE;YACpDe,OAAOtD,OAAO+D,6BAA6B;YAC3CD,iBAAiB9D,OAAOmE,mCAAmC;YAC3D,kCAAkC;gBAChCL,iBAAiB;gBACjB,GAAG3D,WAAWiE,WAAW,CAAC,YAAY;gBACtCd,OAAO;YACT;QACF;IACF;IACAe,gBAAgBlD,wBAAwB;QACtCmD,OAAO;YACLC,cAAcvE,OAAOwE,gBAAgB;YACrC,GAAGrE,WAAWsE,WAAW,CAACzE,OAAOwE,gBAAgB,CAAC;QACpD;IACF;AACF;AAEA,MAAME,uBAAuBzE,WAAW;IACtCwC,MAAM;QACJqB,iBAAiB9D,OAAO2E,oCAAoC;QAC5DrB,OAAOtD,OAAO+D,6BAA6B;QAE3C,kCAAkC;YAChCD,iBAAiB;YACjB,GAAG3D,WAAWiE,WAAW,CAAC,YAAY;YACtCd,OAAO;YACPsB,mBAAmB;QACrB;QAEA,CAAC,CAAC,WAAW,EAAEvC,+BAA+BC,UAAU,CAAC,IAAI,EAAED,+BAA+BE,YAAY,EAAE,CAAC,EAAE;YAC7Ge,OAAOtD,OAAO+D,6BAA6B;YAC3CD,iBAAiB9D,OAAO2E,oCAAoC;YAC5D,kCAAkC;gBAChCb,iBAAiB;gBACjBR,OAAO;YACT;QACF;QAEA,CAAC,CAAC,KAAK,EAAElC,0BAA0Be,SAAS,EAAE,CAAC,EAAE;YAC/C,kCAAkC;gBAChC2B,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMe,6BAA6B5E,WAAW;IAC5CwC,MAAM;QACJa,OAAOtD,OAAO+D,6BAA6B;QAE3C,CAAC,CAAC,KAAK,EAAE3C,0BAA0Be,SAAS,EAAE,CAAC,EAAE;YAC/C,kCAAkC;gBAChC2B,iBAAiB;YACnB;QACF;QAEA,CAAC,CAAC,KAAK,EAAE1C,0BAA0BW,SAAS,EAAE,CAAC,EAAE;YAC/C+B,iBAAiB9D,OAAO2E,oCAAoC;YAC5DG,cAAc9E,OAAO+E,kBAAkB;YACvCC,QAAQ,CAAC,UAAU,EAAEhF,OAAOiF,iBAAiB,EAAE;YAC/C,kCAAkC;gBAChCnB,iBAAiB;gBACjB,GAAG3D,WAAWiE,WAAW,CAAC,YAAY;gBACtCd,OAAO;gBACPsB,mBAAmB;YACrB;QACF;IACF;AACF;AAEA,MAAMM,mBAAmBjF,WAAW;IAClCwC,MAAM;QACJO,UAAU;QACV,iBAAiB;YACfkB,QAAQ;QACV;IACF;IACAiB,WAAW;QACTC,mBAAmB/E;QACnBgF,mBAAmB;QACnBC,yBAAyBhF;IAC3B;IACAiF,oBAAoB;QAClBC,eAAe;YAAChF;YAASK;SAAiB;IAC5C;IACA4E,mBAAmB;QACjBD,eAAe;YAAChF;YAASI;SAAgB;IAC3C;IACA8E,kBAAkB;QAChBF,eAAe;YAAChF;YAASE;SAAgB;IAC3C;IACAiF,iBAAiB;QACfH,eAAe;YAAChF;YAASM;SAAc;IACzC;AACF;AAEA,MAAM8E,4BAA4B3F,WAAW;IAC3CwC,MAAM;QACJoD,YAAY;QACZT,mBAAmBhF;QACnBiF,mBAAmB;QACnBG,eAAehF;QACf8E,yBAAyB/E;IAC3B;AACF;AAEA,MAAMuF,0BAA0B7F,WAAW;IACzCwC,MAAM;QACJqB,iBAAiB9D,OAAO+F,0BAA0B;QAClDC,aAAa,CAAC,UAAU,EAAEhG,OAAOiG,mBAAmB,EAAE;QACtDC,WAAW;QACX5C,OAAOtD,OAAOmG,uBAAuB;QACrCrD,UAAU9C,OAAOyD,eAAe;QAChCC,YAAY1D,OAAO2D,iBAAiB;QACpCyC,QAAQ;QACRxC,QAAQ;QACRC,SAAS;QACTV,OAAO;IACT;AACF;AAEA,MAAMkD,4BAA4BpG,WAAW;IAC3CwC,MAAM;QACJ,CAAC,CAAC,2BAA2B,EAAEJ,+BAA+BC,UAAU,EAAE,GAC1E,CAAC,IAAI,EAAED,+BAA+BE,YAAY,EAAE,CAAC,EAAE;YACrDuB,iBAAiB9D,OAAO+F,0BAA0B;YAClDzC,OAAOtD,OAAOsG,8BAA8B;YAC5CC,eAAe;QACjB;QACA,kCAAkC;YAChCjD,OAAO;QACT;IACF;AACF;AAEA,MAAMkD,oCAAoCvG,WAAW;IACnDwG,kCAAkC;QAChCnD,OAAOtD,OAAOmG,uBAAuB;QACrCzC,YAAY1D,OAAO2D,iBAAiB;QAEpC,kCAAkC;YAChCL,OAAO;QACT;IACF;AACF;AAEA,MAAMoD,qBAAqBzG,WAAW;IACpCwC,MAAM;QACJqB,iBAAiB9D,OAAO+F,0BAA0B;QAClDf,QAAQ;QACR1B,OAAO;QACPE,QAAQ;QACRV,UAAU9C,OAAOyD,eAAe;QAChCC,YAAY;QACZ0C,QAAQ;QACRO,YAAY;QACZC,UAAU;QACV/C,SAAS;QACTV,OAAO;QAEP,SAAS;YACPiD,QAAQ;YACRO,YAAY;QACd;QACA,UAAU;YACR7C,iBAAiB9D,OAAOgE,iCAAiC;YACzDc,cAAc9E,OAAO+E,kBAAkB;QACzC;QACA,WAAW;YACTjB,iBAAiB9D,OAAOmE,mCAAmC;QAC7D;IACF;AACF;AAEA,MAAM0C,sBAAsB5G,WAAW;IACrCwC,MAAM;QACJqE,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZ1D,OAAOtD,OAAOiH,6BAA6B;QAC3CvD,YAAY1D,OAAOkH,kBAAkB;QAErC,CAAC,CAAC,KAAK,EAAE9F,0BAA0Be,SAAS,EAAE,CAAC,EAAE;YAC/C2B,iBAAiB9D,OAAOiH,6BAA6B;YACrD,kCAAkC;gBAChCnD,iBAAiB;YACnB;QACF;IACF;AACF;AAEA,MAAMqD,0BAA0BlH,WAAW;IACzCwC,MAAM;QACJqE,SAAS;QACTC,gBAAgB;QAChBC,YAAY;QACZlD,iBAAiB9D,OAAOoH,oBAAoB;QAC5CtC,cAAc;QACd3B,OAAO;QACPiD,QAAQ;QACRO,YAAY;QACZ,kCAAkC;YAChC7C,iBAAiB;YACjB,GAAG3D,WAAWiE,WAAW,CAAC,aAAa;YACvCd,OAAO;YACPsB,mBAAmB;QACrB;IACF;AACF;AAEA,MAAMyC,+BAA+BpH,WAAW;IAC9CwC,MAAM;QACJ2D,QAAQ;QACRkB,SAAS;QACTV,UAAU;QAEV5D,UAAU;QACVG,OAAO;IACT;IACAwC,iBAAiB;QACfP,mBAAmB/E;QACnBgF,mBAAmB;QACnBG,eAAe;YAAC/E;YAAUM;YAAgBC;SAA6B;QACvEsE,yBAAyBhF;IAC3B;AACF;AAEA,MAAMiH,8BAA8BtH,WAAW;IAC7CwC,MAAM;QACJ2D,QAAQ;QACRrD,WAAW;QACXuE,SAAS;QACTV,UAAU;QACV5D,UAAU;QACVG,OAAO;IACT;IACAuC,kBAAkB;QAChBN,mBAAmB/E;QACnBgF,mBAAmB;QACnBG,eAAe;YAAC/E;YAAUE;YAAkBK;SAA6B;QACzEsE,yBAAyBhF;IAC3B;AACF;AAEA,MAAMkH,qBAAqBvH,WAAW;IACpCwC,MAAM;QACJqB,iBAAiB9D,OAAOyH,qBAAqB;QAC7C3C,cAAc;QACd4C,QAAQ;QACRtB,QAAQ;QACRuB,MAAM;QACN/D,QAAQ;QAERZ,UAAU;QACV4E,OAAO;QACPzE,OAAO;QAEP,kCAAkC;YAChCW,iBAAiB;YACjBc,mBAAmB;QACrB;IACF;AACF;AAEA,MAAMiD,iCAAiC5H,WAAW;IAChD6H,SAAS;QACP,CAAC,CAAC,EAAE,EAAE5G,sBAAsB6G,kBAAkB,EAAE,CAAC,EAAE;YACjDC,sBAAsBhI,OAAO+E,kBAAkB;QACjD;QACA,CAAC,CAAC,EAAE,EAAE7D,sBAAsB+G,iBAAiB,EAAE,CAAC,EAAE;YAChDC,qBAAqBlI,OAAO+E,kBAAkB;QAChD;QACA,CAAC,CAAC,EAAE,EAAE7D,sBAAsBiH,qBAAqB,EAAE,CAAC,EAAE;YACpDC,yBAAyBpI,OAAO+E,kBAAkB;QACpD;QACA,CAAC,CAAC,EAAE,EAAE7D,sBAAsBmH,oBAAoB,EAAE,CAAC,EAAE;YACnDC,wBAAwBtI,OAAO+E,kBAAkB;QACnD;IACF;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMwD,oCAAoC,CAACC;IAChD;IAEA,MAAMC,gBAAgBjG;IACtB,MAAMkG,cAAc/F;IACpB,MAAMgG,gBAAgBtF;IACtB,MAAMuF,oBAAoBlE;IAC1B,MAAMmE,0BAA0BhE;IAChC,MAAMiE,gBAAgB5D;IACtB,MAAM6D,yBAAyBnD;IAC/B,MAAMoD,uBAAuBlD;IAC7B,MAAMmD,yBAAyB5C;IAC/B,MAAM6C,iCAAiC1C;IACvC,MAAM2C,kBAAkBzC;IACxB,MAAM0C,mBAAmBvC;IACzB,MAAMwC,4BAA4BhC;IAClC,MAAMiC,2BAA2B/B;IACjC,MAAMgC,kBAAkB/B;IACxB,MAAMgC,8BAA8B3B;IACpC,MAAM4B,uBAAuBtC;IAE7B,MAAM,EAAEuC,gBAAgB,EAAEC,kBAAkB,EAAElD,gCAAgC,EAAErD,eAAe,EAAE,GAAGoF;IAEpG,OAAO;QACLnH,SAASnB,aAAakB,0BAA0BC,OAAO,EAAEoH,cAAchG,IAAI;QAC3EnB,OAAOpB,aACLkB,0BAA0BE,KAAK,EAC/BoH,YAAYjG,IAAI,EAChBW,mBAAmBsF,YAAYtF,eAAe;QAEhD7B,SAASrB,aACPkB,0BAA0BG,OAAO,EACjCoH,cAAclG,IAAI,EAClBkG,cAActE,cAAc,EAC5BmF,4BAA4B1B,OAAO;QAErCtG,aAAatB,aAAakB,0BAA0BI,WAAW,EAAEoH,kBAAkBnG,IAAI;QACvFhB,mBAAmBvB,aAAakB,0BAA0BK,iBAAiB,EAAEoH,wBAAwBpG,IAAI;QACzGf,SAASxB,aACPkB,0BAA0BM,OAAO,EACjCoH,cAAcrG,IAAI,EAClBiH,qBAAqBE,aAAad,cAAc3D,SAAS,EACzDuE,qBAAqBE,aAClBD,CAAAA,uBAAuB1I,mBAAmB4I,UAAU,GACjDH,mBACEZ,cAAcvD,kBAAkB,GAChCuD,cAAcrD,iBAAiB,GACjCiE,mBACAZ,cAAcpD,gBAAgB,GAC9BoD,cAAcnD,eAAe,AAAD;QAEpChE,kBAAkBzB,aAAakB,0BAA0BO,gBAAgB,EAAEoH,uBAAuBtG,IAAI;QACtGb,gBAAgB1B,aAAakB,0BAA0BQ,cAAc,EAAEoH,qBAAqBvG,IAAI;QAChGZ,kBAAkB3B,aAAakB,0BAA0BS,gBAAgB,EAAEoH,uBAAuBxG,IAAI;QACtGX,0BAA0B5B,aACxBkB,0BAA0BU,wBAAwB,EAClD2E,oCAAoCyC,+BAA+BzC,gCAAgC;QAErG1E,WAAW7B,aAAakB,0BAA0BW,SAAS,EAAEoH,gBAAgB1G,IAAI;QACjFT,YAAY9B,aAAakB,0BAA0BY,UAAU,EAAEoH,iBAAiB3G,IAAI;QACpFR,qBAAqB/B,aACnBkB,0BAA0Ba,mBAAmB,EAC7CoH,0BAA0B5G,IAAI,EAC9BiH,qBAAqBE,aACnBD,uBAAuB1I,mBAAmB4I,UAAU,IACpD,CAACH,oBACDL,0BAA0B1D,eAAe;QAE7CzD,oBAAoBhC,aAClBkB,0BAA0Bc,kBAAkB,EAC5CoH,yBAAyB7G,IAAI,EAC7BiH,qBAAqBE,aACnBD,uBAAuB1I,mBAAmB4I,UAAU,IACpDH,oBACAJ,yBAAyB5D,gBAAgB;QAE7CvD,WAAWjC,aAAakB,0BAA0Be,SAAS,EAAEoH,gBAAgB9G,IAAI;QACjFL,gBAAgBlC,aAAakB,0BAA0BgB,cAAc,EAAEqH,qBAAqBhH,IAAI;IAClG;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { weekCornersClassNames } from './useWeekCornerStyles.styles';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayGridStyles, CalendarDayGridStyleProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> = {\n  wrapper: 'fui-CalendarDayGrid__wrapper',\n  table: 'fui-CalendarDayGrid__table',\n  dayCell: 'fui-CalendarDayGrid__dayCell',\n  daySelected: 'fui-CalendarDayGrid__daySelected',\n  daySingleSelected: 'fui-CalendarDayGrid__daySingleSelected',\n  weekRow: 'fui-CalendarDayGrid__weekRow',\n  weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',\n  weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',\n  dayOutsideBounds: 'fui-CalendarDayGrid__dayOutsideBounds',\n  dayOutsideNavigatedMonth: 'fui-CalendarDayGrid__dayOutsideNavigatedMonth',\n  dayButton: 'fui-CalendarDayGrid__dayButton',\n  dayIsToday: 'fui-CalendarDayGrid__dayIsToday',\n  firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',\n  lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',\n  dayMarker: 'fui-CalendarDayGrid__dayMarker',\n  dayTodayMarker: 'fui-CalendarDayGrid__dayTodayMarker',\n};\n\n/**\n * @internal\n */\nexport const extraCalendarDayGridClassNames = {\n  hoverStyle: 'fui-CalendarDayGrid__hoverStyle',\n  pressedStyle: 'fui-CalendarDayGrid__pressedStyle',\n};\n\nconst useWrapperStyles = makeStyles({\n  base: {\n    paddingBottom: '10px',\n  },\n});\n\nconst useTableStyles = makeStyles({\n  base: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    fontSize: 'inherit',\n    marginTop: '4px',\n    paddingBottom: '10px',\n    position: 'relative',\n    tableLayout: 'fixed',\n    textAlign: 'center',\n    width: '196px',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useDayCellStyles = makeStyles({\n  base: {\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '2px',\n    position: 'relative',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n\n    [`&.${extraCalendarDayGridClassNames.hoverStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      '@media (forced-colors: active)': {\n        outline: '1px solid Highlight',\n        zIndex: 3,\n        [`& .${calendarDayGridClassNames.dayTodayMarker}`]: {\n          backgroundColor: 'Highlight',\n        },\n      },\n    },\n\n    [`&.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n    },\n  }),\n});\n\nconst useDaySelectedStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n    color: tokens.colorNeutralForeground1Static,\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n    },\n\n    [`&:hover, &.${extraCalendarDayGridClassNames.hoverStyle}, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      color: tokens.colorNeutralForeground1Static,\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useDaySingleSelectedStyles = makeStyles({\n  base: {\n    color: tokens.colorNeutralForeground1Static,\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n\n    [`& > .${calendarDayGridClassNames.dayButton}`]: {\n      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n      borderRadius: tokens.borderRadiusMedium,\n      border: `1px solid ${tokens.colorBrandStroke1}`,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        ...shorthands.borderColor('Highlight'),\n        color: 'HighlightText',\n        forcedColorAdjust: 'none',\n      },\n    },\n  },\n});\n\nconst useWeekRowStyles = makeStyles({\n  base: {\n    position: 'relative',\n    ':focus-within': {\n      zIndex: 1,\n    },\n  },\n});\n\nconst useWeekDayLabelCellStyles = makeStyles({\n  base: {\n    userSelect: 'none',\n  },\n});\n\nconst useWeekNumberCellStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground4,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    height: '28px',\n    margin: '0',\n    padding: '0',\n    width: '28px',\n  },\n});\n\nconst useDayOutsideBoundsStyles = makeStyles({\n  base: {\n    [`&, &:disabled, & button, &.${extraCalendarDayGridClassNames.hoverStyle}` +\n    `, &.${extraCalendarDayGridClassNames.pressedStyle}`]: {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayOutsideNavigatedMonthStyles = makeStyles({\n  lightenDaysOutsideNavigatedMonth: {\n    color: tokens.colorNeutralForeground4,\n    fontWeight: tokens.fontWeightRegular,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\nconst useDayButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    color: 'inherit',\n    cursor: 'pointer',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: 'inherit',\n    height: '24px',\n    lineHeight: '24px',\n    overflow: 'visible',\n    padding: '0',\n    width: '24px',\n\n    '&span': {\n      height: 'inherit',\n      lineHeight: 'inherit',\n    },\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      borderRadius: tokens.borderRadiusMedium,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n    },\n  },\n});\n\nconst useDayIsTodayStyles = makeStyles({\n  base: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    color: tokens.colorNeutralForegroundOnBrand,\n    fontWeight: tokens.fontWeightSemibold,\n\n    [`& > .${calendarDayGridClassNames.dayMarker}`]: {\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Window',\n      },\n    },\n  },\n});\n\nconst useDayTodayMarkerStyles = makeStyles({\n  base: {\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: tokens.colorBrandBackground,\n    borderRadius: '100%',\n    width: '20px',\n    height: '20px',\n    lineHeight: '20px',\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      ...shorthands.borderColor('WindowText'),\n      color: 'Window',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\nconst useFirstTransitionWeekStyles = makeStyles({\n  base: {\n    // Overlaid out of flow and transparent at rest; `pointerEvents: 'none'` stops the invisible\n    // overlay from intercepting clicks. `TransitionRowSlideOut` fades opacity 1 → 0, ending here.\n    opacity: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n  },\n});\n\nconst useLastTransitionWeekStyles = makeStyles({\n  base: {\n    marginTop: '-28px',\n    opacity: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n  },\n});\n\nconst useDayMarkerStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorBrandForeground2,\n    borderRadius: '100%',\n    bottom: '1px',\n    height: '4px',\n    left: 0,\n    margin: 'auto',\n\n    position: 'absolute',\n    right: 0,\n    width: '4px',\n\n    '@media (forced-colors: active)': {\n      backgroundColor: 'WindowText',\n      forcedColorAdjust: 'none',\n    },\n  },\n});\n\nconst useCornerBorderAndRadiusStyles = makeStyles({\n  corners: {\n    [`&.${weekCornersClassNames.topRightCornerDate}`]: {\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.topLeftCornerDate}`]: {\n      borderTopLeftRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.bottomRightCornerDate}`]: {\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n    },\n    [`&.${weekCornersClassNames.bottomLeftCornerDate}`]: {\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n    },\n  },\n});\n\n/**\n * Apply styling to the CalendarDayGrid slots based on the state\n *\n * @internal\n */\nexport const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStyleProps): CalendarDayGridStyles => {\n  'use no memo'; // justified: compiler would optimize useCalendarDayGridStyles_unstable — manual opt-out to preserve runtime behavior\n\n  const wrapperStyles = useWrapperStyles();\n  const tableStyles = useTableStyles();\n  const dayCellStyles = useDayCellStyles();\n  const daySelectedStyles = useDaySelectedStyles();\n  const daySingleSelectedStyles = useDaySingleSelectedStyles();\n  const weekRowStyles = useWeekRowStyles();\n  const weekDayLabelCellStyles = useWeekDayLabelCellStyles();\n  const weekNumberCellStyles = useWeekNumberCellStyles();\n  const dayOutsideBoundsStyles = useDayOutsideBoundsStyles();\n  const dayOutsideNavigatedMonthStyles = useDayOutsideNavigatedMonthStyles();\n  const dayButtonStyles = useDayButtonStyles();\n  const dayIsTodayStyles = useDayIsTodayStyles();\n  const firstTransitionWeekStyles = useFirstTransitionWeekStyles();\n  const lastTransitionWeekStyles = useLastTransitionWeekStyles();\n  const dayMarkerStyles = useDayMarkerStyles();\n  const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();\n  const dayTodayMarkerStyles = useDayTodayMarkerStyles();\n\n  const { lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;\n\n  return {\n    wrapper: mergeClasses(calendarDayGridClassNames.wrapper, wrapperStyles.base),\n    table: mergeClasses(\n      calendarDayGridClassNames.table,\n      tableStyles.base,\n      showWeekNumbers && tableStyles.showWeekNumbers,\n    ),\n    dayCell: mergeClasses(\n      calendarDayGridClassNames.dayCell,\n      dayCellStyles.base,\n      dayCellStyles.focusIndicator,\n      cornerBorderAndRadiusStyles.corners,\n    ),\n    daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),\n    daySingleSelected: mergeClasses(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),\n    weekRow: mergeClasses(calendarDayGridClassNames.weekRow, weekRowStyles.base),\n    weekDayLabelCell: mergeClasses(calendarDayGridClassNames.weekDayLabelCell, weekDayLabelCellStyles.base),\n    weekNumberCell: mergeClasses(calendarDayGridClassNames.weekNumberCell, weekNumberCellStyles.base),\n    dayOutsideBounds: mergeClasses(calendarDayGridClassNames.dayOutsideBounds, dayOutsideBoundsStyles.base),\n    dayOutsideNavigatedMonth: mergeClasses(\n      calendarDayGridClassNames.dayOutsideNavigatedMonth,\n      lightenDaysOutsideNavigatedMonth && dayOutsideNavigatedMonthStyles.lightenDaysOutsideNavigatedMonth,\n    ),\n    dayButton: mergeClasses(calendarDayGridClassNames.dayButton, dayButtonStyles.base),\n    dayIsToday: mergeClasses(calendarDayGridClassNames.dayIsToday, dayIsTodayStyles.base),\n    firstTransitionWeek: mergeClasses(calendarDayGridClassNames.firstTransitionWeek, firstTransitionWeekStyles.base),\n    lastTransitionWeek: mergeClasses(calendarDayGridClassNames.lastTransitionWeek, lastTransitionWeekStyles.base),\n    dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),\n    dayTodayMarker: mergeClasses(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","weekCornersClassNames","createFocusOutlineStyle","calendarDayGridClassNames","wrapper","table","dayCell","daySelected","daySingleSelected","weekRow","weekDayLabelCell","weekNumberCell","dayOutsideBounds","dayOutsideNavigatedMonth","dayButton","dayIsToday","firstTransitionWeek","lastTransitionWeek","dayMarker","dayTodayMarker","extraCalendarDayGridClassNames","hoverStyle","pressedStyle","useWrapperStyles","base","paddingBottom","useTableStyles","borderCollapse","borderSpacing","fontSize","marginTop","position","tableLayout","textAlign","width","showWeekNumbers","useDayCellStyles","color","colorNeutralForeground1","cursor","fontSizeBase200","fontWeight","fontWeightRegular","margin","padding","backgroundColor","colorNeutralForeground1Static","colorBrandBackgroundInvertedHover","outline","zIndex","colorBrandBackgroundInvertedPressed","borderColor","focusIndicator","style","outlineWidth","strokeWidthThick","borderWidth","useDaySelectedStyles","colorBrandBackgroundInvertedSelected","forcedColorAdjust","useDaySingleSelectedStyles","borderRadius","borderRadiusMedium","border","colorBrandStroke1","useWeekRowStyles","useWeekDayLabelCellStyles","userSelect","useWeekNumberCellStyles","colorTransparentBackground","borderRight","colorNeutralStroke2","boxSizing","colorNeutralForeground4","height","useDayOutsideBoundsStyles","colorNeutralForegroundDisabled","pointerEvents","useDayOutsideNavigatedMonthStyles","lightenDaysOutsideNavigatedMonth","useDayButtonStyles","lineHeight","overflow","useDayIsTodayStyles","display","justifyContent","alignItems","colorNeutralForegroundOnBrand","fontWeightSemibold","useDayTodayMarkerStyles","colorBrandBackground","useFirstTransitionWeekStyles","opacity","useLastTransitionWeekStyles","useDayMarkerStyles","colorBrandForeground2","bottom","left","right","useCornerBorderAndRadiusStyles","corners","topRightCornerDate","borderTopRightRadius","topLeftCornerDate","borderTopLeftRadius","bottomRightCornerDate","borderBottomRightRadius","bottomLeftCornerDate","borderBottomLeftRadius","useCalendarDayGridStyles_unstable","props","wrapperStyles","tableStyles","dayCellStyles","daySelectedStyles","daySingleSelectedStyles","weekRowStyles","weekDayLabelCellStyles","weekNumberCellStyles","dayOutsideBoundsStyles","dayOutsideNavigatedMonthStyles","dayButtonStyles","dayIsTodayStyles","firstTransitionWeekStyles","lastTransitionWeekStyles","dayMarkerStyles","cornerBorderAndRadiusStyles","dayTodayMarkerStyles"],"mappings":"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"}

package/lib/components/CalendarDayGrid/useWeeks.js

@@ -4,7 +4,6 @@ import { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';
 /**
  * @internal
  */ export function useWeeks(props, onSelectDate, getSetRefCallback) {
-    'use no memo';
     /**
    * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation
    * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDayGrid/useWeeks.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';\nimport type { DayInfo } from './CalendarDayGrid';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport function useWeeks(\n  props: CalendarDayGridProps,\n  onSelectDate: (date: Date) => void,\n  getSetRefCallback: (dayKey: string) => (element: HTMLElement | null) => void,\n): DayInfo[][] {\n  'use no memo';\n\n  /**\n   * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation\n   * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.\n   */\n  const weeks = React.useMemo((): DayInfo[][] => {\n    const weeksGrid = getDayGrid(props);\n\n    const firstVisibleDay = weeksGrid[1][0].originalDate;\n    const lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n    const markedDays = props.getMarkedDays?.(firstVisibleDay, lastVisibleDay) || [];\n\n    /**\n     * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,\n     * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.\n     *\n     * Weeks[1... weeks.length - 2] contains the actual visible data\n     */\n    const returnValue: DayInfo[][] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n      const week: DayInfo[] = [];\n      for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n        const day = weeksGrid[weekIndex][dayIndex];\n        const dayInfo: DayInfo = {\n          onSelected: () => onSelectDate(day.originalDate),\n          setRef: getSetRefCallback(day.key),\n          ...day,\n          isMarked: day.isMarked || markedDays?.some(markedDay => compareDates(day.originalDate, markedDay)),\n        };\n\n        week.push(dayInfo);\n      }\n      returnValue.push(week);\n    }\n\n    return returnValue;\n    // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire\n    // props object may not be a good idea due to likely frequent mutation). It would be easy to\n    // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from\n    // Calendar and trying to fix it requires a huge cascade of changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props]);\n\n  return weeks;\n}\n"],"names":["React","compareDates","DAYS_IN_WEEK","getDayGrid","useWeeks","props","onSelectDate","getSetRefCallback","weeks","useMemo","weeksGrid","firstVisibleDay","originalDate","lastVisibleDay","length","markedDays","getMarkedDays","returnValue","weekIndex","week","dayIndex","day","dayInfo","onSelected","setRef","key","isMarked","some","markedDay","push"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;AAI3E;;CAEC,GACD,OAAO,SAASC,SACdC,KAA2B,EAC3BC,YAAkC,EAClCC,iBAA4E;IAE5E;IAEA;;;GAGC,GACD,MAAMC,QAAQR,MAAMS,OAAO,CAAC;YAKPJ;QAJnB,MAAMK,YAAYP,WAAWE;QAE7B,MAAMM,kBAAkBD,SAAS,CAAC,EAAE,CAAC,EAAE,CAACE,YAAY;QACpD,MAAMC,iBAAiBH,SAAS,CAACA,UAAUI,MAAM,GAAG,EAAE,CAAC,EAAE,CAACF,YAAY;QACtE,MAAMG,aAAaV,EAAAA,uBAAAA,MAAMW,aAAa,cAAnBX,2CAAAA,0BAAAA,OAAsBM,iBAAiBE,oBAAmB,EAAE;QAE/E;;;;;KAKC,GACD,MAAMI,cAA2B,EAAE;QAEnC,IAAK,IAAIC,YAAY,GAAGA,YAAYR,UAAUI,MAAM,EAAEI,YAAa;YACjE,MAAMC,OAAkB,EAAE;YAC1B,IAAK,IAAIC,WAAW,GAAGA,WAAWlB,cAAckB,WAAY;gBAC1D,MAAMC,MAAMX,SAAS,CAACQ,UAAU,CAACE,SAAS;gBAC1C,MAAME,UAAmB;oBACvBC,YAAY,IAAMjB,aAAae,IAAIT,YAAY;oBAC/CY,QAAQjB,kBAAkBc,IAAII,GAAG;oBACjC,GAAGJ,GAAG;oBACNK,UAAUL,IAAIK,QAAQ,KAAIX,uBAAAA,iCAAAA,WAAYY,IAAI,CAACC,CAAAA,YAAa3B,aAAaoB,IAAIT,YAAY,EAAEgB;gBACzF;gBAEAT,KAAKU,IAAI,CAACP;YACZ;YACAL,YAAYY,IAAI,CAACV;QACnB;QAEA,OAAOF;IACP,gGAAgG;IAChG,4FAA4F;IAC5F,yFAAyF;IACzF,oEAAoE;IACpE,uDAAuD;IACzD,GAAG;QAACZ;KAAM;IAEV,OAAOG;AACT"}
+{"version":3,"sources":["../src/components/CalendarDayGrid/useWeeks.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { compareDates, DAYS_IN_WEEK, getDayGrid } from '../../utils/index';\nimport type { DayInfo } from './CalendarDayGrid';\nimport type { CalendarDayGridProps } from './CalendarDayGrid.types';\n\n/**\n * @internal\n */\nexport function useWeeks(\n  props: CalendarDayGridProps,\n  onSelectDate: (date: Date) => void,\n  getSetRefCallback: (dayKey: string) => (element: HTMLElement | null) => void,\n): DayInfo[][] {\n  /**\n   * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation\n   * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.\n   */\n  const weeks = React.useMemo((): DayInfo[][] => {\n    const weeksGrid = getDayGrid(props);\n\n    const firstVisibleDay = weeksGrid[1][0].originalDate;\n    const lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n    const markedDays = props.getMarkedDays?.(firstVisibleDay, lastVisibleDay) || [];\n\n    /**\n     * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,\n     * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.\n     *\n     * Weeks[1... weeks.length - 2] contains the actual visible data\n     */\n    const returnValue: DayInfo[][] = [];\n\n    for (let weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n      const week: DayInfo[] = [];\n      for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n        const day = weeksGrid[weekIndex][dayIndex];\n        const dayInfo: DayInfo = {\n          onSelected: () => onSelectDate(day.originalDate),\n          setRef: getSetRefCallback(day.key),\n          ...day,\n          isMarked: day.isMarked || markedDays?.some(markedDay => compareDates(day.originalDate, markedDay)),\n        };\n\n        week.push(dayInfo);\n      }\n      returnValue.push(week);\n    }\n\n    return returnValue;\n    // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire\n    // props object may not be a good idea due to likely frequent mutation). It would be easy to\n    // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from\n    // Calendar and trying to fix it requires a huge cascade of changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props]);\n\n  return weeks;\n}\n"],"names":["React","compareDates","DAYS_IN_WEEK","getDayGrid","useWeeks","props","onSelectDate","getSetRefCallback","weeks","useMemo","weeksGrid","firstVisibleDay","originalDate","lastVisibleDay","length","markedDays","getMarkedDays","returnValue","weekIndex","week","dayIndex","day","dayInfo","onSelected","setRef","key","isMarked","some","markedDay","push"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,EAAEC,YAAY,EAAEC,UAAU,QAAQ,oBAAoB;AAI3E;;CAEC,GACD,OAAO,SAASC,SACdC,KAA2B,EAC3BC,YAAkC,EAClCC,iBAA4E;IAE5E;;;GAGC,GACD,MAAMC,QAAQR,MAAMS,OAAO,CAAC;YAKPJ;QAJnB,MAAMK,YAAYP,WAAWE;QAE7B,MAAMM,kBAAkBD,SAAS,CAAC,EAAE,CAAC,EAAE,CAACE,YAAY;QACpD,MAAMC,iBAAiBH,SAAS,CAACA,UAAUI,MAAM,GAAG,EAAE,CAAC,EAAE,CAACF,YAAY;QACtE,MAAMG,aAAaV,EAAAA,uBAAAA,MAAMW,aAAa,cAAnBX,2CAAAA,0BAAAA,OAAsBM,iBAAiBE,oBAAmB,EAAE;QAE/E;;;;;KAKC,GACD,MAAMI,cAA2B,EAAE;QAEnC,IAAK,IAAIC,YAAY,GAAGA,YAAYR,UAAUI,MAAM,EAAEI,YAAa;YACjE,MAAMC,OAAkB,EAAE;YAC1B,IAAK,IAAIC,WAAW,GAAGA,WAAWlB,cAAckB,WAAY;gBAC1D,MAAMC,MAAMX,SAAS,CAACQ,UAAU,CAACE,SAAS;gBAC1C,MAAME,UAAmB;oBACvBC,YAAY,IAAMjB,aAAae,IAAIT,YAAY;oBAC/CY,QAAQjB,kBAAkBc,IAAII,GAAG;oBACjC,GAAGJ,GAAG;oBACNK,UAAUL,IAAIK,QAAQ,KAAIX,uBAAAA,iCAAAA,WAAYY,IAAI,CAACC,CAAAA,YAAa3B,aAAaoB,IAAIT,YAAY,EAAEgB;gBACzF;gBAEAT,KAAKU,IAAI,CAACP;YACZ;YACAL,YAAYY,IAAI,CAACV;QACnB;QAEA,OAAOF;IACP,gGAAgG;IAChG,4FAA4F;IAC5F,yFAAyF;IACzF,oEAAoE;IACpE,uDAAuD;IACzD,GAAG;QAACZ;KAAM;IAEV,OAAOG;AACT"}

package/lib/components/CalendarMonth/CalendarMonth.js

@@ -6,6 +6,8 @@ import { mergeClasses } from '@griffel/react';
 import { addYears, compareDatePart, getMonthEnd, getMonthStart, getYearEnd, getYearStart, setMonth, DEFAULT_DATE_FORMATTING } from '../../utils';
 import { CalendarYear } from '../CalendarYear/CalendarYear';
 import { useCalendarMonthStyles_unstable } from './useCalendarMonthStyles.styles';
+import { DirectionalSlideIn } from '../../utils/calendarMotions';
+import { AnimationDirection } from '../../Calendar';
 const MONTHS_PER_ROW = 4;
 function useAnimateBackwards({ navigatedDate }) {
     const currentYear = navigatedDate.getFullYear();
@@ -13,7 +15,9 @@ function useAnimateBackwards({ navigatedDate }) {
     React.useEffect(()=>{
         previousYearRef.current = currentYear;
     });
+    // eslint-disable-next-line react-hooks/refs
     const previousYear = previousYearRef.current;
+    // eslint-disable-next-line react-hooks/refs
     if (previousYear === undefined || previousYear === currentYear) {
         return undefined;
     } else {
@@ -54,7 +58,7 @@ function useFocusLogic({ componentRef }) {
 /**
  * @internal
  */ export const CalendarMonth = (props)=>{
-    const { allFocusable, animationDirection, className, componentRef, dateTimeFormatter = DEFAULT_DATE_FORMATTING, highlightCurrentMonth, highlightSelectedMonth, maxDate, minDate, navigatedDate, navigationIcons, onHeaderSelect: onUserHeaderSelect, onNavigateDate, selectedDate, strings, today = new Date(), yearPickerHidden = false } = props;
+    const { allFocusable, animationDirection = AnimationDirection.Vertical, className, componentRef, dateTimeFormatter = DEFAULT_DATE_FORMATTING, highlightCurrentMonth, highlightSelectedMonth, maxDate, minDate, navigatedDate, navigationIcons, onHeaderSelect: onUserHeaderSelect, onNavigateDate, selectedDate, strings, today = new Date(), yearPickerHidden = false } = props;
     const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({
         componentRef
     });
@@ -191,8 +195,12 @@ function useFocusLogic({ componentRef }) {
         "aria-label": yearString
     }, rowIndexes.map((rowNum)=>{
         const monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
-        return /*#__PURE__*/ React.createElement("div", {
-            key: 'monthRow_' + rowNum + navigatedDate.getFullYear(),
+        return /*#__PURE__*/ React.createElement(DirectionalSlideIn, {
+            key: rowNum,
+            replayKey: navigatedDate.getFullYear(),
+            animationDirection: animationDirection,
+            animateBackwards: animateBackwards
+        }, /*#__PURE__*/ React.createElement("div", {
             role: "row",
             className: classNames.buttonRow
         }, monthsForRow.map((month, index)=>{
@@ -215,7 +223,7 @@ function useFocusLogic({ componentRef }) {
                 tabIndex: isInBounds ? 0 : -1,
                 type: "button"
             }, month);
-        }));
+        })));
     })));
 };
 CalendarMonth.displayName = 'CalendarMonth';

package/lib/components/CalendarMonth/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarMonth/CalendarMonth.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport {\n  addYears,\n  compareDatePart,\n  getMonthEnd,\n  getMonthStart,\n  getYearEnd,\n  getYearStart,\n  setMonth,\n  DEFAULT_DATE_FORMATTING,\n} from '../../utils';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { useCalendarMonthStyles_unstable } from './useCalendarMonthStyles.styles';\nimport type { CalendarMonthProps } from './CalendarMonth.types';\nimport type { CalendarYearRange, ICalendarYear } from '../CalendarYear/CalendarYear.types';\n\nconst MONTHS_PER_ROW = 4;\n\nfunction useAnimateBackwards({ navigatedDate }: { navigatedDate: CalendarMonthProps['navigatedDate'] }) {\n  const currentYear = navigatedDate.getFullYear();\n\n  const previousYearRef = React.useRef<number | undefined>(undefined);\n  React.useEffect(() => {\n    previousYearRef.current = currentYear;\n  });\n  const previousYear = previousYearRef.current;\n\n  if (previousYear === undefined || previousYear === currentYear) {\n    return undefined;\n  } else {\n    return previousYear > currentYear;\n  }\n}\n\nfunction useFocusLogic({ componentRef }: { componentRef: CalendarMonthProps['componentRef'] }) {\n  const navigatedMonthRef = React.useRef<HTMLButtonElement>(null);\n  const calendarYearRef = React.useRef<ICalendarYear>(null);\n  const focusOnUpdate = React.useRef(false);\n\n  const focus = React.useCallback(() => {\n    if (calendarYearRef.current) {\n      calendarYearRef.current.focus();\n    } else if (navigatedMonthRef.current) {\n      navigatedMonthRef.current.focus();\n    }\n  }, []);\n\n  React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n  React.useEffect(() => {\n    if (focusOnUpdate.current) {\n      focus();\n      focusOnUpdate.current = false;\n    }\n  });\n\n  const focusOnNextUpdate = () => {\n    focusOnUpdate.current = true;\n  };\n\n  return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = props => {\n  const {\n    allFocusable,\n    animationDirection,\n    className,\n    componentRef,\n    dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n    highlightCurrentMonth,\n    highlightSelectedMonth,\n    maxDate,\n    minDate,\n    navigatedDate,\n    navigationIcons,\n    onHeaderSelect: onUserHeaderSelect,\n    onNavigateDate,\n    selectedDate,\n    strings,\n    today = new Date(),\n    yearPickerHidden = false,\n  } = props;\n\n  const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({ componentRef });\n  const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);\n\n  const animateBackwards = useAnimateBackwards({ navigatedDate });\n\n  const selectMonthCallback = (newMonth: number): (() => void) => {\n    return () => onSelectMonth(newMonth);\n  };\n\n  const onSelectNextYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, -1), false);\n  };\n\n  const onSelectMonth = (newMonth: number): void => {\n    // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n    onUserHeaderSelect?.();\n    onNavigateDate(setMonth(navigatedDate, newMonth), true);\n  };\n\n  const onHeaderSelect = (): void => {\n    if (!yearPickerHidden) {\n      focusOnNextUpdate();\n      setIsYearPickerVisible(true);\n    } else {\n      onUserHeaderSelect?.();\n    }\n  };\n\n  const onSelectYear = (selectedYear: number) => {\n    focusOnNextUpdate();\n    const navYear = navigatedDate.getFullYear();\n    if (navYear !== selectedYear) {\n      let newNavigationDate = new Date(navigatedDate.getTime());\n      newNavigationDate.setFullYear(selectedYear);\n      // for min and max dates, adjust the new navigation date - perhaps this should be\n      // checked on the master navigation date handler (i.e. in Calendar)\n      if (maxDate && newNavigationDate > maxDate) {\n        newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n      } else if (minDate && newNavigationDate < minDate) {\n        newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n      }\n      onNavigateDate(newNavigationDate, true);\n    }\n    setIsYearPickerVisible(false);\n  };\n\n  const onYearPickerHeaderSelect = (focus: boolean): void => {\n    focusOnNextUpdate();\n    setIsYearPickerVisible(false);\n  };\n\n  const dateFormatter = dateTimeFormatter!;\n\n  // determine if previous/next years are in bounds\n  const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n  const isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n\n  const classNames = useCalendarMonthStyles_unstable({\n    className,\n    hasHeaderClickCallback: !!onUserHeaderSelect || !yearPickerHidden,\n    highlightCurrent: highlightCurrentMonth,\n    highlightSelected: highlightSelectedMonth,\n    animateBackwards,\n    animationDirection,\n  });\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n  if (isYearPickerVisible) {\n    const [onRenderYear, yearStrings] = getYearStrings({ dateTimeFormatter, navigatedDate, strings });\n    // use navigated date for the year picker\n    return (\n      <CalendarYear\n        key={'calendarYear'}\n        minYear={minDate ? minDate.getFullYear() : undefined}\n        maxYear={maxDate ? maxDate.getFullYear() : undefined}\n        // eslint-disable-next-line react/jsx-no-bind\n        onSelectYear={onSelectYear}\n        // eslint-disable-next-line react/jsx-no-bind\n        onHeaderSelect={onYearPickerHeaderSelect}\n        selectedYear={\n          selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined\n        }\n        navigatedYear={navigatedDate.getFullYear()}\n        navigationIcons={navigationIcons}\n        onRenderYear={onRenderYear}\n        strings={yearStrings}\n        componentRef={calendarYearRef}\n        highlightCurrentYear={highlightCurrentMonth}\n        highlightSelectedYear={highlightSelectedMonth}\n        animationDirection={animationDirection}\n      />\n    );\n  }\n\n  const rowIndexes = [];\n  for (let i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n    rowIndexes.push(i);\n  }\n\n  const yearString = dateFormatter.formatYear(navigatedDate);\n  const headerAriaLabel = strings.monthPickerHeaderAriaLabel\n    ? strings.monthPickerHeaderAriaLabel.replace('{0}', yearString)\n    : yearString;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.headerContainer}>\n        <button\n          className={classNames.currentItemButton}\n          onClick={onHeaderSelect}\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          aria-label={headerAriaLabel}\n          tabIndex={!!onUserHeaderSelect || !yearPickerHidden ? 0 : -1}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {yearString}\n          </span>\n        </button>\n        <div className={classNames.navigationButtonsContainer}>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isPrevYearInBounds && classNames.disabled)}\n            aria-disabled={!isPrevYearInBounds}\n            tabIndex={isPrevYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isPrevYearInBounds ? onSelectPrevYear : undefined}\n            onKeyDown={isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined}\n            title={\n              strings.prevYearAriaLabel\n                ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.upNavigation}\n          </button>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isNextYearInBounds && classNames.disabled)}\n            aria-disabled={!isNextYearInBounds}\n            tabIndex={isNextYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isNextYearInBounds ? onSelectNextYear : undefined}\n            onKeyDown={isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined}\n            title={\n              strings.nextYearAriaLabel\n                ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.downNavigation}\n          </button>\n        </div>\n      </div>\n      <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={yearString}>\n        {rowIndexes.map((rowNum: number) => {\n          const monthsForRow = strings!.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n          return (\n            <div key={'monthRow_' + rowNum + navigatedDate.getFullYear()} role=\"row\" className={classNames.buttonRow}>\n              {monthsForRow.map((month: string, index: number) => {\n                const monthIndex = rowNum * MONTHS_PER_ROW + index;\n                const indexedMonth = setMonth(navigatedDate, monthIndex);\n                const isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n                const isSelectedMonth = selectedDate.getMonth() === monthIndex;\n                const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n                const isInBounds =\n                  (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n                  (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n\n                return (\n                  <button\n                    ref={isNavigatedMonth ? navigatedMonthRef : undefined}\n                    role={'gridcell'}\n                    className={mergeClasses(\n                      classNames.itemButton,\n                      highlightCurrentMonth &&\n                        isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today) &&\n                        classNames.current,\n                      highlightSelectedMonth && isSelectedMonth && isSelectedYear && classNames.selected,\n                      !isInBounds && classNames.disabled,\n                    )}\n                    disabled={!allFocusable && !isInBounds}\n                    key={monthIndex}\n                    onClick={isInBounds ? selectMonthCallback(monthIndex) : undefined}\n                    onKeyDown={isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined}\n                    aria-label={dateFormatter.formatMonth(indexedMonth, strings!)}\n                    aria-selected={isNavigatedMonth}\n                    tabIndex={isInBounds ? 0 : -1}\n                    type=\"button\"\n                  >\n                    {month}\n                  </button>\n                );\n              })}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCalendarMonth.displayName = 'CalendarMonth';\n\nfunction getYearStrings({\n  dateTimeFormatter,\n  navigatedDate,\n  strings,\n}: Pick<CalendarMonthProps, 'dateTimeFormatter' | 'navigatedDate' | 'strings'>) {\n  const yearToString = (year: number) => {\n    if (dateTimeFormatter) {\n      // create a date based on the current nav date\n      const yearFormattingDate = new Date(navigatedDate.getTime());\n      yearFormattingDate.setFullYear(year);\n      return dateTimeFormatter.formatYear(yearFormattingDate);\n    }\n    return String(year);\n  };\n\n  const yearRangeToString = (yearRange: CalendarYearRange) => {\n    return `${yearToString(yearRange.fromYear)} - ${yearToString(yearRange.toYear)}`;\n  };\n\n  const yearRangeToNextDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.nextYearRangeAriaLabel ? `${strings.nextYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  const yearRangeToPrevDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.prevYearRangeAriaLabel ? `${strings.prevYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  return [\n    yearToString,\n    {\n      rangeAriaLabel: yearRangeToString,\n      prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n      nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n      headerAriaLabelFormatString: strings.monthPickerHeaderAriaLabel,\n    } as const,\n  ] as const;\n}\n\nfunction isCurrentMonth(month: number, year: number, today: Date): boolean {\n  return today.getFullYear() === year && today.getMonth() === month;\n}\n\nfunction onButtonKeyDown(callback: () => void): (ev: React.KeyboardEvent<HTMLButtonElement>) => void {\n  return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback();\n        break;\n    }\n  };\n}\n"],"names":["React","Enter","useArrowNavigationGroup","mergeClasses","addYears","compareDatePart","getMonthEnd","getMonthStart","getYearEnd","getYearStart","setMonth","DEFAULT_DATE_FORMATTING","CalendarYear","useCalendarMonthStyles_unstable","MONTHS_PER_ROW","useAnimateBackwards","navigatedDate","currentYear","getFullYear","previousYearRef","useRef","undefined","useEffect","current","previousYear","useFocusLogic","componentRef","navigatedMonthRef","calendarYearRef","focusOnUpdate","focus","useCallback","useImperativeHandle","focusOnNextUpdate","CalendarMonth","props","allFocusable","animationDirection","className","dateTimeFormatter","highlightCurrentMonth","highlightSelectedMonth","maxDate","minDate","navigationIcons","onHeaderSelect","onUserHeaderSelect","onNavigateDate","selectedDate","strings","today","Date","yearPickerHidden","isYearPickerVisible","setIsYearPickerVisible","useState","animateBackwards","selectMonthCallback","newMonth","onSelectMonth","onSelectNextYear","onSelectPrevYear","onSelectYear","selectedYear","navYear","newNavigationDate","getTime","setFullYear","getMonth","onYearPickerHeaderSelect","dateFormatter","isPrevYearInBounds","isNextYearInBounds","classNames","hasHeaderClickCallback","highlightCurrent","highlightSelected","arrowNavigationAttributes","axis","onRenderYear","yearStrings","getYearStrings","key","minYear","maxYear","navigatedYear","highlightCurrentYear","highlightSelectedYear","rowIndexes","i","shortMonths","length","push","yearString","formatYear","headerAriaLabel","monthPickerHeaderAriaLabel","replace","div","root","headerContainer","button","currentItemButton","onClick","onKeyDown","onButtonKeyDown","aria-label","tabIndex","type","span","aria-live","aria-atomic","navigationButtonsContainer","navigationButton","disabled","aria-disabled","title","prevYearAriaLabel","upNavigation","nextYearAriaLabel","downNavigation","gridContainer","role","map","rowNum","monthsForRow","slice","buttonRow","month","index","monthIndex","indexedMonth","isNavigatedMonth","isSelectedMonth","isSelectedYear","isInBounds","ref","itemButton","isCurrentMonth","selected","formatMonth","aria-selected","displayName","yearToString","year","yearFormattingDate","String","yearRangeToString","yearRange","fromYear","toYear","yearRangeToNextDecadeLabel","nextYearRangeAriaLabel","yearRangeToPrevDecadeLabel","prevYearRangeAriaLabel","rangeAriaLabel","prevRangeAriaLabel","nextRangeAriaLabel","headerAriaLabelFormatString","callback","ev"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CalendarMonth/CalendarMonth.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport {\n  addYears,\n  compareDatePart,\n  getMonthEnd,\n  getMonthStart,\n  getYearEnd,\n  getYearStart,\n  setMonth,\n  DEFAULT_DATE_FORMATTING,\n} from '../../utils';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { useCalendarMonthStyles_unstable } from './useCalendarMonthStyles.styles';\nimport type { CalendarMonthProps } from './CalendarMonth.types';\nimport type { CalendarYearRange, ICalendarYear } from '../CalendarYear/CalendarYear.types';\nimport { DirectionalSlideIn } from '../../utils/calendarMotions';\nimport { AnimationDirection } from '../../Calendar';\n\nconst MONTHS_PER_ROW = 4;\n\nfunction useAnimateBackwards({ navigatedDate }: { navigatedDate: CalendarMonthProps['navigatedDate'] }) {\n  const currentYear = navigatedDate.getFullYear();\n\n  const previousYearRef = React.useRef<number | undefined>(undefined);\n  React.useEffect(() => {\n    previousYearRef.current = currentYear;\n  });\n  // eslint-disable-next-line react-hooks/refs\n  const previousYear = previousYearRef.current;\n\n  // eslint-disable-next-line react-hooks/refs\n  if (previousYear === undefined || previousYear === currentYear) {\n    return undefined;\n  } else {\n    return previousYear > currentYear;\n  }\n}\n\nfunction useFocusLogic({ componentRef }: { componentRef: CalendarMonthProps['componentRef'] }) {\n  const navigatedMonthRef = React.useRef<HTMLButtonElement>(null);\n  const calendarYearRef = React.useRef<ICalendarYear>(null);\n  const focusOnUpdate = React.useRef(false);\n\n  const focus = React.useCallback(() => {\n    if (calendarYearRef.current) {\n      calendarYearRef.current.focus();\n    } else if (navigatedMonthRef.current) {\n      navigatedMonthRef.current.focus();\n    }\n  }, []);\n\n  React.useImperativeHandle(componentRef, () => ({ focus }), [focus]);\n\n  React.useEffect(() => {\n    if (focusOnUpdate.current) {\n      focus();\n      focusOnUpdate.current = false;\n    }\n  });\n\n  const focusOnNextUpdate = () => {\n    focusOnUpdate.current = true;\n  };\n\n  return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarMonth: React.FunctionComponent<CalendarMonthProps> = props => {\n  const {\n    allFocusable,\n    animationDirection = AnimationDirection.Vertical,\n    className,\n    componentRef,\n    dateTimeFormatter = DEFAULT_DATE_FORMATTING,\n    highlightCurrentMonth,\n    highlightSelectedMonth,\n    maxDate,\n    minDate,\n    navigatedDate,\n    navigationIcons,\n    onHeaderSelect: onUserHeaderSelect,\n    onNavigateDate,\n    selectedDate,\n    strings,\n    today = new Date(),\n    yearPickerHidden = false,\n  } = props;\n\n  const [navigatedMonthRef, calendarYearRef, focusOnNextUpdate] = useFocusLogic({ componentRef });\n  const [isYearPickerVisible, setIsYearPickerVisible] = React.useState(false);\n\n  const animateBackwards = useAnimateBackwards({ navigatedDate });\n\n  const selectMonthCallback = (newMonth: number): (() => void) => {\n    return () => onSelectMonth(newMonth);\n  };\n\n  const onSelectNextYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevYear = (): void => {\n    onNavigateDate(addYears(navigatedDate, -1), false);\n  };\n\n  const onSelectMonth = (newMonth: number): void => {\n    // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n    onUserHeaderSelect?.();\n    onNavigateDate(setMonth(navigatedDate, newMonth), true);\n  };\n\n  const onHeaderSelect = (): void => {\n    if (!yearPickerHidden) {\n      focusOnNextUpdate();\n      setIsYearPickerVisible(true);\n    } else {\n      onUserHeaderSelect?.();\n    }\n  };\n\n  const onSelectYear = (selectedYear: number) => {\n    focusOnNextUpdate();\n    const navYear = navigatedDate.getFullYear();\n    if (navYear !== selectedYear) {\n      let newNavigationDate = new Date(navigatedDate.getTime());\n      newNavigationDate.setFullYear(selectedYear);\n      // for min and max dates, adjust the new navigation date - perhaps this should be\n      // checked on the master navigation date handler (i.e. in Calendar)\n      if (maxDate && newNavigationDate > maxDate) {\n        newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n      } else if (minDate && newNavigationDate < minDate) {\n        newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n      }\n      onNavigateDate(newNavigationDate, true);\n    }\n    setIsYearPickerVisible(false);\n  };\n\n  const onYearPickerHeaderSelect = (focus: boolean): void => {\n    focusOnNextUpdate();\n    setIsYearPickerVisible(false);\n  };\n\n  const dateFormatter = dateTimeFormatter!;\n\n  // determine if previous/next years are in bounds\n  const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n  const isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n\n  const classNames = useCalendarMonthStyles_unstable({\n    className,\n    hasHeaderClickCallback: !!onUserHeaderSelect || !yearPickerHidden,\n    highlightCurrent: highlightCurrentMonth,\n    highlightSelected: highlightSelectedMonth,\n    animateBackwards,\n    animationDirection,\n  });\n\n  const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n  if (isYearPickerVisible) {\n    const [onRenderYear, yearStrings] = getYearStrings({ dateTimeFormatter, navigatedDate, strings });\n    // use navigated date for the year picker\n    return (\n      <CalendarYear\n        key={'calendarYear'}\n        minYear={minDate ? minDate.getFullYear() : undefined}\n        maxYear={maxDate ? maxDate.getFullYear() : undefined}\n        // eslint-disable-next-line react/jsx-no-bind\n        onSelectYear={onSelectYear}\n        // eslint-disable-next-line react/jsx-no-bind\n        onHeaderSelect={onYearPickerHeaderSelect}\n        selectedYear={\n          selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined\n        }\n        navigatedYear={navigatedDate.getFullYear()}\n        navigationIcons={navigationIcons}\n        onRenderYear={onRenderYear}\n        strings={yearStrings}\n        componentRef={calendarYearRef}\n        highlightCurrentYear={highlightCurrentMonth}\n        highlightSelectedYear={highlightSelectedMonth}\n        animationDirection={animationDirection}\n      />\n    );\n  }\n\n  const rowIndexes = [];\n  for (let i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n    rowIndexes.push(i);\n  }\n\n  const yearString = dateFormatter.formatYear(navigatedDate);\n  const headerAriaLabel = strings.monthPickerHeaderAriaLabel\n    ? strings.monthPickerHeaderAriaLabel.replace('{0}', yearString)\n    : yearString;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.headerContainer}>\n        <button\n          className={classNames.currentItemButton}\n          onClick={onHeaderSelect}\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          aria-label={headerAriaLabel}\n          tabIndex={!!onUserHeaderSelect || !yearPickerHidden ? 0 : -1}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {yearString}\n          </span>\n        </button>\n        <div className={classNames.navigationButtonsContainer}>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isPrevYearInBounds && classNames.disabled)}\n            aria-disabled={!isPrevYearInBounds}\n            tabIndex={isPrevYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isPrevYearInBounds ? onSelectPrevYear : undefined}\n            onKeyDown={isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined}\n            title={\n              strings.prevYearAriaLabel\n                ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.upNavigation}\n          </button>\n          <button\n            className={mergeClasses(classNames.navigationButton, !isNextYearInBounds && classNames.disabled)}\n            aria-disabled={!isNextYearInBounds}\n            tabIndex={isNextYearInBounds ? undefined : allFocusable ? 0 : -1}\n            onClick={isNextYearInBounds ? onSelectNextYear : undefined}\n            onKeyDown={isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined}\n            title={\n              strings.nextYearAriaLabel\n                ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n                : undefined\n            }\n            type=\"button\"\n          >\n            {navigationIcons.downNavigation}\n          </button>\n        </div>\n      </div>\n      <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={yearString}>\n        {rowIndexes.map((rowNum: number) => {\n          const monthsForRow = strings!.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n          return (\n            <DirectionalSlideIn\n              key={rowNum}\n              replayKey={navigatedDate.getFullYear()}\n              animationDirection={animationDirection}\n              animateBackwards={animateBackwards}\n            >\n              <div role=\"row\" className={classNames.buttonRow}>\n                {monthsForRow.map((month: string, index: number) => {\n                  const monthIndex = rowNum * MONTHS_PER_ROW + index;\n                  const indexedMonth = setMonth(navigatedDate, monthIndex);\n                  const isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n                  const isSelectedMonth = selectedDate.getMonth() === monthIndex;\n                  const isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n                  const isInBounds =\n                    (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n                    (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n\n                  return (\n                    <button\n                      ref={isNavigatedMonth ? navigatedMonthRef : undefined}\n                      role={'gridcell'}\n                      className={mergeClasses(\n                        classNames.itemButton,\n                        highlightCurrentMonth &&\n                          isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today) &&\n                          classNames.current,\n                        highlightSelectedMonth && isSelectedMonth && isSelectedYear && classNames.selected,\n                        !isInBounds && classNames.disabled,\n                      )}\n                      disabled={!allFocusable && !isInBounds}\n                      key={monthIndex}\n                      onClick={isInBounds ? selectMonthCallback(monthIndex) : undefined}\n                      onKeyDown={isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined}\n                      aria-label={dateFormatter.formatMonth(indexedMonth, strings!)}\n                      aria-selected={isNavigatedMonth}\n                      tabIndex={isInBounds ? 0 : -1}\n                      type=\"button\"\n                    >\n                      {month}\n                    </button>\n                  );\n                })}\n              </div>\n            </DirectionalSlideIn>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\nCalendarMonth.displayName = 'CalendarMonth';\n\nfunction getYearStrings({\n  dateTimeFormatter,\n  navigatedDate,\n  strings,\n}: Pick<CalendarMonthProps, 'dateTimeFormatter' | 'navigatedDate' | 'strings'>) {\n  const yearToString = (year: number) => {\n    if (dateTimeFormatter) {\n      // create a date based on the current nav date\n      const yearFormattingDate = new Date(navigatedDate.getTime());\n      yearFormattingDate.setFullYear(year);\n      return dateTimeFormatter.formatYear(yearFormattingDate);\n    }\n    return String(year);\n  };\n\n  const yearRangeToString = (yearRange: CalendarYearRange) => {\n    return `${yearToString(yearRange.fromYear)} - ${yearToString(yearRange.toYear)}`;\n  };\n\n  const yearRangeToNextDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.nextYearRangeAriaLabel ? `${strings.nextYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  const yearRangeToPrevDecadeLabel = (yearRange: CalendarYearRange) => {\n    return strings.prevYearRangeAriaLabel ? `${strings.prevYearRangeAriaLabel} ${yearRangeToString(yearRange)}` : '';\n  };\n\n  return [\n    yearToString,\n    {\n      rangeAriaLabel: yearRangeToString,\n      prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n      nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n      headerAriaLabelFormatString: strings.monthPickerHeaderAriaLabel,\n    } as const,\n  ] as const;\n}\n\nfunction isCurrentMonth(month: number, year: number, today: Date): boolean {\n  return today.getFullYear() === year && today.getMonth() === month;\n}\n\nfunction onButtonKeyDown(callback: () => void): (ev: React.KeyboardEvent<HTMLButtonElement>) => void {\n  return (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback();\n        break;\n    }\n  };\n}\n"],"names":["React","Enter","useArrowNavigationGroup","mergeClasses","addYears","compareDatePart","getMonthEnd","getMonthStart","getYearEnd","getYearStart","setMonth","DEFAULT_DATE_FORMATTING","CalendarYear","useCalendarMonthStyles_unstable","DirectionalSlideIn","AnimationDirection","MONTHS_PER_ROW","useAnimateBackwards","navigatedDate","currentYear","getFullYear","previousYearRef","useRef","undefined","useEffect","current","previousYear","useFocusLogic","componentRef","navigatedMonthRef","calendarYearRef","focusOnUpdate","focus","useCallback","useImperativeHandle","focusOnNextUpdate","CalendarMonth","props","allFocusable","animationDirection","Vertical","className","dateTimeFormatter","highlightCurrentMonth","highlightSelectedMonth","maxDate","minDate","navigationIcons","onHeaderSelect","onUserHeaderSelect","onNavigateDate","selectedDate","strings","today","Date","yearPickerHidden","isYearPickerVisible","setIsYearPickerVisible","useState","animateBackwards","selectMonthCallback","newMonth","onSelectMonth","onSelectNextYear","onSelectPrevYear","onSelectYear","selectedYear","navYear","newNavigationDate","getTime","setFullYear","getMonth","onYearPickerHeaderSelect","dateFormatter","isPrevYearInBounds","isNextYearInBounds","classNames","hasHeaderClickCallback","highlightCurrent","highlightSelected","arrowNavigationAttributes","axis","onRenderYear","yearStrings","getYearStrings","key","minYear","maxYear","navigatedYear","highlightCurrentYear","highlightSelectedYear","rowIndexes","i","shortMonths","length","push","yearString","formatYear","headerAriaLabel","monthPickerHeaderAriaLabel","replace","div","root","headerContainer","button","currentItemButton","onClick","onKeyDown","onButtonKeyDown","aria-label","tabIndex","type","span","aria-live","aria-atomic","navigationButtonsContainer","navigationButton","disabled","aria-disabled","title","prevYearAriaLabel","upNavigation","nextYearAriaLabel","downNavigation","gridContainer","role","map","rowNum","monthsForRow","slice","replayKey","buttonRow","month","index","monthIndex","indexedMonth","isNavigatedMonth","isSelectedMonth","isSelectedYear","isInBounds","ref","itemButton","isCurrentMonth","selected","formatMonth","aria-selected","displayName","yearToString","year","yearFormattingDate","String","yearRangeToString","yearRange","fromYear","toYear","yearRangeToNextDecadeLabel","nextYearRangeAriaLabel","yearRangeToPrevDecadeLabel","prevYearRangeAriaLabel","rangeAriaLabel","prevRangeAriaLabel","nextRangeAriaLabel","headerAriaLabelFormatString","callback","ev"],"mappings":"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"}

package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js

@@ -9,5 +9,6 @@ import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarP
 export const useCalendarMonthStyles_unstable = props => {
   'use no memo';
 
+  // justified: compiler would optimize useCalendarMonthStyles_unstable — manual opt-out to preserve runtime behavior
   return useCalendarPickerStyles_unstable(props);
 };

package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCalendarPickerStyles_unstable","useCalendarMonthStyles_unstable","props"],"sources":["useCalendarMonthStyles.styles.js"],"sourcesContent":["'use client';\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\n/**\n * Apply styling to the CalendarMonth slots based on the state\n *\n * @internal\n */ export const useCalendarMonthStyles_unstable = (props)=>{\n    'use no memo';\n    return useCalendarPickerStyles_unstable(props);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,gCAAgC,QAAQ,kDAAkD;AACnG;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,OAAOF,gCAAgC,CAACE,KAAK,CAAC;AAClD,CAAC","ignoreList":[]}
+{"version":3,"names":["useCalendarPickerStyles_unstable","useCalendarMonthStyles_unstable","props"],"sources":["useCalendarMonthStyles.styles.js"],"sourcesContent":["'use client';\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\n/**\n * Apply styling to the CalendarMonth slots based on the state\n *\n * @internal\n */ export const useCalendarMonthStyles_unstable = (props)=>{\n    'use no memo'; // justified: compiler would optimize useCalendarMonthStyles_unstable — manual opt-out to preserve runtime behavior\n    return useCalendarPickerStyles_unstable(props);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,gCAAgC,QAAQ,kDAAkD;AACnG;AACA;AACA;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EAAE;EACf,OAAOF,gCAAgC,CAACE,KAAK,CAAC;AAClD,CAAC","ignoreList":[]}

package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js

@@ -5,6 +5,6 @@ import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarP
  *
  * @internal
  */ export const useCalendarMonthStyles_unstable = (props)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCalendarMonthStyles_unstable — manual opt-out to preserve runtime behavior
     return useCalendarPickerStyles_unstable(props);
 };

package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarMonth/useCalendarMonthStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarMonthStyleProps, CalendarMonthStyles } from './CalendarMonth.types';\n\n/**\n * Apply styling to the CalendarMonth slots based on the state\n *\n * @internal\n */\nexport const useCalendarMonthStyles_unstable = (props: CalendarMonthStyleProps): CalendarMonthStyles => {\n  'use no memo';\n\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarPickerStyles_unstable","useCalendarMonthStyles_unstable","props"],"mappings":"AAAA;AAEA,SAASA,gCAAgC,QAAQ,mDAAmD;AAGpG;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,OAAOF,iCAAiCE;AAC1C,EAAE"}
+{"version":3,"sources":["../src/components/CalendarMonth/useCalendarMonthStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarMonthStyleProps, CalendarMonthStyles } from './CalendarMonth.types';\n\n/**\n * Apply styling to the CalendarMonth slots based on the state\n *\n * @internal\n */\nexport const useCalendarMonthStyles_unstable = (props: CalendarMonthStyleProps): CalendarMonthStyles => {\n  'use no memo'; // justified: compiler would optimize useCalendarMonthStyles_unstable — manual opt-out to preserve runtime behavior\n\n  return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarPickerStyles_unstable","useCalendarMonthStyles_unstable","props"],"mappings":"AAAA;AAEA,SAASA,gCAAgC,QAAQ,mDAAmD;AAGpG;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,eAAe,mHAAmH;IAElI,OAAOF,iCAAiCE;AAC1C,EAAE"}

package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.js

@@ -2,8 +2,6 @@
 
 import { tokens } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { DURATION_2, DURATION_3, EASING_FUNCTION_1, EASING_FUNCTION_2, FADE_IN, SLIDE_DOWN_IN20, SLIDE_LEFT_IN20, SLIDE_RIGHT_IN20, SLIDE_UP_IN20 } from '../../utils/animations';
-import { AnimationDirection } from '../Calendar/Calendar.types';
 /**
  * @internal
  */
@@ -92,12 +90,6 @@ const useCurrentItemButtonStyles = /*#__PURE__*/__styles({
     B0ocmuz: ["f1td8mcv", "f1udkdxo"],
     fsow6f: ["f1o700av", "fes3tcz"]
   },
-  animation: {
-    vin17d: "fhsqnsn",
-    Bf5fcs: "fywypte",
-    Bv12yb3: "f1h7u52p",
-    Ezkn3b: "fjq4c94"
-  },
   hasHeaderClickCallback: {
     Jwef8y: "f18a0fwf",
     Bi91k9c: "f3sdaeg",
@@ -123,8 +115,7 @@ const useCurrentItemButtonStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".f1udkdxo{padding:0 10px 0 4px;}", {
     p: -1
-  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".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;}}"],
+  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"],
   h: [".f18a0fwf:hover{background-color:var(--colorBrandBackgroundInvertedHover);}", ".f3sdaeg:hover{color:var(--colorBrandForegroundOnLightHover);}", ".f8491dx:hover{cursor:pointer;}", [".f15rpok4:hover{outline:1px solid var(--colorTransparentStroke);}", {
     p: -1
   }], ".f1wvkgvo:hover:active{background-color:var(--colorBrandBackgroundInvertedPressed);}", ".f1wdoaqd:hover:active{color:var(--colorBrandForegroundOnLightPressed);}", ".f13c0t7h:hover:active{cursor:pointer;}", [".fy2scak:hover:active{outline:1px solid var(--colorTransparentStroke);}", {
@@ -218,27 +209,9 @@ const useButtonRowStyles = /*#__PURE__*/__styles({
   base: {
     jrapky: "f15tpi3i",
     sw9gdo: "f1gdbdba"
-  },
-  animation: {
-    vin17d: "f5f2jbu",
-    Bf5fcs: "fywypte",
-    Ezkn3b: "f1ee2ue"
-  },
-  horizontalBackward: {
-    Bv12yb3: ["f1o9w3l8", "f1kwjajc"]
-  },
-  horizontalForward: {
-    Bv12yb3: ["f1kwjajc", "f1o9w3l8"]
-  },
-  verticalBackward: {
-    Bv12yb3: "fgl3yn7"
-  },
-  verticalForward: {
-    Bv12yb3: "faiu5ye"
   }
 }, {
-  d: [".f15tpi3i{margin-bottom:16px;}", ".f1gdbdba:last-of-type{margin-bottom:0;}", ".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;}"],
-  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);}}"]
+  d: [".f15tpi3i{margin-bottom:16px;}", ".f1gdbdba:last-of-type{margin-bottom:0;}"]
 });
 const useItemButtonStyles = /*#__PURE__*/__styles({
   base: {
@@ -429,6 +402,7 @@ const useDisabledStyles = /*#__PURE__*/__styles({
 export const useCalendarPickerStyles_unstable = props => {
   'use no memo';
 
+  // justified: compiler would optimize useCalendarPickerStyles_unstable — manual opt-out to preserve runtime behavior
   const rootStyles = useRootStyles();
   const headerContainerStyles = useHeaderContainerStyles();
   const currentItemButtonStyles = useCurrentItemButtonStyles();
@@ -441,8 +415,6 @@ export const useCalendarPickerStyles_unstable = props => {
   const selectedStyles = useSelectedStyles();
   const disabledStyles = useDisabledStyles();
   const {
-    animateBackwards,
-    animationDirection,
     className,
     hasHeaderClickCallback,
     highlightCurrent,
@@ -451,11 +423,11 @@ export const useCalendarPickerStyles_unstable = props => {
   return {
     root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),
     headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),
-    currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, animateBackwards !== undefined && currentItemButtonStyles.animation, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
+    currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
     navigationButtonsContainer: mergeClasses(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),
     navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),
     gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),
-    buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base, buttonRowStyles.animation, animateBackwards !== undefined && (animationDirection === AnimationDirection.Horizontal ? animateBackwards ? buttonRowStyles.horizontalBackward : buttonRowStyles.horizontalForward : animateBackwards ? buttonRowStyles.verticalBackward : buttonRowStyles.verticalForward)),
+    buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base),
     itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),
     selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),
     current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),