@fluentui/react-calendar-compat 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250707-0406.1

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 (30) hide show
  1. package/CHANGELOG.md +12 -12
  2. package/package.json +9 -9
  3. package/lib/components/Calendar/useCalendarStyles.styles.raw.js +0 -115
  4. package/lib/components/Calendar/useCalendarStyles.styles.raw.js.map +0 -1
  5. package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js +0 -142
  6. package/lib/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +0 -1
  7. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +0 -395
  8. package/lib/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +0 -1
  9. package/lib/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js +0 -92
  10. package/lib/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js.map +0 -1
  11. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +0 -9
  12. package/lib/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +0 -1
  13. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +0 -291
  14. package/lib/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +0 -1
  15. package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js +0 -9
  16. package/lib/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +0 -1
  17. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js +0 -127
  18. package/lib-commonjs/components/Calendar/useCalendarStyles.styles.raw.js.map +0 -1
  19. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js +0 -154
  20. package/lib-commonjs/components/CalendarDay/useCalendarDayStyles.styles.raw.js.map +0 -1
  21. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js +0 -408
  22. package/lib-commonjs/components/CalendarDayGrid/useCalendarDayGridStyles.styles.raw.js.map +0 -1
  23. package/lib-commonjs/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js +0 -106
  24. package/lib-commonjs/components/CalendarDayGrid/useWeekCornerStyles.styles.raw.js.map +0 -1
  25. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js +0 -15
  26. package/lib-commonjs/components/CalendarMonth/useCalendarMonthStyles.styles.raw.js.map +0 -1
  27. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js +0 -303
  28. package/lib-commonjs/components/CalendarPicker/useCalendarPickerStyles.styles.raw.js.map +0 -1
  29. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js +0 -15
  30. package/lib-commonjs/components/CalendarYear/useCalendarYearStyles.styles.raw.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,25 +1,25 @@
1
1
  # Change Log - @fluentui/react-calendar-compat
2
2
 
3
- This log was last generated on Thu, 03 Jul 2025 11:19:39 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 07 Jul 2025 04:22:59 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250703-1103.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.0-nightly-20250703-1103.1)
7
+ ## [0.0.0-nightly-20250707-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.0.0-nightly-20250707-0406.1)
8
8
 
9
- Thu, 03 Jul 2025 11:19:39 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.3..@fluentui/react-calendar-compat_v0.0.0-nightly-20250703-1103.1)
9
+ Mon, 07 Jul 2025 04:22:59 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.3.3..@fluentui/react-calendar-compat_v0.0.0-nightly-20250707-0406.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
18
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
19
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
20
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
21
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
21
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250707-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/0f2f74845f342625c7dff5f00e75864a86e297cb) by beachball)
23
23
 
24
24
  ## [0.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.3.3)
25
25
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-calendar-compat",
3
- "version": "0.0.0-nightly-20250703-1103.1",
3
+ "version": "0.0.0-nightly-20250707-0406.1",
4
4
  "description": "Calendar compat component for Fluent UI v9",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,18 +13,18 @@
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
15
  "@fluentui/eslint-plugin": "*",
16
- "@fluentui/react-conformance": "0.0.0-nightly-20250703-1103.1",
17
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250703-1103.1",
16
+ "@fluentui/react-conformance": "0.0.0-nightly-20250707-0406.1",
17
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250707-0406.1",
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/keyboard-keys": "0.0.0-nightly-20250703-1103.1",
21
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20250707-0406.1",
22
22
  "@fluentui/react-icons": "^2.0.245",
23
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250703-1103.1",
24
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250703-1103.1",
25
- "@fluentui/react-tabster": "0.0.0-nightly-20250703-1103.1",
26
- "@fluentui/react-theme": "0.0.0-nightly-20250703-1103.1",
27
- "@fluentui/react-utilities": "0.0.0-nightly-20250703-1103.1",
23
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250707-0406.1",
24
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250707-0406.1",
25
+ "@fluentui/react-tabster": "0.0.0-nightly-20250707-0406.1",
26
+ "@fluentui/react-theme": "0.0.0-nightly-20250707-0406.1",
27
+ "@fluentui/react-utilities": "0.0.0-nightly-20250707-0406.1",
28
28
  "@griffel/react": "^1.5.22",
