@fluentui/react-image 0.0.0-nightly-20250912-0407.1 → 0.0.0-nightly-20250916-0407.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.
package/CHANGELOG.md CHANGED
@@ -1,23 +1,23 @@
1
1
  # Change Log - @fluentui/react-image
2
2
 
3
- This log was last generated on Fri, 12 Sep 2025 04:21:53 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 16 Sep 2025 04:22:24 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250912-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightly-20250912-0407.1)
7
+ ## [0.0.0-nightly-20250916-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v0.0.0-nightly-20250916-0407.1)
8
8
 
9
- Fri, 12 Sep 2025 04:21:53 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.5..@fluentui/react-image_v0.0.0-nightly-20250912-0407.1)
9
+ Tue, 16 Sep 2025 04:22:24 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.5..@fluentui/react-image_v0.0.0-nightly-20250916-0407.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/react-shared-contexts to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
16
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
17
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
18
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
19
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250912-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/75c6bba1e9d82f60dd77867b9f2b6f031eb71e21) by beachball)
15
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
16
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
18
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
19
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250916-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/37bf08e59ccdeee1ac86f14d7c7ba8db049827ac) by beachball)
21
21
 
22
22
  ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.5)
23
23
 
@@ -47,26 +47,22 @@ const useStyles = /*#__PURE__*/__styles({
47
47
  },
48
48
  center: {
49
49
  st4lth: "f1plgu50",
50
- Ermj5k: "f14xojzb",
51
- Bqenvij: "f1l02sjl",
52
- a9b677: "fly5x3f"
50
+ Ermj5k: "f14xojzb"
53
51
  },
54
52
  contain: {
55
53
  st4lth: "f1kle4es",
56
- Ermj5k: "f14xojzb",
57
- Bqenvij: "f1l02sjl",
58
- a9b677: "fly5x3f"
54
+ Ermj5k: "f14xojzb"
59
55
  },
60
56
  "default": {},
61
57
  cover: {
62
58
  st4lth: "f1ps3kmd",
63
- Ermj5k: "f14xojzb",
64
- Bqenvij: "f1l02sjl",
65
- a9b677: "fly5x3f"
59
+ Ermj5k: "f14xojzb"
66
60
  },
67
61
  none: {
68
62
  st4lth: "f1plgu50",
69
- Ermj5k: ["f13uwng7", "fjmyj0p"],
63
+ Ermj5k: ["f13uwng7", "fjmyj0p"]
64
+ },
65
+ fitFill: {
70
66
  Bqenvij: "f1l02sjl",
71
67
  a9b677: "fly5x3f"
72
68
  },
@@ -80,12 +76,19 @@ const useStyles = /*#__PURE__*/__styles({
80
76
  p: -1
81
77
  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
82
78
  p: -1
83
- }], ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}"]
79
+ }], ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1plgu50{object-fit:none;}", ".f14xojzb{object-position:center;}", ".f1kle4es{object-fit:contain;}", ".f1ps3kmd{object-fit:cover;}", ".f13uwng7{object-position:left top;}", ".fjmyj0p{object-position:right top;}", ".f1l02sjl{height:100%;}", ".fly5x3f{width:100%;}"]
84
80
  });
85
81
  export const useImageStyles_unstable = state => {
86
82
  'use no memo';
87
83
 
88
84
  const styles = useStyles();
89
- 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);
85
+ const {
86
+ height,
87
+ width
88
+ } = state.root;
89
+ // eslint-disable-next-line eqeqeq
90
+ const hasExplicitSize = height != null || width != null;
91
+ const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
92
+ state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);
90
93
  return state;
91
94
  };
