@fluentui/react-calendar-compat 0.4.2 → 0.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/CHANGELOG.md +26 -2
  2. package/lib/components/Calendar/useCalendarStyles.styles.js +1 -0
  3. package/lib/components/Calendar/useCalendarStyles.styles.js.map +1 -1
  4. package/lib/components/Calendar/useCalendarStyles.styles.raw.js +1 -1
  5. package/lib/components/Calendar/useCalendarStyles.styles.raw.js.map +1 -1
  6. package/lib/components/CalendarDay/CalendarDay.js +2 -1
  7. package/lib/components/CalendarDay/CalendarDay.js.map +1 -1
  8. package/lib/components/CalendarDay/useCalendarDayStyles.styles.js +3 -10
  9. package/lib/components/CalendarDay/useCalendarDayStyles.styles.js.map +1 -1
  10. package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js +2 -9
  11. package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +1 -1
  12. package/lib/components/CalendarDayGrid/CalendarDayGrid.js +30 -8
  13. package/lib/components/CalendarDayGrid/CalendarDayGrid.js.map +1 -1
  14. package/lib/components/CalendarDayGrid/CalendarGridDayCell.js +1 -1
  15. package/lib/components/CalendarDayGrid/CalendarGridDayCell.js.map +1 -1
  16. package/lib/components/CalendarDayGrid/CalendarGridRow.js +6 -5
  17. package/lib/components/CalendarDayGrid/CalendarGridRow.js.map +1 -1
  18. package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js +10 -3
  19. package/lib/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map +1 -1
  20. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js +16 -58
  21. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js.map +1 -1
  22. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +12 -67
  23. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +1 -1
  24. package/lib/components/CalendarDayGrid/useWeeks.js +0 -1
  25. package/lib/components/CalendarDayGrid/useWeeks.js.map +1 -1
  26. package/lib/components/CalendarMonth/CalendarMonth.js +10 -4
  27. package/lib/components/CalendarMonth/CalendarMonth.js.map +1 -1
  28. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js +1 -0
  29. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.js.map +1 -1
  30. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +1 -1
  31. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +1 -1
  32. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.js +5 -33
  33. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.js.map +1 -1
  34. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +4 -41
  35. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +1 -1
  36. package/lib/components/CalendarYear/CalendarYear.js +17 -12
  37. package/lib/components/CalendarYear/CalendarYear.js.map +1 -1
  38. package/lib/components/CalendarYear/useCalendarYearStyles.styles.js +1 -0
  39. package/lib/components/CalendarYear/useCalendarYearStyles.styles.js.map +1 -1
  40. package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js +1 -1
  41. package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +1 -1
  42. package/lib/utils/animations.js +24 -18
  43. package/lib/utils/animations.js.map +1 -1
  44. package/lib/utils/calendarMotions.js +93 -0
  45. package/lib/utils/calendarMotions.js.map +1 -0
  46. package/lib/utils/index.js +2 -2
  47. package/lib/utils/index.js.map +1 -1
  48. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.js +1 -0
  49. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.js.map +1 -1
  50. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js +1 -1
  51. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js.map +1 -1
  52. package/lib-commonjs/components/CalendarDay/CalendarDay.js +2 -1
  53. package/lib-commonjs/components/CalendarDay/CalendarDay.js.map +1 -1
  54. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.js +3 -15
  55. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.js.map +1 -1
  56. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js +2 -9
  57. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +1 -1
  58. package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js +30 -8
  59. package/lib-commonjs/components/CalendarDayGrid/CalendarDayGrid.js.map +1 -1
  60. package/lib-commonjs/components/CalendarDayGrid/CalendarGridDayCell.js +1 -1
  61. package/lib-commonjs/components/CalendarDayGrid/CalendarGridDayCell.js.map +1 -1
  62. package/lib-commonjs/components/CalendarDayGrid/CalendarGridRow.js +6 -5
  63. package/lib-commonjs/components/CalendarDayGrid/CalendarGridRow.js.map +1 -1
  64. package/lib-commonjs/components/CalendarDayGrid/CalendarMonthHeaderRow.js +9 -3
  65. package/lib-commonjs/components/CalendarDayGrid/CalendarMonthHeaderRow.js.map +1 -1
  66. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js +16 -98
  67. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.js.map +1 -1
  68. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +12 -67
  69. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +1 -1
  70. package/lib-commonjs/components/CalendarDayGrid/useWeeks.js +0 -1
  71. package/lib-commonjs/components/CalendarDayGrid/useWeeks.js.map +1 -1
  72. package/lib-commonjs/components/CalendarMonth/CalendarMonth.js +10 -4
  73. package/lib-commonjs/components/CalendarMonth/CalendarMonth.js.map +1 -1
  74. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.js +1 -0
  75. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.js.map +1 -1
  76. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +1 -1
  77. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +1 -1
  78. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.js +6 -56
  79. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.js.map +1 -1
  80. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +4 -41
  81. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +1 -1
  82. package/lib-commonjs/components/CalendarYear/CalendarYear.js +17 -12
  83. package/lib-commonjs/components/CalendarYear/CalendarYear.js.map +1 -1
  84. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.js +1 -0
  85. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.js.map +1 -1
  86. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js +1 -1
  87. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +1 -1
  88. package/lib-commonjs/utils/animations.js +12 -11
  89. package/lib-commonjs/utils/animations.js.map +1 -1
  90. package/lib-commonjs/utils/calendarMotions.js +105 -0
  91. package/lib-commonjs/utils/calendarMotions.js.map +1 -0
  92. package/lib-commonjs/utils/index.js +1 -1
  93. package/lib-commonjs/utils/index.js.map +1 -1
  94. package/package.json +6 -4
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","DURATION_2","DURATION_3","EASING_FUNCTION_1","EASING_FUNCTION_2","FADE_IN","SLIDE_DOWN_IN20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","AnimationDirection","calendarPickerClassNames","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","base","B7ck84d","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useHeaderContainerStyles","mc9l5x","useCurrentItemButtonStyles","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","fsow6f","animation","vin17d","Bf5fcs","Bv12yb3","Ezkn3b","hasHeaderClickCallback","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","k","h","useNavigationButtonsContainerStyles","Bt984gj","useNavigationButtonStyles","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","Bekrc4i","i8vvqc","g2u3we","B4j52fo","irswps","Bqenvij","Bg96gwp","sshi5w","Bf4jedk","qhf8xq","useGridContainerStyles","useButtonRowStyles","sw9gdo","horizontalBackward","horizontalForward","verticalBackward","verticalForward","useItemButtonStyles","Btgfwho","xrote9","Bja5ulm","Bbkh6qg","Bahaeuw","fmph8g","Bv6y5q5","uq1ffc","Bokaozi","Bfrni1f","rxnm8d","Dcq74g","Bs60fxl","m","useCurrentStyles","highlightCurrent","By8wz76","B7iucu3","B8gzw0y","mk428o","B1lrsqs","B1piyhd","of3gr0","hvfrz3","useSelectedStyles","highlightSelected","useDisabledStyles","Bg33ivm","t69wg0","useCalendarPickerStyles_unstable","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","animateBackwards","animationDirection","className","undefined","Horizontal"],"sources":["useCalendarPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { 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';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\n/**\n * @internal\n */ export const calendarPickerClassNames = {\n root: 'fui-CalendarPicker',\n headerContainer: 'fui-CalendarPicker__headerContainer',\n currentItemButton: 'fui-CalendarPicker__currentItemButton',\n navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n navigationButton: 'fui-CalendarPicker__navigationButton',\n gridContainer: 'fui-CalendarPicker__gridContainer',\n buttonRow: 'fui-CalendarPicker__buttonRow',\n itemButton: 'fui-CalendarPicker__itemButton',\n current: 'fui-CalendarPicker__current',\n selected: 'fui-CalendarPicker__selected',\n disabled: 'fui-CalendarPicker__disabled'\n};\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n overflow: 'hidden',\n padding: '12px',\n width: '196px'\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0'\n }\n});\nconst useHeaderContainerStyles = makeStyles({\n base: {\n display: 'flex'\n }\n});\nconst useCurrentItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: 'inherit',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n overflow: 'visible',\n padding: '0 4px 0 10px',\n textAlign: 'left'\n },\n animation: {\n animationDuration: DURATION_2,\n animationFillMode: 'both',\n animationName: FADE_IN,\n animationTimingFunction: EASING_FUNCTION_2\n },\n hasHeaderClickCallback: {\n // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\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 useNavigationButtonsContainerStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'flex'\n }\n});\nconst useNavigationButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n minHeight: '28px',\n minWidth: '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 useGridContainerStyles = makeStyles({\n base: {\n marginTop: '4px'\n }\n});\nconst useButtonRowStyles = makeStyles({\n base: {\n marginBottom: '16px',\n '&:last-of-type': {\n marginBottom: 0\n }\n },\n animation: {\n animationDuration: DURATION_3,\n animationFillMode: 'both',\n animationTimingFunction: EASING_FUNCTION_1\n },\n horizontalBackward: {\n animationName: [\n FADE_IN,\n SLIDE_RIGHT_IN20\n ]\n },\n horizontalForward: {\n animationName: [\n FADE_IN,\n SLIDE_LEFT_IN20\n ]\n },\n verticalBackward: {\n animationName: [\n FADE_IN,\n SLIDE_DOWN_IN20\n ]\n },\n verticalForward: {\n animationName: [\n FADE_IN,\n SLIDE_UP_IN20\n ]\n }\n});\nconst useItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '40px',\n lineHeight: '40px',\n minHeight: '40px',\n minWidth: '40px',\n margin: '0 12px 0 0',\n overflow: 'visible',\n padding: '0',\n width: '40px',\n '&:nth-child(4n + 4)': {\n marginRight: 0\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0\n },\n '& div': {\n fontWeight: tokens.fontWeightRegular\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorNeutralForeground1Static,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n forcedColorAdjust: 'none',\n outline: '1px solid Highlight'\n }\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n }\n }\n }\n});\nconst useCurrentStyles = makeStyles({\n highlightCurrent: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n fontWeight: tokens.fontWeightSemibold,\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none'\n },\n '&:hover, &:hover:active': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none'\n }\n }\n }\n});\nconst useSelectedStyles = makeStyles({\n highlightSelected: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n fontWeight: tokens.fontWeightSemibold,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none'\n },\n '& div': {\n fontWeight: tokens.fontWeightSemibold\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none'\n }\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed\n }\n }\n});\nconst useDisabledStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none'\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n forcedColorAdjust: 'none'\n }\n }\n});\n/**\n * Apply styling to the CalendarPicker slots based on the state\n *\n * @internal\n */ export const useCalendarPickerStyles_unstable = (props)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const headerContainerStyles = useHeaderContainerStyles();\n const currentItemButtonStyles = useCurrentItemButtonStyles();\n const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n const navigationButtonStyles = useNavigationButtonStyles();\n const gridContainerStyles = useGridContainerStyles();\n const buttonRowStyles = useButtonRowStyles();\n const itemButtonStyles = useItemButtonStyles();\n const currentStyles = useCurrentStyles();\n const selectedStyles = useSelectedStyles();\n const disabledStyles = useDisabledStyles();\n const { animateBackwards, animationDirection, className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;\n return {\n root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, animateBackwards !== undefined && currentItemButtonStyles.animation, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),\n navigationButtonsContainer: mergeClasses(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),\n navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base, buttonRowStyles.animation, animateBackwards !== undefined && (animationDirection === AnimationDirection.Horizontal ? animateBackwards ? buttonRowStyles.horizontalBackward : buttonRowStyles.horizontalForward : animateBackwards ? buttonRowStyles.verticalBackward : buttonRowStyles.verticalForward)),\n itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base)\n };\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","calendarPickerClassNames","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","base","B7ck84d","B68tc82","Bmxbyg5","Bpg54ce","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","a9b677","normalize","E5pizo","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","d","p","useHeaderContainerStyles","mc9l5x","useCurrentItemButtonStyles","De3pzq","icvyot","vrafjx","oivjwe","wvpqe5","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Bh6795r","Bahqtrf","Be2twd7","Bhrd7zp","fsow6f","hasHeaderClickCallback","Jwef8y","Bi91k9c","eoavqd","pugfm4","ukgb2i","Dwtyhm","Biisq0s","iro3zm","B2d53fq","c3iz72","mghro0","Bx68yb","syojd9","E5hylx","h","useNavigationButtonsContainerStyles","Bt984gj","useNavigationButtonStyles","Bgfg5da","B9xav0g","Bn0qgzm","B4g9neb","zhjwy3","ibv6hh","u1mtju","h3c5rm","Bekrc4i","i8vvqc","g2u3we","B4j52fo","irswps","Bqenvij","Bg96gwp","sshi5w","Bf4jedk","qhf8xq","useGridContainerStyles","useButtonRowStyles","sw9gdo","useItemButtonStyles","Btgfwho","xrote9","Bja5ulm","Bbkh6qg","Bahaeuw","fmph8g","Bv6y5q5","uq1ffc","Bokaozi","Bfrni1f","rxnm8d","Dcq74g","Bs60fxl","m","useCurrentStyles","highlightCurrent","By8wz76","B7iucu3","B8gzw0y","mk428o","B1lrsqs","B1piyhd","of3gr0","hvfrz3","useSelectedStyles","highlightSelected","useDisabledStyles","Bg33ivm","t69wg0","useCalendarPickerStyles_unstable","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","className"],"sources":["useCalendarPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * @internal\n */ export const calendarPickerClassNames = {\n root: 'fui-CalendarPicker',\n headerContainer: 'fui-CalendarPicker__headerContainer',\n currentItemButton: 'fui-CalendarPicker__currentItemButton',\n navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n navigationButton: 'fui-CalendarPicker__navigationButton',\n gridContainer: 'fui-CalendarPicker__gridContainer',\n buttonRow: 'fui-CalendarPicker__buttonRow',\n itemButton: 'fui-CalendarPicker__itemButton',\n current: 'fui-CalendarPicker__current',\n selected: 'fui-CalendarPicker__selected',\n disabled: 'fui-CalendarPicker__disabled'\n};\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n overflow: 'hidden',\n padding: '12px',\n width: '196px'\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0'\n }\n});\nconst useHeaderContainerStyles = makeStyles({\n base: {\n display: 'flex'\n }\n});\nconst useCurrentItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: 'inherit',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n overflow: 'visible',\n padding: '0 4px 0 10px',\n textAlign: 'left'\n },\n hasHeaderClickCallback: {\n // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\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 useNavigationButtonsContainerStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'flex'\n }\n});\nconst useNavigationButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n minHeight: '28px',\n minWidth: '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 useGridContainerStyles = makeStyles({\n base: {\n marginTop: '4px'\n }\n});\nconst useButtonRowStyles = makeStyles({\n base: {\n marginBottom: '16px',\n '&:last-of-type': {\n marginBottom: 0\n }\n }\n});\nconst useItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '40px',\n lineHeight: '40px',\n minHeight: '40px',\n minWidth: '40px',\n margin: '0 12px 0 0',\n overflow: 'visible',\n padding: '0',\n width: '40px',\n '&:nth-child(4n + 4)': {\n marginRight: 0\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0\n },\n '& div': {\n fontWeight: tokens.fontWeightRegular\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorNeutralForeground1Static,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n forcedColorAdjust: 'none',\n outline: '1px solid Highlight'\n }\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'Highlight',\n forcedColorAdjust: 'none'\n }\n }\n }\n});\nconst useCurrentStyles = makeStyles({\n highlightCurrent: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n fontWeight: tokens.fontWeightSemibold,\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none'\n },\n '&:hover, &:hover:active': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none'\n }\n }\n }\n});\nconst useSelectedStyles = makeStyles({\n highlightSelected: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n fontWeight: tokens.fontWeightSemibold,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none'\n },\n '& div': {\n fontWeight: tokens.fontWeightSemibold\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none'\n }\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed\n }\n }\n});\nconst useDisabledStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none'\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n forcedColorAdjust: 'none'\n }\n }\n});\n/**\n * Apply styling to the CalendarPicker slots based on the state\n *\n * @internal\n */ export const useCalendarPickerStyles_unstable = (props)=>{\n 'use no memo'; // justified: compiler would optimize useCalendarPickerStyles_unstable — manual opt-out to preserve runtime behavior\n const rootStyles = useRootStyles();\n const headerContainerStyles = useHeaderContainerStyles();\n const currentItemButtonStyles = useCurrentItemButtonStyles();\n const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n const navigationButtonStyles = useNavigationButtonStyles();\n const gridContainerStyles = useGridContainerStyles();\n const buttonRowStyles = useButtonRowStyles();\n const itemButtonStyles = useItemButtonStyles();\n const currentStyles = useCurrentStyles();\n const selectedStyles = useSelectedStyles();\n const disabledStyles = useDisabledStyles();\n const { className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;\n return {\n root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),\n navigationButtonsContainer: mergeClasses(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),\n navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base),\n itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base)\n };\n};\n"],"mappings":"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","ignoreList":[]}
@@ -1,8 +1,6 @@
1
1
  'use client';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
4
- 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';
5
- import { AnimationDirection } from '../Calendar/Calendar.types';
6
4
  /**
7
5
  * @internal
8
6
  */ export const calendarPickerClassNames = {
@@ -51,12 +49,6 @@ const useCurrentItemButtonStyles = makeStyles({
51
49
  padding: '0 4px 0 10px',
52
50
  textAlign: 'left'
53
51
  },
54
- animation: {
55
- animationDuration: DURATION_2,
56
- animationFillMode: 'both',
57
- animationName: FADE_IN,
58
- animationTimingFunction: EASING_FUNCTION_2
59
- },
60
52
  hasHeaderClickCallback: {
61
53
  // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well
62
54
  '&:hover': {
@@ -120,35 +112,6 @@ const useButtonRowStyles = makeStyles({
120
112
  '&:last-of-type': {
121
113
  marginBottom: 0
122
114
  }
123
- },
124
- animation: {
125
- animationDuration: DURATION_3,
126
- animationFillMode: 'both',
127
- animationTimingFunction: EASING_FUNCTION_1
128
- },
129
- horizontalBackward: {
130
- animationName: [
131
- FADE_IN,
132
- SLIDE_RIGHT_IN20
133
- ]
134
- },
135
- horizontalForward: {
136
- animationName: [
137
- FADE_IN,
138
- SLIDE_LEFT_IN20
139
- ]
140
- },
141
- verticalBackward: {
142
- animationName: [
143
- FADE_IN,
144
- SLIDE_DOWN_IN20
145
- ]
146
- },
147
- verticalForward: {
148
- animationName: [
149
- FADE_IN,
150
- SLIDE_UP_IN20
151
- ]
152
115
  }
153
116
  });
154
117
  const useItemButtonStyles = makeStyles({
@@ -263,7 +226,7 @@ const useDisabledStyles = makeStyles({
263
226
  *
264
227
  * @internal
265
228
  */ export const useCalendarPickerStyles_unstable = (props)=>{
266
- 'use no memo';
229
+ 'use no memo'; // justified: compiler would optimize useCalendarPickerStyles_unstable — manual opt-out to preserve runtime behavior
267
230
  const rootStyles = useRootStyles();
268
231
  const headerContainerStyles = useHeaderContainerStyles();
269
232
  const currentItemButtonStyles = useCurrentItemButtonStyles();
@@ -275,15 +238,15 @@ const useDisabledStyles = makeStyles({
275
238
  const currentStyles = useCurrentStyles();
276
239
  const selectedStyles = useSelectedStyles();
277
240
  const disabledStyles = useDisabledStyles();
278
- const { animateBackwards, animationDirection, className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;
241
+ const { className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;
279
242
  return {
280
243
  root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),
281
244
  headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),
282
- currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, animateBackwards !== undefined && currentItemButtonStyles.animation, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
245
+ currentItemButton: mergeClasses(calendarPickerClassNames.currentItemButton, currentItemButtonStyles.base, hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback),
283
246
  navigationButtonsContainer: mergeClasses(calendarPickerClassNames.navigationButtonsContainer, navigationButtonsContainerStyles.base),
284
247
  navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),
285
248
  gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),
286
- buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base, buttonRowStyles.animation, animateBackwards !== undefined && (animationDirection === AnimationDirection.Horizontal ? animateBackwards ? buttonRowStyles.horizontalBackward : buttonRowStyles.horizontalForward : animateBackwards ? buttonRowStyles.verticalBackward : buttonRowStyles.verticalForward)),
249
+ buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base),
287
250
  itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),
288
251
  selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),
289
252
  current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CalendarPicker/useCalendarPickerStyles.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 SLIDE_DOWN_IN20,\n SLIDE_LEFT_IN20,\n SLIDE_RIGHT_IN20,\n SLIDE_UP_IN20,\n} from '../../utils/animations';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarPickerStyles, CalendarPickerStyleProps } from './CalendarPicker.types';\n\n/**\n * @internal\n */\nexport const calendarPickerClassNames: SlotClassNames<CalendarPickerStyles> = {\n root: 'fui-CalendarPicker',\n headerContainer: 'fui-CalendarPicker__headerContainer',\n currentItemButton: 'fui-CalendarPicker__currentItemButton',\n navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n navigationButton: 'fui-CalendarPicker__navigationButton',\n gridContainer: 'fui-CalendarPicker__gridContainer',\n buttonRow: 'fui-CalendarPicker__buttonRow',\n itemButton: 'fui-CalendarPicker__itemButton',\n current: 'fui-CalendarPicker__current',\n selected: 'fui-CalendarPicker__selected',\n disabled: 'fui-CalendarPicker__disabled',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n overflow: 'hidden',\n padding: '12px',\n width: '196px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n});\n\nconst useHeaderContainerStyles = makeStyles({\n base: {\n display: 'flex',\n },\n});\n\nconst useCurrentItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: 'inherit',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n overflow: 'visible',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n },\n animation: {\n animationDuration: DURATION_2,\n animationFillMode: 'both',\n animationName: FADE_IN,\n animationTimingFunction: EASING_FUNCTION_2,\n },\n hasHeaderClickCallback: {\n // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\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 useNavigationButtonsContainerStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'flex',\n },\n});\n\nconst useNavigationButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n minHeight: '28px',\n minWidth: '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\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n },\n },\n});\n\nconst useGridContainerStyles = makeStyles({\n base: {\n marginTop: '4px',\n },\n});\n\nconst useButtonRowStyles = makeStyles({\n base: {\n marginBottom: '16px',\n '&:last-of-type': {\n marginBottom: 0,\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 useItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '40px',\n lineHeight: '40px',\n minHeight: '40px',\n minWidth: '40px',\n margin: '0 12px 0 0',\n overflow: 'visible',\n padding: '0',\n width: '40px',\n\n '&:nth-child(4n + 4)': {\n marginRight: 0,\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0,\n },\n '& div': {\n fontWeight: tokens.fontWeightRegular,\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorNeutralForeground1Static,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n forcedColorAdjust: 'none',\n outline: '1px solid Highlight',\n },\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n },\n});\n\nconst useCurrentStyles = makeStyles({\n highlightCurrent: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n fontWeight: tokens.fontWeightSemibold,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n '&:hover, &:hover:active': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n },\n});\n\nconst useSelectedStyles = makeStyles({\n highlightSelected: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n fontWeight: tokens.fontWeightSemibold,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n '& div': {\n fontWeight: tokens.fontWeightSemibold,\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n },\n },\n});\n\nconst useDisabledStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n },\n});\n\n/**\n * Apply styling to the CalendarPicker slots based on the state\n *\n * @internal\n */\nexport const useCalendarPickerStyles_unstable = (props: CalendarPickerStyleProps): CalendarPickerStyles => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const headerContainerStyles = useHeaderContainerStyles();\n const currentItemButtonStyles = useCurrentItemButtonStyles();\n const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n const navigationButtonStyles = useNavigationButtonStyles();\n const gridContainerStyles = useGridContainerStyles();\n const buttonRowStyles = useButtonRowStyles();\n const itemButtonStyles = useItemButtonStyles();\n const currentStyles = useCurrentStyles();\n const selectedStyles = useSelectedStyles();\n const disabledStyles = useDisabledStyles();\n\n const {\n animateBackwards,\n animationDirection,\n className,\n hasHeaderClickCallback,\n highlightCurrent,\n highlightSelected,\n } = props;\n\n return {\n root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n currentItemButton: mergeClasses(\n calendarPickerClassNames.currentItemButton,\n currentItemButtonStyles.base,\n animateBackwards !== undefined && currentItemButtonStyles.animation,\n hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback,\n ),\n navigationButtonsContainer: mergeClasses(\n calendarPickerClassNames.navigationButtonsContainer,\n navigationButtonsContainerStyles.base,\n ),\n navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n buttonRow: mergeClasses(\n calendarPickerClassNames.buttonRow,\n buttonRowStyles.base,\n buttonRowStyles.animation,\n animateBackwards !== undefined &&\n (animationDirection === AnimationDirection.Horizontal\n ? animateBackwards\n ? buttonRowStyles.horizontalBackward\n : buttonRowStyles.horizontalForward\n : animateBackwards\n ? buttonRowStyles.verticalBackward\n : buttonRowStyles.verticalForward),\n ),\n itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base),\n };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","DURATION_3","EASING_FUNCTION_1","EASING_FUNCTION_2","FADE_IN","SLIDE_DOWN_IN20","SLIDE_LEFT_IN20","SLIDE_RIGHT_IN20","SLIDE_UP_IN20","AnimationDirection","calendarPickerClassNames","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","base","boxSizing","overflow","padding","width","normalize","boxShadow","margin","useHeaderContainerStyles","display","useCurrentItemButtonStyles","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","textAlign","animation","animationDuration","animationFillMode","animationName","animationTimingFunction","hasHeaderClickCallback","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useNavigationButtonsContainerStyles","alignItems","useNavigationButtonStyles","border","colorNeutralForeground1","fontSizeBase200","height","lineHeight","minHeight","minWidth","position","useGridContainerStyles","marginTop","useButtonRowStyles","marginBottom","horizontalBackward","horizontalForward","verticalBackward","verticalForward","useItemButtonStyles","colorNeutralForeground3","marginRight","fontWeightRegular","colorNeutralForeground1Static","forcedColorAdjust","useCurrentStyles","highlightCurrent","colorBrandBackground","colorNeutralForegroundOnBrand","useSelectedStyles","highlightSelected","colorBrandBackgroundInvertedSelected","useDisabledStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarPickerStyles_unstable","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","animateBackwards","animationDirection","className","undefined","Horizontal"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CalendarPicker/useCalendarPickerStyles.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 { CalendarPickerStyles, CalendarPickerStyleProps } from './CalendarPicker.types';\n\n/**\n * @internal\n */\nexport const calendarPickerClassNames: SlotClassNames<CalendarPickerStyles> = {\n root: 'fui-CalendarPicker',\n headerContainer: 'fui-CalendarPicker__headerContainer',\n currentItemButton: 'fui-CalendarPicker__currentItemButton',\n navigationButtonsContainer: 'fui-CalendarPicker__navigationButtonsContainer',\n navigationButton: 'fui-CalendarPicker__navigationButton',\n gridContainer: 'fui-CalendarPicker__gridContainer',\n buttonRow: 'fui-CalendarPicker__buttonRow',\n itemButton: 'fui-CalendarPicker__itemButton',\n current: 'fui-CalendarPicker__current',\n selected: 'fui-CalendarPicker__selected',\n disabled: 'fui-CalendarPicker__disabled',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n overflow: 'hidden',\n padding: '12px',\n width: '196px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n});\n\nconst useHeaderContainerStyles = makeStyles({\n base: {\n display: 'flex',\n },\n});\n\nconst useCurrentItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: 'inherit',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n overflow: 'visible',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n },\n hasHeaderClickCallback: {\n // If this is updated, make sure to update headerIsClickable in useCalendarDayStyles as well\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 useNavigationButtonsContainerStyles = makeStyles({\n base: {\n alignItems: 'center',\n display: 'flex',\n },\n});\n\nconst useNavigationButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n minHeight: '28px',\n minWidth: '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\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n },\n },\n});\n\nconst useGridContainerStyles = makeStyles({\n base: {\n marginTop: '4px',\n },\n});\n\nconst useButtonRowStyles = makeStyles({\n base: {\n marginBottom: '16px',\n '&:last-of-type': {\n marginBottom: 0,\n },\n },\n});\n\nconst useItemButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n border: 'none',\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '40px',\n lineHeight: '40px',\n minHeight: '40px',\n minWidth: '40px',\n margin: '0 12px 0 0',\n overflow: 'visible',\n padding: '0',\n width: '40px',\n\n '&:nth-child(4n + 4)': {\n marginRight: 0,\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0,\n },\n '& div': {\n fontWeight: tokens.fontWeightRegular,\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorNeutralForeground1Static,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'WindowText',\n forcedColorAdjust: 'none',\n outline: '1px solid Highlight',\n },\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Window',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n },\n});\n\nconst useCurrentStyles = makeStyles({\n highlightCurrent: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n fontWeight: tokens.fontWeightSemibold,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n '&:hover, &:hover:active': {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'WindowText',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n },\n});\n\nconst useSelectedStyles = makeStyles({\n highlightSelected: {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n fontWeight: tokens.fontWeightSemibold,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n '& div': {\n fontWeight: tokens.fontWeightSemibold,\n },\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n color: tokens.colorNeutralForeground1Static,\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'Window',\n forcedColorAdjust: 'none',\n },\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n },\n },\n});\n\nconst useDisabledStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n '@media (forced-colors: active)': {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n },\n});\n\n/**\n * Apply styling to the CalendarPicker slots based on the state\n *\n * @internal\n */\nexport const useCalendarPickerStyles_unstable = (props: CalendarPickerStyleProps): CalendarPickerStyles => {\n 'use no memo'; // justified: compiler would optimize useCalendarPickerStyles_unstable — manual opt-out to preserve runtime behavior\n\n const rootStyles = useRootStyles();\n const headerContainerStyles = useHeaderContainerStyles();\n const currentItemButtonStyles = useCurrentItemButtonStyles();\n const navigationButtonsContainerStyles = useNavigationButtonsContainerStyles();\n const navigationButtonStyles = useNavigationButtonStyles();\n const gridContainerStyles = useGridContainerStyles();\n const buttonRowStyles = useButtonRowStyles();\n const itemButtonStyles = useItemButtonStyles();\n const currentStyles = useCurrentStyles();\n const selectedStyles = useSelectedStyles();\n const disabledStyles = useDisabledStyles();\n\n const { className, hasHeaderClickCallback, highlightCurrent, highlightSelected } = props;\n\n return {\n root: mergeClasses(calendarPickerClassNames.root, rootStyles.normalize, rootStyles.base, className),\n headerContainer: mergeClasses(calendarPickerClassNames.headerContainer, headerContainerStyles.base),\n currentItemButton: mergeClasses(\n calendarPickerClassNames.currentItemButton,\n currentItemButtonStyles.base,\n hasHeaderClickCallback && currentItemButtonStyles.hasHeaderClickCallback,\n ),\n navigationButtonsContainer: mergeClasses(\n calendarPickerClassNames.navigationButtonsContainer,\n navigationButtonsContainerStyles.base,\n ),\n navigationButton: mergeClasses(calendarPickerClassNames.navigationButton, navigationButtonStyles.base),\n gridContainer: mergeClasses(calendarPickerClassNames.gridContainer, gridContainerStyles.base),\n buttonRow: mergeClasses(calendarPickerClassNames.buttonRow, buttonRowStyles.base),\n itemButton: mergeClasses(calendarPickerClassNames.itemButton, itemButtonStyles.base),\n selected: mergeClasses(calendarPickerClassNames.selected, highlightSelected && selectedStyles.highlightSelected),\n current: mergeClasses(calendarPickerClassNames.current, highlightCurrent && currentStyles.highlightCurrent),\n disabled: mergeClasses(calendarPickerClassNames.disabled, disabledStyles.base),\n };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarPickerClassNames","root","headerContainer","currentItemButton","navigationButtonsContainer","navigationButton","gridContainer","buttonRow","itemButton","current","selected","disabled","useRootStyles","base","boxSizing","overflow","padding","width","normalize","boxShadow","margin","useHeaderContainerStyles","display","useCurrentItemButtonStyles","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","textAlign","hasHeaderClickCallback","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useNavigationButtonsContainerStyles","alignItems","useNavigationButtonStyles","border","colorNeutralForeground1","fontSizeBase200","height","lineHeight","minHeight","minWidth","position","useGridContainerStyles","marginTop","useButtonRowStyles","marginBottom","useItemButtonStyles","colorNeutralForeground3","marginRight","fontWeightRegular","colorNeutralForeground1Static","forcedColorAdjust","useCurrentStyles","highlightCurrent","colorBrandBackground","colorNeutralForegroundOnBrand","useSelectedStyles","highlightSelected","colorBrandBackgroundInvertedSelected","useDisabledStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarPickerStyles_unstable","props","rootStyles","headerContainerStyles","currentItemButtonStyles","navigationButtonsContainerStyles","navigationButtonStyles","gridContainerStyles","buttonRowStyles","itemButtonStyles","currentStyles","selectedStyles","disabledStyles","className"],"mappings":"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"}
