@fluentui/react-calendar-compat 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,19 +1,45 @@
 # Change Log - @fluentui/react-calendar-compat
 
-This log was last generated on Thu, 23 Apr 2026 11:59:55 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.4.3)
+
+Wed, 24 Jun 2026 11:03:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.4.2..@fluentui/react-calendar-compat_v0.4.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- refactor(react-calendar): migrate to motion components ([PR #35666](https://github.com/microsoft/fluentui/pull/35666) by robertpenner@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-motion to v9.16.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.6 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.4.2)
+
+Tue, 26 May 2026 09:39:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.4.1..@fluentui/react-calendar-compat_v0.4.2)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.4.1)
 
-Thu, 23 Apr 2026 11:59:55 GMT 
+Thu, 23 Apr 2026 14:21:18 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.4.0..@fluentui/react-calendar-compat_v0.4.1)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.4.0)
 

package/lib/components/Calendar/useCalendarStyles.styles.js

@@ -185,6 +185,7 @@ const useLiveRegionStyles = /*#__PURE__*/__styles({
 export const useCalendarStyles_unstable = props => {
   'use no memo';
 
+  // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior
   const rootStyles = useRootStyles();
   const dividerStyles = useDividerStyles();
   const monthPickerWrapperStyles = useMonthPickerWrapperStyles();

package/lib/components/Calendar/useCalendarStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","mc9l5x","a9b677","normalize","E5pizo","B7ck84d","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","monthPickerNotVisible","Beiy3e4","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","d","p","useDividerStyles","h3c5rm","vrafjx","Bekrc4i","u1mtju","Bhzewxz","useMonthPickerWrapperStyles","useGoTodayButtonStyles","qb2dma","De3pzq","icvyot","oivjwe","wvpqe5","B5kzvoi","sj55zd","Bahqtrf","Be2twd7","Bqenvij","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","seuwu7","Jwef8y","Bi91k9c","eoavqd","Bv6y5q5","uq1ffc","Bokaozi","Bfrni1f","Bkzqrjd","hu2duy","n9pfp1","dfw8yp","qugvs6","B2d53fq","Dyrjrp","Be90el1","h","m","useLiveRegionStyles","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","i8vvqc","g2u3we","B4j52fo","irswps","qhf8xq","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"sources":["useCalendarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarClassNames = {\n    root: 'fui-Calendar',\n    divider: 'fui-Calendar__divider',\n    goTodayButton: 'fui-Calendar__goTodayButton',\n    monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n    liveRegion: 'fui-Calendar__liveRegion'\n};\nconst useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        width: '220px'\n    },\n    normalize: {\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        margin: '0',\n        padding: '0'\n    },\n    monthPickerNotVisible: {\n        flexDirection: 'column'\n    },\n    dayAndMonthPickersVisible: {\n        width: '440px'\n    },\n    dayPickerVisibleAndWeekNumbersShown: {\n        width: '250px'\n    },\n    dayAndMonthPickersVisibleAndWeekNumbersShown: {\n        width: '470px'\n    }\n});\nconst useDividerStyles = makeStyles({\n    base: {\n        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n        top: 0\n    }\n});\nconst useMonthPickerWrapperStyles = makeStyles({\n    base: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\nconst useGoTodayButtonStyles = makeStyles({\n    base: {\n        alignSelf: 'flex-end',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        bottom: 0,\n        boxSizing: 'content-box',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase200,\n        height: '30px',\n        lineHeight: '30px',\n        marginRight: '16px',\n        marginTop: '3px',\n        overflow: 'visible',\n        padding: '0 4px',\n        '& div': {\n            fontSize: tokens.fontSizeBase200\n        },\n        '&:hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorBrandForeground1,\n            cursor: 'pointer',\n            '@media (forced-colors: active)': {\n                outline: tokens.strokeWidthThin,\n                borderRadius: tokens.borderRadiusSmall\n            }\n        },\n        '&:hover:active': {\n            color: tokens.colorBrandForeground2\n        },\n        '&:disabled': {\n            color: tokens.colorNeutralForegroundDisabled,\n            pointerEvents: 'none'\n        }\n    }\n});\nconst useLiveRegionStyles = makeStyles({\n    base: {\n        border: 'none',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px'\n    }\n});\n/**\n * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */ export const useCalendarStyles_unstable = (props)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const dividerStyles = useDividerStyles();\n    const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n    const goTodayButtonStyles = useGoTodayButtonStyles();\n    const liveRegionStyles = useLiveRegionStyles();\n    const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n    return {\n        root: mergeClasses(calendarClassNames.root, rootStyles.base, rootStyles.normalize, !isMonthPickerVisible && rootStyles.monthPickerNotVisible, isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible, isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown, isDayPickerVisible && isMonthPickerVisible && showWeekNumbers && rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown, className),\n        divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n        monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n        goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n        liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","mc9l5x","a9b677","normalize","E5pizo","B7ck84d","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","monthPickerNotVisible","Beiy3e4","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","d","p","useDividerStyles","h3c5rm","vrafjx","Bekrc4i","u1mtju","Bhzewxz","useMonthPickerWrapperStyles","useGoTodayButtonStyles","qb2dma","De3pzq","icvyot","oivjwe","wvpqe5","B5kzvoi","sj55zd","Bahqtrf","Be2twd7","Bqenvij","Bg96gwp","B68tc82","Bmxbyg5","Bpg54ce","seuwu7","Jwef8y","Bi91k9c","eoavqd","Bv6y5q5","uq1ffc","Bokaozi","Bfrni1f","Bkzqrjd","hu2duy","n9pfp1","dfw8yp","qugvs6","B2d53fq","Dyrjrp","Be90el1","h","m","useLiveRegionStyles","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","i8vvqc","g2u3we","B4j52fo","irswps","qhf8xq","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"sources":["useCalendarStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarClassNames = {\n    root: 'fui-Calendar',\n    divider: 'fui-Calendar__divider',\n    goTodayButton: 'fui-Calendar__goTodayButton',\n    monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n    liveRegion: 'fui-Calendar__liveRegion'\n};\nconst useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        width: '220px'\n    },\n    normalize: {\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        margin: '0',\n        padding: '0'\n    },\n    monthPickerNotVisible: {\n        flexDirection: 'column'\n    },\n    dayAndMonthPickersVisible: {\n        width: '440px'\n    },\n    dayPickerVisibleAndWeekNumbersShown: {\n        width: '250px'\n    },\n    dayAndMonthPickersVisibleAndWeekNumbersShown: {\n        width: '470px'\n    }\n});\nconst useDividerStyles = makeStyles({\n    base: {\n        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n        top: 0\n    }\n});\nconst useMonthPickerWrapperStyles = makeStyles({\n    base: {\n        display: 'flex',\n        flexDirection: 'column'\n    }\n});\nconst useGoTodayButtonStyles = makeStyles({\n    base: {\n        alignSelf: 'flex-end',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        bottom: 0,\n        boxSizing: 'content-box',\n        color: tokens.colorNeutralForeground1,\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase200,\n        height: '30px',\n        lineHeight: '30px',\n        marginRight: '16px',\n        marginTop: '3px',\n        overflow: 'visible',\n        padding: '0 4px',\n        '& div': {\n            fontSize: tokens.fontSizeBase200\n        },\n        '&:hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorBrandForeground1,\n            cursor: 'pointer',\n            '@media (forced-colors: active)': {\n                outline: tokens.strokeWidthThin,\n                borderRadius: tokens.borderRadiusSmall\n            }\n        },\n        '&:hover:active': {\n            color: tokens.colorBrandForeground2\n        },\n        '&:disabled': {\n            color: tokens.colorNeutralForegroundDisabled,\n            pointerEvents: 'none'\n        }\n    }\n});\nconst useLiveRegionStyles = makeStyles({\n    base: {\n        border: 'none',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: '0',\n        position: 'absolute',\n        width: '1px'\n    }\n});\n/**\n * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */ export const useCalendarStyles_unstable = (props)=>{\n    'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior\n    const rootStyles = useRootStyles();\n    const dividerStyles = useDividerStyles();\n    const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n    const goTodayButtonStyles = useGoTodayButtonStyles();\n    const liveRegionStyles = useLiveRegionStyles();\n    const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n    return {\n        root: mergeClasses(calendarClassNames.root, rootStyles.base, rootStyles.normalize, !isMonthPickerVisible && rootStyles.monthPickerNotVisible, isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible, isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown, isDayPickerVisible && isMonthPickerVisible && showWeekNumbers && rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown, className),\n        divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n        monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n        goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n        liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Calendar/useCalendarStyles.styles.raw.js

@@ -99,7 +99,7 @@ const useLiveRegionStyles = makeStyles({
  *
  * @internal
  */ export const useCalendarStyles_unstable = (props)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior
     const rootStyles = useRootStyles();
     const dividerStyles = useDividerStyles();
     const monthPickerWrapperStyles = useMonthPickerWrapperStyles();

package/lib/components/Calendar/useCalendarStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n  root: 'fui-Calendar',\n  divider: 'fui-Calendar__divider',\n  goTodayButton: 'fui-Calendar__goTodayButton',\n  monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n  liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    width: '220px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  monthPickerNotVisible: {\n    flexDirection: 'column',\n  },\n  dayAndMonthPickersVisible: {\n    width: '440px',\n  },\n  dayPickerVisibleAndWeekNumbersShown: {\n    width: '250px',\n  },\n  dayAndMonthPickersVisibleAndWeekNumbersShown: {\n    width: '470px',\n  },\n});\n\nconst useDividerStyles = makeStyles({\n  base: {\n    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n    top: 0,\n  },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    bottom: 0,\n    boxSizing: 'content-box',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '30px',\n    lineHeight: '30px',\n    marginRight: '16px',\n    marginTop: '3px',\n    overflow: 'visible',\n    padding: '0 4px',\n\n    '& div': {\n      fontSize: tokens.fontSizeBase200,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorBrandForeground1,\n      cursor: 'pointer',\n\n      '@media (forced-colors: active)': {\n        outline: tokens.strokeWidthThin,\n        borderRadius: tokens.borderRadiusSmall,\n      },\n    },\n    '&:hover:active': {\n      color: tokens.colorBrandForeground2,\n    },\n    '&:disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\nconst useLiveRegionStyles = makeStyles({\n  base: {\n    border: 'none',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0',\n    position: 'absolute',\n    width: '1px',\n  },\n});\n\n/**\n * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n  const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n  const goTodayButtonStyles = useGoTodayButtonStyles();\n  const liveRegionStyles = useLiveRegionStyles();\n\n  const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarClassNames.root,\n      rootStyles.base,\n      rootStyles.normalize,\n      !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n      isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n      isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n      isDayPickerVisible &&\n        isMonthPickerVisible &&\n        showWeekNumbers &&\n        rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n      className,\n    ),\n    divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n    monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n    goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n    liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n  root: 'fui-Calendar',\n  divider: 'fui-Calendar__divider',\n  goTodayButton: 'fui-Calendar__goTodayButton',\n  monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n  liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'flex',\n    width: '220px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  monthPickerNotVisible: {\n    flexDirection: 'column',\n  },\n  dayAndMonthPickersVisible: {\n    width: '440px',\n  },\n  dayPickerVisibleAndWeekNumbersShown: {\n    width: '250px',\n  },\n  dayAndMonthPickersVisibleAndWeekNumbersShown: {\n    width: '470px',\n  },\n});\n\nconst useDividerStyles = makeStyles({\n  base: {\n    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n    top: 0,\n  },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    bottom: 0,\n    boxSizing: 'content-box',\n    color: tokens.colorNeutralForeground1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '30px',\n    lineHeight: '30px',\n    marginRight: '16px',\n    marginTop: '3px',\n    overflow: 'visible',\n    padding: '0 4px',\n\n    '& div': {\n      fontSize: tokens.fontSizeBase200,\n    },\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorBrandForeground1,\n      cursor: 'pointer',\n\n      '@media (forced-colors: active)': {\n        outline: tokens.strokeWidthThin,\n        borderRadius: tokens.borderRadiusSmall,\n      },\n    },\n    '&:hover:active': {\n      color: tokens.colorBrandForeground2,\n    },\n    '&:disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n    },\n  },\n});\n\nconst useLiveRegionStyles = makeStyles({\n  base: {\n    border: 'none',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0',\n    position: 'absolute',\n    width: '1px',\n  },\n});\n\n/**\n * Apply styling to the Calendar slots based on the state\n *\n * @internal\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n  'use no memo'; // justified: compiler would optimize useCalendarStyles_unstable — manual opt-out to preserve runtime behavior\n\n  const rootStyles = useRootStyles();\n  const dividerStyles = useDividerStyles();\n  const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n  const goTodayButtonStyles = useGoTodayButtonStyles();\n  const liveRegionStyles = useLiveRegionStyles();\n\n  const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarClassNames.root,\n      rootStyles.base,\n      rootStyles.normalize,\n      !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n      isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n      isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n      isDayPickerVisible &&\n        isMonthPickerVisible &&\n        showWeekNumbers &&\n        rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n      className,\n    ),\n    divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n    monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n    goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n    liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"mappings":"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"}

package/lib/components/CalendarDay/CalendarDay.js

@@ -5,6 +5,7 @@ import { mergeClasses } from '@griffel/react';
 import { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';
 import { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';
 import { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';
+import { AnimationDirection } from '../../Calendar';
 /**
  * @internal
  */ export const CalendarDay = (props)=>{
@@ -15,7 +16,7 @@ import { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';
                 (_dayGrid_current = dayGrid.current) === null || _dayGrid_current === void 0 ? void 0 : (_dayGrid_current_focus = _dayGrid_current.focus) === null || _dayGrid_current_focus === void 0 ? void 0 : _dayGrid_current_focus.call(_dayGrid_current);
             }
         }), []);
-    const { strings, gridLabel, navigatedDate, dateTimeFormatter, className, onHeaderSelect, showSixWeeksByDefault, minDate, maxDate, restrictedDates, onNavigateDate, showWeekNumbers, dateRangeType, animationDirection } = props;
+    const { strings, gridLabel, navigatedDate, dateTimeFormatter, className, onHeaderSelect, showSixWeeksByDefault, minDate, maxDate, restrictedDates, onNavigateDate, showWeekNumbers, dateRangeType, animationDirection = AnimationDirection.Vertical } = props;
     const classNames = useCalendarDayStyles_unstable({
         className,
         headerIsClickable: !!onHeaderSelect,

package/lib/components/CalendarDay/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n  const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        dayGrid.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  const {\n    strings,\n    gridLabel,\n    navigatedDate,\n    dateTimeFormatter,\n    className,\n    onHeaderSelect,\n    showSixWeeksByDefault,\n    minDate,\n    maxDate,\n    restrictedDates,\n    onNavigateDate,\n    showWeekNumbers,\n    dateRangeType,\n    animationDirection,\n  } = props;\n\n  const classNames = useCalendarDayStyles_unstable({\n    className,\n    headerIsClickable: !!onHeaderSelect,\n    showWeekNumbers,\n    animationDirection,\n  });\n\n  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n  const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n    ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n    : monthAndYear;\n\n  const { ...propsWithoutStyles } = props;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.header}>\n        <HeaderButtonComponentType\n          aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n          className={classNames.monthAndYear}\n          onClick={onHeaderSelect}\n          tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {monthAndYear}\n          </span>\n        </HeaderButtonComponentType>\n        <CalendarDayNavigationButtons {...props} classNames={classNames} />\n      </div>\n      <CalendarDayGrid\n        {...propsWithoutStyles}\n        gridLabel={`${monthAndYear}, ${gridLabel}`}\n        componentRef={dayGrid}\n        strings={strings}\n        navigatedDate={navigatedDate!}\n        weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n        dateTimeFormatter={dateTimeFormatter!}\n        minDate={minDate}\n        maxDate={maxDate}\n        restrictedDates={restrictedDates}\n        onNavigateDate={onNavigateDate}\n        dateRangeType={dateRangeType}\n      />\n    </div>\n  );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n  classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSXElement => {\n  const {\n    minDate,\n    maxDate,\n    navigatedDate,\n    navigationIcons,\n    allFocusable,\n    strings,\n    showCloseButton,\n    classNames,\n    onNavigateDate,\n    onDismiss,\n  } = props;\n\n  const onSelectNextMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, -1), false);\n  };\n\n  // determine if previous/next months are in bounds\n  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n  // use aria-disabled instead of disabled so focus is not lost\n  // when a prev/next button becomes disabled after being clicked\n  return (\n    <div className={classNames.monthComponents}>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n        tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!prevMonthInBounds}\n        onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n        onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n        title={\n          strings.prevMonthAriaLabel\n            ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.upNavigation}\n      </button>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n        tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!nextMonthInBounds}\n        onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n        onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n        title={\n          strings.nextMonthAriaLabel\n            ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.downNavigation}\n      </button>\n      {showCloseButton && (\n        <button\n          className={classNames.headerIconButton}\n          onClick={onDismiss}\n          onKeyDown={onButtonKeyDown(onDismiss)}\n          title={strings.closeButtonAriaLabel}\n          type=\"button\"\n        >\n          {navigationIcons.dismiss}\n        </button>\n      )}\n    </div>\n  );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n  (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n  (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback?.();\n        break;\n    }\n  };\n"],"names":["React","Enter","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","gridLabel","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","displayName","navigationIcons","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","upNavigation","nextMonthAriaLabel","downNavigation","closeButtonAriaLabel","dismiss","callback","ev","key"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { mergeClasses } from '@griffel/react';\nimport { addMonths, compareDatePart, getMonthEnd, getMonthStart } from '../../utils';\nimport { CalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid';\nimport { useCalendarDayStyles_unstable } from './useCalendarDayStyles.styles';\nimport type { ICalendarDayGrid } from '../CalendarDayGrid/CalendarDayGrid.types';\nimport type { CalendarDayProps, CalendarDayStyles } from './CalendarDay.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { AnimationDirection } from '../../Calendar';\n\n/**\n * @internal\n */\nexport const CalendarDay: React.FunctionComponent<CalendarDayProps> = props => {\n  const dayGrid = React.useRef<ICalendarDayGrid>(null);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      focus() {\n        dayGrid.current?.focus?.();\n      },\n    }),\n    [],\n  );\n\n  const {\n    strings,\n    gridLabel,\n    navigatedDate,\n    dateTimeFormatter,\n    className,\n    onHeaderSelect,\n    showSixWeeksByDefault,\n    minDate,\n    maxDate,\n    restrictedDates,\n    onNavigateDate,\n    showWeekNumbers,\n    dateRangeType,\n    animationDirection = AnimationDirection.Vertical,\n  } = props;\n\n  const classNames = useCalendarDayStyles_unstable({\n    className,\n    headerIsClickable: !!onHeaderSelect,\n    showWeekNumbers,\n    animationDirection,\n  });\n\n  const monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n  const HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n  const headerAriaLabel = strings.yearPickerHeaderAriaLabel\n    ? strings.yearPickerHeaderAriaLabel.replace('{0}', monthAndYear)\n    : monthAndYear;\n\n  const { ...propsWithoutStyles } = props;\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.header}>\n        <HeaderButtonComponentType\n          aria-label={onHeaderSelect ? headerAriaLabel : undefined}\n          className={classNames.monthAndYear}\n          onClick={onHeaderSelect}\n          tabIndex={onHeaderSelect ? 0 : -1} // prevent focus if there's no action for the button\n          onKeyDown={onButtonKeyDown(onHeaderSelect)}\n          type=\"button\"\n        >\n          <span aria-live=\"polite\" aria-atomic=\"true\">\n            {monthAndYear}\n          </span>\n        </HeaderButtonComponentType>\n        <CalendarDayNavigationButtons {...props} classNames={classNames} />\n      </div>\n      <CalendarDayGrid\n        {...propsWithoutStyles}\n        gridLabel={`${monthAndYear}, ${gridLabel}`}\n        componentRef={dayGrid}\n        strings={strings}\n        navigatedDate={navigatedDate!}\n        weeksToShow={showSixWeeksByDefault ? 6 : undefined}\n        dateTimeFormatter={dateTimeFormatter!}\n        minDate={minDate}\n        maxDate={maxDate}\n        restrictedDates={restrictedDates}\n        onNavigateDate={onNavigateDate}\n        dateRangeType={dateRangeType}\n      />\n    </div>\n  );\n};\nCalendarDay.displayName = 'CalendarDay';\n\ninterface CalendarDayNavigationButtonsProps extends CalendarDayProps {\n  classNames: Record<keyof CalendarDayStyles, string>;\n}\n\nconst CalendarDayNavigationButtons = (props: CalendarDayNavigationButtonsProps): JSXElement => {\n  const {\n    minDate,\n    maxDate,\n    navigatedDate,\n    navigationIcons,\n    allFocusable,\n    strings,\n    showCloseButton,\n    classNames,\n    onNavigateDate,\n    onDismiss,\n  } = props;\n\n  const onSelectNextMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, 1), false);\n  };\n\n  const onSelectPrevMonth = (): void => {\n    onNavigateDate(addMonths(navigatedDate, -1), false);\n  };\n\n  // determine if previous/next months are in bounds\n  const prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n  const nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n\n  // use aria-disabled instead of disabled so focus is not lost\n  // when a prev/next button becomes disabled after being clicked\n  return (\n    <div className={classNames.monthComponents}>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !prevMonthInBounds && classNames.disabledStyle)}\n        tabIndex={prevMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!prevMonthInBounds}\n        onClick={prevMonthInBounds ? onSelectPrevMonth : undefined}\n        onKeyDown={prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined}\n        title={\n          strings.prevMonthAriaLabel\n            ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.upNavigation}\n      </button>\n      <button\n        className={mergeClasses(classNames.headerIconButton, !nextMonthInBounds && classNames.disabledStyle)}\n        tabIndex={nextMonthInBounds ? undefined : allFocusable ? 0 : -1}\n        aria-disabled={!nextMonthInBounds}\n        onClick={nextMonthInBounds ? onSelectNextMonth : undefined}\n        onKeyDown={nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined}\n        title={\n          strings.nextMonthAriaLabel\n            ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n            : undefined\n        }\n        type=\"button\"\n      >\n        {navigationIcons.downNavigation}\n      </button>\n      {showCloseButton && (\n        <button\n          className={classNames.headerIconButton}\n          onClick={onDismiss}\n          onKeyDown={onButtonKeyDown(onDismiss)}\n          title={strings.closeButtonAriaLabel}\n          type=\"button\"\n        >\n          {navigationIcons.dismiss}\n        </button>\n      )}\n    </div>\n  );\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\n\nconst onButtonKeyDown =\n  (callback?: () => void): ((ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) =>\n  (ev: React.KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => {\n    switch (ev.key) {\n      case Enter:\n        callback?.();\n        break;\n    }\n  };\n"],"names":["React","Enter","mergeClasses","addMonths","compareDatePart","getMonthEnd","getMonthStart","CalendarDayGrid","useCalendarDayStyles_unstable","AnimationDirection","CalendarDay","props","dayGrid","useRef","useImperativeHandle","componentRef","focus","current","strings","gridLabel","navigatedDate","dateTimeFormatter","className","onHeaderSelect","showSixWeeksByDefault","minDate","maxDate","restrictedDates","onNavigateDate","showWeekNumbers","dateRangeType","animationDirection","Vertical","classNames","headerIsClickable","monthAndYear","formatMonthYear","HeaderButtonComponentType","headerAriaLabel","yearPickerHeaderAriaLabel","replace","propsWithoutStyles","div","root","header","aria-label","undefined","onClick","tabIndex","onKeyDown","onButtonKeyDown","type","span","aria-live","aria-atomic","CalendarDayNavigationButtons","weeksToShow","displayName","navigationIcons","allFocusable","showCloseButton","onDismiss","onSelectNextMonth","onSelectPrevMonth","prevMonthInBounds","nextMonthInBounds","monthComponents","button","headerIconButton","disabledStyle","aria-disabled","title","prevMonthAriaLabel","months","getMonth","upNavigation","nextMonthAriaLabel","downNavigation","closeButtonAriaLabel","dismiss","callback","ev","key"],"mappings":"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"}

package/lib/components/CalendarDay/useCalendarDayStyles.styles.js

@@ -2,7 +2,6 @@
 
 import { tokens } from '@fluentui/react-theme';
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';
 /**
  * @internal
  */
@@ -93,12 +92,6 @@ const useMonthAndYearStyles = /*#__PURE__*/__styles({
     ygn44y: "f1cmbuwj",
     Huce71: "fz5stix"
   },
-  animation: {
-    vin17d: "fhsqnsn",
-    Bf5fcs: "fywypte",
-    Bv12yb3: "f1h7u52p",
-    Ezkn3b: "fjq4c94"
-  },
   headerIsClickable: {
     Jwef8y: "f18a0fwf",
     Bi91k9c: "f3sdaeg",
@@ -124,8 +117,7 @@ const useMonthAndYearStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".f1udkdxo{padding:0 10px 0 4px;}", {
     p: -1
-  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".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;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}"],
   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);}", {
@@ -211,6 +203,7 @@ const useDisabledStyleStyles = /*#__PURE__*/__styles({
 export const useCalendarDayStyles_unstable = props => {
   'use no memo';
 
+  // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior
   const rootStyles = useRootStyles();
   const headerStyles = useHeaderStyles();
   const monthAndYearStyles = useMonthAndYearStyles();
@@ -225,7 +218,7 @@ export const useCalendarDayStyles_unstable = props => {
   return {
     root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
     header: mergeClasses(calendarDayClassNames.header, headerStyles.base),
-    monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
+    monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),
     monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
     headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
     disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)

package/lib/components/CalendarDay/useCalendarDayStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","showWeekNumbers","d","p","useHeaderStyles","mc9l5x","Bqenvij","Bg96gwp","qhf8xq","useMonthAndYearStyles","Bt984gj","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","ygn44y","Huce71","animation","vin17d","Bf5fcs","Bv12yb3","Ezkn3b","headerIsClickable","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","k","h","useMonthComponentsStyles","qb2dma","useHeaderIconButtonStyles","useDisabledStyleStyles","Bg33ivm","t69wg0","Bnh7jwd","m","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"sources":["useCalendarDayStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\n/**\n * @internal\n */ export const calendarDayClassNames = {\n    root: 'fui-CalendarDay',\n    header: 'fui-CalendarDay__header',\n    monthAndYear: 'fui-CalendarDay__monthAndYear',\n    monthComponents: 'fui-CalendarDay__monthComponents',\n    headerIconButton: 'fui-CalendarDay__headerIconButton',\n    disabledStyle: 'fui-CalendarDay__disabledStyle'\n};\nconst useRootStyles = makeStyles({\n    base: {\n        boxSizing: 'content-box',\n        padding: '12px',\n        width: '196px'\n    },\n    normalize: {\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        margin: '0',\n        padding: '0'\n    },\n    showWeekNumbers: {\n        width: '226px'\n    }\n});\nconst useHeaderStyles = makeStyles({\n    base: {\n        display: 'inline-flex',\n        height: '28px',\n        lineHeight: '44px',\n        position: 'relative',\n        width: '100%'\n    }\n});\nconst useMonthAndYearStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        display: 'inline-block',\n        flexGrow: 1,\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: '28px',\n        overflow: 'hidden',\n        padding: '0 4px 0 10px',\n        textAlign: 'left',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap'\n    },\n    animation: {\n        animationDuration: DURATION_2,\n        animationFillMode: 'both',\n        animationName: FADE_IN,\n        animationTimingFunction: EASING_FUNCTION_2\n    },\n    headerIsClickable: {\n        '&:hover': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n            color: tokens.colorBrandForegroundOnLightHover,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        },\n        '&:hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n            color: tokens.colorBrandForegroundOnLightPressed,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    }\n});\nconst useMonthComponentsStyles = makeStyles({\n    base: {\n        alignSelf: 'flex-end',\n        display: 'inline-flex'\n    }\n});\nconst useHeaderIconButtonStyles = makeStyles({\n    base: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase200,\n        height: '28px',\n        lineHeight: '28px',\n        overflow: 'visible',\n        padding: '0',\n        position: 'relative',\n        textAlign: 'center',\n        width: '28px',\n        '&:hover': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n            color: tokens.colorBrandForegroundOnLightHover,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        },\n        '&:hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n            color: tokens.colorBrandForegroundOnLightPressed\n        }\n    }\n});\nconst useDisabledStyleStyles = makeStyles({\n    base: {\n        '&, &:disabled, & button': {\n            color: tokens.colorNeutralForegroundDisabled,\n            pointerEvents: 'none',\n            // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */ export const useCalendarDayStyles_unstable = (props)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const headerStyles = useHeaderStyles();\n    const monthAndYearStyles = useMonthAndYearStyles();\n    const monthComponentsStyles = useMonthComponentsStyles();\n    const headerIconButtonStyles = useHeaderIconButtonStyles();\n    const disabledStyleStyles = useDisabledStyleStyles();\n    const { className, headerIsClickable, showWeekNumbers } = props;\n    return {\n        root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),\n        header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),\n        monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n        headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n        disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","showWeekNumbers","d","p","useHeaderStyles","mc9l5x","Bqenvij","Bg96gwp","qhf8xq","useMonthAndYearStyles","Bt984gj","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","ygn44y","Huce71","headerIsClickable","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","h","useMonthComponentsStyles","qb2dma","useHeaderIconButtonStyles","useDisabledStyleStyles","Bg33ivm","t69wg0","Bnh7jwd","m","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"sources":["useCalendarDayStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarDayClassNames = {\n    root: 'fui-CalendarDay',\n    header: 'fui-CalendarDay__header',\n    monthAndYear: 'fui-CalendarDay__monthAndYear',\n    monthComponents: 'fui-CalendarDay__monthComponents',\n    headerIconButton: 'fui-CalendarDay__headerIconButton',\n    disabledStyle: 'fui-CalendarDay__disabledStyle'\n};\nconst useRootStyles = makeStyles({\n    base: {\n        boxSizing: 'content-box',\n        padding: '12px',\n        width: '196px'\n    },\n    normalize: {\n        boxShadow: 'none',\n        boxSizing: 'border-box',\n        margin: '0',\n        padding: '0'\n    },\n    showWeekNumbers: {\n        width: '226px'\n    }\n});\nconst useHeaderStyles = makeStyles({\n    base: {\n        display: 'inline-flex',\n        height: '28px',\n        lineHeight: '44px',\n        position: 'relative',\n        width: '100%'\n    }\n});\nconst useMonthAndYearStyles = makeStyles({\n    base: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        display: 'inline-block',\n        flexGrow: 1,\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: '28px',\n        overflow: 'hidden',\n        padding: '0 4px 0 10px',\n        textAlign: 'left',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap'\n    },\n    headerIsClickable: {\n        '&:hover': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n            color: tokens.colorBrandForegroundOnLightHover,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        },\n        '&:hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n            color: tokens.colorBrandForegroundOnLightPressed,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    }\n});\nconst useMonthComponentsStyles = makeStyles({\n    base: {\n        alignSelf: 'flex-end',\n        display: 'inline-flex'\n    }\n});\nconst useHeaderIconButtonStyles = makeStyles({\n    base: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderStyle('none'),\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontFamily: 'inherit',\n        fontSize: tokens.fontSizeBase200,\n        height: '28px',\n        lineHeight: '28px',\n        overflow: 'visible',\n        padding: '0',\n        position: 'relative',\n        textAlign: 'center',\n        width: '28px',\n        '&:hover': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n            color: tokens.colorBrandForegroundOnLightHover,\n            cursor: 'pointer',\n            outline: `1px solid ${tokens.colorTransparentStroke}`\n        },\n        '&:hover:active': {\n            backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n            color: tokens.colorBrandForegroundOnLightPressed\n        }\n    }\n});\nconst useDisabledStyleStyles = makeStyles({\n    base: {\n        '&, &:disabled, & button': {\n            color: tokens.colorNeutralForegroundDisabled,\n            pointerEvents: 'none',\n            // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n            '@media (forced-colors: active)': {\n                color: 'GrayText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */ export const useCalendarDayStyles_unstable = (props)=>{\n    'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior\n    const rootStyles = useRootStyles();\n    const headerStyles = useHeaderStyles();\n    const monthAndYearStyles = useMonthAndYearStyles();\n    const monthComponentsStyles = useMonthComponentsStyles();\n    const headerIconButtonStyles = useHeaderIconButtonStyles();\n    const disabledStyleStyles = useDisabledStyleStyles();\n    const { className, headerIsClickable, showWeekNumbers } = props;\n    return {\n        root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),\n        header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),\n        monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n        headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n        disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js

@@ -1,7 +1,6 @@
 'use client';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';
 /**
  * @internal
  */ export const calendarDayClassNames = {
@@ -56,12 +55,6 @@ const useMonthAndYearStyles = makeStyles({
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap'
     },
-    animation: {
-        animationDuration: DURATION_2,
-        animationFillMode: 'both',
-        animationName: FADE_IN,
-        animationTimingFunction: EASING_FUNCTION_2
-    },
     headerIsClickable: {
         '&:hover': {
             backgroundColor: tokens.colorBrandBackgroundInvertedHover,
@@ -128,7 +121,7 @@ const useDisabledStyleStyles = makeStyles({
  *
  * @internal
  */ export const useCalendarDayStyles_unstable = (props)=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior
     const rootStyles = useRootStyles();
     const headerStyles = useHeaderStyles();
     const monthAndYearStyles = useMonthAndYearStyles();
@@ -139,7 +132,7 @@ const useDisabledStyleStyles = makeStyles({
     return {
         root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
         header: mergeClasses(calendarDayClassNames.header, headerStyles.base),
-        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
+        monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, headerIsClickable && monthAndYearStyles.headerIsClickable),
         monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
         headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
         disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)

package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n  root: 'fui-CalendarDay',\n  header: 'fui-CalendarDay__header',\n  monthAndYear: 'fui-CalendarDay__monthAndYear',\n  monthComponents: 'fui-CalendarDay__monthComponents',\n  headerIconButton: 'fui-CalendarDay__headerIconButton',\n  disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    padding: '12px',\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useHeaderStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    height: '28px',\n    lineHeight: '44px',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    display: 'inline-block',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: '28px',\n    overflow: 'hidden',\n    padding: '0 4px 0 10px',\n    textAlign: 'left',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  animation: {\n    animationDuration: DURATION_2,\n    animationFillMode: 'both',\n    animationName: FADE_IN,\n    animationTimingFunction: EASING_FUNCTION_2,\n  },\n  headerIsClickable: {\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    display: 'inline-flex',\n  },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    overflow: 'visible',\n    padding: '0',\n    position: 'relative',\n    textAlign: 'center',\n    width: '28px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n\n      // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const headerStyles = useHeaderStyles();\n  const monthAndYearStyles = useMonthAndYearStyles();\n  const monthComponentsStyles = useMonthComponentsStyles();\n  const headerIconButtonStyles = useHeaderIconButtonStyles();\n  const disabledStyleStyles = useDisabledStyleStyles();\n\n  const { className, headerIsClickable, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarDayClassNames.root,\n      rootStyles.normalize,\n      rootStyles.base,\n      showWeekNumbers && rootStyles.showWeekNumbers,\n      className,\n    ),\n    header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n    monthAndYear: mergeClasses(\n      calendarDayClassNames.monthAndYear,\n      monthAndYearStyles.base,\n      monthAndYearStyles.animation,\n      headerIsClickable && monthAndYearStyles.headerIsClickable,\n    ),\n    monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n    headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n    disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","animation","animationDuration","animationFillMode","animationName","animationTimingFunction","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n  root: 'fui-CalendarDay',\n  header: 'fui-CalendarDay__header',\n  monthAndYear: 'fui-CalendarDay__monthAndYear',\n  monthComponents: 'fui-CalendarDay__monthComponents',\n  headerIconButton: 'fui-CalendarDay__headerIconButton',\n  disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    boxSizing: 'content-box',\n    padding: '12px',\n    width: '196px',\n  },\n  normalize: {\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    margin: '0',\n    padding: '0',\n  },\n  showWeekNumbers: {\n    width: '226px',\n  },\n});\n\nconst useHeaderStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    height: '28px',\n    lineHeight: '44px',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    display: 'inline-block',\n    flexGrow: 1,\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: '28px',\n    overflow: 'hidden',\n    padding: '0 4px 0 10px',\n    textAlign: 'left',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  headerIsClickable: {\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n  base: {\n    alignSelf: 'flex-end',\n    display: 'inline-flex',\n  },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n  base: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderStyle('none'),\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontFamily: 'inherit',\n    fontSize: tokens.fontSizeBase200,\n    height: '28px',\n    lineHeight: '28px',\n    overflow: 'visible',\n    padding: '0',\n    position: 'relative',\n    textAlign: 'center',\n    width: '28px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n      color: tokens.colorBrandForegroundOnLightHover,\n      cursor: 'pointer',\n      outline: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n    '&:hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n      color: tokens.colorBrandForegroundOnLightPressed,\n    },\n  },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n  base: {\n    '&, &:disabled, & button': {\n      color: tokens.colorNeutralForegroundDisabled,\n      pointerEvents: 'none',\n\n      // add this explicitly for aria-disabled buttons that don't get default forced-colors disabled styles\n      '@media (forced-colors: active)': {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the CalendarDay slots based on the state\n *\n * @internal\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n  'use no memo'; // justified: compiler would optimize useCalendarDayStyles_unstable — manual opt-out to preserve runtime behavior\n\n  const rootStyles = useRootStyles();\n  const headerStyles = useHeaderStyles();\n  const monthAndYearStyles = useMonthAndYearStyles();\n  const monthComponentsStyles = useMonthComponentsStyles();\n  const headerIconButtonStyles = useHeaderIconButtonStyles();\n  const disabledStyleStyles = useDisabledStyleStyles();\n\n  const { className, headerIsClickable, showWeekNumbers } = props;\n\n  return {\n    root: mergeClasses(\n      calendarDayClassNames.root,\n      rootStyles.normalize,\n      rootStyles.base,\n      showWeekNumbers && rootStyles.showWeekNumbers,\n      className,\n    ),\n    header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n    monthAndYear: mergeClasses(\n      calendarDayClassNames.monthAndYear,\n      monthAndYearStyles.base,\n      headerIsClickable && monthAndYearStyles.headerIsClickable,\n    ),\n    monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n    headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n    disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n  };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"mappings":"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"}

package/lib/components/CalendarDayGrid/CalendarDayGrid.js

@@ -9,6 +9,8 @@ import { CalendarGridRow } from './CalendarGridRow';
 import { useWeeks } from './useWeeks';
 import { useWeekCornerStyles } from './useWeekCornerStyles.styles';
 import { mergeClasses } from '@griffel/react';
+import { DirectionalSlideIn, DirectionalSlideOut } from '../../utils/calendarMotions';
+import { AnimationDirection } from '../../Calendar';
 function useDayRefs() {
     const daysRef = React.useRef({});
     const getSetRefCallback = (dayKey)=>(element)=>{
@@ -29,8 +31,10 @@ function useAnimateBackwards(weeks) {
         previousNavigatedDateRef.current = weeks[0][0].originalDate;
     });
     const previousNavigatedDate = previousNavigatedDateRef.current;
+    // eslint-disable-next-line react-hooks/refs
     if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {
         return undefined;
+    // eslint-disable-next-line react-hooks/refs
     } else if (previousNavigatedDate <= weeks[0][0].originalDate) {
         return false;
     } else {
@@ -48,6 +52,7 @@ export const CalendarDayGrid = (props)=>{
             maxDate,
             restrictedDates
         };
+        // eslint-disable-next-line react-hooks/immutability
         let dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);
         dateRange = getBoundedDateRange(dateRange, minDate, maxDate);
         dateRange = dateRange.filter((d)=>{
@@ -88,7 +93,7 @@ export const CalendarDayGrid = (props)=>{
         dayRefs = dayInfosInRange.map((dayInfo)=>daysRef.current[dayInfo.key]);
         return dayRefs;
     };
-    const { gridLabel, dateRangeType, showWeekNumbers, labelledBy, lightenDaysOutsideNavigatedMonth, animationDirection } = props;
+    const { gridLabel, dateRangeType, showWeekNumbers, labelledBy, lightenDaysOutsideNavigatedMonth, animationDirection = AnimationDirection.Vertical } = props;
     const classNames = useCalendarDayGridStyles_unstable({
         animateBackwards,
         animationDirection,
@@ -111,6 +116,12 @@ export const CalendarDayGrid = (props)=>{
     const arrowNavigationAttributes = useArrowNavigationGroup({
         axis: 'grid-linear'
     });
+    const firstWeek = weeks[0];
+    const finalWeek = weeks[weeks.length - 1];
+    // Single navigation epoch for all rows in the grid. Derived from the first visible day's key
+    // (`Date.toString()`), which changes when the user navigates to a different month but stays
+    // stable across intra-month interactions (e.g. day selection).
+    const navigationEpoch = firstWeek[0].key;
     return /*#__PURE__*/ React.createElement("table", {
         className: mergeClasses(classNames.table, props.className),
         "aria-multiselectable": "false",
@@ -123,30 +134,44 @@ export const CalendarDayGrid = (props)=>{
         ...props,
         classNames: classNames,
         weeks: weeks
-    }), /*#__PURE__*/ React.createElement(CalendarGridRow, {
+    }), /*#__PURE__*/ React.createElement(DirectionalSlideOut, {
+        edge: "first",
+        replayKey: navigationEpoch,
+        animationDirection: animationDirection,
+        animateBackwards: animateBackwards
+    }, /*#__PURE__*/ React.createElement(CalendarGridRow, {
         ...props,
         ...partialWeekProps,
-        week: weeks[0],
+        week: firstWeek,
         weekIndex: -1,
         rowClassName: classNames.firstTransitionWeek,
         "aria-role": "presentation",
         ariaHidden: true
-    }), weeks.slice(1, weeks.length - 1).map((week, weekIndex)=>/*#__PURE__*/ React.createElement(CalendarGridRow, {
+    })), weeks.slice(1, weeks.length - 1).map((week, weekIndex)=>/*#__PURE__*/ React.createElement(DirectionalSlideIn, {
+            key: weekIndex,
+            replayKey: navigationEpoch,
+            animationDirection: animationDirection,
+            animateBackwards: animateBackwards
+        }, /*#__PURE__*/ React.createElement(CalendarGridRow, {
             ...props,
             ...partialWeekProps,
-            key: weekIndex,
             week: week,
             weekIndex: weekIndex,
             rowClassName: classNames.weekRow
-        })), /*#__PURE__*/ React.createElement(CalendarGridRow, {
+        }))), /*#__PURE__*/ React.createElement(DirectionalSlideOut, {
+        edge: "last",
+        replayKey: navigationEpoch,
+        animationDirection: animationDirection,
+        animateBackwards: animateBackwards
+    }, /*#__PURE__*/ React.createElement(CalendarGridRow, {
         ...props,
         ...partialWeekProps,
-        week: weeks[weeks.length - 1],
+        week: finalWeek,
         weekIndex: -2,
         rowClassName: classNames.lastTransitionWeek,
         "aria-role": "presentation",
         ariaHidden: true
-    })));
+    }))));
 };
 CalendarDayGrid.displayName = 'CalendarDayGrid';
 /**