@@ -1 +1 @@
1
- {"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","Bqenvij","a9b677","contain","cover","none","block","d","p","useImageStyles_unstable","state","styles","className","fit","shape"],"sources":["useImageStyles.styles.js"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\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 },\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 // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n 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);\n return state;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAhB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAa,OAAA;IAAAjB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAc,MAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA;EAAAE,KAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAG,IAAA;IAAAN,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAK,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyDjB,CAAC;AACF,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAC5C,aAAa;;EACb,MAAMC,MAAM,GAAGxC,SAAS,CAAC,CAAC;EAC1BuC,KAAK,CAACxC,IAAI,CAAC0C,SAAS,GAAG9C,YAAY,CAACG,eAAe,CAACC,IAAI,EAAEyC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACJ,KAAK,IAAIK,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAC1B,QAAQ,IAAI2B,MAAM,CAAC3B,QAAQ,EAAE0B,KAAK,CAACd,MAAM,IAAIe,MAAM,CAACf,MAAM,EAAEe,MAAM,CAACD,KAAK,CAACG,GAAG,CAAC,EAAEF,MAAM,CAACD,KAAK,CAACI,KAAK,CAAC,EAAEJ,KAAK,CAACxC,IAAI,CAAC0C,SAAS,CAAC;EACnO,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"sources":["useImageStyles.styles.js"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,IAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAhB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAa,OAAA;IAAAjB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAc,MAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;IAAAC,MAAA;EAAA;EAAA;EAAAE,KAAA;IAAAH,MAAA;IAAAC,MAAA;EAAA;EAAAG,IAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuDjB,CAAC;AACF,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAC5C,aAAa;;EACb,MAAMC,MAAM,GAAGzC,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAE0C,MAAM;IAAEC;EAAM,CAAC,GAAGH,KAAK,CAACzC,IAAI;EACpC;EACA,MAAM6C,eAAe,GAAGF,MAAM,IAAI,IAAI,IAAIC,KAAK,IAAI,IAAI;EACvD,MAAME,kBAAkB,GAAGL,KAAK,CAACM,GAAG,KAAK,SAAS,IAAI,CAACF,eAAe;EACtEJ,KAAK,CAACzC,IAAI,CAACgD,SAAS,GAAGpD,YAAY,CAACG,eAAe,CAACC,IAAI,EAAE0C,MAAM,CAACxC,IAAI,EAAEuC,KAAK,CAACJ,KAAK,IAAIK,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAC3B,QAAQ,IAAI4B,MAAM,CAAC5B,QAAQ,EAAE2B,KAAK,CAACf,MAAM,IAAIgB,MAAM,CAAChB,MAAM,EAAEgB,MAAM,CAACD,KAAK,CAACM,GAAG,CAAC,EAAED,kBAAkB,IAAIJ,MAAM,CAACR,OAAO,EAAEQ,MAAM,CAACD,KAAK,CAACQ,KAAK,CAAC,EAAER,KAAK,CAACzC,IAAI,CAACgD,SAAS,CAAC;EACzQ,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -32,27 +32,25 @@ const useStyles = makeStyles({
32
32
  // Fit variations
33
33
  center: {
34
34
  objectFit: 'none',
35
- objectPosition: 'center',
36
- height: '100%',
37
- width: '100%'
35
+ objectPosition: 'center'
38
36
  },
39
37
  contain: {
40
38
  objectFit: 'contain',
41
- objectPosition: 'center',
42
- height: '100%',
43
- width: '100%'
39
+ objectPosition: 'center'
44
40
  },
45
41
  default: {
46
42
  },
47
43
  cover: {
48
44
  objectFit: 'cover',
49
- objectPosition: 'center',
50
- height: '100%',
51
- width: '100%'
45
+ objectPosition: 'center'
52
46
  },
53
47
  none: {
54
48
  objectFit: 'none',
55
- objectPosition: 'left top',
49
+ objectPosition: 'left top'
50
+ },
51
+ // When no explicit height/width props are provided, apply full-size
52
+ // sizing so fit modes behave as intended (object-fit fills the element).
53
+ fitFill: {
56
54
  height: '100%',
57
55
  width: '100%'
58
56
  },