@@ -4,6 +4,7 @@ import { Enter, Space } from '@fluentui/keyboard-keys';
4
4
  import { useArrowNavigationGroup } from '@fluentui/react-tabster';
5
5
  import { mergeClasses } from '@griffel/react';
6
6
  import { useCalendarYearStyles_unstable } from './useCalendarYearStyles.styles';
7
+ import { DirectionalSlideIn } from '../../utils/calendarMotions';
7
8
  const CELL_COUNT = 12;
8
9
  const CELLS_PER_ROW = 4;
9
10
  const DefaultCalendarYearStrings = {
@@ -99,11 +100,15 @@ const CalendarYearGrid = (props)=>{
99
100
  role: "grid",
100
101
  "aria-label": gridAriaLabel
101
102
  }, cells.map((cellRow, index)=>{
102
- return /*#__PURE__*/ React.createElement("div", {
103
- key: 'yearPickerRow_' + index + '_' + fromYear,
103
+ return /*#__PURE__*/ React.createElement(DirectionalSlideIn, {
104
+ key: index,
105
+ replayKey: fromYear,
106
+ animationDirection: animationDirection,
107
+ animateBackwards: animateBackwards
108
+ }, /*#__PURE__*/ React.createElement("div", {
104
109
  role: "row",
105
110
  className: classNames.buttonRow
106
- }, cellRow);
111
+ }, cellRow));
107
112
  }));