29
29
  "@swc/helpers": "^0.5.1"
30
30
  },
@@ -1,115 +0,0 @@
1
- import { tokens } from '@fluentui/react-theme';
2
- import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
3
- /**
4
- * @internal
5
- */ export const calendarClassNames = {
6
- root: 'fui-Calendar',
7
- divider: 'fui-Calendar__divider',
8
- goTodayButton: 'fui-Calendar__goTodayButton',
9
- monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',
10
- liveRegion: 'fui-Calendar__liveRegion'
11
- };
12
- const useRootStyles = makeStyles({
13
- base: {
14
- display: 'flex',
15
- width: '220px'
16
- },
17
- normalize: {
18
- boxShadow: 'none',
19
- boxSizing: 'border-box',
20
- margin: '0',
21
- padding: '0'
22
- },
23
- monthPickerNotVisible: {
24
- flexDirection: 'column'
25
- },
26
- dayAndMonthPickersVisible: {
27
- width: '440px'
28
- },
29
- dayPickerVisibleAndWeekNumbersShown: {
30
- width: '250px'
31
- },
32
- dayAndMonthPickersVisibleAndWeekNumbersShown: {
33
- width: '470px'
34
- }
35
- });
36
- const useDividerStyles = makeStyles({
37
- base: {
38
- borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
39
- top: 0
40
- }
41
- });
42
- const useMonthPickerWrapperStyles = makeStyles({
43
- base: {
44
- display: 'flex',
45
- flexDirection: 'column'
46
- }
47
- });
48
- const useGoTodayButtonStyles = makeStyles({
49
- base: {
50
- alignSelf: 'flex-end',
51
- backgroundColor: tokens.colorTransparentBackground,
52
- ...shorthands.borderStyle('none'),
53
- bottom: 0,
54
- boxSizing: 'content-box',
55
- color: tokens.colorNeutralForeground1,
56
- fontFamily: 'inherit',
57
- fontSize: tokens.fontSizeBase200,
58
- height: '30px',
59
- lineHeight: '30px',
60
- marginRight: '16px',
61
- marginTop: '3px',
62
- overflow: 'visible',
63
- padding: '0 4px',
64
- '& div': {
65
- fontSize: tokens.fontSizeBase200
66
- },
67
- '&:hover': {
68
- backgroundColor: tokens.colorTransparentBackground,
69
- color: tokens.colorBrandForeground1,
70
- cursor: 'pointer',
71
- '@media (forced-colors: active)': {
72
- outline: tokens.strokeWidthThin,
73
- borderRadius: tokens.borderRadiusSmall
74
- }
75
- },
76
- '&:hover:active': {
77
- color: tokens.colorBrandForeground2
78
- },
79
- '&:disabled': {
80
- color: tokens.colorNeutralForegroundDisabled,
81
- pointerEvents: 'none'
82
- }
83
- }
84
- });
85
- const useLiveRegionStyles = makeStyles({
86
- base: {
87
- border: 'none',
88
- height: '1px',
89
- margin: '-1px',
90
- overflow: 'hidden',
91
- padding: '0',
92
- position: 'absolute',
93
- width: '1px'
94
- }
95
- });
96
- /**
97
- * @internal
98
- *
99
- * Apply styling to the Calendar slots based on the state
100
- */ export const useCalendarStyles_unstable = (props)=>{
101
- 'use no memo';
102
- const rootStyles = useRootStyles();
103
- const dividerStyles = useDividerStyles();
104
- const monthPickerWrapperStyles = useMonthPickerWrapperStyles();
105
- const goTodayButtonStyles = useGoTodayButtonStyles();
106
- const liveRegionStyles = useLiveRegionStyles();
107
- const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;
108
- return {
109
- root: mergeClasses(calendarClassNames.root, rootStyles.base, rootStyles.normalize, !isMonthPickerVisible && rootStyles.monthPickerNotVisible, isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible, isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown, isDayPickerVisible && isMonthPickerVisible && showWeekNumbers && rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown, className),
110
- divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),
111
- monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),
112
- goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),
113
- liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base)
114
- };
115
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Calendar/useCalendarStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarStyles, CalendarStyleProps } from './Calendar.types';\n\n/**\n * @internal\n */\nexport const calendarClassNames: SlotClassNames<CalendarStyles> = {\n root: 'fui-Calendar',\n divider: 'fui-Calendar__divider',\n goTodayButton: 'fui-Calendar__goTodayButton',\n monthPickerWrapper: 'fui-Calendar__monthPickerWrapper',\n liveRegion: 'fui-Calendar__liveRegion',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n display: 'flex',\n width: '220px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n monthPickerNotVisible: {\n flexDirection: 'column',\n },\n dayAndMonthPickersVisible: {\n width: '440px',\n },\n dayPickerVisibleAndWeekNumbersShown: {\n width: '250px',\n },\n dayAndMonthPickersVisibleAndWeekNumbersShown: {\n width: '470px',\n },\n});\n\nconst useDividerStyles = makeStyles({\n base: {\n borderRight: `1px solid ${tokens.colorNeutralStroke2}`,\n top: 0,\n },\n});\n\nconst useMonthPickerWrapperStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column',\n },\n});\n\nconst useGoTodayButtonStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n bottom: 0,\n boxSizing: 'content-box',\n color: tokens.colorNeutralForeground1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '30px',\n lineHeight: '30px',\n marginRight: '16px',\n marginTop: '3px',\n overflow: 'visible',\n padding: '0 4px',\n\n '& div': {\n fontSize: tokens.fontSizeBase200,\n },\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n color: tokens.colorBrandForeground1,\n cursor: 'pointer',\n\n '@media (forced-colors: active)': {\n outline: tokens.strokeWidthThin,\n borderRadius: tokens.borderRadiusSmall,\n },\n },\n '&:hover:active': {\n color: tokens.colorBrandForeground2,\n },\n '&:disabled': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n },\n});\n\nconst useLiveRegionStyles = makeStyles({\n base: {\n border: 'none',\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: '0',\n position: 'absolute',\n width: '1px',\n },\n});\n\n/**\n * @internal\n *\n * Apply styling to the Calendar slots based on the state\n */\nexport const useCalendarStyles_unstable = (props: CalendarStyleProps): CalendarStyles => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const dividerStyles = useDividerStyles();\n const monthPickerWrapperStyles = useMonthPickerWrapperStyles();\n const goTodayButtonStyles = useGoTodayButtonStyles();\n const liveRegionStyles = useLiveRegionStyles();\n\n const { className, isDayPickerVisible, isMonthPickerVisible, showWeekNumbers } = props;\n\n return {\n root: mergeClasses(\n calendarClassNames.root,\n rootStyles.base,\n rootStyles.normalize,\n !isMonthPickerVisible && rootStyles.monthPickerNotVisible,\n isDayPickerVisible && isMonthPickerVisible && !showWeekNumbers && rootStyles.dayAndMonthPickersVisible,\n isDayPickerVisible && !isMonthPickerVisible && showWeekNumbers && rootStyles.dayPickerVisibleAndWeekNumbersShown,\n isDayPickerVisible &&\n isMonthPickerVisible &&\n showWeekNumbers &&\n rootStyles.dayAndMonthPickersVisibleAndWeekNumbersShown,\n className,\n ),\n divider: mergeClasses(calendarClassNames.divider, dividerStyles.base),\n monthPickerWrapper: mergeClasses(calendarClassNames.monthPickerWrapper, monthPickerWrapperStyles.base),\n goTodayButton: mergeClasses(calendarClassNames.goTodayButton, goTodayButtonStyles.base),\n liveRegion: mergeClasses(calendarClassNames.liveRegion, liveRegionStyles.base),\n };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","calendarClassNames","root","divider","goTodayButton","monthPickerWrapper","liveRegion","useRootStyles","base","display","width","normalize","boxShadow","boxSizing","margin","padding","monthPickerNotVisible","flexDirection","dayAndMonthPickersVisible","dayPickerVisibleAndWeekNumbersShown","dayAndMonthPickersVisibleAndWeekNumbersShown","useDividerStyles","borderRight","colorNeutralStroke2","top","useMonthPickerWrapperStyles","useGoTodayButtonStyles","alignSelf","backgroundColor","colorTransparentBackground","borderStyle","bottom","color","colorNeutralForeground1","fontFamily","fontSize","fontSizeBase200","height","lineHeight","marginRight","marginTop","overflow","colorBrandForeground1","cursor","outline","strokeWidthThin","borderRadius","borderRadiusSmall","colorBrandForeground2","colorNeutralForegroundDisabled","pointerEvents","useLiveRegionStyles","border","position","useCalendarStyles_unstable","props","rootStyles","dividerStyles","monthPickerWrapperStyles","goTodayButtonStyles","liveRegionStyles","className","isDayPickerVisible","isMonthPickerVisible","showWeekNumbers"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
@@ -1,142 +0,0 @@
1
- import { tokens } from '@fluentui/react-theme';
2
- import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
3
- import { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';
4
- /**
5
- * @internal
6
- */ export const calendarDayClassNames = {
7
- root: 'fui-CalendarDay',
8
- header: 'fui-CalendarDay__header',
9
- monthAndYear: 'fui-CalendarDay__monthAndYear',
10
- monthComponents: 'fui-CalendarDay__monthComponents',
11
- headerIconButton: 'fui-CalendarDay__headerIconButton',
12
- disabledStyle: 'fui-CalendarDay__disabledStyle'
13
- };
14
- const useRootStyles = makeStyles({
15
- base: {
16
- boxSizing: 'content-box',
17
- padding: '12px',
18
- width: '196px'
19
- },
20
- normalize: {
21
- boxShadow: 'none',
22
- boxSizing: 'border-box',
23
- margin: '0',
24
- padding: '0'
25
- },
26
- showWeekNumbers: {
27
- width: '226px'
28
- }
29
- });
30
- const useHeaderStyles = makeStyles({
31
- base: {
32
- display: 'inline-flex',
33
- height: '28px',
34
- lineHeight: '44px',
35
- position: 'relative',
36
- width: '100%'
37
- }
38
- });
39
- const useMonthAndYearStyles = makeStyles({
40
- base: {
41
- alignItems: 'center',
42
- backgroundColor: tokens.colorTransparentBackground,
43
- ...shorthands.borderStyle('none'),
44
- borderRadius: tokens.borderRadiusMedium,
45
- color: tokens.colorNeutralForeground1,
46
- display: 'inline-block',
47
- flexGrow: 1,
48
- fontFamily: 'inherit',
49
- fontSize: tokens.fontSizeBase300,
50
- fontWeight: tokens.fontWeightSemibold,
51
- lineHeight: '28px',
52
- overflow: 'hidden',
53
- padding: '0 4px 0 10px',
54
- textAlign: 'left',
55
- textOverflow: 'ellipsis',
56
- whiteSpace: 'nowrap'
57
- },
58
- animation: {
59
- animationDuration: DURATION_2,
60
- animationFillMode: 'both',
61
- animationName: FADE_IN,
62
- animationTimingFunction: EASING_FUNCTION_2
63
- },
64
- headerIsClickable: {
65
- '&:hover': {
66
- backgroundColor: tokens.colorBrandBackgroundInvertedHover,
67
- color: tokens.colorBrandForegroundOnLightHover,
68
- cursor: 'pointer',
69
- outline: `1px solid ${tokens.colorTransparentStroke}`
70
- },
71
- '&:hover:active': {
72
- backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
73
- color: tokens.colorBrandForegroundOnLightPressed,
74
- cursor: 'pointer',
75
- outline: `1px solid ${tokens.colorTransparentStroke}`
76
- }
77
- }
78
- });
79
- const useMonthComponentsStyles = makeStyles({
80
- base: {
81
- alignSelf: 'flex-end',
82
- display: 'inline-flex'
83
- }
84
- });
85
- const useHeaderIconButtonStyles = makeStyles({
86
- base: {
87
- backgroundColor: tokens.colorTransparentBackground,
88
- ...shorthands.borderStyle('none'),
89
- borderRadius: tokens.borderRadiusMedium,
90
- color: tokens.colorNeutralForeground3,
91
- display: 'block',
92
- fontFamily: 'inherit',
93
- fontSize: tokens.fontSizeBase200,
94
- height: '28px',
95
- lineHeight: '28px',
96
- overflow: 'visible',
97
- padding: '0',
98
- position: 'relative',
99
- textAlign: 'center',
100
- width: '28px',
101
- '&:hover': {
102
- backgroundColor: tokens.colorBrandBackgroundInvertedHover,
103
- color: tokens.colorBrandForegroundOnLightHover,
104
- cursor: 'pointer',
105
- outline: `1px solid ${tokens.colorTransparentStroke}`
106
- },
107
- '&:hover:active': {
108
- backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
109
- color: tokens.colorBrandForegroundOnLightPressed
110
- }
111
- }
112
- });
113
- const useDisabledStyleStyles = makeStyles({
114
- base: {
115
- '&, &:disabled, & button': {
116
- color: tokens.colorNeutralForegroundDisabled,
117
- pointerEvents: 'none'
118
- }
119
- }
120
- });
121
- /**
122
- * @internal
123
- *
124
- * Apply styling to the CalendarDay slots based on the state
125
- */ export const useCalendarDayStyles_unstable = (props)=>{
126
- 'use no memo';
127
- const rootStyles = useRootStyles();
128
- const headerStyles = useHeaderStyles();
129
- const monthAndYearStyles = useMonthAndYearStyles();
130
- const monthComponentsStyles = useMonthComponentsStyles();
131
- const headerIconButtonStyles = useHeaderIconButtonStyles();
132
- const disabledStyleStyles = useDisabledStyleStyles();
133
- const { className, headerIsClickable, showWeekNumbers } = props;
134
- return {
135
- root: mergeClasses(calendarDayClassNames.root, rootStyles.normalize, rootStyles.base, showWeekNumbers && rootStyles.showWeekNumbers, className),
136
- header: mergeClasses(calendarDayClassNames.header, headerStyles.base),
137
- monthAndYear: mergeClasses(calendarDayClassNames.monthAndYear, monthAndYearStyles.base, monthAndYearStyles.animation, headerIsClickable && monthAndYearStyles.headerIsClickable),
138
- monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),
139
- headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),
140
- disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base)
141
- };
142
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/CalendarDay/useCalendarDayStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { DURATION_2, EASING_FUNCTION_2, FADE_IN } from '../../utils/animations';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CalendarDayStyles, CalendarDayStyleProps } from './CalendarDay.types';\n\n/**\n * @internal\n */\nexport const calendarDayClassNames: SlotClassNames<CalendarDayStyles> = {\n root: 'fui-CalendarDay',\n header: 'fui-CalendarDay__header',\n monthAndYear: 'fui-CalendarDay__monthAndYear',\n monthComponents: 'fui-CalendarDay__monthComponents',\n headerIconButton: 'fui-CalendarDay__headerIconButton',\n disabledStyle: 'fui-CalendarDay__disabledStyle',\n};\n\nconst useRootStyles = makeStyles({\n base: {\n boxSizing: 'content-box',\n padding: '12px',\n width: '196px',\n },\n normalize: {\n boxShadow: 'none',\n boxSizing: 'border-box',\n margin: '0',\n padding: '0',\n },\n showWeekNumbers: {\n width: '226px',\n },\n});\n\nconst useHeaderStyles = makeStyles({\n base: {\n display: 'inline-flex',\n height: '28px',\n lineHeight: '44px',\n position: 'relative',\n width: '100%',\n },\n});\n\nconst useMonthAndYearStyles = makeStyles({\n base: {\n alignItems: 'center',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground1,\n display: 'inline-block',\n flexGrow: 1,\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: '28px',\n overflow: 'hidden',\n padding: '0 4px 0 10px',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n animation: {\n animationDuration: DURATION_2,\n animationFillMode: 'both',\n animationName: FADE_IN,\n animationTimingFunction: EASING_FUNCTION_2,\n },\n headerIsClickable: {\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n },\n});\n\nconst useMonthComponentsStyles = makeStyles({\n base: {\n alignSelf: 'flex-end',\n display: 'inline-flex',\n },\n});\n\nconst useHeaderIconButtonStyles = makeStyles({\n base: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderStyle('none'),\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontFamily: 'inherit',\n fontSize: tokens.fontSizeBase200,\n height: '28px',\n lineHeight: '28px',\n overflow: 'visible',\n padding: '0',\n position: 'relative',\n textAlign: 'center',\n width: '28px',\n\n '&:hover': {\n backgroundColor: tokens.colorBrandBackgroundInvertedHover,\n color: tokens.colorBrandForegroundOnLightHover,\n cursor: 'pointer',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n },\n '&:hover:active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedPressed,\n color: tokens.colorBrandForegroundOnLightPressed,\n },\n },\n});\n\nconst useDisabledStyleStyles = makeStyles({\n base: {\n '&, &:disabled, & button': {\n color: tokens.colorNeutralForegroundDisabled,\n pointerEvents: 'none',\n },\n },\n});\n\n/**\n * @internal\n *\n * Apply styling to the CalendarDay slots based on the state\n */\nexport const useCalendarDayStyles_unstable = (props: CalendarDayStyleProps): CalendarDayStyles => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const headerStyles = useHeaderStyles();\n const monthAndYearStyles = useMonthAndYearStyles();\n const monthComponentsStyles = useMonthComponentsStyles();\n const headerIconButtonStyles = useHeaderIconButtonStyles();\n const disabledStyleStyles = useDisabledStyleStyles();\n\n const { className, headerIsClickable, showWeekNumbers } = props;\n\n return {\n root: mergeClasses(\n calendarDayClassNames.root,\n rootStyles.normalize,\n rootStyles.base,\n showWeekNumbers && rootStyles.showWeekNumbers,\n className,\n ),\n header: mergeClasses(calendarDayClassNames.header, headerStyles.base),\n monthAndYear: mergeClasses(\n calendarDayClassNames.monthAndYear,\n monthAndYearStyles.base,\n monthAndYearStyles.animation,\n headerIsClickable && monthAndYearStyles.headerIsClickable,\n ),\n monthComponents: mergeClasses(calendarDayClassNames.monthComponents, monthComponentsStyles.base),\n headerIconButton: mergeClasses(calendarDayClassNames.headerIconButton, headerIconButtonStyles.base),\n disabledStyle: mergeClasses(calendarDayClassNames.disabledStyle, disabledStyleStyles.base),\n };\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","DURATION_2","EASING_FUNCTION_2","FADE_IN","calendarDayClassNames","root","header","monthAndYear","monthComponents","headerIconButton","disabledStyle","useRootStyles","base","boxSizing","padding","width","normalize","boxShadow","margin","showWeekNumbers","useHeaderStyles","display","height","lineHeight","position","useMonthAndYearStyles","alignItems","backgroundColor","colorTransparentBackground","borderStyle","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","flexGrow","fontFamily","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","overflow","textAlign","textOverflow","whiteSpace","animation","animationDuration","animationFillMode","animationName","animationTimingFunction","headerIsClickable","colorBrandBackgroundInvertedHover","colorBrandForegroundOnLightHover","cursor","outline","colorTransparentStroke","colorBrandBackgroundInvertedPressed","colorBrandForegroundOnLightPressed","useMonthComponentsStyles","alignSelf","useHeaderIconButtonStyles","colorNeutralForeground3","fontSizeBase200","useDisabledStyleStyles","colorNeutralForegroundDisabled","pointerEvents","useCalendarDayStyles_unstable","props","rootStyles","headerStyles","monthAndYearStyles","monthComponentsStyles","headerIconButtonStyles","disabledStyleStyles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}