@fluentui/react-datepicker-compat 0.6.7 → 0.6.8

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 (6) hide show
  1. package/CHANGELOG.md +18 -2
  2. package/lib/components/DatePicker/useDatePickerStyles.styles.raw.js +52 -0
  3. package/lib/components/DatePicker/useDatePickerStyles.styles.raw.js.map +1 -0
  4. package/lib-commonjs/components/DatePicker/useDatePickerStyles.styles.raw.js +68 -0
  5. package/lib-commonjs/components/DatePicker/useDatePickerStyles.styles.raw.js.map +1 -0
  6. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-datepicker-compat
2
2
 
3
- This log was last generated on Fri, 11 Jul 2025 15:56:58 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Jul 2025 13:45:37 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.6.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.6.8)
8
+
9
+ Thu, 17 Jul 2025 13:45:37 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.6.7..@fluentui/react-datepicker-compat_v0.6.8)
11
+
12
+ ### Patches
13
+
14
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
15
+ - Bump @fluentui/react-calendar-compat to v0.3.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
16
+ - Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
17
+ - Bump @fluentui/react-input to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
18
+ - Bump @fluentui/react-popover to v9.12.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
19
+ - Bump @fluentui/react-portal to v9.7.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
20
+ - Bump @fluentui/react-positioning to v9.20.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
21
+ - Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
22
+
7
23
  ## [0.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-datepicker-compat_v0.6.7)
8
24
 
9
- Fri, 11 Jul 2025 15:56:58 GMT
25
+ Fri, 11 Jul 2025 15:59:24 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-datepicker-compat_v0.6.6..@fluentui/react-datepicker-compat_v0.6.7)
11
27
 
12
28
  ### Patches