108
113
  };
109
114
  CalendarYearGrid.displayName = 'CalendarYearGrid';
@@ -134,11 +139,12 @@ const CalendarYearNavArrow = (props)=>{
134
139
  };
135
140
  return /*#__PURE__*/ React.createElement("button", {
136
141
  className: mergeClasses(classNames.navigationButton, disabled && classNames.disabled),
142
+ "aria-disabled": disabled,
143
+ tabIndex: disabled ? -1 : undefined,
137
144
  onClick: !disabled ? onNavigate : undefined,
138
145
  onKeyDown: !disabled ? onKeyDown : undefined,
139
146
  type: "button",
140
- title: ariaLabelString,
141
- disabled: disabled
147
+ title: ariaLabelString
142
148
  }, direction === CalendarYearNavDirection.Previous ? navigationIcons.upNavigation : navigationIcons.downNavigation);
143
149
  };
144
150
  CalendarYearNavArrow.displayName = 'CalendarYearNavArrow';
@@ -216,18 +222,17 @@ const CalendarYearHeader = (props)=>{
216
222
  }, (_onRenderTitle = onRenderTitle === null || onRenderTitle === void 0 ? void 0 : onRenderTitle(props)) !== null && _onRenderTitle !== void 0 ? _onRenderTitle : /*#__PURE__*/ React.createElement(CalendarYearTitle, props), /*#__PURE__*/ React.createElement(CalendarYearNav, props));