@@ -64,6 +62,10 @@ const useStyles = makeStyles({
64
62
  export const useImageStyles_unstable = (state)=>{
65
63
  'use no memo';
66
64
  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);
65
+ const { height, width } = state.root;
66
+ // eslint-disable-next-line eqeqeq
67
+ const hasExplicitSize = height != null || width != null;
68
+ const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
69
+ state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);
68
70
  return state;
69
71
  };
@@ -1 +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"],"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"}
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 },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\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 },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n },\n\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\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 const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\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 shouldApplyFitFill && styles.fitFill,\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","contain","default","cover","none","fitFill","height","width","block","useImageStyles_unstable","state","styles","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"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;IAClB;IACAC,SAAS;QACPF,WAAW;QACXC,gBAAgB;IAClB;IACAE,SAAS;IAET;IACAC,OAAO;QACLJ,WAAW;QACXC,gBAAgB;IAClB;IACAI,MAAM;QACJL,WAAW;QACXC,gBAAgB;IAClB;IAEA,oEAAoE;IACpE,yEAAyE;IACzEK,SAAS;QACPC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfC,OAAO;QACLD,OAAO;IACT;AACF;AAEA,OAAO,MAAME,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAASjC;IAEf,MAAM,EAAE4B,MAAM,EAAEC,KAAK,EAAE,GAAGG,MAAMjC,IAAI;IACpC,kCAAkC;IAClC,MAAMmC,kBAAkBN,UAAU,QAAQC,SAAS;IACnD,MAAMM,qBAAqBH,MAAMI,GAAG,KAAK,aAAa,CAACF;IAEvDF,MAAMjC,IAAI,CAACsC,SAAS,GAAG1C,aACrBG,gBAAgBC,IAAI,EACpBkC,OAAOhC,IAAI,EACX+B,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAC3BE,MAAMxB,QAAQ,IAAIyB,OAAOzB,QAAQ,EACjCwB,MAAMf,MAAM,IAAIgB,OAAOhB,MAAM,EAC7BgB,MAAM,CAACD,MAAMI,GAAG,CAAC,EACjBD,sBAAsBF,OAAON,OAAO,EACpCM,MAAM,CAACD,MAAMM,KAAK,CAAC,EACnBN,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}
@@ -82,29 +82,25 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
82
82
  },
83
83
  center: {
84
84
  st4lth: "f1plgu50",
85
- Ermj5k: "f14xojzb",
86
- Bqenvij: "f1l02sjl",
87
- a9b677: "fly5x3f"
85
+ Ermj5k: "f14xojzb"
88
86
  },
89
87
  contain: {
90
88
  st4lth: "f1kle4es",
91
- Ermj5k: "f14xojzb",
92
- Bqenvij: "f1l02sjl",
93
- a9b677: "fly5x3f"
89
+ Ermj5k: "f14xojzb"
94
90
  },
95
91
  "default": {},
96
92
  cover: {
97
93
  st4lth: "f1ps3kmd",
98
- Ermj5k: "f14xojzb",
99
- Bqenvij: "f1l02sjl",
100
- a9b677: "fly5x3f"
94
+ Ermj5k: "f14xojzb"
101
95
  },
102
96
  none: {
103
97
  st4lth: "f1plgu50",
104
98
  Ermj5k: [
105
99
  "f13uwng7",
106
100
  "fjmyj0p"
107
- ],
101
+ ]
102
+ },
103
+ fitFill: {
108
104
  Bqenvij: "f1l02sjl",
109
105
  a9b677: "fly5x3f"
110
106
  },
@@ -148,17 +144,21 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
148
144
  ".f1whvlc6{box-shadow:var(--shadow4);}",
149
145
  ".f1plgu50{object-fit:none;}",
150
146
  ".f14xojzb{object-position:center;}",
151
- ".f1l02sjl{height:100%;}",
152
- ".fly5x3f{width:100%;}",
153
147
  ".f1kle4es{object-fit:contain;}",
154
148
  ".f1ps3kmd{object-fit:cover;}",
155
149
  ".f13uwng7{object-position:left top;}",
