@fluentui/react-image 9.2.2 → 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.
- package/CHANGELOG.md +11 -2
- package/lib/components/Image/useImageStyles.styles.raw.js +69 -0
- package/lib/components/Image/useImageStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.js +85 -0
- package/lib-commonjs/components/Image/useImageStyles.styles.raw.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-image
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
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
|
+
|
|
7
16
|
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.2.2)
|
|
8
17
|
|
|
9
|
-
Thu, 26 Jun 2025 14:
|
|
18
|
+
Thu, 26 Jun 2025 14:11:55 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.2.1..@fluentui/react-image_v9.2.2)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
@@ -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
|
+
};
|
|
@@ -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"}
|
|
@@ -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
|
+
};
|
|
@@ -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"}
|