217
223
  };
218
224
  CalendarYearHeader.displayName = 'CalendarYearHeader';
219
- function useAnimateBackwards({ selectedYear, navigatedYear }) {
220
- const rangeYear = selectedYear || navigatedYear || new Date().getFullYear();
221
- const fromYear = Math.floor(rangeYear / 10) * 10;
222
- const previousFromYearRef = React.useRef(fromYear);
223
- React.useRef(()=>{
225
+ function useAnimateBackwards(fromYear) {
226
+ const previousFromYearRef = React.useRef(undefined);
227
+ React.useEffect(()=>{
224
228
  previousFromYearRef.current = fromYear;
225
229
  });
226
230
  // eslint-disable-next-line react-hooks/refs
227
231
  const previousFromYear = previousFromYearRef.current;
228
232
  // eslint-disable-next-line react-hooks/refs
229
- if (!previousFromYear || previousFromYear === fromYear) {
233
+ if (previousFromYear === undefined || previousFromYear === fromYear) {
230
234
  return undefined;
235
+ // eslint-disable-next-line react-hooks/refs
231
236
  } else if (previousFromYear > fromYear) {
232
237
  return true;
233
238
  } else {
@@ -269,8 +274,8 @@ function useYearRangeState({ selectedYear, navigatedYear, onNavigateDate }) {
269
274
  /**
270
275
  * @internal
271
276
  */ export const CalendarYear = (props)=>{
272
- const animateBackwards = useAnimateBackwards(props);
273
277
  const [fromYear, toYear, onNavNext, onNavPrevious] = useYearRangeState(props);
278
+ const animateBackwards = useAnimateBackwards(fromYear);
274
279
  const gridRef = React.useRef(null);
275
280
  React.useImperativeHandle(props.componentRef, ()=>({
276
281
  focus () {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CalendarYear/CalendarYear.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport { useCalendarYearStyles_unstable } from './useCalendarYearStyles.styles';\nimport type {\n CalendarYearStrings,\n CalendarYearProps,\n CalendarYearRange,\n CalendarYearHeaderProps,\n} from './CalendarYear.types';\n\nconst CELL_COUNT = 12;\nconst CELLS_PER_ROW = 4;\n\nconst DefaultCalendarYearStrings: CalendarYearStrings = {\n prevRangeAriaLabel: undefined,\n nextRangeAriaLabel: undefined,\n};\ninterface CalendarYearGrid {\n focus(): void;\n}\n\ninterface CalendarYearGridCellProps extends CalendarYearProps {\n year: number;\n current?: boolean;\n selected?: boolean;\n disabled?: boolean;\n onSelectYear?: (year: number) => void;\n onRenderYear?: (year: number) => React.ReactNode;\n}\n\ninterface CalendarYearGridProps extends CalendarYearProps, CalendarYearRange {\n selectedYear?: number;\n animateBackwards?: boolean;\n componentRef?: React.RefObject<CalendarYearGridCell | null>;\n}\n\ninterface CalendarYearGridCell {\n focus(): void;\n}\n\nconst CalendarYearGridCell: React.FunctionComponent<CalendarYearGridCellProps> = props => {\n const {\n className,\n highlightCurrentYear,\n highlightSelectedYear,\n year,\n selected,\n disabled,\n componentRef,\n onSelectYear,\n onRenderYear,\n } = props;\n\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n buttonRef.current?.focus?.();\n },\n }),\n [],\n );\n\n const onClick = () => {\n onSelectYear?.(year);\n };\n\n const onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter) {\n onSelectYear?.(year);\n }\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n highlightCurrent: highlightCurrentYear,\n highlightSelected: highlightSelectedYear,\n });\n\n return (\n <button\n className={mergeClasses(classNames.itemButton, selected && classNames.selected, disabled && classNames.disabled)}\n type=\"button\"\n role=\"gridcell\"\n onClick={!disabled ? onClick : undefined}\n onKeyDown={!disabled ? onKeyDown : undefined}\n disabled={disabled}\n aria-selected={selected}\n ref={buttonRef}\n >\n {onRenderYear?.(year) ?? year}\n </button>\n );\n};\nCalendarYearGridCell.displayName = 'CalendarYearGridCell';\n\nconst CalendarYearGrid: React.FunctionComponent<CalendarYearGridProps> = props => {\n const {\n className,\n fromYear,\n toYear,\n animationDirection,\n animateBackwards,\n minYear,\n maxYear,\n onSelectYear,\n selectedYear,\n componentRef,\n } = props;\n\n const selectedCellRef = React.useRef<CalendarYearGridCell>(null);\n\n const currentCellRef = React.useRef<CalendarYearGridCell>(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n (selectedCellRef.current || currentCellRef.current)?.focus?.();\n },\n }),\n [],\n );\n\n const renderCell = (yearToRender: number): React.ReactNode => {\n const selected = yearToRender === selectedYear;\n const disabled =\n (minYear !== undefined && yearToRender < minYear) || (maxYear !== undefined && yearToRender > maxYear);\n const current = yearToRender === new Date().getFullYear();\n\n return (\n <CalendarYearGridCell\n {...props}\n key={yearToRender}\n year={yearToRender}\n selected={selected}\n current={current}\n disabled={disabled}\n onSelectYear={onSelectYear}\n componentRef={selected ? selectedCellRef : current ? currentCellRef : undefined}\n />\n );\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n animateBackwards,\n animationDirection,\n });\n\n const onRenderYear = (value: number) => {\n return props.onRenderYear?.(value) ?? value;\n };\n\n const gridAriaLabel = `${onRenderYear(fromYear)} - ${onRenderYear(toYear)}`;\n\n let year = fromYear;\n const cells: React.ReactNode[][] = [];\n\n for (let i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {\n cells.push([]);\n for (let j = 0; j < CELLS_PER_ROW; j++) {\n cells[i].push(renderCell(year));\n year++;\n }\n }\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n return (\n <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={gridAriaLabel}>\n {cells.map((cellRow: React.ReactNode[], index: number) => {\n return (\n <div key={'yearPickerRow_' + index + '_' + fromYear} role=\"row\" className={classNames.buttonRow}>\n {cellRow}\n </div>\n );\n })}\n </div>\n );\n};\nCalendarYearGrid.displayName = 'CalendarYearGrid';\n\nconst CalendarYearNavDirection = {\n Previous: 0 as const,\n Next: 1 as const,\n};\n\ninterface CalendarYearNavArrowProps extends CalendarYearHeaderProps {\n direction: (typeof CalendarYearNavDirection)[keyof typeof CalendarYearNavDirection];\n}\n\nconst CalendarYearNavArrow: React.FunctionComponent<CalendarYearNavArrowProps> = props => {\n const {\n className,\n strings = DefaultCalendarYearStrings,\n direction,\n onSelectPrev,\n onSelectNext,\n fromYear,\n toYear,\n maxYear,\n minYear,\n navigationIcons,\n } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n const ariaLabel =\n direction === CalendarYearNavDirection.Previous ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;\n const newRangeOffset = direction === CalendarYearNavDirection.Previous ? -CELL_COUNT : CELL_COUNT;\n const newRange = { fromYear: fromYear + newRangeOffset, toYear: toYear + newRangeOffset };\n const ariaLabelString = ariaLabel ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange)) : undefined;\n const disabled =\n direction === CalendarYearNavDirection.Previous\n ? minYear !== undefined && fromYear < minYear\n : maxYear !== undefined && props.fromYear + CELL_COUNT > maxYear;\n\n const onNavigate = () => {\n direction === CalendarYearNavDirection.Previous ? onSelectPrev?.() : onSelectNext?.();\n };\n\n const onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter) {\n onNavigate();\n }\n };\n\n return (\n <button\n className={mergeClasses(classNames.navigationButton, disabled && classNames.disabled)}\n onClick={!disabled ? onNavigate : undefined}\n onKeyDown={!disabled ? onKeyDown : undefined}\n type=\"button\"\n title={ariaLabelString}\n disabled={disabled}\n >\n {direction === CalendarYearNavDirection.Previous ? navigationIcons.upNavigation : navigationIcons.downNavigation}\n </button>\n );\n};\nCalendarYearNavArrow.displayName = 'CalendarYearNavArrow';\n\nconst CalendarYearNav: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const { className } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n return (\n <div className={classNames.navigationButtonsContainer}>\n <CalendarYearNavArrow {...props} direction={CalendarYearNavDirection.Previous} />\n <CalendarYearNavArrow {...props} direction={CalendarYearNavDirection.Next} />\n </div>\n );\n};\nCalendarYearNav.displayName = 'CalendarYearNav';\n\nconst CalendarYearTitle: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const {\n className,\n fromYear,\n toYear,\n strings = DefaultCalendarYearStrings,\n animateBackwards,\n animationDirection,\n } = props;\n\n const onHeaderSelect = () => {\n props.onHeaderSelect?.(true);\n };\n\n const onHeaderKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter || ev.key === Space) {\n onHeaderSelect();\n }\n };\n\n const onRenderYear = (year: number) => {\n return props.onRenderYear?.(year) ?? year;\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n if (props.onHeaderSelect) {\n const rangeAriaLabel = strings.rangeAriaLabel;\n const headerAriaLabelFormatString = strings.headerAriaLabelFormatString;\n const currentDateRange = rangeAriaLabel\n ? typeof rangeAriaLabel === 'string'\n ? rangeAriaLabel\n : rangeAriaLabel(props)\n : undefined;\n\n const ariaLabel = headerAriaLabelFormatString\n ? headerAriaLabelFormatString.replace('{0}', currentDateRange ?? '')\n : currentDateRange;\n\n return (\n <button\n className={classNames.currentItemButton}\n onClick={onHeaderSelect}\n onKeyDown={onHeaderKeyDown}\n aria-label={ariaLabel}\n role=\"button\"\n type=\"button\"\n >\n <span aria-live=\"assertive\" aria-atomic=\"true\">\n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n </span>\n </button>\n );\n }\n\n return (\n <div className={classNames.current}>\n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n </div>\n );\n};\nCalendarYearTitle.displayName = 'CalendarYearTitle';\n\nconst CalendarYearHeader: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const { className, animateBackwards, animationDirection, onRenderTitle } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n return (\n <div className={classNames.headerContainer}>\n {onRenderTitle?.(props) ?? <CalendarYearTitle {...props} />}\n <CalendarYearNav {...props} />\n </div>\n );\n};\nCalendarYearHeader.displayName = 'CalendarYearHeader';\n\nfunction useAnimateBackwards({ selectedYear, navigatedYear }: CalendarYearProps) {\n const rangeYear = selectedYear || navigatedYear || new Date().getFullYear();\n const fromYear = Math.floor(rangeYear / 10) * 10;\n\n const previousFromYearRef = React.useRef<number | undefined>(fromYear);\n React.useRef(() => {\n previousFromYearRef.current = fromYear;\n });\n // eslint-disable-next-line react-hooks/refs\n const previousFromYear = previousFromYearRef.current;\n\n // eslint-disable-next-line react-hooks/refs\n if (!previousFromYear || previousFromYear === fromYear) {\n return undefined;\n } else if (previousFromYear > fromYear) {\n return true;\n } else {\n return false;\n }\n}\n\nfunction useYearRangeState({ selectedYear, navigatedYear, onNavigateDate }: CalendarYearProps) {\n const rangeYear = React.useMemo(() => {\n return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;\n }, [navigatedYear, selectedYear]);\n\n const [fromYear, setFromYear] = React.useState<number>(rangeYear);\n\n const onNavNext = () => {\n const newFromYear = fromYear + CELL_COUNT;\n setFromYear(newFromYear);\n onNavigateDate?.(newFromYear);\n };\n\n const onNavPrevious = () => {\n const newFromYear = fromYear - CELL_COUNT;\n setFromYear(newFromYear);\n onNavigateDate?.(newFromYear);\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFromYear(rangeYear);\n }, [rangeYear]);\n\n const toYear = fromYear + CELL_COUNT - 1;\n\n return [fromYear, toYear, onNavNext, onNavPrevious] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarYear: React.FunctionComponent<CalendarYearProps> = props => {\n const animateBackwards = useAnimateBackwards(props);\n const [fromYear, toYear, onNavNext, onNavPrevious] = useYearRangeState(props);\n\n const gridRef = React.useRef<CalendarYearGrid>(null);\n\n React.useImperativeHandle(props.componentRef, () => ({\n focus() {\n gridRef.current?.focus?.();\n },\n }));\n\n const { className } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n return (\n <div className={classNames.root}>\n <CalendarYearHeader\n {...props}\n fromYear={fromYear}\n toYear={toYear}\n onSelectPrev={onNavPrevious}\n onSelectNext={onNavNext}\n animateBackwards={animateBackwards}\n />\n <CalendarYearGrid\n {...props}\n fromYear={fromYear}\n toYear={toYear}\n animateBackwards={animateBackwards}\n componentRef={gridRef}\n />\n </div>\n );\n};\nCalendarYear.displayName = 'CalendarYear';\n"],"names":["React","Enter","Space","useArrowNavigationGroup","mergeClasses","useCalendarYearStyles_unstable","CELL_COUNT","CELLS_PER_ROW","DefaultCalendarYearStrings","prevRangeAriaLabel","undefined","nextRangeAriaLabel","CalendarYearGridCell","props","className","highlightCurrentYear","highlightSelectedYear","year","selected","disabled","componentRef","onSelectYear","onRenderYear","buttonRef","useRef","useImperativeHandle","focus","current","onClick","onKeyDown","ev","key","classNames","highlightCurrent","highlightSelected","button","itemButton","type","role","aria-selected","ref","displayName","CalendarYearGrid","fromYear","toYear","animationDirection","animateBackwards","minYear","maxYear","selectedYear","selectedCellRef","currentCellRef","renderCell","yearToRender","Date","getFullYear","value","gridAriaLabel","cells","i","push","j","arrowNavigationAttributes","axis","div","gridContainer","aria-label","map","cellRow","index","buttonRow","CalendarYearNavDirection","Previous","Next","CalendarYearNavArrow","strings","direction","onSelectPrev","onSelectNext","navigationIcons","ariaLabel","newRangeOffset","newRange","ariaLabelString","onNavigate","navigationButton","title","upNavigation","downNavigation","CalendarYearNav","navigationButtonsContainer","CalendarYearTitle","onHeaderSelect","onHeaderKeyDown","hasHeaderClickCallback","rangeAriaLabel","headerAriaLabelFormatString","currentDateRange","replace","currentItemButton","span","aria-live","aria-atomic","CalendarYearHeader","onRenderTitle","headerContainer","useAnimateBackwards","navigatedYear","rangeYear","Math","floor","previousFromYearRef","previousFromYear","useYearRangeState","onNavigateDate","useMemo","setFromYear","useState","onNavNext","newFromYear","onNavPrevious","useEffect","CalendarYear","gridRef","root"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/CalendarYear/CalendarYear.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { mergeClasses } from '@griffel/react';\nimport { useCalendarYearStyles_unstable } from './useCalendarYearStyles.styles';\nimport { DirectionalSlideIn } from '../../utils/calendarMotions';\nimport type {\n CalendarYearStrings,\n CalendarYearProps,\n CalendarYearRange,\n CalendarYearHeaderProps,\n} from './CalendarYear.types';\n\nconst CELL_COUNT = 12;\nconst CELLS_PER_ROW = 4;\n\nconst DefaultCalendarYearStrings: CalendarYearStrings = {\n prevRangeAriaLabel: undefined,\n nextRangeAriaLabel: undefined,\n};\ninterface CalendarYearGrid {\n focus(): void;\n}\n\ninterface CalendarYearGridCellProps extends CalendarYearProps {\n year: number;\n current?: boolean;\n selected?: boolean;\n disabled?: boolean;\n onSelectYear?: (year: number) => void;\n onRenderYear?: (year: number) => React.ReactNode;\n}\n\ninterface CalendarYearGridProps extends CalendarYearProps, CalendarYearRange {\n selectedYear?: number;\n animateBackwards?: boolean;\n componentRef?: React.RefObject<CalendarYearGridCell | null>;\n}\n\ninterface CalendarYearGridCell {\n focus(): void;\n}\n\nconst CalendarYearGridCell: React.FunctionComponent<CalendarYearGridCellProps> = props => {\n const {\n className,\n highlightCurrentYear,\n highlightSelectedYear,\n year,\n selected,\n disabled,\n componentRef,\n onSelectYear,\n onRenderYear,\n } = props;\n\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n buttonRef.current?.focus?.();\n },\n }),\n [],\n );\n\n const onClick = () => {\n onSelectYear?.(year);\n };\n\n const onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter) {\n onSelectYear?.(year);\n }\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n highlightCurrent: highlightCurrentYear,\n highlightSelected: highlightSelectedYear,\n });\n\n return (\n <button\n className={mergeClasses(classNames.itemButton, selected && classNames.selected, disabled && classNames.disabled)}\n type=\"button\"\n role=\"gridcell\"\n onClick={!disabled ? onClick : undefined}\n onKeyDown={!disabled ? onKeyDown : undefined}\n disabled={disabled}\n aria-selected={selected}\n ref={buttonRef}\n >\n {onRenderYear?.(year) ?? year}\n </button>\n );\n};\nCalendarYearGridCell.displayName = 'CalendarYearGridCell';\n\nconst CalendarYearGrid: React.FunctionComponent<CalendarYearGridProps> = props => {\n const {\n className,\n fromYear,\n toYear,\n animationDirection,\n animateBackwards,\n minYear,\n maxYear,\n onSelectYear,\n selectedYear,\n componentRef,\n } = props;\n\n const selectedCellRef = React.useRef<CalendarYearGridCell>(null);\n\n const currentCellRef = React.useRef<CalendarYearGridCell>(null);\n\n React.useImperativeHandle(\n componentRef,\n () => ({\n focus() {\n (selectedCellRef.current || currentCellRef.current)?.focus?.();\n },\n }),\n [],\n );\n\n const renderCell = (yearToRender: number): React.ReactNode => {\n const selected = yearToRender === selectedYear;\n const disabled =\n (minYear !== undefined && yearToRender < minYear) || (maxYear !== undefined && yearToRender > maxYear);\n const current = yearToRender === new Date().getFullYear();\n\n return (\n <CalendarYearGridCell\n {...props}\n key={yearToRender}\n year={yearToRender}\n selected={selected}\n current={current}\n disabled={disabled}\n onSelectYear={onSelectYear}\n componentRef={selected ? selectedCellRef : current ? currentCellRef : undefined}\n />\n );\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n animateBackwards,\n animationDirection,\n });\n\n const onRenderYear = (value: number) => {\n return props.onRenderYear?.(value) ?? value;\n };\n\n const gridAriaLabel = `${onRenderYear(fromYear)} - ${onRenderYear(toYear)}`;\n\n let year = fromYear;\n const cells: React.ReactNode[][] = [];\n\n for (let i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {\n cells.push([]);\n for (let j = 0; j < CELLS_PER_ROW; j++) {\n cells[i].push(renderCell(year));\n year++;\n }\n }\n\n const arrowNavigationAttributes = useArrowNavigationGroup({ axis: 'grid' });\n\n return (\n <div {...arrowNavigationAttributes} className={classNames.gridContainer} role=\"grid\" aria-label={gridAriaLabel}>\n {cells.map((cellRow: React.ReactNode[], index: number) => {\n return (\n <DirectionalSlideIn\n key={index}\n replayKey={fromYear}\n animationDirection={animationDirection}\n animateBackwards={animateBackwards}\n >\n <div role=\"row\" className={classNames.buttonRow}>\n {cellRow}\n </div>\n </DirectionalSlideIn>\n );\n })}\n </div>\n );\n};\nCalendarYearGrid.displayName = 'CalendarYearGrid';\n\nconst CalendarYearNavDirection = {\n Previous: 0 as const,\n Next: 1 as const,\n};\n\ninterface CalendarYearNavArrowProps extends CalendarYearHeaderProps {\n direction: (typeof CalendarYearNavDirection)[keyof typeof CalendarYearNavDirection];\n}\n\nconst CalendarYearNavArrow: React.FunctionComponent<CalendarYearNavArrowProps> = props => {\n const {\n className,\n strings = DefaultCalendarYearStrings,\n direction,\n onSelectPrev,\n onSelectNext,\n fromYear,\n toYear,\n maxYear,\n minYear,\n navigationIcons,\n } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n const ariaLabel =\n direction === CalendarYearNavDirection.Previous ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;\n const newRangeOffset = direction === CalendarYearNavDirection.Previous ? -CELL_COUNT : CELL_COUNT;\n const newRange = { fromYear: fromYear + newRangeOffset, toYear: toYear + newRangeOffset };\n const ariaLabelString = ariaLabel ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange)) : undefined;\n const disabled =\n direction === CalendarYearNavDirection.Previous\n ? minYear !== undefined && fromYear < minYear\n : maxYear !== undefined && props.fromYear + CELL_COUNT > maxYear;\n\n const onNavigate = () => {\n direction === CalendarYearNavDirection.Previous ? onSelectPrev?.() : onSelectNext?.();\n };\n\n const onKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter) {\n onNavigate();\n }\n };\n\n return (\n <button\n className={mergeClasses(classNames.navigationButton, disabled && classNames.disabled)}\n aria-disabled={disabled}\n tabIndex={disabled ? -1 : undefined}\n onClick={!disabled ? onNavigate : undefined}\n onKeyDown={!disabled ? onKeyDown : undefined}\n type=\"button\"\n title={ariaLabelString}\n >\n {direction === CalendarYearNavDirection.Previous ? navigationIcons.upNavigation : navigationIcons.downNavigation}\n </button>\n );\n};\nCalendarYearNavArrow.displayName = 'CalendarYearNavArrow';\n\nconst CalendarYearNav: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const { className } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n return (\n <div className={classNames.navigationButtonsContainer}>\n <CalendarYearNavArrow {...props} direction={CalendarYearNavDirection.Previous} />\n <CalendarYearNavArrow {...props} direction={CalendarYearNavDirection.Next} />\n </div>\n );\n};\nCalendarYearNav.displayName = 'CalendarYearNav';\n\nconst CalendarYearTitle: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const {\n className,\n fromYear,\n toYear,\n strings = DefaultCalendarYearStrings,\n animateBackwards,\n animationDirection,\n } = props;\n\n const onHeaderSelect = () => {\n props.onHeaderSelect?.(true);\n };\n\n const onHeaderKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {\n if (ev.key === Enter || ev.key === Space) {\n onHeaderSelect();\n }\n };\n\n const onRenderYear = (year: number) => {\n return props.onRenderYear?.(year) ?? year;\n };\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n if (props.onHeaderSelect) {\n const rangeAriaLabel = strings.rangeAriaLabel;\n const headerAriaLabelFormatString = strings.headerAriaLabelFormatString;\n const currentDateRange = rangeAriaLabel\n ? typeof rangeAriaLabel === 'string'\n ? rangeAriaLabel\n : rangeAriaLabel(props)\n : undefined;\n\n const ariaLabel = headerAriaLabelFormatString\n ? headerAriaLabelFormatString.replace('{0}', currentDateRange ?? '')\n : currentDateRange;\n\n return (\n <button\n className={classNames.currentItemButton}\n onClick={onHeaderSelect}\n onKeyDown={onHeaderKeyDown}\n aria-label={ariaLabel}\n role=\"button\"\n type=\"button\"\n >\n <span aria-live=\"assertive\" aria-atomic=\"true\">\n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n </span>\n </button>\n );\n }\n\n return (\n <div className={classNames.current}>\n {onRenderYear(fromYear)} - {onRenderYear(toYear)}\n </div>\n );\n};\nCalendarYearTitle.displayName = 'CalendarYearTitle';\n\nconst CalendarYearHeader: React.FunctionComponent<CalendarYearHeaderProps> = props => {\n const { className, animateBackwards, animationDirection, onRenderTitle } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards,\n animationDirection,\n });\n\n return (\n <div className={classNames.headerContainer}>\n {onRenderTitle?.(props) ?? <CalendarYearTitle {...props} />}\n <CalendarYearNav {...props} />\n </div>\n );\n};\nCalendarYearHeader.displayName = 'CalendarYearHeader';\n\nfunction useAnimateBackwards(fromYear: number): boolean | undefined {\n const previousFromYearRef = React.useRef<number | undefined>(undefined);\n React.useEffect(() => {\n previousFromYearRef.current = fromYear;\n });\n // eslint-disable-next-line react-hooks/refs\n const previousFromYear = previousFromYearRef.current;\n\n // eslint-disable-next-line react-hooks/refs\n if (previousFromYear === undefined || previousFromYear === fromYear) {\n return undefined;\n // eslint-disable-next-line react-hooks/refs\n } else if (previousFromYear > fromYear) {\n return true;\n } else {\n return false;\n }\n}\n\nfunction useYearRangeState({ selectedYear, navigatedYear, onNavigateDate }: CalendarYearProps) {\n const rangeYear = React.useMemo(() => {\n return selectedYear || navigatedYear || Math.floor(new Date().getFullYear() / 10) * 10;\n }, [navigatedYear, selectedYear]);\n\n const [fromYear, setFromYear] = React.useState<number>(rangeYear);\n\n const onNavNext = () => {\n const newFromYear = fromYear + CELL_COUNT;\n setFromYear(newFromYear);\n onNavigateDate?.(newFromYear);\n };\n\n const onNavPrevious = () => {\n const newFromYear = fromYear - CELL_COUNT;\n setFromYear(newFromYear);\n onNavigateDate?.(newFromYear);\n };\n\n React.useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFromYear(rangeYear);\n }, [rangeYear]);\n\n const toYear = fromYear + CELL_COUNT - 1;\n\n return [fromYear, toYear, onNavNext, onNavPrevious] as const;\n}\n\n/**\n * @internal\n */\nexport const CalendarYear: React.FunctionComponent<CalendarYearProps> = props => {\n const [fromYear, toYear, onNavNext, onNavPrevious] = useYearRangeState(props);\n const animateBackwards = useAnimateBackwards(fromYear);\n\n const gridRef = React.useRef<CalendarYearGrid>(null);\n\n React.useImperativeHandle(props.componentRef, () => ({\n focus() {\n gridRef.current?.focus?.();\n },\n }));\n\n const { className } = props;\n\n const classNames = useCalendarYearStyles_unstable({\n className,\n });\n\n return (\n <div className={classNames.root}>\n <CalendarYearHeader\n {...props}\n fromYear={fromYear}\n toYear={toYear}\n onSelectPrev={onNavPrevious}\n onSelectNext={onNavNext}\n animateBackwards={animateBackwards}\n />\n <CalendarYearGrid\n {...props}\n fromYear={fromYear}\n toYear={toYear}\n animateBackwards={animateBackwards}\n componentRef={gridRef}\n />\n </div>\n );\n};\nCalendarYear.displayName = 'CalendarYear';\n"],"names":["React","Enter","Space","useArrowNavigationGroup","mergeClasses","useCalendarYearStyles_unstable","DirectionalSlideIn","CELL_COUNT","CELLS_PER_ROW","DefaultCalendarYearStrings","prevRangeAriaLabel","undefined","nextRangeAriaLabel","CalendarYearGridCell","props","className","highlightCurrentYear","highlightSelectedYear","year","selected","disabled","componentRef","onSelectYear","onRenderYear","buttonRef","useRef","useImperativeHandle","focus","current","onClick","onKeyDown","ev","key","classNames","highlightCurrent","highlightSelected","button","itemButton","type","role","aria-selected","ref","displayName","CalendarYearGrid","fromYear","toYear","animationDirection","animateBackwards","minYear","maxYear","selectedYear","selectedCellRef","currentCellRef","renderCell","yearToRender","Date","getFullYear","value","gridAriaLabel","cells","i","push","j","arrowNavigationAttributes","axis","div","gridContainer","aria-label","map","cellRow","index","replayKey","buttonRow","CalendarYearNavDirection","Previous","Next","CalendarYearNavArrow","strings","direction","onSelectPrev","onSelectNext","navigationIcons","ariaLabel","newRangeOffset","newRange","ariaLabelString","onNavigate","navigationButton","aria-disabled","tabIndex","title","upNavigation","downNavigation","CalendarYearNav","navigationButtonsContainer","CalendarYearTitle","onHeaderSelect","onHeaderKeyDown","hasHeaderClickCallback","rangeAriaLabel","headerAriaLabelFormatString","currentDateRange","replace","currentItemButton","span","aria-live","aria-atomic","CalendarYearHeader","onRenderTitle","headerContainer","useAnimateBackwards","previousFromYearRef","useEffect","previousFromYear","useYearRangeState","navigatedYear","onNavigateDate","rangeYear","useMemo","Math","floor","setFromYear","useState","onNavNext","newFromYear","onNavPrevious","CalendarYear","gridRef","root"],"mappings":"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"}