156
- ".fjmyj0p{object-position:right top;}"
150
+ ".fjmyj0p{object-position:right top;}",
151
+ ".f1l02sjl{height:100%;}",
152
+ ".fly5x3f{width:100%;}"
157
153
  ]
158
154
  });
159
155
  const useImageStyles_unstable = (state)=>{
160
156
  'use no memo';
161
157
  const styles = useStyles();
162
- 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);
158
+ const { height, width } = state.root;
159
+ // eslint-disable-next-line eqeqeq
160
+ const hasExplicitSize = height != null || width != null;
161
+ const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
162
+ 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], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);
163
163
  return state;
164
164
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\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 },\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 // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n 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);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","Bqenvij","a9b677","contain","cover","none","block","d","p","useImageStyles_unstable","state","styles","className","fit","shape"],"mappings":";;;;;;;;;;;IAEaI,eAAe;;;2BA6DQ;eAAvBwC;;;uBA/DwC,gBAAgB;AAE9D,wBAAwB;IAC3BvC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAhB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAa,OAAA,EAAA;QAAAjB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAc,MAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,WAAA,CAAA;IAAAE,KAAA,EAAA;QAAAL,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAG,IAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAI,KAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAK,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAyDjB,CAAC;AACK,iCAAiCE,KAAK,IAAG;IAC5C,aAAa;IACb,MAAMC,MAAM,GAAGxC,SAAS,CAAC,CAAC;IAC1BuC,KAAK,CAACxC,IAAI,CAAC0C,SAAS,OAAG9C,mBAAY,EAACG,eAAe,CAACC,IAAI,EAAEyC,MAAM,CAACvC,IAAI,EAAEsC,KAAK,CAACJ,KAAK,IAAIK,MAAM,CAACL,KAAK,EAAEI,KAAK,CAAC1B,QAAQ,IAAI2B,MAAM,CAAC3B,QAAQ,EAAE0B,KAAK,CAACd,MAAM,IAAIe,MAAM,CAACf,MAAM,EAAEe,MAAM,CAACD,KAAK,CAACG,GAAG,CAAC,EAAEF,MAAM,CAACD,KAAK,CAACI,KAAK,CAAC,EAAEJ,KAAK,CAACxC,IAAI,CAAC0C,SAAS,CAAC;IACnO,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"sources":["useImageStyles.styles.js"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const imageClassNames = {\n root: 'fui-Image'\n};\nconst useStyles = makeStyles({\n // Base styles\n base: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n borderRadius: tokens.borderRadiusNone,\n boxSizing: 'border-box',\n display: 'inline-block'\n },\n // Bordered styles\n bordered: {\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n // Shape variations\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n },\n // Shadow styles\n shadow: {\n boxShadow: tokens.shadow4\n },\n // Fit variations\n center: {\n objectFit: 'none',\n objectPosition: 'center'\n },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center'\n },\n default: {\n },\n cover: {\n objectFit: 'cover',\n objectPosition: 'center'\n },\n none: {\n objectFit: 'none',\n objectPosition: 'left top'\n },\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\n height: '100%',\n width: '100%'\n },\n // Block styles\n block: {\n width: '100%'\n }\n});\nexport const useImageStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\n state.root.className = mergeClasses(imageClassNames.root, styles.base, state.block && styles.block, state.bordered && styles.bordered, state.shadow && styles.shadow, styles[state.fit], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);\n return state;\n};\n"],"names":["shorthands","mergeClasses","__styles","tokens","imageClassNames","root","useStyles","base","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","bordered","icvyot","vrafjx","oivjwe","wvpqe5","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","circular","rounded","square","shadow","E5pizo","center","st4lth","Ermj5k","contain","cover","none","fitFill","Bqenvij","a9b677","block","d","p","useImageStyles_unstable","state","styles","height","width","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":"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"}
@@ -49,26 +49,24 @@ const useStyles = (0, _react.makeStyles)({
49
49
  // Fit variations
50
50
  center: {
51
51
  objectFit: 'none',
52
- objectPosition: 'center',
53
- height: '100%',
54
- width: '100%'
52
+ objectPosition: 'center'
55
53
  },
56
54
  contain: {
57
55
  objectFit: 'contain',
58
- objectPosition: 'center',
59
- height: '100%',
60
- width: '100%'
56
+ objectPosition: 'center'
61
57
  },
62
58
  default: {},
63
59
  cover: {
64
60
  objectFit: 'cover',
65
- objectPosition: 'center',
66
- height: '100%',
67
- width: '100%'
61
+ objectPosition: 'center'
68
62
  },
69
63
  none: {
70
64
  objectFit: 'none',
71
- objectPosition: 'left top',
65
+ objectPosition: 'left top'
66
+ },
67
+ // When no explicit height/width props are provided, apply full-size
68
+ // sizing so fit modes behave as intended (object-fit fills the element).
69
+ fitFill: {
72
70
  height: '100%',
73
71
  width: '100%'
74
72
  },
@@ -80,6 +78,10 @@ const useStyles = (0, _react.makeStyles)({
80
78
  const useImageStyles_unstable = (state)=>{
81
79
  'use no memo';
82
80
  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);
81
+ const { height, width } = state.root;
82
+ // eslint-disable-next-line eqeqeq
83
+ const hasExplicitSize = height != null || width != null;
84
+ const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
85
+ 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], shouldApplyFitFill && styles.fitFill, styles[state.shape], state.root.className);
84
86
  return state;
85
87
  };
@@ -1 +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"],"mappings":";;;;;;;;;;;IAKaI,eAAAA;;;IAmEAgC,uBAAAA;;;;uBAxEwC,iBAAiB;4BAC/C,wBAAwB;AAIxC,wBAAoD;IACzD/B,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3B,cAAc;IACdK,MAAM;QACJ,GAAGP,iBAAAA,CAAWQ,WAAW,CAACL,kBAAAA,CAAOM,mBAAmB,CAAC;QACrDC,cAAcP,kBAAAA,CAAOQ,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGd,iBAAAA,CAAWe,WAAW,CAAC,QAAQ;QAClC,GAAGf,iBAAAA,CAAWgB,WAAW,CAACb,kBAAAA,CAAOc,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcP,kBAAAA,CAAOgB,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcP,kBAAAA,CAAOkB,kBAAkB;IAAC;IACnDC,QAAQ,CAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWrB,kBAAAA,CAAOsB,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,gCAAgC,CAACO;IACtC;IAEA,MAAMC,SAAShC;IAEf+B,MAAMhC,IAAI,CAACkC,SAAS,GAAGtC,uBAAAA,EACrBG,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"}
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 },\n contain: {\n objectFit: 'contain',\n objectPosition: 'center',\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 },\n none: {\n objectFit: 'none',\n objectPosition: 'left top',\n },\n\n // When no explicit height/width props are provided, apply full-size\n // sizing so fit modes behave as intended (object-fit fills the element).\n fitFill: {\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 const { height, width } = state.root;\n // eslint-disable-next-line eqeqeq\n const hasExplicitSize = height != null || width != null;\n const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;\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 shouldApplyFitFill && styles.fitFill,\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","contain","default","cover","none","fitFill","height","width","block","useImageStyles_unstable","state","styles","hasExplicitSize","shouldApplyFitFill","fit","className","shape"],"mappings":";;;;;;;;;;;IAKaI,eAAAA;;;IAkEAiC,uBAAAA;;;;uBAvEwC,iBAAiB;4BAC/C,wBAAwB;AAIxC,wBAAoD;IACzDhC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3B,cAAc;IACdK,MAAM;QACJ,GAAGP,iBAAAA,CAAWQ,WAAW,CAACL,kBAAAA,CAAOM,mBAAmB,CAAC;QACrDC,cAAcP,kBAAAA,CAAOQ,gBAAgB;QAErCC,WAAW;QACXC,SAAS;IACX;IAEA,kBAAkB;IAClBC,UAAU;QACR,GAAGd,iBAAAA,CAAWe,WAAW,CAAC,QAAQ;QAClC,GAAGf,iBAAAA,CAAWgB,WAAW,CAACb,kBAAAA,CAAOc,eAAe,CAAC;IACnD;IAEA,mBAAmB;IACnBC,UAAU;QAAER,cAAcP,kBAAAA,CAAOgB,oBAAoB;IAAC;IACtDC,SAAS;QAAEV,cAAcP,kBAAAA,CAAOkB,kBAAkB;IAAC;IACnDC,QAAQ,CAER;IAEA,gBAAgB;IAChBC,QAAQ;QACNC,WAAWrB,kBAAAA,CAAOsB,OAAO;IAC3B;IAEA,iBAAiB;IACjBC,QAAQ;QACNC,WAAW;QACXC,gBAAgB;IAClB;IACAC,SAAS;QACPF,WAAW;QACXC,gBAAgB;IAClB;IACAE,SAAS,CAET;IACAC,OAAO;QACLJ,WAAW;QACXC,gBAAgB;IAClB;IACAI,MAAM;QACJL,WAAW;QACXC,gBAAgB;IAClB;IAEA,oEAAoE;IACpE,yEAAyE;IACzEK,SAAS;QACPC,QAAQ;QACRC,OAAO;IACT;IAEA,eAAe;IACfC,OAAO;QACLD,OAAO;IACT;AACF;AAEO,gCAAgC,CAACG;IACtC;IAEA,MAAMC,SAASjC;IAEf,MAAM,EAAE4B,MAAM,EAAEC,KAAK,EAAE,GAAGG,MAAMjC,IAAI;IACpC,kCAAkC;IAClC,MAAMmC,kBAAkBN,UAAU,QAAQC,SAAS;IACnD,MAAMM,qBAAqBH,MAAMI,GAAG,KAAK,aAAa,CAACF;IAEvDF,MAAMjC,IAAI,CAACsC,SAAS,OAAG1C,mBAAAA,EACrBG,gBAAgBC,IAAI,EACpBkC,OAAOhC,IAAI,EACX+B,MAAMF,KAAK,IAAIG,OAAOH,KAAK,EAC3BE,MAAMxB,QAAQ,IAAIyB,OAAOzB,QAAQ,EACjCwB,MAAMf,MAAM,IAAIgB,OAAOhB,MAAM,EAC7BgB,MAAM,CAACD,MAAMI,GAAG,CAAC,EACjBD,sBAAsBF,OAAON,OAAO,EACpCM,MAAM,CAACD,MAAMM,KAAK,CAAC,EACnBN,MAAMjC,IAAI,CAACsC,SAAS;IAGtB,OAAOL;AACT,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-image",
3
- "version": "0.0.0-nightly-20250912-0407.1",
3
+ "version": "0.0.0-nightly-20250916-0407.1",
4
4
  "description": "Fluent UI React Image component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -13,15 +13,15 @@
13
13
  "license": "MIT",
14
14
  "devDependencies": {
15
15
  "@fluentui/eslint-plugin": "*",
16
- "@fluentui/react-conformance": "0.0.0-nightly-20250912-0407.1",
17
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250912-0407.1",
16
+ "@fluentui/react-conformance": "0.0.0-nightly-20250916-0407.1",
17
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250916-0407.1",
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250912-0407.1",
22
- "@fluentui/react-utilities": "0.0.0-nightly-20250912-0407.1",
23
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250912-0407.1",
24
- "@fluentui/react-theme": "0.0.0-nightly-20250912-0407.1",
21
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250916-0407.1",
22
+ "@fluentui/react-utilities": "0.0.0-nightly-20250916-0407.1",
23
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250916-0407.1",
24
+ "@fluentui/react-theme": "0.0.0-nightly-20250916-0407.1",
25
25
  "@griffel/react": "^1.5.22",
26
26
  "@swc/helpers": "^0.5.1"
27
27
  },