@fluentui/react-image 9.2.1 → 9.3.0

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 +21 -2
  2. package/lib/components/Image/useImageStyles.styles.raw.js +69 -0
  3. package/lib/components/Image/useImageStyles.styles.raw.js.map +1 -0
  4. package/lib-commonjs/components/Image/useImageStyles.styles.raw.js +85 -0
  5. package/lib-commonjs/components/Image/useImageStyles.styles.raw.js.map +1 -0
  6. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-image
2
2
 
3
- This log was last generated on Wed, 18 Jun 2025 17:29:30 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Jul 2025 13:45:39 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.0)
8
+
9
+ Thu, 17 Jul 2025 13:45:39 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.2.2..@fluentui/react-image_v9.3.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
15
+
16
+ ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.2.2)
17
+
18
+ Thu, 26 Jun 2025 14:11:55 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.2.1..@fluentui/react-image_v9.2.2)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
24
+ - Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
25
+
7
26
  ## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.2.1)
8
27
 
9
- Wed, 18 Jun 2025 17:29:30 GMT
28
+ Wed, 18 Jun 2025 17:34:00 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.2.0..@fluentui/react-image_v9.2.1)
11
30
 
12
31
  ### Patches
package/lib/components/Image/useImageStyles.styles.raw.js ADDED
@@ -0,0 +1,69 @@
1
+ import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const imageClassNames = {
4
+ root: 'fui-Image'
5
+ };
6
+ const useStyles = makeStyles({
7
+ // Base styles
8
+ base: {
9
+ ...shorthands.borderColor(tokens.colorNeutralStroke1),
10
+ borderRadius: tokens.borderRadiusNone,
11
+ boxSizing: 'border-box',
12
+ display: 'inline-block'
13
+ },
14
+ // Bordered styles
15
+ bordered: {
16
+ ...shorthands.borderStyle('solid'),
17
+ ...shorthands.borderWidth(tokens.strokeWidthThin)
18
+ },
19
+ // Shape variations
20
+ circular: {
21
+ borderRadius: tokens.borderRadiusCircular
22
+ },
23
+ rounded: {
24
+ borderRadius: tokens.borderRadiusMedium
25
+ },
26
+ square: {
27
+ },
28
+ // Shadow styles
29
+ shadow: {
30
+ boxShadow: tokens.shadow4
31
+ },
32
+ // Fit variations
33
+ center: {
34
+ objectFit: 'none',
35
+ objectPosition: 'center',
36
+ height: '100%',
37
+ width: '100%'
38
+ },
39
+ contain: {
40
+ objectFit: 'contain',
41
+ objectPosition: 'center',
42
+ height: '100%',
43
+ width: '100%'
44
+ },
45
+ default: {
46
+ },
47
+ cover: {
48
+ objectFit: 'cover',
49
+ objectPosition: 'center',
50
+ height: '100%',
51
+ width: '100%'
52
+ },
53
+ none: {
54
+ objectFit: 'none',
55
+ objectPosition: 'left top',
56
+ height: '100%',
57
+ width: '100%'
58
+ },
59
+ // Block styles
60
+ block: {
61
+ width: '100%'
62
+ }
63
+ });
64
+ export const useImageStyles_unstable = (state)=>{
65
+ 'use no memo';
66
+ const styles = useStyles();
67
+ state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
68
+ return state;
69
+ };
package/lib/components/Image/useImageStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["shorthands","mergeClasses","makeStyles","tokens","imageClassNames","root","useStyles","base","borderColor","colorNeutralStroke1","borderRadius","borderRadiusNone","boxSizing","display","bordered","borderStyle","borderWidth","strokeWidthThin","circular","borderRadiusCircular","rounded","borderRadiusMedium","square","shadow","boxShadow","shadow4","center","objectFit","objectPosition","height","width","contain","default","cover","none","block","useImageStyles_unstable","state","styles","className","fit","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3B,cAAc;IACdK,MAAM;QACJ,GAAGP,WAAWQ,WAAW,CAACL,OAAOM,mBAAmB,CAAC;QACrDC,cAAcP,OAAOQ,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGd,WAAWe,WAAW,CAAC,QAAQ;QAClC,GAAGf,WAAWgB,WAAW,CAACb,OAAOc,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcP,OAAOgB,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcP,OAAOkB,kBAAkB;IAAC;IACnDC,QAAQ;IAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWrB,OAAOsB,OAAO;IAC3B;IAEA,iBAAiB;IACjBC,QAAQ;QACNC,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAC,SAAS;QACPJ,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAE,SAAS;IAET;IACAC,OAAO;QACLN,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAI,MAAM;QACJP,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfK,OAAO;QACLL,OAAO;IACT;AACF;AAEA,OAAO,MAAMM,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAAShC;IAEf+B,MAAMhC,IAAI,CAACkC,SAAS,GAAGtC,aACrBG,gBAAgBC,IAAI,EACpBiC,OAAO/B,IAAI,EACX8B,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAC3BE,MAAMvB,QAAQ,IAAIwB,OAAOxB,QAAQ,EACjCuB,MAAMd,MAAM,IAAIe,OAAOf,MAAM,EAC7Be,MAAM,CAACD,MAAMG,GAAG,CAAC,EACjBF,MAAM,CAACD,MAAMI,KAAK,CAAC,EACnBJ,MAAMhC,IAAI,CAACkC,SAAS;IAGtB,OAAOF;AACT,EAAE"}
package/lib-commonjs/components/Image/useImageStyles.styles.raw.js ADDED
@@ -0,0 +1,85 @@
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
+ imageClassNames: function() {
13
+ return imageClassNames;
14
+ },
15
+ useImageStyles_unstable: function() {
16
+ return useImageStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const imageClassNames = {
22
+ root: 'fui-Image'
23
+ };
24
+ const useStyles = (0, _react.makeStyles)({
25
+ // Base styles
26
+ base: {
27
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1),
28
+ borderRadius: _reacttheme.tokens.borderRadiusNone,
29
+ boxSizing: 'border-box',
30
+ display: 'inline-block'
31
+ },
32
+ // Bordered styles
33
+ bordered: {
34
+ ..._react.shorthands.borderStyle('solid'),
35
+ ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
36
+ },
37
+ // Shape variations
38
+ circular: {
39
+ borderRadius: _reacttheme.tokens.borderRadiusCircular
40
+ },
41
+ rounded: {
42
+ borderRadius: _reacttheme.tokens.borderRadiusMedium
43
+ },
44
+ square: {},
45
+ // Shadow styles
46
+ shadow: {
47
+ boxShadow: _reacttheme.tokens.shadow4
48
+ },
49
+ // Fit variations
50
+ center: {
51
+ objectFit: 'none',
52
+ objectPosition: 'center',
53
+ height: '100%',
54
+ width: '100%'
55
+ },
56
+ contain: {
57
+ objectFit: 'contain',
58
+ objectPosition: 'center',
59
+ height: '100%',
60
+ width: '100%'
61
+ },
62
+ default: {},
63
+ cover: {
64
+ objectFit: 'cover',
65
+ objectPosition: 'center',
66
+ height: '100%',
67
+ width: '100%'
68
+ },
69
+ none: {
70
+ objectFit: 'none',
71
+ objectPosition: 'left top',
72
+ height: '100%',
73
+ width: '100%'
74
+ },
75
+ // Block styles
76
+ block: {
77
+ width: '100%'
78
+ }
79
+ });
80
+ const useImageStyles_unstable = (state)=>{
81
+ 'use no memo';
82
+ const styles = useStyles();
83
+ state.root.className = (0, _react.mergeClasses)(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], styles[state.shape], state.root.className);
84
+ return state;
85
+ };
package/lib-commonjs/components/Image/useImageStyles.styles.raw.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Image/useImageStyles.styles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ImageSlots, ImageState } from './Image.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const imageClassNames: SlotClassNames<ImageSlots> = {\n root: 'fui-Image',\n};\n\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n\n boxSizing: 'border-box',\n display: 'inline-block',\n },\n\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n // Shape variations\n circular: { borderRadius: tokens.borderRadiusCircular },\n rounded: { borderRadius: tokens.borderRadiusMedium },\n square: {\n /* The square styles are exactly the same as the base styles. */\n },\n\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4,\n },\n\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n default: {\n /* The default styles are exactly the same as the base styles. */\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center',\n height: '100%',\n width: '100%',\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n height: '100%',\n width: '100%',\n },\n\n // Block styles\n block: {\n width: '100%',\n },\n});\n\nexport const useImageStyles_unstable = (state: ImageState): ImageState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n imageClassNames.root,\n styles.base,\n state.block && styles.block,\n state.bordered && styles.bordered,\n state.shadow && styles.shadow,\n styles[state.fit],\n styles[state.shape],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["imageClassNames","useImageStyles_unstable","root","useStyles","makeStyles","base","shorthands","borderColor","tokens","colorNeutralStroke1","borderRadius","borderRadiusNone","boxSizing","display","bordered","borderStyle","borderWidth","strokeWidthThin","circular","borderRadiusCircular","rounded","borderRadiusMedium","square","shadow","boxShadow","shadow4","center","objectFit","objectPosition","height","width","contain","default","cover","none","block","state","styles","className","mergeClasses","fit","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,eAAAA;eAAAA;;IAmEAC,uBAAAA;eAAAA;;;uBAxEwC;4BAC9B;AAIhB,MAAMD,kBAA8C;IACzDE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3B,cAAc;IACdC,MAAM;QACJ,GAAGC,iBAAAA,CAAWC,WAAW,CAACC,kBAAAA,CAAOC,mBAAmB,CAAC;QACrDC,cAAcF,kBAAAA,CAAOG,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGR,iBAAAA,CAAWS,WAAW,CAAC,QAAQ;QAClC,GAAGT,iBAAAA,CAAWU,WAAW,CAACR,kBAAAA,CAAOS,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcF,kBAAAA,CAAOW,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcF,kBAAAA,CAAOa,kBAAkB;IAAC;IACnDC,QAAQ,CAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWhB,kBAAAA,CAAOiB,OAAO;IAC3B;IAEA,iBAAiB;IACjBC,QAAQ;QACNC,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAC,SAAS;QACPJ,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAE,SAAS,CAET;IACAC,OAAO;QACLN,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IACAI,MAAM;QACJP,WAAW;QACXC,gBAAgB;QAChBC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfK,OAAO;QACLL,OAAO;IACT;AACF;AAEO,MAAM7B,0BAA0B,CAACmC;IACtC;IAEA,MAAMC,SAASlC;IAEfiC,MAAMlC,IAAI,CAACoC,SAAS,GAAGC,IAAAA,mBAAAA,EACrBvC,gBAAgBE,IAAI,EACpBmC,OAAOhC,IAAI,EACX+B,MAAMD,KAAK,IAAIE,OAAOF,KAAK,EAC3BC,MAAMtB,QAAQ,IAAIuB,OAAOvB,QAAQ,EACjCsB,MAAMb,MAAM,IAAIc,OAAOd,MAAM,EAC7Bc,MAAM,CAACD,MAAMI,GAAG,CAAC,EACjBH,MAAM,CAACD,MAAMK,KAAK,CAAC,EACnBL,MAAMlC,IAAI,CAACoC,SAAS;IAGtB,OAAOF;AACT"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-image",
3
- "version": "9.2.1",
3
+ "version": "9.3.0",
4
4
  "description": "Fluent UI React Image component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,8 +19,8 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@fluentui/react-shared-contexts": "^9.24.0",
22
- "@fluentui/react-utilities": "^9.21.1",
23
- "@fluentui/react-jsx-runtime": "^9.1.1",
22
+ "@fluentui/react-utilities": "^9.22.0",
23
+ "@fluentui/react-jsx-runtime": "^9.1.2",
24
24
  "@fluentui/react-theme": "^9.1.24",
25
25
  "@griffel/react": "^1.5.22",
26
26
  "@swc/helpers": "^0.5.1"