@@ -9,5 +9,6 @@ import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarP
9
9
  export const useCalendarYearStyles_unstable = props => {
10
10
  'use no memo';
11
11
 
12
+ // justified: compiler would optimize useCalendarYearStyles_unstable — manual opt-out to preserve runtime behavior
12
13
  return useCalendarPickerStyles_unstable(props);
13
14
  };
@@ -1 +1 @@
1
- {"version":3,"names":["useCalendarPickerStyles_unstable","useCalendarYearStyles_unstable","props"],"sources":["useCalendarYearStyles.styles.js"],"sourcesContent":["'use client';\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\n/**\n * Apply styling to the CalendarYear slots based on the state\n *\n * @internal\n */ export const useCalendarYearStyles_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,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,OAAOF,gCAAgC,CAACE,KAAK,CAAC;AAClD,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["useCalendarPickerStyles_unstable","useCalendarYearStyles_unstable","props"],"sources":["useCalendarYearStyles.styles.js"],"sourcesContent":["'use client';\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\n/**\n * Apply styling to the CalendarYear slots based on the state\n *\n * @internal\n */ export const useCalendarYearStyles_unstable = (props)=>{\n 'use no memo'; // justified: compiler would optimize useCalendarYearStyles_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,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EAAE;EACf,OAAOF,gCAAgC,CAACE,KAAK,CAAC;AAClD,CAAC","ignoreList":[]}
@@ -5,6 +5,6 @@ import { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarP
5
5
  *
6
6
  * @internal
7
7
  */ export const useCalendarYearStyles_unstable = (props)=>{
8
- 'use no memo';
8
+ 'use no memo'; // justified: compiler would optimize useCalendarYearStyles_unstable — manual opt-out to preserve runtime behavior
9
9
  return useCalendarPickerStyles_unstable(props);
10
10
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/CalendarYear/useCalendarYearStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types';\n\n/**\n * Apply styling to the CalendarYear slots based on the state\n *\n * @internal\n */\nexport const useCalendarYearStyles_unstable = (props: CalendarYearStyleProps): CalendarYearStyles => {\n 'use no memo';\n\n return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarPickerStyles_unstable","useCalendarYearStyles_unstable","props"],"mappings":"AAAA;AAEA,SAASA,gCAAgC,QAAQ,mDAAmD;AAGpG;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,iCAAiCE;AAC1C,EAAE"}
1
+ {"version":3,"sources":["../src/components/CalendarYear/useCalendarYearStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { useCalendarPickerStyles_unstable } from '../CalendarPicker/useCalendarPickerStyles.styles';\nimport type { CalendarYearStyleProps, CalendarYearStyles } from './CalendarYear.types';\n\n/**\n * Apply styling to the CalendarYear slots based on the state\n *\n * @internal\n */\nexport const useCalendarYearStyles_unstable = (props: CalendarYearStyleProps): CalendarYearStyles => {\n 'use no memo'; // justified: compiler would optimize useCalendarYearStyles_unstable — manual opt-out to preserve runtime behavior\n\n return useCalendarPickerStyles_unstable(props);\n};\n"],"names":["useCalendarPickerStyles_unstable","useCalendarYearStyles_unstable","props"],"mappings":"AAAA;AAEA,SAASA,gCAAgC,QAAQ,mDAAmD;AAGpG;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,eAAe,kHAAkH;IAEjI,OAAOF,iCAAiCE;AAC1C,EAAE"}
@@ -1,10 +1,14 @@
1
- export const EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
2
- export const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
3
- export const DURATION_1 = '0.167s';
4
- export const DURATION_2 = '0.267s';
5
- export const DURATION_3 = '0.367s';
6
- export const DURATION_4 = '0.467s';
7
- export const FADE_IN = {
1
+ import { motionTokens } from '@fluentui/react-motion';
2
+ // === EASING FUNCTIONS ===
3
+ /** @deprecated Slide animations now use motion components. Use motionTokens.curveDecelerateMax instead. */ export const EASING_FUNCTION_1 = motionTokens.curveDecelerateMax;
4
+ /** @deprecated Fade animations now use Fade.In motion component. No exact motion token equivalent. */ export const EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
5
+ // === DURATIONS ===
6
+ /** @deprecated No longer used internally. */ export const DURATION_1 = `${motionTokens.durationFast}ms`;
7
+ /** @deprecated Fade animations now use Fade.In motion component with motionTokens.durationGentle. */ export const DURATION_2 = `${motionTokens.durationGentle}ms`;
8
+ /** @deprecated Slide animations now use motion components with motionTokens.durationSlower. */ export const DURATION_3 = `${motionTokens.durationSlower}ms`;
9
+ /** @deprecated No longer used internally. */ export const DURATION_4 = `${motionTokens.durationUltraSlow}ms`;
10
+ // === FADE ANIMATIONS ===
11
+ /** @deprecated Fade animations now use Fade.In motion component. */ export const FADE_IN = {
8
12
  from: {
9
13
  opacity: 0
10
14
  },
@@ -12,7 +16,7 @@ export const FADE_IN = {
12
16
  opacity: 1
13
17
  }
14
18
  };
15
- export const FADE_OUT = {
19
+ /** @deprecated Slide animations now use motion components. */ export const FADE_OUT = {
16
20
  from: {
17
21
  opacity: 1
18
22
  },
@@ -21,7 +25,8 @@ export const FADE_OUT = {
21
25
  visibility: 'hidden'
22
26
  }
23
27
  };
24
- export const SLIDE_DOWN_IN20 = {
28
+ // === SLIDE ANIMATIONS ===
29
+ /** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */ export const SLIDE_DOWN_IN20 = {
25
30
  from: {
26
31
  pointerEvents: 'none',
27
32
  transform: 'translate3d(0, -20px, 0)'
@@ -31,37 +36,37 @@ export const SLIDE_DOWN_IN20 = {
31
36
  transform: 'translate3d(0, 0, 0)'
32
37
  }
33
38
  };
34
- export const SLIDE_LEFT_IN20 = {
39
+ /** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */ export const SLIDE_UP_IN20 = {
35
40
  from: {
36
41
  pointerEvents: 'none',
37
- transform: 'translate3d(20px, 0, 0)'
42
+ transform: 'translate3d(0, 20px, 0)'
38
43
  },
39
44
  to: {
40
45
  pointerEvents: 'auto',
41
46
  transform: 'translate3d(0, 0, 0)'
42
47
  }
43
48
  };
44
- export const SLIDE_RIGHT_IN20 = {
49
+ /** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */ export const SLIDE_LEFT_IN20 = {
45
50
  from: {
46
51
  pointerEvents: 'none',
47
- transform: 'translate3d(-20px, 0, 0)'
52
+ transform: 'translate3d(20px, 0, 0)'
48
53
  },
49
54
  to: {
50
55
  pointerEvents: 'auto',
51
56
  transform: 'translate3d(0, 0, 0)'
52
57
  }
53
58
  };
54
- export const SLIDE_UP_IN20 = {
59
+ /** @deprecated Slide-in animations now use the `DirectionalSlideIn` motion component. */ export const SLIDE_RIGHT_IN20 = {
55
60
  from: {
56
61
  pointerEvents: 'none',
57
- transform: 'translate3d(0, 20px, 0)'
62
+ transform: 'translate3d(-20px, 0, 0)'
58
63
  },
59
64
  to: {
60
65
  pointerEvents: 'auto',
61
66
  transform: 'translate3d(0, 0, 0)'
62
67
  }
63
68
  };
64
- export const SLIDE_DOWN_OUT20 = {
69
+ /** @deprecated Slide-out animations now use the `DirectionalSlideOut` motion component. */ export const SLIDE_DOWN_OUT20 = {
65
70
  from: {
66
71
  transform: 'translate3d(0, 0, 0)'
67
72
  },
@@ -69,7 +74,7 @@ export const SLIDE_DOWN_OUT20 = {
69
74
  transform: 'translate3d(0, 20px, 0)'
70
75
  }
71
76
  };
72
- export const SLIDE_UP_OUT20 = {
77
+ /** @deprecated Slide-out animations now use the `DirectionalSlideOut` motion component. */ export const SLIDE_UP_OUT20 = {
73
78
  from: {
74
79
  transform: 'translate3d(0, 0, 0)'
75
80
  },
@@ -77,7 +82,8 @@ export const SLIDE_UP_OUT20 = {
77
82
  transform: 'translate3d(0, -20px, 0)'
78
83
  }
79
84
  };
80
- export const TRANSITION_ROW_DISAPPEARANCE = {
85
+ // === OTHER TRANSITIONS ===
86
+ /** @deprecated No longer used internally. */ export const TRANSITION_ROW_DISAPPEARANCE = {
81
87
  '100%': {
82
88
  height: '0px',
83
89
  overflow: 'hidden',