package/lib/components/DatePicker/useDatePickerStyles.styles.raw.js ADDED
@@ -0,0 +1,52 @@
1
+ import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
2
+ import { tokens, typographyStyles } from '@fluentui/react-theme';
3
+ export const datePickerClassNames = {
4
+ root: 'fui-DatePicker',
5
+ calendar: 'fui-DatePicker__calendar',
6
+ popupSurface: 'fui-DatePicker__popupSurface'
7
+ };
8
+ const useStyles = makeStyles({
9
+ base: {
10
+ position: 'relative',
11
+ cursor: 'pointer',
12
+ '& input': {
13
+ cursor: 'pointer'
14
+ }
15
+ },
16
+ disabled: {
17
+ cursor: 'default',
18
+ '& input': {
19
+ cursor: 'default'
20
+ }
21
+ },
22
+ inline: {
23
+ // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
24
+ // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
25
+ zIndex: 1
26
+ }
27
+ });
28
+ const usePopupSurfaceClassName = makeResetStyles({
29
+ backgroundColor: tokens.colorNeutralBackground1,
30
+ boxShadow: tokens.shadow16,
31
+ borderRadius: tokens.borderRadiusMedium,
32
+ borderWidth: '1px',
33
+ borderStyle: 'solid',
34
+ borderColor: tokens.colorTransparentStroke,
35
+ display: 'inline-flex',
36
+ color: tokens.colorNeutralForeground1,
37
+ ...typographyStyles.body1
38
+ });
39
+ /**
40
+ * Apply styling to the DatePicker slots based on the state
41
+ */ export const useDatePickerStyles_unstable = (state)=>{
42
+ 'use no memo';
43
+ const styles = useStyles();
44
+ const popupSurfaceClassName = usePopupSurfaceClassName();
45
+ const { disabled, inlinePopup } = state;
46
+ state.root.className = mergeClasses(datePickerClassNames.root, styles.base, disabled && styles.disabled, state.root.className);
47
+ if (state.popupSurface) {
48
+ state.popupSurface.className = mergeClasses(datePickerClassNames.popupSurface, popupSurfaceClassName, state.popupSurface.className, inlinePopup && styles.inline);
49
+ }
50
+ state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);
51
+ return state;
52
+ };
package/lib/components/DatePicker/useDatePickerStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/DatePicker/useDatePickerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DatePickerSlots, DatePickerState } from './DatePicker.types';\n\nexport const datePickerClassNames: SlotClassNames<DatePickerSlots> = {\n root: 'fui-DatePicker',\n calendar: 'fui-DatePicker__calendar',\n popupSurface: 'fui-DatePicker__popupSurface',\n};\n\nconst useStyles = makeStyles({\n base: {\n position: 'relative',\n cursor: 'pointer',\n '& input': {\n cursor: 'pointer',\n },\n },\n disabled: {\n cursor: 'default',\n '& input': {\n cursor: 'default',\n },\n },\n inline: {\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n});\n\nconst usePopupSurfaceClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow16,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: tokens.colorTransparentStroke,\n display: 'inline-flex',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\n/**\n * Apply styling to the DatePicker slots based on the state\n */\nexport const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => {\n 'use no memo';\n\n const styles = useStyles();\n const popupSurfaceClassName = usePopupSurfaceClassName();\n const { disabled, inlinePopup } = state;\n\n state.root.className = mergeClasses(\n datePickerClassNames.root,\n styles.base,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.popupSurface) {\n state.popupSurface.className = mergeClasses(\n datePickerClassNames.popupSurface,\n popupSurfaceClassName,\n state.popupSurface.className,\n inlinePopup && styles.inline,\n );\n }\n\n state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","datePickerClassNames","root","calendar","popupSurface","useStyles","base","position","cursor","disabled","inline","zIndex","usePopupSurfaceClassName","backgroundColor","colorNeutralBackground1","boxShadow","shadow16","borderRadius","borderRadiusMedium","borderWidth","borderStyle","borderColor","colorTransparentStroke","display","color","colorNeutralForeground1","body1","useDatePickerStyles_unstable","state","styles","popupSurfaceClassName","inlinePopup","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,UAAU;IACVC,cAAc;AAChB,EAAE;AAEF,MAAMC,YAAYR,WAAW;IAC3BS,MAAM;QACJC,UAAU;QACVC,QAAQ;QACR,WAAW;YACTA,QAAQ;QACV;IACF;IACAC,UAAU;QACRD,QAAQ;QACR,WAAW;YACTA,QAAQ;QACV;IACF;IACAE,QAAQ;QACN,+GAA+G;QAC/G,0GAA0G;QAC1GC,QAAQ;IACV;AACF;AAEA,MAAMC,2BAA2BhB,gBAAgB;IAC/CiB,iBAAiBd,OAAOe,uBAAuB;IAC/CC,WAAWhB,OAAOiB,QAAQ;IAC1BC,cAAclB,OAAOmB,kBAAkB;IACvCC,aAAa;IACbC,aAAa;IACbC,aAAatB,OAAOuB,sBAAsB;IAC1CC,SAAS;IACTC,OAAOzB,OAAO0B,uBAAuB;IACrC,GAAGzB,iBAAiB0B,KAAK;AAC3B;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASxB;IACf,MAAMyB,wBAAwBlB;IAC9B,MAAM,EAAEH,QAAQ,EAAEsB,WAAW,EAAE,GAAGH;IAElCA,MAAM1B,IAAI,CAAC8B,SAAS,GAAGlC,aACrBG,qBAAqBC,IAAI,EACzB2B,OAAOvB,IAAI,EACXG,YAAYoB,OAAOpB,QAAQ,EAC3BmB,MAAM1B,IAAI,CAAC8B,SAAS;IAGtB,IAAIJ,MAAMxB,YAAY,EAAE;QACtBwB,MAAMxB,YAAY,CAAC4B,SAAS,GAAGlC,aAC7BG,qBAAqBG,YAAY,EACjC0B,uBACAF,MAAMxB,YAAY,CAAC4B,SAAS,EAC5BD,eAAeF,OAAOnB,MAAM;IAEhC;IAEAkB,MAAMzB,QAAQ,CAAC6B,SAAS,GAAGlC,aAAaG,qBAAqBE,QAAQ,EAAEyB,MAAMzB,QAAQ,CAAC6B,SAAS;IAE/F,OAAOJ;AACT,EAAE"}
package/lib-commonjs/components/DatePicker/useDatePickerStyles.styles.raw.js ADDED
@@ -0,0 +1,68 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ datePickerClassNames: function() {
13
+ return datePickerClassNames;
14
+ },
15
+ useDatePickerStyles_unstable: function() {
16
+ return useDatePickerStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const datePickerClassNames = {
22
+ root: 'fui-DatePicker',
23
+ calendar: 'fui-DatePicker__calendar',
24
+ popupSurface: 'fui-DatePicker__popupSurface'
25
+ };
26
+ const useStyles = (0, _react.makeStyles)({
27
+ base: {
28
+ position: 'relative',
29
+ cursor: 'pointer',
30
+ '& input': {
31
+ cursor: 'pointer'
32
+ }
33
+ },
34
+ disabled: {
35
+ cursor: 'default',
36
+ '& input': {
37
+ cursor: 'default'
38
+ }
39
+ },
40
+ inline: {
41
+ // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
42
+ // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
43
+ zIndex: 1
44
+ }
45
+ });
46
+ const usePopupSurfaceClassName = (0, _react.makeResetStyles)({
47
+ backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
48
+ boxShadow: _reacttheme.tokens.shadow16,
49
+ borderRadius: _reacttheme.tokens.borderRadiusMedium,
50
+ borderWidth: '1px',
51
+ borderStyle: 'solid',
52
+ borderColor: _reacttheme.tokens.colorTransparentStroke,
53
+ display: 'inline-flex',
54
+ color: _reacttheme.tokens.colorNeutralForeground1,
55
+ ..._reacttheme.typographyStyles.body1
56
+ });
57
+ const useDatePickerStyles_unstable = (state)=>{
58
+ 'use no memo';
59
+ const styles = useStyles();
60
+ const popupSurfaceClassName = usePopupSurfaceClassName();
61
+ const { disabled, inlinePopup } = state;
62
+ state.root.className = (0, _react.mergeClasses)(datePickerClassNames.root, styles.base, disabled && styles.disabled, state.root.className);
63
+ if (state.popupSurface) {
64
+ state.popupSurface.className = (0, _react.mergeClasses)(datePickerClassNames.popupSurface, popupSurfaceClassName, state.popupSurface.className, inlinePopup && styles.inline);
65
+ }
66
+ state.calendar.className = (0, _react.mergeClasses)(datePickerClassNames.calendar, state.calendar.className);
67
+ return state;
68
+ };
package/lib-commonjs/components/DatePicker/useDatePickerStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/DatePicker/useDatePickerStyles.styles.ts"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { DatePickerSlots, DatePickerState } from './DatePicker.types';\n\nexport const datePickerClassNames: SlotClassNames<DatePickerSlots> = {\n root: 'fui-DatePicker',\n calendar: 'fui-DatePicker__calendar',\n popupSurface: 'fui-DatePicker__popupSurface',\n};\n\nconst useStyles = makeStyles({\n base: {\n position: 'relative',\n cursor: 'pointer',\n '& input': {\n cursor: 'pointer',\n },\n },\n disabled: {\n cursor: 'default',\n '& input': {\n cursor: 'default',\n },\n },\n inline: {\n // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n zIndex: 1,\n },\n});\n\nconst usePopupSurfaceClassName = makeResetStyles({\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow16,\n borderRadius: tokens.borderRadiusMedium,\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: tokens.colorTransparentStroke,\n display: 'inline-flex',\n color: tokens.colorNeutralForeground1,\n ...typographyStyles.body1,\n});\n\n/**\n * Apply styling to the DatePicker slots based on the state\n */\nexport const useDatePickerStyles_unstable = (state: DatePickerState): DatePickerState => {\n 'use no memo';\n\n const styles = useStyles();\n const popupSurfaceClassName = usePopupSurfaceClassName();\n const { disabled, inlinePopup } = state;\n\n state.root.className = mergeClasses(\n datePickerClassNames.root,\n styles.base,\n disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.popupSurface) {\n state.popupSurface.className = mergeClasses(\n datePickerClassNames.popupSurface,\n popupSurfaceClassName,\n state.popupSurface.className,\n inlinePopup && styles.inline,\n );\n }\n\n state.calendar.className = mergeClasses(datePickerClassNames.calendar, state.calendar.className);\n\n return state;\n};\n"],"names":["datePickerClassNames","useDatePickerStyles_unstable","root","calendar","popupSurface","useStyles","makeStyles","base","position","cursor","disabled","inline","zIndex","usePopupSurfaceClassName","makeResetStyles","backgroundColor","tokens","colorNeutralBackground1","boxShadow","shadow16","borderRadius","borderRadiusMedium","borderWidth","borderStyle","borderColor","colorTransparentStroke","display","color","colorNeutralForeground1","typographyStyles","body1","state","styles","popupSurfaceClassName","inlinePopup","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,oBAAAA;eAAAA;;IA0CAC,4BAAAA;eAAAA;;;uBA/C6C;4BACjB;AAIlC,MAAMD,uBAAwD;IACnEE,MAAM;IACNC,UAAU;IACVC,cAAc;AAChB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,MAAM;QACJC,UAAU;QACVC,QAAQ;QACR,WAAW;YACTA,QAAQ;QACV;IACF;IACAC,UAAU;QACRD,QAAQ;QACR,WAAW;YACTA,QAAQ;QACV;IACF;IACAE,QAAQ;QACN,+GAA+G;QAC/G,0GAA0G;QAC1GC,QAAQ;IACV;AACF;AAEA,MAAMC,2BAA2BC,IAAAA,sBAAAA,EAAgB;IAC/CC,iBAAiBC,kBAAAA,CAAOC,uBAAuB;IAC/CC,WAAWF,kBAAAA,CAAOG,QAAQ;IAC1BC,cAAcJ,kBAAAA,CAAOK,kBAAkB;IACvCC,aAAa;IACbC,aAAa;IACbC,aAAaR,kBAAAA,CAAOS,sBAAsB;IAC1CC,SAAS;IACTC,OAAOX,kBAAAA,CAAOY,uBAAuB;IACrC,GAAGC,4BAAAA,CAAiBC,KAAK;AAC3B;AAKO,MAAM7B,+BAA+B,CAAC8B;IAC3C;IAEA,MAAMC,SAAS3B;IACf,MAAM4B,wBAAwBpB;IAC9B,MAAM,EAAEH,QAAQ,EAAEwB,WAAW,EAAE,GAAGH;IAElCA,MAAM7B,IAAI,CAACiC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBpC,qBAAqBE,IAAI,EACzB8B,OAAOzB,IAAI,EACXG,YAAYsB,OAAOtB,QAAQ,EAC3BqB,MAAM7B,IAAI,CAACiC,SAAS;IAGtB,IAAIJ,MAAM3B,YAAY,EAAE;QACtB2B,MAAM3B,YAAY,CAAC+B,SAAS,GAAGC,IAAAA,mBAAAA,EAC7BpC,qBAAqBI,YAAY,EACjC6B,uBACAF,MAAM3B,YAAY,CAAC+B,SAAS,EAC5BD,eAAeF,OAAOrB,MAAM;IAEhC;IAEAoB,MAAM5B,QAAQ,CAACgC,SAAS,GAAGC,IAAAA,mBAAAA,EAAapC,qBAAqBG,QAAQ,EAAE4B,MAAM5B,QAAQ,CAACgC,SAAS;IAE/F,OAAOJ;AACT"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-datepicker-compat",
3
- "version": "0.6.7",
3
+ "version": "0.6.8",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -21,16 +21,16 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@fluentui/keyboard-keys": "^9.0.8",
24
- "@fluentui/react-calendar-compat": "^0.3.3",
25
- "@fluentui/react-field": "^9.3.7",
24
+ "@fluentui/react-calendar-compat": "^0.3.4",
25
+ "@fluentui/react-field": "^9.4.0",
26
26
  "@fluentui/react-icons": "^2.0.245",
27
- "@fluentui/react-input": "^9.6.7",
27
+ "@fluentui/react-input": "^9.7.0",
28
28
  "@fluentui/react-jsx-runtime": "^9.1.2",
29
- "@fluentui/react-popover": "^9.11.7",
30
- "@fluentui/react-portal": "^9.6.4",
31
- "@fluentui/react-positioning": "^9.19.0",
29
+ "@fluentui/react-popover": "^9.12.0",
30
+ "@fluentui/react-portal": "^9.7.0",
31
+ "@fluentui/react-positioning": "^9.20.0",
32
32
  "@fluentui/react-shared-contexts": "^9.24.0",
33
- "@fluentui/react-tabster": "^9.25.3",
33
+ "@fluentui/react-tabster": "^9.26.0",
34
34
  "@fluentui/react-theme": "^9.1.24",
35
35
  "@fluentui/react-utilities": "^9.22.0",
36
36
  "@griffel/react": "^1.5.22",